@agentwhy/cli 0.0.0-dev

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

@@ -0,0 +1,66 @@
+import { inLanguages } from '../../render/report-copy.js';
+import { pill } from '../../render/ui/button.js';
+/**
+ * The welcome (`.ai/specs/2026-09-24-onboarding.md` W7-W9): points of light fly to the centre, the knot draws itself,
+ * a flash and a soft glow, and the words come in one after the other. Its promises are the ones W9 keeps true.
+ *
+ * With no script it is the first thing on the page, and the steps follow it (W27); **Get started** needs a script.
+ */
+export function welcomeScreen() {
+    const up = (at) => ' style="--d:' + at + 's"';
+    return '<section class="ob-screen ob-welcome" data-ob-screen="welcome" aria-labelledby="ob-welcome-title">' +
+        '<div class="ob-mark" aria-hidden="true">' + points() +
+        '<span class="ob-flash"></span><span class="ob-bloom"></span>' +
+        '<svg class="ob-knot" viewBox="-3 -2 46 44" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round">' +
+        '<path class="ob-knot-a" d="m17 25-3 3a7.07 7.07 0 0 1-10-10l8-8a7.07 7.07 0 0 1 10 0"/>' +
+        '<path class="ob-knot-b" d="m23 15 3-3a7.07 7.07 0 0 1 10 10l-8 8a7.07 7.07 0 0 1-10 0"/></svg></div>' +
+        '<p class="ob-eyebrow ob-up"' + up(1.5) + '>' + inLanguages((t) => t('ob.eyebrow')) + '</p>' +
+        '<h1 class="ob-h1" id="ob-welcome-title"><span class="ob-h1-a ob-up"' + up(1.7) + '>' + inLanguages((t) => t('ob.h1')) + '</span>' +
+        '<span class="ob-h1-b ob-up"' + up(1.95) + '>' + inLanguages((t) => t('ob.h1b')) + '</span></h1>' +
+        '<p class="ob-lead ob-up"' + up(2.2) + '>' + inLanguages((t) => t('ob.lead')) + '</p>' +
+        '<div class="ob-start js-only ob-up"' + up(2.4) + '>' +
+        // White, as every way on in the onboarding (the maintainer, 2026-09-29).
+        pill({ label: inLanguages((t) => t('ob.start')), tone: 'light', size: 'lg', button: true, attributes: ' data-ob-go="project"' }) + '</div>' +
+        '<ul class="ob-trust ob-up"' + up(2.6) + '>' +
+        ['local', 'inside', 'free'].map((key) => '<li><span class="ob-tick" aria-hidden="true">✓</span>' + inLanguages((t) => t('ob.trust.' + key)) + '</li>').join('') +
+        '</ul></section>';
+}
+/** The design's 22 points, from its own seed, so the page draws the same picture every time and needs no script. */
+function points() {
+    let seed = 11;
+    const next = () => (seed = (seed * 9301 + 49297) % 233280) / 233280;
+    return Array.from({ length: 22 }, () => {
+        const angle = next() * Math.PI * 2;
+        const distance = 140 + next() * 220;
+        const size = 2 + next() * 3;
+        const delay = next() * 0.6;
+        const mint = next() < 0.3;
+        return '<span class="ob-pt ob-pt-' + (mint ? 'mint' : 'coral') + '" style="--x:' + (Math.cos(angle) * distance).toFixed(1) + 'px;--y:' +
+            (Math.sin(angle) * distance).toFixed(1) + 'px;--s:' + size.toFixed(1) + 'px;--d:' + delay.toFixed(2) + 's"></span>';
+    }).join('');
+}
+/** The welcome's own look. Colours come from the tokens only. */
+export const WELCOME_STYLE = String.raw `
+.ob-welcome{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;padding-top:2vh}
+.ob-mark{position:relative;width:96px;height:96px;margin-bottom:26px;display:flex;align-items:center;justify-content:center;color:var(--coral)}
+.ob-pt{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;animation:obConverge 1.1s cubic-bezier(.5,0,.2,1) var(--d) both}
+.ob-pt-coral{background:var(--coral);box-shadow:0 0 8px var(--coral)}
+.ob-pt-mint{background:var(--mint);box-shadow:0 0 8px var(--mint)}
+.ob-flash{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,var(--text),var(--coral-40) 40%,transparent 70%);animation:obFlash 1s ease-out 1.25s both}
+.ob-bloom{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,var(--coral-35),transparent 62%);filter:blur(8px);animation:obBloom 1.2s ease-out 1.2s both,obGlow 4s ease-in-out 2.4s infinite}
+.ob-knot{position:relative;width:72px;height:69px;filter:drop-shadow(0 0 10px var(--coral-60));animation:obFloat 4s ease-in-out 2.4s infinite}
+.ob-knot path{stroke-dasharray:120;stroke-dashoffset:120}
+.ob-knot-a{animation:obDraw 1s ease-out .6s forwards}
+.ob-knot-b{animation:obDraw 1s ease-out .85s forwards}
+.ob-up{animation:obUp .8s cubic-bezier(.2,.8,.2,1) var(--d) both}
+.ob-eyebrow{margin:0 0 18px;font-size:17px;font-weight:600;color:var(--coral-text)}
+.ob-h1{margin:0 0 22px;display:flex;flex-direction:column;gap:6px;font-weight:650;text-wrap:balance}
+.ob-h1-a{font-size:60px;line-height:1.05;letter-spacing:-.035em}
+.ob-h1-b{font-size:44px;line-height:1.1;letter-spacing:-.03em;color:var(--coral)}
+.ob-lead{margin:0 0 32px;max-width:500px;font-size:17px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
+.ob-start .pill{padding:15px 30px;font-size:16px;box-shadow:0 10px 40px var(--white-10)}
+.ob-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--text-2)}
+.ob-trust li{display:flex;align-items:center;gap:6px}
+.ob-tick{color:var(--mint)}
+@media (max-width:640px){.ob-h1-a{font-size:40px}.ob-h1-b{font-size:30px}.ob-lead{font-size:16px}}
+`;

