@homie-rocks/studio 0.14.4 → 0.16.0

package/worker/pages.mjs

@@ -3,6 +3,9 @@
  * worker/site.mjs. Every name a player typed is escaped.
  */
 import { esc, layout } from './site.mjs';
+import { NET_PALETTE } from './room.mjs';
+import { SKILLS } from './agents.mjs';
+import { KIDS_LINE, POLICY_WORDS } from './servers.mjs';
 import { SAVES_SHELL_CSS, SAVES_SHELL_JS } from './saves-shell.mjs';
 
 export { homePage, mediaIndexPage, notFoundPage, songPage, videoPage } from './site.mjs';
@@ -21,14 +24,24 @@ export function frameAncestors(cat) {
   return ["'self'", ...extra].join(' ');
 }
 
-/** What a play or big-screen page answers to a room code it cannot use: said on the page, never a silent public room. */
-export function badRoomPage(cat, g, raw, { screen = false } = {}) {
+/** What a play, big-screen or watch page answers to a room code it cannot use: said on the page, never a silent public room. */
+export function badRoomPage(cat, g, raw, { screen = false, watch = false } = {}) {
   const shown = String(raw ?? '').slice(0, 64);
   return layout(cat, {
     title: `That room link does not work · ${g.name}`, page: 'bad-room', status: 400,
     main: `<header class="head"><p class="kicker">${esc(g.name)}</p><h1>That room link does not work</h1>
-<p class="lead">The room code in this link${shown ? ` (<span class="addr">${esc(shown)}${String(raw).length > 64 ? '…' : ''}</span>)` : ''} is not one a room can have: a code is 1 to 32 letters, digits, hyphens or underscores. Ask whoever sent it for the link again, or play in a public room.</p>
-<div class="keys"><a class="btn" href="/${esc(g.id)}/${screen ? 'tv' : 'play'}" data-play>Join a public room</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
+<p class="lead">The room code in this link${shown ? ` (<span class="addr">${esc(shown)}${String(raw).length > 64 ? '…' : ''}</span>)` : ''} is not one a room can have: a code is 1 to 32 letters, digits, hyphens or underscores. Ask whoever sent it for the link again, or ${watch ? 'watch' : 'play in'} a public room.</p>
+<div class="keys"><a class="btn" href="/${esc(g.id)}/${watch ? 'watch' : screen ? 'tv' : 'play'}"${watch ? '' : ' data-play'}>${watch ? 'Watch a public room' : 'Join a public room'}</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
+  });
+}
+
+/** A game whose game.json says `"watch": false` has no watch door: the page says so and offers Play. */
+export function noWatchPage(cat, g) {
+  return layout(cat, {
+    title: `${g.name} is not shown to watchers`, page: 'no-watch', status: 404,
+    main: `<header class="head"><p class="kicker">${esc(g.name)}</p><h1>${esc(g.name)} is played, not watched</h1>
+<p class="lead">Its rooms are not shown to watchers: what each player sees stays theirs. Press Play and you are in a room, with bots in the empty seats.</p>
+<div class="keys"><a class="btn" href="/${esc(g.id)}/play" data-play>Play ${esc(g.name)}</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
   });
 }
 
@@ -71,7 +84,7 @@ export function sharePlaces(value) {
  * the edge (game.json `screen.share`, per device: sharePlaces) opens Invite, Big screen and the room code; nothing
  * covers the middle of the screen or a thumb.
  */
-export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, room = null, ticket = null, owner = false, launch = 'public' } = {}) {
+export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, room = null, ticket = null, owner = false, launch = 'public', server = null } = {}) {
   const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
   const corner = (name, fallback) => (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(g.screen?.[name]) ? g.screen[name] : fallback);
   const places = sharePlaces(g.screen?.share);
@@ -137,16 +150,28 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .notice .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
 .notice .acts a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; text-decoration: none; font-weight: 700; color: #eef1f8; border: 1px solid rgba(255,255,255,.18); }
 .notice .acts a.primary { background: var(--hot); color: #0b0b10; border-color: transparent; }
-[hidden] { display: none !important; }${g.saves && !screen ? SAVES_SHELL_CSS : ''}`;
+[hidden] { display: none !important; }
+${SERVER_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}`;
   // The room button's place on each device (sharePlaces); the shell moves it to this browser's once it knows the device.
   // A ticket (a game that is not public) and the owner's overlay ride along only for the browser they are for.
-  const boot = { game: g.id, name: g.name, screen: Boolean(screen), share: places, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}), ...(owner ? { owner: true, launch } : {}) };
+  // The server this page plays on (0.16.0): its pool (the Lobby), its badge and line for the chip, its ceiling.
+  const srv = server ? { id: server.id, name: server.name, badge: server.badge, line: server.line, policy: server.policy, kids: Boolean(server.kids), mentor: Boolean(server.mentor), levelMax: server.levelMax } : null;
+  // game.json "agents": { "vote": "game" } draws its own vote card; false turns the vote off (section 17).
+  const vote = g.agents?.vote === 'game' || g.agents?.vote === false ? g.agents.vote : 'shell';
+  const boot = { game: g.id, name: g.name, screen: Boolean(screen), share: places, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}), ...(owner ? { owner: true, launch } : {}), ...(srv ? { server: srv } : {}), vote, skills: SKILLS.map((k) => ({ level: k.level, name: k.name, card: k.card })), words: POLICY_WORDS, kidsLine: KIDS_LINE };
   // game.json "screen": { "join": "top-left" | "top-right" | "bottom-left" | "bottom-right" } keeps the card off the game's own HUD.
   const joinCorner = corner('join', 'bottom-right');
   const first = places.desk;
   const joinCard = screen && joinUrl ? `<div class="join join-${joinCorner}" data-join>${qr ? `<div class="qr">${qr}</div>` : ''}<div><b>Scan to play</b><span>${esc(joinUrl.replace(/^https?:\/\//, ''))}</span></div></div>` : '';
   const share = screen ? '' : `<div class="room at-${first.at}" style="--dx:${first.x}px;--dy:${first.y}px" data-room-ui>
   <button class="pill${first.label ? '' : ' icon'}" type="button" data-share-toggle aria-expanded="false" aria-controls="share-sheet" aria-label="Room, invite and big screen"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></svg><span data-room-code>Room</span></button>
+  <button class="pill spill" type="button" data-server-toggle aria-expanded="false" aria-controls="server-sheet" hidden><span class="sdot" aria-hidden="true"></span><span data-server-label></span></button>
+  <div class="sheet ssheet" id="server-sheet" role="dialog" aria-label="This server" data-server-sheet hidden>
+    <div class="code"><b data-server-name></b><span data-server-badge></span></div>
+    <p class="sline" data-server-line></p>
+    <div class="srow" data-level-row hidden><span>AI level: <b data-level-name></b></span><button type="button" data-level-vote>Change ▾</button></div>
+    <label class="srow quiet-ai"><span>Quiet AI <small>hides AI chat on this screen</small></span><input type="checkbox" data-quiet-ai></label>
+  </div>
   <div class="sheet" id="share-sheet" role="dialog" aria-label="This room" data-share-sheet hidden>
     <div class="code"><b data-room-label>This room</b><span data-room-count></span></div>
     <div class="acts">
@@ -162,6 +187,7 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
   return layoutless(`${g.name} · play`, `
 <iframe class="game" title="${esc(g.name)}" sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups" allow="fullscreen *; autoplay *; gamepad *"></iframe>
 <div class="chip" data-chip><span data-status>finding a room…</span></div>
