@homie-rocks/studio 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -17,9 +17,48 @@ To bring a studio up to date, tell Claude: "Upgrade my studio to the newest Homi
 `npx -y @homie-rocks/studio@latest upgrade`, which shows what's new since the version your studio pins (from this
 file) and what the upgrade would change, and changes nothing until you agree.
 
+## [0.21.0] - 2026-10-02
+
+**Plugin 0.22.0** · [#31](https://github.com/homie-rocks/homie/pull/31)
+
+The Homie mod for Claude Code: your studio, its rooms and a real seat in a live game beside the chat, with a look
+before protected files, deploys and spending, and keys kept out of what Claude reads.
+
+### Added
+
+- Plugin: the Homie mod (Claude Code 2.1.287 or later). Inside a studio, a one-row band above the prompt shows the
+  studio, the game, the build step, ▶ Play and how many people are playing now. Outside a studio it adds nothing.
+- Plugin: the Studio pane (`/studio`) opens by itself when a build starts, on a wide enough terminal. **Build** has the
+  live Plan, Build, Checks, Deploy feed and the latest check frame, or a live Watch of a room of the game being built.
+  **Rooms** lists who is playing and the AI players, with Watch and Join links; Announce, Mute and Kick go through
+  the office, and Mute and Kick are only ever asked for, so you still confirm them with one tap. **Games** has
+  launch states and the remix switch; **Stats** and **Codex** link to the rest. **Lab** shows each game's last Game
+  Lab check (New's phases beside Today's, whether the replays match) and the lab's link while it runs.
+- Plugin: the Arcade pane (`/arcade`). Take a real seat in a public room of a Homie game (Homie Arcade's, or your
+  studio's own) and play it in the pane with w/a/s/d or the arrow keys while Claude works. It runs in one headless
+  Chrome on your computer at the lowest priority, about 8 frames a second in a terminal, pauses while the pane is
+  hidden and stops when you leave.
+- Plugin: a Parts pane for the `parallel` skill: each part, its last step, and the merge waiting for all of them.
+- Plugin: instant commands that answer without a Claude turn: `/play`, `/watch [room]`, `/rooms`, `/build`, `/codex`,
+  `/deploy-status`, `/perf-numbers`, `/parts`, `/arcade`. They print links or open a pane; nothing opens a browser.
+- Plugin: guards. An edit to a file matched by studio.json `"protect"` (globs, such as `"games/*/game.json"`) shows
+  the diff and waits for Proceed or Cancel. So does a deploy (where it goes, what it creates, the commits and files
+  since the last one, the checks) and a paid fal or ElevenLabs run that would pass studio.json `"budget"`.
+- Plugin: Cloudflare tokens, provider keys, agent passes, office keys and one-time owner links are taken out of
+  command output before Claude reads it.
+- Plugin: setup status, check, playtest and deploy results are drawn as checklists and rows, with the live link.
+- `homie-studio office mute <game> <room> <seat | name> [--minutes 10] [--off]`, asked for like `office kick`.
+- A build's latest check frame is also kept as a small picture beside its progress feed, for the mod to draw.
+
+### Upgrade notes
+
+- Every part of the mod has its own switch (`/config`, or `pluginConfigs` in settings.json). Codex installs the plugin
+  as before; it does not run plugin hooks, so there it is the skills and tools you had.
+- `homie-studio upgrade --apply` adds `office mute` and the `protect` and `budget` lines to AGENTS.md.
+
 ## [0.20.0] - 2026-10-02
 
-**Plugin 0.21.0** · [#30](https://github.com/homie-rocks/homie/pull/30)
+**Plugin 0.21.0** · [#30](https://github.com/homie-rocks/homie/pull/30) · [release-2026-10-02-studio-0.20.0](https://github.com/homie-rocks/homie/releases/tag/release-2026-10-02-studio-0.20.0)
 
 A Game Lab: tune how one move of your game feels (a jump, a hit, a dash), your new version beside your last commit,
 frame by frame.

package/bin/homie-studio.mjs

@@ -94,8 +94,9 @@
  *   homie-studio office invite <game> [--label "<who>"] [--uses 1|<n>|any] [--count 1] [--days <n>] [--server <id>]
  *   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]
- *                                         (kick, close and launch are ASKED for: the owner confirms each with one
+ *                                         (kick, mute, close and launch are ASKED for: the owner confirms each with one
  *                                          tap in their own browser, from the link this prints)
  *   homie-studio office revoke            (every office key, play ticket and pending ask ends)
  *
@@ -192,7 +193,7 @@ import { listGames, newGame, readStudio, remixGame, requireStudio, siteUrl, star
 import { STUDIO_VERSION } from '../lib/version.mjs';
 import { statsKey, statsLink, statsRevoke, statsShare, statsShow } from '../lib/stats.mjs';
 import { playersOwner, playersShow } from '../lib/players.mjs';
-import { officeAnnounce, officeClose, officeInvite, officeKey, officeKick, officeLaunch, officeLines, officeLink, officeRevoke, officeShow } from '../lib/office.mjs';
+import { officeAnnounce, officeClose, officeInvite, officeKey, officeKick, officeLaunch, officeLines, officeLink, officeMute, officeRevoke, officeShow } from '../lib/office.mjs';
 import { agentsBrain, agentsBrainKey, agentsPass, agentsPasses, agentsRevoke, serversClose, serversLevel, serversLines, serversList, serversMember, serversNew, serversSet } from '../lib/servers.mjs';
 import { AgentSeat } from '../lib/agent-seat.mjs';
 import { Feed, currentFeed, currentId, flushProgress, publicFeed, readFeed, recordChange, startProgress } from '../lib/progress.mjs';
@@ -206,7 +207,7 @@ import { formatHandoff, handoff } from '../lib/handoff.mjs';
 
 const argv = process.argv.slice(2);
 const flags = new Map();
-const BOOL_FLAGS = ['revoke', 'json', 'yes', 'detach', 'no-install', 'plan', 'stop', 'share', 'apply', 'diff', 'template', 'ci', 'fresh', 'install', 'remove', 'replace', 'artifact', 'open', 'reopen', 'kids', 'remote-ai', 'dry-run', 'verify', 'maps', 'profile'];
+const BOOL_FLAGS = ['off', 'revoke', 'json', 'yes', 'detach', 'no-install', 'plan', 'stop', 'share', 'apply', 'diff', 'template', 'ci', 'fresh', 'install', 'remove', 'replace', 'artifact', 'open', 'reopen', 'kids', 'remote-ai', 'dry-run', 'verify', 'maps', 'profile'];
 const positional = [];
 for (let i = 0; i < argv.length; i++) {
   const a = argv[i];
@@ -411,6 +412,7 @@ function print(result) {
     case 'agents brain':
     case 'office launch':
     case 'office kick':
+    case 'office mute':
     case 'office close':
       lines.push(result.asked ? `Asked: ${result.what}` : result.message, ...(result.asked ? [`Owner's one-tap link (until the ask ends, 15 min): ${result.link}`, result.use] : []));
       break;
@@ -654,6 +656,7 @@ async function main() {
     if (sub === 'invite') return officeInvite(root, positional[2], { url, label: flags.get('label'), uses: flags.get('uses'), count: flags.get('count'), days: flags.get('days'), server: flags.get('server') });
     if (sub === 'launch') return officeLaunch(root, positional[2], positional[3], { url, remixable: flags.get('remixable'), max: flags.get('max') });
     if (sub === 'kick') return officeKick(root, positional[2], positional[3], positional.slice(4).join(' ') || undefined, { url, minutes: flags.get('minutes') });
+    if (sub === 'mute') return officeMute(root, positional[2], positional[3], positional.slice(4).join(' ') || undefined, { url, minutes: flags.get('minutes'), off: flags.has('off') });
     if (sub === 'close') return officeClose(root, positional[2], positional[3], { url, minutes: flags.get('minutes'), reopen: flags.has('reopen') });
     if (sub === 'revoke') return officeRevoke(root, { url });
   }

package/lib/check.mjs

@@ -82,7 +82,9 @@ export async function check({ url, game, roundTimeoutMs = 150_000, rounds = 3, s
     try {
       const vp = kinds[0].viewport;
       const b64 = await players[0].page.screenshot({ type: 'jpeg', quality: 62, clip: { x: 0, y: 0, width: vp.width, height: vp.height, scale: 480 / vp.width }, encoding: 'base64' });
-      report.preview({ url: play, image: `data:image/jpeg;base64,${b64}`, caption });
+      // And a small PNG, kept as raw pixels beside the feed for Claude Code's Homie mod (lib/thumb.mjs).
+      const png = await players[0].page.screenshot({ type: 'png', clip: { x: 0, y: 0, width: vp.width, height: vp.height, scale: 160 / vp.width } }).catch(() => null);
+      report.preview({ url: play, image: `data:image/jpeg;base64,${b64}`, caption, ...(png ? { png: Buffer.from(png) } : {}) });
     } catch { /* no picture this time */ }
   };
   for (const [id] of CHECK_STEPS) step(id, 'pending');

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

@@ -279,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.
@@ -337,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/template-history.json

@@ -887,6 +887,43 @@
      }
     }
    }
+  },
+  "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.20.0",
+  "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",

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.20.0';
+export const STUDIO_VERSION_TAG = '0.21.0';