@agentwhy/cli 0.0.0-dev

package/dist/report/start/month/month-view.js

@@ -0,0 +1,135 @@
+import { dataTable } from '../../render/ui/data-table.js';
+import { closeButton, pill } from '../../render/ui/button.js';
+import { CLOSES, popup, popupFoot } from '../../render/ui/popup.js';
+import { dayName, monthName, weekdayNames } from '../../render/ui/local-date.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { statusIcon } from '../../render/ui/status-icon.js';
+import { LOOKS } from '../../render/ui/status-look.js';
+import { dayTile, periodSwitch } from '../conversations/calendar-view.js';
+import { CONVERSATION_TABLE, conversationRow } from '../conversations/conversation-columns.js';
+const MONTH_SWITCH_WORDS = {
+    heading: 'month.heading',
+    earlier: 'month.earlier',
+    later: 'month.later',
+    back: 'month.back',
+    pick: 'month.pick',
+    hint: 'month.hint',
+};
+/** "This month", "Last month", "3 months ago" - counted by the calendar, so a skipped empty month is still counted. */
+export function monthAgo(month, t) {
+    return month.ago === 0 ? t('month.this') : month.ago === 1 ? t('month.last') : t('month.ago', { n: month.ago });
+}
+/** "This month · September 2026", in every language. */
+export function monthTitle(month) {
+    return inLanguages((t, lang) => monthAgo(month, t) + ' · ' + monthName(month.first, lang));
+}
+/** The window a day opens in. Day numbers are unique on the page, whichever month they fall in. */
+const dayWindow = (day) => 'day-' + day.day.number;
+/**
+ * "Your month": the switcher between months and a calendar, Monday first, one tile per day - the week's tiles
+ * (F11), laid out as the month falls. A tile names only its day's number; the weekdays head the columns. A day
+ * with work opens in a window over the page (guidelines §1.4: details after a click, in a popup); nothing is listed
+ * under the calendar.
+ */
+export function monthView(months, at, widen, include = false) {
+    const month = months[at];
+    return '<section class="cw-week">' +
+        periodSwitch('month', months, at, MONTH_SWITCH_WORDS, (each, t, lang) => monthAgo(each, t) + ' <span class="cw-switch-range">· ' + monthName(each.first, lang) + '</span>') +
+        '<div class="mv-cal">' +
+        '<div class="mv-head" aria-hidden="true">' +
+        Array.from({ length: 7 }, (_unused, weekday) => '<span>' + inLanguages((_t, lang) => weekdayNames(lang)[weekday] ?? '') + '</span>').join('') +
+        '</div>' +
+        '<div class="mv-grid">' +
+        '<span class="mv-blank" aria-hidden="true"></span>'.repeat(month.first.weekday) +
+        month.days.map((day) => dayTile(day, String(day.day.day), { opens: dayWindow(day), extra: dayTip(day) })).join('') +
+        '</div></div>' +
+        month.days.filter((day) => day.conversations > 0).map((day) => dayWindowOf(day, month.conversations, widen, include)).join('') +
+        '</section>';
+}
+/**
+ * What a day held, on hover or keyboard focus: its date and how many conversations, then how many in each look - read
+ * something private, only saw a name, stopped, nothing private - in the icons and colours the rows use, and that a
+ * click shows them. Drawn with no script; hidden from a screen reader, which is given the same in the window a click opens.
+ */
+function dayTip(day) {
+    if (day.conversations === 0)
+        return '';
+    // Near the calendar's edges the summary opens inward, so it is never cut by the window.
+    const side = day.day.weekday < 2 ? 'start' : day.day.weekday > 4 ? 'end' : 'middle';
+    const rows = lookCounts(day).map(([look, n]) => '<span class="mv-tip-row">' + statusIcon(look) + '<b>' + String(n) + '</b></span>').join('');
+    return '<span class="mv-tip mv-tip-' + side + '" aria-hidden="true">' +
+        '<span class="mv-tip-head">' + inLanguages((t, lang) => dayName(day.day, lang) + ' · ' + t('month.day.count', { n: day.conversations })) + '</span>' +
+        rows +
+        '<span class="mv-tip-hint">' + inLanguages((t) => t('month.tip.open')) + '</span></span>';
+}
+/** The looks a day holds, in the order of `LOOKS`, each with how many of its conversations are in it. */
+function lookCounts(day) {
+    return Object.keys(LOOKS).flatMap((look) => ((day.looks[look] ?? 0) > 0 ? [[look, day.looks[look] ?? 0]] : []));
+}
+/**
+ * One day, opened in a wide window over the page: its date, how many conversations and how many to check, the same
+ * count by look the tile's summary gives, and those conversations in the rows Conversations lists them in - the ones
+ * that read something private first, then the rest, each newest first. A row's "See all {n} files" opens the page's
+ * one files window over this one, as it does on Conversations (F58).
+ */
+function dayWindowOf(day, conversations, widen, include) {
+    const those = conversations.filter((item) => item.day.number === day.day.number);
+    const ordered = [...those.filter((item) => LOOKS[item.look].attention), ...those.filter((item) => !LOOKS[item.look].attention)];
+    const id = dayWindow(day);
+    const head = '<div class="mv-pp-head">' +
+        '<div class="mv-pp-top"><span class="mv-pp-dot mv-pp-dot-' + (day.toCheck > 0 || day.fixed > 0 ? 'coral' : 'mint') + '" aria-hidden="true"></span>' +
+        '<span class="mv-pp-sub">' + inLanguages((t) => t('month.day.count', { n: day.conversations }) + ' · ' +
+        (day.toCheck > 0 ? t('conv.day.toCheck', { n: day.toCheck }) : day.fixed > 0 ? t('conv.day.fixed', { n: day.fixed }) : t('conv.day.good'))) + '</span>' +
+        closeButton(labelAttributes((t) => t('app.close')) + CLOSES) + '</div>' +
+        '<h2 class="mv-pp-title" id="' + id + '-title">' + inLanguages((_t, lang) => dayName(day.day, lang)) + '</h2>' +
+        '<div class="mv-pp-looks">' + lookCounts(day).map(([look, n]) => '<span class="mv-pp-look">' + statusIcon(look) + '<b>' + String(n) + '</b></span>').join('') + '</div>' +
+        '</div>';
+    const body = '<div class="mv-pp-body">' +
+        dataTable({ ...CONVERSATION_TABLE, rows: ordered.map((item) => conversationRow(item, widen, include)) }) + '</div>';
+    const foot = popupFoot(inLanguages((t) => t('month.window.note')), pill({ label: inLanguages((t) => t('app.close')), tone: 'outline', size: 'md', button: true, attributes: CLOSES }));
+    return popup({ id, size: 'wide', labelledBy: id + '-title', body: head + body + foot });
+}
+/**
+ * Seven columns at every width: a calendar that wraps is no calendar. Where a column grows too narrow for "2 to
+ * check", the words give way to the dot, which carries the same colour.
+ */
+export const MONTH_VIEW_STYLE = String.raw `
+.mv-cal{container-type:inline-size}
+.mv-head,.mv-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
+.mv-head{margin-bottom:8px}
+.mv-head span{font-size:12.5px;font-weight:600;color:var(--text-3);padding-left:14px}
+.mv-grid .cw-day{min-width:0;min-height:108px;gap:8px}
+.mv-grid .cw-day-state{min-height:1.4em}
+.mv-grid .cw-day-said{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mv-grid .cw-day-today .cw-day-label{color:var(--text)}
+.mv-grid .cw-day{position:relative}
+.mv-tip{position:absolute;bottom:calc(100% + 8px);z-index:5;width:250px;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;
+background:var(--popup);border:1px solid var(--white-10);box-shadow:0 24px 60px var(--shadow);text-align:left;white-space:normal;
+opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility .12s}
+.mv-tip-start{left:0}.mv-tip-end{right:0}.mv-tip-middle{left:50%;translate:-50% 0}
+.cw-day:hover .mv-tip,.cw-day:focus-visible .mv-tip{opacity:1;visibility:visible}
+.mv-tip-head{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:2px}
+.mv-tip-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.mv-tip-row .look-label{font-size:13.5px}
+.mv-tip-row b{font-size:15px;font-weight:650;color:var(--text)}
+.mv-tip-hint{font-size:12.5px;color:var(--text-3);padding-top:8px;border-top:1px solid var(--white-07)}
+@media (hover:none){.mv-tip{display:none}}
+.mv-pp-head{padding:28px 32px 20px}
+.mv-pp-top{display:flex;align-items:center;gap:12px}
+.mv-pp-dot{flex:none;width:10px;height:10px;border-radius:50%}
+.mv-pp-dot-coral{background:var(--coral)}.mv-pp-dot-mint{background:var(--mint)}
+.mv-pp-sub{flex:1;font-size:14px;font-weight:600;color:var(--text-2)}
+.mv-pp-title{margin:10px 0 0;font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-0.01em}
+.mv-pp-looks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
+.mv-pp-look{display:flex;align-items:center;gap:10px}
+.mv-pp-look b{font-size:15px;font-weight:650;color:var(--text)}
+.mv-pp-body{padding:0 32px 28px;overflow-x:auto}
+@media (max-width:640px){.mv-pp-head{padding:20px 18px 16px}.mv-pp-title{font-size:24px}.mv-pp-body{padding:0 18px 20px}}
+@container (max-width:760px){
+.mv-head span{padding-left:0;text-align:center}
+.mv-grid{gap:5px}
+.mv-grid .cw-day{min-height:0;padding:8px 4px;align-items:center;gap:6px;border-radius:10px}
+.mv-grid .cw-day-count{font-size:16px}
+.mv-grid .cw-day-said{display:none}
+}
+`;

