@bongos/core 1.21.4 → 1.21.5

package/tests/wizard_draft_resume.mjs

@@ -24,7 +24,7 @@
 // NOT covered here, deliberately: the team shape. The first draft of this task claimed the
 // OAuth hop dropped it; that was wrong — teamShape, projType and modules all survive a
 // reload (verified live). What looked like a drop was the documented "clicking the chosen
-// pill again UNSAYS it" toggle being re-clicked by hand.
+// pill again UNSAYS it" toggle being re-clicked by hand (a toggle task 1004504 retired; slice 3).
 //
 // Run:  node --test --test-reporter=tap tests/wizard_draft_resume.mjs
 
@@ -70,29 +70,33 @@ function runStep({ authKnown, draftStep }) {
 }
 
 test('pre-auth: the placeholder renders step 1 but the draft KEEPS the real step', () => {
-  const { rendered, persisted } = runStep({ authKnown: false, draftStep: 5 });
-  assert.deepEqual(rendered, [1], 'still renders step 1 (the terms, since task 1004417) before identity settles');
-  assert.equal(persisted.step, 5, 'the draft must not be overwritten with the placeholder');
+  // step 4 is the review since task 1004504 — where the code row's repo access is granted
+  const { rendered, persisted } = runStep({ authKnown: false, draftStep: 4 });
+  assert.deepEqual(rendered, [1], 'still renders step 1 (the fork, since task 1004504) before identity settles');
+  assert.equal(persisted.step, 4, 'the draft must not be overwritten with the placeholder');
 });
 
 test('pre-auth: the in-memory step is restored too, so onAuth() can re-enter to it', () => {
   // onAuth() calls enter() again and reads state.step from MEMORY, not from storage — so
   // restoring only the stored copy would fix nothing.
-  const { state } = runStep({ authKnown: false, draftStep: 6 });
-  assert.equal(state.step, 6);
+  for (const step of [2, 3, 4, 5]) {
+    const { state } = runStep({ authKnown: false, draftStep: step });
+    assert.equal(state.step, step, `step ${step} comes back`);
+  }
 });
 
 test('post-auth: the real step is rendered', () => {
-  const { rendered, persisted } = runStep({ authKnown: true, draftStep: 5 });
-  assert.deepEqual(rendered, [5]);
-  assert.equal(persisted.step, 5);
+  const { rendered, persisted } = runStep({ authKnown: true, draftStep: 4 });
+  assert.deepEqual(rendered, [4]);
+  assert.equal(persisted.step, 4);
 });
 
 test('a draft already at step 1 is unchanged, and an out-of-range step is not resurrected', () => {
   assert.equal(runStep({ authKnown: false, draftStep: 1 }).persisted.step, 1);
-  // 12 is the done panel (11 before task 1004421's Look step, 9 before task 1004417's front door, 8 before task 1004351), reached by its own branch
-  // above this slice; 0 is the gate. Neither is a resumable wizard position, so the placeholder is allowed to stand.
-  for (const bad of [0, 13, 99]) {
+  // 6 is the done panel since task 1004504 (12 before it, 11 before task 1004421's Look step, 9 before task
+  // 1004417's front door, 8 before task 1004351), reached by its own branch above this slice; 0 is the gate.
+  // Neither is a resumable wizard position, so the placeholder is allowed to stand.
+  for (const bad of [0, 6, 13, 99]) {
     assert.equal(runStep({ authKnown: false, draftStep: bad }).persisted.step, 1, `step ${bad} is not resumed`);
   }
 });
@@ -153,9 +157,11 @@ test('while the connect offer is up, the way back is not', () => {
 // ── slice 3 · why this task's original team-shape claim was wrong ─────────────────
 // The bug was filed claiming a GitHub round-trip drops the team shape. It does not: a
 // planted draft reads teamShape back intact after a reload (verified live on 1.19.580).
-// The real explanation is this handler — the pill is an UNSAY toggle, so re-clicking the
-// already-chosen shape clears it. During the R24 walk that second click was mine. Pinning
-// it here so the claim rests on the handler's actual behaviour rather than on prose.
+// The explanation then was this handler — the pill was an UNSAY toggle, so re-clicking the
+// already-chosen shape cleared it. Since task 1004504 the pills live on the review's Team
+// size row, where a team always has a shape ("solo" follows a team of one), so the pill is
+// a plain pick: a second click keeps the answer, and nothing in the handler can drop it.
+// Pinned here so the claim rests on the handler's actual behaviour rather than on prose.
 // Anchored on addEventListener: the same selector also appears inside paintTeam(), which
 // only writes aria-pressed. Matching that one instead yields a slice that will not parse.
 const TEAM_RE = /root\.querySelectorAll\('#teamCards \.tpill'\)\.forEach\(function \(b\) \{\s*b\.addEventListener[\s\S]*?\n {4}\}\);/;
@@ -166,17 +172,20 @@ test('the team-pill slice is still findable', () => {
   assert.match(teamSlice, /state\.teamShape/, 'the handler owns the team-shape answer');
 });
 
-test('the team pill UNSAYS on a second click — the answer is not dropped, it is toggled off', () => {
+test('the team pill is a plain pick on the Team size row — a second click keeps the answer (task 1004504)', () => {
   const state = { teamShape: null };
   const handlers = [];
+  const unconfirmed = [];
+  let saves = 0, paints = 0;
   const pill = (team) => ({
     getAttribute: (a) => (a === 'data-team' ? team : null),
     addEventListener: (_e, fn) => handlers.push({ team, fn }),
   });
   const sandbox = {
     state,
-    root: { querySelectorAll: () => [pill('solo'), pill('small-team'), pill('community')] },
-    paintTeam() {}, paintDetail() {}, saveDraft() {},
+    root: { querySelectorAll: () => [pill('small-team'), pill('community')] },
+    paintTeam() {}, saveDraft() { saves += 1; }, paintSetup() { paints += 1; },
+    unconfirm(keys) { unconfirmed.push(...keys); },
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
@@ -186,9 +195,12 @@ test('the team pill UNSAYS on a second click — the answer is not dropped, it i
   click('small-team');
   assert.equal(state.teamShape, 'small-team', 'first click answers');
   click('small-team');
-  assert.equal(state.teamShape, null, 'the SAME pill again unsays it — this is the mis-read bug');
-  click('small-team');
-  assert.equal(state.teamShape, 'small-team', 'and a third click answers again');
+  assert.equal(state.teamShape, 'small-team', 'the SAME pill again keeps it — a team always has a shape');
   click('community');
-  assert.equal(state.teamShape, 'community', 'a DIFFERENT pill replaces rather than clears');
+  assert.equal(state.teamShape, 'community', 'a DIFFERENT pill replaces it');
+  assert.equal(saves, 3, 'every pick is saved into the draft, so the GitHub round-trip keeps it');
+  assert.deepEqual([...new Set(unconfirmed)], ['extras'], 'the suggested extras follow the team, so the review asks about them again');
+  assert.equal(paints, 3, 'and the review repaints');
+  assert.deepEqual([...HUB.matchAll(/data-team="([a-z-]+)"/g)].map((m) => m[1]), ['small-team', 'community'],
+    'the row offers who can join a team; one person is the "One person" pill, not a team shape');
 });

package/tests/wizard_front_door.mjs

@@ -1,16 +1,19 @@
 // tests/wizard_front_door.mjs — the create wizard's front door (task 1004417, BV2.PS05;
 // goal 1000121, docs/design/project-startup-direction.md "Front door").
 //
-// Two screens now stand in front of the wizard's numbered steps:
-//   1 · terms — "anything you want to make": one tick, recorded on the project against
-//       the terms version the SERVER stamps (tests/provisioning_terms_ack.mjs holds that half);
-//   2 · fork  — "you are now creating a digital planet": the world's door pill, two equal
-//       doors, try the demo / begin planet creation. The demo is its own task (BV2.PS09), so
-//       its door says the demo is not open yet rather than leading anywhere.
+// Since the six blended screens (task 1004504, the design of record
+// docs/design/mocks/combined-onboarding/) the front door is ONE screen:
+//   1 · fork — "You’re about to start a digital planet.": the terms as its one tick, recorded
+//       on the project against the terms version the SERVER stamps
+//       (tests/provisioning_terms_ack.mjs holds that half), and the world's door pill, two
+//       equal doors, try the demo / start my project, both waiting for the tick. The demo is
+//       its own route (BV2.PS09). The separate terms screen is gone.
+// The wizard carries no progress rail: an eyebrow names the screen, one Back walks back, and
+// the night room (#wizRoom) stands behind every screen in place of the planet and bongo pair.
 // Sign-in stays where it was: the gate (step 0) comes first.
 //
 // Most of this RUNS the page's own script, the vm-slice idiom of tests/wizard_draft_resume.mjs:
-// validateStep(), the front door's wiring, and show()'s class toggles are sliced out of the
+// validateStep(), the front door's wiring, and show()'s screen bookkeeping are sliced out of the
 // inline script and executed under a minimal DOM stub. Every slice boundary is asserted, so a
 // rename fails loudly instead of leaving this file quietly testing nothing.
 //
@@ -32,74 +35,73 @@ const SCRIPT = HUB.slice(HUB.lastIndexOf('<script>'), HUB.lastIndexOf('</script>
 const STYLE = HUB.slice(HUB.indexOf('<style>'), HUB.indexOf('</style>'));
 
 const panel = (id) => (HUB.match(new RegExp(`<section class="panel[^"]*" id="${id}"[\\s\\S]*?\\n {10}</section>`)) || [''])[0];
-const TERMS = panel('panel-terms');
 const FORK = panel('panel-fork');
+const VIEW_NEW = (HUB.match(/<section id="view-new" hidden>[\s\S]*?\n<\/section>/) || [''])[0];
 const MAP = {};
 for (const m of ((SCRIPT.match(/var panels = \{([^}]*)\}/) || [, ''])[1]).matchAll(/(\d+):\s*'([a-z-]+)'/g)) MAP[m[2]] = Number(m[1]);
 
 // ── the order ───────────────────────────────────────────────────────────────────
-test('the front door stands between sign-in and the name step: gate 0, terms 1, fork 2, name 3', () => {
+test('the front door stands between sign-in and the first question: gate 0, fork 1, what 2', () => {
   assert.equal(MAP['panel-gate'], 0, 'sign-in stays where it is today, first');
-  assert.equal(MAP['panel-terms'], 1);
-  assert.equal(MAP['panel-fork'], 2);
-  // task 1004418: planet physics (questions 1 to 4) sits between the fork and the name step
-  assert.equal(MAP['panel-physics'], 3, 'the fork opens planet creation with the physics questions');
-  assert.equal(MAP['panel-name'], 4, 'and today\'s wizard continues unchanged after them');
-  assert.ok(HUB.indexOf('id="panel-gate"') < HUB.indexOf('id="panel-terms"')
-    && HUB.indexOf('id="panel-terms"') < HUB.indexOf('id="panel-fork"')
-    && HUB.indexOf('id="panel-fork"') < HUB.indexOf('id="panel-physics"')
-    && HUB.indexOf('id="panel-physics"') < HUB.indexOf('id="panel-name"'), 'the markup reads in the same order');
-  assert.match(TERMS, /<form data-next="2">/, 'the terms go on to the fork');
-  assert.match(FORK, /<form data-next="3">/, 'the fork\'s primary door goes on to planet physics');
-  assert.match(FORK, /data-back="1"/, 'and the way back is the terms');
+  assert.equal(MAP['panel-fork'], 1, 'the fork, with the terms as its tick, is the first screen after sign-in');
+  assert.equal(MAP['panel-what'], 2, 'the real-project door goes on to "What are you making?"');
+  assert.equal(MAP['panel-checks'], 3, 'then the quick checks (task 1004504)');
+  assert.equal(MAP['panel-terms'], undefined, 'the separate terms screen is gone — the tick lives on the fork');
+  assert.doesNotMatch(HUB, /id="panel-terms"/, 'and no markup is left for it');
+  assert.ok(HUB.indexOf('id="panel-gate"') < HUB.indexOf('id="panel-fork"')
+    && HUB.indexOf('id="panel-fork"') < HUB.indexOf('id="panel-what"')
+    && HUB.indexOf('id="panel-what"') < HUB.indexOf('id="panel-checks"'), 'the markup reads in the same order');
+  assert.match(FORK, /<form data-next="2">/, 'the fork\'s primary door goes on to the first question');
+  assert.ok(VIEW_NEW, 'the ?view=new section is findable');
+  assert.doesNotMatch(VIEW_NEW, /data-back=/, 'no per-panel Back buttons — one #wizBack walks the screens');
+  assert.equal((VIEW_NEW.match(/id="wizBack"/g) || []).length, 1, 'one Back, in the wizard\'s top row');
 });
 
-test('the rail is the numbered steps\' — it steps aside on both front-door screens, statically too', () => {
+test('the numbered rail is gone (task 1004504) — no steps list, no painter, no rule hiding it', () => {
   const beats = [...HUB.matchAll(/<li[^>]*data-step="(\d+)"/g)].map((m) => Number(m[1]));
-  assert.deepEqual(beats, [3, 4, 5, 6, 7, 8, 9, 10, 11, 12], 'the rail numbers physics…create, never the front door');
-  assert.match(HUB, /<div class="card wizFront">/, 'a no-script visitor on the static first screen sees no rail');
-  assert.match(STYLE, /#view-new \.card\.wizFront \.steps\{display:none;\}/);
+  assert.deepEqual(beats, [], 'no rail beat is left anywhere on the page');
+  assert.doesNotMatch(HUB, /class="steps"/, 'no <ol class="steps"> in the wizard');
+  assert.doesNotMatch(SCRIPT, /paintRail\(/, 'no rail painter, and no call to one');
+  assert.doesNotMatch(STYLE, /\.wizFront \.steps|#view-new \.steps/, 'no rule left styling or hiding a rail');
 });
 
-// ── screen 1 · the terms ────────────────────────────────────────────────────────
-test('screen 1 is the canvas\'s "anything you want to make": two ledes, one tick, a read-the-terms link, one door', () => {
-  assert.ok(TERMS, '#panel-terms ships as real markup (C7)');
-  assert.match(TERMS, /^<section class="panel on" id="panel-terms"/, 'it carries the static `on` — step 1 for a no-script visitor');
-  assert.match(TERMS, /<h1 id="terms-h">Anything you want to make<\/h1>/);
-  assert.equal((TERMS.match(/<p class="lede">/g) || []).length, 2, 'two lede paragraphs');
-  assert.match(TERMS, /<input type="checkbox" id="termsAck" aria-describedby="h-terms">/, 'one checkbox, named by its hint');
-  assert.match(TERMS, /<label class="termsAck">\s*<input[^>]*>\s*<span>I can sign legally, or can get a signature, for the use of this platform, and I acknowledge the terms and conditions\.<\/span>/,
-    'the whole row is its label, so the target is the sentence, not a 20px box');
-  assert.match(TERMS, /<a class="termsRead" href="\/terms" target="_blank" rel="noopener">Read the terms<\/a>/,
-    'the platform\'s own /terms, in a new tab so the draft is not left behind');
-  assert.equal((TERMS.match(/type="submit"/g) || []).length, 1, 'one primary door');
-  assert.match(TERMS, /<span data-brand-product-inline>Cloud Bongos<\/span>/, 'the product name is the pack\'s, re-branded on a child');
+// ── screen 1 · the fork, with the terms as its one tick ─────────────────────────
+test('screen 1 is the fork: one short lede, one tick that links the terms, one submit door', () => {
+  assert.ok(FORK, '#panel-fork ships as real markup (C7)');
+  assert.match(FORK, /^<section class="panel on" id="panel-fork"/, 'it carries the static `on` — step 1 for a no-script visitor');
+  assert.match(FORK, /<h1 id="fork-h">You’re about to start a digital planet\.<\/h1>/);
+  assert.equal((FORK.match(/<div id="forkIntro">[\s\S]*?<\/form>/)?.[0].match(/<p class="lede">/g) || []).length, 1, 'one short lede paragraph');
+  assert.match(FORK, /<input type="checkbox" id="termsAck" aria-describedby="h-terms">/, 'one checkbox, named by its hint');
+  assert.match(FORK, /<label class="termsAck">\s*<input[^>]*>\s*<span>I can sign for this project, and I accept the <a class="termsRead" href="\/terms" target="_blank" rel="noopener">terms<\/a>\.<\/span>/,
+    'the whole row is its label, so the target is the sentence, not a 20px box — and the terms are the platform\'s own /terms, in a new tab so the draft is not left behind');
+  assert.equal((FORK.match(/type="submit"/g) || []).length, 1, 'one primary door');
+  assert.doesNotMatch(FORK, /\bBongos\b/, 'no product name baked where a child instance would ship it');
 });
 
 test('the page never names a terms version — the server stamps which text was acknowledged', () => {
   // A version baked here would be a second copy of TERMS_VERSION that drifts, and worse, a
   // value a caller could send. The create request carries only the tick.
   assert.doesNotMatch(HUB, /terms_version|termsVersion|terms_ack_version/, 'no version travels from the page');
-  assert.doesNotMatch(TERMS, /\b20\d\d-\d\d-\d\d\b/, 'and none is printed on the screen');
+  assert.doesNotMatch(FORK, /\b20\d\d-\d\d-\d\d\b/, 'and none is printed on the screen');
 });
 
-test('the resume offer moved with step 1 — it lives on the terms screen, once', () => {
+test('the resume offer lives on step 1 — the fork, once', () => {
   assert.equal((HUB.match(/id="wizResume"/g) || []).length, 1);
-  assert.ok(TERMS.includes('id="wizResume"'), 'a deliberate "New project" lands here, so the offer does too');
+  assert.ok(FORK.includes('id="wizResume"'), 'a deliberate "New project" lands here, so the offer does too');
 });
 
 // ── the validator, executed ────────────────────────────────────────────────────
 const VALIDATE_RE = /function validateStep\(step\) \{[\s\S]*?\n {4}\}/;
 const validateSlice = (SCRIPT.match(VALIDATE_RE) || [null])[0];
 
-function runValidate(step, termsAck) {
+function runValidate(step, termsAck, extra = {}) {
   const els = {};
   const $ = (id) => (els[id] = els[id] || { textContent: '', className: '', classList: { add() {} }, focus() {} });
-  const sandbox = { $, state: { termsAck, name: 'Mercury', projType: 'game' }, validateRender: () => true, repoAccess: true };
+  const sandbox = { $, state: { termsAck, name: 'Mercury', projType: 'game', demo: null, confirmed: {}, ...extra }, validateRender: () => true, repoAccess: true };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
   vm.runInContext(`${validateSlice}\nvar ok = validateStep(${step});`, sandbox);
-  return { ok: sandbox.ok, hint: els['h-terms'] };
+  return { ok: sandbox.ok, hint: els['h-terms'], state: sandbox.state };
 }
 
 test('validateStep is still findable, with the terms clause inside it', () => {
@@ -107,35 +109,44 @@ test('validateStep is still findable, with the terms clause inside it', () => {
   assert.match(validateSlice, /if \(step === 1\) \{\s*if \(!state\.termsAck\)/, 'the clause is part of the slice');
 });
 
-test('Proceed is refused until the box is ticked, and the refusal says why in the hint', () => {
+test('Start my project is refused until the box is ticked, and the refusal says why in the hint', () => {
   const refused = runValidate(1, false);
-  assert.equal(refused.ok, false, 'no tick, no fork');
+  assert.equal(refused.ok, false, 'no tick, no way past the fork');
   assert.equal(refused.hint.className, 'hint err');
   assert.match(refused.hint.textContent, /Tick the box to go on/);
   const given = runValidate(1, true);
   assert.equal(given.ok, true, 'a tick goes on');
 });
 
-test('the fork refuses nothing — its doors are the answer, and Begin clears a demo started earlier', () => {
-  assert.equal(runValidate(2, false).ok, true, 'the fork asks nothing a validator could refuse');
-  // task 1004420: "Begin planet creation" is a real project, so a demo the founder
+test('Start my project clears a demo started earlier — the submit door is a real project', () => {
+  // task 1004420: "Start my project" is a real project, so a demo the founder
   // set up and then walked back from must not ride the create
-  assert.match(validateSlice, /if \(step === 2\) \{ state\.demo = null; return true; \}/);
+  const r = runValidate(1, true, { demo: { people: 3, hours_each: 4 }, confirmed: { team: true } });
+  assert.equal(r.ok, true);
+  assert.equal(r.state.demo, null, 'the walked-back demo does not ride the create');
+  assert.deepEqual(JSON.parse(JSON.stringify(r.state.confirmed)), {}, 'and its rows are asked again');
+  assert.equal(runValidate(1, false, { demo: { people: 3 } }).state.demo !== null, true, 'an unticked box changes nothing');
+});
+
+test('"What are you making?" asks a name and a kind (task 1004504)', () => {
+  assert.equal(runValidate(2, true).ok, true, 'a name and a kind go on');
+  assert.equal(runValidate(2, true, { name: '  ' }).ok, false, 'no name, no way on');
+  assert.equal(runValidate(2, true, { projType: null }).ok, false, 'no kind, no way on — Not sure is a fine answer');
 });
 
 // ── the wiring, executed ───────────────────────────────────────────────────────
-const WIRE_START = "    $('termsAck').checked = !!state.termsAck;";
+const WIRE_START = '    function paintDoors() {';
 const WIRE_END = '    /* ── the demo route (task 1004420, BV2.PS09) ──';
-const wireSlice = SCRIPT.includes(WIRE_START) ? SCRIPT.slice(SCRIPT.indexOf(WIRE_START), SCRIPT.indexOf(WIRE_END)) : null;
+const wireSlice = SCRIPT.includes(WIRE_START) && SCRIPT.includes(WIRE_END) ? SCRIPT.slice(SCRIPT.indexOf(WIRE_START), SCRIPT.indexOf(WIRE_END)) : null;
 
 function runWiring(initialAck) {
   const handlers = {};
   const mk = (id) => ({
-    id, checked: false, hidden: false, textContent: '', className: '', attrs: {},
+    id, checked: false, hidden: false, disabled: true, textContent: '', className: '', attrs: {},
     addEventListener(type, fn) { handlers[id + ':' + type] = fn; },
     setAttribute(k, v) { this.attrs[k] = v; },
   });
-  const els = { termsAck: mk('termsAck'), 'h-terms': mk('h-terms') };
+  const els = { termsAck: mk('termsAck'), 'h-terms': mk('h-terms'), wizDemo: mk('wizDemo'), wizStart: mk('wizStart') };
   let saves = 0;
   const sandbox = { $: (id) => els[id], state: { termsAck: initialAck }, saveDraft: () => { saves += 1; } };
   sandbox.globalThis = sandbox;
@@ -147,6 +158,25 @@ function runWiring(initialAck) {
 test('the front door\'s wiring is still findable', () => {
   assert.ok(wireSlice && wireSlice.length > 100, 'the wiring block was not found in projects.html');
   assert.match(wireSlice, /\$\('termsAck'\)\.addEventListener\('change'/, 'the tick is part of the slice');
+  assert.match(wireSlice, /\$\('wizStart'\)\.disabled = !state\.termsAck;/, 'and so is the door painter');
+});
+
+test('both doors wait for the tick: disabled in the markup, and painted from the answer', () => {
+  assert.match(FORK, /<button type="button" class="btn big ghost" id="wizDemo"[^>]*\bdisabled>/, 'the demo door ships disabled');
+  assert.match(FORK, /<button type="submit" class="btn big" id="wizStart" disabled>/, 'and so does Start my project');
+  const fresh = runWiring(false);
+  assert.equal(fresh.els.wizDemo.disabled, true, 'an unticked draft keeps the demo door shut');
+  assert.equal(fresh.els.wizStart.disabled, true, 'and the real-project door');
+  fresh.els.termsAck.checked = true; fresh.handlers['termsAck:change'].call(fresh.els.termsAck);
+  assert.equal(fresh.els.wizDemo.disabled, false, 'ticking opens both doors');
+  assert.equal(fresh.els.wizStart.disabled, false);
+  fresh.els.termsAck.checked = false; fresh.handlers['termsAck:change'].call(fresh.els.termsAck);
+  assert.ok(fresh.els.wizDemo.disabled && fresh.els.wizStart.disabled, 'unticking shuts them again');
+  const resumed = runWiring(true);
+  assert.ok(!resumed.els.wizDemo.disabled && !resumed.els.wizStart.disabled, 'a draft that ticked comes back with its doors open');
+  assert.match(STYLE, /#view-new \.doorPill \.btn\[disabled\]\{opacity:\.35;cursor:default;\}/, 'a shut door reads as shut');
+  assert.match(SCRIPT, /\$\('wizDemo'\)\.addEventListener\('click', function \(\) \{ if \(state\.termsAck\) demoShow\('setup'\); \}\);/,
+    'and the demo door refuses an unticked box even if the attribute is stripped');
 });
 
 test('the tick mirrors into the draft both ways, and a resumed draft paints its own answer', () => {
@@ -167,14 +197,14 @@ test('the demo door names what it opens: the demo route\'s setup screen (task 10
   assert.doesNotMatch(FORK, /demoSoon|isn’t open yet/, 'the placeholder that said the demo was not open is gone');
 });
 
-// ── screen 2 · the fork ─────────────────────────────────────────────────────────
-test('screen 2 is the door pill: two equal doors in one object, the accent only on the one that goes on', () => {
-  assert.match(FORK, /<h1 id="fork-h">You are now creating a digital planet<\/h1>/);
+// ── the fork's door pill ────────────────────────────────────────────────────────
+test('the fork is the door pill: two equal doors in one object, the accent only on the one that goes on', () => {
+  assert.match(FORK, /<h1 id="fork-h">You’re about to start a digital planet\.<\/h1>/);
   const pill = (FORK.match(/<div class="doorPill" role="group" aria-label="How to begin">[\s\S]*?<\/div>/) || [''])[0];
   assert.ok(pill, 'one grouped pill');
   const doors = [...pill.matchAll(/<button type="(button|submit)" class="([^"]+)"[^>]*>([^<]+)<\/button>/g)];
   assert.equal(doors.length, 2, 'exactly two doors');
-  assert.deepEqual(doors.map((d) => d[3]), ['Try the demo', 'Begin planet creation']);
+  assert.deepEqual(doors.map((d) => d[3]), ['Try the demo', 'Start my project']);
   assert.equal(doors[0][2], 'btn big ghost', 'the demo door is the secondary: transparent at rest');
   assert.equal(doors[1][2], 'btn big', 'begin carries the accent');
   assert.equal(doors[1][1], 'submit', 'and is the form\'s one submit, so Enter goes on');
@@ -183,58 +213,94 @@ test('screen 2 is the door pill: two equal doors in one object, the accent only
   assert.match(STYLE, /@media \(max-width:520px\)\{\s*\.doorPill\{display:grid;grid-template-columns:1fr;/, 'at a phone width the two stack, still one object');
 });
 
-test('the seed stands on the world\'s own field plate — nothing drawn but hairlines', () => {
-  assert.match(FORK, /<div class="forkStage" id="forkStage" aria-hidden="true">/, 'decorative, so hidden from a screen reader');
-  assert.match(FORK, /<img class="forkSeed" src="\/assets\/world\/r2-chrome-blob-one-cut\.webp" alt="">/, 'a real plate, root-absolute so it is stamped');
+test('the night room stands behind every screen — the planet stage and the bongo pair are gone (task 1004504)', () => {
+  assert.match(VIEW_NEW, /<div class="wizRoom" id="wizRoom" data-screen="fork" aria-hidden="true">/, 'decorative, so hidden from a screen reader, and baked at the fork for a no-script visitor');
+  assert.match(VIEW_NEW, /<span class="rmSeed"><img src="\/assets\/world\/r2-chrome-blob-one-cut\.webp" alt=""><\/span>/, 'the seed is a real plate, root-absolute so it is stamped');
   assert.ok(fs.existsSync(path.join(LANDING, 'assets', 'world', 'r2-chrome-blob-one-cut.webp')), 'and it exists on disk');
-  assert.match(STYLE, /\.forkStage\{[^}]*background:var\(--sky-bg\) var\(--field-plate\) center\/cover no-repeat;/, 'the field is the plate token, not a new image');
-  assert.match(STYLE, /\.forkOrbit\{[^}]*border:1px solid var\(--rule\);border-radius:50%;/, 'the orbits are hairline circles');
-  const at = STYLE.indexOf('the front door (task 1004417');
-  const block = STYLE.slice(at, STYLE.indexOf('/* a field:', at));
-  assert.ok(at > -1 && block.includes('.forkStage{'), 'the front door\'s CSS block is findable');
-  assert.doesNotMatch(block, /#[0-9a-f]{3,8}\b|box-shadow:(?!none)|linear-gradient/i, 'every colour a token, no shadow, no gradient');
+  assert.doesNotMatch(HUB, /id="forkStage"|class="forkSeed"|class="forkRoutes"|bongoCell|id="physStage"/, 'no fork stage, seed orbit, route list, bongo pair or forming planet left in the markup');
+  assert.doesNotMatch(STYLE, /\.forkStage\{|\.forkOrbit\{|\.bongoCell|\.physStage/, 'and no rule left for them');
+  const at = STYLE.indexOf('#view-new .wizRoom{');
+  const end = STYLE.indexOf('/* under 900 the window', at);
+  assert.ok(at > -1 && end > at, 'the night room\'s CSS block is findable');
+  const block = STYLE.slice(at, end);
+  const hexes = [...block.matchAll(/#[0-9a-f]{3,8}\b/gi)].map((m) => m[0].toLowerCase());
+  assert.ok(hexes.length > 0 && hexes.every((h) => h === '#000' || h === '#fff'), `every colour a mix of the fifteen with black or white (${[...new Set(hexes)]})`);
+  for (const m of block.matchAll(/--rm-[a-z0-9-]+:([^;]+);/g)) {
+    assert.match(m[1], /^color-mix\(in srgb,var\(--(sea|accent)\)|^rgba\(255,255,255,/, `a room token is derived, never a new literal: ${m[0]}`);
+  }
+  const motion = block.indexOf('@media (prefers-reduced-motion:no-preference){');
+  assert.ok(motion > -1, 'the room\'s motion sits inside the kill switch');
+  assert.doesNotMatch(block.slice(0, motion), /animation:|transition:/, 'and none outside it: the rest frame is the whole composition');
+  assert.doesNotMatch(block, /:root/, 'room tokens live on the room, never a page :root');
 });
 
 test('the two routes are described honestly for today: the demo is open (task 1004420), creation promises no questions that do not exist yet', () => {
-  const routes = (FORK.match(/<div class="forkRoutes">[\s\S]*$/) || [''])[0];
-  assert.match(routes, /Route 1 · demo<\/p>/);
-  assert.doesNotMatch(routes, /coming soon/, 'the demo is built, so the route no longer says it is coming');
-  assert.match(routes, /Route 2 · planet creation/);
-  assert.doesNotMatch(routes, /seven questions/i, 'the seven planet questions are PS07\'s — the copy must not promise them before they ship');
-  assert.doesNotMatch(FORK, /\bBongos\b(?! pair)/, 'no product name baked where a child instance would ship it');
+  const intro = (FORK.match(/<div id="forkIntro">[\s\S]*?<\/form>/) || [''])[0];
+  assert.match(intro, /<p class="lede">Try a small demo first, or start your real project\.<\/p>/);
+  assert.doesNotMatch(FORK, /coming soon/, 'the demo is built, so nothing says it is coming');
+  assert.doesNotMatch(FORK, /seven questions/i, 'the copy promises no question count');
+  assert.doesNotMatch(FORK, /\bBongos\b/, 'no product name baked where a child instance would ship it');
 });
 
-// ── show(): the class toggles, executed ────────────────────────────────────────
+// ── show(): the room, the eyebrow and the one Back, executed ───────────────────
+// The slice runs from the SCREEN map through show(), so eyebrowFor() and prevStep() ride
+// along; both ends are asserted.
+const SHOW_START = '    var SCREEN = {';
 const SHOW_RE = /function show\(step, moveFocus\) \{[\s\S]*?\n {4}\}/;
-const showSlice = (SCRIPT.match(SHOW_RE) || [null])[0];
+const showMatch = SCRIPT.match(SHOW_RE);
+const showSlice = showMatch && SCRIPT.includes(SHOW_START) && SCRIPT.indexOf(SHOW_START) < showMatch.index
+  ? SCRIPT.slice(SCRIPT.indexOf(SHOW_START), showMatch.index + showMatch[0].length) : null;
 
-function runShow(step) {
+function runShow(step, { demo = null, demoOpen = false } = {}) {
   const cls = (name) => { const set = new Set(); return { name, set, toggle(c, on) { if (on) set.add(c); else set.delete(c); } }; };
-  const card = cls('card'), split = cls('split');
-  const panels = {};
-  const $ = (id) => (panels[id] = panels[id] || { classList: cls(id), querySelector: () => null });
+  const els = {};
+  const $ = (id) => (els[id] = els[id] || {
+    id, classList: cls(id), hidden: id === 'demoSetup' ? !demoOpen : false, textContent: '', attrs: {},
+    setAttribute(k, v) { this.attrs[k] = v; }, querySelector: () => null,
+  });
   const sandbox = {
-    $, state: {}, panels: Object.fromEntries(Object.entries(MAP).map(([id, n]) => [n, id])),
-    root: { querySelector: (sel) => (sel === '.card' ? { classList: card } : { classList: split }) },
-    paintRail() {}, saveDraft() {}, authKnown: false, repoAccess: null,
+    $, state: { demo }, panels: Object.fromEntries(Object.entries(MAP).map(([id, n]) => [n, id])),
+    saveDraft() {}, authKnown: false, repoAccess: null,
+    paintDoors() {}, physLoadAccountOnce() {}, paintChecks() {}, physDefaults() {},
     renderModules() {}, syncHome() {}, ensureRepoAccess() {}, checkSlugAvailable() {}, renderAddrPanel() {},
-    syncAppStep() {}, syncRenderSetup() {}, renderReview() {}, renderLook() {}, paintPhysics() {},
+    syncAppStep() {}, syncRenderSetup() {}, paintSetup() {}, renderLook() {}, renderRecap() {},
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
   vm.runInContext(`${showSlice}\nshow(${step}, false);`, sandbox);
-  return { card: card.set, split: split.set, on: Object.keys(panels).filter((id) => panels[id].classList.set.has('on')) };
+  return {
+    on: Object.keys(els).filter((id) => els[id].classList.set.has('on')),
+    screen: els.wizRoom.attrs['data-screen'], eyebrow: els.wizEyebrow.textContent,
+    back: !els.wizBack.hidden, tag: !els.demoTag.hidden,
+  };
 }
 
-test('show() takes the rail away on the two front-door screens only, and gives the fork the whole card', () => {
-  assert.ok(showSlice, 'show() was not found in projects.html');
-  const terms = runShow(1), fork = runShow(2), physics = runShow(3), name = runShow(4), done = runShow(MAP['panel-done']);
-  assert.deepEqual(terms.on, ['panel-terms']);
-  assert.ok(terms.card.has('wizFront') && !terms.split.has('wizFork'), 'terms: no rail, the bongo pair stays');
-  assert.ok(fork.card.has('wizFront') && fork.split.has('wizFork'), 'fork: no rail, and the seed takes the pair\'s place');
-  assert.ok(!physics.card.has('wizFront') && physics.split.has('wizFork'), 'physics (task 1004418): the rail is back, and the forming planet keeps the whole card');
-  assert.ok(!name.card.has('wizFront') && !name.split.has('wizFork'), 'the name step has its rail back');
-  assert.ok(done.split.has('wizDone') && !done.card.has('wizFront'), 'the done panel is untouched by the front door');
+test('show() turns one screen on, tells the room which screen it is, and names it in the eyebrow', () => {
+  assert.ok(showSlice, 'the SCREEN map through show() was not found in projects.html');
+  assert.match(showSlice, /function eyebrowFor\(step\)/, 'the eyebrow is part of the slice');
+  assert.doesNotMatch(showSlice, /paintRail|wizFront|wizFork|wizDone/, 'show() paints no rail and toggles no front-door or done layout (task 1004504)');
+  const screens = { 0: 'signin', 1: 'fork', 2: 'what', 3: 'checks', 4: 'review', 5: 'look', 6: 'done' };
+  for (const [n, screen] of Object.entries(screens)) {
+    const r = runShow(Number(n));
+    const id = Object.keys(MAP).find((k) => MAP[k] === Number(n));
+    assert.deepEqual(r.on, [id], `step ${n}: only ${id} is on`);
+    assert.equal(r.screen, screen, `step ${n}: the room grows to "${screen}"`);
+  }
+  assert.equal(runShow(1).eyebrow, 'New project');
+  assert.equal(runShow(1, { demoOpen: true }).eyebrow, 'Demo', 'the demo\'s own screen says so');
+  assert.equal(runShow(2, { demo: { people: 3 } }).eyebrow, 'New demo', 'and a demo past the fork stays marked');
+  assert.equal(runShow(6).eyebrow, 'Founding');
+});
+
+test('one Back: hidden at sign-in, on the fork and on done; shown on every screen between', () => {
+  assert.equal(runShow(0).back, false, 'sign-in has nowhere to go back to');
+  assert.equal(runShow(1).back, false, 'the fork is the first screen');
+  assert.equal(runShow(1, { demoOpen: true }).back, true, 'the demo screen walks back to the fork');
+  for (const n of [2, 3, 4, 5]) assert.equal(runShow(n).back, true, `step ${n} walks back`);
+  assert.equal(runShow(6).back, false, 'a created project is not walked back into the wizard');
+  assert.equal(runShow(2).tag, false, 'no demo tag on a real project');
+  assert.equal(runShow(2, { demo: { people: 3 } }).tag, true, 'the demo tag rides every screen of a demo');
+  assert.match(SCRIPT, /function prevStep\(step\) \{\s*if \(step === 4 && state\.demo\) return 2;/, 'a demo, which skipped the checks, walks back past them too');
 });
 
 // ── the create ──────────────────────────────────────────────────────────────────
@@ -243,29 +309,33 @@ test('the create carries the tick, and is never filed without it', () => {
   assert.match(create, /terms_acknowledged: state\.termsAck \? true : undefined,/,
     'a real boolean when ticked, absent otherwise — the route refuses anything but a boolean');
   const guard = create.indexOf('if (!state.termsAck) { show(1, true); validateStep(1); return; }');
-  assert.ok(guard > -1, 'an unticked draft is sent back to the terms');
+  assert.ok(guard > -1, 'an unticked draft is sent back to the fork\'s tick');
   assert.ok(guard < create.indexOf('ensureFreshRepo()'), 'BEFORE anything is created — the repo included');
 });
 
 test('the tick is part of the draft and of the reset, and the draft key moved with the renumbering', () => {
-  assert.match(SCRIPT, /var state = \{ step: 0,[^}]*termsAck: false \};/, 'the initial state declares it');
-  assert.match(SCRIPT, /state = \{ step: 1,[^}]*termsAck: false \};/, 'and "start another project" clears it — each project records its own');
-  assert.match(SCRIPT, /var DRAFT_KEY = 'cb-create-draft-v8';/, 'a draft saved under the old numbering is ignored, not replayed onto the wrong screen');
+  assert.match(SCRIPT, /var state = \{ step: 0,[^}]*termsAck: false, confirmed: \{\} \};/, 'the initial state declares it');
+  assert.match(SCRIPT, /state = \{ step: 1,[^}]*termsAck: false, confirmed: \{\} \};/, 'and "start another project" clears it — each project records its own');
+  assert.match(SCRIPT, /\$\('termsAck'\)\.checked = false; paintDoors\(\);/, 'and the reset shuts the doors with it');
+  assert.match(SCRIPT, /var DRAFT_KEY = 'cb-create-draft-v9';/, 'a draft saved under the old numbering is ignored, not replayed onto the wrong screen');
 });
 
 // ── the look-before-you-ship kit walks it ─────────────────────────────────────
-test('the kit has a state for each front-door screen, and every walk past it ticks and chooses first', () => {
+// Every walk past the fork opens the way a founder does: the tick, then a door — Start my
+// project, or the demo door and the demo screen's Continue.
+test('every kit walk past the fork ticks first, then takes a door', () => {
   const states = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.states.json'), 'utf8')).states;
-  for (const s of ['in-new', 'in-new-terms-refused', 'in-new-fork', 'in-new-fork-demo', 'in-new-name']) assert.ok(states[s], `the ${s} state exists`);
-  assert.deepEqual(states['in-new'].expect.visible, ['#panel-terms', '#termsAck'], 'arriving at ?view=new pictures the terms');
-  const FRONT = ['#termsAck', '#panel-terms button[type=submit]', '#panel-fork button[type=submit]'];
+  assert.ok(states['in-new'], 'the in-new state exists');
+  for (const sel of ['#panel-fork', '#termsAck']) assert.ok((states['in-new'].expect.visible || []).includes(sel), `arriving at ?view=new pictures the fork and its tick (${sel})`);
+  const REAL = ['#termsAck', '#wizStart'];
+  const DEMO = ['#termsAck', '#wizDemo', '#demoStart'];
   const probes = JSON.parse(fs.readFileSync(path.join(LANDING, 'projects.probes.json'), 'utf8')).probes;
   const walks = [...Object.entries(states).map(([k, v]) => [k, v.actions || []]), ...probes.map((p) => [p.name, p.steps])]
     .filter(([, steps]) => steps.some((st) => st[1] === '#newName'));
   assert.ok(walks.length >= 12, `every wizard walk is found (${walks.length})`);
   for (const [name, steps] of walks) {
     const clicks = steps.filter((st) => st[0] === 'click').map((st) => st[1]);
-    assert.deepEqual(clicks.slice(0, 3), FRONT, `${name}: the front door comes first`);
+    const door = clicks[1] === '#wizDemo' ? DEMO : REAL;
+    assert.deepEqual(clicks.slice(0, door.length), door, `${name}: the tick, then a door, come first`);
   }
-  assert.ok(probes.some((p) => /the front door \(task 1004417\)/.test(p.name)), 'a probe drives the refusal, the demo door and the way on');
 });