@homie-rocks/studio 0.19.2 → 0.21.0

package/lib/office.mjs

@@ -10,6 +10,7 @@
  *   homie-studio office invite <game> [--label "<who>"] [--uses 1|<n>|any] [--count 1] [--days <n>]
  *   homie-studio office launch <game> private|invite|public [--remixable on|off] [--max <n>|game]
  *   homie-studio office kick <game> <room> <seat number | name> [--minutes 10]
+ *   homie-studio office mute <game> <room> <seat number | name> [--minutes 10] [--off]
  *   homie-studio office close <game> <room> [--minutes 10] [--reopen]
  *   homie-studio office revoke                         every office key ends; every play ticket and pending ask too
  *
@@ -121,21 +122,42 @@ export async function officeLaunch(root, game, state, { url, remixable, max } =
   return askedFor(root, url, r, 'office launch');
 }
 
+/** One player of one live room, by seat number (from 1) or name: { room, client } or { message }. */
+async function playerIn(call, game, room, who) {
+  const office = await call('/_studio/api/office');
+  const g = (office.games ?? []).find((x) => x.id === game);
+  const rm = (g?.rooms ?? []).find((x) => x.room === room || x.label.toLowerCase() === String(room).toLowerCase());
+  if (!rm) return { message: `nobody is in ${room} of ${game} now (homie-studio office lists the rooms)` };
+  const seat = /^\d+$/.test(String(who)) ? Number(who) - 1 : null;
+  const c = rm.clients.find((x) => (seat !== null && x.seat === seat) || String(x.name).toLowerCase() === String(who).toLowerCase());
+  if (!c) return { message: `no "${who}" in ${rm.label} (seats are numbered from 1)` };
+  return { room: rm, client: c };
+}
+
 export async function officeKick(root, game, room, who, { url, minutes } = {}) {
   if (!GAME.test(String(game ?? '')) || !room || who === undefined) return { ok: false, command: 'office kick', why: 'usage: homie-studio office kick <game> <room> <seat number | name> [--minutes 10]' };
   const r = await withKey(root, url, async (call) => {
-    const office = await call('/_studio/api/office');
-    const g = (office.games ?? []).find((x) => x.id === game);
-    const rm = (g?.rooms ?? []).find((x) => x.room === room || x.label.toLowerCase() === String(room).toLowerCase());
-    if (!rm) return { ok: false, message: `nobody is in ${room} of ${game} now (homie-studio office lists the rooms)` };
-    const seat = /^\d+$/.test(String(who)) ? Number(who) - 1 : null;
-    const c = rm.clients.find((x) => (seat !== null && x.seat === seat) || String(x.name).toLowerCase() === String(who).toLowerCase());
-    if (!c) return { ok: false, message: `no "${who}" in ${rm.label} (seats are numbered from 1)` };
-    return call('/_studio/api/kick', { game, room: rm.room, id: c.id, minutes: Number(minutes) || 10 });
+    const p = await playerIn(call, game, room, who);
+    if (!p.client) return { ok: false, message: p.message };
+    return call('/_studio/api/kick', { game, room: p.room.room, id: p.client.id, minutes: Number(minutes) || 10 });
   });
   return askedFor(root, url, r, 'office kick');
 }
 
