@agentwhy/cli 0.0.0-dev

package/dist/report/start/settings/alerts-tab.js

@@ -0,0 +1,104 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { textButton } from '../../render/ui/button.js';
+import { chatExample } from '../../render/ui/chat-example.js';
+import { opener } from '../../render/ui/popup.js';
+import { toggleSwitch } from '../../render/ui/switch.js';
+import { tag } from '../../render/ui/tag.js';
+import { hookWindowId } from './settings-windows.js';
+/**
+ * Alerts (`for-people-who-build-with-ai.md` F29-F31): the incident first, in a card of its own with a bell, and the two
+ * optional moments hanging from it on a line, because they need it. Row 1, the default, is the `watch` hook, so its
+ * switch opens the confirmation (F40); rows 2 and 3 are optional notice choices for this project, written at once
+ * (R26a), and say nothing while row 1 is off, because without the hook nothing is said at all. Their switch then does
+ * not move, but it still answers a click - a greyed switch that does nothing reads as broken - with a bubble that says
+ * row 1 comes first and turns it on.
+ */
+export function alertsTab(view) {
+    const turnOn = view.canWrite ? opener(hookWindowId('watch', true)) : undefined;
+    const onOff = (on) => ({ key: on ? 'set.state.on' : 'set.state.off', on });
+    // Rows 2 and 3 work only through row 1: where its state is unknown, a line saying theirs would claim more than is known.
+    const optional = (on, locked) => (view.known ? onOff(!locked && on) : undefined);
+    return '<div class="set-head"><h2 class="set-h2">' + inLanguages((t) => t('set.alerts.title')) + '</h2>' +
+        '<p class="set-lead">' + inLanguages((t) => t('set.alerts.lead')) + '</p></div>' +
+        '<div class="set-msgs">' +
+        row({
+            tone: 'coral',
+            key: 'read',
+            main: true,
+            state: !view.known ? { key: 'set.state.unknown', on: false }
+                : view.alerts.on ? { key: view.alerts.who === 'shared' ? 'set.state.shared' : 'set.state.local', on: true } : onOff(false),
+            control: !view.known ? '' : toggleSwitch({
+                on: view.alerts.on,
+                disabled: !view.canWrite,
+                attributes: labelAttributes((t) => t('set.card.read.name')) + opener(hookWindowId('watch', !view.alerts.on)),
+            }),
+        }) +
+        '<div class="set-opt"><p class="set-opt-label">' + inLanguages((t) => t('set.alerts.optional')) + '</p>' +
+        row({
+            tone: 'mint',
+            key: 'stopped',
+            locked: view.stopped.locked,
+            state: optional(view.stopped.on, view.stopped.locked),
+            control: view.stopped.locked ? lockedSwitch('stopped', turnOn) : toggleSwitch({
+                on: view.stopped.on,
+                disabled: !view.noticesWritable,
+                attributes: labelAttributes((t) => t('set.card.stopped.name')) +
+                    ' data-set-notice="' + e(JSON.stringify({ on: view.stopped.on ? 'value' : 'refused' })) + '"',
+            }),
+        }) +
+        row({
+            tone: 'grey',
+            key: 'fine',
+            locked: view.fine.locked,
+            state: optional(view.fine.on, view.fine.locked),
+            control: view.fine.locked ? lockedSwitch('fine', turnOn) : toggleSwitch({
+                on: view.fine.on,
+                disabled: !view.noticesWritable,
+                attributes: labelAttributes((t) => t('set.card.fine.name')) +
+                    ' data-set-notice="' + e(JSON.stringify({ clean: view.fine.on ? 'off' : 'once' })) + '"',
+            }),
+        }) +
+        '</div></div>' +
+        (view.noticesWritable || !view.alerts.on ? '' : '<p class="set-quiet">' + inLanguages((t) => t('set.notices.unusable')) + '</p>');
+}
+/**
+ * The switch of a row that needs row 1: off, marked `aria-disabled` rather than `disabled` so a click still reaches the
+ * page's script, which shows the bubble beside it. The bubble says why, and turns row 1 on where this page can write.
+ */
+function lockedSwitch(key, turnOn) {
+    const tip = 'set-need-' + key;
+    return '<div class="set-sw">' +
+        toggleSwitch({
+            on: false,
+            attributes: labelAttributes((t) => t('set.card.' + key + '.name')) + ' aria-disabled="true" aria-describedby="' + tip + '" data-set-needs-first',
+        }) +
+        '<div class="set-tip" id="' + tip + '" role="status" data-set-tip hidden>' +
+        '<span class="set-tip-text">' + inLanguages((t) => t('set.need')) + '</span>' +
+        (turnOn === undefined ? '' : textButton(inLanguages((t) => t('set.need.go')), turnOn, 'set-tip-go')) +
+        '</div></div>';
+}
+function stateLine(state) {
+    return '<div class="set-state' + (state.on ? ' set-state-on' : '') + '"><span class="set-dot" aria-hidden="true"></span>' +
+        inLanguages((t) => t(state.key)) + '</div>';
+}
+/** Drawn, not loaded (§7.5 constraint 1): the bell beside the alert that matters. */
+const BELL = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>';
+function row(spec) {
+    const word = (part) => inLanguages((t) => t('set.card.' + spec.key + '.' + part));
+    const main = spec.main === true;
+    return '<article class="set-msg' + (main ? ' set-msg-main' : ' set-msg-opt') + (spec.state?.on === true ? ' set-msg-on' : '') +
+        (spec.locked === true ? ' set-msg-locked' : '') + '"' + (main ? ' data-set-first' : '') + '>' +
+        (main ? '<span class="set-msg-icon">' + BELL + '</span>' : '') +
+        '<div class="set-card-body">' +
+        '<div class="set-card-name"><h3 class="set-msg-name">' + word('name') + '</h3>' +
+        (main
+            ? tag(inLanguages((t) => t('set.card.read.badge')), 'mint', 'badge')
+            : tag(inLanguages((t) => t('set.card.optional')), 'grey', 'badge')) + '</div>' +
+        '<p class="set-msg-why">' + word('when') + '</p>' +
+        chatExample({ tone: spec.tone, ai: inLanguages((t) => t('set.chat.ai')), answer: word('answer') }) +
+        (spec.state === undefined ? '' : stateLine(spec.state)) +
+        '<p class="set-say" data-set-say hidden></p>' +
+        '</div>' + spec.control + '</article>';
+}

