@homie-rocks/studio 0.9.0 → 0.11.0

package/lib/check.mjs

@@ -16,16 +16,10 @@
  * the game's autopilot) is still that person. When no round counts, the result says which seat was missing from
  * each finished round and whether that browser lost its connection, instead of only "no round finished".
  */
-import { existsSync, mkdirSync, mkdtempSync, rmSync } from 'node:fs';
+import { mkdirSync, mkdtempSync, rmSync } from 'node:fs';
 import { cpus, loadavg, tmpdir } from 'node:os';
 import { join } from 'node:path';
-
-const CHROMES = [
-  process.env.CHROME_PATH,
-  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
-  '/Applications/Chromium.app/Contents/MacOS/Chromium',
-  '/usr/bin/google-chrome', '/usr/bin/chromium', '/usr/bin/chromium-browser',
-].filter(Boolean);
+import { SOFTWARE_GL, chromeArgs, findChrome, measureFrames, noChrome } from './chrome.mjs';
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
@@ -63,8 +57,8 @@ export function judgeRounds(browsers, missed = new Map()) {
 
 export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, shots = null, userAgentTag = 'homie-studio-check', log = () => {}, report = null }) {
   if (!url || !game) throw new Error('usage: homie-studio check <game> --url <site url>');
-  const chrome = CHROMES.find((p) => existsSync(p));
-  if (!chrome) return { ok: false, command: 'check', why: 'no Chrome found (set CHROME_PATH)' };
+  const chrome = findChrome();
+  if (!chrome) return { ok: false, command: 'check', why: noChrome() };
   let puppeteer;
   try { puppeteer = (await import('puppeteer-core')).default; } catch { return { ok: false, command: 'check', why: 'puppeteer-core is not installed (it comes with @homie-rocks/studio; run npm install)' }; }
   const base = String(url).replace(/\/+$/, '');
@@ -101,7 +95,7 @@ export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, s
       profiles.push(profile);
       const browser = await puppeteer.launch({
         executablePath: chrome, headless: true, userDataDir: profile, timeout: LAUNCH_TIMEOUT_MS, protocolTimeout: 180_000,
-        args: ['--use-angle=metal', '--enable-gpu-rasterization', '--ignore-gpu-blocklist', '--autoplay-policy=no-user-gesture-required', '--no-first-run', '--no-default-browser-check'],
+        args: [...chromeArgs(), '--autoplay-policy=no-user-gesture-required', '--no-first-run', '--no-default-browser-check'],
       });
       browsers.push(browser);
       const page = await browser.newPage();
@@ -157,6 +151,12 @@ export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, s
     if (shots) for (const [i, p] of players.entries()) await p.page.screenshot({ path: join(shots, `${kinds[i].name}-playing.png`) }).catch(() => {});
     await sleep(1500);
     await picture('Playing: computer and phone in one room');
+    // How fast each browser draws the game while it plays (reported, never judged: a VM without a GPU draws
+    // with SwiftShader, which is not a person's frame rate).
+    const frames = await Promise.all(players.map((p) => measureFrames(p.page)));
+    const software = frames.some((f) => f.renderer && SOFTWARE_GL.test(f.renderer));
+    const drawn = frames.map((f, i) => `${kinds[i].name} ${f.fps ?? '?'} fps`).join(', ');
+    log(`drawing: ${drawn}${frames[0]?.renderer ? ` (${frames[0].renderer})` : ''}`);
     // Only a round that finishes AFTER both browsers were seated, seen by both, with BOTH of them in its results,
     // counts: an idle room remembers its last round for a while, and that stale result proves nothing. A browser is
     // in a round when a row carries a seat it held (a reconnect keeps its seat; a game may still mark an idle
@@ -202,7 +202,7 @@ export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, s
       return { ok: false, command: 'check', why, play, room: seated[0].room, seated, missed: misses, connection, load, totalMs: Date.now() - started };
     }
     const humans = hit.people;