+/**
+ * `office mute <game> <room> <seat | name> [--minutes 10] [--off]`: the player's chat and emotes reach nobody for a
+ * while (`--off` lifts it). Like a kick, it is only ASKED for: the owner confirms with one tap.
+ */
+export async function officeMute(root, game, room, who, { url, minutes, off = false } = {}) {
+  if (!GAME.test(String(game ?? '')) || !room || who === undefined) return { ok: false, command: 'office mute', why: 'usage: homie-studio office mute <game> <room> <seat number | name> [--minutes 10] [--off]' };
+  const r = await withKey(root, url, async (call) => {
+    const p = await playerIn(call, game, room, who);
+    if (!p.client) return { ok: false, message: p.message };
+    return call('/_studio/api/mute', { game, room: p.room.room, id: p.client.id, minutes: Number(minutes) || 10, ...(off ? { off: true } : {}) });
+  });
+  return askedFor(root, url, r, 'office mute');
+}
+
 export async function officeClose(root, game, room, { url, minutes, reopen } = {}) {
   if (!GAME.test(String(game ?? '')) || !room) return { ok: false, command: 'office close', why: 'usage: homie-studio office close <game> <room> [--minutes 10] [--reopen]' };
   const r = await withKey(root, url, (call) => call('/_studio/api/close', { game, room, minutes: Number(minutes) || 10, reopen: Boolean(reopen) }));

package/lib/port-check.mjs

@@ -409,7 +409,9 @@ export async function portCheck({ url, game, root, only = null, shots = null, lo
     await T(h.page.screenshot({ path: join(out, `${name}.png`) }), 15_000);
     if (report?.preview && h.vp) {
       const b64 = await T(h.page.screenshot({ type: 'jpeg', quality: 60, clip: { x: 0, y: 0, width: h.vp.width, height: h.vp.height, scale: Math.min(1, 480 / h.vp.width) }, encoding: 'base64' }), 15_000, null);
-      if (b64) { try { report.preview({ url: `${base}/${game}/play`, image: `data:image/jpeg;base64,${b64}`, caption: PORT_CHECK_LABELS[name.replace(/-(?:before|after|playing|over|\d+)$/, '')] ?? name }); } catch { /* too big: no picture */ } }
+      // And a small PNG, kept as raw pixels beside the feed for Claude Code's Homie mod (lib/thumb.mjs).
+      const png = b64 ? await T(h.page.screenshot({ type: 'png', clip: { x: 0, y: 0, width: h.vp.width, height: h.vp.height, scale: Math.min(1, 160 / h.vp.width) } }), 15_000, null) : null;
+      if (b64) { try { report.preview({ url: `${base}/${game}/play`, image: `data:image/jpeg;base64,${b64}`, caption: PORT_CHECK_LABELS[name.replace(/-(?:before|after|playing|over|\d+)$/, '')] ?? name, ...(png ? { png: Buffer.from(png) } : {}) }); } catch { /* too big: no picture */ } }
     }
   };
   const privateRoom = (tag) => `chk-${stamp.slice(-6)}-${tag}`.slice(0, 32);

package/lib/progress.mjs

@@ -56,6 +56,7 @@ import { createHash, randomBytes } from 'node:crypto';
 import { chmodSync, existsSync, mkdirSync, readFileSync, renameSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import { extname, join } from 'node:path';
 import { refreshCodexFile } from './codex.mjs';
+import { dropThumbs, rgbThumb, thumbName } from './thumb.mjs';
 import { readStudio, siteUrl } from './studio.mjs';
 import { request, whyRefused } from './net.mjs';
 
@@ -307,8 +308,22 @@ export class Feed {
   /** Forget the checks of one stage (a stage run again starts its checks afresh). */
   resetChecks(stage) { return this.change((doc) => { doc.checks = doc.checks.filter((c) => c.stage !== stage); }); }
 
-  preview({ url, image, caption } = {}) {
+  /**
+   * The build's preview: the address to play it, a small picture (the feed's JPEG, for the Claude app's card) and its
+   * caption. `png`, a PNG screenshot's bytes (or a .png `image` file), is also kept small as raw RGB beside the feed
+   * (lib/thumb.mjs), for Claude Code's Homie mod, which has no image decoder; it never goes into the feed or the
+   * shared copy.
+   */
+  preview({ url, image, caption, png } = {}) {
     const picture = image ? imageData(image) : undefined;
+    const raw = png ?? (typeof image === 'string' && /\.png$/i.test(image) && existsSync(image) ? readFileSync(image) : null);
+    if (raw) {
+      try {
+        const t = rgbThumb(raw, 160);
+        dropThumbs(dir(this.root), this.id);
+        writeFileSync(join(dir(this.root), thumbName(this.id, t.w, t.h)), t.rgb);
+      } catch { /* no raw preview this time: the feed's picture stands */ }
+    }
     return this.change((doc) => {
       doc.preview = {
         url: url ? String(url).slice(0, 300) : doc.preview?.url ?? null,

package/lib/scaffold.mjs

@@ -104,7 +104,7 @@ directory lists its games; homie.rocks does not host them.
 
 | Path | What it is |
 | --- | --- |
-| \`games/<id>/\` | One game: \`game.json\` (id, name, blurb, players, round length), \`index.html\`, \`src/main.ts\`. |
+| \`games/<id>/\` | One game: \`game.json\` (id, name, blurb, players, round length), \`index.html\`, \`src/main.ts\`; and, when it has them, \`tunables.json\` (the numbers that shape how it feels: the Game Lab's sliders, kept values written back) and \`lab.json\` (the Game Lab's takes). |
 | \`music/\`, \`videos/\` | Songs, scores, loops; trailers, music videos, cutscenes. \`manifest.json\` lists each one (\`node_modules/@homie-rocks/studio/media/MEDIA.md\`); a published entry gets a page at \`/music/<slug>/\` or \`/videos/<slug>/\`. Without storage the site serves each file itself (up to 25 MiB). Once the studio has storage (see below), its big media (over 1 MiB, or left out of git) lives in its own R2: every deploy uploads it, checks it by SHA-256 and serves it from R2 at the same address. Large files never go into git. The Homie plugin's \`music\` and \`video\` skills make them. |
 | \`posts/\` | The studio's news and drops: one markdown file each (\`posts/2026-09-30-we-are-live.md\`: \`title:\`, \`date:\`, \`summary:\`, and \`game:\` / \`song:\` / \`video:\` to link one). They are the site's Posts, with Atom and JSON feeds. |
 | \`site/\` | The studio's site: its look (\`theme.json\`), and anything of its own that wins over the generated pages (\`site/README.md\`); the Worker (\`src/worker.mjs\`) and its D1 migrations. |
@@ -140,6 +140,12 @@ studio's pinned copy, never a registry lookup of the bare name.
   per frame, time to playable, what it downloads, the heap, netplay messages a second (files under \`.perf/\`). The
   Homie plugin's \`perf\` skill runs the whole loop: one change at a time, kept only when it is better beyond the noise
   and \`check\` still passes, and a report in \`perf/<id>/\`.
+- \`npx --no-install homie-studio lab <id>\` — the Game Lab, on this computer (run it in the background; stop it with
+  \`lab --stop\`): one take of a move (\`games/<id>/lab.json\`) played in the working tree beside the last commit, on
+  one clock, slowed down or a frame at a time, with the phases, graphs and tunables the game reports
+  (\`@homie-rocks/studio/lab\`). \`lab check <id>\` plays it headless and writes the numbers and a contact sheet. The
+  Homie plugin's \`lab\` skill runs the whole loop: instrument and commit first, change how it feels, keep what the
+  person likes.
 - \`npx --no-install homie-studio deploy --plan\` — says what deploy will create on Cloudflare and what it
   costs, and changes nothing. Tell the person before the first deploy.
 - \`npm run deploy\` — the site on this studio's Cloudflare: one Worker, one D1 database, two
@@ -273,7 +279,7 @@ studio's pinned copy, never a registry lookup of the bare name.
 - The owner is recognised in their own games: signed in, their play page has a small Owner button (tap a player:
   Mute, Kick; Announce). Nobody else's page has it.
 - **From the AI:** \`npx --no-install homie-studio office\` lists who is playing now; \`office announce "<text>"\` and
-  \`office invite <id>\` happen at once; \`office kick\`, \`office close\` and \`office launch\` only ASK, and print a
+  \`office invite <id>\` happen at once; \`office kick\`, \`office mute\`, \`office close\` and \`office launch\` only ASK, and print a
   one-time link that opens the ask in the owner's own browser, where one tap does it. An ask is not done until the
   owner tapped. \`office key\` gives a key for the Homie MCP's owner tools (\`studio_office\`, \`room_announce\`,
   \`room_kick\`, \`room_close\`, \`game_launch_state\`), which ask the same way; never paste a key anywhere else.
@@ -331,6 +337,11 @@ chat's card follows the work from then on) and, for a studio still being set up,
   studio.json as \`cloudflare.domain\`.
 - A game's room size is its netplay manifest's \`maxPlayers\` (game.json \`netplay\`, or netplay.json), up to 32.
 - Nothing in this studio needs \`~/.homie\` or a Homie box.
+- Optional in studio.json: \`"protect"\` (globs of files the owner wants to look at before any change, such as
+  \`"games/*/game.json"\`) and \`"budget"\` (\`{ "usd": <n>, "credits": <n> }\`: the most the studio's media jobs spend
+  in all). In Claude Code, the Homie plugin's mod holds an edit to a protected file, a deploy, and a paid call past
+  the budget until the person says Proceed, and takes keys out of command output. When it refuses a call, say what
+  you meant to do and why; do not retry it unless the person asks.
 
 ## Beta
 

package/lib/studio.mjs

@@ -103,6 +103,18 @@ export function starters() {
   });
 }
 
+/**
+ * A game's Game Lab takes (lab.json) seed its saves by the game's id (`homie-saves.local.<id>`, saves/saves.ts): a copy
+ * under a new id renames them, so a take's saved hero is still found.
+ */
+function renameTakeSaves(dir, from, id) {
+  const file = join(dir, 'lab.json');
+  if (!existsSync(file) || from === id) return;
+  const text = readFileSync(file, 'utf8');
+  const next = text.split(`"homie-saves.local.${from}"`).join(`"homie-saves.local.${id}"`);
+  if (next !== text) writeFileSync(file, next);
+}
+
 /** `homie-studio game new <id> --from <starter> --name "<Name>"`: a starter copied in as this studio's own game. */
 export function newGame(root, id, { from = 'gem-rush', name } = {}) {
   if (!GAME_ID.test(String(id ?? '')) || RESERVED_IDS.has(id)) throw new Error(`a game id is lowercase letters, digits and hyphens, up to 40, and not one of ${[...RESERVED_IDS].join(', ')} (got ${JSON.stringify(id)})`);
@@ -121,6 +133,7 @@ export function newGame(root, id, { from = 'gem-rush', name } = {}) {
   writeFileSync(join(dest, 'game.json'), `${JSON.stringify(meta, null, 2)}\n`);
   const main = join(dest, meta.entry ?? 'src/main.ts');
   if (existsSync(main)) writeFileSync(main, readFileSync(main, 'utf8').replace(new RegExp(`game: '${from}'`, 'g'), `game: '${id}'`));
+  renameTakeSaves(dest, from, id);
   const html = join(dest, 'index.html');
   if (name && existsSync(html)) writeFileSync(html, readFileSync(html, 'utf8').replace(/<title>[^<]*<\/title>/, `<title>${String(name).replace(/[<&]/g, '')}</title>`));
   return { ok: true, command: 'game new', id, from, dir: dest, files: readdirSync(dest, { recursive: true }).map(String) };
@@ -174,5 +187,6 @@ export async function remixGame(root, source, id, { name } = {}) {
   writeFileSync(join(dest, 'game.json'), `${JSON.stringify(meta, null, 2)}\n`);
   const main = join(dest, meta.entry ?? 'src/main.ts');
   if (existsSync(main) && from) writeFileSync(main, readFileSync(main, 'utf8').replace(new RegExp(`game: '${from}'`, 'g'), `game: '${id}'`));
+  if (from) renameTakeSaves(dest, from, id);
   return { ok: true, command: 'game remix', id, from: String(url), credit: meta.remixOf.credit, page: meta.remixOf.page, license, files: wrote };
 }

package/lib/template-history.json

@@ -850,6 +850,80 @@
      }
     }
    }
+  },
+  "0.20.0": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "43a4c5bf07db36f9",
+     "## Commands (all through the pinned CLI in node_modules)": "d80ec56e4b4fc4c6",
+     "## The site": "ab922bb6bde23293",
+     "## Making games": "a8a893eeada33bf5",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "f0566f07cff04113",
+     "## Servers and AI seats": "0a332b07e22d3fce",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "969318425c99f5a5",
+     "## Beta": "9d02638207a26e73"
+    }
+   },
+   "named": {
+    "Homie Arcade": {
+     "sections": {
+      "AGENTS.md": {
+       "## Commands (all through the pinned CLI in node_modules)": "b35df2c19cd4b534"
+      }
+     }
+    }
+   }
+  },
+  "0.21.0": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "43a4c5bf07db36f9",
+     "## Commands (all through the pinned CLI in node_modules)": "d80ec56e4b4fc4c6",
+     "## The site": "ab922bb6bde23293",
+     "## Making games": "a8a893eeada33bf5",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Running live games (the back office)": "4aa5f513a7cd2c3b",
+     "## Servers and AI seats": "0a332b07e22d3fce",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "7e8458adc1b81ece",
+     "## Beta": "9d02638207a26e73"
+    }
+   },
+   "named": {
+    "Homie Arcade": {
+     "sections": {
+      "AGENTS.md": {
+       "## Commands (all through the pinned CLI in node_modules)": "b35df2c19cd4b534"
+      }
+     }
+    }
+   }
   }
  }
 }

package/lib/thumb.mjs

@@ -0,0 +1,82 @@
+/**
+ * A build's preview as raw pixels, for Claude Code's Homie mod (the plugin's hooks/homie.mjs): a mod's code has no
+ * image decoder, so the latest check frame is also kept, small, as plain RGB beside the feed:
+ *
+ *   .studio/progress/<build>.preview.<width>x<height>.rgb    width * height * 3 bytes, rows top to bottom
+ *
+ * The mod draws it as coloured terminal cells (or hands the file to the terminal as a picture). The feed's own JPEG
+ * stays what the Claude app's card shows. Plain Node: zlib inflates the PNG Chrome wrote; nothing else is needed.
+ */
+import { readdirSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { inflateSync } from 'node:zlib';
+
+/** A PNG (8-bit RGB or RGBA, not interlaced: what Chrome writes) as { w, h, rgba }. */
+export function decodePng(buf) {
+  if (!Buffer.isBuffer(buf) || buf.length < 33 || buf.readUInt32BE(0) !== 0x89504e47) throw new Error('not a PNG');
+  let at = 8; let w = 0; let h = 0; let type = 0; const idat = [];
+  while (at + 8 <= buf.length) {
+    const len = buf.readUInt32BE(at);
+    const kind = buf.toString('latin1', at + 4, at + 8);
+    const data = buf.subarray(at + 8, at + 8 + len);
+    if (kind === 'IHDR') {
+      w = data.readUInt32BE(0); h = data.readUInt32BE(4); type = data[9];
+      if (data[8] !== 8 || data[12] !== 0) throw new Error('only 8-bit, non-interlaced PNGs');
+    } else if (kind === 'IDAT') idat.push(data);
+    else if (kind === 'IEND') break;
+    at += 12 + len;
+  }
+  const bpp = type === 6 ? 4 : type === 2 ? 3 : 0;
+  if (!bpp || !w || !h) throw new Error('only RGB or RGBA PNGs');
+  const raw = inflateSync(Buffer.concat(idat));
+  const stride = w * bpp;
+  const px = Buffer.alloc(stride * h);
+  for (let y = 0; y < h; y++) {
+    const f = raw[y * (stride + 1)];
+    const line = raw.subarray(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+    const o = y * stride;
+    for (let x = 0; x < stride; x++) {
+      const a = x >= bpp ? px[o + x - bpp] : 0;
+      const b = y ? px[o - stride + x] : 0;
+      const c = x >= bpp && y ? px[o - stride + x - bpp] : 0;
+      let v = line[x];
+      if (f === 1) v += a;
+      else if (f === 2) v += b;
+      else if (f === 3) v += (a + b) >> 1;
+      else if (f === 4) { const p = a + b - c; const pa = Math.abs(p - a); const pb = Math.abs(p - b); const pc = Math.abs(p - c); v += pa <= pb && pa <= pc ? a : pb <= pc ? b : c; }
+      px[o + x] = v & 255;
+    }
+  }
+  const rgba = Buffer.alloc(w * h * 4);
+  for (let i = 0, j = 0; i < w * h; i++, j += bpp) { rgba[i * 4] = px[j]; rgba[i * 4 + 1] = px[j + 1]; rgba[i * 4 + 2] = px[j + 2]; rgba[i * 4 + 3] = bpp === 4 ? px[j + 3] : 255; }
+  return { w, h, rgba };
+}
+
+/** A PNG scaled down (each pixel the average of the ones it covers) to at most `width` pixels wide, as plain RGB. */
+export function rgbThumb(png, width = 160) {
+  const img = decodePng(png);
+  const w = Math.max(1, Math.min(width, img.w));
+  const h = Math.max(1, Math.round((img.h * w) / img.w));
+  const rgb = Buffer.alloc(w * h * 3);
+  for (let y = 0; y < h; y++) {
+    const y0 = Math.floor((y * img.h) / h); const y1 = Math.max(y0 + 1, Math.floor(((y + 1) * img.h) / h));
+    for (let x = 0; x < w; x++) {
+      const x0 = Math.floor((x * img.w) / w); const x1 = Math.max(x0 + 1, Math.floor(((x + 1) * img.w) / w));
+      let r = 0; let g = 0; let b = 0; let n = 0;
+      for (let yy = y0; yy < y1; yy++) for (let xx = x0; xx < x1; xx++) { const i = (yy * img.w + xx) * 4; r += img.rgba[i]; g += img.rgba[i + 1]; b += img.rgba[i + 2]; n++; }
+      const o = (y * w + x) * 3;
+      rgb[o] = Math.round(r / n); rgb[o + 1] = Math.round(g / n); rgb[o + 2] = Math.round(b / n);
+    }
+  }
+  return { w, h, rgb };
+}
+
+/** The file name of a build's raw preview. */
+export const thumbName = (build, w, h) => `${build}.preview.${w}x${h}.rgb`;
+
+/** Remove a build's earlier raw previews (one is kept: the newest). */
+export function dropThumbs(dir, build) {
+  let names = [];
+  try { names = readdirSync(dir); } catch { return; }
+  for (const n of names) if (n.startsWith(`${build}.preview.`) && n.endsWith('.rgb')) rmSync(join(dir, n), { force: true });
+}

package/mcp/ui/lab.js

@@ -0,0 +1,67 @@
+/* The Game Lab card: one take of a game's mechanic, New (the working tree) beside Today (the last commit). A still of
+ * both at the take's busiest moment, the phases of each as a timing strip, whether replays match, the game's
+ * JavaScript per frame, and Open (the lab runs on this computer). */
+(function () {
+  var C = Card;
+  var COLOURS = ['#a374ff', '#17c3b2', '#f5a524', '#ff6fb5', '#8bd346', '#4dd2ff', '#ffd84a', '#e58cff'];
+  function strip(rows, frames) {
+    // rows: { label, phases: [{ name, from, to }] }: blocks at their frames on the take's own axis; colours by name, shared.
+    var names = [];
+    rows.forEach(function (r) { (r.phases || []).forEach(function (p) { if (names.indexOf(p.name) < 0) names.push(p.name); }); });
+    var box = C.el('div');
+    box.style.cssText = 'display:grid;gap:6px;margin:12px 0 4px';
+    rows.forEach(function (r) {
+      var line = C.el('div');
+      line.style.cssText = 'display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center';
+      var label = C.el('span', '', r.label);
+      label.style.cssText = 'font:700 11px/1 var(--f-mono);letter-spacing:.08em;color:' + r.colour;
+      var bar = C.el('div');
+      bar.style.cssText = 'position:relative;height:20px;border-radius:4px;overflow:hidden;background:var(--c-bg2)';
+      (r.phases || []).forEach(function (p) {
+        var b = C.el('span', '', p.name);
+        var colour = COLOURS[names.indexOf(p.name) % COLOURS.length];
+        b.title = p.name + ': frames ' + p.from + ' to ' + p.to;
+        b.style.cssText = 'position:absolute;top:0;bottom:0;left:' + ((p.from - 1) / frames) * 100 + '%;width:calc(' + ((p.to - p.from + 1) / frames) * 100 + '% - 1px);background:' + colour + ';color:#0b0d14;font:700 10px/20px var(--f-mono);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip';
+        bar.appendChild(b);
+      });
+      if (!(r.phases || []).length) { var e = C.el('span', 'fine', r.empty || 'no phases'); e.style.cssText = 'margin:0;line-height:20px;padding:0 8px'; bar.appendChild(e); }
+      line.appendChild(label); line.appendChild(bar);
+      box.appendChild(line);
+    });
+    return box;
+  }
+  function render(sc) {
+    var card = C.el('main', 'card');
+    var det = sc.deterministic || {};
+    var same = det.new === null && (det.today === null || det.today === undefined);
+    var head = sc.running ? C.pill('Checking', 'live', true) : same ? C.pill('Replays match', 'ok') : C.pill('Replays differ', 'bad');
+    C.add(card, C.top('Game Lab', C.add(C.el('div', 'actions'), head, C.fullscreenButton())), C.el('h1', '', (sc.name || sc.game) + (sc.take ? ' · ' + sc.take : '')),
+      C.el('p', 'sub', sc.running ? 'The lab is open on this computer; its first check is still running.' : 'New (the working tree) beside Today' + (sc.today ? ' (' + sc.today + ')' : '') + ' · ' + sc.frames + ' frames at ' + sc.fps + ' fps'));
+    if (sc.still) {
+      var box = C.el('div', 'preview');
+      var pic = C.img(sc.still, 'New beside Today at the take\'s busiest moment');
+      if (pic) { pic.style.maxHeight = 'none'; pic.style.objectFit = 'contain'; box.appendChild(pic); }
+      card.appendChild(box);
+    }
+    if (sc.timeline && sc.frames) {
+      card.appendChild(strip([
+        { label: 'NEW', colour: '#e08a12', phases: sc.timeline.new },
+        { label: 'TODAY', colour: '#2f8fd8', phases: sc.timeline.today || [], empty: sc.todayNote || 'no phases' },
+      ], sc.frames));
+      card.appendChild(C.el('p', 'fine', 'Phases on the take\'s ' + sc.frames + ' frames (' + (sc.frames / sc.fps).toFixed(2) + ' s).'));
+    }
+    if (sc.cost && sc.cost.new) {
+      card.appendChild(C.el('p', 'fine', 'The game\'s JavaScript a frame, on average: New ' + sc.cost.new.mean + ' ms (p95 ' + sc.cost.new.p95 + ')' + (sc.cost.today ? ', Today ' + sc.cost.today.mean + ' ms (p95 ' + sc.cost.today.p95 + ')' : '') + '.'));
+    }
+    if (!same && !sc.running) card.appendChild(C.el('p', 'note bad', 'The same build played the take differently' + (det.new !== null ? ' (New from frame ' + det.new + ')' : '') + (det.today ? ' (Today from frame ' + det.today + ')' : '') + ': something in the game reads a clock or dice the lab does not drive.'));
+    (sc.errors || []).slice(0, 3).forEach(function (e) { card.appendChild(C.el('p', 'note bad', e)); });
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', 'Runs on this computer'));
+    var acts = C.el('div', 'actions');
+    if (sc.url) acts.appendChild(C.btn('Open the lab', '', function () { C.open(sc.url); C.tell('lab-open', 'The person opened the Game Lab for ' + (sc.name || sc.game) + ' from the card.'); }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    return card;
+  }
+  C.start({ kind: 'lab', label: 'Game Lab', fullscreen: true, render: render, poll: null });
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.19.2",
+  "version": "0.21.0",
   "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, big songs and videos in the studio's own R2 once it has storage (uploaded, checked by SHA-256, served at the same addresses), deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",
@@ -34,6 +34,10 @@
       "types": "./agents/agents.ts",
       "default": "./agents/agents.ts"
     },
+    "./lab": {
+      "types": "./lab/lab.ts",
+      "default": "./lab/lab.ts"
+    },
     "./worker": "./worker/index.mjs",
     "./package.json": "./package.json"
   },
@@ -46,6 +50,7 @@
     "mcp/",
     "saves/",
     "agents/",
+    "lab/",
     "starters/",
     "media/",
     "site/",

package/port/index.ts

@@ -18,6 +18,7 @@
  *   jitter, engages, standoff
  *                the dial for the rest of a bot's decisions (port/skill.ts)
  *   createSaves  player accounts and cloud saves (a character that lasts days, on every device; saves/SAVES.md)
+ *   lab          the Game Lab's calls (@homie-rocks/studio/lab): tracks, phases, tunables, overlays, views
  * and everything from @homie-rocks/studio/netplay.
  */
 import './early';
@@ -35,4 +36,5 @@ export { createRoom, type Room, type RoomOptions, type BodyBase, type RoomSnap,
 export { createHud, type HudOptions } from './hud';
 export { BotBrain, brainOf, seek, flee, wanderer, nearest, rubberBand, protectedNewcomer, type V2 } from './bots';
 export { jitter, engages, standoff } from './skill';
+export { lab, type TunableSpec, type TunableFile, type Tuned } from '../lab/lab';
 export { createSaves, SAVES_VERSION, type Saves, type SavesOptions, type Player, type SaveEntry, type SetResult, type Memorial, type SavesStatus, type Conflict } from '../saves/saves';

package/starters/ember-vale/lab.json

@@ -0,0 +1,22 @@
+{
+  "v": 1,
+  "default": "strike",
+  "takes": {
+    "strike": {
+      "note": "Three strikes on a big training slime",
+      "seconds": 2.6,
+      "seed": 11,
+      "stage": "dummy",
+      "device": "desk",
+      "fps": 60,
+      "view": "close",
+      "track": "slime squash",
+      "storage": { "homie-saves.local.ember-vale": { "saves": { "hero": { "v": { "v": 1, "name": "Wren", "level": 1, "xp": 0, "gold": 0, "hardcore": false, "kills": 0, "deaths": 0, "born": 1767225600000 }, "ver": 1, "at": 1767225600000 } }, "stats": {}, "fallen": [] } },
+      "inputs": [
+        { "at": 0.4, "key": "Space", "hold": 0.08 },
+        { "at": 1.0, "key": "Space", "hold": 0.08 },
+        { "at": 1.6, "key": "Space", "hold": 0.08 }
+      ]
+    }
+  }
+}