@homie-rocks/studio 0.14.4 → 0.16.0

package/starters/gem-rush/src/main.ts

@@ -16,9 +16,22 @@
  * zone (gems inside it score double) is slow state on the keyed state channel,
  * so a joiner has it in its welcome and a promoted host inherits it.
  *
+ * WATCH ANY PLAYER (contract revision 5): a watcher (/<game>/watch) never
+ * takes a seat. `net.viewSeat` says whose view to draw; the camera follows that
+ * player's body as their own browser does, the board marks their row, and with
+ * nobody followed the whole arena shows. Waves call `net.spotlight(seat)`, so a
+ * watcher on Auto cuts to whoever just bumped.
+ *
+ * SERVERS AND THE SKILL DIAL (contract revision 6): the bots play at the room's
+ * dial (`net.skillOf(slot)`: how late they see, how well they aim, whether they
+ * fight for the hot zone, how often they bump), which the party votes in the
+ * play page; a hybrid server's AI seats are kept as AI bodies (the Roster's
+ * reserve, marked " · AI"), an AI with a pass takes one, and a humans-only
+ * server's bots are off. The game says so: `caps: ['skill', 'agents']`.
+ *
  * Canvas 2D on purpose: the point is the contract, in ~700 readable lines.
  */
-import { createNetplay, Roster, q, lerp, capMove, type RoleChange, type RoundInfo, type RoundResult, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
+import { createNetplay, Roster, q, lerp, capMove, PALETTE, AI_MARK, type RoleChange, type RoundInfo, type RoundResult, type Skill, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
 // The port toolkit's probe: what `homie-studio port check` reads for the owner tests (and sandbox + audio shims).
 import { exposePort } from '@homie-rocks/studio/port';
 
@@ -38,10 +51,12 @@ const KNOCK_RANGE = 110;
 const KNOCK_SPEED = 950;
 const KNOCK_MS = 420;
 const ZONE_MS = 12_000;
-const PALETTE = ['#8fe36a', '#ffd166', '#ef6f6c', '#6cb4ee', '#c792ea', '#f4a261', '#2ec4b6', '#ff8fab', '#a7c957', '#e9c46a', '#90e0ef', '#f28482'];
+/** The contract's 12 colours (PALETTE, NETPLAY.md section 3): a person wears their seat's, so the watch page's strip matches. */
+const colourOf = (slot: number, seat: number | null): string => PALETTE[(seat ?? slot) % PALETTE.length] as string;
 const BOT_NAMES = ['Rook', 'Vex', 'Moth', 'Kilo', 'Juno', 'Pike', 'Nyx', 'Ash'];
 const botName = (slot: number): string => BOT_NAMES[slot % BOT_NAMES.length] as string;
-const label = (name: string, bot: boolean): string => (bot ? `${name} · bot` : name);
+/** An AI's name already ends in " · AI" (the relay sees to it); a plain bot says bot. */
+const label = (name: string, bot: boolean): string => (name.endsWith(AI_MARK) ? name : bot ? `${name} · bot` : name);
 
 /* ------------------------------------------------------------ wire shapes */
 /** Snapshot: compact arrays, quantized. ~40 B per body, ~16 B per gem. (Reset epochs ride in the helper's `c` table.) */
@@ -66,10 +81,13 @@ interface Ckpt { round: RoundInfo; bodies: Body[]; gems: Gem[]; roster: Slot[];
  * Default `owner`: each browser moves its own body and the host bounds it.
  */
 const MOVEMENT: 'owner' | 'host' = (() => { try { return new URLSearchParams(location.search).get('movement') === 'host' ? 'host' : 'owner'; } catch { return 'owner'; } })();
-const net = createNetplay<Snap, Avatar, Ckpt>({ game: 'gem-rush', maxPlayers: MAX_SLOTS, movement: MOVEMENT, snapshotHz: 20, inputHz: 20, checkpointMs: 1000, checkpoint: () => checkpoint() });
+// caps: its bots read the dial ('skill'), and its Roster takes an AI's slot for it ('agents': the join passes p.agent).
+const net = createNetplay<Snap, Avatar, Ckpt>({ game: 'gem-rush', maxPlayers: MAX_SLOTS, movement: MOVEMENT, snapshotHz: 20, inputHz: 20, checkpointMs: 1000, caps: ['skill', 'agents'], checkpoint: () => checkpoint() });
+/** The Roster keeps the server's AI seats (revision 6): the policy is read whenever it fills. */
+const policy = () => net.policy;
 
 /* ------------------------------------------------------------ host state */
-let roster = new Roster({ min: MIN_SLOTS, max: MAX_SLOTS, botName });
+let roster = new Roster({ min: MIN_SLOTS, max: MAX_SLOTS, botName, policy });
 let bodies = new Map<number, Body>();
 let gems: Gem[] = [];
 let gemSeq = 0;
@@ -80,11 +98,15 @@ let hosting = false;
 let cheatResets = 0;
 let controlResets = 0;
 let predictionError = 0;
+/** Gems each slot picked up this round (a gem, whatever it scored): the dial's numbers (`pickups` probe). */
+let pickups = new Map<number, number>();
 
 /* ------------------------------------------------ this browser's avatar */
 const me = { x: W / 2, y: H / 2, vx: 0, vy: 0, kvx: 0, kvy: 0, knockUntil: 0, has: false };
 /** Offline (no shell) plays as a local seat 0, with keys or touch. */
 const mySeat = (): number | null => (net.offline ? 0 : net.seat);
+/** Whose view to draw: my own seat, or for a watcher the player it follows (null: the whole arena). */
+const viewSeat = (): number | null => (net.offline ? 0 : net.viewSeat);
 
 /* ------------------------------------------------------- replica view */
 const drawn = new Map<number, { x: number; y: number; seat: number; score: number; slot: number }>();
@@ -143,6 +165,8 @@ function startRound(n: number): void {
     hostMoved(b);
   }
   gems = Array.from({ length: GEM_COUNT }, newGem);
+  pickups = new Map();
+  sight.clear();
   round = { n, phase: 'live', startedAt: now, endsAt: now + ROUND_MS };
   setZone(newZone((zone?.n ?? 0) + 1));
   net.round(round);
@@ -154,7 +178,8 @@ function endRound(): void {
   if (!round) return;
   const now = net.now();
   const ranked = [...bodies.values()].sort((a, b) => b.score - a.score || Number(a.bot) - Number(b.bot) || a.slot - b.slot);
-  const results: RoundResult[] = ranked.map((b, i) => ({ slot: b.slot, seat: b.seat, name: b.name, score: b.score, bot: b.bot, place: i + 1 }));
+  const agentSlot = (slot: number): boolean => Boolean(roster.slots.find((x) => x.slot === slot)?.agent);
+  const results: RoundResult[] = ranked.map((b, i) => ({ slot: b.slot, seat: b.seat, name: b.name, score: b.score, bot: b.bot, place: i + 1, ...(agentSlot(b.slot) ? { agent: true as const } : {}) }));
   round = { n: round.n, phase: 'over', startedAt: now, endsAt: now + BREAK_MS, results };
   net.round(round);
 }
@@ -164,7 +189,7 @@ function becomeHost(e: RoleChange<Snap, Ckpt>): void {
   hosting = true;
   if (e.promoted) restore(e);
   else {
-    roster = new Roster({ min: MIN_SLOTS, max: MAX_SLOTS, botName });
+    roster = new Roster({ min: MIN_SLOTS, max: MAX_SLOTS, botName, policy });
     bodies = new Map();
     const seat = mySeat();
     if (seat !== null) roster.claim(seat, net.offline ? 'You' : net.name);
@@ -172,7 +197,7 @@ function becomeHost(e: RoleChange<Snap, Ckpt>): void {
     startRound((e.round?.n ?? 0) + 1);
   }
   // Whoever is connected now is who plays: seats that left during the gap become bots.
-  const peers = net.offline ? [{ seat: 0, name: 'You' }] : [...net.peers.values()].filter((p) => p.seat !== null);
+  const peers = net.offline ? [{ seat: 0, name: 'You' }] : [...net.peers.values()].filter((p) => p.seat !== null).map((p) => ({ seat: p.seat, name: p.name, agent: p.agent ?? null }));
   const { claimed } = roster.reconcile(peers);
   syncBodiesFromRoster();
   for (const s of claimed) { const b = bodies.get(s.slot); if (b && b.seat !== mySeat()) hostMoved(b); }
@@ -189,14 +214,14 @@ function becomeHost(e: RoleChange<Snap, Ckpt>): void {
 function restore(e: RoleChange<Snap, Ckpt>): void {
   const ck = e.ckpt?.d ?? null;
   if (ck) {
-    roster = Roster.from(ck.roster, { min: MIN_SLOTS, max: MAX_SLOTS, botName });
+    roster = Roster.from(ck.roster, { min: MIN_SLOTS, max: MAX_SLOTS, botName, policy });
     bodies = new Map(ck.bodies.map((b) => [b.slot, { ...b }]));
     gems = ck.gems.map((g) => ({ ...g }));
     gemSeq = ck.gemSeq;
     round = ck.round;
     tick = ck.tick;
   } else {
-    roster = Roster.from(e.roster ?? [], { min: MIN_SLOTS, max: MAX_SLOTS, botName });
+    roster = Roster.from(e.roster ?? [], { min: MIN_SLOTS, max: MAX_SLOTS, botName, policy });
     bodies = new Map();
     syncBodiesFromRoster();
   }
@@ -241,7 +266,8 @@ net.on('role', (e) => {
 });
 net.on('join', (p) => {
   if (!hosting || p.seat === null) return;
-  const c = roster.claim(p.seat, p.name);
+  // An AI takes a seat kept for AI, a person never does (revision 6: the Roster needs p.agent for that).
+  const c = roster.claim(p.seat, p.name, p.agent ? { role: p.agent.role, hands: p.agent.hands } : null);
   if (!c) return; // full: they watch
   syncBodiesFromRoster();
   const b = bodies.get(c.slot.slot);
@@ -256,6 +282,8 @@ net.on('leave', (p) => {
   syncBodiesFromRoster();
   publishRoster();
 });
+// The server's policy changed: its AI seats come (or go between rounds) at once.
+net.on('policy', () => { if (!hosting) return; roster.fill(); syncBodiesFromRoster(); publishRoster(); });
 net.on('event', (e) => {
   if (e.k === 'wave') addWave(e.d as { slot: number });
   if (e.k === 'knock') addWave(e.d as { slot: number }, true);
@@ -342,6 +370,9 @@ function knock(b: Body, fx: number, fy: number): void {
 }
 function addWave(d: { slot: number }, isKnock = false): void {
   const pos = hosting ? bodies.get(d.slot) : [...drawn.values()].find((x) => x.slot === d.slot);
+  // The action, for a watcher on Auto: whoever waved (a person, never a bot).
+  const waver = pos && 'bot' in pos ? (pos.bot ? null : pos.seat) : pos && pos.seat >= 0 ? pos.seat : null;
+  if (!isKnock) net.spotlight(waver);
   const mineSlot = hosting ? [...bodies.values()].find((x) => x.seat !== null && x.seat === mySeat())?.slot : [...drawn.values()].find((x) => x.seat === net.seat)?.slot;
   const at = mineSlot === d.slot && me.has ? me : pos;
   if (!at) return;
@@ -408,28 +439,69 @@ function stepKnocked(b: Body, dt: number): void {
   b.vx = b.kvx; b.vy = b.kvy;
 }
 
+/**
+ * THE BOTS, AT THE ROOM'S DIAL (NETPLAY.md section 17). A bot re-reads the world only every `reactionMs` (what it
+ * last noticed is where it heads, and a miss costs it that long again), aims up to 200 px off at aimNoise 1, leaves
+ * the hot zone to the people at positioning 0 and fights for it at 1, and waves at a rival in reach about
+ * `aggression x 0.8` times a second. Rookie is beatable by anyone, Maxed by few: measured with the
+ * `pickups` probe over 60 s rounds, a Maxed bot picks up a little over twice the gems of a Rookie.
+ */
+const sight = new Map<number, { at: number; tx: number; ty: number; arrived?: boolean }>();
+
 function stepBots(dt: number): void {
   const taken = new Set<number>();
   const now = net.now();
   for (const b of bodies.values()) {
     if (!b.bot) continue;
     if (b.knockUntil > now) { stepKnocked(b, dt); continue; }
-    let best: Gem | null = null; let bd = Infinity;
-    for (const g of gems) {
-      if (taken.has(g.id)) continue;
-      const d = Math.hypot(g.x - b.x, g.y - b.y);
-      if (d < bd) { bd = d; best = g; }
+    const s: Skill = net.skillOf(b.slot); // Fair when nobody set a dial
+    let eye = sight.get(b.slot);
+    if (!eye || now - eye.at >= s.reactionMs) { // REACTION TIME
+      const g = pickGem(b, taken, s); // POSITIONING
+      const miss = 200 * s.aimNoise; // AIM NOISE: up to 200 px off at 1
+      eye = { at: now, tx: g ? g.x + (Math.random() - 0.5) * miss : b.tx, ty: g ? g.y + (Math.random() - 0.5) * miss : b.ty };
+      sight.set(b.slot, eye);
+      if (g) taken.add(g.id);
     }
-    if (best) { taken.add(best.id); b.tx = best.x; b.ty = best.y; }
-    const dx = b.tx - b.x; const dy = b.ty - b.y; const len = Math.hypot(dx, dy) || 1;
+    b.tx = eye.tx; b.ty = eye.ty;
+    const rival = nearestBody(b, KNOCK_RANGE); // AGGRESSION: waves at a rival in reach
+    if (rival && round?.phase === 'live' && Math.random() < s.aggression * 0.8 * dt) hostWave(b);
+    const dx = b.tx - b.x; const dy = b.ty - b.y; const dist = Math.hypot(dx, dy);
+    const len = dist || 1;
+    // Arrived where it aimed: it stands there, and notices what it missed only a reaction later.
+    if (dist < 6 && !eye.arrived) { eye.arrived = true; eye.at = now; }
+    const speed = dist < 6 ? 0 : BOT_SPEED;
     const k = Math.min(1, dt * 5);
-    b.vx += ((dx / len) * BOT_SPEED - b.vx) * k;
-    b.vy += ((dy / len) * BOT_SPEED - b.vy) * k;
+    b.vx += ((dx / len) * speed - b.vx) * k;
+    b.vy += ((dy / len) * speed - b.vy) * k;
     b.x = Math.max(R_AV, Math.min(W - R_AV, b.x + b.vx * dt));
     b.y = Math.max(R_AV, Math.min(H - R_AV, b.y + b.vy * dt));
   }
 }
 
+/** Positioning: 0 leaves the hot zone to the people, 1 fights for it. */
+function pickGem(b: Body, taken: Set<number>, s: Skill): Gem | null {
+  let best: Gem | null = null; let bd = Infinity;
+  for (const g of gems) {
+    if (taken.has(g.id)) continue;
+    const hot = zone !== null && Math.hypot(g.x - zone.x, g.y - zone.y) < zone.r;
+    const d = Math.hypot(g.x - b.x, g.y - b.y) * (hot ? 1.5 - s.positioning : 1);
+    if (d < bd) { bd = d; best = g; }
+  }
+  return best;
+}
+
+/** The nearest other body within `range` (a bot's rival), or null. */
+function nearestBody(b: Body, range: number): Body | null {
+  let best: Body | null = null; let bd = range;
+  for (const o of bodies.values()) {
+    if (o === b) continue;
+    const d = Math.hypot(o.x - b.x, o.y - b.y);
+    if (d < bd) { bd = d; best = o; }
+  }
+  return best;
+}
+
 function stepHost(dt: number): void {
   tick += 1;
   const seat = mySeat();
@@ -471,6 +543,7 @@ function stepHost(dt: number): void {
         const g = gems[i] as Gem;
         if (Math.hypot(g.x - b.x, g.y - b.y) < R_AV + R_GEM) {
           b.score += zone && Math.hypot(g.x - zone.x, g.y - zone.y) < zone.r ? 2 : 1;
+          pickups.set(b.slot, (pickups.get(b.slot) ?? 0) + 1);
           gems[i] = newGem();
         }
       }
@@ -527,7 +600,14 @@ function resize(): void {
 addEventListener('resize', resize);
 resize();
 
-const cam = { x: W / 2, y: H / 2 };
+const cam = { x: W / 2, y: H / 2, scale: 0 };
+/** Where a seat's body is drawn now (host: the real body; replica: interpolated), or null. */
+function seatPos(seat: number): { x: number; y: number } | null {
+  if (seat === mySeat() && me.has && !net.watching) return me;
+  if (hosting) { const b = [...bodies.values()].find((x) => !x.bot && x.seat === seat); return b ? { x: b.x, y: b.y } : null; }
+  const d = [...drawn.values()].find((x) => x.seat === seat);
+  return d ? { x: d.x, y: d.y } : null;
+}
 const gemGlow = (() => {
   const g = ctx.createRadialGradient(0, 0, 0, 0, 0, R_GEM * 2.8);
   g.addColorStop(0, 'rgba(255,209,102,0.55)'); g.addColorStop(0.4, 'rgba(255,170,60,0.18)'); g.addColorStop(1, 'rgba(255,150,40,0)');
@@ -536,9 +616,15 @@ const gemGlow = (() => {
 function draw(t: number): void {
   const cw = innerWidth; const ch = innerHeight;
   const phone = Math.min(cw, ch) <= 540;
-  const spectating = mySeat() === null;
-  const scale = spectating ? Math.min(cw / (W + 80), ch / (H + 80)) : Math.min(cw, ch) / (phone ? 560 : 820);
-  const target = spectating || !me.has ? { x: W / 2, y: H / 2 } : me;
+  // The view: my own body, or (a watcher) the followed player's, drawn exactly as their own browser frames it.
+  const view = viewSeat();
+  const followed = net.watching && view !== null ? seatPos(view) : null;
+  const overview = net.watching ? !followed : mySeat() === null;
+  const wantScale = overview ? Math.min(cw / (W + 80), ch / (H + 80)) : Math.min(cw, ch) / (phone ? 560 : 820);
+  // A watcher's switch glides: the zoom and the pan ease over a few frames, never a cut.
+  cam.scale = cam.scale ? cam.scale + (wantScale - cam.scale) * 0.12 : wantScale;
+  const scale = cam.scale;
+  const target = net.watching ? (followed ?? { x: W / 2, y: H / 2 }) : overview || !me.has ? { x: W / 2, y: H / 2 } : me;
   cam.x += (target.x - cam.x) * 0.2; cam.y += (target.y - cam.y) * 0.2;
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   const bg = ctx.createRadialGradient(cw / 2, ch / 2, 0, cw / 2, ch / 2, Math.max(cw, ch) * 0.8);
@@ -588,18 +674,20 @@ function draw(t: number): void {
 
   // avatars
   const names = new Map<number, Slot>((net.slots ?? roster.slots).map((s) => [s.slot, s]));
+  // `mine`: the body whose view this is: my own, or the player a watcher follows (named, never "You").
   const list: { slot: number; seat: number | null; x: number; y: number; bot: boolean; name: string; mine: boolean }[] = [];
+  const isView = (seat: number | null, bot: boolean): boolean => !bot && seat !== null && seat === view;
   if (hosting) {
-    for (const b of bodies.values()) list.push({ slot: b.slot, seat: b.seat, x: b.x, y: b.y, bot: b.bot, name: b.name, mine: b.seat !== null && b.seat === mySeat() });
+    for (const b of bodies.values()) list.push({ slot: b.slot, seat: b.seat, x: b.x, y: b.y, bot: b.bot, name: b.name, mine: isView(b.seat, b.bot) });
   } else {
     for (const d of drawn.values()) {
-      const mine = d.seat >= 0 && d.seat === net.seat;
+      const own = !net.watching && d.seat >= 0 && d.seat === net.seat;
       const s = names.get(d.slot);
-      list.push({ slot: d.slot, seat: d.seat >= 0 ? d.seat : null, x: mine && me.has ? me.x : d.x, y: mine && me.has ? me.y : d.y, bot: d.seat < 0, name: s?.name ?? (d.seat >= 0 ? `Player ${d.seat + 1}` : botName(d.slot)), mine });
+      list.push({ slot: d.slot, seat: d.seat >= 0 ? d.seat : null, x: own && me.has ? me.x : d.x, y: own && me.has ? me.y : d.y, bot: d.seat < 0, name: s?.name ?? (d.seat >= 0 ? `Player ${d.seat + 1}` : botName(d.slot)), mine: isView(d.seat >= 0 ? d.seat : null, d.seat < 0) });
     }
   }
   for (const a of list) {
-    const colour = PALETTE[a.slot % PALETTE.length] as string;
+    const colour = colourOf(a.slot, a.bot ? null : a.seat);
     ctx.globalAlpha = a.bot ? 0.62 : 1;
     ctx.fillStyle = colour; ctx.beginPath(); ctx.arc(a.x, a.y, R_AV, 0, Math.PI * 2); ctx.fill();
     ctx.fillStyle = 'rgba(0,0,0,0.35)'; ctx.beginPath(); ctx.arc(a.x, a.y, R_AV * 0.45, 0, Math.PI * 2); ctx.fill();
@@ -607,7 +695,7 @@ function draw(t: number): void {
     ctx.globalAlpha = 1;
     ctx.font = `600 ${Math.round(15 / Math.max(0.6, scale))}px ui-sans-serif, system-ui, sans-serif`;
     ctx.textAlign = 'center'; ctx.fillStyle = a.mine ? '#ffffff' : 'rgba(232,236,245,0.8)';
-    ctx.fillText(a.mine ? 'You' : label(a.name, a.bot), a.x, a.y - R_AV - 12);
+    ctx.fillText(a.mine && !net.watching ? 'You' : label(a.name, a.bot), a.x, a.y - R_AV - 12);
   }
   ctx.restore();
 
@@ -640,11 +728,11 @@ function hud(cw: number, ch: number, phone: boolean, list: { slot: number; name:
   ctx.textAlign = 'right';
   rows.forEach((a, i) => {
     ctx.fillStyle = a.mine ? '#ffffff' : a.bot ? 'rgba(232,236,245,0.55)' : 'rgba(232,236,245,0.85)';
-    ctx.fillText(`${a.mine ? 'You' : label(a.name, a.bot)}  ${scores.get(a.slot) ?? 0}`, cw - pad, top + 18 + i * (phone ? 20 : 22));
+    ctx.fillText(`${a.mine && !net.watching ? 'You' : label(a.name, a.bot)}  ${scores.get(a.slot) ?? 0}`, cw - pad, top + 18 + i * (phone ? 20 : 22));
   });
   // role badge
   ctx.textAlign = 'left'; ctx.font = '600 11px ui-monospace, Menlo, monospace'; ctx.fillStyle = 'rgba(125,240,255,0.7)';
-  ctx.fillText(net.offline ? 'OFFLINE HOST' : net.role.toUpperCase(), pad, ch - pad);
+  ctx.fillText(net.offline ? 'OFFLINE HOST' : net.watching ? 'WATCHING' : net.role.toUpperCase(), pad, ch - pad);
   if (r && r.phase === 'over' && r.results) {
     const w = Math.min(360, cw - 40); const h = 44 + Math.min(6, r.results.length) * 26;
     const x = (cw - w) / 2; const y = (ch - h) / 2;
@@ -653,10 +741,11 @@ function hud(cw: number, ch: number, phone: boolean, list: { slot: number; name:
     ctx.textAlign = 'center'; ctx.fillStyle = '#7df0ff'; ctx.font = '700 18px ui-sans-serif, system-ui, sans-serif';
     ctx.fillText(`Round ${r.n} results`, cw / 2, y + 28);
     ctx.font = '600 16px ui-sans-serif, system-ui, sans-serif';
+    const view = viewSeat();
     r.results.slice(0, 6).forEach((row, i) => {
-      const mine = row.seat !== null && row.seat === mySeat();
+      const mine = !row.bot && row.seat !== null && row.seat === view;
       ctx.fillStyle = mine ? '#ffffff' : row.bot ? 'rgba(232,236,245,0.6)' : '#e8ecf5';
-      ctx.fillText(`${row.place}. ${mine ? 'You' : label(row.name, row.bot)} — ${row.score}`, cw / 2, y + 56 + i * 26);
+      ctx.fillText(`${row.place}. ${mine && !net.watching ? 'You' : label(row.name, row.bot)}${mine && net.watching ? ' ◂' : ''} — ${row.score}`, cw / 2, y + 56 + i * 26);
     });
   }
   if (!net.offline && !net.connected && net.role !== 'host') {
@@ -691,6 +780,10 @@ net.expose({
   },
   frames: () => frames,
   scores: () => (hosting ? [...bodies.values()].map((b) => ({ slot: b.slot, seat: b.seat, bot: b.bot, score: b.score })) : [...drawn.values()].map((d) => ({ slot: d.slot, seat: d.seat >= 0 ? d.seat : null, bot: d.seat < 0, score: d.score }))),
+  /** Host: gems each slot picked up this round, the round's age, and the dial each bot plays at (the dial's numbers). */
+  pickups: () => (hosting ? { round: round ? { n: round.n, phase: round.phase, ageMs: net.now() - round.startedAt } : null, slots: [...bodies.values()].map((b) => ({ slot: b.slot, bot: b.bot, gems: pickups.get(b.slot) ?? 0, level: b.bot ? net.skillOf(b.slot).level : null })) } : null),
+  /** Host: when each bot last looked (its reaction clock). */
+  sight: () => (hosting ? [...sight.entries()].map(([slot, e]) => ({ slot, at: e.at })) : null),
   waves: () => wavesSeen,
   knocks: () => knocksSeen,
   zone: () => zone,
@@ -699,6 +792,8 @@ net.expose({
   movement: () => MOVEMENT,
   controlResets: () => controlResets,
   predictionError: () => predictionError,
+  /** Where the camera looks and whose view it is (a watcher following a player: their body, under the camera). */
+  camera: () => ({ x: cam.x, y: cam.y, scale: cam.scale, view: viewSeat() }),
   /** performance.now() of the first keyed-state value and the first live snapshot this browser received. */
   arrivals: () => ({ firstStateAt, firstSnapAt }),
   /** Harness hook (host only): knock the body of `seat` back, toward the middle of the arena. */

package/worker/account-page.mjs

@@ -160,6 +160,11 @@ export function accountPage(cat, { origin = '', next = '/account/', owner = null
     <label for="acct-email">Email</label><input id="acct-email" data-email type="email" autocomplete="email">
     <div class="row"><button class="ghost" type="button" data-email-save>Send a confirmation</button><button class="ghost" type="button" data-email-remove hidden>Remove it</button></div>
   </div>` : ''}
+  <div class="card" data-servers-card hidden>
+    <h2>Your servers</h2>
+    <p>The servers you belong to in this studio's games. Your home server is where Play takes you.</p>
+    <ul class="keys-list" data-servers></ul>
+  </div>
   <div class="card">
     <h2>Your data</h2>
     <p>Download everything this studio keeps about you (your saves in every game, your stats, your memorials), or delete it all.</p>
@@ -230,6 +235,27 @@ export const ACCOUNT_JS = `${PASSKEY_JS}
       $('[data-email-remove]').hidden = !me.email;
     }
     keys();
+    servers();
+  }
+
+  // Your servers (0.16.0): each one, ★ for home, and Leave (a player's own choice; the door may let them back in).
+  function servers() {
+    var list = Array.isArray(me.servers) ? me.servers : [];
+    var card = $('[data-servers-card]'); var ul = $('[data-servers]');
+    if (!card || !ul) return;
+    card.hidden = !list.length; ul.textContent = '';
+    list.forEach(function (m) {
+      var li = document.createElement('li');
+      var a = document.createElement('a'); a.href = '/' + m.game + '/s/' + m.server + '/'; a.textContent = (m.home ? '★ ' : '') + m.server + ' · ' + m.game + (m.role !== 'member' ? ' · ' + m.role : '');
+      li.appendChild(a);
+      var b = document.createElement('button'); b.type = 'button'; b.className = 'ghost'; b.textContent = 'Leave';
+      b.addEventListener('click', function () {
+        fetch('/' + m.game + '/s/' + m.server + '/home', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ join: false }) })
+          .then(function (r) { return r.json(); }).then(function (x) { if (!x.ok) throw new Error(x.message || 'That did not work.'); me.servers = list.filter(function (y) { return y !== m; }); servers(); say('You left ' + m.server + '.', 'good'); }).catch(fail);
+      });
+      if (m.role === 'member') li.appendChild(b);
+      ul.appendChild(li);
+    });
   }
 
   function keys() {

package/worker/agents.mjs

@@ -0,0 +1,238 @@
+/**
+ * AGENT SEATS (@homie-rocks/studio 0.16.0, NETPLAY.md section 17): an AI that sits in a room's seat the way a phone
+ * does, always marked AI, and the skill dial every game's bots can read.
+ *
+ *   SKILLS / skillPreset   the dial: five levels, one shape everywhere ({ level, name, reactionMs, aimNoise,
+ *                          aggression, positioning }); netplay/netplay.ts has the same table (a test keeps them equal)
+ *   AI_MARK / aiName       every agent's name ends in exactly " · AI"; a person's name never ends in an AI or bot mark
+ *   passes                 an agent pass is one AI's way into a seat: `hap_<id>_<secret>`, shown once; D1 keeps only
+ *                          the SHA-256 of the whole pass (agent_passes). A ticket names it as the holder `a-<id>`.
+ *   sitRoute               POST /<game>/api/agent with `Authorization: Bearer hap_…`: a room with people in it, a
+ *                          ticket, the socket and (hands `self`) the game's frame to load
+ *   fillSpot               the fill-a-spot hook: nothing issues service passes yet (a money decision), so it is null
+ *
+ * Nothing here imports the rest of the Worker, so the relay (room.mjs) can use the dial and the names as they are.
+ */
+
+/** The skill dial (DESIGN D8; NETPLAY.md section 17). Level 3, Fair, is what the port kit's bots always were. */
+export const SKILLS = Object.freeze([
+  Object.freeze({ level: 1, name: 'Rookie', reactionMs: 650, aimNoise: 0.55, aggression: 0.1, positioning: 0.1, card: 'stays at the back, misses a lot' }),
+  Object.freeze({ level: 2, name: 'Steady', reactionMs: 420, aimNoise: 0.3, aggression: 0.3, positioning: 0.35, card: 'helps, never steals the show' }),
+  Object.freeze({ level: 3, name: 'Fair', reactionMs: 250, aimNoise: 0.15, aggression: 0.5, positioning: 0.5, card: 'plays like a regular' }),
+  Object.freeze({ level: 4, name: 'Strong', reactionMs: 170, aimNoise: 0.07, aggression: 0.7, positioning: 0.75, card: 'keeps up with good players' }),
+  Object.freeze({ level: 5, name: 'Maxed', reactionMs: 110, aimNoise: 0.02, aggression: 0.9, positioning: 0.95, card: 'front-line tank, rarely misses' }),
+]);
+/** Kids servers: the dial's ceiling and the most aggression any AI may show. */
+export const KIDS = Object.freeze({ levelMax: 3, aggression: 0.3 });
+
+/** A level as its preset (a copy): 1..5, Fair when it is not a number; a kids room caps it at 3 and aggression at 0.3. */
+export function skillPreset(n, { kids = false } = {}) {
+  const top = kids ? KIDS.levelMax : 5;
+  const level = Math.max(1, Math.min(top, Math.round(Number(n)) || 3));
+  const s = { ...SKILLS[level - 1] };
+  if (kids) s.aggression = Math.min(s.aggression, KIDS.aggression);
+  return s;
+}
+
+/* ------------------------------------------------------------------ names */
+
+/** The exact mark every agent's name ends with (DESIGN D7): it survives an old game that only draws `name`. */
+export const AI_MARK = ' · AI';
+/**
+ * An AI or bot mark at the end of a name, as its own word after a space or a separator: "Ada · AI", "Bo (AI)",
+ * "Cy [bot]", "Di - A.I.". A name that is only "Ai" (a person's name) is not one.
+ */
+const AI_TAIL = /[\s·•∙⋅・|:_\-–—(\[{]+(?:a\.?\s?i\.?|bots?)[\s)\]}.!·•∙⋅・|:_\-–—]*$/iu;
+const oneLine = (v, max) => String(v ?? '').normalize('NFKC').replace(/[\u0000-\u001f\u007f-\u009f\u200b-\u200f\u2028-\u202e\u2060-\u206f\ufeff]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, max);
+
+/** Whether a name ends in an AI or bot mark. */
+export const isAiName = (name) => AI_TAIL.test(String(name ?? '').trim());
+
+/** A name with every AI or bot mark taken off its end: what a person's typed name becomes (they cannot claim one). */
+export function stripAi(name) {
+  let s = oneLine(name, 64);
+  for (let i = 0; i < 6 && AI_TAIL.test(s); i += 1) s = s.replace(AI_TAIL, '').trim();
+  return s.replace(/[\s·•∙⋅・|:_\-–—(\[{]+$/u, '').trim();
+}
+
+/** An agent's name as every room shows it: its label (at most 16 characters, no mark of its own) and " · AI". */
+export function aiName(label) {
+  const base = [...stripAi(label)].slice(0, 16).join('').trim();
+  return `${base || 'Agent'}${AI_MARK}`;
+}
+
+/* ------------------------------------------------------------------ the wire's facts (Worker → Table) */
+
+/** JSON as base64url (no padding), for the Worker's own `pol` and `ag` values on the Table's address. */
+export function encodeFacts(value) {
+  const bytes = new TextEncoder().encode(JSON.stringify(value));
+  let s = '';
+  for (const b of bytes) s += String.fromCharCode(b);
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+/** The reverse, or null for anything that is not one (at most 4 KB). */
+export function decodeFacts(text) {
+  const t = String(text ?? '');
+  if (!t || t.length > 4096 || !/^[A-Za-z0-9_-]+$/.test(t)) return null;
+  try {
+    const s = atob(t.replace(/-/g, '+').replace(/_/g, '/'));
+    const bytes = Uint8Array.from(s, (c) => c.charCodeAt(0));
+    return JSON.parse(new TextDecoder().decode(bytes));
+  } catch { return null; }
+}
+
+/* ------------------------------------------------------------------ passes */
+
+export const PASS_KINDS = Object.freeze(['owner', 'guest', 'service']);
+export const PASS_ROLES = Object.freeze(['party', 'guide', 'player']);
+export const PASS_HANDS = Object.freeze(['self', 'host']);
+export const PASS_ID = /^[a-f0-9]{10}$/;
+const PASS_TOKEN = /^hap_([a-f0-9]{10})_([A-Za-z0-9_-]{40})$/;
+const GAME_ID = /^[a-z0-9][a-z0-9-]{0,39}$/;
+const SERVER_ID = /^[a-z0-9][a-z0-9-]{1,19}$/;
+const DAY = 86_400_000;
+/** An agent's ticket lasts as long as a player's (12 hours); a pass lasts what the owner said, or until revoked. */
+export const AGENT_TICKET_MS = 12 * 3600_000;
+
+function randomText(bytes) {
+  const raw = new Uint8Array(bytes);
+  crypto.getRandomValues(raw);
+  let s = '';
+  for (const b of raw) s += String.fromCharCode(b);
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+function randomHex(bytes) {
+  const raw = new Uint8Array(bytes);
+  crypto.getRandomValues(raw);
+  return [...raw].map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+async function sha256(text) {
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
+  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+/** A pass as the office, the CLI and the MCP see it: never its secret. */
+export function passView(r, now = Date.now()) {
+  if (!r) return null;
+  const expiresAt = r.expires_at === null || r.expires_at === undefined ? null : Number(r.expires_at);
+  const revoked = Number(r.revoked) === 1;
+  return {
+    id: r.id, label: r.label, name: aiName(r.label), kind: r.kind, role: r.role, hands: r.hands,
+    game: r.game ?? null, server: r.server ?? null, issuer: r.issuer ?? 'owner', expiresAt, revoked, createdAt: Number(r.created_at),
+    live: !revoked && (expiresAt === null || expiresAt > now),
+  };
+}
+
+/**
+ * A new pass (the owner's office): `{ ok, pass, secret }`, the secret shown this once. A label is what the relay
+ * shows ("Claude" plays as "Claude · AI"). A fill-a-spot service has no issuer yet (DESIGN section 12: money).
+ */
+export async function passCreate(env, { label, kind = 'owner', role = 'party', hands = 'self', game = null, server = null, days = null, issuer = 'owner' } = {}) {
+  if (!env?.DB) return { ok: false, error: 'no-db', message: 'This studio has no D1 for agent passes.' };
+  const name = [...stripAi(label)].slice(0, 16).join('').trim();
+  if (!name || !/[\p{L}\p{N}]/u.test(name)) return { ok: false, error: 'label', message: 'label is the name the AI plays under (1 to 16 letters or digits; " · AI" is added)' };
+  if (kind === 'service') return { ok: false, error: 'service', message: 'Passes for a fill-a-spot service come later; nothing issues them yet.' };
+  if (!PASS_KINDS.includes(kind)) return { ok: false, error: 'kind', message: 'kind is owner or guest' };
+  if (!PASS_ROLES.includes(role)) return { ok: false, error: 'role', message: 'role is party, guide or player' };
+  if (!PASS_HANDS.includes(hands)) return { ok: false, error: 'hands', message: 'hands is self (the AI runs the game itself) or host (the host\'s bot code moves it)' };
+  if (game !== null && !GAME_ID.test(String(game))) return { ok: false, error: 'game', message: 'game is one of this studio\'s game ids, or leave it out for any' };
+  if (server !== null && !SERVER_ID.test(String(server))) return { ok: false, error: 'server', message: 'server is a server id, or leave it out for any that lets AI in' };
+  const id = randomHex(5);
+  const secret = `hap_${id}_${randomText(30)}`;
+  const now = Date.now();
+  const d = days === null || days === undefined ? null : Math.max(1, Math.min(365, Math.floor(Number(days)) || 7));
+  const row = { id, label: name, kind, role, hands, game, server, issuer: String(issuer ?? 'owner').slice(0, 40), expires_at: d ? now + d * DAY : null, revoked: 0, created_at: now };
+  await env.DB.prepare('INSERT INTO agent_passes (id, hash, label, kind, role, hands, game, server, issuer, expires_at, revoked, created_at) VALUES (?1, ?2, ?3, ?4, ?5, ?6, ?7, ?8, ?9, ?10, 0, ?11)')
+    .bind(id, await sha256(secret), name, kind, role, hands, game, server, row.issuer, row.expires_at, now).run();
+  return { ok: true, pass: passView(row, now), secret };
+}
+
+/** The pass a `hap_…` secret is, when it is this studio's and still good; else null. */
+export async function passOf(env, token) {
+  const m = PASS_TOKEN.exec(String(token ?? '').trim());
+  if (!m || !env?.DB) return null;
+  let r = null;
+  try { r = await env.DB.prepare('SELECT * FROM agent_passes WHERE hash = ?1').bind(await sha256(m[0])).first(); } catch { return null; }
+  if (!r || r.id !== m[1]) return null;
+  const v = passView(r);
+  return v.live ? v : null;
+}
+
+/** A pass by its id (a ticket's `a-<id>`), live or not: null when there is none. */
+export async function passById(env, id) {
+  if (!PASS_ID.test(String(id ?? '')) || !env?.DB) return null;
+  try { return passView(await env.DB.prepare('SELECT * FROM agent_passes WHERE id = ?1').bind(id).first()); } catch { return null; }
+}
+
+export async function passRevoke(env, id) {
+  if (!PASS_ID.test(String(id ?? ''))) return { ok: false, error: 'id', message: 'id is the pass\'s id (10 letters and digits)' };
+  const r = await env.DB.prepare('UPDATE agent_passes SET revoked = 1 WHERE id = ?1 RETURNING id').bind(id).first();
+  return r ? { ok: true, revoked: id } : { ok: false, error: 'no-pass', message: 'No such pass.' };
+}
+
+/** Every pass (newest first), for one game or all: { id, label, name, kind, role, hands, game, server, live, … }. */
+export async function passList(env, { game = null } = {}) {
+  try {
+    const { results } = game
+      ? await env.DB.prepare('SELECT * FROM agent_passes WHERE game = ?1 OR game IS NULL ORDER BY created_at DESC LIMIT 200').bind(game).all()
+      : await env.DB.prepare('SELECT * FROM agent_passes ORDER BY created_at DESC LIMIT 200').all();
+    return (results ?? []).map((r) => passView(r));
+  } catch { return []; }
+}
+
+/** What a room is told about an agent (`peer.agent`): its pass, role, hands, and who it is for. */
+export const agentFacts = (pass) => ({ pass: pass.id, role: pass.role, hands: pass.hands, by: pass.kind === 'owner' ? 'studio' : pass.kind });
+
+/**
+ * Why this pass may not sit here, or null when it may: the server's policy (humans-only lets no AI in), the pass's
+ * own game and server, and a game that is not public (only the owner's own passes open it).
+ */
+export function passRefusal(pass, { game, server, policy, launch = 'public' }) {
+  if (!pass || !pass.live) return { status: 403, error: 'agent-pass', message: 'That agent pass is revoked, ended, or not this studio\'s.' };
+  if (pass.game && pass.game !== game) return { status: 403, error: 'agent-scope', message: `This pass is for ${pass.game}, not ${game}.` };
+  if (pass.server && pass.server !== server) return { status: 403, error: 'agent-scope', message: `This pass is for the server ${pass.server}.` };
+  if (policy?.kind === 'humans-only') return { status: 403, error: 'agents-off', message: 'This server is for humans only' };
+  if (launch !== 'public' && pass.kind !== 'owner') return { status: 403, error: 'not-open', message: 'This game is not open to you.' };
+  return null;
+}
+
+/**
+ * POST /<game>/api/agent (Bearer pass): a seat for an AI. Strangers are never started a room by an AI (DESIGN D9):
+ * the Lobby offers only a room of the server's pool that has people in it. Hands `self`: load `frame` (the game,
+ * which plays as the AI); hands `host`: open `ws` and say hello with `agent: { hands: 'host' }` (the host's bot code
+ * moves the body; NETPLAY.md section 17).
+ *
+ * `deps`: { meta, launch, serverOf(id) -> server | null, policyOf(server) -> Policy, join(server, policy) -> room | null,
+ *           ticketFor(sub) -> ticket }
+ */
+export async function sitRoute(request, env, url, deps) {
+  const json = (body, status = 200) => new Response(`${JSON.stringify(body)}\n`, { status, headers: { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store, private' } });
+  if (request.method !== 'POST') return json({ ok: false, error: 'method', message: 'POST, with Authorization: Bearer <agent pass>' }, 405);
+  const bearer = /^Bearer\s+(\S+)$/i.exec(request.headers.get('authorization') ?? '')?.[1] ?? '';
+  const pass = await passOf(env, bearer);
+  if (!pass) return json({ ok: false, error: 'agent-pass', message: 'An AI sits with an agent pass from the studio\'s owner (homie-studio agents pass).' }, 401);
+  let body = {};
+  try { const t = await request.text(); body = t ? JSON.parse(t) : {}; } catch { return json({ ok: false, error: 'json' }, 400); }
+  const wanted = typeof body?.server === 'string' && SERVER_ID.test(body.server) ? body.server : pass.server ?? 'public';
+  const server = deps.serverOf(wanted);
+  if (!server || server.state !== 'open') return json({ ok: false, error: 'no-server', message: `No open server called ${wanted} here.` }, 404);
+  const policy = deps.policyOf(server);
+  const why = passRefusal(pass, { game: deps.meta.id, server: server.id, policy, launch: deps.launch });
+  if (why) return json({ ok: false, ...why }, why.status);
+  const room = await deps.join(server, policy);
+  if (!room) return json({ ok: false, error: 'no-room', message: 'Nobody is playing on this server right now: an AI never starts a room. Try again when people are here.' }, 409);
+  const ticket = await deps.ticketFor(`a-${pass.id}`);
+  if (!ticket) return json({ ok: false, error: 'no-ticket', message: 'This studio cannot mint tickets yet (its D1).' }, 503);
+  const ws = `${url.protocol === 'https:' ? 'wss' : 'ws'}://${url.host}/${deps.meta.id}/__net?room=${encodeURIComponent(room)}&t=${encodeURIComponent(ticket)}`;
+  return json({
+    ok: true, game: deps.meta.id, server: server.id, room, ticket, name: aiName(pass.label), role: pass.role, hands: pass.hands, policy: { kind: policy.kind, level: policy.level, levelMax: policy.levelMax },
+    ws, ...(pass.hands === 'self' ? { frame: `${url.origin}/${deps.meta.id}/__game/?room=${encodeURIComponent(room)}&t=${encodeURIComponent(ticket)}` } : { hello: { t: 'hello', v: 1, rev: 6, want: 'play', canHost: false, agent: { hands: 'host', role: pass.role } } }),
+    expiresAt: Date.now() + AGENT_TICKET_MS,
+  });
+}
+
+/**
+ * FILL A SPOT (DESIGN section 12): a service that seats an AI in an empty spot for a price is the owner's money
+ * decision, so nothing issues `service` passes and this hook answers null. A later version decides who, what and how.
+ */
+export function fillSpot() { return null; }