@agentwhy/cli 0.0.0-dev

package/dist/report/start/conversations/conversation-columns.js

@@ -0,0 +1,187 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { pill } from '../../render/ui/button.js';
+import { dayName } from '../../render/ui/local-date.js';
+import { LOOKS } from '../../render/ui/status-look.js';
+import { MODE_SVG } from '../../render/ui/mode-icon.js';
+import { glyphIcon, statusIcon } from '../../render/ui/status-icon.js';
+import { inLanguages, LANGS, translator } from '../../render/report-copy.js';
+import { tag } from '../../render/ui/tag.js';
+import { idInKey } from '../../../core/session-catalogue.js';
+import { PROVIDER_NAMES } from '../../../core/session-format.js';
+/**
+ * `When · What you asked · What happened · Your setting · Action` (`for-people-who-build-with-ai.md` F14; the
+ * maintainer's design of 2026-09-25, the fourth column named Your setting the same day), wherever conversations are listed: Conversations, and a day's window on This month. What the
+ * AI did and how many files it reached are one column - the look, counted where it read something, and under it "See
+ * all {n} files →", which opens F58's window. Whether it was fixed is the next one, so a read stays a read.
+ */
+export const CONVERSATION_TABLE = {
+    head: ['conv.col.when', 'conv.col.ask', 'conv.col.happened', 'conv.col.setting', 'conv.col.action'].map((key) => inLanguages((t) => t(key))),
+    columns: '110px minmax(220px,1.5fr) minmax(240px,1fr) 140px 150px',
+    minWidth: 1000,
+    attributes: ' data-conversations',
+};
+/** The day a conversation happened on: Today, Yesterday, or its date. */
+function whenName(item) {
+    return inLanguages((t, lang) => (item.relative === undefined ? dayName(item.day, lang) : t('conv.day.' + item.relative)));
+}
+/**
+ * One conversation as a row. What it says it did is its look; its Action button leads to its report, and a
+ * conversation with no report leads nowhere and says so rather than drawing a link that fails (P2). The row itself is
+ * not a link (the maintainer, 2026-09-25): a click beside the button, or on "See all {n} files", goes nowhere else.
+ */
+export function conversationRow(item, widen, include = false) {
+    const { entry } = item;
+    const report = entry.report.kind === 'generated' ? entry.report.file : undefined;
+    const title = entry.title === undefined ? undefined : e(entry.title);
+    const ask = title ?? inLanguages((t) => t('conv.untitled'));
+    const look = LOOKS[item.look];
+    const utc = new Date(entry.modifiedAt).toISOString().slice(0, 16).replace('T', ' ') + ' UTC';
+    // Cut from the id, not the key: every Codex key starts `codex-`, which told no row from another.
+    const bare = idInKey(entry.name);
+    const id = bare.length > 8 ? bare.slice(0, 8) + '…' : bare;
+    const tech = '<span class="cw-tech"><span title="' + e(entry.name) + '">' + e(id) + '</span> · ' + utc + ' · ' +
+        inLanguages((t) => t('conv.tech.helpers', { n: entry.delegations })) +
+        (item.look === 'outside' ? ' · ' + inLanguages((t) => t('conv.tech.widen', { command: '<code>' + e(widen) + '</code>' })) : '') + '</span>';
+    const action = look.needsFix && report !== undefined
+        ? pill({ label: inLanguages((t) => t('conv.act.fix')), tone: 'primary', size: 'task', href: e(report) })
+        : report !== undefined
+            ? pill({ label: inLanguages((t) => t('conv.act.see')), tone: 'outline', size: 'task', href: e(report) })
+            // F55: a conversation older than the run is checked on request, where the page can ask (not a shared one).
+            : item.look === 'outside' && include
+                ? '<span class="cw-include-cell">' + pill({
+                    label: inLanguages((t) => t('conv.act.include')),
+                    tone: 'outline',
+                    size: 'task',
+                    button: true,
+                    attributes: ' data-include="' + e(entry.name) + '" data-command="' + e(widen) + '" data-include-words="' + e(JSON.stringify(includeWords())) + '"',
+                }) + '<span class="cw-include-say" data-include-say hidden></span></span>'
+                : pill({ label: inLanguages((t) => t('conv.act.none')), tone: 'quiet', size: 'task' });
+    return {
+        cells: [
+            '<span class="cw-when">' + whenName(item) + '</span><span class="cw-time">' + item.time + '</span>',
+            // X28: every row names the AI the conversation was with, in the badge that says where something came from (§9.2).
+            '<span class="cw-ask">' + ask + '</span><span class="cw-ai">' + tag(e(PROVIDER_NAMES[entry.provider]), 'grey', 'badge') + '</span>' + tech,
+            whatHappened(item, report),
+            fixedCell(item.look),
+            '<span class="cw-action">' + action + '</span>',
+        ],
+        // A read of files the person let it read is put before them too, with its bar, and leads to its report (F57a).
+        bar: look.attention,
+        ...(look.tone === 'sand' ? { barTone: 'sand' } : {}),
+        // live-pages L7: a conversation the page did not have before is lit when it arrives.
+        attributes: ' data-live-key="' + e(entry.name) + '" data-day="' + item.day.number + '" data-look="' + item.look + '" data-search="' + e((entry.title ?? '').toLowerCase() + ' ' + item.files.join(' ').toLowerCase()) + '"',
+    };
+}
+/**
+ * What happened: the look, counted where the AI read something ("Read 5 private files" - a count, never the names,
+ * guidelines §9.1), and under it the way to every file the conversation reached. The way is a link to the report's
+ * Files tab, which the page's script turns into F58's window. A conversation with no report, or none counted, has only
+ * its look: the look says why. A read every file of which was marked done is still drawn as the read it was, in coral
+ * (the maintainer, 2026-09-25: "…, now fixed" in mint read as if nothing had happened); the next column says it is fixed.
+ * A read of only files the person let it read is its own look, in Track's sand: it read them, and nothing was left to fix (F57a).
+ */
+function whatHappened(item, report) {
+    const look = item.look === 'fixed' ? 'read' : item.look;
+    const label = look === 'read' && item.read > 0 ? inLanguages((t) => t('conv.did.read', { n: item.read })) : undefined;
+    // A gap does not erase what the record established. Keep the uncertain look, and name its positive observation
+    // separately; the title only says what the person asked, while this count comes from confirmed file evidence.
+    const knownNames = item.look === 'unchecked' && item.entry.report.kind === 'generated'
+        ? (item.entry.report.files ?? []).filter((file) => file.kind === 'named' || file.kind === 'result').length : 0;
+    const known = knownNames === 0 ? '' : '<span class="cw-known">' + inLanguages((t) => t('conv.did.partial.name', { n: knownNames })) + '</span>';
+    const n = item.reached ?? 0;
+    const all = report === undefined || n === 0 ? '' :
+        '<a class="cw-see" href="' + e(report) + '#files" data-all-files="' + e(report) + '">' + inLanguages((t) => t('conv.seeAll', { n })) + '</a>';
+    return '<span class="cw-did">' + statusIcon(look, label) + known + all + '</span>';
+}
+/**
+ * Your setting: ✓ in mint once every file the AI read was marked done, ✕ in coral while one is not, and grey words where there
+ * was nothing to fix or where the run cannot tell (F16, F17): never an empty cell (guidelines §8). A read of only files
+ * the person chose Track for was never something to fix, and is not "nothing" either (the maintainer, 2026-09-25): it
+ * says the mode, with Settings' eye and words, in the sand of its look (F57a).
+ */
+function fixedCell(look) {
+    const say = (key) => inLanguages((t) => t(key));
+    if (look === 'fixed')
+        return glyphIcon('✓', 'mint', say('conv.fixed.yes'));
+    if (look === 'read')
+        return glyphIcon('✕', 'coral', say('conv.fixed.no'));
+    if (look === 'allowed')
+        return glyphIcon(MODE_SVG.tell, 'sand', say('set.mode.tell'));
+    return '<span class="cw-fixed-plain">' + say(LOOKS[look].known ? 'conv.fixed.na' : 'conv.fixed.unknown') + '</span>';
+}
+/** What the Check it button says as it works, in every language: one attribute cannot hold three. */
+function includeWords() {
+    return Object.fromEntries(LANGS.map((lang) => {
+        const t = translator(lang);
+        return [lang, { saving: t('conv.include.saving'), refused: t('conv.include.refused'), asFile: t('conv.include.asFile'), unreachable: t('conv.include.unreachable') }];
+    }));
+}
+export const CONVERSATION_COLUMNS_STYLE = String.raw `
+.cw-when{display:block;font-size:15.5px;font-weight:600;white-space:nowrap}
+.cw-time{display:block;font-size:14px;color:var(--text-3);margin-top:4px}
+.cw-ask{display:block;font-size:16px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
+.cw-ai{display:block;margin-top:6px}
+.cw-tech{display:none;font-family:var(--mono);font-size:12.5px;color:var(--text-3);margin-top:7px;overflow-wrap:anywhere}
+.cw-tech code{font-family:inherit;color:var(--text-2)}
+.shell-main:has(#conv-tech:checked) .cw-tech{display:block}
+.dt[data-conversations]{border-radius:18px}
+.dt[data-conversations] .dt-head{padding:16px 24px;font-size:13.5px;column-gap:22px}
+.dt[data-conversations] .dt-row{padding:20px 24px;column-gap:22px}
+/* A group's heading reads as one (the maintainer, 2026-09-25): at the size of a row's words, not a label's. */
+.dt[data-conversations] .dt-group{padding:14px 24px;font-size:15.5px;font-weight:650;letter-spacing:0;color:var(--text)}
+.dt[data-conversations] .dt-group-cell{gap:10px}
+.dt[data-conversations] .dt-group-dot{width:9px;height:9px}
+.dt[data-conversations] .dt-group-count{font-size:15px;font-weight:600;color:var(--text-3)}
+.cw-did{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
+.cw-did .look{gap:12px}
+.cw-did .look-glyph{width:30px;height:30px;font-size:14px}
+.cw-did .look-label{font-size:15.5px}
+.cw-known{margin-left:42px;font-size:14px;line-height:1.35;color:var(--text-2)}
+.cw-see{margin-left:42px;font-size:14px;font-weight:500;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--white-28);text-underline-offset:5px;white-space:nowrap}
+.cw-see:hover{color:var(--text);text-decoration-color:var(--text-2)}
+.cw-fixed-plain{font-size:14px;color:var(--text-3);white-space:nowrap}
+.cw-action{display:flex}
+.cw-include-cell{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
+.cw-include-say{font-size:12.5px;line-height:1.45;color:var(--coral-text);max-width:220px}
+.cw-include-say[hidden]{display:none}
+.cw-include-say code{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--text);word-break:break-all;user-select:all}
+`;
+/**
+ * F55: **Check it** asks the page's server to write the report of a conversation older than the run, and reads the page
+ * again once it has, so the row shows what the report found. Opened as a file, it shows the command that includes it.
+ * The server's refusal is said in its own words (R59).
+ */
+export const CONVERSATION_ROW_SCRIPT = String.raw `
+document.addEventListener('click', (event) => {
+  const button = event.target.closest('[data-include]');
+  if (!button) return;
+  const cell = button.closest('.cw-include-cell');
+  const line = cell && cell.querySelector('[data-include-say]');
+  const words = JSON.parse(button.dataset.includeWords || '{}');
+  const word = (key) => (words[document.documentElement.dataset.lang] || words.en || {})[key] || '';
+  const say = (text, command) => {
+    if (!line) return;
+    line.textContent = text;
+    if (command) {
+      const code = document.createElement('code');
+      code.textContent = command;
+      line.append(code);
+    }
+    line.hidden = false;
+  };
+  if (location.protocol !== 'http:' && location.protocol !== 'https:') { say(word('asFile'), button.dataset.command); return; }
+  button.disabled = true;
+  say(word('saving'));
+  fetch('api/include', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: button.dataset.include }) })
+    .then((response) => response.text().then((text) => {
+      let answer = {};
+      try { answer = JSON.parse(text); } catch { answer = { message: text.trim() }; }
+      return { ok: response.ok && answer.ok === true, message: answer.message || String(response.status) };
+    }), () => ({ ok: false, message: word('unreachable') }))
+    .then((answer) => {
+      if (answer.ok) { location.replace(location.pathname + '?at=' + Date.now() + location.hash); return; }
+      button.disabled = false;
+      say(word('refused') + ' ' + answer.message);
+    });
+});
+`;