package/dist/report/start/page-notice.js

@@ -0,0 +1,10 @@
+import { updateNotice } from '../render/ui/update-notice.js';
+/**
+ * What a page `start` serves draws over its content, from the model it is written with: the update notice, where the
+ * project's hooks run an older release than this agentwhy (`nothing-updates-by-itself.md` U4), and nothing otherwise.
+ * The onboarding does not ask for it: the hooks it writes are this release's.
+ */
+export function pageNotice(index) {
+    const behind = index.settings?.hooks?.behind;
+    return behind === undefined ? {} : { notice: updateNotice(behind) };
+}

package/dist/report/start/projects/index-projects.js

@@ -0,0 +1,43 @@
+import { join, relative } from 'node:path';
+import { SETTINGS_FILES } from '../../../adapter/claude-code/contract/settings.js';
+import { projectDirectoryName } from '../../../adapter/claude-code/contract/projects.js';
+import { homeRelative } from '../../render/home-relative.js';
+import { projectName } from '../app-nav.js';
+import { readSettingsFile, setUpBy } from '../settings-files.js';
+/**
+ * The person's projects as the window draws them (`.ai/specs/2026-09-27-which-project.md` V10): where each is, whether
+ * its folder is there, and whether it is set up - W23's two facts, read from the folder's own settings and the record of
+ * finished onboardings. Nothing is said of a folder that is gone, or whose settings could not be read.
+ */
+export async function indexProjects(listing, sources) {
+    const projects = listing.projects.filter((project) => !sources.noProject(project.path));
+    const temporary = sources.temporary;
+    const listed = temporary === undefined ? projects : projects.filter((project) => !temporary(project.path));
+    const finished = await sources.onboarding?.doneFor(listed.map((project) => projectDirectoryName(project.path)));
+    const rows = await Promise.all(listed.map(async (project) => {
+        const setUp = project.exists ? await setUpIn(project, sources.files, finished) : undefined;
+        return {
+            id: project.id,
+            place: homeRelative(project.path, sources.home),
+            name: projectName(project.path),
+            exists: project.exists,
+            conversations: project.conversations,
+            newest: project.newest,
+            ...(setUp === undefined ? {} : { setUp }),
+            current: relative(project.path, sources.workingDirectory) === '',
+        };
+    }));
+    const hidden = projects.length - listed.length;
+    return { rows, unreadable: listing.unreadable, ...(hidden === 0 ? {} : { temporary: hidden }), switchable: sources.switchable, choosable: sources.choosable };
+}
+/** Set up where the settings say so (`setUpBy`), or the onboarding was finished; unknown where either is unread. */
+async function setUpIn(project, files, finished) {
+    const directory = join(project.path, SETTINGS_FILES.directory);
+    const local = await readSettingsFile(files, join(directory, SETTINGS_FILES.local));
+    const shared = await readSettingsFile(files, join(directory, SETTINGS_FILES.shared));
+    if (setUpBy([local, shared]))
+        return true;
+    if (local === 'unreadable' || shared === 'unreadable' || finished === undefined)
+        return undefined;
+    return finished.has(projectDirectoryName(project.path));
+}