+<div class="vote" data-vote role="dialog" aria-label="How strong should the AI be?" data-keep-focus hidden></div>
 <div class="card" data-results hidden></div>
 <div class="card" data-screen hidden></div>
 ${joinCard}${share}
@@ -170,6 +196,42 @@ ${joinCard}${share}
 <script>${SAVES_SHELL_JS}</script>` : ''}${owner ? `<style>${OWNER_CSS}</style><script>${OWNER_JS}</script>` : ''}`, css, frameAncestors(cat));
 }
 
+/*
+ * SERVERS AND THE AI DIAL (0.16.0, NETPLAY.md section 17): the server pill beside the room button (its name and
+ * badge; its sheet has the policy's line, the AI's level with "Change", and Quiet AI), and the party's vote card on
+ * how strong the AI should be (a bottom sheet on a phone; keys 1-5 on a computer). Nothing covers the middle of the
+ * screen except the card, for a few seconds, when a vote is open.
+ */
+const SERVER_CSS = `.spill .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); flex: none; }
+.spill.dim .sdot { display: block; }
+.ssheet .sline { margin: 0 2px 10px; color: #c3cad9; font-weight: 500; line-height: 1.4; }
+.ssheet .srow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; margin: 0 2px; border-top: 1px solid rgba(255,255,255,.08); font-weight: 600; }
+.ssheet .srow small { display: block; color: #8b93a7; font-weight: 500; font-size: 11px; }
+.ssheet .srow button { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.ssheet .srow input { width: 20px; height: 20px; accent-color: var(--hot); }
+.aipill { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255,207,90,.2); color: #ffe7a8; font: 800 10px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .06em; vertical-align: 1px; }
+.vote { box-sizing: border-box; position: fixed; left: 50%; top: 50%; z-index: 12; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); padding: 16px 16px 14px; border-radius: 18px; background: rgba(8,12,22,.95); border: 1px solid var(--hot); color: #eef1f8; font: 600 14px/1.35 ui-sans-serif, system-ui, -apple-system, sans-serif; box-shadow: 0 24px 70px rgba(0,0,0,.55); touch-action: manipulation; -webkit-user-select: none; user-select: none; animation: rise .25s ease-out; }
+@keyframes rise { from { opacity: 0; transform: translate(-50%, -46%); } }
+.vote .vh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 12px; }
+.vote .vh b { font-size: 18px; letter-spacing: -.01em; }
+.vote .vh span { color: #aab3c7; font-weight: 600; font-size: 12px; white-space: nowrap; }
+.vote .opts { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 8px; }
+.vote .opts button { min-height: 58px; padding: 6px 4px; border-radius: 13px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
+.vote .opts button b { font-size: 16px; }
+.vote .opts button small { color: #9aa3b7; font-size: 11px; font-weight: 600; }
+.vote .opts button[aria-pressed="true"] { background: var(--hot); color: #0b0b10; border-color: transparent; }
+.vote .opts button[aria-pressed="true"] small { color: #3b3420; }
+.vote .legend { display: flex; justify-content: space-between; gap: 10px; margin: 10px 4px 0; color: #8b93a7; font-size: 11px; font-weight: 600; }
+.vote .legend i { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.18); margin-bottom: 4px; }
+.vote .foot { margin: 10px 2px 0; text-align: center; color: #c3cad9; font-weight: 600; }
+@media (max-width: 540px) {
+  .vote { top: auto; bottom: 0; left: 0; right: 0; width: auto; transform: none; border-radius: 20px 20px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); animation: up .25s ease-out; }
+  @keyframes up { from { opacity: 0; transform: translateY(20px); } }
+  .vote .opts { grid-template-columns: repeat(3, 1fr); }
+  .vote .opts button { min-height: 64px; }
+  .vote .legend { display: none; }
+}`;
+
 /** The play page's own document (no site chrome: the game owns the whole screen). */
 function layoutless(title, body, css, ancestors = "'self'") {
   return new Response(`<!doctype html>
@@ -201,7 +263,7 @@ const SHELL_JS = String.raw`(function () {
   var statusEl = document.querySelector('[data-status]');
   var results = document.querySelector('[data-results]');
   var screenCard = document.querySelector('[data-screen]');
-  var state = { game: boot.game, room: null, device: device, want: want, attached: false, stats: null, round: null, roster: null, facts: null, seat: null, results: [], closed: null, link: null, notice: null, banner: null, muted: null };
+  var state = { game: boot.game, room: null, device: device, want: want, attached: false, stats: null, round: null, roster: null, facts: null, seat: null, results: [], closed: null, link: null, notice: null, banner: null, muted: null, server: boot.server || null, vote: null, myVote: {}, quietAi: false, full: false };
   window.__shell = state;
   // This browser's room key: random, kept in this site's own storage, and sent only to this site's rooms. It is what
   // an owner's kick holds out of a room for a while (section 15); it says nothing about who the player is.
@@ -248,7 +310,18 @@ const SHELL_JS = String.raw`(function () {
   addEventListener('resize', place);
   function labelOf(room) { var m = /^pub-(\d+)$/.exec(room); return m ? 'Room ' + m[1] : room; }
   function flash(text) { if (!toast) return; toast.textContent = text; toast.hidden = false; clearTimeout(flash.t); flash.t = setTimeout(function () { toast.hidden = true; }, 1800); }
-  function wake() { if (!toggle) return; toggle.classList.remove('dim'); clearTimeout(dimTimer); dimTimer = setTimeout(function () { if (sheet.hidden) toggle.classList.add('dim'); }, 6000); }
+  // The room pill and the server pill fade to dots after 6 s, so neither sits on the game's own HUD.
+  function wake() {
+    if (!toggle) return;
+    var sp = document.querySelector('[data-server-toggle]');
+    toggle.classList.remove('dim'); if (sp) sp.classList.remove('dim');
+    clearTimeout(dimTimer);
+    dimTimer = setTimeout(function () {
+      if (sheet.hidden) toggle.classList.add('dim');
+      var ss = document.querySelector('[data-server-sheet]');
+      if (sp && (!ss || ss.hidden)) sp.classList.add('dim');
+    }, 6000);
+  }
   function open(on) { if (!sheet) return; sheet.hidden = !on; toggle.setAttribute('aria-expanded', on ? 'true' : 'false'); if (on) wake(); else { wake(); try { frame.focus(); } catch (e) {} } }
   function copy(text, done) {
     var ok = function () { flash(done || 'Link copied'); };
@@ -298,6 +371,8 @@ const SHELL_JS = String.raw`(function () {
       try { var who = JSON.parse(localStorage.getItem('homie.player') || 'null'); if (who && typeof who.name === 'string' && who.name) q.set('name', who.name.slice(0, 24)); } catch (e) {}
     }
     if (params.get('debug') === '1') q.set('debug', '1');
+    // Quiet AI (this browser hides AI speech): the helper starts hushed, and hears a change by message.
+    if (state.quietAi) q.set('hush', '1');
     // The frame cannot read this page's address (it is an opaque origin): hand it the game's own switches.
     ['touchdebug', 'cam', 'view'].forEach(function (k) { var v = params.get(k); if (v && /^[A-Za-z0-9_-]{1,16}$/.test(v)) q.set(k, v); });
     frame.src = '/' + boot.game + '/__game/?' + q.toString();
@@ -312,7 +387,7 @@ const SHELL_JS = String.raw`(function () {
       if (m.what === 'stats') state.stats = m.stats;
       if (m.what === 'round') onRound(m.round);
       if (m.what === 'roster') state.roster = m.slots;
-      if (m.what === 'closed') { state.closed = m.why; if (m.why === 'kicked' || m.why === 'room-closed') notice(m.why === 'kicked' ? 'kicked' : 'closed', m); }
+      if (m.what === 'closed') { state.closed = m.why; if (m.why === 'kicked' || m.why === 'room-closed' || m.why === 'agents-off') notice(m.why === 'kicked' ? 'kicked' : 'closed', m); }
       // A game's net.pickPlayer(seat): only an owner's page listens (its overlay opens that player's card).
       if (m.what === 'pick' && (m.seat === null || typeof m.seat === 'number')) { try { window.dispatchEvent(new CustomEvent('homie-pick', { detail: { seat: m.seat } })); } catch (e) {} }
       paint();
@@ -338,7 +413,9 @@ const SHELL_JS = String.raw`(function () {
       var ol = document.createElement('ol');
       r.results.slice(0, 6).forEach(function (row) {
         var li = document.createElement('li');
-        li.textContent = row.name + (row.bot ? ' (bot)' : '') + ' — ' + row.score;
+        li.textContent = String(row.name) + ' — ' + row.score;
+        // Every AI row (an agent, or a bot) carries the AI pill.
+        if (row.agent || row.bot) { var pill = document.createElement('span'); pill.className = 'aipill'; pill.textContent = 'AI'; li.append(pill); }
         ol.append(li);
       });
       results.append(h, ol); results.hidden = params.get('debug') !== '1'; // the game draws its own results; the card is for ?debug=1
@@ -359,10 +436,13 @@ const SHELL_JS = String.raw`(function () {
       if (m.t === 'closed') { notice('closed', m); return; }
       if (m.t === 'announce') { banner(m); return; }
       if (m.t === 'muted') { mutedNote(m); return; }
+      if (m.t === 'vote') { onVote(m); return; }
       if (m.t !== 'net') return;
       state.facts = m;
+      if (typeof m.st === 'number') state.offset = m.st - Date.now();
       if (m.announce && m.announce.text) banner(m.announce, true);
       if (state.facts && state.facts.round) onRound(state.facts.round);
+      if (m.vote) onVote(m.vote, true); else if (state.vote && state.vote.open) onVote({ open: false, id: state.vote.id }, true);
       paint();
     };
     ws.onclose = function () { if (!state.notice) setTimeout(function () { watch(room); }, 1500); };
@@ -427,23 +507,141 @@ const SHELL_JS = String.raw`(function () {
     var f = state.facts;
     var n = f && f.counts ? f.counts.players : null;
     var bits = [];
-    if (n !== null) bits.push(n + (n === 1 ? ' player' : ' players') + ' here');
-    if (f && f.counts && f.counts.bots) bits.push(f.counts.bots + ' bots');
+    if (state.server) bits.push(state.server.name);
+    if (n !== null) bits.push(n + ' playing');
+    // Every AI is counted as AI (agents, the seats kept for them, and the game's bots), never as a player.
+    var aiN = f && f.counts ? (Number(f.counts.ai) || 0) + (Number(f.counts.bots) || 0) : 0;
+    if (aiN) bits.push(aiN + ' AI');
+    if (f && f.counts && f.counts.watchers) bits.push(f.counts.watchers + ' watching');
+    if (state.full) bits.push('waiting for a seat');
     if (state.closed) bits.push(state.closed === 'replaced' ? 'opened in another tab' : 'reconnecting');
     say(bits.join(' · ') || 'joining…');
     var count = ui && ui.querySelector('[data-room-count]');
-    if (count && n !== null) count.textContent = n + (n === 1 ? ' player here' : ' players here');
+    if (count && n !== null) count.textContent = n + (n === 1 ? ' player here' : ' players here') + (aiN ? ' · ' + aiN + ' AI' : '');
+    serverUi();
+  }
+
+  /* ---------------------------------------------------------- the server pill, Quiet AI and the vote (section 17) */
+  var SKILL = boot.skills || [];
+  var sToggle = document.querySelector('[data-server-toggle]');
+  var sSheet = document.querySelector('[data-server-sheet]');
+  var voteCard = document.querySelector('[data-vote]');
+  try { state.quietAi = localStorage.getItem('homie-quiet-ai') === '1'; } catch (e) { state.quietAi = false; }
+  function skillName(n) { var s = SKILL[n - 1]; return s ? s.name : 'level ' + n; }
+  function hasAi() { var f = state.facts; return Boolean(f && f.counts && (f.counts.ai || f.counts.bots || f.counts.agents)); }
+  function readsDial() { var f = state.facts; return Boolean(f && Array.isArray(f.caps) && f.caps.indexOf('skill') >= 0); }
+  // The room's live policy says the badge and line (the owner's change reaches an open page at once); the
+  // server's words from the page load are the fallback.
+  function policyText(pol) {
+    var w = pol && boot.words ? boot.words[pol.kind] : null;
+    if (!w) return state.server ? { badge: state.server.badge, line: state.server.line } : { badge: 'Open', line: 'Open: anyone can play. AI players are always marked AI.' };
+    var n = pol.kind === 'hybrid' ? (Number(pol.aiSeats) || 0) : 0;
+    return { badge: pol.kind === 'hybrid' ? w.badge + ' · ' + n : w.badge, line: w.line.replace('{n}', String(n)) + (pol.kids && boot.kidsLine ? ' ' + boot.kidsLine : '') };
+  }
+  function serverUi() {
+    if (!sToggle || !sSheet) return;
+    var f = state.facts; var pol = f && f.policy ? f.policy : null;
+    var show = Boolean(state.server) || (hasAi() && readsDial());
+    sToggle.hidden = !show;
+    if (!show) return;
+    var name = state.server ? state.server.name : 'Quick play';
+    var words = policyText(pol);
+    var label = name + ' · ' + words.badge + (state.server && state.server.mentor ? ' · Mentor' : '');
+    var labelEl = sToggle.querySelector('[data-server-label]');
+    // A new policy (the owner's change) shows in full for a moment, then fades with the room pill.
+    if (labelEl.textContent !== label) { labelEl.textContent = label; wake(); }
+    sSheet.querySelector('[data-server-name]').textContent = name;
+    sSheet.querySelector('[data-server-badge]').textContent = words.badge;
+    sSheet.querySelector('[data-server-line]').textContent = words.line;
+    var row = sSheet.querySelector('[data-level-row]');
+    row.hidden = !(readsDial() && hasAi() && boot.vote !== false);
+    if (pol && pol.skill) sSheet.querySelector('[data-level-name]').textContent = pol.skill.name;
+    sSheet.querySelector('[data-quiet-ai]').checked = state.quietAi;
+  }
+  if (sToggle) {
+    sToggle.addEventListener('click', function (e) { e.stopPropagation(); var on = sSheet.hidden; sSheet.hidden = !on; sToggle.setAttribute('aria-expanded', on ? 'true' : 'false'); if (on && sheet) open(false); wake(); });
+    document.addEventListener('pointerdown', function (e) { if (!sSheet.hidden && !sSheet.contains(e.target) && e.target !== sToggle && !sToggle.contains(e.target)) { sSheet.hidden = true; sToggle.setAttribute('aria-expanded', 'false'); } }, true);
+    sSheet.querySelector('[data-quiet-ai]').addEventListener('change', function (e) {
+      state.quietAi = e.target.checked;
+      try { localStorage.setItem('homie-quiet-ai', state.quietAi ? '1' : '0'); } catch (e2) {}
+      try { frame.contentWindow.postMessage({ t: 'homie-hush', on: state.quietAi }, '*'); } catch (e3) {}
+      flash(state.quietAi ? 'AI chat is hidden on this screen.' : 'AI chat shows again.');
+    });
+    sSheet.querySelector('[data-level-vote]').addEventListener('click', function () { sendVote({ open: true }); sSheet.hidden = true; sToggle.setAttribute('aria-expanded', 'false'); });
   }
+  function sendVote(m) {
+    var ws = state.watchSocket;
+    if (!ws || ws.readyState !== 1) { flash('Not connected yet; try again in a moment.'); return; }
+    try { ws.send(JSON.stringify(Object.assign({ t: 'vote', of: 'skill' }, m))); } catch (e) {}
+  }
+  function cast(n) { if (!state.vote || !state.vote.open) return; state.myVote[state.vote.id] = n; sendVote({ n: n }); renderVote(); }
+  var shownResults = {};
+  function onVote(v, quiet) {
+    if (!v || typeof v !== 'object') return;
+    if (v.t === 'error' || v.code) return;
+    var prev = state.vote;
+    state.vote = v.options ? v : (prev && prev.id === v.id ? Object.assign({}, prev, { open: false }) : prev);
+    if (v.result && !v.open && !shownResults[v.id] && !quiet) {
+      shownResults[v.id] = true;
+      flash('The party set the AI to ' + v.result.name + ' (' + v.result.votes + (v.result.votes === 1 ? ' vote' : ' votes') + ').');
+    } else if (v.result && !v.open) shownResults[v.id] = true;
+    renderVote();
+  }
+  var voteTimer = null;
+  function renderVote() {
+    var v = state.vote;
+    if (!voteCard) return;
+    // A game that draws its own card (game.json "agents": { "vote": "game" }), or no vote: the shell shows none.
+    if (!v || !v.open || boot.vote !== 'shell' || boot.screen || state.seat === null || state.seat === undefined) { voteCard.hidden = true; clearInterval(voteTimer); voteTimer = null; return; }
+    var left = Math.max(0, Math.ceil((v.until - (Date.now() + (state.offset || 0))) / 1000));
+    var mine = state.myVote[v.id];
+    voteCard.textContent = '';
+    var head = document.createElement('div'); head.className = 'vh';
+    var t = document.createElement('b'); t.textContent = 'How strong should the AI be?';
+    var sub = document.createElement('span'); sub.textContent = 'for this party · ' + left + ' s';
+    head.append(t, sub);
+    var opts = document.createElement('div'); opts.className = 'opts'; opts.style.setProperty('--n', String(v.options.length));
+    v.options.forEach(function (n) {
+      var b = document.createElement('button'); b.type = 'button'; b.setAttribute('data-vote-n', String(n));
+      b.setAttribute('aria-pressed', mine === n ? 'true' : 'false');
+      var big = document.createElement('b'); big.textContent = n + ' ' + skillName(n);
+      var small = document.createElement('small'); small.textContent = (v.counts && v.counts[n] ? v.counts[n] + (v.counts[n] === 1 ? ' vote' : ' votes') : '\u00a0');
+      b.append(big, small);
+      b.addEventListener('click', function () { cast(n); });
+      opts.appendChild(b);
+    });
+    var legend = document.createElement('div'); legend.className = 'legend';
+    var l1 = document.createElement('span'); l1.textContent = SKILL[0] ? SKILL[0].card.split(',')[0] : 'stays at the back';
+    var l2 = document.createElement('span'); var top = SKILL[v.options.length - 1]; l2.textContent = top ? top.card.split(',')[0] : '';
+    legend.append(l1, document.createElement('i'), l2);
+    var foot = document.createElement('div'); foot.className = 'foot';
+    foot.textContent = (v.voters || 0) + ' of ' + (v.of_total || 1) + ' voted · the middle vote wins';
+    voteCard.append(head, opts, legend, foot);
+    voteCard.hidden = false;
+    if (!voteTimer) voteTimer = setInterval(renderVote, 500);
+  }
+  document.addEventListener('keydown', function (e) {
+    if (!state.vote || !state.vote.open || voteCard.hidden || e.metaKey || e.ctrlKey || e.altKey) return;
+    var n = Number(e.key);
+    if (state.vote.options.indexOf(n) >= 0) { e.preventDefault(); cast(n); }
+  });
 
   // A named room (?room=, a friend's link, a test, the big screen's QR) skips the lobby; everyone else meets strangers.
   // The page refuses a code it cannot use before it gets here, so an asked room is never swapped for a public one.
   var askedRoom = params.get('room');
+  var lobbyQ = [];
+  if (state.server) lobbyQ.push('server=' + encodeURIComponent(state.server.id));
+  if (/^[A-Za-z0-9_,-]{1,140}$/.test(params.get('not') || '')) lobbyQ.push('not=' + encodeURIComponent(params.get('not')));
   if (boot.room) start(boot.room);
   else if (askedRoom !== null && /^[A-Za-z0-9_-]{1,32}$/.test(askedRoom)) start(askedRoom);
   else if (askedRoom !== null) { say('that room link does not work'); }
-  else fetch('/' + boot.game + '/api/lobby' + (/^[A-Za-z0-9_,-]{1,140}$/.test(params.get('not') || '') ? '?not=' + encodeURIComponent(params.get('not')) : ''), { method: 'POST' })
+  else fetch('/' + boot.game + '/api/lobby' + (lobbyQ.length ? '?' + lobbyQ.join('&') : ''), { method: 'POST' })
     .then(function (r) { return r.json(); })
-    .then(function (j) { start(j.room || 'main'); })
+    .then(function (j) {
+      // Every room this server may have is full: the fullest one, watched until a seat frees (the relay seats it).
+      if (j.full) { state.full = true; flash((state.server ? state.server.name : 'This server') + ' is full. You\u2019re next for a seat.'); }
+      start(j.room || 'main');
+    })
     .catch(function () { start('main'); });
 }());`;
 
@@ -469,6 +667,7 @@ const OWNER_CSS = `.owner { position: fixed; z-index: 10; top: max(8px, env(safe
 .osheet .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #aab3c7; margin-left: 6px; }
 .osheet .tag.you { color: #c9b8ff; border-color: #c9b8ff; }
 .osheet .tag.muted { color: #ff8a9a; border-color: rgba(255,107,125,.6); }
+.osheet .tag.ai { color: #ffe7a8; border-color: rgba(255,207,90,.6); }
 .osheet .bot { color: #6c7489; font-weight: 500; padding: 2px 10px 8px; }
 .osheet .det { padding: 4px 2px; }
 .osheet .det b { font-size: 18px; display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
@@ -541,7 +740,7 @@ const OWNER_JS = String.raw`(function () {
       var back = el('button', 'back', '← Everyone here'); back.type = 'button'; back.onclick = function () { view.pick = null; view.msg = ''; render(); };
       var det = el('div', 'det');
       det.appendChild(el('b', '', picked.name || 'Someone'));
-      det.appendChild(el('p', '', (picked.seat !== null ? 'Seat ' + (picked.seat + 1) : 'Watching') + ' · ' + (picked.device === 'phone' ? 'on a phone' : picked.device === 'tv' ? 'a big screen' : 'on a computer') + (picked.role === 'host' ? ' · hosting the room' : '')));
+      det.appendChild(el('p', '', (picked.seat !== null ? 'Seat ' + (picked.seat + 1) : 'Watching') + ' · ' + (picked.agent ? 'an AI (' + (picked.agent.role === 'guide' ? 'a guide' : 'a companion') + '), always marked AI' : picked.device === 'phone' ? 'on a phone' : picked.device === 'tv' ? 'a big screen' : 'on a computer') + (picked.role === 'host' ? ' · hosting the room' : '')));
       if (me) det.appendChild(el('p', '', 'This is you.'));
       if (picked.muted) det.appendChild(el('p', '', 'Muted: their chat and emotes reach nobody.'));
       sheet.append(back, det);
@@ -567,12 +766,13 @@ const OWNER_JS = String.raw`(function () {
         var left = el('span'); left.appendChild(el('span', '', c.name || 'Someone'));
         if (c.seat !== null && c.seat === state.seat) left.appendChild(el('span', 'tag you', 'you'));
         if (c.muted) left.appendChild(el('span', 'tag muted', 'muted'));
+        if (c.agent) left.appendChild(el('span', 'tag ai', 'AI' + (c.agent.role === 'guide' ? ' guide' : c.agent.role === 'party' ? ' companion' : '')));
         if (c.role === 'host') left.appendChild(el('span', 'tag', 'host'));
         row.append(left, el('small', '', c.seat !== null ? 'seat ' + (c.seat + 1) + ' · ' + (c.device === 'phone' ? 'phone' : c.device === 'tv' ? 'screen' : 'computer') : 'waiting'));
         row.onclick = function () { view.pick = c.id; view.msg = ''; render(); };
         sheet.appendChild(row);
       });
-      var b = bots(); if (b.length) sheet.appendChild(el('div', 'bot', 'Bots: ' + b.map(function (s) { return s.name; }).join(', ')));
+      var b = bots(); if (b.length) sheet.appendChild(el('div', 'bot', 'AI bots: ' + b.map(function (s) { return s.name; }).join(', ')));
     }
     var form = el('form'); form.setAttribute('data-announce', '');
     var ta = el('textarea'); ta.maxLength = 280; ta.placeholder = 'Announce something to the players'; ta.setAttribute('aria-label', 'Announcement');
@@ -598,3 +798,407 @@ const OWNER_JS = String.raw`(function () {
   setInterval(render, 1500);
   window.__owner = { open: open, render: render };
 }());`;
+
+/*
+ * WATCH ANY PLAYER (0.15.0, NETPLAY.md section 16). /<game>/watch?room=<room>[&follow=<seat>|auto|overview] is the
+ * game itself, rendered by this browser as a watcher: a screen that never takes a seat. A strip of the room's players
+ * switches whose view it renders (a tap, keys 1-9, A for Auto, O for the whole room); Auto follows the action. The
+ * game draws the followed player's camera and HUD (its netplay helper's `viewSeat`); a game that does not shows its
+ * overview, and the strip says so. A game with hidden hands or roles says `"watch": "overview"` in game.json: its
+ * watchers see the whole room only. A private or invite-only game is watched only by whoever may play it (the door
+ * is the play door's). Every name a player typed is set with textContent.
+ */
+export function watchPage(cat, g, { room = null, ticket = null, policy = 'follow' } = {}) {
+  const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
+  const hot = /^#[0-9a-f]{3,8}$/i.test(accent) ? accent : '#ffcf5a';
+  const boot = { game: g.id, name: g.name, policy, palette: NET_PALETTE, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}) };
+  const css = `:root{--hot:${hot}}${WATCH_CSS}`;
+  return layoutless(`Watch ${g.name}`, `
+<header class="wtop" data-top>
+  <span class="live" data-live><i aria-hidden="true"></i><b>Live</b></span>
+  <span class="what"><b>${esc(g.name)}</b><span data-room-label>finding a room…</span></span>
+  <span class="clock" data-clock hidden></span>
+  <span class="grow"></span>
+  <span class="eyes" data-eyes hidden title="Watching this room"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg><span data-eyes-n></span><span class="eyes-w"> watching</span></span>
+  <a class="playb" data-playb href="/${esc(g.id)}/play"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.8v14.4a1 1 0 0 0 1.5.86l12-7.2a1 1 0 0 0 0-1.72l-12-7.2A1 1 0 0 0 7 4.8Z" fill="currentColor"/></svg><span>Play</span></a>
+</header>
+<main class="stage"><iframe class="game" title="${esc(g.name)}, live" tabindex="-1" sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups" allow="fullscreen *; autoplay *; gamepad *"></iframe></main>
+<footer class="dock">
+  <div class="caption" data-caption role="status" aria-live="polite"><b data-cap-head>Joining the room…</b><span data-cap-sub></span></div>
+  <nav class="strip" data-strip role="toolbar" aria-label="Whose view to watch"></nav>
+</footer>
+<div class="wnote" data-note hidden></div>
+<script>window.__HOMIE_WATCH=${JSON.stringify(boot).replace(/</g, '\\u003c')};</script>
+<script>${WATCH_JS}</script>`, css, frameAncestors(cat));
+}
+
+/*
+ * The watch page is a broadcast: a band above the game (live, the game and room, the clock, who is watching, Play),
+ * the game in between, and a dock below (whose view this is, and the players to switch between). Nothing covers the
+ * game's own picture or HUD: every game draws its clock and board where it likes.
+ */
+const WATCH_CSS = `
+html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #05070d; color: #eef1f8; -webkit-tap-highlight-color: transparent; }
+body { --u: clamp(12px, calc(0.8vmin + 7px), 22px); --band: #080b14; --line: rgba(255,255,255,.08); display: flex; flex-direction: column; font: 600 var(--u)/1.25 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
+body.big { --u: clamp(16px, calc(1vmin + 6px), 32px); }
+.stage { position: relative; flex: 1; min-height: 0; background: #04060c; }
+iframe.game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #04060c; }
+.wtop { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .7); padding: max(calc(var(--u) * .5), env(safe-area-inset-top)) max(calc(var(--u) * .9), env(safe-area-inset-right)) calc(var(--u) * .5) max(calc(var(--u) * .9), env(safe-area-inset-left)); background: linear-gradient(#0b0f1a, var(--band)); border-bottom: 1px solid var(--line); min-width: 0; }
+.grow { flex: 1; }
+.live { flex: none; display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em .3em .6em; border-radius: 999px; background: rgba(255,59,92,.16); border: 1px solid rgba(255,90,120,.5); font-weight: 800; font-size: .74em; letter-spacing: .14em; text-transform: uppercase; color: #ffd9e0; }
+.live i { width: .62em; height: .62em; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 10px #ff3b5c; animation: pulse 1.6s ease-in-out infinite; }
+.live.off { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #aab3c7; }
+.live.off i { background: #6c7489; box-shadow: none; animation: none; }
+@keyframes pulse { 50% { opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }
+.what { display: flex; align-items: baseline; gap: .55em; min-width: 0; }
+.what b { font-weight: 800; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.what span { color: #9aa3b7; font-size: .86em; font-weight: 600; white-space: nowrap; }
+.clock { flex: none; padding: .26em .7em; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
+.eyes { flex: none; display: inline-flex; align-items: center; gap: .35em; color: #b9c1d3; font-variant-numeric: tabular-nums; font-size: .9em; }
+.eyes svg { width: 1.2em; height: 1.2em; }
+.playb { flex: none; display: inline-flex; align-items: center; gap: .45em; min-height: 2.4em; padding: 0 1em 0 .8em; border-radius: 11px; background: var(--hot); color: #0b0b10; font-weight: 800; text-decoration: none; }
+.playb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+.playb svg { width: 1em; height: 1em; }
+.dock { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .55) max(calc(var(--u) * .9), env(safe-area-inset-right)) max(calc(var(--u) * .55), env(safe-area-inset-bottom)) max(calc(var(--u) * .9), env(safe-area-inset-left)); background: linear-gradient(var(--band), #0b0f1a); border-top: 1px solid var(--line); min-width: 0; }
+.caption { flex: 0 1 auto; min-width: 0; max-width: 34%; display: flex; flex-direction: column; gap: .1em; }
+.caption b { font-weight: 800; font-size: 1.08em; display: flex; align-items: center; gap: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.caption b .dot { width: .72em; height: .72em; border-radius: 50%; flex: none; }
+.caption span { color: #9aa3b7; font-size: .82em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.strip { flex: 1; min-width: 0; display: flex; gap: calc(var(--u) * .45); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; padding: 3px 2px; }
+.strip::-webkit-scrollbar { display: none; }
+.strip > :first-child { margin-left: auto; }
+.strip > :last-child { margin-right: auto; }
+.chip { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 2.6em; max-width: 15em; padding: 0 .9em 0 .5em; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); color: #e8ecf5; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: border-color .2s, background .2s; }
+.chip:hover { border-color: rgba(255,255,255,.4); }
+.chip:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
+.chip[aria-pressed="true"] { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 16%, transparent); box-shadow: inset 0 0 0 1px var(--hot); }
+.chip.auto-on { border-color: color-mix(in srgb, var(--hot) 55%, rgba(255,255,255,.2)); }
+.chip[disabled] { cursor: default; padding-left: .8em; }
+.chip[disabled]:hover { border-color: rgba(255,255,255,.14); }
+.chip .k { display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em; border-radius: 6px; background: rgba(255,255,255,.08); color: #9aa3b7; font-size: .76em; font-weight: 800; box-sizing: border-box; }
+.chip .dot { width: .8em; height: .8em; border-radius: 50%; flex: none; }
+.chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chip .sc { color: #9aa3b7; font-variant-numeric: tabular-nums; font-weight: 800; }
+.chip .sc.lead { color: var(--hot); }
+.chip svg { width: 1.1em; height: 1.1em; flex: none; }
+.chip .tag { font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hot); }
+.chip .tag.ai { padding: .1em .45em; border-radius: 999px; background: color-mix(in srgb, var(--hot) 20%, transparent); color: #fff; letter-spacing: .06em; }
+.hint { flex: none; align-self: center; color: #7d8699; font-size: .76em; font-weight: 600; padding: 0 .2em; white-space: nowrap; }
+@media (hover: none) { .chip .k, .hint { display: none; } }
+/* A phone held upright: the caption over the strip, the strip scrolling sideways. */
+@media (max-width: 640px) {
+  .dock { flex-direction: column; align-items: stretch; gap: calc(var(--u) * .45); }
+  .caption { max-width: none; align-items: center; text-align: center; }
+  .chip { max-width: 10.5em; min-height: 2.75em; }
+  .what span, .eyes-w { display: none; }
+}
+/* Not much height (a phone on its side): thinner bands. */
+@media (max-height: 460px) {
+  .wtop, .dock { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
+  .caption span { display: none; }
+  .chip { min-height: 2.3em; }
+}
+body.idle { cursor: none; }
+.wnote { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(4,6,12,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
+.wnote .box { box-sizing: border-box; width: min(440px, 100%); padding: calc(var(--u) * 1.5); border-radius: 20px; background: #0d111c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
+.wnote h1 { margin: 0 0 .4em; font-size: 1.5em; letter-spacing: -.01em; }
+.wnote p { margin: 0 0 .7em; color: #c3cad9; font-weight: 500; line-height: 1.45; }
+.wnote .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1em; }
+.wnote .acts a { display: inline-flex; align-items: center; min-height: 2.9em; padding: 0 1.1em; border-radius: 12px; text-decoration: none; font-weight: 800; color: #eef1f8; border: 1px solid rgba(255,255,255,.18); }
+.wnote .acts a.primary { background: var(--hot); color: #0b0b10; border-color: transparent; }
+[hidden] { display: none !important; }`;
+
+/* The watch page's script (the site's own origin; the game runs in the sandboxed frame as a watcher). */
+const WATCH_JS = String.raw`(function () {
+  'use strict';
+  var boot = window.__HOMIE_WATCH;
+  var params = new URLSearchParams(location.search);
+  var hand = params.get('hand');
+  var device = hand === 'phone' || hand === 'desk' || hand === 'tv' ? hand : Math.min(innerWidth, innerHeight) <= 540 ? 'phone' : 'desk';
+  var frame = document.querySelector('iframe.game');
+  var q1 = function (s) { return document.querySelector(s); };
+  var strip = q1('[data-strip]'), note = q1('[data-note]');
+  var capHead = q1('[data-cap-head]'), capSub = q1('[data-cap-sub]'), clockEl = q1('[data-clock]'), liveEl = q1('[data-live]');
+  var palette = Array.isArray(boot.palette) ? boot.palette : [];
+  var asked = params.get('follow');
+  var first = /^\d{1,2}$/.test(asked || '') ? Number(asked) : asked === 'overview' ? null : 'auto';
+  // What the page knows: the room's facts (its watch socket), and what the game in the frame says it renders.
+  var state = { game: boot.game, room: null, facts: null, offset: 0, round: null, view: null, follows: null, canFollow: boot.policy !== 'overview', why: boot.policy === 'overview' ? 'overview' : null, scores: null, asked: first, attached: false, notice: null, emptySince: 0 };
+  window.__watch = state;
+  function rnd() {
+    try { var a = new Uint8Array(16); crypto.getRandomValues(a); var s = ''; for (var i = 0; i < a.length; i++) s += String.fromCharCode(a[i]); return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); }
+    catch (e) { var r = ''; while (r.length < 22) r += Math.random().toString(36).slice(2); return r.slice(0, 22); }
+  }
+  // The browser's room key, as the play page keeps it: a kick holds a browser out of watching too, and a browser
+  // that holds a seat in this room watches it in the overview only (section 16).
+  var roomKey = null;
+  try { roomKey = localStorage.getItem('homie-b'); if (!/^[A-Za-z0-9_-]{16,43}$/.test(roomKey || '')) { roomKey = rnd(); localStorage.setItem('homie-b', roomKey); } } catch (e) { roomKey = rnd(); }
+
+  function sizeUp() {
+    var big = hand === 'tv' || (Math.min(innerWidth, innerHeight) >= 900 && !(window.matchMedia && matchMedia('(pointer: coarse)').matches));
+    document.body.classList.toggle('big', big);
+  }
+  sizeUp();
+  addEventListener('resize', sizeUp);
+  function labelOf(room) { var m = /^pub-(\d+)$/.exec(room || ''); return m ? 'Room ' + m[1] : (room || ''); }
+  function el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined && text !== null) e.textContent = String(text); return e; }
+  function svg(path) { var s = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); s.setAttribute('fill', 'none'); s.setAttribute('stroke', 'currentColor'); s.setAttribute('stroke-width', '2'); s.setAttribute('stroke-linecap', 'round'); s.setAttribute('stroke-linejoin', 'round'); s.innerHTML = path; return s; }
+  var AUTO_ICON = '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/>';
+  var ROOM_ICON = '<rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/>';
+
+  // The players, in seat order: the strip's order, and what keys 1-9 pick (the n-th player).
+  function players() {
+    var f = state.facts;
+    var list = f && Array.isArray(f.clients) ? f.clients.filter(function (c) { return c && typeof c.seat === 'number' && !c.watch; }) : [];
+    return list.sort(function (a, b) { return a.seat - b.seat; });
+  }
+  function nameOf(seat) { var p = players().filter(function (c) { return c.seat === seat; })[0]; return p ? String(p.name || 'A player') : null; }
+  function colourOf(p) { return palette[(Number(p.colour) || 0) % (palette.length || 1)] || '#e8ecf5'; }
+  // Choosing whose view: the game decides it can (its helper said so), and the room lets this browser.
+  function canChoose() { return state.follows === true && state.canFollow; }
+
+  function follow(target) {
+    if (!canChoose() || !frame.contentWindow) return;
+    state.asked = target;
+    try { frame.contentWindow.postMessage({ t: 'homie-watch', follow: target }, '*'); } catch (e) {}
+    paint();
+  }
+
+  // The address follows the view, so a copied link watches the same player.
+  function syncUrl() {
+    try {
+      var v = state.view;
+      var f = !v ? null : v.following === 'auto' ? 'auto' : v.following === null ? 'overview' : String(v.following);
+      if (params.get('room') !== state.room || (f && params.get('follow') !== f)) {
+        params.set('room', state.room);
+        if (f) params.set('follow', f); else params.delete('follow');
+        params.delete('not');
+        history.replaceState(history.state, '', location.pathname + '?' + params.toString() + location.hash);
+      }
+    } catch (e) {}
+  }
+
+  function start(room) {
+    state.room = room;
+    syncUrl();
+    q1('[data-room-label]').textContent = labelOf(room);
+    q1('[data-playb]').href = '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+    document.title = 'Watch ' + boot.name + ' · ' + labelOf(room);
+    var q = new URLSearchParams({ room: room, watch: '1', device: device, b: roomKey });
+    q.set('follow', first === 'auto' ? 'auto' : first === null ? 'overview' : String(first));
+    if (boot.t) q.set('t', boot.t);
+    if (params.get('debug') === '1') q.set('debug', '1');
+    ['cam', 'view'].forEach(function (k) { var v = params.get(k); if (v && /^[A-Za-z0-9_-]{1,16}$/.test(v)) q.set(k, v); });
+    frame.src = '/' + boot.game + '/__game/?' + q.toString();
+    addEventListener('message', function (ev) {
+      if (ev.source !== frame.contentWindow) return;
+      var m = ev.data;
+      if (!m || typeof m !== 'object' || m.t !== 'homie-net') return;
+      if (m.what === 'attached') {
+        state.attached = true;
+        // A helper from before revision 5 never says what it renders: after a moment, the room's overview it is.
+        setTimeout(function () { if (state.follows === null) { state.follows = false; paint(); } }, 4000);
+      }
+      if (m.what === 'view') {
+        state.view = { seat: typeof m.seat === 'number' ? m.seat : null, following: m.following === 'auto' || typeof m.following === 'number' ? m.following : null, why: String(m.why || '') };
+        state.follows = m.follows === true;
+        state.canFollow = m.canFollow !== false;
+        state.why = typeof m.whyNot === 'string' ? m.whyNot : null;
+        syncUrl();
+      }
+      if (m.what === 'scores' && Array.isArray(m.scores)) {
+        var sc = {}; m.scores.forEach(function (r) { if (r && typeof r.seat === 'number' && isFinite(r.score)) sc[r.seat] = Number(r.score); });
+        state.scores = sc;
+      }
+      if (m.what === 'round' && m.round) state.round = m.round;
+      if (m.what === 'closed') {
+        if (m.why === 'kicked' || m.why === 'room-closed') shut(m.why === 'kicked' ? 'kicked' : 'closed', m);
+        else if (m.why === 'watch-off') shut('off', m);
+        else if (m.why === 'room-full') shut('full', m);
+      }
+      paint();
+    });
+    watch(room);
+  }
+
+  function watch(room) {
+    if (state.notice && state.notice.final) return;
+    var ws;
+    var extra = '&b=' + encodeURIComponent(roomKey) + (boot.t ? '&t=' + encodeURIComponent(boot.t) : '');
+    try { ws = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/' + boot.game + '/__watch?room=' + encodeURIComponent(room) + extra); }
+    catch (e) { setTimeout(function () { watch(room); }, 2000); return; }
+    state.socket = ws;
+    ws.onmessage = function (ev) {
+      var m; try { m = JSON.parse(ev.data); } catch (e) { return; }
+      if (!m || typeof m !== 'object') return;
+      if (m.t === 'kicked') { shut('kicked', m); return; }
+      if (m.t === 'closed') { shut('closed', m); return; }
+      if (m.t !== 'net') return;
+      state.facts = m;
+      if (typeof m.st === 'number') state.offset = m.st - Date.now();
+      if (m.round) state.round = m.round;
+      paint();
+    };
+    ws.onclose = function () { if (!(state.notice && state.notice.final)) setTimeout(function () { watch(room); }, 1500); };
+  }
+
+  // A room that ended, a game that is not watched, a kick: the page says so plainly and offers the way on.
+  function shut(kind, m) {
+    if (state.notice && state.notice.kind === kind) return;
+    var final = kind !== 'empty';
+    state.notice = { kind: kind, final: final };
+    if (final) { try { frame.src = 'about:blank'; } catch (e) {} if (state.socket) { try { state.socket.close(); } catch (e) {} } }
+    note.textContent = '';
+    var box = el('div', 'box');
+    var label = labelOf(state.room);
+    var heads = { empty: 'Everyone has left ' + label, kicked: 'You were removed from this room', closed: 'This room is closed', off: boot.name + ' is played, not watched', full: label + ' is full of watchers', none: 'Nobody is playing ' + boot.name + ' right now' };
+    var lines = {
+      empty: 'The players went on their way. Watch another room, or press Play: you start at once, with bots in the empty seats.',
+      kicked: (m && m.message) || 'The studio removed you from this room.',
+      closed: (m && m.message) || 'The studio closed this room.',
+      off: 'Its rooms are not shown to watchers. Press Play and you are in one.',
+      full: 'Every place to watch it from is taken. Try the busiest other room.',
+      none: 'This page finds a room the moment somebody starts one. Or press Play, and people who come to watch will see you.',
+    };
+    box.appendChild(el('h1', '', heads[kind] || heads.closed));
+    box.appendChild(el('p', '', lines[kind] || lines.closed));
+    var acts = el('div', 'acts');
+    var other = el('a', 'primary', kind === 'none' || kind === 'off' ? 'Play ' + boot.name : 'Watch another room');
+    other.href = kind === 'none' || kind === 'off' ? '/' + boot.game + '/play' : '/' + boot.game + '/watch?not=' + encodeURIComponent(state.room || '');
+    acts.appendChild(other);
+    if (kind !== 'none' && kind !== 'off') { var play = el('a', '', 'Play'); play.href = '/' + boot.game + '/play'; acts.appendChild(play); }
+    var back = el('a', '', 'Back to ' + boot.name); back.href = '/' + boot.game + '/'; acts.appendChild(back);
+    box.appendChild(acts);
+    note.appendChild(box);
+    note.hidden = false;
+    liveEl.classList.add('off');
+  }
+  function unshut() { if (state.notice && !state.notice.final) { state.notice = null; note.hidden = true; note.textContent = ''; liveEl.classList.remove('off'); } }
+
+  var drawn = '';
+  function paintStrip() {
+    var list = players();
+    var choose = canChoose();
+    var v = state.view || { seat: null, following: state.asked, why: '' };
+    var scores = state.scores || {};
+    var lead = null; var best = -Infinity;
+    list.forEach(function (p) { var s = scores[p.seat]; if (typeof s === 'number' && s > best) { best = s; lead = p.seat; } });
+    var sig = JSON.stringify([choose, v.seat, v.following, list.map(function (p) { return [p.seat, p.name, p.colour, scores[p.seat], Boolean(p.agent)]; }), lead, state.follows]);
+    if (sig === drawn) return;
+    drawn = sig;
+    strip.textContent = '';
+    function chip(target, key, build, pressed, extraCls) {
+      var b = el('button', 'chip' + (extraCls ? ' ' + extraCls : ''));
+      b.type = 'button';
+      b.setAttribute('aria-pressed', pressed ? 'true' : 'false');
+      if (!choose) { b.disabled = true; b.setAttribute('aria-disabled', 'true'); }
+      if (key) b.appendChild(el('span', 'k', key));
+      build(b);
+      b.addEventListener('click', function () { follow(target); });
+      strip.appendChild(b);
+      return b;
+    }
+    if (choose) chip('auto', 'A', function (b) { b.appendChild(svg(AUTO_ICON)); b.appendChild(el('span', 'nm', 'Auto')); }, v.following === 'auto');
+    list.forEach(function (p, i) {
+      var on = choose && v.following === p.seat;
+      var auto = choose && v.following === 'auto' && v.seat === p.seat;
+      chip(p.seat, i < 9 ? String(i + 1) : '', function (b) {
+        var dot = el('i', 'dot'); dot.style.background = colourOf(p); b.appendChild(dot);
+        b.appendChild(el('span', 'nm', p.name || 'A player'));
+        // An AI in the room is marked AI here too (section 17).
+        if (p.agent) b.appendChild(el('span', 'tag ai', 'AI'));
+        if (auto) b.appendChild(el('span', 'tag', 'auto'));
+        if (typeof scores[p.seat] === 'number') b.appendChild(el('span', 'sc' + (p.seat === lead && list.length > 1 ? ' lead' : ''), scores[p.seat]));
+        b.setAttribute('aria-label', (on || auto ? 'Watching ' : 'Watch ') + (p.name || 'a player'));
+      }, on, auto ? 'auto-on' : '');
+    });
+    if (choose) chip(null, 'O', function (b) { b.appendChild(svg(ROOM_ICON)); b.appendChild(el('span', 'nm', 'Whole room')); }, v.following === null);
+    if (choose && device !== 'phone') strip.appendChild(el('span', 'hint', '1–9 · A · O'));
+  }
+
+  function paint() {
+    var f = state.facts;
+    var list = players();
+    // The caption: whose view this is, and why it is the whole room when it is.
+    var v = state.view;
+    var head = 'Watching the whole room';
+    var sub = '';
+    var dotColour = null;
+    if (!state.attached || state.follows === null) { head = 'Joining ' + labelOf(state.room) + '…'; }
+    else if (!state.follows) sub = boot.name + ' shows watchers the whole room';
+    else if (!state.canFollow && state.why === 'seated-here') sub = 'You are playing in this room in another tab, so this one shows the whole room';
+    else if (!state.canFollow) sub = boot.name + ' keeps each player’s view to themselves';
+    else if (v && v.seat !== null) {
+      var who = list.filter(function (p) { return p.seat === v.seat; })[0];
+      head = 'Watching ' + (who ? who.name || 'a player' : 'a player');
+      dotColour = who ? colourOf(who) : null;
+      sub = v.following === 'auto' ? 'Auto · following the action' : '';
+    } else if (v && v.following === 'auto') sub = list.length ? 'Auto · waiting for the action' : 'Auto · nobody is playing yet';
+    capHead.textContent = '';
+    if (dotColour) { var d = el('span', 'dot'); d.style.background = dotColour; capHead.appendChild(d); }
+    capHead.appendChild(document.createTextNode(head));
+    capSub.textContent = sub;
+    capSub.hidden = !sub;
+    // The round's clock, in the relay's time.
+    var r = state.round;
+    if (r && isFinite(r.endsAt)) {
+      var left = Math.max(0, Math.ceil((r.endsAt - (Date.now() + state.offset)) / 1000));
+      clockEl.textContent = r.phase === 'over' ? 'Next round in ' + left : 'Round ' + r.n + ' · ' + Math.floor(left / 60) + ':' + String(left % 60).padStart(2, '0');
+      clockEl.hidden = false;
+    } else clockEl.hidden = true;
+    var eyes = f && f.counts ? Number(f.counts.watchers) || 0 : 0;
+    q1('[data-eyes]').hidden = eyes < 1;
+    q1('[data-eyes-n]').textContent = String(eyes);
+    paintStrip();
+    // Everyone left: say so after a moment (a reload is not a departure), and take it back if they return.
+    var people = f && f.counts ? Number(f.counts.players) || 0 : null;
+    if (people === 0 && state.attached) {
+      if (!state.emptySince) state.emptySince = Date.now();
+      if (Date.now() - state.emptySince > 6000 && !state.notice) shut('empty');
+    } else { state.emptySince = 0; if (people) unshut(); }
+  }
+  setInterval(paint, 500);
+
+  // Keys: 1-9 the n-th player, A Auto, O (or 0) the whole room, arrows the next or previous player, F full screen.
+  addEventListener('keydown', function (e) {
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    var k = e.key;
+    var list = players();
+    wake();
+    if (/^[1-9]$/.test(k)) { var p = list[Number(k) - 1]; if (p) follow(p.seat); e.preventDefault(); return; }
+    if (k === 'a' || k === 'A') { follow('auto'); return; }
+    if (k === 'o' || k === 'O' || k === '0') { follow(null); return; }
+    if (k === 'ArrowRight' || k === 'ArrowLeft') {
+      if (!list.length) return;
+      var cur = state.view && typeof state.view.seat === 'number' ? state.view.seat : null;
+      var i = list.map(function (p) { return p.seat; }).indexOf(cur);
+      var n = k === 'ArrowRight' ? (i + 1) % list.length : (i <= 0 ? list.length - 1 : i - 1);
+      follow(list[n].seat); e.preventDefault(); return;
+    }
+    if (k === 'f' || k === 'F') { try { if (document.fullscreenElement) document.exitFullscreen(); else document.documentElement.requestFullscreen(); } catch (e2) {} }
+  });
+
+  // The bars get out of the way while nobody touches anything; any touch, move or key brings them back.
+  var idleTimer = null;
+  function wake() { document.body.classList.remove('idle'); clearTimeout(idleTimer); idleTimer = setTimeout(function () { document.body.classList.add('idle'); }, 5000); }
+  ['pointermove', 'pointerdown', 'touchstart', 'wheel'].forEach(function (t) { addEventListener(t, wake, { passive: true }); });
+  wake();
+  // The frame never keeps the keys: a click in the game hands them back to the page.
+  addEventListener('blur', function () { setTimeout(function () { if (document.activeElement === frame) { try { frame.blur(); window.focus(); } catch (e) {} } }, 0); });
+
+  // A named room watches that room; no room: the busiest public room now (nothing is reserved), or a wait for one.
+  var askedRoom = params.get('room');
+  if (boot.room) start(boot.room);
+  else if (askedRoom !== null && /^[A-Za-z0-9_-]{1,32}$/.test(askedRoom)) start(askedRoom);
+  else {
+    var not = /^[A-Za-z0-9_,-]{1,140}$/.test(params.get('not') || '') ? params.get('not') : '';
+    var look = function () {
+      fetch('/' + boot.game + '/api/watch' + (not ? '?not=' + encodeURIComponent(not) : ''), { cache: 'no-store' })
+        .then(function (r) { return r.json(); })
+        .then(function (j) { if (j && j.room) { unshut(); state.notice = null; note.hidden = true; start(j.room); } else { if (!state.notice) shut('none'); state.notice.final = false; setTimeout(look, 10000); } })
+        .catch(function () { setTimeout(look, 10000); });
+    };
+    look();
+  }
+}());`;