@bongos/core 1.20.61 → 1.20.63

package/modules/public-landing/public/projects.html

@@ -124,7 +124,31 @@ h1[tabindex="-1"]:focus:not(:focus-visible){outline:none;}
 .doorPill{display:inline-grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;margin:6px 0 16px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 55%,transparent);}
 #view-new .doorPill .btn.ghost{border-color:transparent;}
 #view-new .doorPill .btn.ghost:hover{border-color:var(--rule);}
-.demoSoon{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:52ch;margin:0 0 16px;}
+/* the demo route (task 1004420): two screens inside the fork. Steppers on the wizard's
+   field grammar, the fit check as a hairline band, the picked defaults as a ledger, and a
+   dashed ring on the planet for the time box (the canvas's "when it closes, the demo ends") */
+.demoSteppers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;}
+.demoStep{display:flex;align-items:center;gap:12px;margin-top:6px;}
+.demoStep output{min-width:2ch;text-align:center;font-family:var(--font-display);font-weight:300;font-size:28px;color:var(--ink);}
+.demoStep .btn{min-width:40px;min-height:40px;justify-content:center;}
+.demoFit{border-top:1px solid var(--rule);padding:14px 0 6px;margin:0 0 10px;max-width:62ch;}
+.demoFitLine{font-size:15.5px;line-height:1.5;color:var(--ink);margin:8px 0 12px;}
+.demoFitTry{font-size:14px;color:var(--ink-soft);margin:0 0 4px;}
+.demoTry{margin:0 0 6px;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--ink);}
+.demoLedger{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;margin:6px 0 18px;border-top:1px solid var(--rule);}
+.demoLedger dt,.demoLedger dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule-soft);}
+.demoLedger dt{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);padding-top:14px;}
+.demoLedger dd{font-size:15.5px;color:var(--ink);}
+.demoLedger dd small{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px;}
+.demoInvites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;}
+.demoRing{position:absolute;inset:4%;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;}
+.demoKeep{border-top:1px solid var(--rule);padding-top:14px;margin:6px 0 10px;}
+.demoKeepH{font-family:var(--font-display);font-weight:300;font-size:24px;letter-spacing:-.02em;text-transform:lowercase;color:var(--ink);margin:0 0 10px;}
+.demoKeepCells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;}
+.demoClock{font-size:15.5px;color:var(--ink);margin:0 0 10px;}
+.demoSoonWarn{color:var(--warn);font-weight:600;}
+.demoStageCap{position:absolute;left:16px;right:16px;bottom:14px;margin:0;font-size:13px;line-height:1.4;color:var(--ink);}
+@media (max-width:640px){ .demoSteppers,.demoInvites,.demoKeepCells{grid-template-columns:1fr;} .demoLedger{grid-template-columns:1fr;} .demoLedger dt{border-bottom:0;padding-bottom:0;} }
 /* the seed on the field plate: the world's own render, a hairline orbit and a
    dashed one, the chrome blob cut out on top — nothing drawn but hairlines */
 .forkBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:48px;align-items:center;}
@@ -912,6 +936,32 @@ summary{min-height:24px;padding:3px 0;}
            again. For a project whose app has no platform chosen, the OWNER is offered
            Connect Render (task 1004184): the setup wizard's own Render step, cloned into
            #mAppConnectForm on first open, so there is one flow and one set of words. -->
