@homie-rocks/studio 0.13.0 → 0.14.1

package/mcp/ui/build.js

@@ -0,0 +1,63 @@
+/* The build card: one build's stages, each check going green, a picture and where to play it, money against the
+ * budget, and Stop. It follows the build every 2 s while it runs and tells the model once when it ends. */
+(function () {
+  var C = Card;
+  var ICON = { pass: '✓', done: '✓', fail: '✕', failed: '✕', running: '●', pending: '·', skip: '–', skipped: '–', stopped: '■' };
+  var STATE = { running: ['Running', 'live', true], passed: ['Done', 'ok'], failed: ['Failed', 'bad'], stopped: ['Stopped', ''] };
+  function money(n, unit) { return unit === 'credits' ? Math.round(n).toLocaleString('en-US') + ' credits' : '$' + Number(n || 0).toFixed(2); }
+  function render(sc) {
+    var f = sc.feed; var card = C.el('main', 'card');
+    var st = STATE[f.state] || ['…', ''];
+    C.add(card, C.top('Build', C.add(C.el('div', 'actions'), C.pill(st[0], st[1], st[2]), C.fullscreenButton())), C.el('h1', '', f.title || 'A build'),
+      C.el('p', 'sub', [f.studio, f.what === 'game' ? null : f.what, f.state === 'running' ? 'started ' + C.ago(f.startedAt) : f.endedAt ? 'took ' + C.dur(Date.parse(f.endedAt) - Date.parse(f.startedAt)) : null].filter(Boolean).join(' · ')));
+    var stages = C.el('div', 'stages');
+    (f.stages || []).forEach(function (s) { stages.appendChild(C.add(C.el('div', 'stage ' + s.state), C.el('div', 'bar'), C.el('span', '', (ICON[s.state] && s.state !== 'pending' ? ICON[s.state] + ' ' : '') + s.label))); });
+    card.appendChild(stages);
+    var cur = (f.stages || []).filter(function (s) { return s.note && s.state !== 'pending'; }).pop();
+    if (cur) card.appendChild(C.el('p', 'fine', cur.label + ': ' + cur.note));
+    if ((f.checks || []).length) {
+      var list = C.el('div');
+      f.checks.forEach(function (c) { list.appendChild(C.add(C.el('div', 'check ' + c.state), C.el('span', 'i', ICON[c.state] || '·'), C.el('span', '', c.label + (c.note ? ' — ' + c.note : '')), c.ms ? C.el('span', 'n', C.dur(c.ms)) : null)); });
+      card.appendChild(list);
+    }
+    var p = f.preview;
+    if (p && (p.image || p.url)) {
+      var box = C.el('div', 'preview');
+      var pic = C.img(p.image, p.caption || 'The game');
+      if (pic) box.appendChild(pic);
+      if (p.caption) box.appendChild(C.el('span', 'fine', p.caption));
+      card.appendChild(box);
+    }
+    if (f.spend && (f.spend.used > 0 || f.spend.budget !== null)) card.appendChild(C.el('p', 'fine', 'Spent ' + money(f.spend.used, f.spend.unit) + (f.spend.budget !== null ? ' of ' + money(f.spend.budget, f.spend.unit) : '')));
+    if (f.error) card.appendChild(C.el('p', 'note bad', f.error));
+    var failed = (sc.jobs || []).filter(function (j) { return j.state === 'failed'; });
+    if (failed.length && !f.error) card.appendChild(C.el('pre', 'log', failed.map(function (j) { return j.label + ': ' + ((j.result && j.result.why) || (j.tail || []).slice(-3).join('\n')); }).join('\n')));
+    else if ((f.log || []).length && f.state === 'running') card.appendChild(C.el('pre', 'log', f.log.slice(-3).map(function (l) { return l.text; }).join('\n')));
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', f.state === 'running' ? 'Updated ' + C.ago(f.updatedAt) : 'Ended ' + C.ago(f.endedAt)));
+    var acts = C.el('div', 'actions');
+    if (f.state === 'running' && !(f.stop && f.stop.requested)) {
+      acts.appendChild(C.btn(C.state.stopping ? 'Stopping…' : 'Stop', 'danger small', function () {
+        if (C.state.stopping) return; C.state.stopping = true; C.render();
+        C.call('build_stop', { build: sc.build }).then(function (r) { C.state.stopping = false; C.take(r); }).catch(function () { C.state.stopping = false; C.render(); });
+      }));
+    } else if (f.stop && f.stop.requested && f.state === 'running') acts.appendChild(C.pill('Stopping at the next safe point', 'warn'));
+    if (p && p.url && /^https?:/.test(p.url)) acts.appendChild(C.btn('Play it', f.state === 'passed' ? '' : 'ghost small', function () { C.open(p.url); }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    var r = sc.run;
+    if (r && r.state !== 'running' && f.state === 'running') {
+      card.insertBefore(C.el('p', 'note' + (r.state === 'failed' ? ' bad' : ' ok'), (r.state === 'passed' ? '✓ ' : '') + r.title + ': ' + (r.state === 'passed' ? 'passed' : 'failed' + (r.why ? ' — ' + r.why : ''))), foot);
+      C.tell('run-' + sc.build + '-' + r.kind, r.title + ' ' + r.state + (r.why ? ': ' + r.why : '') + ' (build ' + sc.build + ' stays open).');
+    }
+    if (f.state !== 'running') {
+      var passed = (f.checks || []).filter(function (c) { return c.state === 'pass'; }).length;
+      C.tell('end-' + sc.build, 'Build ' + sc.build + ' (' + f.title + ') ended: ' + f.state + (f.checks && f.checks.length ? ', ' + passed + ' of ' + f.checks.length + ' checks passed' : '') + (f.error ? '. Error: ' + f.error : '') + (p && p.url ? '. Play: ' + p.url : '') + '. Tell the person in a line or two.');
+    }
+    return card;
+  }
+  C.start({
+    kind: 'build', label: 'Build', fullscreen: true, render: render,
+    poll: function (sc) { return sc.feed && sc.feed.state === 'running' ? { tool: 'build_progress', args: { build: sc.build }, every: 2000 } : null; },
+  });
+})();

package/mcp/ui/card.css

@@ -0,0 +1,73 @@
+:root{color-scheme:light dark;
+--c-bg:var(--color-background-primary,light-dark(#ffffff,#1c1c1e));--c-bg2:var(--color-background-secondary,light-dark(#f6f5f2,#242427));--c-bg3:var(--color-background-tertiary,light-dark(#eeece6,#2d2d31));
+--c-fg:var(--color-text-primary,light-dark(#1d1c1a,#f3f1ec));--c-fg2:var(--color-text-secondary,light-dark(#5e5b54,#b8b4ab));--c-fg3:var(--color-text-tertiary,light-dark(#8b877e,#8a867e));
+--c-line:var(--color-border-tertiary,light-dark(rgba(20,18,12,.10),rgba(255,255,255,.10)));--c-line2:var(--color-border-secondary,light-dark(rgba(20,18,12,.18),rgba(255,255,255,.18)));
+--c-ok:var(--color-text-success,light-dark(#17753b,#5fd08a));--c-okbg:var(--color-background-success,light-dark(#e5f4ea,rgba(95,208,138,.14)));
+--c-bad:var(--color-text-danger,light-dark(#b42318,#ff8a80));--c-badbg:var(--color-background-danger,light-dark(#fdecea,rgba(255,138,128,.14)));
+--c-warn:var(--color-text-warning,light-dark(#8a5a00,#f2c94c));--c-warnbg:var(--color-background-warning,light-dark(#fff4d6,rgba(242,201,76,.14)));
+--accent:#ffcf5a;--accent-ink:#1a1405;
+--r-sm:var(--border-radius-sm,8px);--r-md:var(--border-radius-md,12px);--r-lg:var(--border-radius-lg,16px);--r-full:var(--border-radius-full,999px);
+--f-sans:var(--font-sans,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);--f-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
+[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}
+*{box-sizing:border-box}html,body{margin:0;background:transparent}
+body{font:14px/1.45 var(--f-sans);color:var(--c-fg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
+.card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:16px 16px 14px;overflow:hidden}
+.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.eyebrow{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--c-fg3)}
+.mark{width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
+h1{margin:0 0 2px;font:650 20px/1.2 var(--f-sans);letter-spacing:-.01em;overflow-wrap:anywhere}
+h2{margin:16px 0 8px;font:600 13px/1.2 var(--f-sans);color:var(--c-fg2);text-transform:uppercase;letter-spacing:.04em}
+.sub{margin:0 0 12px;color:var(--c-fg2);overflow-wrap:anywhere}
+.note{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--c-bg2);color:var(--c-fg2)}
+.note.bad{background:var(--c-badbg);color:var(--c-bad)}.note.ok{background:var(--c-okbg);color:var(--c-ok);font-weight:600}
+.fine{margin:10px 0 0;font-size:12px;color:var(--c-fg3)}
+.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);font:600 12px/1.2 var(--f-sans);background:var(--c-bg2);color:var(--c-fg2);white-space:nowrap}
+.pill.ok{background:var(--c-okbg);color:var(--c-ok)}.pill.bad{background:var(--c-badbg);color:var(--c-bad)}.pill.warn{background:var(--c-warnbg);color:var(--c-warn)}
+.pill.live{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--c-fg)}
+.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.25}}
+@media (prefers-reduced-motion:reduce){.dot{animation:none}}
+button{font:600 13px/1 var(--f-sans);border:0;border-radius:var(--r-full);padding:9px 14px;cursor:pointer;background:var(--accent);color:var(--accent-ink);min-height:34px}
+button.ghost{background:var(--c-bg2);color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-line2)}
+button.small{padding:7px 12px;min-height:30px;font-size:12px}
+button.danger{background:var(--c-badbg);color:var(--c-bad)}
+button:disabled{opacity:.55;cursor:default}
+button:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
+.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line)}
+.when{color:var(--c-fg3);font-size:12px}
+.skel{height:14px;margin:10px 0;border-radius:6px;background:linear-gradient(90deg,var(--c-bg2),var(--c-bg3),var(--c-bg2));background-size:200% 100%;animation:sk 1.2s linear infinite}
+@keyframes sk{to{background-position:-200% 0}}
+ol.list,ul.list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.list li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r-md);background:var(--c-bg2)}
+.list li.now{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--c-bg2))}
+.list li.done .cn{background:var(--c-okbg);color:var(--c-ok)}
+.list li.todo{opacity:.72}
+.cn{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-bg3);color:var(--c-fg2);font:700 12px/1 var(--f-sans)}
+.cb{flex:1;min-width:0;display:grid;gap:2px}.cb b{font-weight:600}.cb span{color:var(--c-fg2);font-size:13px;overflow-wrap:anywhere}
+.cb .fix{color:var(--c-fg);font-size:12.5px}
+.state-ok .cn{background:var(--c-okbg);color:var(--c-ok)}.state-act .cn,.state-missing .cn{background:var(--c-warnbg);color:var(--c-warn)}
+.stages{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:12px 0}
+.stage{display:grid;gap:6px}.stage .bar{height:6px;border-radius:3px;background:var(--c-bg3)}
+.stage.done .bar{background:var(--c-ok)}.stage.running .bar{background:var(--accent);animation:pulse 1.4s ease-in-out infinite}.stage.failed .bar{background:var(--c-bad)}.stage.skipped .bar{background:var(--c-bg3);opacity:.5}
+.stage span{font-size:12px;color:var(--c-fg2)}
+.check{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:13px}.check .i{flex:none;width:18px;text-align:center}
+.check.pass .i{color:var(--c-ok)}.check.fail .i{color:var(--c-bad)}.check.running .i{color:var(--c-warn)}
+.check .n{color:var(--c-fg3);font-size:12px;margin-left:auto;white-space:nowrap}
+.preview{margin-top:12px;display:grid;gap:8px}
+.preview img{width:100%;max-height:260px;object-fit:cover;border-radius:var(--r-md);background:var(--c-bg2)}
+.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:8px}
+.game{display:grid;gap:6px;padding:8px;border-radius:var(--r-md);background:var(--c-bg2)}
+.game .art{aspect-ratio:16/9;border-radius:var(--r-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 50%,var(--c-bg3)),var(--c-bg3));display:grid;place-items:center;font:800 26px/1 var(--f-sans);color:var(--c-fg2);overflow:hidden}
+.game .art img{width:100%;height:100%;object-fit:cover}
+.game b{font-size:14px}.game span{font-size:12.5px;color:var(--c-fg2)}
+.soon{padding:14px;border-radius:var(--r-md);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--c-bg2)),var(--c-bg2));display:grid;gap:6px}
+.soon b{font-size:16px}
+.stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 6px;color:var(--c-fg2);font-size:13px}.stats b{color:var(--c-fg)}
+.log{margin:10px 0 0;padding:8px 10px;border-radius:var(--r-md);background:var(--c-bg2);font:12px/1.5 var(--f-mono);color:var(--c-fg2);white-space:pre-wrap;overflow-wrap:anywhere}
+.frame{width:100%;height:620px;border:0;border-radius:var(--r-md);background:var(--c-bg2);display:block}
+.full .frame{height:calc(100vh - 120px)}
+.ready{margin:0 0 8px;font-size:13px;color:var(--c-fg2)}.ready .ok{color:var(--c-ok);font-weight:600}
+.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
+.tabs span{padding:4px 9px;border-radius:var(--r-full);background:var(--c-bg2);font-size:12px;color:var(--c-fg2)}
+@media (max-width:420px){.card{padding:14px 12px 12px;border-radius:var(--r-md)}h1{font-size:18px}.stages{grid-auto-flow:row;grid-auto-columns:auto}.frame{height:520px}}