package/dist/report/start/settings/files-tab.js

@@ -0,0 +1,169 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { pill, trashButton } from '../../render/ui/button.js';
+import { callout } from '../../render/ui/callout.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 { ADD_WINDOW, CODEX_WINDOW, FINISH_WINDOW, modeWindowId, removeWindowId, rowWatchWindowId, untellWindowId, WATCH_WINDOW } from './settings-windows.js';
+const SOURCE_TONE = { agentwhy: 'grey', project: 'amber', you: 'mint' };
+/** A padlock left open: a row that says Block and is not blocked whole (`block-means-blocked` K7). Settings' alone. */
+const OPEN_LOCK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7.5a4 4 0 0 1 7.75-1.4"/></svg>';
+/**
+ * Private files (F33-F38): what the hooks read, in words, with where each rule came from; the project's rules they do
+ * not read yet, above the list (F34); adding a file under it (F35); and, on each row and above the list, where a file
+ * that says Block is not blocked whole (`block-means-blocked` K7, K8): the rules stop Claude Code's file tools, and only
+ * `refuse` stops `cat .env` or a `grep -r` that prints it. Block is both, and a row with half of it says which is missing.
+ */
+export function filesTab(view, allowed) {
+    // K10: blocked is what is blocked whole; the rest are counted by the line above the list.
+    const blocked = view.rows.filter((row) => row.watched && row.mode === 'block' && row.kept === undefined).length;
+    const told = view.rows.filter((row) => row.watched && row.mode === 'tell').length;
+    return unreadCard(view) + finishCard(view) + codexCard(view) +
+        '<div class="set-head"><h2 class="set-h2">' + inLanguages((t) => t('set.files.title')) + '</h2>' +
+        '<p class="set-lead">' + inLanguages((t) => t('set.files.lead')) + '</p></div>' +
+        // What each half of the switch means, said once in a bubble of its own pointing at the list rather than on every row.
+        '<p class="set-legend">' + legend('block') + legend('tell') + '</p>' +
+        '<section class="set-list">' +
+        // One grid for the heads and every row (asked for 2026-09-24): the switch, the source and the action each keep a column
+        // of their own, so they line up whatever a row holds, and a row with no action keeps its empty cell.
+        '<div class="set-rules-head" aria-hidden="true"><span class="set-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="set-rules-head-act">' + inLanguages((t) => t('set.col.act')) + '</span></div>' +
+        '<ul class="set-rules">' + view.rows.map((row, at) => ruleRow(row, at, view)).join('') + '</ul>' +
+        (view.canAdd
+            ? '<div class="set-list-add">' + pill({
+                label: '<span class="set-plus" aria-hidden="true">+</span>' + inLanguages((t) => t('set.add')),
+                tone: 'light',
+                size: 'lg',
+                href: '#' + ADD_WINDOW,
+                attributes: opener(ADD_WINDOW),
+            }) + '</div>'
+            : '') +
+        '<p class="set-list-foot"><span class="set-count set-count-block">' + inLanguages((t) => t('set.count.block', { n: blocked })) + '</span>' +
+        '<span class="set-count set-count-tell">' + inLanguages((t) => t('set.count.tell', { n: told })) + '</span>' +
+        (allowed === 0 ? '' : '<span class="set-list-exc">' + inLanguages((t) => t('set.exceptions', { n: allowed })) + '</span>') + '</p>' +
+        '</section>';
+}
+function legend(mode) {
+    return '<span class="set-legend-item"><span class="set-icon set-icon-sm set-icon-' + mode + '">' + MODE_SVG[mode] + '</span>' +
+        '<span><strong>' + inLanguages((t) => t('set.mode.' + mode)) + '</strong> — ' + inLanguages((t) => t('set.legend.' + mode)) + '</span></span>';
+}
+/** F34 - or, where the hooks read a file without some of the built-in patterns, the same card for those. */
+function unreadCard(view) {
+    const missing = view.rows.some((row) => !row.watched);
+    if (view.unread.length === 0 && !missing)
+        return '';
+    const n = view.unread.length;
+    const action = view.canWrite
+        ? pill({ label: inLanguages((t) => t('set.watch', { n: view.toWatch })), tone: 'primary', size: 'task', href: '#' + WATCH_WINDOW, attributes: opener(WATCH_WINDOW) })
+        : undefined;
+    return callout({
+        tone: 'coral',
+        body: inLanguages((t) => (n > 0 ? t('set.unread', { n }) : t('set.unwatched'))),
+        ...(action === undefined ? {} : { action }),
+    });
+}
+/**
+ * One row. A built-in group the hooks do not read yet (F34a) offers **Start watching** - on its button or anywhere on
+ * the row - which opens the confirmation for that group, the way "Watch them too" confirms them all.
+ */
+function ruleRow(row, at, view) {
+    const canWrite = view.canWrite;
+    const watchable = !row.watched && canWrite && row.name !== undefined;
+    const pattern = row.patterns[0] ?? '';
+    // A human name first, then the file as a chip under it (guidelines §1.2). The chip is the pattern shortened to what a
+    // person would recognise; the pattern itself is its tooltip.
+    const label = row.name === undefined ? inLanguages((t) => t('set.rule.own.' + patternKind(pattern))) : inLanguages((t) => t('set.rule.' + row.name));
+    const mode = row.watched ? modeSwitch(row, at)
+        : watchable
+            ? pill({
+                label: inLanguages((t) => t('set.rule.watch')),
+                tone: 'primary',
+                size: 'sm',
+                href: '#' + rowWatchWindowId(at),
+                attributes: opener(rowWatchWindowId(at)),
+            })
+            : tag(inLanguages((t) => t('set.rule.notWatched')), 'coral', 'badge');
+    // The kit's bin, as the onboarding draws it on a name added there; a link to the confirmation, so it works without a script.
+    const remove = (id) => trashButton(labelAttributes((t) => e(t('set.remove'))) + opener(id), '#' + id);
+    const action = row.remove !== undefined && canWrite ? remove(removeWindowId(at))
+        : row.untell !== undefined ? remove(untellWindowId(at))
+            : '<span class="set-none" aria-hidden="true">—</span>';
+    const icon = !row.watched ? '' : row.kept !== undefined ? OPEN_LOCK_SVG : MODE_SVG[row.mode];
+    const iconClass = !row.watched ? '' : ' set-icon-' + (row.kept !== undefined ? 'gap' : row.mode);
+    return '<li class="set-rule' + (row.watched ? '' : ' set-rule-off') + (watchable ? ' set-rule-watchable' : '') + '"' + (watchable ? ' data-set-row' : '') + '>' +
+        '<span class="set-icon' + iconClass + '" aria-hidden="true">' + icon + '</span>' +
+        '<span class="set-rule-text"><span class="set-rule-name">' + label + '</span>' +
+        '<span class="chip set-rule-chip" title="' + e(pattern) + '">' + e(patternShort(pattern)) + '</span>' +
+        (row.kept === undefined ? '' : '<span class="set-rule-gap">' + inLanguages((t) => t('set.rule.gap.' + row.kept)) + '</span>') + '</span>' +
+        '<span class="set-rule-mode">' + mode + '</span>' +
+        '<span class="set-rule-src">' + tag(inLanguages((t) => t('set.src.short.' + row.source)), SOURCE_TONE[row.source]) + '</span>' +
+        '<span class="set-rule-act">' + action + '</span>' +
+        '</li>';
+}
+/** Whether a pattern names every file of a name, everything in a folder of a name, or whatever matches it. */
+export function patternKind(pattern) {
+    if (/^\*\*\/[^*?/]+\/\*\*$/.test(pattern))
+        return 'folder';
+    return /^(?:\*\*\/|\.\/)?[^*?/]+$/.test(pattern) ? 'file' : 'pattern';
+}
+/** A pattern as a person reads it: `**\/secrets/**` is `secrets/`, `**\/.npmrc` is `.npmrc`; anything else as written. */
+export function patternShort(pattern) {
+    const folder = /^\*\*\/(.+)\/\*\*$/.exec(pattern)?.[1];
+    if (folder !== undefined)
+        return folder + '/';
+    return /^(?:\*\*\/|\.\/)(.+)$/.exec(pattern)?.[1] ?? pattern;
+}
+/**
+ * F57: Block | Tell me, the mode in force marked. The other half opens that row's confirmation, where the page can make
+ * the change; where it cannot - a rule written by hand, a list that could not be read - it is drawn, and does nothing.
+ */
+function modeSwitch(row, at) {
+    const half = (mode) => {
+        const words = inLanguages((t) => t('set.mode.' + mode));
+        if (row.mode === mode)
+            return '<span class="set-mode-half set-mode-on" aria-current="true">' + words + '</span>';
+        if (row.switchTo === undefined)
+            return '<span class="set-mode-half set-mode-off">' + words + '</span>';
+        return '<a class="set-mode-half" href="#' + modeWindowId(at) + '"' + opener(modeWindowId(at)) + '>' + words + '</a>';
+    };
+    return '<span class="set-mode set-mode-is-' + row.mode + '" role="group"' + labelAttributes((t) => t('set.mode.label')) + '>' + half('block') + half('tell') + '</span>';
+}
+/**
+ * K8: one coral line above the list, where a row that says Block is not blocked whole, with the one button that closes
+ * every gap at once - offered where the page can write, and where one write can close it (`unfinished`). Where `refuse`
+ * runs and reads other rules, `init` points it again only when it writes a rule (R4d): the line and the rows say so,
+ * and the developer details say which file each hook reads.
+ */
+function finishCard(view) {
+    const n = view.unfinished.rows;
+    if (!view.known || n === 0)
+        return '';
+    const fixable = view.canWrite && (view.unfinished.patterns.length > 0 || view.unfinished.refuse);
+    return callout({
+        tone: 'coral',
+        body: inLanguages((t) => t('set.finish.gap', { n })),
+        ...(fixable ? { action: pill({ label: inLanguages((t) => t('set.finish.go')), tone: 'primary', size: 'task', href: '#' + FINISH_WINDOW, attributes: opener(FINISH_WINDOW) }) } : {}),
+    });
+}
+/**
+ * `codex-blocks-too` CK8: in a project that uses Codex, whether the files blocked here are kept from Codex too. Where
+ * agentwhy's hook is written, a grey line says it holds once approved in Codex, which nothing here can see (CKB9). Where
+ * it is not and Claude Code's block runs, a coral line with the one write that adds it; where Claude Code's does not
+ * run either, Finish blocking above writes both, and this says nothing.
+ */
+function codexCard(view) {
+    if (!view.known || view.codex === undefined)
+        return '';
+    if (view.codex === 'on')
+        return callout({ tone: 'grey', body: inLanguages((t) => t('set.codex.on')) });
+    if (!view.stop.on)
+        return '';
+    return callout({
+        tone: 'coral',
+        body: inLanguages((t) => t('set.codex.off')),
+        ...(view.canWrite ? { action: pill({ label: inLanguages((t) => t('set.codex.go')), tone: 'primary', size: 'task', href: '#' + CODEX_WINDOW, attributes: opener(CODEX_WINDOW) }) } : {}),
+    });
+}

