@bongos/core 1.19.515 → 1.19.516

package/tests/projects_hub.mjs

@@ -706,14 +706,15 @@ test('the About answers travel on the create request, and an empty one is OMITTE
 });
 
 test('a renumbering of the wizard invalidates old drafts — the key carries the version', () => {
-  // task 1002772 renumbered once and bumped to -v2; task 1002334 renumbered again.
-  // A draft replayed under a different numbering lands on the wrong panel with the
-  // rail already marking the skipped steps done.
+  // task 1002772 renumbered once and bumped to -v2; task 1002334 renumbered again;
+  // task 1002339 (the module picker) is the third. A draft replayed under a
+  // different numbering lands on the wrong panel with the rail already marking
+  // the skipped steps done.
   const key = (SCRIPT.match(/var DRAFT_KEY = '([^']+)'/) || [, ''])[1];
   assert.match(key, /-v\d+$/, 'the draft key is versioned');
   const panels = (SCRIPT.match(/var panels = \{([^}]*)\}/) || [, ''])[1];
   const count = [...panels.matchAll(/\d+:\s*'panel-/g)].length;
-  assert.equal(count, 8, 'gate + six numbered steps + done — bump DRAFT_KEY when this changes');
+  assert.equal(count, 9, 'gate + seven numbered steps + done — bump DRAFT_KEY when this changes');
 });
 
 test('every row lays the same five parts — the ledger has no ragged row', () => {
@@ -2058,7 +2059,9 @@ test('the wizard takes the world by scope: no card ground, the six-step strip as
   assert.ok(at > -1, 'the #view-new block exists in cosmos.css');
   const block = COSMOS.slice(at);
   assert.match(block, /#view-new \.card\{background:none;border-radius:0;box-shadow:none;/, 'no card ground');
-  assert.match(block, /#view-new \.steps\{display:grid;grid-template-columns:repeat\(6,1fr\);/, 'the strip lays its six steps on six tracks');
+  // seven tracks since task 1002339 added the Modules step; the count is the
+  // rail's own, so it moves with the panels map rather than being a magic number
+  assert.match(block, /#view-new \.steps\{display:grid;grid-template-columns:repeat\(7,1fr\);/, 'the strip lays a track per numbered step');
   assert.match(block, /#view-new \.steps li::before\{content:"";position:absolute;top:-4px;left:0;right:auto;width:7px;height:7px;/, 'the connector becomes the 7px dot');
   assert.match(block, /#view-new \.steps li\.now::before\{background:var\(--accent\);border-color:var\(--accent\);outline:4px solid/, 'the lit step carries the accent and an outline halo');
   assert.match(block, /#view-new \.panel h1\{font-weight:300;[^}]*text-transform:lowercase;/, 'the step title in the display voice, lowercase');
@@ -2105,7 +2108,7 @@ test('the wizard\'s own structures wear the world: hairline fields, cells of one
   assert.match(block, /\.addrBig code\{display:block;font-family:var\(--font-display\);/, 'the address stands in the display voice');
   assert.doesNotMatch(block, /linear-gradient/, 'no tinted plates');
   assert.doesNotMatch(block, /box-shadow:(?!none)/, 'no box shadow in the wizard block');
-  assert.match(HUB, /<div class="nav">\s*<button type="button" class="btn ghost" data-back="5">← Back<\/button>\s*<button type="button" class="btn big" id="doCreate">Create my project<\/button>/, 'the review\'s doors sit on one row, back then the primary');
+  assert.match(HUB, /<div class="nav">\s*<button type="button" class="btn ghost" data-back="6">← Back<\/button>\s*<button type="button" class="btn big" id="doCreate">Create my project<\/button>/, 'the review\'s doors sit on one row, back then the primary');
   assert.match(HUB, /<h2 class="stepsHead">Your steps — the parts only you can play<\/h2>/, 'the steps heading is the label face by class, not an inline style');
   // what is enqueued is unchanged (ADR 0111): the filing body the control plane reads
   assert.match(SCRIPT, /body: JSON\.stringify\(\{\s*slug: state\.slug,/, 'the filing still carries the slug first');
@@ -2114,7 +2117,69 @@ test('the wizard\'s own structures wear the world: hairline fields, cells of one
   assert.match(SCRIPT, /onboard_mode: state\.mode === 'adopt' \? 'adopt' : 'greenfield'/, 'the onboard mode is unchanged');
   // the kit walks every step and files against the stub
   const states = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.states.json'), 'utf8')).states;
-  for (const s of ['type', 'about', 'home', 'address', 'review', 'done']) assert.ok(states['in-new-' + s], `the ${s} step has a kit state`);
+  for (const s of ['type', 'about', 'modules', 'home', 'address', 'review', 'done']) assert.ok(states['in-new-' + s], `the ${s} step has a kit state`);
   const probes = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.probes.json'), 'utf8')).probes;
   assert.ok(probes.some((p) => /the wizard driver \(task 1003346\)/.test(p.name) && p.steps.some((st) => st[1] === '#doCreate')), 'the wizard driver files a project end to end');
 });
+
+test('the Modules step ships as real markup and is skippable like About (task 1002339)', () => {
+  const panel = (HUB.match(/<section class="panel" id="panel-modules"[\s\S]*?<\/section>/) || [''])[0];
+  assert.ok(panel, '#panel-modules ships as real markup, not built by script');
+  assert.match(panel, /id="modCards"/, 'the band the picker paints its rows into');
+  assert.match(panel, /class="typeCards"/, 'and it is the SAME band the type and team questions use — no new grammar');
+  assert.match(panel, /id="modCoreNote"/, 'the always-on core is stated on the panel');
+  // the skip must be its own control, not "leave it and press Next" — the rule
+  // task 1002334 wrote for the one other optional step
+  assert.match(panel, /id="skipModules"/, 'the skip is a control, not an inference');
+  assert.match(panel, /Optional/, 'and the panel says so before it asks');
+  // nothing in validateStep may gate it
+  const validate = SCRIPT.slice(SCRIPT.indexOf('function validateStep('));
+  const map = SCRIPT.match(/var panels = \{([^}]*)\}/)[1];
+  const modStep = Number((map.match(/(\d+):\s*'panel-modules'/) || [, 0])[1]);
+  assert.ok(modStep > 0, 'the Modules panel is in the map');
+  assert.ok(!validate.slice(0, validate.indexOf('function ', 1)).includes(`if (step === ${modStep}) {`),
+    'the optional step has no validation clause — Next past an untouched picker is the point');
+});
+
+test('the picker reads ONE public declaration, and it is the one the bundles come from (task 1002339)', () => {
+  // A second source for "what may be chosen" is exactly what would let a
+  // preselect name a module the panel has no row for (ADR 0237 §5).
+  assert.match(SCRIPT, /fetch\(API \+ '\/provisioning\/starter-bundles'/, 'the picker reads the starter-bundles route');
+  assert.equal((SCRIPT.match(/'\/provisioning\/starter-bundles'/g) || []).length, 1, 'exactly once');
+  // and it is a public read — no other module-catalog call joins it
+  assert.doesNotMatch(SCRIPT, /fetch\(API \+ '\/modules'/, 'no signed-in catalog read from a signed-out wizard');
+});
+
+test('the picker\'s answer rides the create request, and an untouched picker sends nothing (task 1002339)', () => {
+  // absent means SKIPPED, and the server then applies the same starter bundle
+  // the panel preselected — the same contract `description` and `detail` carry
+  const body = SCRIPT.slice(SCRIPT.indexOf('body: JSON.stringify({'));
+  assert.ok(body.includes('modules: modulesForCreate(),'), 'the create body carries the picker\'s ids');
+  assert.match(SCRIPT, /function modulesForCreate\(\) \{\s*return state\.modules === null \? undefined : state\.modules\.slice\(\);/,
+    'and modulesForCreate() omits the key while nothing has been said');
+});
+
+test('the review names what the project will actually come with (task 1002339)', () => {
+  // The picker is optional, so the last screen before Create must show the set
+  // the owner is about to get — their picks, or the preselect they walked past.
+  const render = SCRIPT.slice(SCRIPT.indexOf('function renderReview()'));
+  const rows = render.slice(0, render.indexOf('$(\'reviewList\').innerHTML'));
+  assert.match(rows, /\['Extras', extrasRow\(\)\]/, 'the ledger carries an Extras row');
+  // What that row SAYS has three cases (picked / preselect / catalog not loaded)
+  // and they live with the picker's own rules, executed by
+  // tests/projects_hub_module_picker.mjs. This pins that the review defers to them.
+  assert.match(SCRIPT, /function extrasRow\(\) \{/, 'and it is the picker that decides what it says');
+  assert.match(SCRIPT, /'None — just the core'/, 'an empty selection reads as a fact, not a blank');
+});
+
+test('the kit stub answers the picker\'s read, so the panel renders in the design kit (task 1002339)', () => {
+  // The stub is not the server (this module's CLAUDE.md trap): it serves
+  // fixtures. A 404 here would have rendered the couldn't-load clause in every
+  // state and probe, and nobody would have seen the picker at all.
+  const stub = fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'kit', 'serve.js'), 'utf8');
+  assert.match(stub, /rest === '\/provisioning\/starter-bundles'/, 'the stub serves the picker\'s read');
+  const probes = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.probes.json'), 'utf8')).probes;
+  assert.ok(probes.some((p) => /the wizard driver \(task 1003346\)/.test(p.name)
+    && p.steps.some((st) => st[1] === '#panel-modules button[type=submit]')),
+  'and the end-to-end driver walks the new step rather than stopping at it');
+});

package/tests/projects_hub_module_picker.mjs

@@ -0,0 +1,369 @@
+// tests/projects_hub_module_picker.mjs — the create wizard's module picker,
+// EXECUTED (BV1.R20, task 1002339; goal 1000046 criterion `proj-module-select`).
+//
+// tests/projects_hub.mjs pins this surface statically, on purpose (C7: "real
+// markup, not JS-built"). But the picker is the one part of the wizard whose
+// whole behaviour is decisions — what is preselected, what a toggle does, what a
+// skip means — and a static regex cannot tell a preselect that works from one
+// that silently paints nothing. So this file runs the picker's own source in
+// `vm` under a small DOM stub and asserts what an owner would actually see.
+//
+// The precedent is tests/task_detail_ui.mjs (there is no jsdom in this repo).
+// The difference: task-detail.js is a whole file, while the picker lives inside
+// projects.html's one big inline <script> — so the block is sliced out by its
+// own comment sentinels and run with the five things it closes over ($, root,
+// esc, state, saveDraft/show) supplied by the harness. That slice is itself an
+// assertion: rename the sentinels and this file fails loudly rather than
+// quietly testing nothing.
+//
+// Run:  node --test --test-reporter=tap tests/projects_hub_module_picker.mjs
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
+const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
+const HUB = fs.readFileSync(path.join(LANDING, 'projects.html'), 'utf8');
+
+const START = '/* ── the module picker (task 1002339, BV1.R20) ──';
+const END = "$('skipModules').addEventListener('click', function () { show(5, true); });";
+const from = HUB.indexOf(START);
+const to = HUB.indexOf(END);
+assert.ok(from > -1, 'the picker block opens with its sentinel comment');
+assert.ok(to > from, 'the picker block closes with the skip wiring');
+const PICKER = HUB.slice(from, to + END.length).replace(/\r\n/g, '\n');
+
+// The payload GET /provisioning/starter-bundles serves (ADR 0237 + task 1002339).
+// Deliberately a FIXTURE and not a live require: this asserts the picker reads
+// the shape, and tests/provisioning_starter_bundles.mjs asserts the route emits
+// it. Two files, one shape, neither trusting the other's word for it.
+const PAYLOAD = {
+  core: ['autonomy', 'builder-settings', 'copy-desk', 'economy', 'government', 'grading',
+    'hall-ui', 'ideas', 'lifecycle', 'memory', 'onboarding', 'public-landing',
+    'security', 'sessions', 'status-ui', 'ui-design'],
+  bundles: [
+    { type: 'game', bundle: ['dev-box', 'discord'] },
+    { type: 'research', bundle: ['agents'] },
+    { type: 'business', bundle: ['agents', 'dev-box'] },
+    { type: 'non-profit', bundle: ['discord'] },
+    { type: 'not-sure', bundle: [] },
+  ],
+  optional: [
+    { key: 'agents', label: 'Extra agents', summary: 'More AI agents alongside the ones every project gets.' },
+    { key: 'dev-box', label: 'Dev boxes', summary: 'A cloud workspace where a change can be tried out first.' },
+    { key: 'discord', label: 'Discord', summary: 'A Discord server that carries your build news.' },
+  ],
+};
+
+function makeEl(id) {
+  const classes = new Set();
+  const attrs = new Map();
+  return {
+    id, _html: '', textContent: '', hidden: false, _handlers: {},
+    set innerHTML(v) { this._html = String(v); },
+    get innerHTML() { return this._html; },
+    classList: {
+      add: (c) => classes.add(c),
+      remove: (c) => classes.delete(c),
+      toggle: (c, on) => { if (on) classes.add(c); else classes.delete(c); },
+      contains: (c) => classes.has(c),
+    },
+    setAttribute(k, v) { attrs.set(k, String(v)); },
+    getAttribute(k) { return attrs.has(k) ? attrs.get(k) : null; },
+    addEventListener(type, fn) { this._handlers[type] = fn; },
+  };
+}
+
+// Parse the rows the picker WROTE, so a selector resolves only when the markup
+// is genuinely there — the point of the harness.
+function rowsOf(html) {
+  const out = [];
+  const re = /<button type="button" class="tpill" data-mod="([^"]+)" aria-pressed="(true|false)"><span><b>([^<]*)<\/b><small>([^<]*)<\/small><\/span><\/button>/g;
+  let m;
+  while ((m = re.exec(html))) out.push({ key: m[1], pressed: m[2] === 'true', label: m[3], summary: m[4] });
+  return out;
+}
+
+// Boot the picker with a given draft state. `fetchOk: false` drives the
+// couldn't-load branch. Returns the handles the assertions drive it through.
+function boot({ state: seed = {}, fetchOk = true } = {}) {
+  const els = new Map();
+  const $ = (id) => { if (!els.has(id)) els.set(id, makeEl(id)); return els.get(id); };
+  const form = makeEl('panel-modules-form');
+  const state = { step: 4, projType: null, modules: null, ...seed };
+  const shown = [];
+  let saves = 0;
+  let fetches = 0;
+  let reviews = 0;
+
+  const sandbox = {
+    $,
+    root: { querySelector: (sel) => (sel === '#panel-modules form' ? form : null) },
+    esc: (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])),
+    state,
+    saveDraft: () => { saves++; },
+    show: (step) => { shown.push(step); },
+    // the block repaints the review when the read lands on step 7 (a resumed
+    // draft can reach it having never opened the picker)
+    renderReview: () => { reviews++; },
+    API: '/api/bongos',
+    fetch: () => { fetches++; return Promise.resolve(fetchOk
+      ? { ok: true, json: () => Promise.resolve(PAYLOAD) }
+      : { ok: false, json: () => Promise.resolve(null) }); },
+    Promise, JSON, Math, Object, Array, String, Number, console,
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(PICKER, sandbox, { filename: 'projects.html#module-picker' });
+
+  const band = $('modCards');
+  return {
+    state, shown, sandbox, form,
+    saves: () => saves,
+    fetches: () => fetches,
+    reviews: () => reviews,
+    extrasRow: () => sandbox.extrasRow(),
+    // The read is LAZY: the first render kicks it, and its .then repaints when it
+    // lands. open() is that whole sequence, which is exactly what entering the
+    // step does — so a test never asserts against a paint the browser skips.
+    settle: async () => { for (let i = 0; i < 20; i++) await Promise.resolve(); },
+    render: () => sandbox.renderModules(),
+    open: async function () { sandbox.renderModules(); for (let i = 0; i < 20; i++) await Promise.resolve(); },
+    rows: () => rowsOf(band.innerHTML),
+    coreNote: () => $('modCoreNote').textContent,
+    coreShown: () => $('modCoreNote').classList.contains('on'),
+    click: (key) => {
+      const target = {
+        closest: (sel) => (sel === '.tpill[data-mod]' ? { getAttribute: (k) => (k === 'data-mod' ? key : null) } : null),
+      };
+      band._handlers.click({ target });
+    },
+    next: () => form._handlers.submit({}),
+    skip: () => $('skipModules')._handlers.click(),
+    forCreate: () => sandbox.modulesForCreate(),
+    picked: () => sandbox.pickedModules(),
+  };
+}
+
+test('the declared project type preselects its bundle, and the rest of the catalog is offered switched off', async () => {
+  // Arrange — the owner said "game" on the Type step and has touched nothing here
+  const h = boot({ state: { projType: 'game' } });
+
+  // Act
+  await h.open();
+
+  // Assert — every opt-in module is a row; the bundle's two are on
+  const rows = h.rows();
+  assert.deepEqual(rows.map((r) => r.key), ['agents', 'dev-box', 'discord'], 'the whole opt-in catalog is offered');
+  assert.deepEqual(rows.filter((r) => r.pressed).map((r) => r.key), ['dev-box', 'discord'], 'the game bundle is preselected');
+  assert.equal(rows.find((r) => r.key === 'agents').pressed, false, 'and nothing else is');
+  // each row carries the copy an owner can actually read
+  assert.equal(rows[1].label, 'Dev boxes');
+  assert.match(rows[1].summary, /cloud workspace/);
+});
+
+test('a different type preselects a different bundle, and "not sure" preselects nothing', async () => {
+  for (const [type, expected] of [['research', ['agents']], ['business', ['agents', 'dev-box']], ['non-profit', ['discord']], ['not-sure', []], [null, []]]) {
+    const h = boot({ state: { projType: type } });
+    await h.open();
+    assert.deepEqual(h.rows().filter((r) => r.pressed).map((r) => r.key), expected, `type=${type}`);
+  }
+});
+
+test('the always-on core is stated, not rendered as sixteen toggles nobody may touch', async () => {
+  // A disabled control reads as a choice the owner failed to make. The core was
+  // never a choice, so it is a clause — visible, and outside the band.
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  assert.equal(h.coreShown(), true, 'the core is stated on the panel, not hidden');
+  assert.match(h.coreNote(), /16 core parts/, 'and it names how many');
+  assert.match(h.coreNote(), /always on/, 'and that they are not part of this choice');
+  for (const key of PAYLOAD.core) {
+    assert.ok(!h.rows().some((r) => r.key === key), `"${key}" is never a toggle`);
+  }
+});
+
+test('a toggle flips one module and leaves the rest of the preselect standing', async () => {
+  // Arrange
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  // Act — switch the bundle's discord off, switch agents on
+  h.click('discord');
+  h.click('agents');
+
+  // Assert
+  assert.deepEqual(h.rows().filter((r) => r.pressed).map((r) => r.key), ['agents', 'dev-box']);
+  assert.deepEqual(h.state.modules, ['agents', 'dev-box'], 'and the draft holds the real answer, in catalog order');
+  assert.ok(h.saves() >= 2, 'each toggle is written to the draft');
+});
+
+test('the first toggle is what turns "not answered" into an answer', async () => {
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  assert.equal(h.state.modules, null, 'before a touch, nothing has been said');
+  assert.equal(h.forCreate(), undefined, 'so the create request carries no modules key');
+
+  h.click('agents');
+  assert.deepEqual(h.forCreate(), ['agents', 'dev-box', 'discord'], 'after a touch it carries the whole set');
+});
+
+test('switching every module off is a real answer, not a reset to the bundle', async () => {
+  // The case a NOT NULL DEFAULT [] column could never have expressed: the owner
+  // said "none", and Next must not hand them the bundle back.
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+  h.click('dev-box');
+  h.click('discord');
+
+  assert.deepEqual(h.state.modules, []);
+  assert.deepEqual(h.forCreate(), [], 'an empty answer travels — it is not the same as absent');
+  assert.deepEqual(h.rows().filter((r) => r.pressed), [], 'and the panel shows it');
+});
+
+test('Skip walks past WITHOUT answering, so the server applies the bundle the panel showed', async () => {
+  // Arrange
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  // Act
+  h.skip();
+
+  // Assert — skipping is the one path that must leave nothing said, because the
+  // preselect and the server's fallback are the same declaration (ADR 0237)
+  assert.deepEqual(h.shown, [5], 'it advances to the Home step');
+  assert.equal(h.state.modules, null, 'and answers nothing');
+  assert.equal(h.forCreate(), undefined);
+  assert.deepEqual(h.picked(), ['dev-box', 'discord'], 'while the set they were shown is still the set they get');
+});
+
+test('Skip does not erase a toggle already made', async () => {
+  // The About step's rule: a visitor who changed something and then pressed Skip
+  // meant "I'm done here", not "throw that away".
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+  h.click('agents');
+  h.skip();
+
+  assert.deepEqual(h.state.modules, ['agents', 'dev-box', 'discord']);
+});
+
+test('Next CONFIRMS the set on screen — looking at it and accepting it is not the same as never being asked', async () => {
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  h.next();
+
+  assert.deepEqual(h.state.modules, ['dev-box', 'discord'], 'the preselect becomes the answer');
+  assert.deepEqual(h.forCreate(), ['dev-box', 'discord'], 'and rides the create request');
+});
+
+test('changing the project type re-preselects while nothing has been said, and never after', async () => {
+  // The arrow runs type -> modules (ADR 0237 §2). It must not run backwards over
+  // a choice the owner already made.
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+
+  h.state.projType = 'research';
+  h.render();
+  assert.deepEqual(h.rows().filter((r) => r.pressed).map((r) => r.key), ['agents'], 'an untouched picker follows the type');
+
+  h.click('discord');
+  h.state.projType = 'non-profit';
+  h.render();
+  assert.deepEqual(h.rows().filter((r) => r.pressed).map((r) => r.key), ['agents', 'discord'],
+    'an answered picker keeps the answer');
+});
+
+test('a draft resumed with a stored answer repaints that answer, not the bundle', async () => {
+  // sessionStorage survives a reload; the panel must not quietly re-apply the
+  // preselect over what the owner picked before they closed the tab.
+  const h = boot({ state: { projType: 'game', modules: ['agents'] } });
+  await h.open();
+
+  assert.deepEqual(h.rows().filter((r) => r.pressed).map((r) => r.key), ['agents']);
+});
+
+test('a catalog that will not load degrades to a clause — it never blocks a project from being created', async () => {
+  // Arrange
+  const h = boot({ state: { projType: 'game' }, fetchOk: false });
+
+  // Act
+  await h.open();
+
+  // Assert
+  assert.deepEqual(h.rows(), [], 'no rows are invented');
+  assert.match(h.coreNote(), /couldn’t load/, 'the panel says so in the owner\'s words');
+  assert.equal(h.state.modules, null, 'nothing is answered on their behalf');
+  h.skip();
+  assert.deepEqual(h.shown, [5], 'and the wizard still walks on — the server applies the bundle');
+});
+
+test('every rendered value goes through the page escaper', async () => {
+  // The rows are built with innerHTML (renderReview's existing idiom in this
+  // file), so the escaping is the safety property and it is asserted, not assumed.
+  const h = boot({ state: { projType: 'game' } });
+  await h.open();
+  h.sandbox.starterBundles = {
+    core: [], bundles: [],
+    optional: [{ key: 'x"><script>', label: '<b>bad</b>', summary: 'a & b' }],
+  };
+  h.render();
+
+  const html = h.sandbox.$('modCards').innerHTML;
+  assert.ok(!html.includes('<script>'), 'a hostile key cannot break out of the attribute');
+  assert.ok(html.includes('&lt;b&gt;bad&lt;/b&gt;'), 'a label is escaped');
+  assert.ok(html.includes('a &amp; b'), 'and so is a summary');
+});
+
+test('the catalog read is LAZY and asked once — /projects serves four views from one file', async () => {
+  // The map view has no business paying for the picker's read, and re-entering
+  // the step must not re-ask. fetchPlan() beside it memoises for the same reason.
+  // The counter is wired INTO the sandbox before the block runs, so a fetch at
+  // boot would be caught — a counter installed afterwards would prove nothing.
+  const h = boot({ state: { projType: 'game' } });
+
+  assert.equal(h.fetches(), 0, 'loading the page does not ask');
+  await h.open();
+  await h.open();
+  assert.equal(h.fetches(), 1, 'entering the step asks exactly once, however often it is entered');
+});
+
+test('the review names the set even when the picker was never opened (task 1002339)', async () => {
+  // A resumed draft lands straight on the review, so the catalog has not loaded
+  // and the module NAMES are not known. "None — just the core" would be a false
+  // promise on the last screen before Create: the server is about to apply the
+  // type's bundle. The row says that instead, then repaints when the read lands.
+  const h = boot({ state: { projType: 'game', step: 7 } });
+
+  // Arrange + Act — the review asks for the value before the read can answer
+  const first = h.extrasRow();
+
+  // Assert
+  assert.match(first, /suggested set/, 'it promises what the owner will actually get');
+  assert.equal(h.fetches(), 1, 'and asking for it is what starts the read');
+
+  await h.settle();
+  assert.equal(h.reviews(), 1, 'the review repaints itself once the names are known');
+  assert.equal(h.extrasRow(), 'Dev boxes, Discord', 'and then it names them');
+});
+
+test('the review reads an answered picker back, empty included', async () => {
+  const chosen = boot({ state: { projType: 'game', modules: ['agents'], step: 7 } });
+  // before the catalog lands the row says the true thing without the names —
+  // never the raw module keys, which are jargon on an owner-facing screen
+  assert.equal(chosen.extrasRow(), 'The extras you picked');
+  await chosen.settle();
+  assert.equal(chosen.extrasRow(), 'Extra agents', 'and names them once it has');
+
+  const none = boot({ state: { projType: 'game', modules: [], step: 7 } });
+  none.extrasRow();
+  await none.settle();
+  assert.equal(none.extrasRow(), 'None — just the core', 'a deliberate "none" is stated as one');
+});