package/dist/report/start/conversations/conversations-renderer.js

@@ -0,0 +1,54 @@
+import { INDEX_CONTENT_SECURITY_POLICY_META } from '../../render/html-head.js';
+import { inLanguages } from '../../render/report-copy.js';
+import { appSidebar } from '../../render/ui/app-sidebar.js';
+import { ASK_PANEL_SCRIPT, ASK_PANEL_STYLE } from '../../render/ui/ask-panel.js';
+import { pageShell } from '../../render/ui/page-shell.js';
+import { appNav, sidebarProject } from '../app-nav.js';
+import { projectsWindows } from '../projects/projects-window.js';
+import { periodSection, PERIOD_PAGE_LIBRARIES, PERIOD_PAGE_SCRIPTS, PERIOD_PAGE_STYLES, TECH_TOGGLE } from './period-section.js';
+import { emptyWeek, EMPTY_WEEK_STYLE } from './empty-week.js';
+import { filesWindow, FILES_WINDOW_SCRIPTS, FILES_WINDOW_STYLES } from './files-window.js';
+import { weekTitle, weekView } from './week-view.js';
+import { conversationWeeks } from './weeks.js';
+import { pageNotice } from '../page-notice.js';
+/**
+ * The Conversations page `start` writes as `index.html` (`for-people-who-build-with-ai.md` §3 A; design file
+ * *agentwhy Sessions v2*): one week at a time, the answer first, then where to start, then the days, then what needs
+ * attention and, folded, the rest. It is made of the UI kit's pieces and adds only what is its own - the week view,
+ * the table's columns and the script that switches weeks (`.ai/plans/2026-09-23-conversations-redesign.md`).
+ */
+export class ConversationsRenderer {
+    #links;
+    constructor(links) {
+        this.#links = links;
+    }
+    render(index) {
+        const { weeks } = conversationWeeks(index);
+        return pageShell({
+            // which-project V2, V11: the person's projects, opened from the sidebar's card.
+            windows: projectsWindows(index),
+            title: 'conv.title',
+            // nothing-updates-by-itself U4: the update notice, where the project's hooks run an older release.
+            ...pageNotice(index),
+            policy: INDEX_CONTENT_SECURITY_POLICY_META,
+            styles: [...PERIOD_PAGE_STYLES, ...FILES_WINDOW_STYLES, EMPTY_WEEK_STYLE, ASK_PANEL_STYLE],
+            libraries: PERIOD_PAGE_LIBRARIES,
+            scripts: [...PERIOD_PAGE_SCRIPTS, ...FILES_WINDOW_SCRIPTS, ASK_PANEL_SCRIPT],
+            sidebar: appSidebar({
+                ...sidebarProject(index),
+                home: this.#links.conversations,
+                items: appNav(index, 'conversations', this.#links),
+            }),
+            main: TECH_TOGGLE + weeks.map((week, at) => periodSection(weeks, at, index, {
+                kind: 'week',
+                eyebrow: weekTitle(week),
+                view: weekView(weeks, at),
+                zero: 'conv.hero.fact.zero',
+                clean: inLanguages((t) => t('conv.clean.title')),
+                whole: 'conv.day.clear',
+                lists: true,
+                ...(week.conversations.length === 0 ? { empty: emptyWeek(weeks, at, index, this.#links) } : {}),
+            })).join('') + filesWindow(),
+        });
+    }
+}

package/dist/report/start/conversations/empty-week.js

@@ -0,0 +1,120 @@
+import { inLanguages } from '../../render/report-copy.js';
+import { askPanel, askTrigger } from '../../render/ui/ask-panel.js';
+import { settingsView } from '../settings/settings-view.js';
+/** The written answers "✦ Nothing showing up?" opens: one box on the page, since only this week can be empty. */
+const ASK = 'conv-ask';
+/**
+ * This week, with no conversation in it yet (the maintainer's design, 2026-09-29): that it is normal, since when, and
+ * what keeps the private files meanwhile; then, under the days, what happens next and where to look when nothing shows
+ * up. Only the current week can be empty - a week nothing happened in is not offered (`weeks.ts`) - so every line may
+ * say "yet". Nothing is said that the model does not hold: the protection card only where the rules and `refuse` could
+ * both be read, and "Connected" only while the server answers the page's asks (`live-script.ts`).
+ */
+export function emptyWeek(weeks, at, index, links) {
+    const week = weeks[at];
+    const older = weeks[at + 1];
+    const protection = protectionOf(index);
+    const safe = protection?.blocked === true && !protection.chosen;
+    // On a Monday, "since Monday" is today.
+    const since = week.days[0]?.today === true ? 'conv.empty.lead.today' : 'conv.empty.lead';
+    return {
+        lead: inLanguages((t) => t(since) + (safe ? ' ' + t('conv.empty.safe') : '')),
+        ...(protection === undefined ? {} : { guide: guideOf(protection, older, at, links) }),
+        after: nextSteps() + foot(),
+    };
+}
+/**
+ * Where the files are blocked whole (`block-means-blocked` K1, K2 - the rules and `refuse`, for every row the person
+ * chose to block), the mint lock, with the one way on: the week before. Where Settings would say "{n} private files
+ * aren't fully blocked", the coral card that leads there. Anything between is not claimed either way.
+ */
+function guideOf(protection, older, at, links) {
+    if (!protection.blocked) {
+        return {
+            tone: 'coral',
+            title: inLanguages((t) => t('conv.empty.gap', { n: protection.gaps })),
+            body: inLanguages((t) => t('conv.empty.gap.body')),
+            action: { label: inLanguages((t) => t('conv.empty.settings')), href: links.settings },
+        };
+    }
+    return {
+        tone: 'mint',
+        mark: 'lock',
+        title: inLanguages((t) => t('conv.empty.on')),
+        body: inLanguages((t) => t(protection.chosen ? 'conv.empty.on.chosen' : 'conv.empty.on.body') + (protection.alert ? ' ' + t('conv.empty.on.alert') : '')),
+        ...(older === undefined ? {} : {
+            action: {
+                label: inLanguages((t) => t(older.ago === 1 ? 'conv.empty.last' : 'conv.empty.earlier')),
+                href: '#week-' + older.ago,
+                attributes: ' data-period-go="' + (at + 1) + '"',
+                light: true,
+            },
+        }),
+    };
+}
+/**
+ * The project's protection, from the facts Settings shows (`settings-view.ts`), or undefined where any of them cannot be
+ * read - a shared page, a folder that is no project, a hook that reads a policy the page cannot see into.
+ */
+function protectionOf(index) {
+    const settings = index.settings;
+    if (settings === undefined || index.shared || index.notAProject !== undefined || settings.hooks === undefined || settings.held === undefined)
+        return undefined;
+    const view = settingsView(settings);
+    if (!view.known || !seen(view.reads) || !seen(settings.hooks.reads.refuse))
+        return undefined;
+    if (view.unfinished.rows > 0)
+        return { blocked: false, gaps: view.unfinished.rows };
+    const block = view.rows.filter((row) => row.mode === 'block');
+    if (block.length === 0 || !view.stop.on || block.some((row) => !row.watched))
+        return undefined;
+    return {
+        blocked: true,
+        // Files the person chose Tell me for are read, and told: "your private files stay blocked" would not be true of them (F57).
+        chosen: block.length < view.rows.length,
+        // A try at a blocked file is told only where `watch` runs and tells about the tries it stopped (F29, F30).
+        alert: view.alerts.on && view.stopped.on,
+    };
+}
+/** The rules a hook reads are ones this page can list: the built-in list, or one of the project's two files. */
+function seen(reads) {
+    return reads === 'default' || reads === 'local' || reads === 'shared';
+}
+/**
+ * "What happens next": three numbered cards. agentwhy reads Claude Code's and Codex's conversations and no other AI's
+ * (`proj.which`, which the answers below repeat), so the first names those two.
+ */
+function nextSteps() {
+    return '<section class="cw-next"><h2 class="cw-h2">' + inLanguages((t) => t('conv.next')) + '</h2><ol class="cw-next-list">' +
+        [1, 2, 3].map((n) => '<li class="cw-next-item"><span class="cw-next-n" aria-hidden="true">' + n + '</span>' +
+            '<span class="cw-next-title">' + inLanguages((t) => t('conv.next.' + n + '.title')) + '</span>' +
+            '<span class="cw-next-body">' + inLanguages((t) => t('conv.next.' + n + '.body')) + '</span></li>').join('') +
+        '</ol></section>';
+}
+/**
+ * "● Connected", drawn only while the server answers (`:root[data-live="on"]`); and "✦ Nothing showing up?", which
+ * opens written answers (F43: no model until O1 is decided, so no "Ask AI"). With no script the answers stand open.
+ */
+function foot() {
+    return '<div class="cw-empty-foot"><span class="cw-live"><span class="cw-live-dot" aria-hidden="true"></span>' +
+        inLanguages((t) => t('conv.live')) + '</span>' +
+        askTrigger(inLanguages((t) => t('conv.ask')), ASK) + '</div>' +
+        askPanel([
+            { question: inLanguages((t) => t('conv.ask.which')), answer: inLanguages((t) => t('proj.which')) },
+            { question: inLanguages((t) => t('conv.ask.where')), answer: inLanguages((t) => t('conv.ask.where.a')) },
+        ], ASK);
+}
+export const EMPTY_WEEK_STYLE = String.raw `
+.cw-next{margin:4px 0 20px}
+.cw-next .cw-h2{margin-bottom:14px}
+.cw-next-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
+.cw-next-item{display:flex;flex-direction:column;align-items:flex-start;padding:22px 22px 24px;border-radius:14px;background:var(--card);border:1px solid var(--white-09)}
+.cw-next-n{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:16px;border-radius:50%;background:var(--coral-14);color:var(--coral-text);font-size:14px;font-weight:650}
+.cw-next-title{font-size:17px;font-weight:600;margin-bottom:6px}
+.cw-next-body{font-size:15px;line-height:1.5;color:var(--text-2)}
+.cw-empty-foot{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap}
+.cw-live{display:none;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
+:root[data-live="on"] .cw-live{display:inline-flex}
+.cw-live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}
+.cw-empty-foot .ak-trigger{font-weight:600}
+`;

package/dist/report/start/conversations/files-window.js

@@ -0,0 +1,166 @@
+import { FILES_SCRIPT, FILES_VIEW_STYLE } from '../../render/report-page/files-view.js';
+import { HELPERS_SCRIPT, HELPERS_VIEW_STYLE } from '../../render/report-page/helpers-view.js';
+import { STORY_WINDOW_STYLE } from '../../render/report-page/story-window.js';
+import { AVATAR_STYLE } from '../../render/ui/avatar.js';
+import { PILL_TABS_SCRIPT, PILL_TABS_STYLE } from '../../render/ui/pill-tabs.js';
+import { STAT_STYLE } from '../../render/ui/stats.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { closeButton, pill } from '../../render/ui/button.js';
+import { LABELLED_SELECT_STYLE } from '../../render/ui/labelled-select.js';
+import { CLOSES, popup, popupFoot, POPUP_SCRIPT, POPUP_STYLE } from '../../render/ui/popup.js';
+import { TAG_STYLE } from '../../render/ui/tag.js';
+const ID = 'conv-files';
+/**
+ * Every file of one conversation, in a window (`for-people-who-build-with-ai.md` F58; O15 decided (b)): one window on
+ * the page, empty until a row's "See all {n} files" opens it - on Conversations, or in a day's window on This month,
+ * over which it opens. What it shows is not written here - it is the Files section
+ * of that conversation's report, read from the server that serves both, so the window and the report's tab are one
+ * view and cannot drift apart. Above it, what the person asked and when; under it, the way to the whole report.
+ */
+export function filesWindow() {
+    return popup({
+        id: ID,
+        size: 'wide',
+        labelledBy: ID + '-title',
+        body: '<div class="cwf-head"><p class="cwf-ask" id="' + ID + '-title">' +
+            inLanguages((t) => t('conv.files.asked', { ask: '<span data-files-ask></span>', when: '<span data-files-when></span>' })) + '</p>' +
+            closeButton(labelAttributes((t) => t('app.close')) + CLOSES) + '</div>' +
+            '<p class="cwf-loading" data-files-loading>' + inLanguages((t) => t('conv.files.loading')) + '</p>' +
+            '<div class="cwf-body" data-files-body></div>' +
+            // The windows of the files above, brought from the report with them; each opens over this one.
+            '<div data-files-windows></div>' +
+            popupFoot(inLanguages((t) => t('conv.files.note')), pill({ label: inLanguages((t) => t('app.close')), tone: 'outline', size: 'md', button: true, attributes: CLOSES }) +
+                pill({ label: inLanguages((t) => t('conv.files.full')), tone: 'outline', size: 'md', href: '#', attributes: ' data-files-full' })),
+    });
+}
+/**
+ * The maintainer's 2026-09-25 look: a little wider and taller than the kit's wide window, so the Files tab it holds
+ * has the whole width to itself.
+ */
+const FILES_WINDOW_STYLE = String.raw `
+dialog#${ID}{max-width:1320px;max-height:calc(100vh - 64px);margin-top:32px}
+.cwf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 40px 0}
+.cwf-ask{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-2)}
+.cwf-ask [data-files-ask]{color:var(--text);font-weight:600}
+.cwf-loading{margin:0;padding:64px 40px;text-align:center;font-size:14px;color:var(--text-3)}
+.cwf-loading[hidden]{display:none}
+.cwf-body{padding:12px 40px 36px}
+.cwf-body:empty{display:none}
+.cwf-body .fl{max-width:none}
+.cwf-body .fl .hero{margin-bottom:26px}
+.cwf-body .fl .hero-fact,.cwf-body .fl .hero-action{font-size:34px}
+#${ID} .pp-foot{padding:18px 40px}
+@media (max-width:640px){dialog#${ID}{margin-top:16px;max-height:calc(100vh - 32px)}.cwf-head{padding:18px 18px 0}.cwf-body{padding:4px 18px 20px}.cwf-body .fl .hero-fact,.cwf-body .fl .hero-action{font-size:24px}#${ID} .pp-foot{padding:14px 18px}}
+`;
+/**
+ * Opens the window from a row's "See all {n} files", on a served page only: opened as a file, the page can read nothing
+ * beside it, and the button is the link it is written as. The report's Files section is taken as it is, with four
+ * changes: a row opens the window it opens on the report - what happened to that file, its story, diagram and record -
+ * brought over with it and opened here, over this one (the maintainer, 2026-09-25: a row that opened the report took
+ * the person off this page and out of the list they were reading; then, that every file opens that window), and a row
+ * whose window is not there leads nowhere and does not light up as a link; a link inside it or its window
+ * that names a place on the report (`#file-3`, `#protect-2`) leads to that place on the report, which opens the window
+ * it names (`POPUP_SCRIPT`); nothing in it is marked for a live update of this page to keep or light (`LIVE_SCRIPT`
+ * counts what this page marks); and no id of it is carried over, so none can stand twice. A read that fails follows
+ * the link instead.
+ */
+const CONVERSATION_FILES_SCRIPT = String.raw `
+(() => {
+  const dialog = document.getElementById('${ID}');
+  if (!dialog || typeof dialog.showModal !== 'function') return;
+  const body = dialog.querySelector('[data-files-body]');
+  const loading = dialog.querySelector('[data-files-loading]');
+  const full = dialog.querySelector('[data-files-full]');
+  const held = dialog.querySelector('[data-files-windows]');
+  let asked = 0;
+  // A file's window closing is not this one closing: only this one's own close clears what it holds.
+  dialog.addEventListener('close', (event) => {
+    if (event.target !== dialog) return;
+    asked += 1;
+    body.replaceChildren();
+    if (held) held.replaceChildren();
+  });
+  document.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-all-files]');
+    if (!button || (location.protocol !== 'http:' && location.protocol !== 'https:')) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const report = button.dataset.allFiles;
+    const row = button.closest('.dt-row');
+    const part = (selector) => (row && row.querySelector(selector) ? row.querySelector(selector).innerHTML : '');
+    dialog.querySelectorAll('[data-files-ask]').forEach((element) => { element.innerHTML = part('.cw-ask'); });
+    dialog.querySelectorAll('[data-files-when]').forEach((element) => { element.innerHTML = part('.cw-when') + ', ' + part('.cw-time'); });
+    if (full) full.setAttribute('href', report + '#files');
+    body.replaceChildren();
+    loading.hidden = false;
+    dialog.opener = button;
+    dialog.showModal();
+    const mine = ++asked;
+    fetch(report, { cache: 'no-store' })
+      .then((response) => (response.ok ? response.text() : Promise.reject(new Error(String(response.status)))))
+      .then((html) => {
+        if (mine !== asked) return;
+        const page = new DOMParser().parseFromString(html, 'text/html');
+        const files = page.getElementById('files');
+        if (!files) throw new Error('no Files section');
+        // Each row's window, taken before any id is dropped, under an id of this page's own.
+        const windows = [];
+        files.querySelectorAll('.dt-link').forEach((link) => {
+          const target = link.getAttribute('data-popup-open') || (link.getAttribute('href') || '').replace(/^#/, '');
+          const found = target ? page.getElementById(target) : null;
+          if (!found || found.tagName !== 'DIALOG') {
+            const row = link.closest('.dt-linked');
+            if (row) row.classList.remove('dt-linked');
+            link.remove();
+            return;
+          }
+          const id = 'cwf-window-' + windows.length;
+          link.setAttribute('href', '#' + id);
+          link.setAttribute('data-cwf-open', id);
+          const title = found.getAttribute('aria-labelledby');
+          const heading = title ? found.querySelector('[id="' + title + '"]') : null;
+          if (heading) heading.setAttribute('data-cwf-title', '');
+          windows.push({ found, id });
+        });
+        // What is left leads to the report: a link that names a place on it goes there, where that window opens.
+        const detach = (root) => {
+          root.querySelectorAll('a[href^="#"]:not([data-cwf-open])').forEach((link) => link.setAttribute('href', report + link.getAttribute('href')));
+          root.querySelectorAll('[data-popup-open]').forEach((element) => element.removeAttribute('data-popup-open'));
+          root.querySelectorAll('[data-live-keep],[data-live-key]').forEach((element) => {
+            element.removeAttribute('data-live-keep');
+            element.removeAttribute('data-live-key');
+          });
+          root.querySelectorAll('[id]').forEach((element) => element.removeAttribute('id'));
+        };
+        detach(files);
+        files.querySelectorAll('[data-cwf-open]').forEach((link) => link.setAttribute('data-popup-open', link.getAttribute('data-cwf-open')));
+        windows.forEach(({ found, id }) => {
+          detach(found);
+          found.id = id;
+          found.setAttribute('aria-labelledby', id + '-title');
+          const heading = found.querySelector('[data-cwf-title]');
+          if (heading) heading.id = id + '-title';
+        });
+        const lang = document.documentElement.dataset.lang || 'en';
+        files.querySelectorAll('[data-placeholder-' + lang + ']').forEach((field) => { field.placeholder = field.getAttribute('data-placeholder-' + lang); });
+        loading.hidden = true;
+        body.replaceChildren(...[...document.importNode(files, true).childNodes]);
+        if (held) held.replaceChildren(...windows.map(({ found }) => document.importNode(found, true)));
+        if (window.agentwhyFiles) window.agentwhyFiles(body);
+        if (held && window.agentwhyDiagrams) window.agentwhyDiagrams(held);
+      })
+      .catch(() => {
+        if (mine !== asked) return;
+        dialog.close();
+        location.href = button.getAttribute('href');
+      });
+  });
+})();
+`;
+/**
+ * What the window needs beyond the period pages' own: the kit's window, the report's Files view it shows, and a file's
+ * "What happened" window - its tabs, avatars, numbers and diagram - which opens over it.
+ */
+export const FILES_WINDOW_STYLES = [POPUP_STYLE, TAG_STYLE, LABELLED_SELECT_STYLE, FILES_VIEW_STYLE, PILL_TABS_STYLE, AVATAR_STYLE,
+    STAT_STYLE, HELPERS_VIEW_STYLE, STORY_WINDOW_STYLE, FILES_WINDOW_STYLE];
+export const FILES_WINDOW_SCRIPTS = [POPUP_SCRIPT, PILL_TABS_SCRIPT, HELPERS_SCRIPT, FILES_SCRIPT, CONVERSATION_FILES_SCRIPT];