package/dist/report/start/projects/moved-page.js

@@ -0,0 +1,82 @@
+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 { BUTTON_STYLE, pill } from '../../render/ui/button.js';
+import { pageShell } from '../../render/ui/page-shell.js';
+/**
+ * What a page of a project shown earlier in this process says now (`.ai/specs/2026-09-27-which-project.md` V14, amended
+ * 2026-09-28 by the maintainer: "Back" after a switch reached nothing). The process serves one project at a time, at one
+ * address, so the pages of the one before - in a tab's history, or reloaded - reach it and are told: "This page was for
+ * my-app. agentwhy now shows blog." **Show my-app again** switches back in this tab; **Go to blog** is the project
+ * shown. Nothing of the earlier project is served, and nothing is written from its pages but the way back (V17).
+ */
+export function movedPage(was, now, nowUrl) {
+    return pageShell({
+        title: 'moved.pageTitle',
+        policy: INDEX_CONTENT_SECURITY_POLICY_META,
+        styles: [BUTTON_STYLE, MOVED_STYLE],
+        scripts: [MOVED_SCRIPT],
+        live: false,
+        main: '<section class="mv" data-moved-words="' + e(JSON.stringify(words(was.name))) + '">' +
+            '<p class="mv-eyebrow">agentwhy</p>' +
+            '<h1 class="mv-title">' + inLanguages((t) => t('moved.title', { was: '<strong>' + e(was.name) + '</strong>' })) + '</h1>' +
+            '<p class="mv-text">' + inLanguages((t) => t('moved.text', { now: '<strong>' + e(now.name) + '</strong>' })) + '</p>' +
+            '<div class="mv-go">' +
+            '<span class="js-only">' + pill({ label: inLanguages((t) => t('moved.back', { was: e(was.name) })), tone: 'light', size: 'lg', button: true, attributes: ' data-moved-back' }) + '</span>' +
+            pill({ label: inLanguages((t) => t('moved.stay', { now: e(now.name) })), tone: 'outline', size: 'lg', href: e(nowUrl) }) +
+            '</div>' +
+            '<p class="mv-say" role="status" data-moved-say></p>' +
+            '<p class="mv-noscript">' + inLanguages((t) => t('moved.noScript', { was: e(was.name) })) + '</p>' +
+            '</section>',
+    });
+}
+/** What the script says, in every language: it cannot hold three in one text node. */
+function words(was) {
+    return Object.fromEntries(LANGS.map((lang) => {
+        const t = translator(lang);
+        return [lang, { switching: t('proj.switching', { name: was }), failed: t('proj.switchFailed', { reason: '{reason}' }), unreachable: t('proj.unreachable') }];
+    }));
+}
+/**
+ * **Show my-app again**: the earlier project's run starts again and this tab goes to it; the answer is its address. Asked
+ * at this page's own address - the earlier project's - which the process takes for nothing but this.
+ */
+const MOVED_SCRIPT = String.raw `
+(() => {
+  const root = document.querySelector('[data-moved-words]');
+  const back = document.querySelector('[data-moved-back]');
+  const say = document.querySelector('[data-moved-say]');
+  if (!root || !back || !say) return;
+  const words = JSON.parse(root.getAttribute('data-moved-words'));
+  const word = (key) => (words[document.documentElement.dataset.lang] || words.en)[key];
+  back.addEventListener('click', () => {
+    back.disabled = true;
+    back.classList.add('pill-busy');
+    say.textContent = word('switching');
+    fetch('api/switch-back', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' })
+      .then((response) => response.json().then((answer) => ({ ok: response.ok && answer.ok === true, answer })))
+      .catch(() => ({ ok: false, unreachable: true }))
+      .then((answer) => {
+        if (answer.ok && typeof answer.answer.url === 'string') { location.replace(answer.answer.url); return; }
+        back.disabled = false;
+        back.classList.remove('pill-busy');
+        say.textContent = answer.unreachable ? word('unreachable') : word('failed').replace('{reason}', (answer.answer && answer.answer.message) || '');
+      });
+  });
+})();
+`;
+/** The page's own look. Colours come from the tokens only. */
+const MOVED_STYLE = String.raw `
+.mv{max-width:620px;margin:18vh auto 0;text-align:center;display:flex;flex-direction:column;align-items:center}
+.mv-eyebrow{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--coral-text)}
+.mv-title{margin:0 0 12px;font-size:36px;line-height:1.15;letter-spacing:-.02em;font-weight:650;text-wrap:balance}
+.mv-title strong,.mv-text strong{color:var(--text);font-weight:650}
+.mv-text{margin:0 0 26px;font-size:17px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
+.mv-go{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
+.mv-go .pill{justify-content:center}
+.mv-say{margin:16px 0 0;font-size:14px;color:var(--text-soft)}
+.mv-say:empty{display:none}
+.mv-noscript{margin:16px 0 0;font-size:13.5px;color:var(--text-3)}
+.js .mv-noscript{display:none}
+@media (max-width:640px){.mv{margin-top:10vh}.mv-title{font-size:28px}.mv-go{flex-direction:column;align-self:stretch}.mv-go .js-only .pill,.mv-go>.pill{width:100%}}
+`;

