@homie-rocks/studio 0.12.1 → 0.14.0

package/lib/template-history.json

@@ -247,6 +247,58 @@
      "## Beta": "9d02638207a26e73"
     }
    }
+  },
+  "0.13.0": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "games/README.md": "5e5e942baa7e0372",
+    "music/README.md": "b8a828de9311bd28",
+    "videos/README.md": "70614388cbb203c7",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "f14d641159480e6c",
+     "## Commands (all through the pinned CLI in node_modules)": "3a3d3bef7e8d1a50",
+     "## The site": "7d3525ba39b7f262",
+     "## Making games": "63069b31c87a2aa2",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "f0566f07cff04113",
+     "## Rules": "969318425c99f5a5",
+     "## Beta": "9d02638207a26e73"
+    }
+   }
+  },
+  "0.14.0": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "b8a828de9311bd28",
+    "videos/README.md": "70614388cbb203c7",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "f14d641159480e6c",
+     "## Commands (all through the pinned CLI in node_modules)": "e579cd6ce3ce342a",
+     "## The site": "7c1618431bae6324",
+     "## Making games": "63069b31c87a2aa2",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "f0566f07cff04113",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "969318425c99f5a5",
+     "## Beta": "9d02638207a26e73"
+    }
+   }
   }
  }
 }

package/lib/upgrade.mjs

@@ -31,7 +31,7 @@ import { readStudio } from './studio.mjs';
 import { STUDIO_VERSION, packageSpec } from './version.mjs';
 
 /** Whole files the template writes and a studio may keep as they are: updated only while the studio never changed them. */
-export const TEMPLATE_FILES = ['AGENTS.md', 'CLAUDE.md', 'README.md', 'games/README.md', 'music/README.md', 'videos/README.md', 'posts/README.md', 'site/README.md', 'site/src/worker.mjs'];
+export const TEMPLATE_FILES = ['AGENTS.md', 'CLAUDE.md', 'README.md', 'HANDOFF.md', 'games/README.md', 'music/README.md', 'videos/README.md', 'posts/README.md', 'site/README.md', 'site/src/worker.mjs'];
 /** Files the template adds when missing and never changes once they exist (a migration is applied; a manifest is the studio's). */
 export const ADD_ONLY = ['music/manifest.json', 'videos/manifest.json', '.claude/skills/.gitkeep'];
 const MIGRATIONS = /^site\/migrations\/[^/]+\.sql$/;
@@ -170,11 +170,14 @@ export function upgradePlan(root, { history = readHistory() } = {}) {
     }
     const have = sections(mine);
     const tsecs = sections(want);
