@agentwhy/cli 0.0.0-dev

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

@@ -0,0 +1,98 @@
+import { projectName } from '../app-nav.js';
+import { settingsView } from '../settings/settings-view.js';
+import { toFixView } from '../to-fix/to-fix-view.js';
+/**
+ * What the onboarding shows, decided from the index (`.ai/specs/2026-09-24-onboarding.md`; plan step 2). No HTML:
+ * every screen's state is chosen here, and the page only writes it. What is in force is Settings' own reading of the
+ * files (`settingsView`), and what is to fix is To fix's (`toFixView`), so the three pages never disagree.
+ */
+/** W18: how many files Done names before "+{n} more on your To fix list". */
+const DONE_FILES = 3;
+/**
+ * What Finish compares the choices with, from the settings as the files hold them: read when the page is drawn, and
+ * read again by the server at Finish (W15), so a choice made in another tab since is never written over.
+ */
+export function inForceOf(settings) {
+    const view = settingsView(settings);
+    return {
+        watch: settings.hooks?.watch ?? false,
+        refuse: settings.hooks?.refuse ?? false,
+        stopped: view.stopped.on,
+        fine: view.fine.on,
+        protected: settings.protected,
+        rows: view.rows.map((row) => ({
+            key: rowKey(row),
+            mode: row.mode,
+            watched: row.watched,
+            ruled: row.watched && row.patterns.every((pattern) => deniedIn(settings, pattern)),
+            switchable: row.switchTo !== undefined,
+            patterns: row.patterns,
+        })),
+        canWrite: view.canWrite,
+        canAdd: view.canAdd,
+        canTell: view.canTell,
+        noticesWritable: view.noticesWritable,
+    };
+}
+/**
+ * A pattern either settings file denies - Claude Code applies both (R4d) - or one whose rules could not be read, where
+ * nothing is claimed and nothing written (K2).
+ */
+export function deniedIn(settings, pattern) {
+    return settings.held === undefined || settings.held.local.includes(pattern) || settings.held.shared.includes(pattern);
+}
+/** What the page and the server find a row of Private files by: the group's name, or its first pattern (W12a). */
+export function rowKey(row) {
+    return row.name ?? row.patterns[0] ?? '';
+}
+/** `undefined` where there is nothing to set up from: a shared page, or one with no settings behind it (W1). */
+export function onboardingView(index) {
+    if (index.shared || index.settings === undefined)
+        return undefined;
+    const settings = settingsView(index.settings);
+    const fix = toFixView(index);
+    const files = [...fix.keys, ...fix.look].slice(0, DONE_FILES);
+    const generated = index.entries.filter((entry) => entry.report.kind === 'generated');
+    return {
+        intro: index.onboarding?.intro === true,
+        atProject: index.onboarding?.atProject === true,
+        project: projectOf(index, fix.total),
+        ...(index.projects === undefined ? {} : { projects: index.projects }),
+        // F56: one answer for who it is all for; where the files hold both, or nothing yet, Just me.
+        who: settings.scope === 'shared' ? 'shared' : 'local',
+        files: { rows: settings.rows, canAdd: settings.canAdd, canTell: settings.canTell },
+        messages: {
+            // Row 1 starts on where it can be written: it is what `init` ticks by default (R4a), and this is the setup `init`
+            // was. Where it cannot, it shows what the file holds, and nothing moves it.
+            alerts: { on: settings.alerts.on || settings.canWrite, writable: settings.canWrite },
+            // Rows 2 and 3 start from what is in force, the product's defaults where nothing was chosen (N4).
+            stopped: { on: settings.stopped.on, writable: settings.noticesWritable },
+            fine: { on: settings.fine.on, writable: settings.noticesWritable },
+        },
+        inForce: inForceOf(index.settings),
+        done: {
+            total: fix.total,
+            files,
+            more: fix.total - files.length,
+            state: fix.state,
+            conversations: index.entries.length,
+            checked: generated.length,
+            gaps: index.entries.some((entry) => entry.report.kind === 'failed' || (entry.report.kind === 'generated' && entry.report.incomplete)),
+            asked: index.asked,
+        },
+    };
+}
+/** V20's starting state: a folder that is no project, one with chats, one inside a project with chats, or neither. */
+function projectOf(index, read) {
+    if (index.notAProject !== undefined)
+        return { kind: 'none', not: index.notAProject, conversations: index.entries.length };
+    const name = projectName(index.project ?? '');
+    const place = index.place === undefined ? {} : { place: index.place };
+    if (index.entries.length > 0)
+        return { kind: 'found', name, ...place, conversations: index.entries.length, entryPoints: index.entryPoints ?? {}, read };
+    const above = index.projects?.above;
+    const holder = above === undefined ? undefined : index.projects?.rows.find((row) => row.id === above.id && row.exists);
+    if (above !== undefined && holder !== undefined)
+        return { kind: 'inside', name, ...place, above: holder, within: above.within };
+    return { kind: 'empty', name, ...place };
+}

package/dist/report/start/onboarding/project-step.js