package/dist/report/start/projects/project-switch.js

@@ -0,0 +1,138 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages, LANGS, translator } from '../../render/report-copy.js';
+import { pill } from '../../render/ui/button.js';
+/**
+ * Showing another project in this tab (`.ai/specs/2026-09-27-which-project.md` V12, V14, V15), shared by the two places
+ * that offer it: the window the sidebar's card opens, and the onboarding's project step (V11). A container carrying
+ * `switchArea(from)` holds the buttons: any `[data-switch-project]` in it asks this run's server to show that project,
+ * and **Choose a folder…** opens the computer's own folder window. The page names a project by the id the server listed
+ * it under, never by a path (V17), and says where it asked from, so the run it lands on opens the page it should (V16).
+ */
+/** The attributes of a container the script works in: its words, and - on the onboarding's step - where it asks from. */
+export function switchArea(from) {
+    return ' data-switch-words="' + e(JSON.stringify(switchWords())) + '"' + (from === undefined ? '' : ' data-switch-from="' + from + '"');
+}
+/** 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>';
+/**
+ * "Don't see your project?" (V12): where the computer has a folder window, **Choose a folder…** opens it, and what it came
+ * to is said under the box; where it has none, how to bring a project onto the list.
+ */
+export function chooseFolderBox(choosable) {
+    return '<div class="pjw-missing" data-choose-area><div class="pjw-missing-words">' +
+        '<p class="pjw-missing-title">' + inLanguages((t) => t('proj.missing.title')) + '</p>' +
+        '<p class="pjw-missing-text">' + inLanguages((t) => t('proj.missing.text')) +
+        (choosable ? '' : ' ' + inLanguages((t) => t('proj.missing.how'))) + '</p></div>' +
+        (choosable ? '<span class="js-only pjw-choose">' + pill({ label: FOLDER_SVG + inLanguages((t) => t('proj.choose')), tone: 'light', size: 'lg', button: true, attributes: ' data-choose-folder' }) + '</span>' : '') +
+        '</div>' +
+        (choosable ? '<div class="pjw-near" data-choose-area><p class="pjw-say" role="status" data-choose-say></p><div class="pjw-near-offers" data-choose-near></div></div>' : '');
+}
+/** Where a switch asked for over the list says what it came to. */
+export const SWITCH_SAY = '<p class="pjw-say" role="status" data-switch-say></p>';
+/** The script's own sentences, per language; `{name}` and `{reason}` are filled in where they are said. */
+function switchWords() {
+    return Object.fromEntries(LANGS.map((lang) => {
+        const t = translator(lang);
+        return [lang, {
+                switching: t('proj.switching', { name: '{name}' }),
+                failed: t('proj.switchFailed', { reason: '{reason}' }),
+                unreachable: t('proj.unreachable'),
+                chooseHome: t('proj.chooseHome'),
+                chooseRoot: t('proj.chooseRoot'),
+                chooseHere: t('proj.chooseHere'),
+                nearAbove: t('proj.nearAbove', { name: '{name}' }),
+                nearInside: t('proj.nearInside', { name: '{name}' }),
+                openName: t('proj.openName', { name: '{name}' }),
+                useAnyway: t('proj.useAnyway', { name: '{name}' }),
+            }];
+    }));
+}
+/**
+ * V14, V15: a click asks this run's server to show the project in its place; the answer is the address of the run that
+ * does, and this tab goes there. A refusal leaves the page as it was and says why. The page sends the project's id -
+ * the name the server listed it by - and never a path (V17).
+ */
+export const SWITCH_SCRIPT = String.raw `
+(() => {
+  document.querySelectorAll('[data-switch-words]').forEach((root) => {
+    const words = JSON.parse(root.getAttribute('data-switch-words'));
+    const from = root.getAttribute('data-switch-from');
+    const say = root.querySelector('[data-switch-say]');
+    const chooseSay = root.querySelector('[data-choose-say]');
+    const near = root.querySelector('[data-choose-near]');
+    const word = (key) => (words[document.documentElement.dataset.lang] || words.en)[key];
+    const lock = (locked) => root.querySelectorAll('[data-switch-project], [data-choose-folder]').forEach((one) => { one.disabled = locked; });
+    // Said beside what was clicked: a row's switch over the list, a chosen folder's under its box.
+    const sayFor = (element) => (element.closest('[data-choose-area]') && chooseSay) || say;
+    const ask = (route, body) => fetch(route, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(from ? { ...body, from } : body) })
+      .then((response) => response.json().then((answer) => ({ ok: response.ok && answer.ok === true, answer })))
+      .catch(() => ({ ok: false, unreachable: true }));
+    const refused = (where, answer) => {
+      lock(false);
+      if (where) where.textContent = answer.unreachable ? word('unreachable') : word('failed').replace('{reason}', (answer.answer && answer.answer.message) || '');
+    };
+    const offer = (label, id, name, tone) => {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'pill pill-' + tone + ' pill-md';
+      button.setAttribute('data-switch-project', id);
+      button.setAttribute('data-switch-name', name);
+      button.textContent = label.replace('{name}', name);
+      return button;
+    };
+    root.addEventListener('click', (event) => {
+      const button = event.target.closest('[data-switch-project]');
+      if (button) {
+        const where = sayFor(button);
+        lock(true);
+        if (where) where.textContent = word('switching').replace('{name}', button.getAttribute('data-switch-name'));
+        ask('api/switch-project', { id: button.getAttribute('data-switch-project') }).then((answer) => {
+          if (answer.ok && typeof answer.answer.url === 'string') { location.assign(answer.answer.url); return; }
+          refused(where, answer);
+        });
+        return;
+      }
+      const choose = event.target.closest('[data-choose-folder]');
+      if (!choose || !chooseSay || !near) return;
+      lock(true);
+      near.textContent = '';
+      chooseSay.textContent = '';
+      // The maintainer, 2026-09-28: a loader, not a sentence, while the folder window opens and is open.
+      const busy = (on) => { choose.classList.toggle('pill-busy', on); if (on) choose.setAttribute('aria-busy', 'true'); else choose.removeAttribute('aria-busy'); };
+      busy(true);
+      ask('api/choose-folder', { lang: document.documentElement.dataset.lang || 'en' }).then((answer) => {
+        busy(false);
+        if (!answer.ok) { refused(chooseSay, answer); return; }
+        const said = answer.answer;
+        if (said.kind === 'switched' && typeof said.url === 'string') { location.assign(said.url); return; }
+        lock(false);
+        if (said.kind === 'cancelled') { chooseSay.textContent = ''; return; }
+        if (said.kind === 'refused') { chooseSay.textContent = word(said.not === 'home' ? 'chooseHome' : 'chooseRoot'); return; }
+        if (said.kind === 'here') { chooseSay.textContent = word('chooseHere'); return; }
+        if (said.kind === 'near') {
+          chooseSay.textContent = said.above ? word('nearAbove').replace('{name}', said.projects[0].name) : word('nearInside').replace('{name}', said.chosen.name);
+          // The project shown is offered only on the onboarding's step, where choosing it goes on in the page.
+          said.projects.filter((project) => !project.here).forEach((project) => near.append(offer(word('openName'), project.id, project.name, 'light')));
+          near.append(offer(word('useAnyway'), said.chosen.id, said.chosen.name, 'outline'));
+        }
+      });
+    });
+  });
+})();
+`;
+/** The box, and what is said under it and over the list. Colours come from the tokens only. */
+export const SWITCH_STYLE = String.raw `
+.pjw-say{margin:0;min-height:0;font-size:14px;color:var(--text-soft)}
+.pjw-say:not(:empty){margin:10px 4px 0}
+.pjw-missing{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:18px 20px;border:1px dashed var(--white-16);border-radius:16px}
+.pjw-missing-words{min-width:0}
+.pjw-choose{flex:none}
+.pjw-choose .pill{display:inline-flex;align-items:center;gap:9px}
+.pjw-near .pjw-say:not(:empty){margin:12px 4px 0}
+.pjw-near-offers{display:flex;flex-wrap:wrap;gap:10px;margin:10px 4px 0}
+.pjw-near-offers:empty{display:none}
+.pjw-missing-title{margin:0;font-size:15.5px;font-weight:600}
+.pjw-missing-text{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
+@media (max-width:640px){.pjw-missing{flex-direction:column;align-items:stretch}.pjw-choose .pill{width:100%;justify-content:center}}
+`;