+    const adding = new Set();
     for (const [k, t] of tsecs.entries()) {
       const at = have.find((s) => s.heading === t.heading);
       if (!at) {
-        // After the nearest template section before it that the studio has; else before the first one after it.
-        const before = tsecs.slice(0, k).reverse().find((p) => have.some((s) => s.heading === p.heading));
+        // After the nearest template section before it that the studio has (or that this plan adds just before it, so
+        // two new sections in a row keep the template's order); else before the first one after it.
+        const before = tsecs.slice(0, k).reverse().find((p) => have.some((s) => s.heading === p.heading) || adding.has(p.heading));
+        adding.add(t.heading);
         const after = before ? null : tsecs.slice(k + 1).find((p) => have.some((s) => s.heading === p.heading));
         changes.push({ file: rel, kind: 'add-section', section: t.heading, what: `new section ${t.heading === INTRO ? 'intro' : `"${t.heading}"`}`, after: before?.heading ?? null, before: after?.heading ?? null, text: t.text });
         continue;

package/mcp/ui/bridge.js

@@ -0,0 +1,148 @@
+/*
+ * Homie's local cards: the MCP Apps bridge (spec 2026-01-26) every card shares. JSON-RPC 2.0 over postMessage
+ * with the host: ui/initialize, the tool's input and result, the host's theme, tools/call (the host proxies it to
+ * the local Homie server), ui/open-link for every link, ui/update-model-context to tell the model once, and the
+ * card's size. No network of its own; every text is set as text, never as HTML.
+ */
+var Card = (function () {
+  var seq = 0; var pending = {}; var ctx = {}; var caps = {};
+  var S = { result: null, data: null, timer: null, torn: false, visible: true, told: {}, busy: false };
+  var spec = null;
+  var root = document.getElementById('root');
+
+  function post(m) { window.parent.postMessage(m, '*'); }
+  function rpc(method, params) {
+    var id = ++seq;
+    post({ jsonrpc: '2.0', id: id, method: method, params: params || {} });
+    return new Promise(function (resolve, reject) {
+      pending[id] = { resolve: resolve, reject: reject };
+      setTimeout(function () { if (pending[id]) { delete pending[id]; reject(new Error('timeout')); } }, 65000);
+    });
+  }
+  function note(method, params) { post({ jsonrpc: '2.0', method: method, params: params || {} }); }
+  function el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined && text !== null) e.textContent = String(text); return e; }
+  function add(parent) { for (var i = 1; i < arguments.length; i++) { var k = arguments[i]; if (k) parent.appendChild(k); } return parent; }
+  function btn(label, cls, onclick) { var b = el('button', cls || '', label); b.type = 'button'; b.onclick = onclick; return b; }
+  function pill(text, cls, live) { var p = el('span', 'pill ' + (cls || '')); if (live) p.appendChild(el('span', 'dot')); p.appendChild(el('span', '', text)); return p; }
+  function top(label, right) { return add(el('div', 'top'), add(el('div', 'eyebrow'), el('span', 'mark'), el('span', '', 'Homie · ' + label)), right || null); }
+  function img(src, alt) {
+    if (typeof src !== 'string' || !/^data:image\/(png|jpeg|webp|gif);base64,/.test(src)) return null;
+    var i = el('img'); i.alt = alt || ''; i.decoding = 'async'; i.src = src; i.onerror = function () { i.remove(); size(); };
+    return i;
+  }
+  function open(url) { if (typeof url === 'string' && /^https?:\/\//.test(url)) rpc('ui/open-link', { url: url }).catch(function () {}); }
+  function call(name, args) { return rpc('tools/call', { name: name, arguments: args || {} }); }
+  function tell(key, text) {
+    if (S.told[key]) return; S.told[key] = true;
+    rpc('ui/update-model-context', { content: [{ type: 'text', text: text }] }).catch(function () {});
+  }
+  function ago(iso) {
+    var t = Date.parse(iso || ''); if (!isFinite(t)) return '';
+    var s = Math.max(0, Math.round((Date.now() - t) / 1000));
+    return s < 5 ? 'just now' : s < 60 ? s + ' s ago' : s < 3600 ? Math.round(s / 60) + ' min ago' : Math.round(s / 3600) + ' h ago';
+  }
+  function dur(ms) { if (!(ms >= 0)) return ''; var s = Math.round(ms / 1000); return s < 60 ? s + ' s' : Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); }
+  // As the ext-apps SDK measures: the content's own height (html at max-content) and the frame's width, once a
+  // frame, only when either changed.
+  var sized = { w: 0, h: 0, queued: false };
+  function size() {
+    if (sized.queued) return; sized.queued = true;
+    requestAnimationFrame(function () {
+      sized.queued = false;
+      var html = document.documentElement; var was = html.style.height;
+      html.style.height = 'max-content';
+      var h = Math.ceil(html.getBoundingClientRect().height);
+      html.style.height = was;
+      var w = Math.ceil(window.innerWidth);
+      if (w === sized.w && h === sized.h) return;
+      sized.w = w; sized.h = h;
+      note('ui/notifications/size-changed', { width: w, height: h });
+    });
+  }
+  function theme(c) {
+    if (!c) return;
+    if (c.theme === 'light' || c.theme === 'dark') { document.documentElement.setAttribute('data-theme', c.theme); document.documentElement.style.colorScheme = c.theme; }
+    var v = c.styles && c.styles.variables;
+    if (v) for (var k in v) if (v[k] !== undefined && /^--[a-z0-9-]+$/.test(k)) document.documentElement.style.setProperty(k, v[k]);
+    if (c.styles && c.styles.css && c.styles.css.fonts && !document.getElementById('host-fonts')) { var st = el('style'); st.id = 'host-fonts'; st.textContent = c.styles.css.fonts; document.head.appendChild(st); }
+  }
+  function fullscreenButton() {
+    var modes = (ctx && ctx.availableDisplayModes) || [];
+    if (modes.indexOf('fullscreen') < 0) return null;
+    var full = ctx.displayMode === 'fullscreen';
+    return btn(full ? 'Smaller' : 'Full screen', 'ghost small', function () {
+      rpc('ui/request-display-mode', { mode: full ? 'inline' : 'fullscreen' }).then(function (r) { ctx.displayMode = r && r.mode; render(); }).catch(function () {});
+    });
+  }
+  function textOf(r) { return (r && r.content && r.content[0] && r.content[0].text) || ''; }
+  function render() {
+    if (!spec) return;
+    var card;
+    if (!S.data) {
+      card = el('main', 'card');
+      if (S.result && S.result.isError) add(card, top(spec.label, pill('Not done', 'bad')), el('p', 'note bad', textOf(S.result) || 'That did not work.'));
+      else add(card, top(spec.label, pill('Loading', 'live', true)), el('div', 'skel'), el('div', 'skel'));
+    } else {
+      try { card = spec.render(S.data, S.result); } catch (e) { card = add(el('main', 'card'), top(spec.label), el('p', 'note bad', String(e && e.message || e))); }
+      if (S.result && S.result.isError && S.data) card.appendChild(el('p', 'note bad', textOf(S.result)));
+    }
+    card.id = 'root';
+    if (ctx.displayMode === 'fullscreen') card.classList.add('full');
+    root.replaceWith(card); root = card; size();
+  }
+  function take(result) {
+    S.result = result;
+    if (result && result.structuredContent && result.structuredContent.kind === spec.kind) S.data = result.structuredContent;
+    render();
+    schedule();
+  }
+  function schedule() {
+    if (S.timer) { clearTimeout(S.timer); S.timer = null; }
+    if (S.torn || !spec.poll || !S.data) return;
+    var p = spec.poll(S.data);
+    if (!p) return;
+    S.timer = setTimeout(function () {
+      S.timer = null;
+      if (!S.visible) { schedule(); return; }
+      call(p.tool, p.args).then(function (r) { if (r && r.structuredContent && r.structuredContent.kind === spec.kind) take(r); else schedule(); })
+        .catch(function () { schedule(); });
+    }, p.every || 2000);
+  }
+  document.addEventListener('visibilitychange', function () { S.visible = !document.hidden; });
+  window.addEventListener('resize', size);
+  window.addEventListener('message', function (ev) {
+    if (ev.source !== window.parent) return;
+    var m = ev.data; if (!m || m.jsonrpc !== '2.0') return;
+    if (m.id !== undefined && m.id !== null && !m.method) {
+      var p = pending[m.id]; if (!p) return; delete pending[m.id];
+      if (m.error) p.reject(m.error); else p.resolve(m.result);
+      return;
+    }
+    if (m.method === 'ui/notifications/tool-input') { if (!S.result) render(); }
+    else if (m.method === 'ui/notifications/tool-result') take(m.params);
+    else if (m.method === 'ui/notifications/tool-cancelled') { if (!S.result) { S.result = { isError: true, content: [{ type: 'text', text: 'Cancelled.' }] }; render(); } }
+    else if (m.method === 'ui/notifications/host-context-changed') { for (var k in m.params || {}) ctx[k] = m.params[k]; theme(m.params); render(); }
+    else if (m.method === 'ui/resource-teardown') { S.torn = true; if (S.timer) clearTimeout(S.timer); if (m.id !== undefined) post({ jsonrpc: '2.0', id: m.id, result: {} }); }
+    else if (m.method === 'ping' && m.id !== undefined) post({ jsonrpc: '2.0', id: m.id, result: {} });
+  });
+
+  return {
+    el: el, add: add, btn: btn, pill: pill, top: top, img: img, open: open, call: call, tell: tell, ago: ago, dur: dur,
+    size: size, render: render, take: take, fullscreenButton: fullscreenButton, textOf: textOf,
+    ctx: function () { return ctx; },
+    state: S,
+    /** spec: { kind, label, render(data, result) -> element, poll(data) -> { tool, args, every } | null } */
+    start: function (s) {
+      spec = s;
+      rpc('ui/initialize', {
+        protocolVersion: '2026-01-26',
+        appInfo: { name: 'homie-studio-' + s.kind + '-card', version: '1' },
+        appCapabilities: { availableDisplayModes: s.fullscreen ? ['inline', 'fullscreen'] : ['inline'] },
+      }).then(function (res) {
+        caps = (res && res.hostCapabilities) || {}; ctx = (res && res.hostContext) || {};
+        theme(ctx); note('ui/notifications/initialized', {}); render();
+      }).catch(function () { note('ui/notifications/initialized', {}); render(); });
+      void caps;
+    },
+  };
+})();

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 });
+})();