@@ -0,0 +1,210 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages } from '../../render/report-copy.js';
+import { initial } from '../../render/ui/app-sidebar.js';
+import { pill } from '../../render/ui/button.js';
+import { projectList } from '../../render/ui/project-list.js';
+import { tag } from '../../render/ui/tag.js';
+/** The radio group the step's list chooses in (`.ai/specs/2026-09-27-which-project.md` V11). */
+export const PICK_GROUP = 'ob-project';
+/** The kinds V4 names, in the order the step says them; an unknown kind is counted last and not named. */
+const NAMED = ['editor', 'terminal', 'script'];
+/** A small folder, drawn: the guidelines have no emoji, not even in a button (§9.3). */
+const FOLDER_SVG = '<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.2l2 2.2h8.8A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>';
+/**
+ * The onboarding's first step (`which-project.md` V19-V21), as the maintainer's design *agentwhy - Wybór projektu* draws
+ * it: a card for where the run started - the project found, the project a folder lies inside, a folder with no AI chats
+ * - with **No, pick another project** beside the way on; the person's projects as a list to pick from; and, while another
+ * project's run starts, "Switching to blog…". In the home directory the list is all there is (V7). Choosing this run's
+ * own project goes on to *Who* in the page; choosing another shows it in this tab, at its own *Who* (V14-V16). With no
+ * script the card and the list are drawn and nothing switches (V13).
+ */
+export function projectStep(view, clock) {
+    const project = view.project;
+    // Only a run that can show another project offers its list: a choice it could not act on would be a promise.
+    const projects = view.projects?.switchable === true ? view.projects : undefined;
+    const picking = project.kind === 'none';
+    return '<section class="ob-screen ob-step ob-step-project' + (picking ? ' ob-picking' : '') + '" data-ob-screen="project" data-ob-project="' + project.kind + '"' +
+        ' aria-labelledby="' + (picking ? 'ob-pick-title' : 'ob-project-title') + '">' +
+        (project.kind === 'none' ? '' : card(project, projects !== undefined)) +
+        pickView(project, projects, clock) +
+        (projects === undefined ? '' : switching()) +
+        '</section>';
+}
+/** "Step 1 of 3", a heading and its sentence. */
+function top(id, title, text) {
+    return '<p class="ob-step-no">' + inLanguages((t) => t('ob.step', { n: 1 })) + '</p>' +
+        '<h2 class="ob-h2" id="' + id + '">' + title + '</h2>' +
+        '<p class="ob-step-text">' + text + '</p>';
+}
+/** **No, pick another project**: the list, beside the way on - where there is a list to pick from. */
+function pickAnother(listed) {
+    return listed
+        ? pill({ label: FOLDER_SVG + inLanguages((t) => t('ob.project.pick')), tone: 'secondary', size: 'lg', button: true, attributes: ' data-ob-pick' })
+        : '';
+}
+/** V20, the first three states: where the run started, what is known of it, and the way on. Hidden once the list is open. */
+function card(project, listed) {
+    const name = e(project.name);
+    const hint = (key, vars = {}) => '<div class="ob-hint"><span class="ob-hint-mark" aria-hidden="true">✦</span><span>' + inLanguages((t) => t(key, vars)) + '</span></div>';
+    const go = (primary) => '<div class="ob-proj-go js-only' + (listed ? '' : ' ob-proj-go-one') + '">' + pickAnother(listed) + primary + '</div>';
+    if (project.kind === 'found') {
+        const read = project.read;
+        return '<div class="ob-proj-view ob-proj-card-view" data-ob-card>' +
+            top('ob-project-title', inLanguages((t) => t('ob.project.found.title')), inLanguages((t) => t('ob.project.found.text'))) +
+            box('found', project.name, project.place, tag(inLanguages((t) => t('ob.project.found.tag')), 'mint', 'badge'), fact('yes', inLanguages((t) => worked(t, project.conversations, project.entryPoints))) +
+                (read === 0 ? '' : fact('look', inLanguages((t) => t('ob.done.found', { n: read }))))) +
+            // White, as the maintainer asked on 2026-09-28: the way on here is a choice made, not a setup started.
+            go(pill({ label: inLanguages((t) => t('ob.project.use', { name })), tone: 'light', size: 'lg', button: true, attributes: ' data-ob-go="who"' })) +
+            // No hint here: "Most people just click Yes" misled people (the maintainer, 2026-09-28).
+            '</div>';
+    }
+    if (project.kind === 'inside') {
+        const above = project.above;
+        const within = project.within.split(/[\\/]/).join('/');
+        const depth = within.split('/').length;
+        const here = e(above.name + '/' + within);
+        // Where the run cannot show another project, the only way on is the folder it is in.
+        const onward = listed
+            ? pill({
+                label: inLanguages((t) => t('ob.project.useIt', { name: e(above.name) })),
+                tone: 'light',
+                size: 'lg',
+                button: true,
+                attributes: ' data-ob-switch="' + e(above.id) + '" data-ob-name="' + e(above.name) + '"',
+            })
+            : pill({ label: inLanguages((t) => t('proj.useAnyway', { name })), tone: 'light', size: 'lg', button: true, attributes: ' data-ob-go="who"' });
+        return '<div class="ob-proj-view ob-proj-card-view" data-ob-card>' +
+            top('ob-project-title', inLanguages((t) => t('ob.project.inside.title')), inLanguages((t) => t('ob.project.inside.text', { place: e(project.place ?? project.name), up: t('ob.project.up', { n: depth }) }))) +
+            box('inside', above.name, above.place, tag(inLanguages((t) => t('ob.project.upTag', { n: depth })), 'grey', 'badge'), fact('yes', inLanguages((t) => t('ob.project.worked', { n: above.conversations }))) +
+                fact('yes', inLanguages((t) => t('ob.project.includes', { name: e(within) }))), '<p class="ob-proj-note">' + inLanguages((t) => t('ob.project.whole', { here: '<strong>' + here + '</strong>', name: '<strong>' + e(above.name) + '</strong>' })) + '</p>') +
+            go(onward) +
+            hint('ob.project.inside.hint', { name: e(within) }) +
+            '</div>';
+    }
+    // V21, VD4: a folder with no AI chats is the person's to choose.
+    return '<div class="ob-proj-view ob-proj-card-view" data-ob-card>' +
+        top('ob-project-title', inLanguages((t) => t('ob.project.empty.title')), inLanguages((t) => t('ob.project.empty.text'))) +
+        box('empty', project.name, project.place, tag(inLanguages((t) => t('ob.project.empty.tag')), 'amber', 'badge'), fact('yes', inLanguages((t) => t('ob.project.isProject'))) + fact('none', inLanguages((t) => t('ob.project.none')))) +
+        go(pill({ label: inLanguages((t) => t('ob.project.anyway')), tone: 'light', size: 'lg', button: true, attributes: ' data-ob-go="who"' })) +
+        hint('ob.project.empty.hint') +
+        '</div>';
+}
+/** The project card: its initial, its name, where it is, a tag, and what is known of it. */
+function box(tone, name, place, label, facts, note = '') {
+    return '<div class="ob-proj-card ob-proj-card-' + tone + '">' +
+        '<div class="ob-proj-head"><span class="pjl-mark" aria-hidden="true">' + e(initial(name)) + '</span>' +
+        '<span class="ob-proj-text"><span class="ob-proj-name">' + e(name) + '</span>' +
+        (place === undefined ? '' : '<span class="ob-proj-place">' + e(place) + '</span>') + '</span>' + label + '</div>' +
+        '<ul class="ob-proj-facts">' + facts + '</ul>' + note + '</div>';
+}
+/** One thing known of the project: a mint tick for a fact, an amber mark for one to look at, a ring for nothing yet. */
+function fact(kind, words) {
+    const mark = kind === 'yes' ? '✓' : kind === 'look' ? '!' : '';
+    return '<li><span class="ob-fact ob-fact-' + kind + '" aria-hidden="true">' + mark + '</span><span>' + words + '</span></li>';
+}
+/** "Your AI has worked here: 12 chats", and where they were held (V4): "9 in your code editor, 3 in the terminal". */
+function worked(t, conversations, from) {
+    const chats = t('ob.project.worked', { n: conversations });
+    const named = NAMED.filter((kind) => (from[kind] ?? 0) > 0).map((kind) => t('ob.project.in.' + kind, { n: from[kind] ?? 0 }));
+    if (named.length === 0)
+        return chats;
+    const unknown = from.unknown ?? 0;
+    return chats + '<span class="ob-fact-more"> · ' + named.join(', ') + (unknown > 0 ? ' ' + t('ob.project.in.unknown', { n: unknown }) : '') + '</span>';
+}
+/**
+ * The person's projects to pick from (V20's last two states): this run's own chosen where it is one of them, nothing
+ * chosen where it is not, **Choose a folder…** under them where the computer has a folder window. What the folder window
+ * came to is said in the box over the list, and a folder inside a project is offered as that project, with the folder
+ * itself a button under it - the design's "Your AI chats are in my-app" (V12).
+ */
+function pickView(project, projects, clock) {
+    const lead = project.kind === 'none' ? 'ob.project.' + project.not : 'ob.project.text';
+    return '<div class="ob-proj-view ob-proj-pick-view" data-ob-pick-view>' +
+        top('ob-pick-title', inLanguages((t) => t('ob.project.title')), inLanguages((t) => t(lead))) +
+        (projects === undefined
+            ? '<p class="ob-proj-how">' + inLanguages((t) => t('proj.missing.text')) + ' ' + inLanguages((t) => t('proj.missing.how')) + '</p>'
+            : '<div class="ob-notice" data-ob-notice hidden><span class="ob-notice-mark" data-ob-notice-mark aria-hidden="true"></span>' +
+                '<span><span class="ob-notice-title" data-ob-notice-title></span><span class="ob-notice-text" data-ob-notice-text></span></span></div>' +
+                '<div class="ob-proj-list" data-ob-list>' +
+                projectList({ rows: projects.rows, unreadable: projects.unreadable, ...(projects.temporary === undefined ? {} : { temporary: projects.temporary }), now: clock.now, timeZone: clock.timeZone, pick: PICK_GROUP }) +
+                '</div>' +
+                '<div class="ob-proj-chosen" data-ob-chosen hidden><p class="pjl-label" data-ob-chosen-label></p>' +
+                '<div class="pjl pjl-picking"><div class="pjl-chosen-rows" data-ob-chosen-rows></div></div>' +
+                '<p class="ob-proj-anyway"><button type="button" class="pill pill-outline pill-md" data-ob-anyway></button>' +
+                '<span>' + inLanguages((t) => t('ob.project.nothingYet')) + '</span></p></div>' +
+                '<p class="ob-proj-noscript">' + inLanguages((t) => t('proj.noScript')) + '</p>' +
+                (projects.choosable
+                    ? '<div class="ob-proj-choose js-only">' + pill({ label: inLanguages((t) => t('proj.choose')), tone: 'outline', size: 'md', button: true, attributes: ' data-ob-choose' }) + '</div>'
+                    : '<p class="ob-proj-how">' + inLanguages((t) => t('proj.missing.text')) + ' ' + inLanguages((t) => t('proj.missing.how')) + '</p>')) +
+        '<p class="ob-proj-which"><span class="ob-proj-i" aria-hidden="true">i</span><span>' + inLanguages((t) => t('proj.which')) + '</span></p>' +
+        '<div class="ob-hint"><span class="ob-hint-mark" aria-hidden="true">✦</span><span>' + inLanguages((t) => t('ob.project.hint')) + '</span></div>' +
+        '<div class="ob-foot js-only">' +
+        pill({ label: inLanguages((t) => t('ob.back')), tone: 'outline', size: 'lg', button: true, attributes: ' data-ob-unpick' }) +
+        (projects === undefined ? '' :
+            '<span class="ob-foot-end">' +
+                // White, as the maintainer asked on 2026-09-29: coral reads as something to fear here, and nothing is started yet.
+                pill({ label: inLanguages((t) => t('ob.continue')), tone: 'light', size: 'lg', button: true, attributes: ' data-ob-continue' + (project.kind === 'found' ? '' : ' disabled') }) +
+                '</span>') +
+        '</div></div>';
+}
+/** V15: the one real wait - another project's run starting - said where the step was. */
+function switching() {
+    return '<div class="ob-switching" data-ob-switching role="status" hidden><span class="ob-spinner" aria-hidden="true"></span>' +
+        '<p class="ob-switching-title" data-ob-switching-title></p>' +
+        '<p class="ob-switching-text">' + inLanguages((t) => t('ob.project.moment')) + '</p></div>';
+}
+/** The step's own look, on the onboarding's frame and the list's kit piece. Colours come from the tokens only. */
+export const PROJECT_STEP_STYLE = String.raw `
+.ob-step-project{max-width:680px}
+.ob-proj-view[hidden],.ob-switching[hidden],.ob-notice[hidden],.ob-proj-chosen[hidden]{display:none!important}
+.js .ob-picking [data-ob-card]{display:none}
+.js .ob-step-project:not(.ob-picking) [data-ob-pick-view]{display:none}
+.js .ob-switching-now>.ob-proj-view{display:none!important}
+.ob-proj-card{padding:18px 20px;border-radius:16px;background:var(--card);border:1.5px solid var(--white-10)}
+.ob-proj-card-found{border-color:var(--mint-50);background:var(--mint-05)}
+.ob-proj-card-empty{border-color:var(--amber-35)}
+.ob-proj-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center}
+.ob-proj-text{min-width:0;display:flex;flex-direction:column;gap:2px}
+.ob-proj-name{font-size:18px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
+.ob-proj-place{font-family:var(--mono);font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ob-proj-facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
+.ob-proj-facts li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;color:var(--text-soft)}
+.ob-fact{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
+.ob-fact-yes{background:var(--mint-14);color:var(--mint)}
+.ob-fact-look{background:var(--amber-12);color:var(--amber)}
+.ob-fact-none{border:1.5px solid var(--amber);width:16px;height:16px;margin:2px 1px 0}
+.ob-fact-more{color:var(--text-3)}
+.ob-proj-note{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--white-04);border:1px solid var(--white-08);font-size:14px;line-height:1.5;color:var(--text-soft)}
+.ob-proj-note strong{color:var(--text);font-weight:600}
+.ob-proj-go{display:none;margin-top:14px;gap:12px}
+.js .ob-proj-go{display:grid;grid-template-columns:1fr 1fr}
+.js .ob-proj-go-one{grid-template-columns:1fr}
+.ob-proj-go .pill{justify-content:center;gap:9px}
+.ob-proj-pick-view .pjl{margin-top:4px}
+.ob-proj-list.ob-waiting{opacity:.4;pointer-events:none}
+.ob-notice{display:flex;align-items:flex-start;gap:12px;margin:0 0 10px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--white-10)}
+.ob-notice-mark{flex:none;width:26px;height:26px;border-radius:50%;background:var(--white-08);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
+.ob-notice-warn{background:var(--coral-06);border-color:var(--coral-30)}
+.ob-notice-warn .ob-notice-mark{background:var(--coral);color:var(--on-coral)}
+.ob-notice-title{display:block;font-size:15px;font-weight:600}
+.ob-notice-text{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
+.ob-notice-text:empty{display:none}
+.pjl-chosen-rows{display:grid;gap:8px}
+.ob-proj-anyway{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 4px 0;font-size:13px;color:var(--text-3)}
+.ob-proj-choose{margin-top:14px}
+.ob-proj-how{margin:12px 4px 0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
+.ob-proj-noscript{margin:12px 4px 0;font-size:13px;color:var(--text-3)}
+.js .ob-proj-noscript{display:none}
+.ob-proj-which{display:flex;align-items:flex-start;gap:10px;margin:18px 4px 0;font-size:13px;line-height:1.5;color:var(--text-3)}
+.ob-proj-i{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;border:1px solid var(--white-25);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
+.ob-proj-pick-view .ob-foot .pill[disabled]{opacity:.45;cursor:not-allowed}
+.ob-switching{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16vh 0 8vh}
+.ob-spinner{width:44px;height:44px;border-radius:50%;background:var(--white-06);position:relative;margin-bottom:18px}
+.ob-spinner::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid var(--coral);border-right-color:transparent;animation:obSpin .9s linear infinite}
+@keyframes obSpin{to{transform:rotate(360deg)}}
+.ob-switching-title{margin:0;font-size:30px;font-weight:650;letter-spacing:-.02em}
+.ob-switching-text{margin:8px 0 0;font-size:15px;color:var(--text-2)}
+@media (max-width:640px){.ob-proj-card{padding:16px}.js .ob-proj-go{grid-template-columns:1fr}.ob-proj-go .pill{width:100%}
+.ob-switching-title{font-size:24px}}
+`;

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