package/dist/report/start/month/months.js

@@ -0,0 +1,17 @@
+import { dayOf, monthOf } from '../../render/ui/local-date.js';
+import { bucketed, conversationsOf, period } from '../conversations/periods.js';
+/**
+ * The months the This month page is read through (`.ai/plans/2026-09-23-month-redesign.md` T2): calendar months in the
+ * time zone of the machine that ran `start` (O2), the current month first, then every earlier month that holds a
+ * conversation.
+ */
+export function conversationMonths(index) {
+    const { today, conversations } = conversationsOf(index);
+    const counted = today.year * 12 + today.month;
+    const byMonth = bucketed(conversations, (item) => counted - (item.day.year * 12 + item.day.month));
+    return [...byMonth].map(([ago, those]) => {
+        // `Date.UTC` carries a month below 0 into the years before, so any `ago` names its month.
+        const { first, last } = monthOf(dayOf(Math.floor(Date.UTC(today.year, today.month - 1 - ago, 1) / 86_400_000)));
+        return period(ago, first.number, last.number, today.number, those);
+    });
+}

package/dist/report/start/onboarding/done.js

@@ -0,0 +1,171 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages } from '../../render/report-copy.js';
+import { BRAND_MARK } from '../../render/ui/brand-mark.js';
+import { pill } from '../../render/ui/button.js';
+/**
+ * Done (`.ai/specs/2026-09-24-onboarding.md` W17-W20, W1a): what the run found, and one action. Which of its three
+ * versions is drawn is the model's to say - files to fix, nothing to fix, or no chats yet. What depends on Finish -
+ * whether alerts are on, what failed, the summary line - is left for the page's script to fill (`data-ob-if`, `data-ob-*`),
+ * since only the server's answer knows it. It is never shown without a script (W27).
+ */
+export function doneScreen(done, links) {
+    const fix = done.conversations > 0 && done.total > 0;
+    const version = done.conversations === 0 ? empty(links) : fix ? toFix(done, links) : nothing(done, links);
+    return '<section class="ob-screen ob-done" data-ob-screen="done" hidden aria-labelledby="ob-done-title">' +
+        (fix ? knotMark() : tickMark()) +
+        version +
+        '<ul class="ob-failed" data-ob-failed hidden>' +
+        ['watch', 'protect', 'search', 'mode', 'notices'].map((change) => '<li data-ob-fail="' + change + '" hidden><span class="ob-fail-mark" aria-hidden="true">!</span><span>' +
+            inLanguages((t) => t('ob.failed.' + change)) + ' <span class="ob-fail-said" data-ob-fail-said></span> ' +
+            '<a class="ob-link" href="' + links.settings + '">' + inLanguages((t) => t('ob.failed.go')) + '</a></span></li>').join('') + '</ul>' +
+        // W20a: Codex, where the project uses it and Claude Code's block runs - filled by the script from Finish's answer.
+        '<p class="ob-codex" data-ob-codex="on" hidden>' + inLanguages((t) => t('ob.done.codex.on')) + '</p>' +
+        '<p class="ob-codex" data-ob-codex="off" hidden>' + inLanguages((t) => t('ob.done.codex.off')) + ' <a class="ob-link" href="' + links.settings + '">' +
+        inLanguages((t) => t('ob.done.codex.go')) + '</a></p>' +
+        '<p class="ob-summary"><span class="ob-summary-tick" data-ob-summary-tick aria-hidden="true">✓</span> ' +
+        inLanguages(() => '<span data-ob-summary></span>') + ' · <a class="ob-link" href="' + links.settings + '">' +
+        inLanguages((t) => t('ob.summary.change')) + '</a></p>' +
+        '<p class="ob-unrecorded" data-ob-unrecorded hidden>' + inLanguages((t) => t('ob.unrecorded')) + '</p>' +
+        '</section>';
+}
+/** W17: the mint ✓, its glow, its ripples and the confetti - for a Done with nothing left to do. */
+function tickMark() {
+    return '<div class="ob-done-mark" aria-hidden="true">' + confetti() +
+        '<span class="ob-done-glow"></span><span class="ob-ripple"></span><span class="ob-ripple ob-ripple-2"></span>' +
+        '<span class="ob-done-tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></div>';
+}
+/**
+ * W17a: with files to fix, the brand's knot in coral instead. Mint says safe or done (guidelines §2), and this screen
+ * says there is something left to do: no ✓, no mint glow, no confetti.
+ */
+function knotMark() {
+    return '<div class="ob-done-mark ob-done-mark-fix" aria-hidden="true"><span class="ob-fix-halo"></span>' +
+        '<span class="ob-fix-knot">' + BRAND_MARK + '</span></div>';
+}
+/** W18: files to fix. */
+function toFix(done, links) {
+    return '<h2 class="ob-h2 ob-done-title" id="ob-done-title">' + inLanguages((t) => t('ob.done.files.title')) + '</h2>' +
+        '<p class="ob-done-text">' + told() + ' ' + inLanguages((t) => t('ob.done.already', { n: done.total, when: when(t, done.asked) })) + '</p>' +
+        '<div class="ob-found">' +
+        '<div class="ob-found-head"><span class="ob-found-mark" aria-hidden="true">!</span><span>' +
+        '<span class="ob-found-title">' + inLanguages((t) => t('ob.done.found', { n: done.total })) + '</span>' +
+        '<span class="ob-found-sub">' + inLanguages((t) => t(done.state === 'keys' ? 'ob.done.keys' : 'fix.hero.look')) + '</span></span></div>' +
+        '<ul class="ob-found-rows">' + done.files.map(foundRow).join('') + '</ul>' +
+        (done.more > 0 ? '<p class="ob-found-more">' + inLanguages((t) => t('ob.done.more', { n: done.more })) + '</p>' : '') +
+        '<div class="ob-found-foot"><a class="ob-link ob-later" href="' + links.conversations + '">' + inLanguages((t) => t('ob.done.later')) + '</a>' +
+        pill({ label: inLanguages((t) => t('ob.done.fix')), tone: 'primary', size: 'lg', href: e(firstReport(done) ?? links.toFix) }) + '</div></div>';
+}
+/**
+ * W18a: where Fix them now leads - the report of the newest conversation that read the first file to fix, To fix's
+ * first (T8), so the fixing starts where it happened. To fix where no report of it was written.
+ */
+function firstReport(done) {
+    return done.files[0]?.conversations.find((conversation) => conversation.report !== undefined)?.report;
+}
+/** T6: the rule's name, else "A private file"; the group's colour on its bar (T4); the path as To fix's chip writes it. */
+function foundRow(file) {
+    return '<li class="ob-found-row"><span class="ob-found-bar ob-found-bar-' + (file.label === 'rotate' ? 'keys' : 'look') + '" aria-hidden="true"></span>' +
+        '<span class="ob-found-name">' + inLanguages((t) => t(file.name === undefined ? 'fix.private' : 'set.rule.' + file.name)) + '</span>' +
+        '<span class="chip" title="' + e(file.path) + '">' + e(file.path) + '</span></li>';
+}
+/** W19: nothing to fix - or, where a chat could not be read in full, no claim that there is nothing (W34). */
+function nothing(done, links) {
+    return '<h2 class="ob-h2 ob-done-title" id="ob-done-title"><span data-ob-if="on">' + inLanguages((t) => t('ob.done.protected')) + '</span>' +
+        '<span data-ob-if="off" hidden>' + inLanguages((t) => t('ob.done.set')) + '</span></h2>' +
+        '<p class="ob-done-text"><span data-ob-if="on">' + inLanguages((t) => t('ob.done.knowing')) + '</span>' +
+        '<span data-ob-if="off" hidden>' + inLanguages((t) => t('ob.done.notTold')) + '</span></p>' +
+        (done.gaps
+            ? '<div class="ob-good ob-good-grey"><span class="ob-good-mark ob-good-mark-grey" aria-hidden="true">?</span><span>' +
+                '<span class="ob-good-title">' + inLanguages((t) => t('ob.done.gaps')) + '</span>' +
+                '<a class="ob-link" href="' + links.conversations + '">' + inLanguages((t) => t('ob.done.gaps.go')) + '</a></span></div>'
+            : '<div class="ob-good"><span class="ob-good-mark" aria-hidden="true">✓</span><span>' +
+                '<span class="ob-good-title">' + inLanguages((t) => t('ob.done.good')) + '</span>' +
+                '<span class="ob-good-text">' + inLanguages((t) => t('ob.done.good.text', { when: when(t, done.asked) })) + '</span></span></div>') +
+        '<div class="ob-done-go">' + pill({ label: inLanguages((t) => t('ob.done.open')), tone: 'mint', size: 'lg', href: links.conversations }) + '</div>';
+}
+/** W1a: no AI chats yet - set up before there is anything to show, and Settings the one page there is. */
+function empty(links) {
+    return '<h2 class="ob-h2 ob-done-title" id="ob-done-title"><span data-ob-if="on">' + inLanguages((t) => t('ob.done.protected')) + '</span>' +
+        '<span data-ob-if="off" hidden>' + inLanguages((t) => t('ob.done.empty.title')) + '</span></h2>' +
+        '<p class="ob-done-text">' + inLanguages((t) => t('ob.done.empty.text')) + '</p>' +
+        '<div class="ob-done-go">' + pill({ label: inLanguages((t) => t('ob.done.settings')), tone: 'mint', size: 'lg', href: links.settings }) + '</div>';
+}
+/** "From now on, you'll be told right away." - or, where alerts end up off, how to turn them on (W18). */
+function told() {
+    return '<span data-ob-if="on">' + inLanguages((t) => t('ob.done.told')) + '</span>' +
+        '<span data-ob-if="off" hidden>' + inLanguages((t) => t('ob.done.notTold')) + '</span>';
+}
+/** The run's range in words: "in the last 7 days", or "since 2026-09-01" where a date was asked (To fix D3). */
+function when(t, asked) {
+    const span = /^(\d+)([hdw])$/.exec(asked);
+    return span === null ? t('ob.when.since', { date: e(asked) }) : t('ob.when.' + span[2], { n: Number(span[1]) });
+}
+/** The design's confetti, from its own seed: 34 pieces in the brand's colours. */
+function confetti() {
+    let seed = 3;
+    const next = () => (seed = (seed * 9301 + 49297) % 233280) / 233280;
+    const tones = ['coral', 'coral-soft', 'mint', 'white', 'amber'];
+    return Array.from({ length: 34 }, (_unused, at) => {
+        const angle = next() * Math.PI * 2;
+        const distance = 90 + next() * 160;
+        const turn = next() * 540;
+        const width = 5 + next() * 5;
+        const delay = next() * 0.25;
+        return '<span class="ob-conf ob-conf-' + tones[at % tones.length] + '" style="--dx:' + (Math.cos(angle) * distance).toFixed(1) + 'px;--dy:' +
+            (Math.sin(angle) * distance - 40).toFixed(1) + 'px;--r:' + turn.toFixed(0) + 'deg;--w:' + width.toFixed(1) + 'px;--d:' + delay.toFixed(2) + 's"></span>';
+    }).join('');
+}
+/** Done's own look. Colours come from the tokens only. */
+export const DONE_STYLE = String.raw `
+.ob-done{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
+.ob-done-mark{position:relative;width:96px;height:96px;margin-bottom:14px;display:flex;align-items:center;justify-content:center}
+.ob-done-glow{position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,var(--mint-35),transparent 62%);animation:obGlow 3.5s ease-in-out infinite}
+.ob-ripple{position:absolute;inset:10px;border-radius:50%;border:2px solid var(--mint-50);opacity:0;animation:obRipple 2.8s ease-out .4s infinite}
+.ob-ripple-2{animation-delay:1.8s}
+.ob-conf{position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w) * .45);border-radius:2px;animation:obConfetti 1.4s cubic-bezier(.2,.7,.3,1) var(--d) both}
+.ob-conf-coral{background:var(--coral)}.ob-conf-coral-soft{background:var(--coral-link-hover)}.ob-conf-mint{background:var(--mint)}
+.ob-conf-white{background:var(--text)}.ob-conf-amber{background:var(--amber)}
+.ob-done-tick{position:relative;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--mint-hover),var(--mint));color:var(--on-mint);display:flex;align-items:center;justify-content:center;box-shadow:0 0 60px var(--mint-50);animation:obPop .7s cubic-bezier(.2,.9,.3,1.3) both}
+.ob-done-tick svg{width:42px;height:42px}
+.ob-done-mark-fix{margin-bottom:22px}
+.ob-fix-halo{position:absolute;inset:-22px;border-radius:50%;border:1px solid var(--coral-12);background:radial-gradient(circle,var(--coral-12),transparent 70%)}
+.ob-fix-knot{position:relative;width:88px;height:88px;border-radius:50%;background:var(--card);border:1px solid var(--coral-45);color:var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px var(--coral-18);animation:obPop .7s cubic-bezier(.2,.9,.3,1.3) both}
+.ob-fix-knot .brand-mark{width:44px;height:44px}
+.ob-done-title{font-size:40px;line-height:1.08;letter-spacing:-.03em;margin-bottom:8px}
+.ob-done-text{margin:0 0 20px;max-width:460px;font-size:16px;line-height:1.5;color:var(--text-2)}
+.ob-found{width:100%;text-align:left;border-radius:18px;background:var(--card);border:1px solid var(--coral-45);box-shadow:0 20px 60px var(--shadow);overflow:hidden}
+.ob-found-head{display:flex;align-items:center;gap:12px;padding:18px 20px;background:var(--coral-07);border-bottom:1px solid var(--coral-18)}
+.ob-found-mark,.ob-fail-mark{flex:none;width:30px;height:30px;border-radius:50%;background:var(--coral);color:var(--on-coral);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ob-found-title{display:block;font-size:17px;font-weight:650}
+.ob-found-sub{display:block;font-size:14px;color:var(--text-2);margin-top:2px}
+.ob-found-rows{list-style:none;margin:0;padding:0}
+.ob-found-row{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--white-06)}
+.ob-found-bar{flex:none;width:2px;height:26px;border-radius:4px}
+.ob-found-bar-keys{background:var(--coral)}.ob-found-bar-look{background:var(--amber)}
+.ob-found-name{flex:1;min-width:0;font-size:15px;font-weight:600}
+.ob-found-more{margin:0;padding:12px 20px;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--white-06)}
+.ob-found-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px}
+.ob-found-foot .pill{box-shadow:0 10px 30px var(--coral-30)}
+.ob-link{color:var(--text-2);font-weight:600}
+.ob-link:hover{color:var(--text)}
+.ob-good{width:100%;text-align:left;display:flex;align-items:center;gap:14px;padding:20px;border-radius:18px;background:var(--card);border:1px solid var(--mint-35)}
+.ob-good-grey{border-color:var(--white-14)}
+.ob-good-mark{flex:none;width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--on-mint);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ob-good-mark-grey{background:var(--white-10);color:var(--text-2)}
+.ob-good-title{display:block;font-size:17px;font-weight:650}
+.ob-good-text{display:block;font-size:14px;color:var(--text-2);margin-top:2px}
+.ob-done-go{margin-top:24px}
+.ob-done-go .pill{padding:15px 32px;font-size:16px;box-shadow:0 10px 40px var(--mint-20);transition:background .15s,border-color .15s,transform .15s,box-shadow .2s}
+.ob-done-go .pill:hover{transform:translateY(-2px);box-shadow:0 14px 44px var(--mint-35)}
+.ob-failed{list-style:none;margin:18px 0 0;padding:0;width:100%;display:grid;gap:8px;text-align:left}
+.ob-failed li{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:var(--coral-06);border:1px solid var(--coral-30);font-size:14px;line-height:1.5;color:var(--text-soft)}
+.ob-failed li[hidden],.ob-failed[hidden]{display:none}
+.ob-fail-mark{width:22px;height:22px;font-size:12px}
+.ob-fail-said{color:var(--text-2)}
+.ob-summary{margin:14px 0 0;font-size:13.5px;color:var(--text-3)}
+.ob-summary-tick{color:var(--mint)}
+.ob-unrecorded{margin:10px 0 0;font-size:13.5px;color:var(--text-3)}
+.ob-codex{max-width:560px;margin:14px auto 0;font-size:13.5px;line-height:1.5;color:var(--text-3)}
+@media (max-width:640px){.ob-done-title{font-size:30px}.ob-found-foot{flex-direction:column-reverse;align-items:stretch;text-align:center}.ob-conf{--spread:.5}}
+`;