-    step('round', humans >= 2 ? 'pass' : 'fail', { ms: Math.max(...hit.overMs), note: `round ${hit.n}: ${humans} people, ${hit.results.length - humans} bots${missed.size ? ` (after ${missed.size} round(s) without both)` : ''}` });
+    step('round', humans >= 2 ? 'pass' : 'fail', { ms: Math.max(...hit.overMs), note: `round ${hit.n}: ${humans} people, ${hit.results.length - humans} bot${hit.results.length - humans === 1 ? '' : 's'}${missed.size ? ` (after ${missed.size} round(s) without both)` : ''}; ${drawn}${software ? ' (software GL: not measurable here)' : ''}` });
     await picture(`Round ${hit.n} finished with both; the next one is on`);
     return {
       ok: sameRoom && humans >= 2,
@@ -213,6 +213,8 @@ export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, s
       round: { n: hit.n, humans, bots: hit.results.length - humans, results: hit.results, overMs: hit.overMs },
       ...(missed.size ? { missed: [...missed.values()] } : {}),
       connection,
+      frames: frames.map((f, i) => ({ browser: kinds[i].name, fps: f.fps, renderer: f.renderer })),
+      ...(software ? { software: 'This machine has no GPU (WebGL is SwiftShader): seats, rooms and rounds are measured; the frame rate is not a person\'s.' } : {}),
       why: humans >= 2 ? undefined : `the round's results list ${humans} person(s); both browsers should be in it`,
       totalMs: Date.now() - started,
     };

package/lib/chrome.mjs

