@homie-rocks/studio 0.5.0 → 0.6.0

package/worker/index.mjs

@@ -18,6 +18,12 @@
  *   /music/, /music/<slug>/    the studio's songs, scores and loops (music/manifest.json)
  *   /videos/, /videos/<slug>/  its trailers, music videos and cutscenes (videos/manifest.json)
  *   /media/<key>               the studio's large media, from R2 (once `storage add` bound it), with byte ranges
+ *   /api/stats                 the studio's numbers, for its owner only (a read key, or the owner's page session)
+ *   /_studio/stats             the owner's private stats page (one-time sign-in link from `homie-studio stats link`)
+ *
+ * It counts, and never tracks (worker/stats.mjs): a page opened, a Play press, a room opened, a round finished,
+ * the peak of players, a song or video started, and which site sent the visitor (a host name), as daily counters
+ * in the studio's own D1. No cookie on a visitor, nothing sent anywhere.
  *
  * Bindings (site/wrangler.jsonc, written by `homie-studio new`): ASSETS (the
  * built site), TABLE and LOBBY (SQLite-backed Durable Objects, free plan
@@ -25,16 +31,24 @@
  * after `homie-studio storage add` (R2 needs a payment method on the account),
  * MEDIA. Everything else runs on Cloudflare's free Workers plan.
  *
- * The relay is the netplay contract's own room.mjs (NETPLAY.md v1 rev 2), run
+ * The relay is the netplay contract's own room.mjs (NETPLAY.md v1 rev 3), run
  * unchanged inside the Table, so a game that plays in `homie-studio dev`
  * plays the same way here.
  */
 import { NetRoom } from './room.mjs';
 import { gamePage, homePage, mediaIndexPage, notFoundPage, playPage, songPage, videoPage } from './pages.mjs';
 import { qrSvg } from './qr.mjs';
+import { SEAT_MAX, perAddress, seatsOf } from './seats.mjs';
+import { count, countVisit, counter, isQa, onlyOf, ownerAllowed, playedThisWeek, rangeOf, readStats, today } from './stats.mjs';
+import { ownerRoutes } from './stats-page.mjs';
+
+export { SEAT_MAX } from './seats.mjs';
+/** For a studio's own wrapper Worker: count its own pages the way the template counts its pages. */
+export { countVisit } from './stats.mjs';
 
 const GAME_ID = /^[a-z0-9][a-z0-9-]{0,39}$/;
 const ROOM_ID = /^[A-Za-z0-9_-]{1,32}$/;
+
 const json = (body, status = 200, extra = {}) => new Response(`${JSON.stringify(body)}\n`, {
   status, headers: { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store', ...extra },
 });
@@ -172,14 +186,62 @@ async function gameAsset(env, url, game, rest) {
   return out;
 }
 
+/**
+ * A studio that shares its "played this week" (studio.json `stats.share`) asks the directory to re-read its
+ * manifest once a day per Worker instance: the directory reads the number from the studio's own site, so nothing
+ * it is told can be forged by anyone else. Nothing else is ever sent.
+ */
+let sharedDay = null;
+function shareDaily(cat, url, ctx) {
+  if (!cat.studio?.stats?.share || url.protocol !== 'https:' || sharedDay === today()) return;
+  sharedDay = today();
+  const directory = String(cat.studio.directory ?? 'https://homie.rocks').replace(/\/+$/, '');
+  const ping = fetch(`${directory}/api/studio/played`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ site: url.origin }) }).catch(() => {});
+  if (ctx?.waitUntil) ctx.waitUntil(ping);
+}
+
+/** A song's or video's player started (the page's one beacon, sent once per page): one counter. */
+async function mediaBeat(request, env, ctx, url) {
+  const site = request.headers.get('sec-fetch-site');
+  const origin = request.headers.get('origin');
+  if (origin && origin !== 'null' ? origin !== url.origin : site !== 'same-origin') return new Response(null, { status: 403 });
+  if (Number(request.headers.get('content-length') ?? 0) > 256) return new Response(null, { status: 413 });
+  let body = null;
+  try { body = JSON.parse(await request.text()); } catch { return new Response(null, { status: 400 }); }
+  const kind = body?.k === 'song' || body?.k === 'video' ? body.k : null;
+  const slug = typeof body?.s === 'string' && MEDIA_SLUG.test(body.s) ? body.s : null;
+  if (!kind || !slug) return new Response(null, { status: 400 });
+  const cat = await catalogue(env, url.origin);
+  const known = (kind === 'song' ? cat.songs : cat.videos) ?? [];
+  if (!known.some((e) => e.slug === slug)) return new Response(null, { status: 404 });
+  if (!isQa(request)) await count(env, ctx, { metric: kind, subject: slug }); // house QA is never counted
+  return new Response(null, { status: 204, headers: { 'cache-control': 'no-store' } });
+}
+
 export default {
-  async fetch(request, env) {
+  async fetch(request, env, ctx) {
     const url = new URL(request.url);
     const path = url.pathname;
     const parts = path.split('/').filter(Boolean);
 
+    if (path.startsWith('/_studio/')) return ownerRoutes(request, env, url, { catalogueOf: () => catalogue(env, url.origin) });
+    if (path === '/api/stats/beat' && request.method === 'POST') return mediaBeat(request, env, ctx, url);
+    if (path === '/api/stats') {
+      if (request.method !== 'GET') return json({ ok: false, error: 'method' }, 405);
+      if ((await ownerAllowed(request, env, { kinds: ['read'] })) !== 'read') {
+        return json({ ok: false, error: 'owner-only', message: 'The studio\'s numbers are for its owner. In the studio folder: `npx --no-install homie-studio stats` prints them; `npx --no-install homie-studio stats key` gives a read key for the Homie MCP tool studio_stats.' }, 401, { 'www-authenticate': 'Bearer' });
+      }
+      const cat = await catalogue(env, url.origin);
+      const studios = new Set(String(url.searchParams.get('studios') ?? '').split(',').filter((h) => /^[a-z0-9.-]{3,80}$/.test(h)).slice(0, 500));
+      try {
+        return json({ ok: true, site: url.origin, ...(await readStats(env, cat, { range: rangeOf(url.searchParams), only: onlyOf(url.searchParams), studios })) });
+      } catch (error) {
+        return json({ ok: false, error: 'no-stats', message: `The counters are not in this studio's D1 yet: \`npm run deploy\` applies migration 0002_studio_stats.sql. (${String(error?.message ?? error).slice(0, 120)})` }, 503);
+      }
+    }
     if (path === '/.well-known/homie-studio.json') {
       const cat = await catalogue(env, url.origin);
+      const played = cat.studio?.stats?.share ? await playedThisWeek(env) : null;
       return json({
         v: 1,
         kind: 'homie-studio',
@@ -194,6 +256,8 @@ export default {
         })),
         songs: (cat.songs ?? []).map((e) => mediaRow(e, url.origin, 'music')),
         videos: (cat.videos ?? []).map((e) => mediaRow(e, url.origin, 'videos')),
+        // Shared only when studio.json says `stats.share`: two numbers for the whole studio, for the hub.
+        ...(played ? { played } : {}),
       }, 200, { 'access-control-allow-origin': '*' });
     }
     if (path === '/api/games') {
@@ -210,13 +274,14 @@ export default {
       const kind = parts[0];
       if (parts.length === 1 && !path.endsWith('/')) return Response.redirect(`${url.origin}/${kind}/`, 301);
       const cat = await catalogue(env, url.origin);
-      if (parts.length === 1) return mediaIndexPage(cat, kind);
+      if (parts.length === 1) { await countVisit(request, env, ctx, kind); return mediaIndexPage(cat, kind); }
       const slug = parts[1];
       const list = (kind === 'music' ? cat.songs : cat.videos) ?? [];
       const entry = MEDIA_SLUG.test(slug) ? list.find((e) => e.slug === slug) : null;
       if (parts.length === 2) {
         if (!entry) return notFoundPage(`No ${kind === 'music' ? 'song' : 'video'} called "${slug}" here.`);
         if (!path.endsWith('/')) return Response.redirect(`${url.origin}/${kind}/${slug}/`, 301);
+        await countVisit(request, env, ctx, `${kind}/${slug}`);
         return kind === 'music' ? songPage(cat, entry, url.origin) : videoPage(cat, entry, url.origin);
       }
       if (parts.some((p) => p === '..')) return notFoundPage('Nothing here.');
@@ -226,6 +291,8 @@ export default {
     }
     if (path === '/' || path === '/index.html') {
       const cat = await catalogue(env, url.origin);
+      await countVisit(request, env, ctx, 'home');
+      shareDaily(cat, url, ctx);
       return homePage(cat, await liveCounts(env, cat.games ?? []));
     }
 
@@ -236,13 +303,14 @@ export default {
       if (!meta) return env.ASSETS.fetch(request);
       if (parts.length === 1 && !path.endsWith('/')) return Response.redirect(`${url.origin}/${game}/`, 301);
       const sub = parts.slice(1).join('/');
-      if (sub === '') return gamePage(cat, meta, (await liveCounts(env, [meta]))[game] ?? 0);
+      if (sub === '') { await countVisit(request, env, ctx, game); shareDaily(cat, url, ctx); return gamePage(cat, meta, (await liveCounts(env, [meta]))[game] ?? 0); }
       if (sub === 'tv' || (sub === 'play' && url.searchParams.get('screen') === '1')) {
+        await countVisit(request, env, ctx, game, 'screen');
         // The big screen picks its room now, so the QR it shows puts every phone in that same room.
         let room = ROOM_ID.test(url.searchParams.get('room') || '') ? url.searchParams.get('room') : null;
         if (!room) {
           try {
-            const max = Math.max(1, Math.min(16, Number(meta.players?.max) || 8));
+            const max = seatsOf(meta);
             room = (await (await env.LOBBY.get(env.LOBBY.idFromName(game)).fetch(`https://lobby/join?max=${max}`, { method: 'POST' })).json()).room ?? null;
           } catch { room = null; }
         }
@@ -251,9 +319,9 @@ export default {
         try { qr = qrSvg(joinUrl, { title: `Join ${meta.name ?? game}` }); } catch { /* too long for a QR: the address shows as text */ }
         return playPage(cat, meta, { screen: true, joinUrl, qr, room });
       }
-      if (sub === 'play') return playPage(cat, meta);
+      if (sub === 'play') { await countVisit(request, env, ctx, game, 'play'); shareDaily(cat, url, ctx); return playPage(cat, meta); }
       if (sub === 'api/lobby') {
-        const max = Math.max(1, Math.min(16, Number(meta.players?.max) || 8));
+        const max = seatsOf(meta);
         return env.LOBBY.get(env.LOBBY.idFromName(game)).fetch(`https://lobby/join?max=${max}`, { method: 'POST' });
       }
       if (sub === '__net' || sub === '__watch') {
@@ -261,7 +329,7 @@ export default {
         const room = url.searchParams.get('room') || 'main';
         if (!ROOM_ID.test(room)) return new Response('bad room', { status: 400 });
         const stub = env.TABLE.get(env.TABLE.idFromName(`${game}/${room}`));
-        const max = Math.max(1, Math.min(16, Number(meta.players?.max) || 8));
+        const max = seatsOf(meta);
         const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}`;
         return stub.fetch(new Request(target, request));
       }
@@ -294,6 +362,8 @@ export class Table {
     this.code = null;
     this.recorded = 0;
     this.lastReport = -1;
+    /** This room was counted as opened (worker/stats.mjs `room`); cleared when its seats are all forgotten. */
+    this.openCounted = false;
     ctx.blockConcurrencyWhile(async () => {
       this.saved = (await ctx.storage.get('net')) ?? null;
       this.recorded = (await ctx.storage.get('recorded')) ?? 0;
@@ -308,6 +378,7 @@ export class Table {
     this.room = new NetRoom({
       code,
       maxPlayers: max,
+      perIp: perAddress(max),
       store: {
         save: (o) => { storage.put('net', o).catch(() => {}); },
         clear: () => { storage.delete('net').catch(() => {}); },
@@ -321,12 +392,14 @@ export class Table {
     const url = new URL(request.url);
     const game = url.searchParams.get('game');
     const code = url.searchParams.get('room');
-    const max = Math.max(1, Math.min(16, Number(url.searchParams.get('max')) || 8));
+    const max = Math.max(1, Math.min(SEAT_MAX, Math.floor(Number(url.searchParams.get('max'))) || 8));
     const room = this.roomFor(game, code, max);
     const [client, server] = Object.values(new WebSocketPair());
     server.accept();
     const conn = {
       ip: request.headers.get('cf-connecting-ip'),
+      // House QA and `homie-studio check` mark their browsers; their rooms, rounds and peaks are not the studio's numbers.
+      qa: isQa(request),
       send: (text) => { try { server.send(text); } catch { /* closed */ } },
       close: (c, r) => { try { server.close(c, r); } catch { /* closed */ } },
       buffered: () => 0,
@@ -337,7 +410,17 @@ export class Table {
       server.addEventListener('error', () => w.onClose());
     } else {
       const h = room.attach(conn);
-      server.addEventListener('message', (e) => { h.onMessage(typeof e.data === 'string' ? e.data : ''); });
+      // A room is OPENED when the first seat is taken in an empty one (a room restored after a deploy keeps its
+      // seats, so it is not counted twice). One counter write per room.
+      const fresh = room.seats.size === 0;
+      server.addEventListener('message', (e) => {
+        h.onMessage(typeof e.data === 'string' ? e.data : '');
+        if (fresh && !this.openCounted && room.seats.size > 0) {
+          this.openCounted = true;
+          if (conn.qa) return;
+          this.ctx.waitUntil(count(this.env, null, { metric: 'room', subject: this.game ?? '', source: /^pub-\d+$/.test(this.code ?? '') ? 'public' : 'named' }));
+        }
+      });
       server.addEventListener('close', () => { h.onClose(); this.report(); });
       server.addEventListener('error', () => { h.onClose(); this.report(); });
     }
@@ -354,6 +437,7 @@ export class Table {
       room.tick();
       n += 1;
       if (n % 4 === 0) { room.tellWatchers(); this.report(); this.recordRound(); }
+      if (room.seats.size === 0 && room.clients.size === 0) this.openCounted = false;
       if (room.clients.size === 0 && room.watchers.size === 0) { clearInterval(this.timer); this.timer = null; this.report(); }
     }, 250);
   }
@@ -363,10 +447,16 @@ export class Table {
     const room = this.room;
     if (!room || !this.game) return;
     const players = room.facts().counts.players;
-    if (players === this.lastReport) return;
+    // People for the stats: seated sockets that are not house QA (players is what the Lobby matches strangers by).
+    let people = 0;
+    for (const c of room.clients.values()) if (c.helloed && c.seat !== null && !c.conn?.qa) people += 1;
+    // On a change, and once a minute while anybody is here (so the Lobby's "playing now" forgets a room that died).
+    if (players === this.lastReport && people === this.lastPeople && (!players || Date.now() - (this.lastReportAt ?? 0) < 60_000)) return;
     this.lastReport = players;
+    this.lastPeople = people;
+    this.lastReportAt = Date.now();
     const lobby = this.env.LOBBY.get(this.env.LOBBY.idFromName(this.game));
-    this.ctx.waitUntil(lobby.fetch('https://lobby/report', { method: 'POST', body: JSON.stringify({ room: this.code, players }) }).catch(() => {}));
+    this.ctx.waitUntil(lobby.fetch(`https://lobby/report?game=${encodeURIComponent(this.game)}`, { method: 'POST', body: JSON.stringify({ room: this.code, players, people }) }).catch(() => {}));
   }
 
   /** A round the host called over becomes one D1 row (once per round number). */
@@ -375,11 +465,16 @@ export class Table {
     if (!r || r.phase !== 'over' || !Number.isFinite(r.n) || r.n <= this.recorded || !this.env.DB) return;
     this.recorded = r.n;
     this.ctx.storage.put('recorded', r.n).catch(() => {});
-    const results = Array.isArray(r.results) ? r.results.slice(0, 16) : [];
+    const results = Array.isArray(r.results) ? r.results.slice(0, SEAT_MAX * 2) : [];
     const humans = results.filter((row) => row && !row.bot).length;
-    this.ctx.waitUntil(this.env.DB.prepare(
-      'INSERT OR IGNORE INTO rounds (game, room, n, humans, bots, results, at) VALUES (?, ?, ?, ?, ?, ?, ?)',
-    ).bind(this.game, this.code, r.n, humans, results.length - humans, JSON.stringify(results), new Date().toISOString()).run().catch(() => {}));
+    // A round played only by house QA (every seated socket is marked) is kept in `rounds`, not in the stats.
+    const qaOnly = [...this.room.clients.values()].filter((c) => c.helloed && c.seat !== null).every((c) => c.conn?.qa);
+    const db = this.env.DB;
+    const insert = db.prepare('INSERT OR IGNORE INTO rounds (game, room, n, humans, bots, results, at) VALUES (?, ?, ?, ?, ?, ?, ?)')
+      .bind(this.game, this.code, r.n, humans, results.length - humans, JSON.stringify(results), new Date().toISOString());
+    // The round and the people in it, on the studio's daily counters (worker/stats.mjs). One batch, per round.
+    const counters = qaOnly ? [] : [counter(this.env, { metric: 'round', subject: this.game ?? '', source: humans ? 'people' : 'bots' }), humans ? counter(this.env, { metric: 'humans', subject: this.game ?? '', n: humans }) : null].filter(Boolean);
+    this.ctx.waitUntil(db.batch([insert, ...counters]).catch(() => insert.run().catch(() => {})));
   }
 }
 
@@ -390,16 +485,40 @@ export class Table {
  * in the same room.
  */
 export class Lobby {
-  constructor(ctx) {
+  constructor(ctx, env) {
     this.ctx = ctx;
+    this.env = env;
     this.rooms = new Map();
     this.next = 1;
+    /** Every room of this game that reported players (public and named), for "playing now" and the day's peak. */
+    this.live = new Map();
+    this.peak = { day: null, players: 0, room: 0 };
     ctx.blockConcurrencyWhile(async () => {
       const saved = await ctx.storage.get('lobby');
       if (saved) { this.next = saved.next ?? 1; for (const r of saved.rooms ?? []) this.rooms.set(r.name, { ...r, pending: [] }); }
     });
   }
 
+  /**
+   * The day's peak for this game, all rooms together and in one room: a counter write only when a new high is
+   * reached (in memory per day; after an eviction the stored max still wins), so at most a few a day.
+   */
+  notePeak(room, players, game) {
+    const now = Date.now();
+    if (players > 0) this.live.set(room, { players, at: now }); else this.live.delete(room);
+    for (const [name, r] of this.live) if (now - r.at > 180_000) this.live.delete(name); // a room that stopped reporting
+    const day = today();
+    if (this.peak.day !== day) this.peak = { day, players: 0, room: 0 };
+    let all = 0;
+    for (const r of this.live.values()) all += r.players;
+    const writes = [];
+    if (all > this.peak.players) { this.peak.players = all; writes.push(counter(this.env, { metric: 'peak', subject: game ?? this.game ?? '', n: all, day })); }
+    if (players > this.peak.room) { this.peak.room = players; writes.push(counter(this.env, { metric: 'peak-room', subject: game ?? this.game ?? '', n: players, day })); }
+    if (game) this.game = game;
+    const list = writes.filter(Boolean);
+    if (list.length) this.ctx.waitUntil(this.env.DB.batch(list).catch(() => {}));
+  }
+
   save() { this.ctx.storage.put('lobby', { next: this.next, rooms: [...this.rooms.values()].map(({ name, players, at }) => ({ name, players, at })) }).catch(() => {}); }
 
   prune(now) {
@@ -414,7 +533,7 @@ export class Lobby {
     const now = Date.now();
     this.prune(now);
     if (url.pathname === '/join') {
-      const max = Math.max(1, Math.min(16, Number(url.searchParams.get('max')) || 8));
+      const max = Math.max(1, Math.min(SEAT_MAX, Math.floor(Number(url.searchParams.get('max'))) || 8));
       let best = null;
       for (const r of this.rooms.values()) {
         const fill = r.players + r.pending.length;
@@ -434,18 +553,25 @@ export class Lobby {
     if (url.pathname === '/report' && request.method === 'POST') {
       const body = await request.json().catch(() => ({}));
       if (typeof body.room !== 'string' || !ROOM_ID.test(body.room)) return json({ ok: false }, 400);
+      this.notePeak(body.room, Math.max(0, Math.floor(Number(body.people ?? body.players) || 0)), url.searchParams.get('game'));
       // Only public rooms the Lobby made are matched with strangers; a named room (?room=) stays private.
       if (!this.rooms.has(body.room) && !/^pub-\d+$/.test(body.room)) return json({ ok: true, private: true });
       const r = this.rooms.get(body.room) ?? { name: body.room, players: 0, at: now, pending: [] };
       const grew = Math.max(0, (Number(body.players) || 0) - r.players);
+      const changed = !this.rooms.has(r.name) || r.players !== Math.max(0, Number(body.players) || 0);
       r.pending.splice(0, grew);
       r.players = Math.max(0, Number(body.players) || 0);
       r.at = now;
       this.rooms.set(r.name, r);
-      this.save();
+      if (changed) this.save(); // the minute's "still here" report writes nothing
       return json({ ok: true });
     }
     if (url.pathname === '/rooms') return json({ rooms: [...this.rooms.values()].map(({ name, players, at }) => ({ name, players, at })) });
+    if (url.pathname === '/now') {
+      let players = 0;
+      for (const [name, r] of this.live) { if (Date.now() - r.at > 180_000) this.live.delete(name); else players += r.players; }
+      return json({ players, rooms: this.live.size, peak: this.peak.day === today() ? { players: this.peak.players, room: this.peak.room } : { players: 0, room: 0 } });
+    }
     return json({ error: 'not found' }, 404);
   }
 }

package/worker/pages.mjs

@@ -126,6 +126,12 @@ function rightsLine(e) {
   return bits.length ? `<p class="rights">${bits.join(' ')}</p>` : '';
 }
 
+/**
+ * The page's one stats beacon: when its player first starts, one POST to /api/stats/beat (a counter, nothing about
+ * the listener). worker/stats.mjs says what is counted.
+ */
+const playedBeacon = (kind, slug) => `<script>(function(){var m=document.querySelector(${JSON.stringify(kind === 'song' ? 'audio' : 'video[data-main]')});if(!m||!navigator.sendBeacon)return;m.addEventListener('play',function(){try{navigator.sendBeacon('/api/stats/beat',${JSON.stringify(JSON.stringify({ k: kind, s: slug })).replace(/</g, '\\u003c')});}catch(e){}},{once:true});}());</script>`;
+
 const ogTags = (props) => Object.entries(props).filter(([, v]) => v).map(([k, v]) => `<meta property="${esc(k)}" content="${esc(v)}">`).join('');
 
 /** /music/<slug>/: the player, the facts, the words, the loops and stems another game may use. */
@@ -148,7 +154,7 @@ export function songPage(cat, e, origin = '') {
     ${e.lyrics ? `<h2 class="section">Words</h2><div class="lyrics">${esc(e.lyrics)}</div>` : ''}
     ${extras.length ? `<h2 class="section">Loops and stems</h2><ul class="files">${extras.map((f) => `<li><a href="${esc(f.url)}" download><b>${esc(f.name ?? (f.role === 'loop' ? 'Loop' : 'Stem'))}</b><span>${esc([f.role, f.bars ? `${f.bars} bars` : null, f.bytes ? `${Math.max(1, Math.round(f.bytes / 1024))} KB` : null].filter(Boolean).join(' · '))}</span></a></li>`).join('')}</ul>` : ''}
     ${rightsLine(e)}
-  </div>`, { extraHead: ogTags({ 'og:type': 'music.song', 'og:title': e.title, 'og:description': e.blurb, 'og:audio': abs(audio.url), 'og:image': abs(cover?.url) }) });
+  </div>${playedBeacon('song', e.slug)}`, { extraHead: ogTags({ 'og:type': 'music.song', 'og:title': e.title, 'og:description': e.blurb, 'og:audio': abs(audio.url), 'og:image': abs(cover?.url) }) });
 }
 
 /** /videos/<slug>/: the player (16:9, or the 9:16 cut on a portrait phone), captions, credits. */
@@ -173,7 +179,7 @@ export function videoPage(cat, e, origin = '') {
       ${game ? `<div class="row"><a class="btn" href="/${esc(game.id)}/play">Play ${esc(game.name)}</a>${vertical ? `<a class="btn ghost" href="${esc(vertical.url)}">Vertical cut</a>` : ''}</div>` : (vertical ? `<div class="row"><a class="btn ghost" href="${esc(vertical.url)}">Vertical cut</a></div>` : '')}
     </section>
     ${rightsLine(e)}
-  </div>${pick}`, { extraHead: ogTags({ 'og:type': 'video.other', 'og:title': e.title, 'og:description': e.blurb, 'og:video': abs(video.url), 'og:image': abs(poster?.url) }) });
+  </div>${pick}${playedBeacon('video', e.slug)}`, { extraHead: ogTags({ 'og:type': 'video.other', 'og:title': e.title, 'og:description': e.blurb, 'og:video': abs(video.url), 'og:image': abs(poster?.url) }) });
 }
 
 export function gamePage(cat, g, playing = 0) {

package/worker/room.mjs

@@ -23,10 +23,17 @@ export const NET_VERSION = 1;
 const PALETTE_SIZE = 12;
 const DEVICE_RANK = { desk: 0, tv: 1, phone: 2 };
 
-/** Size caps (bytes of the JSON text as received). */
+/** Size caps (bytes of the JSON text as received), for a room of up to 16 seats. */
 export const LIMITS = Object.freeze({
   hello: 2048, snap: 16384, in: 2048, ev: 4096, ckpt: 65536, state: 8192, round: 8192, roster: 4096, ping: 256, other: 512,
 });
+/**
+ * What grows with the seats (every body, every result, every slot): the checkpoint, round and roster caps double
+ * for a room of 17 to 32 (revision 3). Measured: a 32-seat courier game's checkpoint reached 56 KB of the 64 KB
+ * a 16-seat room allows. The snapshot cap does not grow: 32 bodies are about 1.5 KB.
+ */
+export const GROWS = Object.freeze(['ckpt', 'round', 'roster']);
+export const capOf = (t, seats) => (LIMITS[t] ?? LIMITS.other) * (GROWS.includes(t) && seats > 16 ? 2 : 1);
 /** Rate caps (messages per rolling second, per client). Over the cap a message is dropped, counted and reported. */
 export const RATES = Object.freeze({ snap: 30, in: 60, ev: 30, ckpt: 4, state: 64, round: 4, roster: 8, ping: 8, other: 8 });
 /** `ev` per second by the sender's role: a screen is a spectator, and the host is somebody's phone. */
@@ -169,7 +176,7 @@ export class NetRoom {
 
   allow(c, t, bytes) {
     // A spectator screen has little to say: its events are capped at 512 B (16 screens x 2/s x 512 B at most reach the host).
-    const cap = t === 'ev' && c.seat === null && c.id !== this.hostId ? 512 : (LIMITS[t] ?? LIMITS.other);
+    const cap = t === 'ev' && c.seat === null && c.id !== this.hostId ? 512 : capOf(t, this.seatCap);
     if (bytes > cap) { this.stats.oversize += 1; this.error(c, 'too-large', `${t} is ${bytes} B; the cap is ${cap} B`); return false; }
     const now = this.now();
     const limit = t === 'ev' ? EV_RATES[this.roleOf(c)] : (RATES[t] ?? RATES.other);

package/worker/seats.mjs

@@ -0,0 +1,20 @@
+/**
+ * Room sizes, shared by the site Worker (worker/index.mjs) and `homie-studio build` (lib/build.mjs).
+ *
+ * A game names its seats in its netplay manifest (game.json `netplay.maxPlayers`, or `netplay.json` with
+ * `maxPlayers` or `players.max`); every room of that game has that many, up to SEAT_MAX (32).
+ */
+
+/** The most seats one room holds (NETPLAY.md §3). */
+export const SEAT_MAX = 32;
+
+/** A game's seats from its catalogue row: 1 to SEAT_MAX, 8 when it names none. */
+export const seatsOf = (meta) => Math.max(1, Math.min(SEAT_MAX, Math.floor(Number(meta?.players?.max)) || 8));
+
+/**
+ * Sockets one client address may hold in one room: 12, or every seat plus four (a big screen or two, and a
+ * visitor waiting for a seat) when that is more. A party of thirty phones and a TV on one Wi-Fi (or strangers
+ * behind one carrier's shared address) fills a 32-seat room from a single address, and must be let in; an 8-seat
+ * game keeps the old 12.
+ */
+export const perAddress = (seats) => Math.max(12, seats + 4);

package/worker/stats-page.mjs

@@ -0,0 +1,144 @@
+/**
+ * The studio owner's private stats page (/_studio/stats) and its one-time sign-in (/_studio/signin).
+ *
+ * Only the owner gets in: `homie-studio stats link` (run with the studio's own Cloudflare login) mints a one-time
+ * key; opening the link shows a button, and pressing it (a POST from this site) spends the key for a session
+ * cookie that lives only under /_studio/ (HttpOnly, SameSite=Lax, Secure on https). A link preview or a crawler
+ * that GETs the link spends nothing. Everything is drawn on the server: no script, nothing loaded from anywhere,
+ * never cached, never indexed.
+ */
+import { OWNER_COOKIE, endSession, ownerAllowed, rangeOf, readStats, spendSignin, onlyOf } from './stats.mjs';
+
+const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const fmt = (n) => Number(n || 0).toLocaleString('en-US');
+const PRIVATE_HEADERS = {
+  'content-type': 'text/html; charset=utf-8',
+  'cache-control': 'no-store, private',
+  'x-robots-tag': 'noindex, nofollow',
+  // same-origin, not no-referrer: a no-referrer page's own form POST carries `Origin: null`, which the sign-in refuses.
+  'referrer-policy': 'same-origin',
+  'x-frame-options': 'DENY',
+  'content-security-policy': "default-src 'none'; style-src 'unsafe-inline'; img-src data:; form-action 'self'; frame-ancestors 'none'; base-uri 'none'",
+};
+
+const CSS = `
+:root { color-scheme: dark; --bg: #07080d; --panel: #10131c; --ink: #eef1f8; --dim: #9aa3b7; --line: rgba(255,255,255,.10); --accent: #ffcf5a; --good: #7dffb0; }
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
+.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 16px 64px; }
+header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
+h1 { margin: 0; font-size: clamp(24px, 5vw, 36px); letter-spacing: -.02em; }
+h2 { margin: 36px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
+.dim { color: var(--dim); }
+.ranges a, .ranges b { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: inherit; margin: 0 4px 6px 0; font-size: 14px; }
+.ranges b { background: var(--accent); color: #1a1405; border-color: var(--accent); }
+.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
+.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
+.tile b { display: block; font-size: 26px; letter-spacing: -.02em; }
+.tile span { color: var(--dim); font-size: 13px; }
+.scroll { overflow-x: auto; }
+a { color: #ffe08a; }
+table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+table.wide { min-width: 640px; }
+th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+th:first-child, td:first-child { text-align: left; white-space: normal; }
+th { color: var(--dim); font-weight: 600; font-size: 13px; }
+.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 8px; }
+.bars div { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; opacity: .85; }
+.kind { font-size: 12px; color: var(--dim); }
+.live { color: var(--good); }
+form { display: inline; }
+button { font: inherit; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 800; background: var(--accent); color: #1a1405; cursor: pointer; }
+button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 600; padding: 6px 14px; }
+p.note { color: var(--dim); font-size: 13px; max-width: 70ch; }
+`;
+
+function page(title, body, status = 200, extraHeaders = {}) {
+  return new Response(`<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow"><title>${esc(title)}</title><style>${CSS}</style></head><body><div class="wrap">${body}</div></body></html>`, { status, headers: { ...PRIVATE_HEADERS, ...extraHeaders } });
+}
+
+function locked(cat) {
+  return page('Stats · private', `<h1>${esc(cat.studio?.name ?? 'Studio')} stats</h1>
+<p class="dim">This page is for the studio's owner only.</p>
+<p class="note">To open it, the owner asks their AI in the studio's folder to run <code>npx --no-install homie-studio stats link</code>. That uses the studio's own Cloudflare login, and gives a one-time link for this browser.</p>`, 401);
+}
+
+/** A POST from this site's own page: its Origin, or (when a browser sends `Origin: null` or none) Sec-Fetch-Site. */
+const sameOrigin = (request, url) => {
+  const origin = request.headers.get('origin');
+  if (origin && origin !== 'null') return origin === url.origin;
+  return request.headers.get('sec-fetch-site') === 'same-origin';
+};
+
+const KIND_WORD = { hub: 'the Homie hub', studio: 'another studio', search: 'search', web: 'the web', link: 'a ?via= link' };
+
+function statsBody(cat, s, url) {
+  const t = s.totals;
+  const q = (extra) => { const p = new URLSearchParams(url.searchParams); for (const [k, v] of Object.entries(extra)) { if (v === null) p.delete(k); else p.set(k, v); } p.delete('from'); p.delete('to'); return `?${p}`; };
+  const range = url.searchParams.get('range') ?? (s.range.days === 1 ? '1d' : `${s.range.days}d`);
+  const ranges = ['1d', '7d', '30d', '90d'].map((r) => (r === range ? `<b>${r === '1d' ? 'Today' : `${r.replace('d', '')} days`}</b>` : `<a href="${esc(q({ range: r }))}">${r === '1d' ? 'Today' : `${r.replace('d', '')} days`}</a>`)).join('');
+  const tile = (n, label, cls = '') => `<div class="tile"><b class="${cls}">${esc(fmt(n))}</b><span>${esc(label)}</span></div>`;
+  const peak = Math.max(1, ...s.days.map((d) => d.plays + d.visits));
+  const bars = s.days.map((d) => `<div title="${esc(d.day)}: ${esc(d.visits)} visits, ${esc(d.plays)} plays" style="height:${Math.round(((d.plays + d.visits) / peak) * 100)}%"></div>`).join('');
+  const gameRows = s.games.map((g) => `<tr><td><a href="${esc(q({ game: g.id, song: null, video: null }))}">${esc(g.name)}</a> <span class="kind">${esc(g.seats ?? '?')} seats</span></td><td>${fmt(g.visits)}</td><td>${fmt(g.plays)}</td><td>${fmt(g.rooms)}</td><td>${fmt(g.rounds)}</td><td>${fmt(g.peopleInRounds)}</td><td>${fmt(g.peakPlayers)}</td><td>${fmt(g.peakInOneRoom)}</td><td class="${g.playingNow ? 'live' : ''}">${fmt(g.playingNow)}</td></tr>`).join('');
+  const songRows = s.songs.map((e) => `<tr><td><a href="${esc(q({ song: e.slug, game: null, video: null }))}">${esc(e.title)}</a></td><td>${fmt(e.visits)}</td><td>${fmt(e.plays)}</td></tr>`).join('');
+  const videoRows = s.videos.map((e) => `<tr><td><a href="${esc(q({ video: e.slug, game: null, song: null }))}">${esc(e.title)}</a></td><td>${fmt(e.visits)}</td><td>${fmt(e.views)}</td></tr>`).join('');
+  const refRows = s.referrers.map((r) => `<tr><td>${esc(r.from)} <span class="kind">${esc(KIND_WORD[r.kind] ?? r.kind)}</span></td><td>${fmt(r.visits)}</td><td>${fmt(r.plays)}</td></tr>`).join('');
+  return `<header><h1>${esc(cat.studio?.name ?? 'Studio')} stats${s.only ? ` <span class="dim">· ${esc(s.only.kind)} ${esc(s.only.id)}</span>` : ''}</h1>
+<form method="post" action="/_studio/signout"><button class="ghost" type="submit">Sign out</button></form></header>
+<p class="dim">${esc(s.range.from)} to ${esc(s.range.to)} (UTC)${s.only ? ` · <a href="${esc(q({ game: null, song: null, video: null }))}">whole studio</a>` : ''}</p>
+<nav class="ranges">${ranges}</nav>
+<section class="tiles">
+${tile(t.visits, 'visits')}${tile(t.plays, 'Play presses')}${tile(t.rooms, 'rooms opened')}${tile(t.rounds, 'rounds finished')}
+${tile(t.peopleInRounds, 'people in finished rounds')}${tile(t.peakPlayers, 'most playing at once')}${tile(t.playingNow, 'playing right now', t.playingNow ? 'live' : '')}
+${tile(t.songPlays, 'songs played')}${tile(t.videoViews, 'videos watched')}
+</section>
+<h2>Every day</h2><div class="bars" role="img" aria-label="visits and plays per day">${bars}</div>
+<h2>Games</h2><div class="scroll"><table class="wide"><thead><tr><th>Game</th><th>Visits</th><th>Plays</th><th>Rooms</th><th>Rounds</th><th>People in rounds</th><th>Peak</th><th>Peak in a room</th><th>Now</th></tr></thead><tbody>${gameRows || '<tr><td colspan="9" class="dim">No games.</td></tr>'}</tbody></table></div>
+${s.songs.length ? `<h2>Songs</h2><div class="scroll"><table><thead><tr><th>Song</th><th>Page visits</th><th>Played</th></tr></thead><tbody>${songRows}</tbody></table></div>` : ''}
+${s.videos.length ? `<h2>Videos</h2><div class="scroll"><table><thead><tr><th>Video</th><th>Page visits</th><th>Watched</th></tr></thead><tbody>${videoRows}</tbody></table></div>` : ''}
+<h2>Where people came from</h2>
+<p class="dim">From homie.rocks: ${fmt(s.crossings.fromHub)} · from other studios: ${fmt(s.crossings.fromStudios)} · from search: ${fmt(s.crossings.fromSearch)} · from the web: ${fmt(s.crossings.fromWeb)} · from ?via= links: ${fmt(s.crossings.fromLinks)}</p>
+<div class="scroll"><table><thead><tr><th>From</th><th>Visits</th><th>Plays</th></tr></thead><tbody>${refRows || '<tr><td colspan="3" class="dim">Everybody came directly, or from this site.</td></tr>'}</tbody></table></div>
+<p class="note">${esc(s.note)} This page is private to the studio's owner and is never cached or indexed.</p>`;
+}
+
+/**
+ * /_studio/* for the owner, or null when the path is not one of these. `catalogueOf` reads games.json;
+ * `studios` names sites that are Homie studios (for the "another studio" crossing).
+ */
+export async function ownerRoutes(request, env, url, { catalogueOf }) {
+  const path = url.pathname;
+  if (!path.startsWith('/_studio/')) return null;
+  const cat = await catalogueOf();
+  const secure = url.protocol === 'https:' ? '; Secure' : '';
+  if (path === '/_studio/signin') {
+    const key = url.searchParams.get('k') ?? '';
+    if (request.method === 'GET') {
+      // A GET spends nothing: a chat app's link preview must not use up the owner's one-time link.
+      return page('Sign in · stats', `<h1>${esc(cat.studio?.name ?? 'Studio')} stats</h1>
+<p class="dim">Open this studio's private stats in this browser. The link works once.</p>
+<form method="post" action="/_studio/signin?k=${esc(encodeURIComponent(key))}"><button type="submit">Open the stats</button></form>`);
+    }
+    if (request.method !== 'POST' || !sameOrigin(request, url)) return page('Not allowed', '<h1>Not allowed</h1>', 403);
+    const session = await spendSignin(env, key);
+    if (!session) return page('Link used or expired', `<h1>That link has been used or has expired</h1><p class="note">A sign-in link works once, for 30 minutes. Ask your AI for a new one: <code>npx --no-install homie-studio stats link</code>.</p>`, 403);
+    return new Response(null, { status: 303, headers: { location: '/_studio/stats', 'cache-control': 'no-store', 'set-cookie': `${OWNER_COOKIE}=${session}; Path=/_studio/; HttpOnly; SameSite=Lax; Max-Age=${30 * 24 * 3600}${secure}` } });
+  }
+  if (path === '/_studio/signout') {
+    if (request.method !== 'POST' || !sameOrigin(request, url)) return page('Not allowed', '<h1>Not allowed</h1>', 403);
+    await endSession(env, request);
+    return new Response(null, { status: 303, headers: { location: '/_studio/stats', 'cache-control': 'no-store', 'set-cookie': `${OWNER_COOKIE}=; Path=/_studio/; HttpOnly; SameSite=Lax; Max-Age=0${secure}` } });
+  }
+  if (path === '/_studio/stats' || path === '/_studio/stats/') {
+    if (request.method !== 'GET') return page('Not allowed', '<h1>Not allowed</h1>', 405);
+    if ((await ownerAllowed(request, env, { kinds: ['session'] })) !== 'session') return locked(cat);
+    let stats;
+    try { stats = await readStats(env, cat, { range: rangeOf(url.searchParams), only: onlyOf(url.searchParams) }); } catch (error) {
+      return page('Stats', `<h1>No stats yet</h1><p class="note">The counters are not in this studio's database yet: run <code>npm run deploy</code> (it applies D1 migration 0002_studio_stats.sql). (${esc(String(error?.message ?? error).slice(0, 120))})</p>`, 503);
+    }
+    return page(`Stats · ${cat.studio?.name ?? 'Studio'}`, statsBody(cat, stats, url));
+  }
+  return page('Not found', '<h1>Not found</h1>', 404);
+}