package/dist/report/start/onboarding/finish-onboarding.js

@@ -0,0 +1,93 @@
+import { patternsOf } from '../../../setup/protected-patterns.js';
+import { settingsView } from '../settings/settings-view.js';
+import { onboardingChanges } from './onboarding-changes.js';
+import { deniedIn, inForceOf, rowKey } from './onboarding-view.js';
+/**
+ * Finish (`.ai/specs/2026-09-24-onboarding.md` W14-W16, W22): the person's choices, written through the routes Settings
+ * already uses - nothing here decides what a file holds - and then the record that the onboarding was finished.
+ *
+ * The changes are made from the files as they are now, not as they were when the page was drawn, so a choice made in
+ * another tab since is never written over. Each change is tried whatever the one before answered, and the record is
+ * written whatever they answered: a person who reached Done is not sent through the onboarding again for one failed
+ * write, which Done names and Settings can make (W20).
+ */
+export async function finishOnboarding(dependencies, choices) {
+    // Refused whole, before anything runs: a request half written would leave a project set up in a way nobody chose.
+    const refused = patternsOf([...choices.protect, ...choices.tell]).refused;
+    if (refused.length > 0) {
+        return { outcome: 'refused', message: refused.map(({ pattern, reason }) => `"${pattern}" was not written: ${reason}.`).join('\n') };
+    }
+    const changes = onboardingChanges(choices, inForceOf(await dependencies.settingsNow()));
+    const results = [];
+    // KD2: what goes onto the told list is not blocked by the add that comes before it.
+    const telling = new Set(changes.flatMap((change) => (change.change === 'tell' ? change.patterns : [])));
+    for (const change of changes)
+        results.push(await written(dependencies, change, choices.scope, telling));
+    const recorded = await dependencies.store.add(dependencies.clock());
+    // W20a: read from the files as Finish left them - the writes above go through `CodexMirror`, which writes Codex's hook
+    // with Claude Code's `refuse` - and said only where Claude Code's block runs, so a project that blocks nothing is not
+    // told Codex isn't blocked.
+    const after = (await dependencies.settingsNow()).hooks;
+    const codex = after !== undefined && after.refuse !== false ? after.codex : undefined;
+    return { outcome: 'finished', results, recorded, ...(codex === undefined ? {} : { codex }) };
+}
+async function written(dependencies, change, scope, telling) {
+    try {
+        if (change.change === 'watch') {
+            // Installing where it is not also takes it out of the other file (R4g): the move of W15.1 is this same change.
+            return fromSetup('watch', await dependencies.settings({ change: 'hooks', hooks: ['watch'], on: true, where: change.where }));
+        }
+        if (change.change === 'protect') {
+            // W15.2: read again. The hook just installed can change which file the hooks read, and so where an add goes and
+            // which built-in patterns go with it - Settings' add, decided from what the files hold now.
+            const now = await dependencies.settingsNow();
+            const view = settingsView(now);
+            if (!view.canAdd) {
+                return { change: 'protect', written: false, message: 'The files were not added: the hooks read rules this page cannot change.' };
+            }
+            // KD2: the rows left on Block, found by key, with the rules no file holds now. A file told about keeps no rule (F57).
+            const rows = view.rows.filter((row) => row.mode === 'block' && change.rows.includes(rowKey(row)))
+                .flatMap((row) => row.patterns.filter((pattern) => !deniedIn(now, pattern)));
+            const told = new Set(view.rows.filter((row) => row.mode === 'tell').flatMap((row) => row.patterns));
+            const patterns = [...new Set([...view.withBuiltIn, ...rows, ...change.patterns])].filter((pattern) => !told.has(pattern) && !telling.has(pattern));
+            if (patterns.length === 0)
+                return { change: 'protect', written: true, message: '' };
+            return fromSetup('protect', await dependencies.settings({ change: 'adopt', patterns, where: view.addTo }));
+        }
+        if (change.change === 'search') {
+            // W12a: what Settings' **Block searches too** writes - `refuse`, in the file step 1 chose (F38, as amended).
+            return fromSetup('search', await dependencies.settings({ change: 'hooks', hooks: ['refuse'], on: true, where: change.where }));
+        }
+        if (change.change === 'mode' || change.change === 'tell') {
+            if (dependencies.mode === undefined) {
+                return { change: change.change, written: false, message: 'This run keeps no list of files to tell you about, so nothing was switched.' };
+            }
+            if (change.change === 'tell') {
+                // A name added and switched to Tell me: onto the told list, and no rule is written for it.
+                return fromMode('tell', await dependencies.mode({ change: 'mode', to: 'tell', patterns: change.patterns, rules: [], where: scope }));
+            }
+            // W12a: the row's switch as the files hold it now, never as the page sent it - Settings' own, found by the row's key.
+            const row = settingsView(await dependencies.settingsNow()).rows.find((each) => rowKey(each) === change.key);
+            const to = row?.switchTo;
+            if (to === undefined || to.to !== change.to) {
+                return { change: 'mode', written: false, message: 'This file can no longer be switched here. Settings shows it as it is now.' };
+            }
+            return fromMode('mode', await dependencies.mode({ change: 'mode', to: to.to, patterns: to.patterns, rules: to.rules, where: scope }));
+        }
+        const answer = await dependencies.notify({
+            scope: 'project',
+            choices: { ...(change.on === undefined ? {} : { on: change.on }), ...(change.clean === undefined ? {} : { clean: change.clean }) },
+        });
+        return { change: 'notices', written: answer.written, message: answer.said.trim() };
+    }
+    catch (error) {
+        // One change that could not be made does not stop the next one, nor the record (W15, W22).
+        return { change: change.change, written: false, message: error instanceof Error ? error.message : String(error) };
+    }
+}
+function fromSetup(change, answer) {
+    return { change, written: answer.outcome === 'written' || answer.outcome === 'unchanged', message: answer.output.trim() };
+}
+function fromMode(change, answer) {
+    return { change, written: answer.outcome === 'written' || answer.outcome === 'unchanged', message: answer.output.trim() };
+}