package/dist/report/start/projects/projects-window.js

@@ -0,0 +1,67 @@
+import { escapeHtml as e } from '../../render/html-report-components.js';
+import { inLanguages, labelAttributes } from '../../render/report-copy.js';
+import { BUTTON_STYLE, closeButton, pill } from '../../render/ui/button.js';
+import { CLOSES, POPUP_SCRIPT, POPUP_STYLE, popup } from '../../render/ui/popup.js';
+import { PROJECT_LIST_SCRIPT, PROJECT_LIST_STYLE, projectList } from '../../render/ui/project-list.js';
+import { TAG_STYLE } from '../../render/ui/tag.js';
+import { chooseFolderBox, SWITCH_SAY, SWITCH_SCRIPT, SWITCH_STYLE, switchArea } from './project-switch.js';
+/** The window's id: the sidebar's card links to it (`which-project.md` V2). */
+export const PROJECTS_WINDOW = 'projects';
+/**
+ * The window that switches projects, over any page `start` serves (`.ai/specs/2026-09-27-which-project.md` V2, V10-V15),
+ * as the maintainer's design of 2026-09-28 draws it: opened from the sidebar's card, so the page stays where it is
+ * (guidelines §8). Every other project offers a way to it - **Open** (light, the maintainer's) where it is set up, **Set
+ * it up →** (coral: it starts the setup) where it is not - and either shows that project in this tab (V14, V15). Where
+ * the run cannot switch, nothing is offered; without a script nothing switches, and the window says so (V13). Nothing
+ * where the run is not served or shares its pages.
+ */
+export function projectsWindows(index) {
+    const projects = index.projects;
+    if (projects === undefined)
+        return [];
+    const title = PROJECTS_WINDOW + '-title';
+    const action = projects.switchable ? switchAction : undefined;
+    return [{
+            html: popup({
+                id: PROJECTS_WINDOW,
+                size: 'list',
+                labelledBy: title,
+                body: '<div class="pjw"' + switchArea() + '>' +
+                    '<div class="pjw-head"><div><h2 class="pjw-title" id="' + title + '">' + inLanguages((t) => t('proj.title')) + '</h2>' +
+                    '<p class="pjw-lead">' + inLanguages((t) => t('proj.lead')) + '</p></div>' +
+                    closeButton(labelAttributes((t) => t('app.close')) + CLOSES) + '</div>' +
+                    '<div class="pjw-body">' +
+                    SWITCH_SAY +
+                    projectList({ rows: projects.rows, unreadable: projects.unreadable, now: index.now, timeZone: index.timeZone ?? 'UTC', ...(action === undefined ? {} : { action }) }) +
+                    (projects.switchable ? '<p class="pjw-noscript">' + inLanguages((t) => t('proj.noScript')) + '</p>' : '') +
+                    chooseFolderBox(projects.choosable) +
+                    '<p class="pjw-which">' + inLanguages((t) => t('proj.which')) + '</p>' +
+                    '</div></div>',
+            }),
+            styles: [BUTTON_STYLE, POPUP_STYLE, TAG_STYLE, PROJECT_LIST_STYLE, SWITCH_STYLE, PROJECTS_WINDOW_STYLE],
+            scripts: [POPUP_SCRIPT, PROJECT_LIST_SCRIPT, SWITCH_SCRIPT],
+        }];
+}
+/** What another project offers: the way to it, which only a script can take. */
+function switchAction(row) {
+    if (row.current)
+        return '';
+    const label = inLanguages((t) => t(row.setUp === false ? 'proj.setItUp' : 'proj.open'));
+    return '<span class="js-only">' + pill({
+        label,
+        tone: row.setUp === false ? 'primary' : 'light',
+        size: 'md',
+        button: true,
+        attributes: ' data-switch-project="' + e(row.id) + '" data-switch-name="' + e(row.name) + '"',
+    }) + '</span>';
+}
+const PROJECTS_WINDOW_STYLE = String.raw `
+.pjw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:30px 32px 0}
+.pjw-title{margin:0;font-size:28px;line-height:1.2;font-weight:650;letter-spacing:-0.015em}
+.pjw-lead{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
+.pjw-body{padding:8px 32px 30px}
+.pjw-noscript{display:none;margin:12px 4px 0;font-size:13px;color:var(--text-3)}
+html:not(.js) .pjw-noscript{display:block}
+.pjw-which{margin:16px 4px 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
+@media (max-width:640px){.pjw-head{padding:22px 18px 0}.pjw-title{font-size:24px}.pjw-body{padding:6px 18px 22px}}
+`;