@@ -0,0 +1,239 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { pill, textButton, trashButton } from '../../render/ui/button.js';
+import { initial } from '../../render/ui/app-sidebar.js';
+import { MODE_SVG } from '../../render/ui/mode-icon.js';
+import { opener } from '../../render/ui/popup.js';
+import { tag } from '../../render/ui/tag.js';
+import { patternKind, patternShort } from '../settings/files-tab.js';
+import { rowKey } from './onboarding-view.js';
+/**
+ * Steps 2-3 (`.ai/specs/2026-09-24-onboarding.md` W10-W12a; step 1 is the project, `project-step.ts`). Each starts from what is in force (W10), and nothing on
+ * them writes: the page's script keeps the choices until Finish, and each file says what its choice does (W14). Step 3
+ * is not drawn (2026-09-25, the maintainer): its choices stay what is in force. With no script the steps are sections
+ * in order, showing what is in force, and their buttons are not drawn (W27).
+ */
+/** The window the kit's add popup is given, on this page (W12). */
+export const ADD_WINDOW = 'ob-add';
+const NEXT = { who: 'files', files: 'finish' };
+// which-project V19: the project step comes before *Who*.
+const BACK = { who: 'project', files: 'who' };
+const SOURCE_TONE = { agentwhy: 'grey', project: 'amber', you: 'mint' };
+/** Steps 2 and 3, for the project the run is in: `name` is its folder's, said above each step's number (V22). */
+export function stepScreens(view, name) {
+    return step('who', 2, whoBody(view), name) + step('files', 3, filesBody(view), name);
+}
+function step(name, number, body, project) {
+    const last = name === 'files';
+    const next = NEXT[name] === 'finish' ? ' data-ob-finish' : ' data-ob-go="' + NEXT[name] + '"';
+    const foot = '<div class="ob-foot js-only">' +
+        pill({ label: inLanguages((t) => t('ob.back')), tone: 'outline', size: 'lg', button: true, attributes: ' data-ob-go="' + BACK[name] + '"' }) +
+        '<span class="ob-foot-end">' + textButton(inLanguages((t) => t('ob.skip')), next, 'ob-skip') +
+        // Continue and Finish are white in the whole onboarding (the maintainer, 2026-09-29): coral read as a warning here.
+        pill({ label: inLanguages((t) => t(last ? 'ob.finish' : 'ob.continue')), tone: 'light', size: 'lg', button: true, attributes: next }) +
+        '</span></div>';
+    return '<section class="ob-screen ob-step ob-step-' + name + '" data-ob-screen="' + name + '" aria-labelledby="ob-' + name + '-title">' +
+        '<p class="ob-for"><span class="ob-for-mark" aria-hidden="true">' + e(initial(project)) + '</span>' +
+        inLanguages((t) => t('ob.for', { name: '<strong>' + e(project) + '</strong>' })) + '</p>' +
+        '<p class="ob-step-no">' + inLanguages((t) => t('ob.step', { n: number })) + '</p>' +
+        '<h2 class="ob-h2" id="ob-' + name + '-title">' + inLanguages((t) => t('ob.' + name + '.title')) + '</h2>' +
+        // W12a: step 3's lead is Settings' own, so Block and Tell me are said one way on both pages.
+        '<p class="ob-step-text">' + inLanguages((t) => t(name === 'files' ? 'set.files.lead' : 'ob.' + name + '.text', { name: '<strong>' + e(project) + '</strong>' })) + '</p>' +
+        body +
+        '<div class="ob-hint"><span class="ob-hint-mark" aria-hidden="true">✦</span><span>' + inLanguages((t) => t('ob.' + name + '.hint')) + '</span></div>' +
+        // On the last step Finish stays at the bottom of the window, so it is never scrolled to.
+        (last ? '<div class="ob-dock">' + foot + '<p class="ob-say" data-ob-say hidden></p></div>' : foot) +
+        '</section>';
+}
+/** W11: two radio cards; the chosen one mint (the maintainer, 2026-09-29: as the project chosen in step 1). */
+function whoBody(view) {
+    const card = (value, avatars, recommended) => {
+        const on = view.who === value;
+        return '<button type="button" class="ob-who-card' + (on ? ' ob-who-on' : '') + '" role="radio" aria-checked="' + String(on) + '" data-ob-who="' + value + '">' +
+            '<span class="ob-who-top"><span class="ob-avatars" aria-hidden="true">' + avatars + '</span>' +
+            '<span class="ob-radio" aria-hidden="true"><span class="ob-radio-dot"></span></span></span>' +
+            '<span class="ob-who-name">' + inLanguages((t) => t('ob.who.' + value)) + '</span>' +
+            '<span class="ob-who-sub">' + inLanguages((t) => t('ob.who.' + value + '.sub')) + '</span>' +
+            (recommended ? tag(inLanguages((t) => t('ob.recommended')), 'mint', 'badge') : '') + '</button>';
+    };
+    const you = '<span class="ob-avatar">' + inLanguages((t) => t('ob.who.you')) + '</span>';
+    return '<div class="ob-who" role="radiogroup" aria-labelledby="ob-who-title">' +
+        card('local', you, true) +
+        card('shared', you + '<span class="ob-avatar ob-avatar-coral">A</span><span class="ob-avatar ob-avatar-mint">M</span>', false) +
+        '</div>';
+}
+/**
+ * W12, W12a: Settings' list, drawn as Settings draws it (asked for 2026-09-25) - the mode's mark, a human name with the
+ * file as a chip under it, **Block | Tell me** at the mode in force, where the rule came from, and a bin on a name
+ * added here - under the same column heads. The switch writes nothing: the page keeps the choice until Finish, which
+ * writes it as Settings' own switch does.
+ */
+function filesBody(view) {
+    const alertsOff = !view.messages.alerts.on;
+    const rows = view.files.rows.map((row) => ruleRow(row, view.files.canTell, view.files.canAdd, alertsOff)).join('');
+    const kinds = ['file', 'folder', 'pattern'].map((kind) => '<span data-ob-kind="' + kind + '"' + (kind === 'file' ? '' : ' hidden') + '>' + inLanguages((t) => t('set.rule.own.' + kind)) + '</span>').join('');
+    // An added name's tip: what Block stops, said for a file, a folder or a pattern, and Tell me in Settings' words. The
+    // name is filled in as text by the script, as the row's own chip is.
+    const said = (kind) => '<span data-ob-kind="' + kind + '"' + (kind === 'file' ? '' : ' hidden') + '>' +
+        inLanguages((t) => t('ob.change.' + kind, { name: '<code class="ob-code" data-ob-name></code>' })) + '</span>';
+    const addedTip = infoTip(said('file') + said('folder') + said('pattern'), inLanguages((t) => t('set.confirm.tell.text', { name: '<code class="ob-code" data-ob-name></code>' })), alertsOff);
+    const added = '<template data-ob-added-row><li class="ob-rule ob-rule-is-block ob-rule-new" data-ob-added>' + modeIcon() +
+        '<span class="ob-rule-text"><span class="ob-rule-name">' + kinds + addedTip + '</span><span class="chip ob-rule-chip" data-ob-name></span></span>' +
+        '<span class="ob-rule-mode">' + modeSwitch('block', view.files.canTell) + '</span>' +
+        '<span class="ob-rule-src">' + tag(inLanguages((t) => t('set.src.short.you')), SOURCE_TONE.you) + '</span>' +
+        '<span class="ob-rule-act">' + trashButton(labelAttributes((t) => e(t('set.remove'))) + ' data-ob-untick') + '</span>' +
+        '</li></template>';
+    return '<div class="ob-list">' +
+        '<div class="ob-rules-head" aria-hidden="true"><span class="ob-rules-head-file">' + inLanguages((t) => t('set.col.file')) + '</span>' +
+        '<span>' + inLanguages((t) => t('set.mode.label')) + '</span><span>' + inLanguages((t) => t('set.col.src')) + '</span>' +
+        '<span class="ob-rules-head-act">' + inLanguages((t) => t('set.col.act')) + '</span></div>' +
+        '<ul class="ob-rules" data-ob-files>' + rows + '</ul>' + added +
+        (view.files.canAdd
+            ? '<div class="ob-add js-only">' + pill({
+                label: '<span class="ob-plus" aria-hidden="true">+</span>' + inLanguages((t) => t('ob.files.add')),
+                tone: 'light',
+                size: 'lg',
+                button: true,
+                attributes: opener(ADD_WINDOW),
+            }) + '</div>'
+            : '') +
+        '</div>';
+}
+/**
+ * One of Settings' rows, as Settings draws it; the switch where Settings offers one, drawn and still where it does not.
+ * A group not watched yet is drawn on Block where Finish can write it (KD2): it is what Finish makes it. Where it
+ * cannot, it says it is not watched, and has no tip - nothing it could do is chosen here.
+ */
+function ruleRow(row, canTell, canAdd, alertsOff) {
+    const pattern = row.patterns[0] ?? '';
+    const name = row.name === undefined ? inLanguages((t) => t('set.rule.own.' + patternKind(pattern))) : inLanguages((t) => t('set.rule.' + row.name));
+    // KD2: a row not watched starts on Block, which Finish writes where it can add; Tell me puts it on the told list instead.
+    const drawn = row.watched || canAdd;
+    // W14, as amended: what the row's choice does, beside its name - Block's words or Tell me's, as the switch stands.
+    const named = (t) => (row.name === undefined ? '<code class="ob-code">' + e(patternShort(pattern)) + '</code>' : '<strong>' + t('set.rule.' + row.name) + '</strong>');
+    const tip = drawn
+        ? infoTip(inLanguages((t) => t('set.confirm.block.text', { name: named(t) })), inLanguages((t) => t(row.name === undefined ? 'set.confirm.tell.text' : 'set.confirm.tell.secret.text', { name: named(t) })), alertsOff)
+        : '';
+    const mode = drawn ? modeSwitch(row.mode, canTell && (row.watched ? row.switchTo !== undefined : true)) : tag(inLanguages((t) => t('set.rule.notWatched')), 'grey', 'badge');
+    // The key the page and the server find this row by (W12a); the switch writes nothing until Finish.
+    return '<li class="ob-rule' + (drawn ? ' ob-rule-is-' + row.mode : ' ob-rule-off') + '" data-ob-row="' + e(rowKey(row)) + '" data-ob-secret="' + String(row.name !== undefined) + '">' +
+        (drawn ? modeIcon() : '<span class="ob-icon" aria-hidden="true"></span>') +
+        '<span class="ob-rule-text"><span class="ob-rule-name" data-ob-row-name>' + name + tip + '</span>' +
+        '<span class="chip ob-rule-chip" title="' + e(pattern) + '">' + e(patternShort(pattern)) + '</span></span>' +
+        '<span class="ob-rule-mode">' + mode + '</span>' +
+        '<span class="ob-rule-src">' + tag(inLanguages((t) => t('set.src.short.' + row.source)), SOURCE_TONE[row.source]) + '</span>' +
+        '<span class="ob-rule-act"><span class="ob-none" aria-hidden="true">—</span></span>' +
+        '</li>';
+}
+/** The padlock and the bell, both drawn; the row's mode shows one, so a switch moves it without a script writing markup. */
+function modeIcon() {
+    return '<span class="ob-icon" aria-hidden="true"><span class="ob-icon-block">' + MODE_SVG.block + '</span><span class="ob-icon-tell">' + MODE_SVG.tell + '</span></span>';
+}
+/** F57's two-part switch, the mode in force marked; drawn and still where Settings could not switch this row either. */
+function modeSwitch(mode, switchable) {
+    const half = (which) => {
+        const words = inLanguages((t) => t('set.mode.' + which));
+        const on = which === mode;
+        return switchable
+            ? '<button type="button" class="ob-mode-half' + (on ? ' ob-mode-on' : '') + '" aria-pressed="' + String(on) + '" data-ob-mode="' + which + '">' + words + '</button>'
+            : '<span class="ob-mode-half' + (on ? ' ob-mode-on' : ' ob-mode-off') + '">' + words + '</span>';
+    };
+    return '<span class="ob-mode ob-mode-is-' + mode + '" role="group"' + labelAttributes((t) => e(t('set.mode.label'))) + '>' + half('block') + half('tell') + '</span>';
+}
+/**
+ * W14, as amended 2026-09-25 by the maintainer: no list above Finish. A quiet "i" beside the file's name says what its
+ * choice does, on hover or focus: Block's sentence with the guidelines' honesty line (§9.2), or Tell me's, cost
+ * included. Both are drawn and the row's mode shows one, so the switch changes it without a script writing markup.
+ */
+function infoTip(block, tell, alertsOff) {
+    return '<span class="ob-info" tabindex="0"' + labelAttributes((t) => e(t('ob.files.info'))) + '>' +
+        '<span class="ob-info-mark" aria-hidden="true">i</span>' +
+        '<span class="ob-tip" role="tooltip">' +
+        '<span class="ob-tip-block">' + block + '<span class="ob-tip-quiet">' + inLanguages((t) => t('ob.change.honest')) + '</span></span>' +
+        '<span class="ob-tip-tell">' + tell + (alertsOff ? '<span class="ob-tip-quiet">' + inLanguages((t) => t('set.confirm.tell.alertsOff')) + '</span>' : '') + '</span>' +
+        '</span></span>';
+}
+/** The steps' own look; the list is Settings' (its columns, marks and switch). Colours come from the tokens only. */
+export const STEPS_STYLE = String.raw `
+.ob-step{max-width:640px;margin:0 auto}
+.ob-step-files{max-width:780px}
+.ob-for{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13.5px;color:var(--text-3);overflow-wrap:anywhere}
+.ob-for strong{color:var(--text);font-weight:600}
+.ob-for-mark{flex:none;width:20px;height:20px;border-radius:6px;background:var(--white-08);border:1px solid var(--white-10);color:var(--text);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ob-step-no{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--coral-text)}
+.ob-h2{margin:0 0 10px;font-size:34px;line-height:1.15;letter-spacing:-.02em;font-weight:650;text-wrap:balance}
+.ob-step-text{margin:0 0 26px;font-size:16.5px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
+.ob-step-text strong{color:var(--text);font-weight:600}
+.ob-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
+.ob-who-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border-radius:16px;background:var(--card);border:1.5px solid var(--white-10);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
+.ob-who-card:hover{border-color:var(--white-30)}
+.ob-who-on,.ob-who-on:hover{background:var(--mint-05);border-color:var(--mint-50)}
+.ob-who-top{display:flex;justify-content:space-between;align-items:center;width:100%}
+.ob-avatars{display:flex}
+.ob-avatar{width:34px;height:34px;margin-right:-8px;border-radius:50%;background:var(--avatar);border:2px solid var(--card);color:var(--text);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.ob-avatar-coral{background:var(--coral-18);color:var(--coral-text)}
+.ob-avatar-mint{background:var(--mint-16);color:var(--mint)}
+.ob-radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--white-30);display:flex;align-items:center;justify-content:center;transition:border-color .2s}
+.ob-radio-dot{width:11px;height:11px;border-radius:50%;transform:scale(0);transition:transform .2s cubic-bezier(.2,.9,.3,1.3),background .2s}
+.ob-who-on .ob-radio{border-color:var(--mint)}.ob-who-on .ob-radio-dot{background:var(--mint);transform:scale(1)}
+.ob-who-name{font-size:18px;font-weight:650}
+.ob-who-sub{font-size:14.5px;line-height:1.5;color:var(--text-2)}
+.ob-list{--ob-cols:36px minmax(0,1fr) auto 104px 40px;border-radius:16px;background:var(--card);border:1px solid var(--white-09)}
+.ob-rules-head{border-radius:16px 16px 0 0;display:grid;grid-template-columns:var(--ob-cols);column-gap:14px;padding:12px 22px;background:var(--panel);font-size:12.5px;font-weight:600;color:var(--text-3)}
+.ob-rules-head-file{grid-column:1 / 3}
+.ob-rules{list-style:none;margin:0;padding:0}
+.ob-rule{display:grid;grid-template-columns:var(--ob-cols);column-gap:14px;align-items:center;padding:14px 22px;border-top:1px solid var(--white-06)}
+.ob-rule-new{animation:obUp .35s cubic-bezier(.2,.8,.2,1) both}
+.ob-rule-gone{animation:obGone .2s ease-in both}
+@keyframes obGone{to{opacity:0;transform:translateX(12px)}}
+.ob-rule-mode,.ob-rule-src,.ob-rule-act{display:flex;align-items:center;min-width:0}
+.ob-icon{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
+.ob-icon svg{width:18px;height:18px}
+.ob-icon-block,.ob-icon-tell{display:none}
+.ob-rule-is-block .ob-icon{background:var(--mint-14);color:var(--mint)}.ob-rule-is-block .ob-icon-block{display:flex}
+.ob-rule-is-tell .ob-icon{background:var(--sand-16);color:var(--sand)}.ob-rule-is-tell .ob-icon-tell{display:flex}
+.ob-rule-off .ob-icon{border:1.5px dashed var(--white-25)}
+.ob-rule-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
+.ob-rule-name{position:relative;display:block;font-size:16px;font-weight:600;line-height:1.3}
+.ob-info{display:inline-flex;margin-left:7px;vertical-align:-2px;border-radius:50%;outline:none}
+.ob-info-mark{width:16px;height:16px;border-radius:50%;border:1px solid var(--white-25);color:var(--text-3);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:help;transition:color .15s,border-color .15s}
+.ob-info:hover .ob-info-mark,.ob-info:focus-visible .ob-info-mark{color:var(--text);border-color:var(--white-45)}
+.ob-info:focus-visible{box-shadow:0 0 0 2px var(--coral-60)}
+.ob-tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:6;width:max-content;max-width:min(320px,calc(100vw - 110px));padding:12px 14px;border-radius:12px;background:var(--popup);border:1px solid var(--white-14);box-shadow:0 14px 36px var(--shadow);font-size:13.5px;font-weight:400;line-height:1.5;color:var(--text);white-space:normal;visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
+.ob-info:hover .ob-tip,.ob-info:focus .ob-tip{visibility:visible;opacity:1;transform:none}
+.ob-tip-block,.ob-tip-tell{display:none;flex-direction:column;gap:6px}
+.ob-rule-is-block .ob-tip-block,.ob-rule-is-tell .ob-tip-tell{display:flex}
+.ob-tip-quiet{color:var(--text-2);font-size:12.5px}
+.ob-rule-chip{font-size:12.5px}
+.ob-none{color:var(--text-4)}
+.ob-mode{flex:none;display:inline-flex;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--white-08)}
+.ob-mode-half{font:inherit;font-size:13.5px;font-weight:600;color:var(--text-2);background:transparent;border:0;border-radius:999px;padding:6px 13px;white-space:nowrap;transition:background .2s,color .2s}
+button.ob-mode-half{cursor:pointer}button.ob-mode-half:not(.ob-mode-on):hover{color:var(--text);background:var(--white-06)}
+.ob-mode-on{background:var(--white-10);color:var(--text)}
+.ob-mode-is-block .ob-mode-on{background:var(--mint);color:var(--on-mint)}
+.ob-mode-is-tell .ob-mode-on{background:var(--sand);color:var(--on-sand)}
+.ob-mode-off{opacity:.45}
+.ob-add{padding:18px 22px;border-top:1px solid var(--white-06);justify-content:center}
+.js .ob-add{display:flex}
+.ob-add .pill{gap:10px;padding:11px 22px}
+.ob-plus{width:20px;height:20px;border-radius:50%;background:var(--bg);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
+.ob-code{font-family:var(--mono);font-size:.92em;color:var(--text);background:var(--white-07);border:1px solid var(--white-10);border-radius:6px;padding:1px 7px;overflow-wrap:anywhere}
+.ob-hint{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--coral-05);border:1px solid var(--coral-25);font-size:14px;line-height:1.5;color:var(--text-soft)}
+.ob-hint-mark{flex:none;width:26px;height:26px;border-radius:50%;background:var(--coral-14);color:var(--coral-text);display:flex;align-items:center;justify-content:center;font-size:12px}
+.ob-dock{position:sticky;bottom:0;z-index:2;margin-top:18px;padding:0 0 18px;background:var(--bg);box-shadow:0 -18px 18px -6px var(--bg)}
+.ob-dock .ob-foot{margin-top:14px}
+.ob-foot{margin-top:28px;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
+.js .ob-foot{display:flex}
+.ob-foot-end{display:flex;align-items:center;gap:14px;margin-left:auto}
+.ob-skip{color:var(--text-3);font-size:15px}
+.ob-skip:hover{color:var(--text)}
+.ob-say{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--coral-text);text-align:right}
+@media (max-width:640px){
+.ob-h2{font-size:28px}
+.ob-rules-head{display:none}.ob-rule:first-child{border-top:0}
+.ob-rule{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"icon text act" ". mode src";row-gap:12px;column-gap:12px;padding:16px 18px}
+.ob-rule>.ob-icon{grid-area:icon}.ob-rule-text{grid-area:text}.ob-rule-mode{grid-area:mode}.ob-rule-src{grid-area:src;justify-content:flex-end}.ob-rule-act{grid-area:act;justify-content:flex-end}
+.ob-add{padding-left:18px;padding-right:18px}
+.ob-none{display:none}
+}
+`;