package/dist/report/start/onboarding/intro.js

@@ -0,0 +1,100 @@
+import { inLanguages } from '../../render/report-copy.js';
+/**
+ * The intro (`.ai/specs/2026-09-24-onboarding.md` W4-W6): the problem told without a technical word, in about twelve
+ * seconds, as the design file's mock plays it. An illustration: fixed words, no file of the person's, nothing from the
+ * model (W5). Every moment below is a CSS delay from the moment the screen is shown, so no timer runs it; the page's
+ * script only moves on to the welcome at `INTRO_MS`, or at **Skip intro**. It is never drawn without a script, and never
+ * under `prefers-reduced-motion` (W29).
+ */
+/** When the welcome takes over (W4). The last thing the intro draws fades out 0.1 s before. */
+export const INTRO_MS = 12_400;
+/**
+ * The key the intro shows being read. Made up, and shaped so that no pattern of the redactor reads it as a secret - a
+ * test says so (W5) - because a page that carried a key-shaped string would teach the reader nothing and trip the
+ * tool's own checks.
+ */
+export const INTRO_KEY = 'KEY-4eC3-9HqL';
+/** The eight files and folders, in the mock's order: the word, a folder or a file, and whether it is one the AI reads. */
+const FILES = [
+    { word: 'photos', folder: true, hot: false },
+    { word: 'invoices', folder: true, hot: false },
+    { word: 'passwords', folder: false, hot: true },
+    { word: 'contract', folder: false, hot: false },
+    { word: 'customers', folder: false, hot: true },
+    { word: 'notes', folder: false, hot: false },
+    { word: 'bank', folder: false, hot: true },
+    { word: 'website', folder: true, hot: false },
+];
+/** Phase 2 starts here, and every line of the chat is placed from it (W4). */
+const CHAT_AT = 3.2;
+const EYE = '<svg class="ob-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">' +
+    '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>';
+export function introScreen() {
+    const chips = FILES.map((file, at) => '<span class="ob-chip' + (file.hot ? ' ob-chip-hot' : '') + '" style="--d:' + seconds(0.15 + at * 0.1) +
+        (file.hot ? ';--lit:' + seconds(1.3 + 0.3 + at * 0.12) : '') + '">' +
+        (file.hot ? '<span class="ob-ping" aria-hidden="true"></span>' : '') +
+        '<span class="ob-chip-icon ' + (file.folder ? 'ob-chip-folder' : 'ob-chip-file') + '" aria-hidden="true"></span>' +
+        inLanguages((t) => t('ob.intro.' + file.word)) + '</span>').join('');
+    const row = (who, text, at) => '<div class="ob-chat-row ob-chat-' + who + '" style="--d:' + seconds(CHAT_AT + at) + '">' +
+        (who === 'ai' ? '<span class="ob-av ob-av-ai" aria-hidden="true">AI</span>' : '') +
+        '<div class="ob-chat-say"><div class="ob-chat-who">' + inLanguages((t) => t('ob.intro.' + who)) + '</div>' +
+        '<div class="ob-bubble">' + text + '</div></div>' +
+        (who === 'you' ? '<span class="ob-av" aria-hidden="true">' + inLanguages((t) => t('ob.intro.you')) + '</span>' : '') + '</div>';
+    return '<section class="ob-screen ob-intro" data-ob-screen="intro" hidden' + ' aria-label="agentwhy">' +
+        '<div class="ob-intro-stage">' +
+        '<div class="ob-intro-files">' +
+        '<div class="ob-intro-working"><span class="ob-intro-dot" aria-hidden="true"></span>' +
+        '<span class="ob-intro-type">' + inLanguages((t) => t('ob.intro.working')) + '</span></div>' +
+        '<div class="ob-chips"><span class="ob-beam" aria-hidden="true"></span>' + chips + '</div></div>' +
+        '<div class="ob-intro-chat">' +
+        row('you', inLanguages((t) => t('ob.intro.ask')), 0.5) +
+        row('ai', inLanguages((t) => t('ob.intro.sure')), 1.4) +
+        '<div class="ob-hidden-part" style="--d:' + seconds(CHAT_AT + 2.5) + '">' +
+        '<div class="ob-hidden-head">' + EYE + inLanguages((t) => t('ob.intro.hidden')) + '</div>' +
+        '<div class="ob-bubble ob-bubble-hot" style="--d:' + seconds(CHAT_AT + 3) + '">' + inLanguages((t) => t('ob.intro.opening')) + '</div>' +
+        '<div class="ob-bubble ob-bubble-hot" style="--d:' + seconds(CHAT_AT + 4) + '">' +
+        inLanguages((t) => t('ob.intro.reading', { key: '<span class="ob-key">' + INTRO_KEY + '</span>' })) + '</div></div>' +
+        row('ai', inLanguages((t) => t('ob.intro.done')), 5.2) +
+        '<p class="ob-nobody" style="--d:' + seconds(CHAT_AT + 6) + '">' + inLanguages((t) => t('ob.intro.nobody')) + '</p>' +
+        '</div></div></section>';
+}
+function seconds(value) {
+    return Number(value.toFixed(2)) + 's';
+}
+/** The intro's own look. Colours come from the tokens only. */
+export const INTRO_STYLE = String.raw `
+.ob-intro{position:relative;width:100%;max-width:900px;margin:0 auto;height:calc(100vh - 150px);min-height:360px}
+.ob-intro-stage{position:absolute;inset:0;display:grid;place-items:center;animation:obOut .8s ease-in 11.5s forwards}
+.ob-intro-files,.ob-intro-chat{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
+.ob-intro-files{animation:obOut .6s ease-in 3.2s forwards}
+.ob-intro-working{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2);animation:obIn .5s ease-out both}
+.ob-intro-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:obTwinkle 1s ease-in-out infinite}
+.ob-intro-type{display:inline-block;overflow:hidden;white-space:nowrap;animation:obType 1.2s steps(36) both}
+.ob-chips{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:720px;padding:16px 20px;border-radius:18px;background:var(--card);border:1px solid var(--white-08);overflow:hidden}
+.ob-beam{position:absolute;top:0;bottom:0;left:-10%;width:80px;opacity:0;background:linear-gradient(90deg,transparent,var(--coral-35),transparent);animation:obBeam 1.4s ease-in-out 1.3s}
+.ob-chip{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--text);padding:6px 11px;border-radius:8px;border:1px solid var(--white-12);background:var(--panel);animation:obIn .4s ease-out var(--d) both}
+.ob-chip-hot{animation:obIn .4s ease-out var(--d) both,obLit .4s ease var(--lit) forwards}
+.ob-chip-icon{flex:none;width:14px;height:14px;border-radius:3px}
+.ob-chip-file{border:1.5px solid var(--white-40)}
+.ob-chip-folder{height:11px;border-radius:2px 4px 3px 3px;background:var(--amber-35)}
+.ob-ping{position:absolute;right:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--coral);opacity:0;animation:obPing 1.4s ease-out var(--lit) infinite}
+.ob-intro-chat{max-width:600px;gap:16px;padding:0 20px;align-items:stretch}
+.ob-chat-row{display:flex;gap:12px;align-items:flex-start;animation:obIn .5s ease-out var(--d) both}
+.ob-chat-you{justify-content:flex-end;text-align:right}
+.ob-chat-say{min-width:0}
+.ob-chat-who{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
+.ob-av{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--white-14);background:var(--raised);color:var(--text-soft);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ob-av-ai{color:var(--text-soft)}
+.ob-bubble{display:inline-block;background:var(--raised);border:1px solid var(--white-10);border-radius:16px;padding:12px 16px;font-size:17px;line-height:1.45;color:var(--text);text-align:left}
+.ob-hidden-part{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-radius:16px;border:1.5px dashed var(--coral-50);background:var(--coral-05);padding:16px 16px 18px;animation:obIn .6s ease-out var(--d) both}
+.ob-hidden-head{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-text)}
+.ob-eye{width:20px;height:20px;flex:none}
+.ob-bubble-hot{background:var(--coral-08);border-color:var(--coral-35);animation:obIn .5s ease-out var(--d) both}
+.ob-bubble-hot strong{color:var(--coral-text)}
+.ob-key{font-family:var(--mono);font-size:15.5px;color:var(--coral-text);background:var(--coral-14);border:1px solid var(--coral-45);border-radius:6px;padding:1px 7px;white-space:nowrap}
+.ob-nobody{margin:6px 0 0;text-align:center;font-size:19px;font-weight:600;color:var(--text);animation:obIn .6s ease-out var(--d) both}
+@media (max-height:820px){.ob-intro-chat{transform:scale(.85)}}
+@media (max-height:700px){.ob-intro-chat{transform:scale(.72)}}
+@media (max-height:600px){.ob-intro-chat{transform:scale(.6)}}
+@media (max-width:640px){.ob-bubble{font-size:15px}.ob-key{font-size:13.5px}.ob-chip{font-size:13px}}
+`;