package/dist/report/start/settings/general-tab.js

@@ -0,0 +1,71 @@
+import { inLanguages } from '../../render/report-copy.js';
+import { avatar } from '../../render/ui/avatar.js';
+import { BRAND_MARK } from '../../render/ui/brand-mark.js';
+import { pill, TRASH_SVG } from '../../render/ui/button.js';
+import { callout } from '../../render/ui/callout.js';
+import { opener } from '../../render/ui/popup.js';
+import { tag } from '../../render/ui/tag.js';
+import { scopeWindowId, UNINSTALL_WINDOW } from './settings-windows.js';
+/**
+ * General (`for-people-who-build-with-ai.md` F56, asked for 2026-09-24; redrawn 2026-09-25): who what agentwhy saved in
+ * the project is for, asked once here rather than in every window that writes. Two cards, each with a ring, the one in
+ * force filled and tagged; the other card is itself the way to it, through a confirmation that moves everything
+ * agentwhy wrote (F40). Where the project holds some of each, the page says so first, and either card makes it one.
+ * Under them, which AI agentwhy sees (`which-project.md` V5), and **Uninstall** (F59), where there is anything of
+ * agentwhy's to take out.
+ */
+export function generalTab(view, welcome) {
+    const cards = ['local', 'shared'].map((file) => scopeCard(view, file)).join('');
+    return '<section class="set-box set-who"><div class="set-head"><h2 class="set-h2">' + inLanguages((t) => t('set.general.title')) + '</h2>' +
+        '<p class="set-lead">' + inLanguages((t) => t('set.general.lead')) + '</p></div>' +
+        (view.scope === 'mixed' ? callout({ tone: 'coral', body: inLanguages((t) => t('set.general.mixed')) }) : '') +
+        '<div class="set-scopes">' + cards + '</div>' +
+        (view.known && view.scope === undefined ? '<p class="set-quiet set-general-note">' + inLanguages((t) => t('set.general.none')) + '</p>' : '') +
+        '<p class="set-quiet set-general-note"><span class="set-info" aria-hidden="true">i</span><span>' + inLanguages((t) => t('set.general.note')) + '</span></p>' +
+        // which-project V5: which AI agentwhy sees, in the words the project step and the list of projects say it.
+        '<p class="set-quiet set-general-note"><span class="set-info" aria-hidden="true">i</span><span>' + inLanguages((t) => t('proj.which')) + '</span></p>' +
+        '</section>' +
+        setupCard(welcome) +
+        uninstallCard(view);
+}
+/**
+ * W25a: the onboarding again, where this run serves it - drawn as Uninstall is (a mark, one sentence, the button), and
+ * above it: going through the setup again comes before taking it all out. Nothing is written until its Finish (W10).
+ */
+function setupCard(welcome) {
+    if (welcome === undefined)
+        return '';
+    return '<section class="set-box set-again"><span class="set-again-icon" aria-hidden="true">' + BRAND_MARK + '</span>' +
+        '<div class="set-card-body"><h2 class="set-h3">' + inLanguages((t) => t('ob.again.title')) + '</h2>' +
+        '<p class="set-uninstall-text">' + inLanguages((t) => t('ob.again.text')) + '</p></div>' +
+        pill({ label: inLanguages((t) => t('ob.again.go')), tone: 'outline', size: 'lg', href: welcome }) +
+        '</section>';
+}
+function scopeCard(view, file) {
+    // Nothing saved yet is "just me" in force: it is where the next thing turned on goes.
+    const current = view.known && (view.scope === file || (view.scope === undefined && file === 'local'));
+    const move = view.moves[file];
+    const canSwitch = view.canWrite && !current && (move.patterns.length > 0 || move.hooks.length > 0);
+    const body = '<span class="set-scope-top">' + who(file) + '<span class="set-scope-ring" aria-hidden="true"></span></span>' +
+        '<span class="set-card-name"><span class="set-scope-name">' + inLanguages((t) => t('set.general.' + file)) + '</span>' +
+        (current ? tag(inLanguages((t) => t('set.general.current')), 'mint', 'badge') : '') + '</span>' +
+        '<span class="set-scope-sub">' + inLanguages((t) => t('set.general.' + file + '.sub')) + '</span>';
+    if (canSwitch)
+        return '<a class="set-scope" href="#' + scopeWindowId(file) + '"' + opener(scopeWindowId(file)) + '>' + body + '</a>';
+    return '<div class="set-scope' + (current ? ' set-scope-on' : '') + '"' + (current ? ' aria-current="true"' : '') + '>' + body + '</div>';
+}
+/** Who a card is for, drawn: you alone, or you and two others - initials of nobody, only a picture of "everyone". */
+function who(file) {
+    const you = '<span class="av av-grey av-40" aria-hidden="true">' + inLanguages((t) => t('set.general.you')) + '</span>';
+    return '<span class="set-scope-who">' + you + (file === 'shared' ? avatar('A', 'coral', 40) + avatar('M', 'mint', 40) : '') + '</span>';
+}
+/** F59: what agentwhy put into the project, taken out behind one coral confirmation. Nothing to take out, no card. */
+function uninstallCard(view) {
+    if (!view.canWrite || Object.keys(view.uninstall).length === 0)
+        return '';
+    return '<section class="set-box set-uninstall"><span class="set-uninstall-icon" aria-hidden="true">' + TRASH_SVG + '</span>' +
+        '<div class="set-card-body"><h2 class="set-h3">' + inLanguages((t) => t('set.uninstall.title')) + '</h2>' +
+        '<p class="set-uninstall-text">' + inLanguages((t) => t('set.uninstall.text')) + '</p></div>' +
+        pill({ label: inLanguages((t) => t('set.uninstall.go')), tone: 'outline-coral', size: 'lg', href: '#' + UNINSTALL_WINDOW, attributes: opener(UNINSTALL_WINDOW) }) +
+        '</section>';
+}

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

