@homie-rocks/studio 0.15.0 → 0.16.1

package/worker/office-page.mjs

@@ -6,6 +6,8 @@
  * else, connect only to this site). Everything a player typed is set as text, never as markup. Never cached,
  * never indexed, never framed.
  */
+import { SKILLS } from './agents.mjs';
+import { KIDS_LINE, POLICY_WORDS, SERVER_LIMITS } from './servers.mjs';
 import { esc } from './site.mjs';
 
 const PRIVATE = {
@@ -93,6 +95,65 @@ button.small { min-height: 30px; padding: 4px 10px; font-size: 13px; border-radi
 .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #1f2433; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; font-weight: 600; max-width: calc(100vw - 32px); z-index: 9; }
 .note { color: var(--dim); font-size: 13px; max-width: 75ch; margin-top: 26px; }
 .err { color: var(--bad); }
+.servers { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
+.srv { border-top: 1px dashed var(--line); padding: 8px 0; }
+.srv:first-of-type { border-top: 0; }
+.srvhead { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(160px, 1.6fr) minmax(150px, 1.3fr) auto; gap: 6px 12px; align-items: center; cursor: pointer; font-size: 14px; }
+.srvhead b { font-size: 15px; }
+.srvbody { padding: 8px 0 4px 14px; display: grid; gap: 8px; font-size: 14px; }
+.srvbody .line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.warnbox { margin: 10px 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,179,92,.45); color: var(--warn); font-size: 14px; }
+.secret { font: 600 13px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; padding: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--warn); }
+.chip.ai { color: #ffe7a8; border-color: rgba(255,207,90,.6); }
+/* The New server form: one panel, grouped, every control labelled, help under it in the office's quiet grey. */
+.newsrv { display: grid; gap: 16px; max-width: 820px; margin-top: 10px; padding: 16px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); }
+.newsrv [hidden] { display: none !important; }
+.newsrv h4 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
+.newsrv fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0 0; min-width: 0; display: grid; gap: 10px; }
+.newsrv legend { float: left; width: 100%; padding: 0 0 4px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
+.newsrv legend + * { clear: both; }
+.newsrv .frow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
+.newsrv .frow > label, .newsrv .frow > .lbl { padding-top: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
+.newsrv .ctl { display: grid; gap: 5px; min-width: 0; }
+.newsrv .help { margin: 0; color: var(--faint); font-size: 13px; line-height: 1.45; }
+.newsrv .help b { color: var(--dim); font-weight: 600; }
+.newsrv .note { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line2); color: var(--dim); font-size: 14px; max-width: none; }
+.newsrv input[type=text] { width: 100%; }
+.policies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.policy { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: start; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); cursor: pointer; }
+.policy:hover { border-color: rgba(255,255,255,.3); }
+.policy.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
+.policy input { margin: 2px 0 0; width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--accent); }
+.policy b { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
+.policy span { grid-column: 2; color: var(--dim); font-size: 13px; line-height: 1.4; }
+.stepper { display: inline-flex; align-items: center; gap: 6px; }
+.stepper button { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
+.stepper input[type=number] { width: 64px; text-align: center; -moz-appearance: textfield; }
+.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.stepper .of { color: var(--dim); font-size: 14px; }
+.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line2); border-radius: 999px; padding: 3px; gap: 2px; justify-self: start; }
+.seg label { position: relative; cursor: pointer; }
+.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; min-height: 0; }
+.seg span { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--dim); }
+.seg input:checked + span { background: var(--ink); color: var(--bg); }
+.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
+.dial { display: grid; gap: 4px; max-width: 420px; }
+.dial input[type=range] { width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
+.dial .ticks { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); font-size: 11px; color: var(--faint); }
+.dial .ticks span:not(:first-child):not(:last-child) { text-align: center; }
+.dial .ticks span:last-child { text-align: right; }
+.dial output { font-size: 14px; color: var(--ink); }
+.dial output b { color: var(--accent); }
+.check { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; cursor: pointer; }
+.check input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--accent); }
+.newsrv .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
+@media (max-width: 720px) {
+  .newsrv { padding: 14px 12px; }
+  .newsrv .frow { grid-template-columns: 1fr; gap: 6px; }
+  .newsrv .frow > label, .newsrv .frow > .lbl { padding-top: 0; }
+  .policies { grid-template-columns: 1fr; }
+}
+@media (max-width: 720px) { .srvhead { grid-template-columns: 1fr 1fr; } }
 @media (max-width: 720px) {
   .rhead { grid-template-columns: 1fr 1fr 1fr; }
   .rhead .racts { grid-column: 1 / -1; justify-content: flex-start; }
@@ -103,7 +164,7 @@ button.small { min-height: 30px; padding: 4px 10px; font-size: 13px; border-radi
 /* The office's one script (allowed by its hash). It reads /_studio/api/office every 3 s while the page is visible. */
 export const OFFICE_SCRIPT = String.raw`(function () {
   'use strict';
-  var S = { data: null, open: {}, busy: false, err: 0, timer: null };
+  var S = { data: null, open: {}, drafts: {}, busy: false, err: 0, timer: null };
   var root = document.getElementById('games');
   var liveEl = document.getElementById('live');
   var holdEl = document.getElementById('hold');
@@ -190,6 +251,335 @@ export const OFFICE_SCRIPT = String.raw`(function () {
     return box;
   }
 
+  /* ---------------------------------------------------------------- servers and agent seats (0.16.0) */
+  var POLICY = { open: 'Open', 'humans-only': 'Humans only', hybrid: 'Hybrid', beginner: 'Beginner' };
+  // Each policy's badge and line, the kids line and the dial's card names: the same words the site and the play page say.
+  var WORDS = ${JSON.stringify(POLICY_WORDS)};
+  var KIDS_LINE = ${JSON.stringify(KIDS_LINE)};
+  var CARDS = ${JSON.stringify(SKILLS.map((k) => k.card))};
+  var ROOMS_MAX = ${SERVER_LIMITS.roomsMax};
+  var BEGINNER_DAYS = ${SERVER_LIMITS.beginnerDays};
+  var LEVELS = ['Rookie', 'Steady', 'Fair', 'Strong', 'Maxed'];
+  function sel(options, value, label) { var x = el('select'); options.forEach(function (o) { var op = el('option', '', o[1]); op.value = o[0]; if (String(o[0]) === String(value)) op.selected = true; x.appendChild(op); }); if (label) x.setAttribute('aria-label', label); return x; }
+  function num(value, min, max, label) { var x = el('input'); x.type = 'number'; x.min = String(min); x.max = String(max); x.value = String(value); x.setAttribute('aria-label', label); return x; }
+  function srvSummary(sv) {
+    var bits = [POLICY[sv.policy] + (sv.policy === 'hybrid' ? ' · ' + sv.aiSeats : ''), sv.policy === 'beginner' ? sv.guides + ' guides' : null, sv.kids ? 'kids' : null,
+      sv.bots === 'off' ? 'bots off' : 'bots fill', LEVELS[sv.level - 1], sv.door !== 'open' ? 'door: ' + sv.door : null, sv.state !== 'open' ? sv.state.toUpperCase() : null];
+    return bits.filter(Boolean).join(' · ');
+  }
+  /** The owner may narrow a server: a second thought first (a stricter door, humans-only, fewer rooms, closing). */
+  function narrowing(sv, f) {
+    var rank = { open: 0, accounts: 1, invite: 2 };
+    return (f.door && rank[f.door] > rank[sv.door]) || (f.policy && f.policy !== sv.policy && (f.policy === 'humans-only' || f.policy === 'beginner')) || (f.rooms !== undefined && f.rooms < sv.rooms);
+  }
+  function setServer(g, sv, f, done) {
+    if (narrowing(sv, f) && !confirm('This takes something away on ' + sv.name + (f.policy === 'humans-only' ? ': its AI players leave after the current round' : '') + '. Go ahead?')) return;
+    act('/_studio/api/servers/set', Object.assign({ game: g.id, server: sv.id }, f), done || sv.name + ' changed.');
+  }
+  function serverRow(g, sv) {
+    var box = el('div', 'srv');
+    var key = 'srv:' + g.id + '/' + sv.id;
+    var head = el('div', 'srvhead');
+    head.onclick = function (e) { if (e.target.closest('button,select,input')) return; S.open[key] = !S.open[key]; render(); };
+    var live = sv.live || { rooms: 0, players: 0, ai: 0 };
+    add(head, add(el('div'), el('b', '', (S.open[key] ? '▾ ' : '▸ ') + sv.name + (sv.id === 'public' ? ' (public)' : '')), el('div', 'faint', sv.id === 'public' ? 'Quick play' : sv.id)),
+      el('div', 'dim', srvSummary(sv)),
+      el('div', 'stat', live.rooms ? live.rooms + (live.rooms === 1 ? ' room' : ' rooms') + ' · ' + live.players + ' playing · ' + live.ai + ' AI' : '—'),
+      el('div', 'faint', sv.members ? sv.members + ' members' : ''));
+    box.appendChild(head);
+    if (!S.open[key]) return box;
+    var body = el('div', 'srvbody');
+    var pol = sel([['open', 'Open'], ['hybrid', 'Hybrid'], ['beginner', 'Beginner'], ['humans-only', 'Humans only']], sv.policy, 'Policy');
+    var door = sel([['open', 'Door: anyone'], ['accounts', 'Door: accounts'], ['invite', 'Door: invite']], sv.door, 'Door');
+    var bots = sel([['fill', 'Bots fill empty seats'], ['off', 'Bots off']], sv.bots, 'Bots');
+    var level = sel(LEVELS.map(function (n, i) { return [i + 1, 'Default ' + n]; }), sv.level, 'Default level');
+    var levelMax = sel(LEVELS.map(function (n, i) { return [i + 1, 'Ceiling ' + n]; }), sv.levelMax, 'Ceiling');
+    var ai = num(sv.policy === 'beginner' ? sv.guides : sv.aiSeats, 0, 31, sv.policy === 'beginner' ? 'Guides' : 'AI seats');
+    add(body, add(el('div', 'line'), pol, door, bots, level, levelMax, el('span', 'faint', sv.policy === 'beginner' ? 'guides' : 'AI seats'), ai,
+      btn('Save', 'small', function () {
+        var f = {};
+        if (pol.value !== sv.policy) f.policy = pol.value;
+        if (door.value !== sv.door) f.door = door.value;
+        if (bots.value !== sv.bots) f.bots = bots.value;
+        if (Number(level.value) !== sv.level) f.level = Number(level.value);
+        if (Number(levelMax.value) !== sv.levelMax) f.levelMax = Number(levelMax.value);
+        var n = Math.floor(Number(ai.value));
+        if ((pol.value === 'beginner' ? 'guides' : 'aiSeats') && n !== (sv.policy === 'beginner' ? sv.guides : sv.aiSeats)) f[pol.value === 'beginner' ? 'guides' : 'aiSeats'] = n;
+        if (!Object.keys(f).length) { toast('Nothing changed.'); return; }
+        setServer(g, sv, f);
+      })));
+    add(body, el('div', 'faint', sv.line));
+    if (sv.id !== 'public' || sv.state !== 'open') {
+      add(body, add(el('div', 'line'), Object.assign(el('a', '', 'Its page'), { href: sv.page, target: '_blank', rel: 'noopener' }),
+        sv.state === 'open' ? armed('Close server', 'bad', function () { act('/_studio/api/servers/close', { game: g.id, server: sv.id }, sv.name + ' closes after the current round.'); })
+          : btn('Open it again', 'ghost small', function () { act('/_studio/api/servers/close', { game: g.id, server: sv.id, reopen: true }, sv.name + ' is open again.'); })));
+    } else add(body, add(el('div', 'line'), armed('Hide Quick play', 'bad', function () { act('/_studio/api/servers/close', { game: g.id, server: 'public' }, 'Quick play is hidden: Play shows the other servers.'); })));
+    if (sv.policy !== 'humans-only') {
+      var brain = sel([['script', 'Guides: scripted'], ['off', 'Guides: off'], ['workers-ai', 'Guides talk (Workers AI)'], ['owner-key', 'Guides talk (your key)']], sv.brain, 'AI guides');
+      add(body, add(el('div', 'line'), el('span', 'dim', 'AI guides\' brain'), brain, btn('Set', 'ghost small', function () {
+        if ((brain.value === 'workers-ai' || brain.value === 'owner-key') && !S.data.agentsTalk && !confirm('Let AI guides talk? They speak only the lines the game\'s agents.json gives them, at most one every 8 seconds, never about a person, and any player can quiet them.')) return;
+        act('/_studio/api/agents/brain', { game: g.id, server: sv.id, mode: brain.value });
+      })));
+    }
+    if (sv.id !== 'public') {
+      var mbox = el('div', 'line'); mbox.appendChild(el('span', 'dim', 'Members:'));
+      var showM = btn('Show', 'ghost small', function () {
+        fetch('/_studio/api/servers/members?game=' + encodeURIComponent(g.id) + '&server=' + encodeURIComponent(sv.id), { credentials: 'same-origin' }).then(function (r) { return r.json(); }).then(function (d) {
+          mbox.textContent = ''; mbox.appendChild(el('span', 'dim', 'Members:'));
+          (d.members || []).forEach(function (m) {
+            var who = m.account ? (m.account.handle || m.account.id) : m.player;
+            var span = add(el('span', 'chip' + (m.role !== 'member' ? ' owner' : '')), document.createTextNode(who + (m.home ? ' ★' : '') + (m.role !== 'member' ? ' · ' + m.role : '')));
+            mbox.appendChild(span);
+            if (m.role !== 'mentor') mbox.appendChild(btn('Mentor', 'ghost small', function () { act('/_studio/api/servers/member', { game: g.id, server: sv.id, player: m.player, role: 'mentor', name: who }, who + ' is a mentor of ' + sv.name + '.'); }));
+            mbox.appendChild(armed('Remove', 'bad', function () { act('/_studio/api/servers/member', { game: g.id, server: sv.id, player: m.player, remove: true, name: who }, who + ' was removed from ' + sv.name + '.'); }));
+          });
+          if (!(d.members || []).length) mbox.appendChild(el('span', 'faint', d.ok ? 'nobody yet' : (d.message || 'not available')));
+        });
+      });
+      mbox.appendChild(showM);
+      body.appendChild(mbox);
+    }
+    box.appendChild(body);
+    return box;
+  }
+  /** A server's address from its name, as the Worker makes it (servers.mjs checkServer). */
+  function serverId(name) { return String(name || '').toLowerCase().normalize('NFKD').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 20).replace(/-+$/, ''); }
+  /** A number with − and + beside it, labelled; onset gets every change. */
+  function stepper(id, value, min, max, label, onset) {
+    var box = el('div', 'stepper');
+    var input = el('input'); input.type = 'number'; input.id = id; input.inputMode = 'numeric'; input.min = String(min); input.max = String(max); input.value = String(value);
+    var show = function (v) { var n = Math.max(Number(input.min), Math.min(Number(input.max), Math.round(Number(v)) || 0)); input.value = String(n); less.disabled = n <= Number(input.min); more.disabled = n >= Number(input.max); return n; };
+    var set = function (v) { onset(show(v)); };
+    var less = btn('−', 'ghost small', function () { set(Number(input.value) - 1); }); less.setAttribute('aria-label', 'Fewer ' + label);
+    var more = btn('+', 'ghost small', function () { set(Number(input.value) + 1); }); more.setAttribute('aria-label', 'More ' + label);
+    input.onchange = function () { set(input.value); };
+    less.disabled = value <= min; more.disabled = value >= max;
+    add(box, less, input, more);
+    // sync: the value and its bounds as the form now has them (no onset: update() is what calls it).
+    return { box: box, input: input, sync: function (v, lo, hi) { input.min = String(lo); input.max = String(hi); return show(v); } };
+  }
+  /** One choice of a few, as the office's pill switch; each option is a real radio button. */
+  function segment(name, options, value, label, onset) {
+    var box = el('div', 'seg'); box.setAttribute('role', 'radiogroup'); box.setAttribute('aria-label', label);
+    var inputs = {};
+    options.forEach(function (o) {
+      var r = el('input'); r.type = 'radio'; r.name = name; r.value = o[0]; r.checked = o[0] === value;
+      r.onchange = function () { if (r.checked) onset(o[0]); };
+      inputs[o[0]] = r;
+      box.appendChild(add(el('label'), r, el('span', '', o[1])));
+    });
+    return { box: box, inputs: inputs };
+  }
+  /** A 1-5 dial in the vote card's names, with what the chosen level plays like. */
+  function dialOf(id, value, label, onset) {
+    var box = el('div', 'dial');
+    var range = el('input'); range.type = 'range'; range.id = id; range.min = '1'; range.max = '5'; range.step = '1'; range.value = String(value);
+    var out = el('output'); out.setAttribute('for', id);
+    var ticks = el('div', 'ticks'); ticks.setAttribute('aria-hidden', 'true');
+    var show = function () {
+      var n = Number(range.value); var top = Number(range.max);
+      out.textContent = ''; add(out, el('b', '', LEVELS[n - 1]), document.createTextNode(': ' + CARDS[n - 1]));
+      range.setAttribute('aria-valuetext', LEVELS[n - 1]);
+      ticks.textContent = ''; ticks.style.setProperty('--n', String(top));
+      for (var i = 0; i < top; i++) ticks.appendChild(el('span', '', LEVELS[i]));
+    };
+    range.oninput = function () { show(); onset(Number(range.value)); };
+    range.setAttribute('aria-label', label);
+    show();
+    add(box, range, ticks, out);
+    return { box: box, range: range, set: function (n, top) { range.max = String(top); range.value = String(Math.min(n, top)); show(); } };
+  }
+  function row(label, forId, control, help) {
+    var r = el('div', 'frow');
+    var l = forId ? el('label', '', label) : el('span', 'lbl', label); if (forId) l.htmlFor = forId;
+    add(r, l, add(el('div', 'ctl'), control, help));
+    return r;
+  }
+  /**
+   * The New server form (DESIGN 7.2): name; policy, with each badge's copy; AI seats or guides (capped at the room's
+   * seats less one) and kids, for the policies that have them; the level it starts at and its ceiling, in the vote
+   * card's names; who can come in; chat; rooms; listed. Only what applies to the chosen policy shows. What the owner
+   * set lives in S.drafts, so the office's redraw every few seconds never loses it. It creates at once.
+   */
+  function newServer(g) {
+    var key = 'new:' + g.id;
+    var wrap = el('div');
+    if (!S.open[key]) { wrap.appendChild(btn('+ New server', 'small', function () { S.open[key] = true; S.focusNew = key; render(); })); return wrap; }
+    var seats = Math.max(2, Number(g.maxPlayers) || Number(g.seats) || 2);
+    var cap = seats - 1;
+    var d = S.drafts[key] || (S.drafts[key] = { name: '', policy: 'hybrid', aiSeats: Math.min(2, cap), guides: Math.min(2, cap), kids: false, door: 'open', level: 3, levelMax: 5, levelSet: false, speech: 'game', rooms: 4, listed: true });
+    var id = 'ns-' + g.id + '-';
+    var form = el('form', 'newsrv'); form.noValidate = true; form.setAttribute('aria-label', 'New server for ' + g.name);
+    add(form, el('h4', '', 'New server for ' + g.name));
+
+    // Name, and the address it makes.
+    var name = el('input'); name.type = 'text'; name.id = id + 'name'; name.placeholder = 'Night Shift'; name.maxLength = 40; name.value = d.name; name.autocomplete = 'off';
+    var nameHelp = el('p', 'help');
+    add(form, row('Name', name.id, name, nameHelp));
+
+    // Policy: four cards, each with its badge and its line.
+    var pf = add(el('fieldset'), el('legend', '', 'Who plays'));
+    var cards = el('div', 'policies'); cards.setAttribute('role', 'radiogroup'); cards.setAttribute('aria-label', 'Policy');
+    var pol = {};
+    ['hybrid', 'beginner', 'humans-only', 'open'].forEach(function (p) {
+      var r = el('input'); r.type = 'radio'; r.name = id + 'policy'; r.value = p; r.checked = d.policy === p;
+      var badge = el('b'); var line = el('span');
+      var card = add(el('label', 'policy'), r, badge, line);
+      r.onchange = function () { if (!r.checked) return; d.policy = p; if (!d.levelSet) d.level = p === 'beginner' ? 2 : 3; update(); };
+      pol[p] = { input: r, card: card, badge: badge, line: line };
+      cards.appendChild(card);
+    });
+    add(form, add(pf, cards));
+
+    // AI in every room: seats (hybrid) or guides and kids (beginner); a plain note for the other two.
+    var af = add(el('fieldset'), el('legend', '', 'AI in every room'));
+    var aiHelp = el('p', 'help');
+    var ai = stepper(id + 'ai', d.policy === 'beginner' ? d.guides : d.aiSeats, d.policy === 'hybrid' ? 1 : 0, cap, 'AI seats', function (n) { if (d.policy === 'beginner') d.guides = n; else d.aiSeats = n; update(); });
+    var aiLabel = el('label', '', 'AI seats'); aiLabel.htmlFor = id + 'ai';
+    var aiRow = add(el('div', 'frow'), aiLabel, add(el('div', 'ctl'), ai.box, aiHelp));
+    var kids = el('input'); kids.type = 'checkbox'; kids.id = id + 'kids'; kids.checked = d.kids;
+    kids.onchange = function () { d.kids = kids.checked; update(); };
+    var kidsRow = row('Kids', null, add(el('label', 'check'), kids, el('span', '', 'A server for kids')), el('p', 'help', KIDS_LINE + ' The AI plays at Fair or gentler, and chat stays quick lines only.'));
+    var aiNote = el('p', 'note');
+    add(form, add(af, aiRow, kidsRow, aiNote));
+
+    // The AI's level: where it starts and how high the party may vote it.
+    var lf = add(el('fieldset'), el('legend', '', 'AI level'));
+    var lvl = dialOf(id + 'level', d.level, 'Starts at', function (n) { d.level = n; d.levelSet = true; if (levels().max < n) d.levelMax = n; update(); });
+    var top = dialOf(id + 'ceiling', d.levelMax, 'Ceiling', function (n) { d.levelMax = n; if (d.level > n) { d.level = n; d.levelSet = true; } update(); });
+    /** The level and ceiling as the server gets them: a kids server keeps both at Fair or gentler. */
+    function levels() { var cap = d.policy === 'beginner' && d.kids ? 3 : 5; var max = Math.min(d.levelMax, cap); return { cap: cap, max: max, level: Math.min(d.level, max) }; }
+    add(form, add(lf,
+      row('Starts at', id + 'level', lvl.box, null),
+      row('Ceiling', id + 'ceiling', top.box, el('p', 'help', 'Before play the party votes how strong the AI should be (the middle vote wins), never above the ceiling. Only games whose bots read the dial change how they play.'))));
+
+    // Who can come in: the door, how many rooms, and whether it is listed.
+    var df = add(el('fieldset'), el('legend', '', 'Who can come in'));
+    var DOOR_HELP = { open: 'Anyone with the link plays.', accounts: 'Players sign in with a passkey first.', invite: 'Only people with an invite to this server. Ask your AI for invite links.' };
+    var doorHelp = el('p', 'help');
+    var door = segment(id + 'door', [['open', 'Anyone'], ['accounts', 'Accounts'], ['invite', 'Invite only']], d.door, 'Door', function (v) { d.door = v; update(); });
+    var rooms = stepper(id + 'rooms', d.rooms, 1, ROOMS_MAX, 'rooms', function (n) { d.rooms = n; update(); });
+    var roomsHelp = el('p', 'help');
+    var listed = el('input'); listed.type = 'checkbox'; listed.id = id + 'listed'; listed.checked = d.listed;
+    listed.onchange = function () { d.listed = listed.checked; update(); };
+    var listedHelp = el('p', 'help');
+    add(form, add(df,
+      row('Door', null, door.box, doorHelp),
+      row('Rooms', id + 'rooms', rooms.box, roomsHelp),
+      row('Listed', null, add(el('label', 'check'), listed, el('span', '', 'Show it to everyone')), listedHelp)));
+
+    // Chat.
+    var cf = add(el('fieldset'), el('legend', '', 'Chat'));
+    var CHAT_HELP = { game: 'Players chat the way the game lets them.', lines: 'Only the game\'s quick lines: nobody types.', off: 'No chat at all.' };
+    var chatHelp = el('p', 'help');
+    var chat = segment(id + 'chat', [['game', 'The game\'s chat'], ['lines', 'Quick lines only'], ['off', 'Off']], d.speech, 'Chat', function (v) { d.speech = v; update(); });
+    add(form, add(cf, row('Chat', null, chat.box, chatHelp)));
+
+    var create = btn('Create', '', function () {});
+    create.type = 'submit';
+    var close = function () { S.open[key] = false; if (document.activeElement) document.activeElement.blur(); render(); };
+    add(form, add(el('div', 'acts'), create, btn('Cancel', 'ghost', close), el('span', 'faint', 'It opens at once; you can change any of it later.')));
+    name.oninput = function () { d.name = name.value; update(); };
+
+    function update() {
+      var p = d.policy;
+      var n = p === 'beginner' ? d.guides : d.aiSeats;
+      // Each card says its own badge and line; Hybrid's with the seats chosen.
+      Object.keys(pol).forEach(function (k) {
+        var w = WORDS[k];
+        pol[k].badge.textContent = w.badge + (k === 'hybrid' ? ' · ' + d.aiSeats : '');
+        var line = w.line.replace('{n}', String(d.aiSeats)).replace(/^[^:]+: /, '');
+        pol[k].line.textContent = line.charAt(0).toUpperCase() + line.slice(1) + (k === 'beginner' && d.kids ? ' ' + KIDS_LINE : '');
+        pol[k].card.classList.toggle('on', k === p);
+      });
+      // The name and the address it makes.
+      var sid = serverId(d.name);
+      var nameOk = /[A-Za-z0-9À-￿]/.test(d.name) && sid.length >= 2 && sid !== 'public';
+      nameHelp.textContent = '';
+      if (!d.name.trim()) nameHelp.textContent = 'Players see it on ' + g.name + '\'s page and on the play page.';
+      else if (!nameOk) nameHelp.textContent = 'Use at least two letters or digits (and not "public").';
+      else add(nameHelp, document.createTextNode('Its page: '), el('b', '', '/' + g.id + '/s/' + sid + '/'));
+      // AI in every room.
+      n = ai.sync(n, p === 'hybrid' ? 1 : 0, cap);
+      if (p === 'beginner') d.guides = n; else if (p === 'hybrid') d.aiSeats = n;
+      aiLabel.textContent = p === 'beginner' ? 'AI guides' : 'AI seats';
+      aiRow.hidden = !(p === 'hybrid' || p === 'beginner');
+      kidsRow.hidden = p !== 'beginner';
+      aiHelp.textContent = p === 'hybrid'
+        ? n + ' of the ' + seats + ' seats in every room ' + (n === 1 ? 'is an AI companion' : 'are AI companions') + ', always marked AI; people take the other ' + (seats - n) + '. At least one seat is always a person\'s.'
+        : n + ' guide seat' + (n === 1 ? '' : 's') + ' in every room, marked AI, beside new players. The game\'s own bots play them; guides talk only once you say yes.';
+      aiNote.hidden = !(p === 'humans-only' || p === 'open');
+      aiNote.textContent = p === 'humans-only'
+        ? 'No AI can join, not even one with a pass. The game\'s practice bots are off; you can switch them on later.'
+        : 'No seats are kept for AI. An AI with an agent pass may sit, always marked AI, and the game\'s bots fill empty seats.';
+      // The level: no AI on a humans-only server; kids keep it at Fair or gentler.
+      lf.hidden = p === 'humans-only';
+      var L = levels();
+      lvl.set(L.level, L.cap); top.set(L.max, L.cap);
+      // The door.
+      doorHelp.textContent = DOOR_HELP[d.door] + (p === 'beginner' ? ' New players only: an account older than ' + BEGINNER_DAYS + ' days is shown another server, unless you made that player a mentor.' : '');
+      d.rooms = rooms.sync(d.rooms, 1, ROOMS_MAX);
+      roomsHelp.textContent = 'Up to ' + d.rooms + (d.rooms === 1 ? ' room' : ' rooms') + ' at once. When ' + (d.rooms === 1 ? 'it is' : 'they are all') + ' full, newcomers wait for a seat.';
+      listedHelp.textContent = d.listed ? 'On ' + g.name + '\'s page, its servers list and the room lists.' : 'Left out of the lists: only people with its link find it.';
+      // Chat: a beginner server keeps chat to quick lines (or off).
+      var chatNow = p === 'beginner' && d.speech === 'game' ? 'lines' : d.speech;
+      chat.inputs.game.parentNode.hidden = p === 'beginner';
+      Object.keys(chat.inputs).forEach(function (k) { chat.inputs[k].checked = k === chatNow; });
+      chatHelp.textContent = CHAT_HELP[chatNow] + (p === 'beginner' ? ' A beginner server keeps chat to quick lines.' : '');
+      create.disabled = !nameOk;
+    }
+    form.onsubmit = function (e) {
+      e.preventDefault();
+      update();
+      if (create.disabled) { name.focus(); return; }
+      var p = d.policy;
+      var L = levels();
+      var body = { game: g.id, name: d.name, policy: p, door: d.door, level: L.level, levelMax: L.max, speech: p === 'beginner' && d.speech === 'game' ? 'lines' : d.speech, rooms: d.rooms, listed: d.listed };
+      if (p === 'hybrid') body.aiSeats = d.aiSeats;
+      if (p === 'beginner') { body.guides = d.guides; body.kids = d.kids; }
+      create.disabled = true;
+      act('/_studio/api/servers', body, d.name + ' is open.').then(function (r) {
+        if (r && r.ok) { delete S.drafts[key]; close(); } else create.disabled = false;
+      });
+    };
+    update();
+    wrap.appendChild(form);
+    if (S.focusNew === key) { S.focusNew = null; setTimeout(function () { name.focus(); }, 0); }
+    return wrap;
+  }
+  function passes(g) {
+    var box = el('div', 'servers');
+    add(box, el('h3', '', 'Agent passes (an AI\'s way into a seat, always marked AI)'));
+    (g.passes || []).forEach(function (p) {
+      var row = el('div', 'inv' + (p.live ? '' : ' closed'));
+      add(row, el('code', '', p.name), el('span', 'faint', p.role + ' · hands ' + p.hands + (p.server ? ' · ' + p.server : ' · any server') + (p.expiresAt ? ' · until ' + new Date(p.expiresAt).toLocaleDateString() : '') + (p.revoked ? ' · revoked' : !p.live ? ' · ended' : '')));
+      if (p.live) row.appendChild(armed('Revoke', 'bad', function () { act('/_studio/api/agents/pass', { action: 'revoke', game: g.id, id: p.id }, 'Pass revoked: that AI left.'); }));
+      box.appendChild(row);
+    });
+    var label = el('input'); label.type = 'text'; label.placeholder = 'Its name (Claude)'; label.maxLength = 16;
+    var server = sel([['', 'any server that lets AI in']].concat((g.servers || []).filter(function (x) { return x.policy !== 'humans-only'; }).map(function (x) { return [x.id, x.name]; })), '', 'Server');
+    var hands = sel([['self', 'runs the game itself'], ['host', 'moved by the host\'s bots']], 'self', 'Hands');
+    var out = el('div');
+    add(box, add(el('div', 'newinv'), label, server, hands, btn('Issue a pass', 'small', function () {
+      post('/_studio/api/agents/pass', { action: 'create', game: g.id, label: label.value, server: server.value || null, hands: hands.value, days: 7 }).then(function (r) {
+        out.textContent = '';
+        if (!r || !r.ok) { toast((r && r.message) || 'No pass made.', true); return; }
+        add(out, el('p', 'dim', 'Shown once. Give it to the AI only; it plays as ' + r.pass.name + ' for 7 days.'), el('div', 'secret', r.secret));
+        label.value = ''; S.keep = true;
+      });
+    })), out);
+    var fill = el('input', 'switch'); fill.type = 'checkbox'; fill.disabled = true; fill.setAttribute('aria-label', 'Fill-a-spot service');
+    add(box, add(el('label', 'faint'), fill, el('span', '', (S.data.fillSpot && S.data.fillSpot.note) || 'Let a fill-a-spot service seat AI (coming later)')));
+    return box;
+  }
+  function serversBox(g) {
+    var box = el('div', 'servers');
+    add(box, el('h3', '', 'Servers'));
+    (g.servers || []).forEach(function (sv) { box.appendChild(serverRow(g, sv)); });
+    box.appendChild(newServer(g));
+    return box;
+  }
+
   function person(g, r, c, now) {
     var row = el('div', 'person');
     var who = el('div', 'who');
@@ -197,7 +587,7 @@ export const OFFICE_SCRIPT = String.raw`(function () {
       c.seat !== null && c.seat !== undefined ? el('span', 'faint', 'seat ' + (c.seat + 1)) : el('span', 'faint', c.waiting ? 'waiting for a seat' : 'watching'),
       el('span', 'chip', c.device === 'phone' ? 'phone' : c.device === 'tv' ? 'big screen' : 'computer'),
       c.role === 'host' ? el('span', 'chip host', 'host') : null,
-      c.as === 'owner' ? el('span', 'chip owner', 'you') : c.as === 'invited' ? el('span', 'chip invited', 'invited') : c.account ? el('span', 'chip owner', 'player ' + (c.account.handle || c.account.id)) : el('span', 'chip', 'guest'),
+      c.agent ? el('span', 'chip ai', 'AI ' + (c.agent.role === 'guide' ? 'guide' : c.agent.role === 'party' ? 'companion' : 'player')) : c.as === 'owner' ? el('span', 'chip owner', 'you') : c.as === 'invited' ? el('span', 'chip invited', 'invited') : c.account ? el('span', 'chip owner', 'player ' + (c.account.handle || c.account.id)) : el('span', 'chip', 'guest'),
       c.muted ? el('span', 'chip muted', 'muted') : null,
       el('span', 'faint', 'here ' + dur(now - c.joinedAt)),
       c.browser ? el('span', 'faint', 'browser ' + c.browser) : null);
@@ -215,7 +605,7 @@ export const OFFICE_SCRIPT = String.raw`(function () {
     var box = el('div', 'room');
     var key = g.id + '/' + r.room;
     var head = el('div', 'rhead');
-    head.onclick = function (e) { if (e.target.closest('button')) return; S.open[key] = !S.open[key]; render(); };
+    head.onclick = function (e) { if (e.target.closest('button,select')) return; S.open[key] = !S.open[key]; render(); };
     var round = r.round ? 'Round ' + (r.round.n || '?') + (r.round.phase === 'live' && r.round.endsAt ? ' · ' + clock(r.round.endsAt - now) + ' left' : r.round.phase === 'over' ? ' · results' : '') : 'no round yet';
     var announce = btn('Announce', 'ghost small', function () {
       var text = prompt('Announce to everyone in ' + r.label + ' of ' + g.name + ':');
@@ -224,10 +614,14 @@ export const OFFICE_SCRIPT = String.raw`(function () {
     var acts = add(el('div', 'racts'), announce, r.closedUntil
       ? btn('Reopen', 'ghost small', function () { act('/_studio/api/close', { game: g.id, room: r.room, reopen: true }, r.label + ' is open again.'); })
       : armed('Close', 'bad', function () { act('/_studio/api/close', { game: g.id, room: r.room, minutes: hold() }, r.label + ' closed for ' + hold() + ' min.'); }));
+    // The room's dial (room_level): the owner sets it at once, as the party's vote does.
+    var lvl = r.policy ? sel([1, 2, 3, 4, 5].filter(function (n) { return n <= (r.policy.levelMax || 5); }).map(function (n) { return [n, LEVELS[n - 1]]; }), r.policy.level, 'AI level') : null;
+    if (lvl) lvl.onchange = function () { act('/_studio/api/room-level', { game: g.id, room: r.room, level: Number(lvl.value) }, 'AI in ' + r.label + ' set to ' + LEVELS[Number(lvl.value) - 1] + '.'); };
+    var srvName = ((g.servers || []).filter(function (x) { return x.id === r.server; })[0] || {}).name;
     add(head,
-      add(el('div'), el('b', '', (S.open[key] ? '▾ ' : '▸ ') + r.label), el('div', 'faint', r.public ? 'public room' : 'named room')),
-      add(el('div', 'stat'), el('span', '', 'players'), document.createTextNode((r.players) + ' / ' + r.max)),
-      add(el('div', 'stat'), el('span', '', 'bots'), document.createTextNode(String(r.bots))),
+      add(el('div'), el('b', '', (S.open[key] ? '▾ ' : '▸ ') + r.label), el('div', 'faint', (r.server && r.server !== 'public' ? (srvName || r.server) + ' · ' : '') + (r.public ? 'public room' : r.server !== 'public' ? 'server room' : 'named room'))),
+      add(el('div', 'stat'), el('span', '', 'players'), document.createTextNode((r.players) + ' / ' + (r.humanSeats || r.max))),
+      add(el('div', 'stat'), el('span', '', 'AI · bots'), document.createTextNode((r.ai || 0) + ' · ' + String(r.bots)), lvl ? add(el('div'), lvl) : null),
       add(el('div', 'stat'), el('span', '', 'round'), document.createTextNode(round)),
       add(el('div', 'stat'), el('span', '', 'up'), document.createTextNode(r.closedUntil ? 'closed ' + dur(r.closedUntil - now) : dur(now - r.openedAt))),
       acts);
@@ -239,7 +633,8 @@ export const OFFICE_SCRIPT = String.raw`(function () {
       var people = el('div', 'people');
       (r.clients || []).forEach(function (c) { people.appendChild(person(g, r, c, now)); });
       var bots = (r.slots || []).filter(function (s) { return s.bot; });
-      if (bots.length) people.appendChild(el('div', 'held', 'Bots: ' + bots.map(function (s) { return s.name; }).join(', ')));
+      if (bots.length) people.appendChild(el('div', 'held', 'AI and bots: ' + bots.map(function (s) { return s.name + (s.agent ? ' (AI ' + (s.agent.role === 'guide' ? 'guide' : 'seat') + ')' : ''); }).join(', ')));
+      if (r.vote && r.vote.open) people.appendChild(el('div', 'held', 'The party is voting on the AI\'s level: ' + r.vote.voters + ' of ' + r.vote.of_total + ' voted.'));
       (r.bans || []).forEach(function (b) { people.appendChild(el('div', 'held', 'Kicked: ' + (b.name || 'someone') + ', may come back in ' + dur(b.until - now) + (b.address ? ' (their network too)' : ''))); });
       box.appendChild(people);
     }
@@ -252,9 +647,11 @@ export const OFFICE_SCRIPT = String.raw`(function () {
     var now = Date.now() - (S.skew || 0);
     liveEl.textContent = d.playing ? d.playing + (d.playing === 1 ? ' playing now' : ' playing now') : 'nobody playing right now';
     document.getElementById('livedot').className = 'dot' + (d.playing ? ' on' : '');
-    var focus = document.activeElement && root.contains(document.activeElement) && /INPUT|SELECT/.test(document.activeElement.tagName);
-    // Never redraw under a typing owner, or a control waiting for its second tap; the next poll will.
-    if (focus || root.querySelector('[data-armed="1"]')) return;
+    var at = document.activeElement;
+    var focus = at && root.contains(at) && (/INPUT|SELECT/.test(at.tagName) || Boolean(at.closest && at.closest('.newsrv')));
+    // Never redraw under a typing owner (or one working in the New server form), a control waiting for its second
+    // tap, or a pass secret shown once.
+    if (focus || root.querySelector('[data-armed="1"]') || root.querySelector('.secret')) return;
     root.textContent = '';
     if (!d.games.length) { root.appendChild(el('p', 'empty', 'This studio has no games yet.')); return; }
     d.games.forEach(function (g) {
@@ -263,6 +660,10 @@ export const OFFICE_SCRIPT = String.raw`(function () {
       add(head, add(el('div', 'name'), el('h2', '', g.name), el('span', 'faint', g.playing ? g.playing + ' playing' : 'quiet')),
         add(el('div', 'links'), Object.assign(el('a', '', 'Play'), { href: g.play, target: '_blank', rel: 'noopener' }), Object.assign(el('a', '', 'Page'), { href: g.page, target: '_blank', rel: 'noopener' })));
       add(card, head, gameSettings(g));
+      // A build from before servers (netplay rev 5 or older): what it cannot do yet, and the fix.
+      if (g.build && g.build.predates && (g.servers || []).some(function (x) { return x.id !== 'public' && (x.aiSeats || x.guides); })) card.appendChild(el('div', 'warnbox', 'This build predates servers (netplay rev ' + (g.build.netplayRev || '5 or older') + '): reserved AI seats stay empty and its bots don\'t read the dial. Rebuild with @homie-rocks/studio 0.16.'));
+      card.appendChild(serversBox(g));
+      card.appendChild(passes(g));
       if (g.launch === 'invite' || (g.invites && g.invites.length)) card.appendChild(invites(g));
       var rooms = el('div', 'rooms');
       if (!g.rooms.length) rooms.appendChild(el('div', 'empty', g.launch === 'private' ? 'Private: only you can open it. Nobody is in a room.' : 'Nobody is in a room right now.'));
@@ -322,6 +723,7 @@ export async function officePage(cat, headers = {}) {
 <p class="dim" id="status" role="status"></p>
 <div id="games" aria-live="polite"><p class="empty">Reading the rooms…</p></div>
 <div class="toast" id="toast" role="status" hidden></div>
+<p class="note">Servers: each game's named room pools. Open: anyone, AI with a pass marked AI. Humans only: no AI at all. Hybrid: some seats in every room are AI companions; the party votes their level. Beginner: new players, AI guides, quick lines only. Changing a server reaches its live rooms at once; AI leave after the round when a server becomes humans-only.</p>
 <p class="note">Live from this studio's own rooms, every few seconds. A kick holds that player out of that room for the time you pick (their browser, and their account once players sign in); a mute stops their chat and emotes; Close sends everyone in a room out with a thank-you. Private: only you can open the game. Invite-only: invited players only (each invite link or code lets a browser in). Public: anyone, and listed. A game that is not public leaves the Homie directory the next time it reads this studio. This page is yours alone, never cached or indexed.</p>`;
   return new Response(shell(cat, `Office · ${name}`, body, { script: OFFICE_SCRIPT }), {
     headers: {
@@ -341,7 +743,7 @@ export function lockedPage(cat, { what = 'office', ask = null } = {}) {
   return new Response(shell(cat, `${what === 'confirm' ? 'Confirm' : 'Office'} · private`, body), { status: 401, headers: { ...PRIVATE, 'content-security-policy': NO_SCRIPT_CSP } });
 }
 
-const VERB = { kick: 'Kick', mute: 'Mute', close: 'Close the room', announce: 'Announce', game: 'Change it' };
+const VERB = { kick: 'Kick', mute: 'Mute', close: 'Close the room', announce: 'Announce', game: 'Change it', 'server-set': 'Change it', 'server-close': 'Close it', member: 'Remove', 'agents-brain': 'Let them talk' };
 
 /** The owner's one tap for what their AI asked, and what came of it. */
 export function confirmPage(cat, ask, { missing = false } = {}) {
@@ -353,7 +755,7 @@ export function confirmPage(cat, ask, { missing = false } = {}) {
     const verb = ask.action?.op === 'mute' && ask.action.off ? 'Unmute' : ask.action?.op === 'close' && ask.action.reopen ? 'Open it again' : VERB[ask.action?.op] ?? 'Yes';
     body = `<h1>${esc(name)} <small>Your AI asks</small></h1>
 <p style="font-size:19px;line-height:1.45;max-width:46ch">${esc(ask.what)}</p>
-<form method="post" class="bar" style="background:transparent;border:0;padding:0"><button type="submit" name="do" value="yes" class="${['kick', 'close'].includes(ask.action?.op) && !ask.action?.reopen ? 'armed' : ''}">${esc(verb)}</button><button type="submit" name="do" value="no" class="ghost">No</button></form>
+<form method="post" class="bar" style="background:transparent;border:0;padding:0"><button type="submit" name="do" value="yes" class="${['kick', 'close', 'server-close', 'member'].includes(ask.action?.op) && !ask.action?.reopen ? 'armed' : ''}">${esc(verb)}</button><button type="submit" name="do" value="no" class="ghost">No</button></form>
 <p class="note">Only you can confirm this: your AI asked through the studio's office key, which cannot say yes. It lasts until ${esc(new Date(ask.expiresAt).toISOString().slice(11, 16))} UTC.</p>`;
   } else {
     const said = { done: 'Done.', failed: 'That did not work.', cancelled: 'Not done: you said no.', expired: 'This ask ran out (15 minutes). Your AI can ask again.', working: 'Working on it…' }[ask.state] ?? ask.state;