package/dist/report/start/onboarding/onboarding-changes.js

@@ -0,0 +1,40 @@
+/** W15's order: the hook, the names, search protection, the switches, what is said. Nothing that cannot be written. */
+export function onboardingChanges(choices, inForce) {
+    const changes = [];
+    if (choices.watch && inForce.canWrite && inForce.watch !== choices.scope) {
+        changes.push({ change: 'watch', where: choices.scope, ...(inForce.watch === false ? {} : { from: inForce.watch }) });
+    }
+    const known = new Set(inForce.protected);
+    const fresh = (names) => [...new Set(names.map((pattern) => pattern.trim()))].filter((pattern) => pattern !== '' && !known.has(pattern));
+    // KD2: a row not watched starts on Block and has nothing to switch; Tell me puts its patterns on the told list, as an
+    // added name's are.
+    const toldRows = inForce.rows.filter((row) => !row.watched && row.mode === 'block' && choices.modes[row.key] === 'tell').flatMap((row) => row.patterns);
+    const told = inForce.canTell ? [...new Set([...fresh(choices.tell), ...toldRows])] : [];
+    const blocked = fresh(choices.protect).filter((pattern) => !told.includes(pattern));
+    // KD2: Block is what the row says once Finish is done, so a row left on it gets the rules no file holds yet. A row
+    // switched back to Block from Tell me is the switch's to write.
+    const unruled = inForce.rows.filter((row) => row.mode === 'block' && !row.ruled && (choices.modes[row.key] ?? 'block') === 'block').map((row) => row.key);
+    if ((blocked.length > 0 || unruled.length > 0) && inForce.canAdd)
+        changes.push({ change: 'protect', patterns: blocked, rows: unruled });
+    const switched = inForce.rows.flatMap((row) => {
+        const to = choices.modes[row.key];
+        return to !== undefined && to !== row.mode && row.switchable && inForce.canTell ? [{ change: 'mode', key: row.key, to }] : [];
+    });
+    // F38 as amended: Block keeps a file from searches too. An add and a switch back to Block install `refuse` themselves.
+    const staysBlocked = inForce.rows.some((row) => row.watched && (choices.modes[row.key] ?? row.mode) === 'block');
+    const installsRefuse = changes.some((change) => change.change === 'protect') || switched.some((change) => change.change === 'mode' && change.to === 'block');
+    if (inForce.refuse === false && inForce.canWrite && staysBlocked && !installsRefuse)
+        changes.push({ change: 'search', where: choices.scope });
+    changes.push(...switched);
+    if (told.length > 0)
+        changes.push({ change: 'tell', patterns: told });
+    // Rows 2 and 3 say nothing without the hook, and the page does not let them move while row 1 is off (W13).
+    if (choices.watch && inForce.noticesWritable) {
+        const on = choices.stopped === inForce.stopped ? undefined : choices.stopped ? 'refused' : 'value';
+        const clean = choices.fine === inForce.fine ? undefined : choices.fine ? 'once' : 'off';
+        if (on !== undefined || clean !== undefined) {
+            changes.push({ change: 'notices', ...(on === undefined ? {} : { on }), ...(clean === undefined ? {} : { clean }) });
+        }
+    }
+    return changes;
+}