@@ -0,0 +1,126 @@
+/**
+ * WHICH CHROME THE CHECKS RUN, AND HOW (check, port check, look).
+ *
+ * On a Mac: that Mac's Chrome, on its GPU (`--use-angle=metal`). A software renderer runs a 3D game at a
+ * few frames a second and makes it look stuck, so a Mac never falls back to one.
+ *
+ * On Linux (a Claude Code cloud session, GitHub Actions, a container) there is usually no GPU and often no
+ * Chrome. `homie-studio chrome install` puts Chrome for Testing in this user's cache (from
+ * storage.googleapis.com, which a Claude Code cloud session's default "Trusted" network reaches), and the
+ * checks render WebGL with SwiftShader (`--enable-unsafe-swiftshader`, needed since Chrome 137), headless,
+ * without the setuid sandbox when they run as root (as a container does). What they measure there is seats,
+ * rooms and rounds on the room's own clock; a frame rate on SwiftShader is not a person's, so the checks
+ * report it with the renderer's name and never judge it.
+ */
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+/** Where `homie-studio chrome install` keeps Chrome for Testing (one copy per user, shared by every studio). */
+export const CHROME_CACHE = join(homedir(), '.cache', 'homie-studio', 'chrome');
+
+/** The newest build of `browser` in a @puppeteer/browsers or Playwright cache, or null. */
+function newestIn(dir, rel) {
+  if (!existsSync(dir)) return null;
+  const builds = readdirSync(dir, { withFileTypes: true }).filter((d) => d.isDirectory()).map((d) => d.name)
+    .sort((a, b) => b.localeCompare(a, 'en', { numeric: true }));
+  for (const b of builds) {
+    for (const r of rel) {
+      const path = join(dir, b, ...r);
+      if (existsSync(path)) return path;
+    }
+  }
+  return null;
+}
+
+/** Chrome for this machine: CHROME_PATH, an installed Chrome, or one in a known cache. */
+export function findChrome() {
+  const fixed = [
+    process.env.CHROME_PATH,
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium', '/usr/bin/chromium-browser', '/opt/google/chrome/chrome',
+  ].filter(Boolean);
+  const found = fixed.find((p) => existsSync(p));
+  if (found) return found;
+  const home = homedir();
+  return newestIn(join(CHROME_CACHE, 'chrome'), [['chrome-linux64', 'chrome'], ['chrome-mac-arm64', 'Google Chrome for Testing.app', 'Contents', 'MacOS', 'Google Chrome for Testing'], ['chrome-mac-x64', 'Google Chrome for Testing.app', 'Contents', 'MacOS', 'Google Chrome for Testing']])
+    ?? newestIn(join(home, '.cache', 'puppeteer', 'chrome'), [['chrome-linux64', 'chrome']])
+    ?? newestIn(join(home, '.cache', 'ms-playwright'), [['chrome-linux', 'chrome'], ['chrome-linux64', 'chrome']]);
+}
+
+/** Linux without a GPU renders with SwiftShader: say so with every number measured there. */
+export const SOFTWARE_GL = /swiftshader|llvmpipe|softpipe|software/i;
+
+/*
+ * Chrome's own sandbox needs unprivileged user namespaces. Running as root (a container), or on a Linux that
+ * restricts them with AppArmor (Ubuntu 23.10 and later: a system Chrome package brings its own AppArmor profile,
+ * Chrome for Testing does not), Chrome refuses to start without --no-sandbox. The checks only open the studio's
+ * own site, in throwaway profiles.
+ */
+function noSandboxNeeded() {
+  if (typeof process.getuid === 'function' && process.getuid() === 0) return true;
+  try { return readFileSync('/proc/sys/kernel/apparmor_restrict_unprivileged_userns', 'utf8').trim() === '1'; } catch { return false; }
+}
+
+/** The launch flags for this machine (the GPU on a Mac; SwiftShader, headless and container-safe on Linux). */
+export function chromeArgs() {
+  if (process.platform === 'darwin') return ['--use-angle=metal', '--enable-gpu-rasterization', '--ignore-gpu-blocklist'];
+  return [
+    '--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--ignore-gpu-blocklist', '--disable-dev-shm-usage',
+    ...(noSandboxNeeded() ? ['--no-sandbox'] : []),
+  ];
+}
+
+/** Why there is no Chrome, and the one command that fixes it on this machine. */
+export function noChrome() {
+  return process.platform === 'linux'
+    ? 'no Chrome on this machine: run `npx --no-install homie-studio chrome install` (Chrome for Testing into .cache/homie-studio in the home folder, from storage.googleapis.com), or set CHROME_PATH'
+    : 'no Chrome found: install Google Chrome, or set CHROME_PATH';
+}
+
+/**
+ * `homie-studio chrome install`: Chrome for Testing (stable) into CHROME_CACHE, through @puppeteer/browsers (it comes
+ * with puppeteer-core). About 170 MB, once per user; a second run finds it and downloads nothing.
+ */
+export async function installChrome({ log = () => {}, fresh = false } = {}) {
+  // `fresh`: Chrome for Testing even when the machine has a Chrome (what a machine without one would get).
+  const existing = fresh ? null : findChrome();
+  if (existing) return { ok: true, command: 'chrome install', chrome: existing, already: true };
+  let browsers;
+  try { browsers = await import('@puppeteer/browsers'); } catch { return { ok: false, command: 'chrome install', why: '@puppeteer/browsers is missing (it comes with @homie-rocks/studio: npm install)' }; }
+  const platform = browsers.detectBrowserPlatform();
+  if (!platform) return { ok: false, command: 'chrome install', why: `Chrome for Testing has no build for ${process.platform} ${process.arch}` };
+  const buildId = await browsers.resolveBuildId(browsers.Browser.CHROME, platform, 'stable');
+  log(`downloading Chrome for Testing ${buildId} (${platform}) into ${CHROME_CACHE}`);
+  const got = await browsers.install({ browser: browsers.Browser.CHROME, buildId, cacheDir: CHROME_CACHE });
+  return { ok: true, command: 'chrome install', chrome: got.executablePath, buildId, platform };
+}
+
+/**
+ * The frame rate a page's game frame draws at, over `ms` (requestAnimationFrame in the game's own frame, or the
+ * page's), and the renderer WebGL reports there. Never throws: { fps: null } when it cannot tell.
+ */
+export async function measureFrames(page, ms = 2000) {
+  const frame = page.frames().find((f) => /\/__game\//.test(f.url())) ?? page.mainFrame();
+  // Runs inside the frame (puppeteer sends the function itself, so a game's CSP never blocks it).
+  const probe = (span) => new Promise((resolve) => {
+    let renderer = null;
+    try {
+      const c = document.createElement('canvas');
+      const gl = c.getContext('webgl2') || c.getContext('webgl');
+      const d = gl && gl.getExtension('WEBGL_debug_renderer_info');
+      renderer = gl ? String(d ? gl.getParameter(d.UNMASKED_RENDERER_WEBGL) : gl.getParameter(gl.RENDERER)) : 'no WebGL';
+    } catch { renderer = null; }
+    let n = 0;
+    const t0 = performance.now();
+    const tick = () => { n++; if (performance.now() - t0 < span) requestAnimationFrame(tick); else resolve({ fps: Math.round((n * 1000) / (performance.now() - t0)), renderer }); };
+    requestAnimationFrame(tick);
+  });
+  try {
+    return await Promise.race([
+      frame.evaluate(probe, ms),
+      new Promise((r) => setTimeout(() => r({ fps: null, renderer: null }), ms + 5000)),
+    ]);
+  } catch { return { fps: null, renderer: null }; }
+}

package/lib/cloudflare.mjs

@@ -19,11 +19,11 @@
  * before anything happens and calls nothing.
  */
 import { spawnSync } from 'node:child_process';
-import { existsSync, writeFileSync } from 'node:fs';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { build } from './build.mjs';
 import { ensureLocalIgnored, ensureStatsMigration, wranglerConfig } from './scaffold.mjs';
-import { LOCAL_STATE, isWorkersDev, readLocal, readStudio, siteUrl, writeLocal, writeStudio } from './studio.mjs';
+import { LOCAL_STATE, configPath, isWorkersDev, layoutOf, readLocal, readStudio, siteUrl, workerDir, writeLocal, writeStudio } from './studio.mjs';
 
 const ANSI = /\u001b\[[0-9;]*m/g;
 
@@ -36,7 +36,7 @@ export function wranglerBin(root) {
 export function runner(root, env) {
   const bin = wranglerBin(root);
   if (!bin) throw new Error('Wrangler is not installed in this studio yet: run `npm install` in the studio folder first');
-  return (args, { cwd = join(root, 'site'), input } = {}) => {
+  return (args, { cwd = workerDir(root), input } = {}) => {
     const res = spawnSync(bin, args, {
       cwd, env: { ...process.env, ...env, WRANGLER_SEND_METRICS: 'false', CI: '1' }, encoding: 'utf8',
       input, maxBuffer: 64 * 1024 * 1024, timeout: 10 * 60_000,
@@ -129,7 +129,12 @@ export async function deploy(root, { log = () => {}, homie } = {}) {
     return { ok: false, command: 'deploy', needs: 'cloudflare-account', why: `This Cloudflare login can reach ${who.accounts.length} accounts; ask the person which one this studio uses and put its id in studio.json (cloudflare.accountId).`, accounts: who.accounts };
   }
   const w = runner(root, { CLOUDFLARE_ACCOUNT_ID: accountId });
-  const refuse = (why, out) => ({ ok: false, command: 'deploy', ...(explainCloudflare(out, accountId) ?? { why }) });
+  const refuse = (why, out) => {
+    const r = { ok: false, command: 'deploy', ...(explainCloudflare(out, accountId) ?? { why }) };
+    // What the account asked for (an email to verify…) stays on this computer, for `setup status`.
+    if (r.needs) { try { writeLocal(root, { needs: r.needs, needsAt: new Date().toISOString() }); } catch { /* not recorded */ } }
+    return r;
+  };
   // Record every resource the moment it exists, so a deploy cut short (an expired login, a network drop) resumes
   // instead of refusing its own database as "someone else's" next time.
   const remember = (key) => {
@@ -186,7 +191,7 @@ export async function deploy(root, { log = () => {}, homie } = {}) {
   const r2 = cf.r2 && created.has(`r2:${cf.r2}`) ? cf.r2 : null;
   if (!r2) step('no storage (R2): the studio needs none to run; `homie-studio storage add` adds it for large media');
 
-  writeFileSync(join(root, 'site', 'wrangler.jsonc'), wranglerConfig({ worker: cf.worker, name: studio.name, d1: cf.d1, d1Id: db.uuid, r2 }));
+  writeFileSync(configPath(root), wranglerConfig({ worker: cf.worker, name: studio.name, d1: cf.d1, d1Id: db.uuid, r2, layout: layoutOf(root) }));
   const added = ensureStatsMigration(root);
   if (added) step(`added ${added} (the studio's own stats: counts, never tracks)`);
   const migrate = w(['d1', 'migrations', 'apply', cf.d1, '--remote']);
@@ -201,7 +206,7 @@ export async function deploy(root, { log = () => {}, homie } = {}) {
   // .studio/local.json (git-ignored), and never in the committed studio.json. A custom domain stays in studio.json.
   if (ensureLocalIgnored(root)) step(`added .studio/ to .gitignore (${LOCAL_STATE} keeps this computer's own state)`);
   const workersDev = /https:\/\/[a-z0-9.-]+\.workers\.dev/i.exec(dep.out)?.[0] ?? readLocal(root).url ?? (isWorkersDev(cf.url) ? cf.url : null);
-  if (workersDev) writeLocal(root, { url: workersDev, deployedAt: new Date().toISOString() });
+  if (workersDev) writeLocal(root, { url: workersDev, deployedAt: new Date().toISOString(), needs: null, needsAt: null });
   const movedOut = isWorkersDev(cf.url);
   if (movedOut) {
     cf.url = null;
@@ -211,20 +216,14 @@ export async function deploy(root, { log = () => {}, homie } = {}) {
   const url = siteUrl(root);
   step(`deployed ${cf.worker} in ${Math.round((Date.now() - started) / 1000)} s`, { url, ...(workersDev && workersDev !== url ? { workersDev } : {}) });
 
-  // The homie.rocks directory claim, for the site's public address (its own domain when it has one): the site
-  // serves it, which proves this studio controls the site.
+  // The homie.rocks directory claim: the live site claims itself the first time its manifest is read (0.10.0), so
+  // reading it once now is all it takes; nothing is stored by hand.
   const directory = homie || studio.homie?.directory || 'https://homie.rocks';
   let claim = null;
   if (url) {
-    try {
-      const res = await fetch(`${directory.replace(/\/+$/, '')}/api/studio/claim?site=${encodeURIComponent(url)}`);
-      const body = await res.json();
-      if (res.ok && /^[a-f0-9]{16,128}$/.test(body.claim ?? '')) claim = body.claim;
-    } catch { /* the directory is optional for a live site */ }
-    if (claim) {
-      const put = w(['d1', 'execute', cf.d1, '--remote', '--command', `INSERT OR REPLACE INTO meta (key, value) VALUES ('homie_claim', '${claim}')`]);
-      step(put.code === 0 ? 'directory claim stored' : 'could not store the directory claim (publish will say so)');
-    }
+    claim = await warmClaim(url);
+    if (claim) step('the site claimed itself in the directory');
+    else step('the directory claim is not there yet (the site claims itself when the directory first reads it)');
   }
 
   // studio.json keeps what is safe to commit: names, ids, the custom domain; never the workers.dev address.
@@ -240,6 +239,81 @@ export async function deploy(root, { log = () => {}, homie } = {}) {
   };
 }
 
+/**
+ * Read the live site's manifest once, which makes a 0.10.0 site claim itself in its directory. Returns the claim it
+ * serves, or null (the directory did not answer, the site is not reachable yet, or it is a Preview). A fresh deploy
+ * can take a few seconds to answer everywhere, so it asks three times.
+ */
+export async function warmClaim(site, { tries = 3, wait = 2500 } = {}) {
+  if (process.env.HOMIE_STUDIO_WARM === '0') return null; // the toolkit's own tests: their live site is made up
+  for (let i = 0; i < tries; i++) {
+    try {
+      const res = await fetch(`${String(site).replace(/\/+$/, '')}/.well-known/homie-studio.json`, { headers: { accept: 'application/json', 'user-agent': 'homie-studio-deploy' }, signal: AbortSignal.timeout(15_000) });
+      if (res.ok) {
+        const body = await res.json();
+        if (/^[a-f0-9]{16,128}$/.test(body?.claim ?? '')) return body.claim;
+      }
+    } catch { /* not answering yet */ }
+    if (i < tries - 1) await new Promise((r) => setTimeout(r, wait));
+  }
+  return null;
+}
+
+/** The Worker's name and D1 database, as the studio's wrangler.jsonc says (Cloudflare's forms may have renamed them). */
+export function configNames(root) {
+  try {
+    const text = readFileSync(configPath(root), 'utf8');
+    const json = JSON.parse(text.replace(/^\s*\/\/.*$/gm, ''));
+    return { worker: json.name ?? null, d1: json.d1_databases?.[0]?.database_name ?? null, binding: json.d1_databases?.[0]?.binding ?? 'DB' };
+  } catch { return { worker: null, d1: null, binding: 'DB' }; }
+}
+
+/*
+ * `npm run deploy` IN WORKERS BUILDS (WORKERS_CI=1, or `deploy --ci`). Cloudflare's own CI has already run
+ * `npm run build`, and holds its own API token for this one account; the Worker and its database were made by the
+ * "Deploy to Cloudflare" flow or by an earlier deploy. So this only applies the D1 migrations (by binding name: the
+ * form may have renamed the database) and deploys. It creates nothing by hand and refuses nothing, and writes
+ * nothing back (a CI checkout is thrown away). On the very first deploy the database may not exist yet: Wrangler
+ * creates the one the binding names while it deploys, and the migrations run right after.
+ */
+export async function ciDeploy(root, { log = () => {} } = {}) {
+  const w = runner(root, {});
+  const names = configNames(root);
+  const steps = [];
+  const step = (what) => { steps.push({ what }); log(what); };
+  const refuse = (why, out) => ({ ok: false, command: 'deploy', ci: true, ...(explainCloudflare(out) ?? { why }), steps });
+  if (!existsSync(join(root, 'site', 'dist', 'games.json'))) return { ok: false, command: 'deploy', ci: true, why: 'nothing is built: the build command is `npm run build` (homie-studio build), and it runs before this', steps };
+  if (ensureStatsMigration(root)) step('added the stats migration (the studio\'s own counters)');
+  const apply = () => w(['d1', 'migrations', 'apply', names.binding, '--remote']);
+  let migrate = apply();
+  const first = migrate.code !== 0 && /not found|could(?:n't| not) find|does not exist|no database|database_id/i.test(migrate.out);
+  if (migrate.code !== 0 && !first) return refuse(`D1 migrations failed: ${migrate.out.trim().split('\n').slice(-4).join(' ')}`, migrate.out);
+  if (!first) step('D1 migrations applied');
+  const started = Date.now();
+  const dep = w(['deploy']);
+  if (dep.code !== 0) return refuse(`wrangler deploy failed: ${dep.out.trim().split('\n').slice(-6).join(' ')}`, dep.out);
+  step(`deployed ${names.worker ?? 'the Worker'} in ${Math.round((Date.now() - started) / 1000)} s`);
+  if (first) {
+    migrate = apply();
+    if (migrate.code !== 0) return refuse(`D1 migrations failed after the first deploy: ${migrate.out.trim().split('\n').slice(-4).join(' ')}`, migrate.out);
+    step('D1 migrations applied (the database was created with this first deploy)');
+  }
+  // The live address, from what Wrangler printed (a custom domain in studio.json wins).
+  const workersDev = /https:\/\/[a-z0-9.-]+\.workers\.dev/i.exec(dep.out)?.[0] ?? null;
+  let url = null;
+  try { url = siteUrl(root) ?? workersDev; } catch { url = workersDev; }
+  const claim = url ? await warmClaim(url) : null;
+  step(claim ? 'the site claimed itself in the directory' : 'no directory claim yet (the site claims itself when the directory first reads it)');
+  let games = [];
+  try { games = JSON.parse(readFileSync(join(root, 'site', 'dist', 'games.json'), 'utf8')).games.map((g) => g.id); } catch { games = []; }
+  return {
+    ok: true, command: 'deploy', ci: true, url, worker: names.worker, d1: names.d1, r2: null, steps, announced: [],
+    commit: process.env.WORKERS_CI_COMMIT_SHA ?? null, branch: process.env.WORKERS_CI_BRANCH ?? null,
+    games: games.map((id) => ({ id, page: url ? `${url}/${id}/` : null, play: url ? `${url}/${id}/play` : null })), songs: [], videos: [],
+    claim: Boolean(claim),
+  };
+}
+
 /*
  * `homie-studio storage add` — the studio's own storage for large media (songs,
  * videos, big art), as an R2 bucket on its account, bound as MEDIA and served at
@@ -283,7 +357,7 @@ export async function storageAdd(root, { log = () => {} } = {}) {
   const next = { ...readStudio(root), cloudflare: { ...readStudio(root).cloudflare, accountId, r2: bucket, created: [...created].sort() } };
   writeStudio(root, next);
   if (next.cloudflare.d1Id) {
-    writeFileSync(join(root, 'site', 'wrangler.jsonc'), wranglerConfig({ worker: cf.worker, name: studio.name, d1: cf.d1, d1Id: next.cloudflare.d1Id, r2: bucket }));
+    writeFileSync(configPath(root), wranglerConfig({ worker: cf.worker, name: studio.name, d1: cf.d1, d1Id: next.cloudflare.d1Id, r2: bucket, layout: layoutOf(root) }));
   }
   log(`created R2 ${bucket}`);
   return { ok: true, command: 'storage add', bucket, account: accountId, next: ['npm run deploy   (binds the bucket as MEDIA; the site serves it at /media/<key>)', 'npx --no-install homie-studio media put <file>'] };