+      <!-- the demo (task 1004420, BV2.PS09; the canvas's DemoKeep): a project marked demo
+           shows its soft time box counting down, then asks "keep your planet?". Carry it
+           over and it is a real project from here on; keep it as a demo and it still goes
+           offline 30 days after it started (D9), restorable like any project taken
+           offline. The owner is told the date here from the start. Hidden for every
+           project that is not a demo. -->
+      <div class="card mSec" id="mDemo" hidden>
+        <h2>Demo planet</h2>
+        <p class="demoClock" id="mDemoClock"></p>
+        <div class="demoKeep" id="mDemoKeep" hidden>
+          <p class="demoKeepH">Keep your planet?</p>
+          <div class="demoKeepCells">
+            <div>
+              <button type="button" class="btn" data-demo-settle="carried">Carry it over</button>
+              <p class="finePrint">It becomes a real project: its settings, team and work stay as they are, and the demo’s time limit and 30-day rule stop applying.</p>
+            </div>
+            <div>
+              <button type="button" class="btn ghost" data-demo-settle="kept">Keep it as a demo</button>
+              <p class="finePrint">Leave it as it is: a finished demo you can come back to until it goes offline.</p>
+            </div>
+          </div>
+        </div>
+        <p class="finePrint" id="mDemoOffline"></p>
+        <div class="projMsg" id="mDemoMsg" role="status" aria-live="polite"></div>
+      </div>
+
       <div class="card mSec" id="mAppCard" hidden>
         <h2>Where its app runs</h2>
         <div id="mApp"></div>
@@ -1273,35 +1323,105 @@ summary{min-height:24px;padding:3px 0;}
           <!-- step 2 · the front door, part two: demo or create (task 1004417; the canvas's
                Fork.dc.html). Two equal ways in, so it is the world's door pill (DESIGN.md):
                two doors joined into one object, equal in size, the accent only on the one
-               that goes on. The seed stands on the field plate beside it. The demo is its
-               own task (BV2.PS09); until it ships, its door says so here instead of
-               leading anywhere. -->
+               that goes on. The seed stands on the field plate beside it. The demo door opens
+               the demo route's two screens in place (task 1004420, BV2.PS09). -->
           <section class="panel" id="panel-fork" aria-labelledby="fork-h">
             <div class="forkBody">
               <div>
-                <h1 id="fork-h">You are now creating a digital planet</h1>
-                <p class="lede">If that sounds like too much for now, try our demo system. Otherwise, proceed with planet initiation :)</p>
-                <form data-next="3">
-                  <div class="doorPill" role="group" aria-label="How to begin">
-                    <button type="button" class="btn big ghost" id="wizDemo" aria-controls="demoSoon" aria-expanded="false">Try the demo</button>
-                    <button type="submit" class="btn big">Begin planet creation</button>
+                <div id="forkIntro">
+                  <h1 id="fork-h">You are now creating a digital planet</h1>
+                  <p class="lede">If that sounds like too much for now, try our demo system. Otherwise, proceed with planet initiation :)</p>
+                  <form data-next="3">
+                    <div class="doorPill" role="group" aria-label="How to begin">
+                      <button type="button" class="btn big ghost" id="wizDemo" aria-controls="demoSetup" aria-expanded="false">Try the demo</button>
+                      <button type="submit" class="btn big">Begin planet creation</button>
+                    </div>
+                    <div class="nav">
+                      <button type="button" class="btn ghost" data-back="1">← Back</button>
+                      <span></span>
+                    </div>
+                  </form>
+                </div>
+                <!-- the demo route (task 1004420, BV2.PS09; the canvas's DemoSetup and DemoReady).
+                     Two screens inside the fork, then the ordinary wizard from the name step on:
+                     a demo is a normal project marked "demo" (D9). The fit check is a copy of
+                     modules/provisioning/demo.js fitCheck, held equal by tests/wizard_demo.mjs. -->
+                <div id="demoSetup" class="demoView" hidden>
+                  <h1 id="demo-h1">Training wheels</h1>
+                  <p class="lede">A small, time-boxed project to learn the platform by doing. Everyone uses their own AI plan.</p>
+                  <div class="demoSteppers">
+                    <div class="wizField"><span id="demoPeopleLbl">People, you included</span>
+                      <div class="demoStep" role="group" aria-labelledby="demoPeopleLbl">
+                        <button type="button" class="btn small ghost" data-demo-step="people" data-by="-1" aria-label="One fewer person">−</button>
+                        <output id="demoPeople" aria-live="polite">3</output>
+                        <button type="button" class="btn small ghost" data-demo-step="people" data-by="1" aria-label="One more person">+</button>
+                      </div>
+                    </div>
+                    <div class="wizField"><span id="demoHoursLbl">Hours each</span>
+                      <div class="demoStep" role="group" aria-labelledby="demoHoursLbl">
+                        <button type="button" class="btn small ghost" data-demo-step="hours" data-by="-1" aria-label="One hour less">−</button>
+                        <output id="demoHours" aria-live="polite">4</output>
+                        <button type="button" class="btn small ghost" data-demo-step="hours" data-by="1" aria-label="One hour more">+</button>
+                      </div>
+                    </div>
+                  </div>
+                  <label class="wizField"><span>Your demo project idea</span>
+                    <textarea id="demoIdea" rows="3" maxlength="600" placeholder="A shared reading list for our team: everyone adds books, we vote, and the winner is next month’s read."></textarea>
+                  </label>
+                  <div class="demoFit" aria-live="polite">
+                    <p class="routeLbl">First read</p>
+                    <p class="demoFitLine"><span id="demoFitSum">3 people × 4 hours = 12 builder-hours.</span> <span id="demoFitVerdict">Enough for a small version. Trim it to one shared list, voting and a winner reveal; accounts and notifications will not fit.</span></p>
+                    <p class="demoFitTry">What you’ll get to try</p>
+                    <ul class="demoTry">
+                      <li>Claim a task and ship it</li>
+                      <li>See your work graded</li>
+                      <li>Put an idea to a vote in the Board Room</li>
+                      <li>Watch your rank grow with shipped work</li>
+                    </ul>
                   </div>
-                  <p class="demoSoon" id="demoSoon" hidden>The demo isn’t open yet. It’s being built now; until it opens, begin planet creation to make a real project.</p>
                   <div class="nav">
-                    <button type="button" class="btn ghost" data-back="1">← Back</button>
-                    <span></span>
+                    <button type="button" class="btn ghost" id="demoBack1">← Back</button>
+                    <button type="button" class="btn" id="demoNext1">See the settings</button>
                   </div>
-                </form>
+                </div>
+                <div id="demoReady" class="demoView" hidden>
+                  <h1 id="demo-h2">Your demo planet’s settings</h1>
+                  <p class="lede">We picked sensible settings so you can start straight away, and you can change any of them later. Next you name it and choose where its code lives, and then it is created.</p>
+                  <dl class="demoLedger">
+                    <dt>People</dt><dd><span id="demoLPeople">3</span><small id="demoLPeopleSub">You, plus the two people you invite below</small></dd>
+                    <dt>Time box</dt><dd><span id="demoLHours">4 hours each</span><small id="demoLTotal">12 builder-hours in total. When it runs out you are asked whether to keep your planet; your work is never stopped.</small></dd>
+                    <dt>Government</dt><dd>Monarchy / BDFL<small>One leader decides: you make the calls.</small></dd>
+                    <dt>Rewards</dt><dd>None<small>It’s a demo, for learning.</small></dd>
+                    <dt>Framing</dt><dd>All managed for you</dd>
+                    <dt>Who can see it</dt><dd>Only your team</dd>
+                    <dt>AI usage</dt><dd>Everyone uses their own AI plan</dd>
+                  </dl>
+                  <div class="demoInvites" id="demoInvites">
+                    <label class="wizField"><span>Invite by GitHub handle</span>
+                      <input type="text" id="demoInvite1" placeholder="teammate’s handle" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="39">
+                    </label>
+                    <label class="wizField"><span>And one more</span>
+                      <input type="text" id="demoInvite2" placeholder="teammate’s handle" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="39">
+                    </label>
+                  </div>
+                  <p class="finePrint">A demo nobody keeps goes offline 30 days after it starts. You are told before, and it can be brought back.</p>
+                  <div class="nav">
+                    <button type="button" class="btn ghost" id="demoBack2">← Back</button>
+                    <button type="button" class="btn" id="demoStart">Name my demo planet</button>
+                  </div>
+                </div>
               </div>
-              <div class="forkStage" aria-hidden="true">
+              <div class="forkStage" id="forkStage" aria-hidden="true">
                 <span class="forkOrbit"></span>
                 <span class="forkOrbit forkOrbitDash"></span>
+                <span class="demoRing" id="demoRing" hidden></span>
                 <img class="forkSeed" src="/assets/world/r2-chrome-blob-one-cut.webp" alt="">
+                <p class="demoStageCap" id="demoStageCap" hidden>time box · <span id="demoStageHours">12</span> builder-hours · when the dashed ring closes, the demo asks whether to keep your planet</p>
               </div>
             </div>
             <div class="forkRoutes">
               <div>
-                <p class="routeLbl">Route 1 · demo · coming soon</p>
+                <p class="routeLbl">Route 1 · demo</p>
                 <p class="routeT">Training wheels</p>
                 <p class="routeD">Pick how many people, how many hours each, and an idea. The platform checks that it fits, picks the settings, and you learn by building something small. Keep your planet at the end if you like it.</p>
               </div>
@@ -1685,6 +1805,7 @@ summary{min-height:24px;padding:3px 0;}
                 <button type="button" class="btn small ghost" data-invite-skip="wizInvite">Skip</button>
               </div>
               <div class="inviteWhy" id="wizInviteWhy"></div>
+              <p class="inviteWhy" id="wizDemoTeam" hidden></p>
               <ul class="suggList" id="wizInviteSugg"></ul>
               <ul class="inviteList" id="wizInviteList"></ul>
               <div class="projMsg" id="wizInviteMsg" role="status" aria-live="polite"></div>
@@ -4311,7 +4432,7 @@ summary{min-height:24px;padding:3px 0;}
        request omits the field), [] = the owner switched them all off, [...] =
        what they picked. Never seed it with the preselect — that would store an
        answer nobody gave. */