package/mcp/ui/codex.js

@@ -0,0 +1,23 @@
+/* The Game Codex card: the codex page itself (drawn by @homie-rocks/studio lib/codex.mjs in the game's own look:
+ * a tab per section, cards, controls, milestones, decisions, open questions, the build's status), in a frame. */
+(function () {
+  var C = Card;
+  function render(sc) {
+    var card = C.el('main', 'card');
+    var todo = (sc.missing || []).length;
+    C.add(card, C.top('Game Codex', C.add(C.el('div', 'actions'), C.pill(todo ? todo + ' to decide' : 'Every section filled', todo ? 'warn' : 'ok'), C.fullscreenButton())), C.el('h1', '', sc.title));
+    // The page has its own tabs; the card says only what is still open.
+    if (sc.openQuestions) card.appendChild(C.el('p', 'sub', sc.openQuestions + ' open question' + (sc.openQuestions === 1 ? '' : 's') + ' · ' + (sc.sections || []).length + ' sections'));
+    if (sc.html) {
+      var frame = C.el('iframe', 'frame');
+      frame.title = 'The Game Codex for ' + sc.title;
+      frame.setAttribute('sandbox', 'allow-scripts');
+      frame.setAttribute('referrerpolicy', 'no-referrer');
+      frame.srcdoc = sc.html;
+      card.appendChild(frame);
+    } else card.appendChild(C.el('p', 'note', 'The page is too big to show here.'));
+    if (todo) card.appendChild(C.el('p', 'fine', 'Not decided yet: ' + sc.missing.join(', ') + '.'));
+    return card;
+  }
+  C.start({ kind: 'codex', label: 'Game Codex', fullscreen: true, render: render, poll: null });
+})();