@@ -0,0 +1,254 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { INDEX_CONTENT_SECURITY_POLICY_META } from '../../render/html-head.js';
+import { inLanguages, LANGS, translator } from '../../render/report-copy.js';
+import { ADD_FILE_POPUP_SCRIPT, ADD_FILE_POPUP_STYLE } from '../../render/ui/add-file-popup.js';
+import { appSidebar, APP_SIDEBAR_STYLE } from '../../render/ui/app-sidebar.js';
+import { AVATAR_STYLE } from '../../render/ui/avatar.js';
+import { askCard, writtenAnswer, ASK_PANEL_SCRIPT, ASK_PANEL_STYLE } from '../../render/ui/ask-panel.js';
+import { BUTTON_STYLE } from '../../render/ui/button.js';
+import { CALLOUT_STYLE } from '../../render/ui/callout.js';
+import { CHAT_EXAMPLE_STYLE } from '../../render/ui/chat-example.js';
+import { CONFIRM_DIALOG_STYLE } from '../../render/ui/confirm-dialog.js';
+import { FILE_CHIP_STYLE } from '../../render/ui/file-chip.js';
+import { hero, HERO_STYLE } from '../../render/ui/hero.js';
+import { pageShell } from '../../render/ui/page-shell.js';
+import { pillTabs, PILL_TABS_SCRIPT, PILL_TABS_STYLE } from '../../render/ui/pill-tabs.js';
+import { POPUP_SCRIPT, POPUP_STYLE } from '../../render/ui/popup.js';
+import { SCOPE_CHOICE_STYLE } from '../../render/ui/scope-choice.js';
+import { SWITCH_STYLE } from '../../render/ui/switch.js';
+import { TAG_STYLE } from '../../render/ui/tag.js';
+import { appNav, sidebarProject } from '../app-nav.js';
+import { projectsWindows } from '../projects/projects-window.js';
+import { alertsTab } from './alerts-tab.js';
+import { filesTab } from './files-tab.js';
+import { generalTab } from './general-tab.js';
+import { SETTINGS_SCRIPT } from './settings-script.js';
+import { settingsView } from './settings-view.js';
+import { settingsWindows } from './settings-windows.js';
+import { pageNotice } from '../page-notice.js';
+/**
+ * Settings, written as `settings.html` beside the index (`for-people-who-build-with-ai.md` §3 C; design file *agentwhy
+ * Settings*; `.ai/plans/2026-09-23-settings-redesign.md`): three tabs a person who builds with AI can read - Private
+ * files, Alerts, General (F56, which replaced Stop the AI on 2026-09-24) - and, folded, everything a developer needs. Every state is read from the files (F28, R60); every write goes through a confirmation
+ * and the server (F40), and the page is read again once it lands.
+ */
+export class SettingsRenderer {
+    #links;
+    constructor(links) {
+        this.#links = links;
+    }
+    render(index) {
+        // A shared page names no machine and offers no choices (R48): it says so, and shows none of this machine's state.
+        const settings = index.shared ? undefined : index.settings;
+        const view = settings === undefined ? undefined : settingsView(settings);
+        // A dot says on or off; where the hooks could not be read there is no dot, rather than a grey one saying "off".
+        const dot = (on) => (view?.known !== true ? undefined : on ? 'mint' : 'grey');
+        const tabs = view === undefined ? '' : pillTabs([
+            { label: inLanguages((t) => t('set.tab.files')), dot: 'mint', panel: filesTab(view, settings?.allowed.length ?? 0) + ask('files') },
+            { label: inLanguages((t) => t('set.tab.alerts')), ...withDot(dot(view.alerts.on)), panel: alertsTab(view) + ask('alerts') },
+            // F56: who all of it is for, asked once. Its dot says whether that is one answer; a split project is grey here
+            // and says what to do in the tab itself.
+            { label: inLanguages((t) => t('set.tab.general')), ...withDot(dot(view.scope !== 'mixed')), panel: generalTab(view, index.onboarding === undefined ? undefined : this.#links.onboarding) + ask('general') },
+        ], 'state');
+        return pageShell({
+            // which-project V2, V11: the person's projects, opened from the sidebar's card.
+            windows: projectsWindows(index),
+            title: 'set.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,
+            // Wider than the 780px Settings began at (2026-09-24): the list's rows carry a switch, a source and an action in
+            // columns of their own, and at 780px the name had to squeeze them out of line.
+            width: 'list',
+            styles: [APP_SIDEBAR_STYLE, HERO_STYLE, BUTTON_STYLE, PILL_TABS_STYLE, SWITCH_STYLE, CHAT_EXAMPLE_STYLE, TAG_STYLE, CALLOUT_STYLE,
+                FILE_CHIP_STYLE, POPUP_STYLE, CONFIRM_DIALOG_STYLE, ADD_FILE_POPUP_STYLE, SCOPE_CHOICE_STYLE, AVATAR_STYLE, ASK_PANEL_STYLE, SETTINGS_STYLE],
+            scripts: [PILL_TABS_SCRIPT, POPUP_SCRIPT, ADD_FILE_POPUP_SCRIPT, ASK_PANEL_SCRIPT, SETTINGS_SCRIPT],
+            sidebar: appSidebar({
+                ...sidebarProject(index),
+                home: this.#links.conversations,
+                items: appNav(index, 'settings', this.#links),
+            }),
+            main: '<div class="set" data-settings data-set-words="' + e(JSON.stringify(scriptWords())) + '">' +
+                hero({
+                    eyebrow: inLanguages((t) => t('set.eyebrow')),
+                    fact: inLanguages((t) => t('set.hero')),
+                    action: '',
+                    lead: inLanguages((t) => t('set.lead')),
+                }) +
+                (index.shared ? '<p class="set-quiet set-cannot">' + inLanguages((t) => t('set.shared')) + '</p>' : '') +
+                (view === undefined || view.canWrite ? '' : '<p class="set-quiet set-cannot">' + inLanguages((t) => t('set.cannot')) + '</p>') +
+                tabs +
+                (view === undefined ? '' : developer(view)) +
+                (view === undefined ? '' : settingsWindows(view)) +
+                '</div>',
+        });
+    }
+}
+function withDot(dot) {
+    return dot === undefined ? {} : { dot };
+}
+/** "Not sure what to pick? Ask me." under each tab: three ready-made questions and their written answers (F43). */
+function ask(tab) {
+    const questions = [1, 2, 3].map((n) => ({
+        question: inLanguages((t) => t('set.ask.' + tab + '.' + n)),
+        answer: inLanguages((t) => writtenAnswer(t('set.ask.' + tab + '.' + n + '.a'))),
+    }));
+    return askCard(inLanguages((t) => t('set.ask.title')), questions, 'set-ask-' + tab);
+}
+/** F41: folded, in the tool's own words; every value is text from a file, escaped. */
+function developer(view) {
+    return '<details class="set-dev"><summary class="set-dev-toggle">' + inLanguages((t) => t('set.dev')) + '</summary>' +
+        '<dl class="set-dev-rows">' + view.developer.map((row) => '<div class="set-dev-row"><dt>' + inLanguages((t) => t(row.key)) + '</dt><dd>' +
+        (typeof row.value === 'string' ? e(row.value) : inLanguages((t) => t(row.value.word))) + '</dd></div>').join('') +
+        '</dl></details>';
+}
+/** What the script says, in every language: it cannot hold three languages in one text node. */
+function scriptWords() {
+    return Object.fromEntries(LANGS.map((lang) => {
+        const t = translator(lang);
+        return [lang, { saving: t('set.saving'), refused: t('set.refused'), asFile: t('set.asFile'), unreachable: t('set.unreachable') }];
+    }));
+}
+/** What only this page lays out. Colours come from the tokens (plan rule 1). */
+const SETTINGS_STYLE = String.raw `
+.set .hero{margin-bottom:28px}
+.set-cannot{margin:-8px 0 22px}
+.set-quiet{font-size:14px;line-height:1.5;color:var(--text-3)}
+.set-soft{color:var(--text-2)}
+.set-head{margin-bottom:16px}
+.co+.set-head{margin-top:30px}
+.set-h2{margin:0;font-size:19px;font-weight:650;line-height:1.3}
+.set-h3{margin:0;font-size:17px;font-weight:650}
+.set-lead{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
+.set-msg{position:relative;display:flex;align-items:flex-start;gap:20px;padding:26px 28px;border-radius:18px;background:var(--card);border:1px solid var(--white-09);transition:background .3s,border-color .3s}
+.set-msg-main{border-color:var(--coral-35)}
+.set-msg-opt.set-msg-on{border-color:var(--mint-20)}
+.set-msg-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--coral-14);color:var(--coral-text);display:flex;align-items:center;justify-content:center}
+.set-msg .sw{margin-top:2px}
+.set-opt{position:relative;margin-left:48px;padding-left:28px}
+.set-opt-label{position:relative;margin:0;padding:22px 0 14px;font-size:14.5px;font-weight:600;color:var(--text-2)}
+.set-opt-label:before,.set-msg-opt:not(:last-child):after{content:"";position:absolute;left:-28px;top:0;bottom:0;border-left:1.5px solid var(--coral-30)}
+.set-msg-opt:not(:last-child):after{left:-29px;top:37px;bottom:-15px}
+.set-msg-opt:before{content:"";position:absolute;left:-29px;top:-1px;width:28px;height:38px;border-left:1.5px solid var(--coral-30);border-bottom:1.5px solid var(--coral-30);border-bottom-left-radius:14px}
+.set-msg-opt+.set-msg-opt{margin-top:14px}
+.set-msg-locked{cursor:not-allowed}
+.set-msg-locked .set-card-body{opacity:.35;filter:grayscale(1)}
+.set-msg-point{background:var(--coral-06)}
+.set-sw{position:relative;flex:none;display:flex}
+.set-sw .sw[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
+.set-tip{cursor:default}
+.set-tip{position:absolute;right:-10px;bottom:calc(100% + 14px);z-index:5;width:290px;padding:14px 16px;border-radius:14px;background:var(--popup);border:1px solid var(--white-14);box-shadow:0 18px 44px var(--shadow);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
+.set-tip[hidden]{display:none}
+.set-tip:after{content:"";position:absolute;right:30px;bottom:-7px;width:12px;height:12px;background:var(--popup);border-right:1px solid var(--white-14);border-bottom:1px solid var(--white-14);transform:rotate(45deg)}
+.set-tip-text{font-size:14px;line-height:1.5;color:var(--text)}
+.set-tip-go{padding:0;font-weight:600}
+.set-msg-name{margin:0;font-size:17.5px;font-weight:650}
+.set-msg-why{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--text-2)}
+.set-msg .set-state{margin-top:16px;font-size:14px}
+.set-msg .ce{gap:12px;margin-top:16px}
+.set-msg .ce-who{width:30px;height:30px;margin-top:4px;font-size:11px}
+.set-msg .ce-say{font-size:15px;line-height:1.5;padding:12px 16px;border-radius:4px 14px 14px 14px}
+.set-card-on{border-color:var(--mint-30)}
+.set-card-body{flex:1;min-width:0}
+.set-card-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.set-state{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--text-3)}
+.set-state-lg{font-size:14px}
+.set-state-on{color:var(--mint)}
+.set-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
+.set-say{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--coral-text)}
+.set-say[hidden]{display:none}
+.set-say code{display:block;margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--panel);border:1px solid var(--white-08);border-radius:8px;padding:8px 10px;word-break:break-all;user-select:all}
+.set-say-busy{color:var(--text-3)}
+.set-list{border-radius:16px;background:var(--card);border:1px solid var(--white-09);overflow:hidden}
+.set-legend{position:relative;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 18px;padding:14px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--white-09);font-size:14.5px;color:var(--text-2)}
+.set-legend:after{content:"";position:absolute;left:34px;bottom:-7px;width:12px;height:12px;background:var(--panel);border-right:1px solid var(--white-09);border-bottom:1px solid var(--white-09);transform:rotate(45deg)}
+.set-legend-item{display:inline-flex;align-items:center;gap:10px}
+.set-legend strong{color:var(--text);font-weight:600}
+.set-rules{list-style:none;margin:0;padding:0}
+.set-list{--set-cols:40px minmax(0,1fr) 172px 118px 56px}
+.set-rules-head{display:grid;grid-template-columns:var(--set-cols);column-gap:16px;padding:12px 28px;background:var(--panel);font-size:12.5px;font-weight:600;color:var(--text-3)}
+.set-rules-head-file{grid-column:1 / 3}
+.set-rule{display:grid;grid-template-columns:var(--set-cols);column-gap:16px;align-items:center;padding:16px 28px;border-top:1px solid var(--white-06)}
+.set-rule-mode,.set-rule-src,.set-rule-act{display:flex;align-items:center;min-width:0}
+.set-icon{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
+.set-icon svg{width:18px;height:18px}
+.set-icon-sm{width:28px;height:28px}.set-icon-sm svg{width:14px;height:14px}
+.set-icon-block{background:var(--mint-14);color:var(--mint)}
+.set-icon-tell{background:var(--sand-16);color:var(--sand)}
+.set-icon-gap{background:var(--coral-14);color:var(--coral-text);box-shadow:inset 0 0 0 1.5px var(--coral)}
+.set-rule-off .set-icon{border:1.5px dashed var(--white-25)}
+.set-rule-watchable{cursor:pointer;transition:background .15s}.set-rule-watchable:hover{background:var(--white-02)}
+.set-rule-watchable:hover .set-icon{border-color:var(--coral)}
+.set-rule-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
+.set-rule-name{display:block;font-size:16px;font-weight:600;line-height:1.3}
+.set-rule-chip{font-size:12.5px}
+.set-rule-gap{font-size:13px;line-height:1.4;color:var(--coral-text)}
+.set-honest{display:block;margin-top:10px}
+.set-none{color:var(--text-4)}
+.set-list-add{padding:20px 28px;border-top:1px solid var(--white-06);display:flex;justify-content:center}
+.set-list-add .pill{gap:10px;padding:11px 22px}
+.set-plus{width:20px;height:20px;border-radius:50%;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
+.set-list-foot{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:14px 28px;border-top:1px solid var(--white-06);font-size:14px;color:var(--text-2)}
+.set-count-n{font-weight:650}
+.set-count-block .set-count-n{color:var(--mint)}.set-count-tell .set-count-n{color:var(--sand)}
+.set-list-exc{margin-left:auto;color:var(--text-3)}
+.set-stop{border-radius:16px;background:var(--card);border:1px solid var(--white-09);overflow:hidden}
+.set-stop-main{display:flex;align-items:flex-start;gap:18px;padding:24px}
+.set-stop-note{margin:0 24px 24px}
+.set-code{font-family:var(--mono);font-size:.92em;color:var(--text)}
+.set-pattern:empty{display:none}
+.set-mode{flex:none;display:inline-flex;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--white-08)}
+.set-mode-half{padding:6px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
+a.set-mode-half:hover{color:var(--text);background:var(--white-06)}
+.set-mode-on{background:var(--white-10);color:var(--text)}
+.set-mode-is-block .set-mode-on{background:var(--mint);color:var(--on-mint)}
+.set-mode-is-tell .set-mode-on{background:var(--sand);color:var(--on-sand)}
+.set-mode-off{opacity:.45}
+.set-general-note{display:flex;align-items:center;gap:10px;margin:18px 0 0}
+.set-box{border-radius:20px;background:var(--card);border:1px solid var(--white-09);padding:28px}
+.set-box+.set-box{margin-top:16px}
+.set-who .set-head{margin-bottom:22px}
+.set-scopes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.set-scope{display:flex;flex-direction:column;padding:24px;border-radius:18px;background:var(--panel);border:1.5px solid var(--white-09);color:var(--text);transition:border-color .15s,background .15s}
+a.set-scope:hover{color:var(--text);border-color:var(--white-25);background:var(--white-02)}
+.set-scope-on{background:var(--mint-06);border-color:var(--mint-50)}
+.set-scope-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
+.set-scope-who{display:flex}
+.set-scope-who .av{border:2px solid var(--card)}
+.set-scope-who .av+.av{margin-left:-9px}
+.set-scope-ring{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--white-30);display:flex;align-items:center;justify-content:center}
+.set-scope-ring:after{content:"";width:12px;height:12px;border-radius:50%}
+.set-scope-on .set-scope-ring{border:2px solid var(--mint)}.set-scope-on .set-scope-ring:after{background:var(--mint)}
+a.set-scope:hover .set-scope-ring{border-color:var(--mint)}
+.set-scope-name{font-size:18px;font-weight:650}
+.set-scope-sub{display:block;margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
+.set-info{flex:none;width:20px;height:20px;border-radius:50%;background:var(--white-06);color:var(--text-2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.set-uninstall{display:flex;align-items:center;gap:20px;padding:24px 28px}
+.set-uninstall-icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--coral-12);color:var(--coral-text);display:flex;align-items:center;justify-content:center}
+.set-uninstall-text{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
+.set-dev{margin-top:4px}
+.set-again{display:flex;align-items:center;gap:20px;padding:24px 28px}
+.set-again-icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--white-06);color:var(--coral);display:flex;align-items:center;justify-content:center}
+.set-again-icon .brand-mark{width:24px;height:24px}
+.set-dev-toggle{display:inline-block;cursor:pointer;list-style:none;color:var(--text-2);font-size:14px;font-weight:600;padding:4px 0}
+.set-dev-toggle::-webkit-details-marker{display:none}
+.set-dev-toggle:after{content:" ▾"}.set-dev[open] .set-dev-toggle:after{content:" ▴"}
+.set-dev-toggle:hover{color:var(--text)}
+.set-dev-rows{margin:10px 0 0;border-radius:12px;background:var(--panel);border:1px solid var(--white-08);padding:6px 18px}
+.set-dev-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--white-05);font-size:13.5px}
+.set-dev-row:last-child{border-bottom:0}
+.set-dev-row dt{color:var(--text-3)}
+.set-dev-row dd{margin:0;font-family:var(--mono);color:var(--text-soft);word-break:break-all}
+@media (max-width:640px){
+.set-msg{padding:22px 18px;gap:14px}.set-msg-main{flex-wrap:wrap}.set-msg-main .set-card-body{order:3;flex-basis:100%}.set-msg-main .sw{margin-left:auto}
+.set-opt{margin-left:20px;padding-left:18px}.set-opt-label:before,.set-msg-opt:not(:last-child):after{left:-18px}.set-msg-opt:not(:last-child):after{left:-19px}.set-msg-opt:before{left:-19px;width:18px;border-bottom-left-radius:10px}.set-legend{padding:12px 16px}
+.set-rules-head{display:none}.set-rule:first-child{border-top:0}
+.set-rule{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"icon text act" ". mode src";row-gap:12px;column-gap:12px;padding:16px 18px}
+.set-rule>.set-icon{grid-area:icon}.set-rule-text{grid-area:text}.set-rule-mode{grid-area:mode}.set-rule-src{grid-area:src;justify-content:flex-end}.set-rule-act{grid-area:act;justify-content:flex-end}
+.set-list-add,.set-list-foot{padding-left:18px;padding-right:18px}
+.set-none{display:none}
+.set-dev-row{grid-template-columns:1fr;gap:4px}
+.set-box{padding:22px 18px}.set-scopes{grid-template-columns:1fr}.set-scope{padding:20px}
+.set-uninstall,.set-again{flex-wrap:wrap;gap:14px 16px}.set-uninstall .set-card-body,.set-again .set-card-body{flex-basis:calc(100% - 62px)}
+}
+`;