-    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', look: null, termsAck: false };
+    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', demo: null, look: null, termsAck: false };
     try { Object.assign(state, JSON.parse(sessionStorage.getItem(DRAFT_KEY) || '{}')); } catch (e) {}
     var authKnown = false;   /* flips true when the boot's /me settles, either way */
 
@@ -4608,18 +4729,109 @@ summary{min-height:24px;padding:3px 0;}
     }
 
     /* ── the front door (task 1004417) ── the tick mirrors into the draft; the
-       demo door opens a line saying the demo is not open yet (BV2.PS09 builds it) */
+       demo door opens the demo route (task 1004420, below) */
     $('termsAck').checked = !!state.termsAck;
     $('termsAck').addEventListener('change', function () {
       state.termsAck = !!this.checked;
       if (state.termsAck) { $('h-terms').textContent = '\u00a0'; $('h-terms').className = 'hint'; }
       saveDraft();
     });
-    $('wizDemo').addEventListener('click', function () {
-      var soon = $('demoSoon');
-      soon.hidden = !soon.hidden;
-      this.setAttribute('aria-expanded', soon.hidden ? 'false' : 'true');
+    /* ── the demo route (task 1004420, BV2.PS09) ──
+       "Try the demo" opens two screens inside the fork: set up (people, hours each, the
+       idea, and a first read of what fits) and the picked defaults with two invites.
+       "Start the demo" goes on through the ordinary wizard from the name step: a demo is
+       a normal project marked "demo" (D9), so the create carries `demo` and the server
+       applies the demo's picked answers and makes it private to the team. The time box
+       is soft (D3). The limits and the fit sentences are copies of
+       modules/provisioning/demo.js, held equal by tests/wizard_demo.mjs. */
+    var DEMO_LIMITS = { people: [1, 12], hours: [1, 40] };
+    var demoDraft = state.demo
+      ? { people: state.demo.people, hours: state.demo.hours_each, idea: state.demo.idea || '', invites: state.demo.invites || [] }
+      : { people: 3, hours: 4, idea: '', invites: [] };
+    function demoFit(people, hours) {
+      var total = people * hours;
+      var verdict = total < 8 ? 'tight' : total < 20 ? 'small' : 'plenty';
+      var sentence = {
+        tight: 'Too tight for this idea. Try one list with voting only, or add hours.',
+        small: 'Enough for a small version. Trim it to one shared list, voting and a winner reveal; accounts and notifications will not fit.',
+        plenty: 'Plenty for this idea, with room for one extra feature.'
+      }[verdict];
+      return { total: total, verdict: verdict, sentence: sentence };
+    }
+    function demoHandle(v) {
+      var h = String(v || '').trim().replace(/^@/, '');
+      return /^[A-Za-z0-9](?:[A-Za-z0-9]|-(?=[A-Za-z0-9])){0,38}$/.test(h) ? h : '';
+    }
+    function paintDemo() {
+      var fit = demoFit(demoDraft.people, demoDraft.hours);
+      $('demoPeople').textContent = String(demoDraft.people);
+      $('demoHours').textContent = String(demoDraft.hours);
+      $('demoFitSum').textContent = demoDraft.people + (demoDraft.people === 1 ? ' person' : ' people') + ' × ' + demoDraft.hours + (demoDraft.hours === 1 ? ' hour' : ' hours') + ' = ' + fit.total + ' builder-hours.';
+      $('demoFitVerdict').textContent = fit.sentence;
+      $('demoLPeople').textContent = String(demoDraft.people);
+      var others = demoDraft.people - 1;
+      $('demoLPeopleSub').textContent = others === 0 ? 'Just you' : others === 1 ? 'You, plus the person you invite below' : others === 2 ? 'You, plus the two people you invite below' : 'You, plus ' + others + ' people: invite two below, and the rest from your hall';
+      $('demoLHours').textContent = demoDraft.hours + (demoDraft.hours === 1 ? ' hour each' : ' hours each');
+      $('demoLTotal').textContent = fit.total + ' builder-hours in total. When it runs out you are asked whether to keep your planet; your work is never stopped.';
+      $('demoStageHours').textContent = String(fit.total);
+      $('demoInvites').hidden = others === 0;
+      $('demoInvite2').closest('label').hidden = others < 2;
+    }
+    function demoShow(which) {
+      $('forkIntro').hidden = which !== 'intro';
+      $('demoSetup').hidden = which !== 'setup';
+      $('demoReady').hidden = which !== 'ready';
+      $('demoRing').hidden = which === 'intro';
+      $('demoStageCap').hidden = which === 'intro';
+      $('wizDemo').setAttribute('aria-expanded', which === 'intro' ? 'false' : 'true');
+      if (which !== 'intro') {
+        paintDemo();
+        var h = $(which === 'setup' ? 'demo-h1' : 'demo-h2');
+        h.setAttribute('tabindex', '-1'); h.focus({ preventScroll: false });
+      }
+    }
+    $('demoIdea').value = demoDraft.idea;
+    $('demoInvite1').value = demoDraft.invites[0] || '';
+    $('demoInvite2').value = demoDraft.invites[1] || '';
+    $('wizDemo').addEventListener('click', function () { demoShow('setup'); });
+    root.querySelectorAll('[data-demo-step]').forEach(function (b) {
+      b.addEventListener('click', function () {
+        var key = b.getAttribute('data-demo-step');
+        var lim = DEMO_LIMITS[key];
+        var next = demoDraft[key] + Number(b.getAttribute('data-by'));
+        demoDraft[key] = Math.min(lim[1], Math.max(lim[0], next));
+        paintDemo();
+      });
+    });
+    $('demoIdea').addEventListener('input', function () { demoDraft.idea = this.value; });
+    $('demoNext1').addEventListener('click', function () { demoShow('ready'); });
+    $('demoBack1').addEventListener('click', function () { demoShow('intro'); $('wizDemo').focus(); });
+    $('demoBack2').addEventListener('click', function () { demoShow('setup'); });
+    $('demoStart').addEventListener('click', function () {
+      var invites = [demoHandle($('demoInvite1').value), demoHandle($('demoInvite2').value)]
+        .filter(function (h, i, all) { return h && all.indexOf(h) === i; })
+        .slice(0, Math.max(0, demoDraft.people - 1));
+      state.demo = { people: demoDraft.people, hours_each: demoDraft.hours, idea: String(demoDraft.idea || '').trim(), invites: invites };
+      /* the idea is the project's description unless one was already written, and the
+         team is the people count — both the founder can still change on the way */
+      if (state.demo.idea && !String(state.description || '').trim()) {
+        state.description = state.demo.idea;
+        $('f-desc').value = state.description;
+      }
+      state.teamShape = demoDraft.people > 1 ? 'small-team' : 'solo';
+      saveDraft();
+      show(3, true);
     });
+    /* the done panel's invite step names the demo's teammates (task 1004420): the hub
+       holds no invite of its own, so the founder sends each from the project's own box */
+    function paintDemoTeam() {
+      var line = $('wizDemoTeam');
+      var who = state.demo && state.demo.invites && state.demo.invites.length ? state.demo.invites : [];
+      line.hidden = !who.length;
+      line.textContent = who.length ? 'Your demo teammates: ' + who.map(function (h) { return '@' + h; }).join(', ') + '. Invite each one here.' : '';
+      if (who.length && !$('wizInviteWho').value) $('wizInviteWho').value = who[0];
+    }
+
 
     /* ── field wiring ── */
     $('newName').value = state.name;
@@ -5200,6 +5412,8 @@ summary{min-height:24px;padding:3px 0;}
     /* per-panel validation on Next */
     function validateStep(step) {
       if (step === 9) return validateRender();
+      /* the fork's own door is "Begin planet creation": a real project, not the demo */
+      if (step === 2) { state.demo = null; return true; }
       /* the front door's one tick (task 1004417): nothing past it until it is given */
       if (step === 1) {
         if (!state.termsAck) {
@@ -5434,6 +5648,11 @@ summary{min-height:24px;padding:3px 0;}
         ['App', appRow()],
         ['Look', lookRow()]
       ];
+      /* the demo route (task 1004420): the review says it is a demo, and what that means */
+      if (state.demo) {
+        rows.unshift(['Demo', esc(state.demo.people + (state.demo.people === 1 ? ' person' : ' people') + ', ' + state.demo.hours_each + ' hours each.') +
+          ' Private to your team, no rewards, all managed. When the time box runs out you are asked whether to keep your planet.']);
+      }
       $('reviewList').innerHTML = rows.map(function (r) {
         return '<li><span class="k">' + r[0] + '</span><span class="v">' + r[1] + '</span></li>';
       }).join('');
@@ -5535,6 +5754,9 @@ summary{min-height:24px;padding:3px 0;}
             modules: modulesForCreate(),
             /* the front door's tick (task 1004417) — the server stamps WHICH terms */
             terms_acknowledged: state.termsAck ? true : undefined,
+            /* the demo route (task 1004420): a normal project marked demo — the server
+               applies the demo's picked answers and keeps it private to the team */
+            demo: state.demo ? { people: state.demo.people, hours_each: state.demo.hours_each } : undefined,
             hosting_shape: 'cloud-host',
             /* ONLY a bring-your-own domain travels (task 1002898 N2). The server owns
                the assigned <slug>.<apex> default (task 1002704) and applies it to an
@@ -5828,6 +6050,7 @@ summary{min-height:24px;padding:3px 0;}
          sets only AFTER this runs. */
       var created = createdRecord();
       setInviteSlug('wizInvite', (me && created && created.id && created.slug) ? created.slug : '');
+      paintDemoTeam();
       loadInviteSuggestions('wizInvite', (me && created && created.slug) ? created.id : '');
       $('wizInviteLater').innerHTML = 'You can invite builders any time from ' + projectPageLink('the project’s own page') + '.';
       renderSteps();
@@ -6196,7 +6419,7 @@ summary{min-height:24px;padding:3px 0;}
          is three-valued and null is its "nothing said" sentinel; leaving the key out
          left it UNDEFINED, which is not null — so pickedModules() reached .slice()
          on it and the second project's Modules step threw. */
-      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', look: null, termsAck: false };
+      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', demo: null, look: null, termsAck: false };
       $('newName').value = ''; $('f-owner').value = ''; $('f-repo').value = ''; $('f-slug').value = ''; $('f-domain').value = '';
       $('f-noaddr').checked = false; $('f-desc').value = '';
       /* Re-seed the owner from the signed-in account for the next project. */
@@ -7077,6 +7300,59 @@ summary{min-height:24px;padding:3px 0;}
     $('mPlanet').innerHTML = ledgerRow(['planet', planetWords(pl) + (pl.chosen ? '<small>your choice.</small>' : pl.curated ? '' : '<small>chosen for it by the platform.</small>')]);
     $('mPlanet').hidden = false;
   }
+  /* ── the demo card (task 1004420, BV2.PS09) ──
+     Fetch-free like the rest of renderManage, so the once-a-minute tick keeps the
+     countdown current: everything it draws is the row's own `demo` view, which the server
+     shapes (remaining_seconds, time_up, offline_on). The time box is SOFT (D3): the clock
+     only ever counts down and then asks; nothing here stops the work. */
+  function demoLeft(seconds) {
+    var m = Math.max(0, Math.round(seconds / 60));
+    var h = Math.floor(m / 60);
+    return h ? h + ' h ' + (m % 60) + ' min' : m + ' min';
+  }
+  function renderDemoCard(inst) {
+    var d = inst && inst.demo;
+    $('mDemo').hidden = !d;
+    if (!d) return;
+    var hours = d.hours_each + (d.hours_each === 1 ? ' hour' : ' hours');
+    $('mDemoClock').textContent = d.time_up
+      ? 'The time box has run out: ' + d.people + ' × ' + hours + '. Your work keeps going either way.'
+      : demoLeft(d.remaining_seconds) + ' left in the time box (' + d.people + ' × ' + hours + ' = ' + d.builder_hours + ' builder-hours). Nothing stops when it runs out.';
+    $('mDemoKeep').hidden = !(d.time_up && !d.outcome);
+    var date = listedDate(d.offline_on);
+    $('mDemoOffline').textContent = (d.outcome === 'kept' ? 'Kept as a demo. ' : '') +
+      (d.offline_soon ? 'This demo goes offline on ' + date + ' unless you carry it over. ' : 'A demo nobody carries over goes offline on ' + date + '. ') +
+      'It can be brought back afterwards.';
+    $('mDemoOffline').classList.toggle('demoSoonWarn', !!d.offline_soon);
+  }
+  /* guarded: some tests run regions of this script in a vm with no document */
+  if (typeof document !== 'undefined' && document.querySelectorAll) document.querySelectorAll('[data-demo-settle]').forEach(function (b) {
+    b.addEventListener('click', function () {
+      var inst = manageInst;
+      if (!inst || !inst.demo) return;
+      var outcome = b.getAttribute('data-demo-settle');
+      document.querySelectorAll('[data-demo-settle]').forEach(function (x) { x.disabled = true; });
+      $('mDemoMsg').textContent = '';
+      fetch(API + '/provisioning/instances/' + encodeURIComponent(inst.id) + '/demo', {
+        method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ outcome: outcome })
+      }).then(function (r) { return r.json().catch(function () { return {}; }).then(function (data) { return { ok: r.ok, data: data }; }); })
+        .then(function (res) {
+          document.querySelectorAll('[data-demo-settle]').forEach(function (x) { x.disabled = false; });
+          if (!res.ok) { $('mDemoMsg').textContent = (res.data && res.data.error && res.data.error.message) || 'That didn’t go through. Try again.'; return; }
+          inst.demo = res.data.demo;
+          renderDemoCard(inst);
+          $('mDemoMsg').textContent = outcome === 'carried'
+            ? 'It’s a real project now. Its settings, team and work carry on as they are.'
+            : 'Kept as a demo.';
+        })
+        .catch(function () {
+          document.querySelectorAll('[data-demo-settle]').forEach(function (x) { x.disabled = false; });
+          $('mDemoMsg').textContent = 'That didn’t go through. Try again.';
+        });
+    });
+  });
+
   function renderManage(inst) {
     manageInst = inst;
     $('mLoading').hidden = true;
@@ -7123,6 +7399,7 @@ summary{min-height:24px;padding:3px 0;}
     renderPick(inst);
     renderCardPick(inst);
     renderLookCard(inst);
+    renderDemoCard(inst);
     /* invite a builder (task 1002346): fetch-free too — the widget needs only the
        slug, and the API is the wall. This read is own-scoped and 404s for anyone
        who is not the owner, so reaching renderManage at all IS the ownership

package/modules/public-landing/public/projects.probes.json

@@ -161,9 +161,9 @@
     { "name": "the wizard driver (task 1003346): name, type, about, home (fresh; the stub grants repo access, so the new repository is named from the project), address (the handle's verdict), the review as a ledger, then the filing — the done panel with the standup rail and the human steps", "auth": true, "width": 1440, "url": "/projects?view=new",
       "steps": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#panel-fork button[type=submit]"],["wait",400],["fill","#newName","Mercury"],["click","#panel-name button[type=submit]"],["wait",400],["click","#typeCards .tpill[data-type=\"game\"]"],["click","#panel-type button[type=submit]"],["wait",400],["fill","#f-desc","A co-op farming game where the seasons never repeat."],["click","#teamCards .tpill[data-team=\"small-team\"]"],["click","#panel-detail button[type=submit]"],["wait",900],["click","#panel-modules button[type=submit]"],["wait",400],["click","#panel-home button[type=submit]"],["wait",400],["fill","#f-slug","mercury"],["wait",900],["fill","#f-domain","mercury.example.com"],["wait",200],["click","#panel-address button[type=submit]"],["wait",400],["click","#panel-app button[type=submit]"],["wait",400],["click","#panel-look button[type=submit]"],["wait",400],["click","#doCreate"],["wait",1500]],
       "expect": {"visible":["#panel-done","#liveProgress .prog","#liveProgress .prog .stages li.now","#humanSteps li"],"hidden":["#panel-review","#panel-name"],"text":[["#done-h","The drums are rolling"]],"attr":[["#panel-done","class","panel on"]]} },
-    { "name": "the front door (task 1004417): Proceed is refused until the terms are ticked, the fork's demo door says the demo is not open yet, and Begin planet creation goes on to the name step with the rail back", "auth": true, "width": 1440, "url": "/projects?view=new",
-      "steps": [["wait",600],["click","#panel-terms button[type=submit]"],["wait",300],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#wizDemo"],["wait",200],["click","#panel-fork button[type=submit]"],["wait",400]],
-      "expect": {"visible":["#panel-name","#view-new .steps","#view-new .steps li.now"],"hidden":["#panel-fork","#panel-terms"],"attr":[["#wizDemo","aria-expanded","true"],["#view-new .steps li.now","data-step","3"]]} },
+    { "name": "the front door (task 1004417): Proceed is refused until the terms are ticked, the fork's demo door opens the demo's setup and Back returns to the doors, and Begin planet creation goes on to the name step with the rail back", "auth": true, "width": 1440, "url": "/projects?view=new",
+      "steps": [["wait",600],["click","#panel-terms button[type=submit]"],["wait",300],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#wizDemo"],["wait",200],["click","#demoBack1"],["wait",200],["click","#panel-fork button[type=submit]"],["wait",400]],
+      "expect": {"visible":["#panel-name","#view-new .steps","#view-new .steps li.now"],"hidden":["#panel-fork","#panel-terms"],"attr":[["#wizDemo","aria-expanded","false"],["#view-new .steps li.now","data-step","3"]]} },
     { "name": "the front door at 390: the fork's two doors stack inside one pill and the walk still reaches the name step", "auth": true, "width": 390, "url": "/projects?view=new",
       "steps": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400]],
       "expect": {"visible":["#panel-fork",".doorPill","#wizDemo","#panel-fork button[type=submit]"],"hidden":["#view-new .steps"]} },

package/modules/public-landing/public/projects.states.json

@@ -39,7 +39,8 @@
     "in-new": { "auth": true, "url": "/projects?view=new", "expect": { "visible": ["#panel-terms", "#termsAck"], "hidden": ["#qWrap", "#view-new .steps", "#panel-name"] } },
     "in-new-terms-refused": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#panel-terms button[type=submit]"],["wait",300]], "expect": {"visible":["#panel-terms","#h-terms"],"hidden":["#panel-fork"],"text":[["#h-terms","Tick the box to go on. It’s how your project records that you acknowledged the terms."]]} },
     "in-new-fork": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400]], "expect": {"visible":["#panel-fork",".doorPill","#wizDemo",".forkStage",".forkRoutes"],"hidden":["#panel-terms","#view-new .steps","#demoSoon",".bongoCell"]} },
-    "in-new-fork-demo": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#wizDemo"],["wait",200]], "expect": {"visible":["#panel-fork","#demoSoon"],"attr":[["#wizDemo","aria-expanded","true"]]} },
+    "in-new-fork-demo": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#wizDemo"],["wait",300]], "expect": {"visible":["#panel-fork","#demoSetup","#demoFitVerdict","#demoRing"],"hidden":["#forkIntro","#demoReady"],"attr":[["#wizDemo","aria-expanded","true"]]} },
+    "in-new-demo-ready": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#wizDemo"],["wait",300],["click","[data-demo-step=\"hours\"][data-by=\"1\"]"],["click","#demoNext1"],["wait",300]], "expect": {"visible":["#demoReady",".demoLedger","#demoInvite1","#demoInvite2"],"hidden":["#demoSetup","#forkIntro"],"text":[["#demoLHours","5 hours each"]]} },
     "in-new-name": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#panel-fork button[type=submit]"],["wait",400]], "expect": {"visible":["#panel-name","#newName","#view-new .steps"],"hidden":["#panel-fork","#panel-terms"]} },
     "out-new": { "auth": false, "url": "/projects?view=new", "expect": { "hidden": ["#qWrap"] } },
     "in-new-type": { "auth": true, "url": "/projects?view=new", "actions": [["wait",600],["click","#termsAck"],["click","#panel-terms button[type=submit]"],["wait",400],["click","#panel-fork button[type=submit]"],["wait",400],["fill","#newName","Mercury"],["click","#panel-name button[type=submit]"],["wait",400]], "expect": {"visible":["#panel-type"],"hidden":["#panel-name","#qWrap"]} },

package/modules/ui-design/kit/fixtures/provisioning-instances-demo.json

@@ -0,0 +1,114 @@
+{
+  "_": "The demo route (task 1004420): provisioning-instances.json with project 101 marked as a demo whose time box has run out, so its page asks keep-your-planet. Only projects-demo.states.json points at this.",
+  "instances": [
+    {
+      "id": 101,
+      "slug": "demo",
+      "status": "active",
+      "domain": "demo.cloudbongos.com",
+      "target_ref": "builder/demo",
+      "hosting_shape": "co-tenant",
+      "onboard_mode": "scaffold",
+      "created_at": "2026-08-01T10:00:00.000Z",
+      "provisioned_at": "2026-08-01T10:20:00.000Z",
+      "updated_at": "$now-3m",
+      "last_verified_at": "$now-3m",
+      "last_verified_up": true,
+      "error_note": null,
+      "dns_note": null,
+      "torn_down_at": null,
+      "open_intent": null,
+      "demo": {
+        "people": 3,
+        "hours_each": 4,
+        "builder_hours": 12,
+        "started_at": "2026-09-28T09:00:00Z",
+        "ends_at": "2026-09-28T13:00:00Z",
+        "remaining_seconds": 0,
+        "time_up": true,
+        "outcome": null,
+        "offline_on": "2026-10-28T09:00:00.000Z",
+        "offline_soon": false
+      }
+    },
+    {
+      "id": 102,
+      "slug": "harbor",
+      "status": "provisioning",
+      "planet_template": "blob-frost-tint",
+      "planet_accent": "sun-lit",
+      "domain": null,
+      "target_ref": "builder/harbor",
+      "hosting_shape": "cloud-host",
+      "owner_monthly_usd": null,
+      "onboard_mode": "scaffold",
+      "created_at": "$now-6m",
+      "provisioned_at": null,
+      "updated_at": "$now-2m",
+      "last_verified_at": null,
+      "last_verified_up": null,
+      "error_note": null,
+      "dns_note": null,
+      "torn_down_at": null,
+      "open_intent": {
+        "action": "standup",
+        "state": "running",
+        "created_at": "$now-6m"
+      }
+    },
+    {
+      "id": 103,
+      "slug": "tidepool",
+      "status": "error",
+      "domain": "tidepool.cloudbongos.com",
+      "target_ref": "builder/tidepool",
+      "hosting_shape": "co-tenant",
+      "onboard_mode": "adopt",
+      "created_at": "2026-08-20T09:00:00.000Z",
+      "provisioned_at": null,
+      "updated_at": "$now-1d",
+      "last_verified_at": null,
+      "last_verified_up": null,
+      "error_note": "The deploy could not read the repository: it is private, and the deploy key only reads public ones.",
+      "dns_note": null,
+      "torn_down_at": null,
+      "open_intent": null
+    },
+    {
+      "id": 104,
+      "slug": "old-lantern",
+      "status": "torn_down",
+      "domain": "old-lantern.cloudbongos.com",
+      "target_ref": "builder/old-lantern",
+      "hosting_shape": "co-tenant",
+      "onboard_mode": "scaffold",
+      "created_at": "2026-07-02T09:00:00.000Z",
+      "provisioned_at": "2026-07-02T09:30:00.000Z",
+      "updated_at": "2026-08-15T12:00:00.000Z",
+      "last_verified_at": "2026-08-15T11:50:00.000Z",
+      "last_verified_up": true,
+      "error_note": null,
+      "dns_note": null,
+      "torn_down_at": "2026-08-15T12:00:00.000Z",
+      "open_intent": null
+    },
+    {
+      "id": 105,
+      "slug": "mooring",
+      "status": "active",
+      "domain": "mooring.cloudbongos.com",
+      "target_ref": "builder/mooring",
+      "hosting_shape": "co-tenant",
+      "onboard_mode": "scaffold",
+      "created_at": "2026-08-10T09:00:00.000Z",
+      "provisioned_at": "2026-08-10T09:20:00.000Z",
+      "updated_at": "$now-20m",
+      "last_verified_at": "$now-20m",
+      "last_verified_up": false,
+      "error_note": null,
+      "dns_note": null,
+      "torn_down_at": null,
+      "open_intent": null
+    }
+  ]
+}

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.61",
+  "version": "1.20.63",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.20.61",
+      "version": "1.20.63",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.20.61",
+  "version": "1.20.63",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",