package/dist/report/start/projects/temporary-space.js

@@ -0,0 +1,18 @@
+import { isAbsolute, relative, sep } from 'node:path';
+/** Where systems keep what is thrown away: `/tmp`, and on macOS the per-person folders `TMPDIR` points into. */
+const SYSTEM_TEMPORARY = ['/tmp', '/private/tmp', '/var/tmp', '/private/var/tmp', '/var/folders', '/private/var/folders'];
+/**
+ * Whether a folder lies in the computer's temporary space - where a quick try with the agent is started, and nobody keeps a
+ * project (`.ai/specs/2026-09-27-which-project.md` V10, the maintainer's design: "Hidden: 1 temporary folder"). The run's
+ * own temporary directory counts, reached through `/private` too, since macOS reports a folder's path with every link
+ * followed. A home directory that itself lies there - a test's, a sandbox's - keeps its folders: they are its projects.
+ */
+export function inTemporarySpace(path, temporaryDirectory, home) {
+    const roots = [temporaryDirectory, ...(temporaryDirectory.startsWith('/var/') ? [`/private${temporaryDirectory}`] : []), ...SYSTEM_TEMPORARY];
+    return roots.some((root) => within(root, path) && !(home !== undefined && home !== '' && within(root, home) && (within(home, path) || relative(home, path) === '')));
+}
+/** Whether `path` lies under `folder`, and is not `folder` itself. */
+function within(folder, path) {
+    const between = relative(folder, path);
+    return between !== '' && between !== '..' && !between.startsWith(`..${sep}`) && !isAbsolute(between);
+}