package/mcp/ui/setup.js

@@ -0,0 +1,72 @@
+/* The setup card: the new-studio checklist, this computer's setup status (what each row unlocks and its fix), the
+ * studio in use, and its toolkit install as it runs. */
+(function () {
+  var C = Card;
+  var MARK = { ok: '✓', act: '→', missing: '!', optional: '○', later: '…', unknown: '?' };
+  function step(s) {
+    var li = C.el('li', s.state);
+    C.add(li, C.el('span', 'cn', s.state === 'done' ? '✓' : String(s.n)), C.add(C.el('div', 'cb'), C.el('b', '', s.label), s.state === 'now' ? C.el('span', '', 'Now') : null));
+    return li;
+  }
+  function row(r) {
+    var li = C.el('li', 'state-' + r.state);
+    var body = C.add(C.el('div', 'cb'), C.el('b', '', r.label + (r.need === 'optional' ? ' (optional)' : '')), C.el('span', '', r.detail), C.el('span', '', 'Unlocks ' + r.unlocks));
+    if (r.fix && r.state !== 'ok') body.appendChild(C.el('span', 'fix', r.fix.say));
+    C.add(li, C.el('span', 'cn', MARK[r.state] || '?'), body, r.fix && r.fix.open && r.state !== 'ok' ? C.btn('Open', 'ghost small', function () { C.open(r.fix.open); }) : null);
+    return li;
+  }
+  function render(sc) {
+    var card = C.el('main', 'card');
+    var cur = sc.current;
+    var install = sc.install;
+    var head = install && install.state === 'running' ? C.pill('Installing · ' + install.seconds + ' s', 'live', true)
+      : cur ? C.pill(cur.games.length ? cur.games.length + (cur.games.length === 1 ? ' game' : ' games') : 'No game yet', cur.games.length ? 'ok' : '') : C.pill('New studio', '');
+    C.add(card, C.top('Studio setup', head), C.el('h1', '', cur ? cur.name : 'Set up a studio'),
+      C.el('p', 'sub', cur ? (cur.games.length ? 'On this computer, in ' + cur.folder : 'On this computer, in ' + cur.folder + '. Its home page says "First game coming soon".') : 'Studios live in ' + (sc.studiosDir || 'the folder set in the Homie extension') + '.'));
+    var ol = C.el('ol', 'list');
+    (sc.checklist || []).forEach(function (s) { ol.appendChild(step(s)); });
+    card.appendChild(ol);
+    if (install) {
+      var msg = install.state === 'running' ? 'Installing the studio\'s toolkit and Wrangler (' + install.seconds + ' s)…' : install.state === 'done' ? 'The studio\'s toolkit is installed.' : 'The install failed: ' + (install.tail || []).slice(-2).join(' ');
+      card.appendChild(C.el('p', 'note' + (install.state === 'failed' ? ' bad' : ''), msg));
+    }
+    var rows = (sc.status && sc.status.rows) || [];
+    if (rows.length) {
+      // What needs the person comes in full; what is ready is one line.
+      var todo = rows.filter(function (r) { return r.state !== 'ok'; });
+      var ready = rows.filter(function (r) { return r.state === 'ok'; });
+      card.appendChild(C.el('h2', '', 'This computer and your accounts'));
+      if (ready.length) card.appendChild(C.add(C.el('p', 'ready'), C.el('span', 'ok', '✓ Ready: '), C.el('span', '', ready.map(function (r) { return r.label; }).join(' · '))));
+      if (todo.length) {
+        var ul = C.el('ul', 'list');
+        todo.forEach(function (r) { ul.appendChild(row(r)); });
+        card.appendChild(ul);
+      }
+    }
+    if ((sc.studios || []).length > 1) card.appendChild(C.el('p', 'fine', 'Studios here: ' + sc.studios.map(function (s) { return s.name; }).join(', ')));
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', 'Optional rows never block anything.'));
+    var acts = C.el('div', 'actions');
+    if (cur && !cur.games.length) {
+      acts.appendChild(C.btn(C.state.demoing ? 'Opening…' : 'Play a live game', '', function () {
+        if (C.state.demoing) return; C.state.demoing = true; C.render();
+        C.call('game_demo', {}).then(function (r) {
+          C.state.demoing = false; C.render();
+          var d = r && r.structuredContent; var p = d && d.pick;
+          if (p && p.play) { C.open(p.play); C.tell('demo', 'The person opened the live demo game ' + p.name + ' (' + p.play + ') from the setup card: step 2, see a working game. Nothing was copied into the studio.'); }
+        }).catch(function () { C.state.demoing = false; C.render(); });
+      }));
+    }
+    acts.appendChild(C.btn('Check again', 'ghost small', function () {
+      C.call('setup_status', { fresh: true }).then(function (r) { C.take(r); }).catch(function () {});
+    }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    if (install && install.state === 'done') C.tell('install-' + install.job, (cur ? cur.name : 'The studio') + '\'s toolkit finished installing; the studio is ready to build.');
+    return card;
+  }
+  C.start({
+    kind: 'setup', label: 'Studio setup', render: render,
+    poll: function (sc) { return sc.install && sc.install.state === 'running' ? { tool: 'setup_status', args: {}, every: 3000 } : null; },
+  });
+})();

package/mcp/ui/studio.js

@@ -0,0 +1,41 @@
+/* The studio card: its games with Play (on this computer and live), songs, videos and posts, where it runs, its
+ * live rooms, and a live game to try while it has none. */
+(function () {
+  var C = Card;
+  function initials(name) { return String(name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map(function (w) { return w[0]; }).join('').toUpperCase(); }
+  function render(sc) {
+    var card = C.el('main', 'card');
+    C.add(card, C.top('Studio', C.pill(sc.site ? 'Online' : sc.dev ? 'Running here' : 'On this computer', sc.site ? 'ok' : '')), C.el('h1', '', sc.name), C.el('p', 'sub', sc.tagline || sc.folder));
+    var stats = C.el('div', 'stats');
+    [[sc.games.length, sc.games.length === 1 ? 'game' : 'games'], [sc.songs.length, sc.songs.length === 1 ? 'song' : 'songs'], [sc.videos.length, sc.videos.length === 1 ? 'video' : 'videos'], [sc.posts, sc.posts === 1 ? 'post' : 'posts'], [(sc.rooms || []).length, 'live rooms']].forEach(function (x) {
+      stats.appendChild(C.add(C.el('span'), C.el('b', '', String(x[0])), C.el('span', '', ' ' + x[1])));
+    });
+    card.appendChild(stats);
+    if (sc.games.length) {
+      var grid = C.el('div', 'games');
+      sc.games.forEach(function (g) {
+        var art = C.el('div', 'art'); var pic = C.img(g.cover, g.name);
+        if (pic) art.appendChild(pic); else art.textContent = initials(g.name);
+        var acts = C.el('div', 'actions');
+        if (g.play.dev) acts.appendChild(C.btn('Play here', 'small', function () { C.open(g.play.dev); }));
+        if (g.play.live) acts.appendChild(C.btn('Play live', g.play.dev ? 'ghost small' : 'small', function () { C.open(g.play.live); }));
+        grid.appendChild(C.add(C.el('div', 'game'), art, C.el('b', '', g.name), g.blurb ? C.el('span', '', g.blurb) : null, sc.site && !g.live ? C.el('span', 'fine', 'Not online yet: deploy puts it there') : null, acts.childNodes.length ? acts : null));
+      });
+      card.appendChild(grid);
+    } else {
+      var soon = C.add(C.el('div', 'soon'), C.el('b', '', 'First game coming soon'), C.el('span', '', 'That is what the studio\'s home page says until its first game is made. Plan it first: it is made the way you decide.'));
+      if (sc.demo) soon.appendChild(C.add(C.el('div', 'actions'), C.btn('Play ' + sc.demo.name, 'small', function () { C.open(sc.demo.play); C.tell('demo', 'The person opened the live demo ' + sc.demo.name + ' from the studio card.'); }), C.el('span', 'fine', 'A live game on ' + sc.demo.studio + ', made with Homie')));
+      card.appendChild(soon);
+    }
+    if ((sc.rooms || []).length) card.appendChild(C.el('p', 'fine', 'Playing now: ' + sc.rooms.map(function (r) { return r.game + ' (' + r.players + ')'; }).join(', ')));
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', sc.site ? sc.site.replace(/^https?:\/\//, '') : sc.dev ? sc.dev.url.replace(/^https?:\/\//, '') : 'Not online yet'));
+    var acts = C.el('div', 'actions');
+    if (sc.dev) acts.appendChild(C.btn('Open here', 'ghost small', function () { C.open(sc.dev.url + '/'); }));
+    if (sc.site) acts.appendChild(C.btn('Open site', 'small', function () { C.open(sc.site + '/'); }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    return card;
+  }
+  C.start({ kind: 'studio', label: 'Studio', render: render, poll: null });
+})();

package/netplay/NETPLAY.md

@@ -660,7 +660,7 @@ tools). The room's relay enforces five controls:
 | `announce` | `text` (one line, at most 280 characters; empty takes it down), `seconds` (5–3600, default 30) | Everyone and every watching shell gets `announce { id, text, at, until, from: 'studio' }`; a joiner gets it in `welcome.announce` until it ends. |
 | `close` | `minutes`, or `seconds` (10 s up to a day), `message?`, or `reopen: true` | Every socket gets `error room-closed { until, message }` and is closed; the room forgets its play as an empty room does (section 4); watchers get `closed`. Until `until` every `hello` is refused with `room-closed`, and the Lobby sends nobody there. `reopen` opens it at once. |
 | `seats` | `max` | The room's seats while it runs (the owner's "players per room"). Players already seated above it keep their seat; nobody new is seated there. Never above the room's own cap (the game's manifest). |
-| `regate` | `allow` (holder kinds: `o` the owner, `i` an invite, `p` a player account), `notice?`, `message?`; no `allow` calls a waiting one off | A game's launch state narrowed (private, or an invite-only beta). The current round finishes first: the `notice` goes up as an announcement, and 5 s after the host's `round` with `phase: 'over'` (at the latest 20 s after its `endsAt`, or 30 s when no round is running; never later than 15 minutes) every socket whose ticket names no allowed holder gets `error room-closed { message }` (no `until`: they come back through the game's door if they have access) and is closed; its seat is freed and the others play on. A room with nobody to send out does nothing. |
+| `regate` | `allow` (holder kinds: `o` the owner, `i` an invite, `p` a player account), `notice?`, `message?`; no `allow` calls a waiting one off | A game's launch state narrowed (private, or an invite-only beta). The current round finishes first: the `notice` goes up as an announcement, and 5 s after the host's `round` with `phase: 'over'` (at the latest 20 s after its `endsAt`, or 30 s when no round is running; never later than 15 minutes) every socket whose ticket names no allowed holder gets `error room-closed { message }` (no `until`: they come back through the game's door if they have access) and is closed; its seat is freed and the others play on. A room with nobody to send out does nothing. The studio's Worker sends it to every live room the game's Lobby knows; a room that opens in the same moment reads its game's launch state once on its first heartbeat and re-gates itself the same way. |
 
 **Signed by the studio, checked by the room.** A control reaches the relay only from the
 studio's own Worker, as

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, optional R2 storage for large media, deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",
@@ -39,6 +39,7 @@
     "netplay/",
     "port/",
     "worker/",
+    "mcp/",
     "saves/",
     "starters/",
     "media/",

package/worker/index.mjs

@@ -66,7 +66,7 @@ import { count, countVisit, counter, isQa, onlyOf, ownerAllowed, playedByGame, p
 import { ownerRoutes } from './stats-page.mjs';
 import { playerRoutes, players as playerAccounts } from './players.mjs';
 import {
-  accessOf, accountSub, gatePage, holders, isOwner, joinHolders, launchOf, officeRoutes, publicCatalogue, redeemInvite, remixOf, seatsFor, settingsOf, ticketAllows, ticketFor,
+  accessOf, accountSub, gatePage, holders, isOwner, joinHolders, launchOf, regateArgs, officeRoutes, publicCatalogue, redeemInvite, remixOf, seatsFor, settingsOf, ticketAllows, ticketFor,
   ticketSub, usePlayers, verifyControl,
 } from './office.mjs';
 
@@ -815,6 +815,9 @@ export class Table {
       const room = this.room;
       if (!room) return;
       room.tick();
+      // A room that just opened reads its game's launch state once: a change made in the moment it opened (before the
+      // Lobby knew of it) still reaches it, after the current round as always.
+      if (room.openedAt && this.launchReadFor !== room.openedAt) { this.launchReadFor = room.openedAt; this.ctx.waitUntil(this.rereadLaunch().catch(() => {})); }
       // A launch change the room applied by itself (after its round): its stored state says so too.
       if (room.officeDirty) { room.officeDirty = false; this.ctx.storage.put('office', room.officeSaved()).catch(() => {}); }
       n += 1;
@@ -824,6 +827,22 @@ export class Table {
     }, 250);
   }
 
+  /**
+   * The game's launch state, read once when the room opens (one D1 read): a private or invite-only game whose room
+   * holds anyone the state leaves out re-gates after the current round. Never in a Preview (no launch states there).
+   */
+  async rereadLaunch() {
+    const room = this.room;
+    if (!room || !this.game || !this.env.DB || this.env.HOMIE_PREVIEW === '1' || room.regate) return null;
+    let launch = null;
+    try { launch = (await this.env.DB.prepare('SELECT launch FROM office_games WHERE game = ?1').bind(this.game).first())?.launch ?? null; } catch { return null; }
+    const args = regateArgs(launch);
+    if (!args.allow) return null;
+    const res = room.control('regate', args);
+    if (res.ok && res.leaving) await this.ctx.storage.put('office', room.officeSaved()).catch(() => {});
+    return res;
+  }
+
   /** Tell the Lobby this room closed (until when; 0 when it opened again), so it sends nobody here meanwhile. */
   tellLobby(extra) {
     if (!this.game || !this.code) return;

package/worker/office.mjs

@@ -57,6 +57,21 @@ const TICKET_TTL_MS = 12 * 3600_000;
 /** Who may stay in a live room after a launch change, by the kinds of holder a ticket names (o, i-…, p-…). */
 const ALLOW = Object.freeze({ private: ['o'], invite: ['o', 'i'], public: null });
 
+/**
+ * The room control for a launch state (NETPLAY.md section 15 `regate`): who may stay, the notice everyone sees while
+ * the round finishes, and the words for whoever then leaves. Public calls a waiting change off.
+ */
+export function regateArgs(launch, name = 'This game') {
+  if (!ALLOW[launch]) return {};
+  return {
+    allow: ALLOW[launch],
+    ...{
+      private: { notice: `${name} goes private after this round. Thanks for playing!`, message: `${name} is private now. Thanks for playing!` },
+      invite: { notice: `${name} becomes an invite-only beta after this round. Invited players keep playing.`, message: `${name} is an invite-only beta now. Have an invite? Enter it on the game's page. Thanks for playing!` },
+    }[launch],
+  };
+}
+
 const json = (body, status = 200, extra = {}) => new Response(`${JSON.stringify(body)}\n`, {
   status, headers: { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store, private', 'x-robots-tag': 'noindex', ...extra },
 });
@@ -578,12 +593,7 @@ export async function perform(env, cat, a) {
       // state leaves out is sent out of it (the owner, and in an invite-only beta the invited, play on). Back to a
       // wider state, a change still waiting is called off.
       if (launch !== prev) {
-        const words = {
-          private: { notice: `${meta.name} goes private after this round. Thanks for playing!`, message: `${meta.name} is private now. Thanks for playing!` },
-          invite: { notice: `${meta.name} becomes an invite-only beta after this round. Invited players keep playing.`, message: `${meta.name} is an invite-only beta now. Have an invite? Enter it on the game's page. Thanks for playing!` },
-          public: {},
-        }[launch];
-        const res = await Promise.all(rooms.map((r) => roomControl(env, meta, fresh, r.room, 'regate', ALLOW[launch] ? { allow: ALLOW[launch], ...words } : {})));
+        const res = await Promise.all(rooms.map((r) => roomControl(env, meta, fresh, r.room, 'regate', regateArgs(launch, meta.name))));
         done.regating = res.filter((r) => r.ok && r.leaving > 0).length;
       }
       if (a.maxPlayers !== undefined) {

package/worker/site.mjs

@@ -692,6 +692,7 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
   const f = featuredOf(cat);
   const tagline = cat.studio?.tagline ?? '';
   let hero;
+  let soon = '';
   if (f) {
     const playing = live[f.id] ?? 0;
     hero = `<section class="hero home" aria-labelledby="hero-title">
@@ -704,6 +705,27 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
     <a class="also" href="/${esc(f.id)}/">${icon('arrow')}<span>About ${esc(f.name)}</span></a>${games.length > 1 ? `<a class="also" href="/games/">${icon('games')}<span>All ${games.length} games</span></a>` : ''}
   </div>
 </section>`;
+  } else if (!videos.length && !songs.length) {
+    // A new studio with nothing published yet: its own Home, its name, "First game coming soon", and what is on the
+    // way (a studio is never given a starter game it did not ask for). Its posts show below as soon as it has any.
+    hero = `<section class="hero home soon" aria-labelledby="hero-title">
+  ${heroMedia({}, { word: name })}
+  <div class="hero-copy">
+    <p class="kicker">${esc(tagline || 'A Homie studio')}</p>
+    <h1 class="title ${titleClass(name)}" id="hero-title">${esc(name)}</h1>
+    <p class="line">First game coming soon.</p>
+    <p class="live"><span class="live-dot" aria-hidden="true"></span><span>${posts.length ? 'In the making · the latest news is below' : 'In the making'}</span></p>
+  </div>
+</section>`;
+    const next = [
+      ['Games', 'The first game', 'It opens here with a Play button: a live public room on a phone, a computer or a TV, with bots in the empty seats.'],
+      ['Posts', 'News and drops', 'The studio\'s posts land on this page, with feeds to follow.'],
+      ['Music and videos', 'Songs and trailers', 'Scores, songs and trailers get pages of their own.'],
+    ];
+    soon = `<section class="band glowband" aria-labelledby="soon-title"><div class="band-in">
+  <div class="head-row reveal"><div><p class="kicker">On the way</p><h2 class="small-h" id="soon-title">${esc(`Coming to ${name}`)}</h2></div></div>
+  <div class="cards">${next.map(([k, t, d]) => `<div class="pcard reveal" data-soon><p class="post-meta">${esc(k)}</p><h3>${esc(t)}</h3><p>${esc(d)}</p></div>`).join('')}</div>
+</div></section>`;
   } else {
     const lead = videos[0] ?? songs[0] ?? null;
     const art = lead ? mediaArt(lead, videos[0] ? 'videos' : 'music', cat) : null;
@@ -736,10 +758,10 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
   const extra = partial(cat, 'home');
   return layout(cat, {
     title: tagline ? `${name} — ${tagline}` : name,
-    description: tagline || (f ? `${name}: ${games.map((g) => g.name).join(', ')}. Free in your browser, on a phone, a computer or a TV.` : name),
+    description: tagline || (f ? `${name}: ${games.map((g) => g.name).join(', ')}. Free in your browser, on a phone, a computer or a TV.` : soon ? `${name}: first game coming soon.` : name),
     origin, path: '/', image: f ? (f.landing?.hero?.wideImage ?? coverOf(f)) : null, page: 'home', hero: true,
     head: f?.landing?.hero?.wideImage ? `<link rel="preload" as="image" href="${esc(f.landing.hero.tallImage ?? f.landing.hero.wideImage)}">` : '',
-    main: `${hero}${extra ? `<section class="band">${extra}</section>` : ''}${roomsBand}${gamesBand}${postsBand}${mediaBand(videos, 'videos', 'Trailers and clips')}${mediaBand(songs, 'music', 'Songs and scores')}`,
+    main: `${hero}${extra ? `<section class="band">${extra}</section>` : ''}${roomsBand}${gamesBand}${postsBand}${soon}${mediaBand(videos, 'videos', 'Trailers and clips')}${mediaBand(songs, 'music', 'Songs and scores')}`,
   });
 }
 

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.13.0';
+export const STUDIO_VERSION_TAG = '0.14.1';