@homie-rocks/studio 0.16.0 → 0.17.0

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 = {
@@ -103,8 +105,54 @@ button.small { min-height: 30px; padding: 4px 10px; font-size: 13px; border-radi
 .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); }
-.newsrv { display: grid; gap: 8px; padding: 10px 0 0; }
-.newsrv .line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+/* 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; }
@@ -116,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');
@@ -205,6 +253,12 @@ export const OFFICE_SCRIPT = String.raw`(function () {
 
   /* ---------------------------------------------------------------- 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; }
@@ -266,6 +320,14 @@ export const OFFICE_SCRIPT = String.raw`(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 });
       })));
+      // What today's brains used of the day's budget (the whole studio), and what is missing for the one chosen.
+      var bd = S.data.brain;
+      if (bd && (sv.brain === 'workers-ai' || sv.brain === 'owner-key')) {
+        var used = sv.brain === 'workers-ai'
+          ? 'Workers AI: ' + Math.round(bd.used.neurons).toLocaleString('en-US') + ' / ' + Math.round(bd.budget.neurons).toLocaleString('en-US') + ' neurons today' + (bd.ai ? '' : ' · not bound yet: deploy once more')
+          : 'Your key: $' + bd.used.usd.toFixed(2) + ' / $' + bd.budget.usd.toFixed(2) + ' today' + (bd.key ? '' : ' · no key yet: homie-studio agents brain key');
+        add(body, add(el('div', 'line'), el('span', 'faint', used + (g.vocab ? '' : ' · this game has no agents.json: its guides have no words'))));
+      }
     }
     if (sv.id !== 'public') {
       var mbox = el('div', 'line'); mbox.appendChild(el('span', 'dim', 'Members:'));
@@ -288,31 +350,209 @@ export const OFFICE_SCRIPT = String.raw`(function () {
     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; render(); })); return wrap; }
-    var form = el('div', 'newsrv');
-    var name = el('input'); name.type = 'text'; name.placeholder = 'Name (Night Shift)'; name.maxLength = 40;
-    var pol = sel([['hybrid', 'Hybrid: AI seats in every room'], ['beginner', 'Beginner: new players, AI guides'], ['humans-only', 'Humans only'], ['open', 'Open']], 'hybrid', 'Policy');
-    var n = num(2, 0, Math.max(0, g.maxPlayers - 1), 'AI seats or guides');
-    var kids = el('input'); kids.type = 'checkbox'; kids.setAttribute('aria-label', 'Kids');
-    var door = sel([['open', 'Door: anyone'], ['accounts', 'Door: accounts'], ['invite', 'Door: invite']], 'open', 'Door');
-    var level = sel(LEVELS.map(function (x, i) { return [i + 1, 'Level ' + x]; }), 3, 'Default level');
-    var levelMax = sel(LEVELS.map(function (x, i) { return [i + 1, 'Ceiling ' + x]; }), 5, 'Ceiling');
-    var speech = sel([['game', 'Chat: the game\'s'], ['lines', 'Chat: quick lines only'], ['off', 'Chat: off']], 'game', 'Speech');
-    var rooms = num(4, 1, 16, 'Rooms');
-    var listed = el('input'); listed.type = 'checkbox'; listed.checked = true; listed.setAttribute('aria-label', 'Listed');
-    add(form, add(el('div', 'line'), name, pol),
-      add(el('div', 'line'), el('span', 'dim', 'AI seats / guides'), n, add(el('label'), kids, el('span', '', 'kids (beginner)')), door),
-      add(el('div', 'line'), level, levelMax, speech, el('span', 'dim', 'rooms'), rooms, add(el('label'), listed, el('span', '', 'listed'))),
-      add(el('div', 'line'), btn('Create', 'small', function () {
-        var body = { game: g.id, name: name.value, policy: pol.value, door: door.value, level: Number(level.value), levelMax: Number(levelMax.value), speech: speech.value, rooms: Number(rooms.value), listed: listed.checked };
-        if (pol.value === 'hybrid') body.aiSeats = Number(n.value);
-        if (pol.value === 'beginner') { body.guides = Number(n.value); body.kids = kids.checked; }
-        act('/_studio/api/servers', body, (name.value || 'The server') + ' is open.').then(function (r) { if (r && r.ok) { S.open[key] = false; render(); } });
-      }), btn('Cancel', 'ghost small', function () { S.open[key] = false; render(); })));
+    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) {
@@ -403,6 +643,11 @@ export const OFFICE_SCRIPT = String.raw`(function () {
       var bots = (r.slots || []).filter(function (s) { return s.bot; });
       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.'));
+      // The house guides' brains: which one runs (and why not), and their last few decisions (ids only, never words).
+      if (r.brains) {
+        var last = (r.brains.decisions || []).filter(function (x) { return x.goal || x.say; }).slice(-4).reverse().map(function (x) { return 'seat ' + (x.seat + 1) + ': ' + (x.goal ? x.goal + (x.args && Object.keys(x.args).length ? ' ' + Object.keys(x.args).map(function (k) { return x.args[k]; }).join(' ') : '') : 'no change') + (x.say ? ', said ' + x.say : '') + ' (' + x.provider + (x.ms ? ', ' + (x.ms / 1000).toFixed(1) + ' s' : '') + ', ' + dur(now - x.at) + ' ago)'; });
+        people.appendChild(el('div', 'held', 'Guides\' brain: ' + (r.brains.brain || 'script') + (r.brains.why ? ' · ' + r.brains.why : '') + ' · ' + r.brains.calls + ' calls' + (last.length ? ' · ' + last.join('; ') : '')));
+      }
       (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);
     }
@@ -415,8 +660,10 @@ 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, or a pass secret shown once.
+    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; }

package/worker/office.mjs

@@ -45,8 +45,9 @@
  */
 import { SEAT_MAX, seatsOf } from './seats.mjs';
 import { PUBLIC_SERVER, SERVER_LIMITS, checkServer, levelName, narrows, policyOf, roomServer, rowFor, serverView, serversOf, serverPassCookie, writeServer } from './servers.mjs';
-import { aiName, fillSpot, passById, passCreate, passList, passRevoke } from './agents.mjs';
-import { OWNER_COOKIE, cookieValues, ownerAllowed, ownerSession } from './stats.mjs';
+import { BRAIN_BUDGET, aiName, fillSpot, passById, passCreate, passList, passRevoke } from './agents.mjs';
+import { DEFAULT_MODEL, OWNER_MODEL } from './brain.mjs';
+import { OWNER_COOKIE, cookieValues, ownerAllowed, ownerSession, today } from './stats.mjs';
 import { esc, layout, notFoundPage } from './site.mjs';
 import { confirmPage, lockedPage, officePage } from './office-page.mjs';
 import { licenseOf } from './license.mjs';
@@ -455,9 +456,35 @@ async function roomRow(env, meta, room, max) {
     host: f.host ?? null, announce: f.announce ?? null,
     slots: slots.slice(0, 64).map((s) => ({ slot: s.slot, seat: s.seat ?? null, name: oneLine(s.name, 40), bot: Boolean(s.bot), ...(s.agent ? { agent: { role: s.agent.role ?? 'party', seat: s.agent.seat ?? null } } : {}) })),
     clients, bans: office.bans ?? [], mutes: office.mutes ?? [],
+    // The house guides' brains (0.17.0): which brain, why not when it is not, and the last decisions (seats and ids).
+    ...(f.brains && typeof f.brains === 'object' ? { brains: {
+      brain: String(f.brains.brain ?? ''), why: f.brains.why ? oneLine(f.brains.why, 120) : null, calls: Number(f.brains.calls) || 0,
+      guides: (Array.isArray(f.brains.guides) ? f.brains.guides : []).slice(0, 8).map((g) => ({ name: oneLine(g.name, 40), seat: g.seat ?? null, provider: g.provider ?? null })),
+      decisions: (Array.isArray(f.brains.decisions) ? f.brains.decisions : []).slice(-50),
+    } } : {}),
   };
 }
 
+/** The AI brains' day for the whole studio: the budget (meta brain_budget) and what today used (stats_daily). */
+export async function brainDay(env) {
+  const budget = { neurons: BRAIN_BUDGET.neurons, usd: BRAIN_BUDGET.usd };
+  const used = { neurons: 0, usd: 0, calls: 0 };
+  try {
+    const b = JSON.parse((await env.DB.prepare("SELECT value FROM meta WHERE key = 'brain_budget'").first())?.value ?? 'null');
+    if (b && Number.isFinite(Number(b.neurons))) budget.neurons = Number(b.neurons);
+    if (b && Number.isFinite(Number(b.usd))) budget.usd = Number(b.usd);
+  } catch { /* the defaults */ }
+  try {
+    const { results } = await env.DB.prepare("SELECT metric, SUM(n) AS n FROM stats_daily WHERE day = ?1 AND metric IN ('brain-calls', 'brain-neurons', 'brain-microdollars') GROUP BY metric").bind(today()).all();
+    for (const r of results ?? []) {
+      if (r.metric === 'brain-calls') used.calls = Number(r.n) || 0;
+      if (r.metric === 'brain-neurons') used.neurons = Number(r.n) || 0;
+      if (r.metric === 'brain-microdollars') used.usd = Math.round(Number(r.n) || 0) / 1e6;
+    }
+  } catch { /* nothing counted yet */ }
+  return { budget, used, ai: Boolean(env.AI), key: Boolean(env.HOMIE_BRAIN_KEY), model: env.HOMIE_BRAIN_MODEL || DEFAULT_MODEL, ownerModel: OWNER_MODEL };
+}
+
 async function invitesOf(env, game, origin) {
   try {
     const { results } = await env.DB.prepare('SELECT id, code, label, uses, max_uses, expires_at, revoked, created_at, server FROM office_invites WHERE game = ?1 ORDER BY created_at DESC LIMIT 100').bind(game).all();
@@ -500,7 +527,9 @@ export async function officeView(env, cat, origin) {
       id: g.id, name: g.name, launch, launchFrom: row?.launch ? 'office' : g.launch ? 'game.json' : 'default',
       // Servers (0.16.0): each with its policy and what is on it now; its build reads the dial only from netplay rev 6.
       servers: servers.map((sv) => ({ ...serverView(sv, { origin, game: g.id }), live: byServer[sv.id] ?? { rooms: 0, players: 0, ai: 0 }, members: members[sv.id] ?? 0 })),
-      build: { netplayRev: Number.isInteger(g.netplayRev) ? g.netplayRev : null, predates: !(Number(g.netplayRev) >= 6), caps: g.caps ?? null },
+      build: { netplayRev: Number.isInteger(g.netplayRev) ? g.netplayRev : null, predates: !(Number(g.netplayRev) >= 6), caps: g.caps ?? null, guides: Number(g.netplayRev) >= 7 },
+      // 0.17.0: the game's AI guides have words of their own (agents.json): without it they play but never talk.
+      vocab: g.vocab === true,
       passes: (await passList(env, { game: g.id })).filter((x) => x.live || Date.now() - x.createdAt < 7 * 86_400_000),
       remix: remixOf(g, settings), remixBuilt: g.landing?.source !== false, license: licenseOf(g.license).kind,
       seats: seatsOf(g), maxPlayers: max, maxSet: Number(row?.max_players) >= 1 ? Number(row.max_players) : null,
@@ -515,6 +544,7 @@ export async function officeView(env, cat, origin) {
     // The fill-a-spot service (an AI seated in an empty spot for a price) is a money decision: not offered yet.
     fillSpot: { available: Boolean(fillSpot()), note: 'Let a fill-a-spot service seat AI (coming later)' },
     agentsTalk: await talkConsented(env),
+    brain: await brainDay(env),
   };
 }
 async function memberCountsOf(env, game) {
@@ -624,7 +654,10 @@ function checkAction(cat, op, body) {
       if (!meta) return bad('game is one of this studio\'s game ids');
       if (typeof body.server !== 'string' || !(body.server === 'public' || /^[a-z0-9][a-z0-9-]{1,19}$/.test(body.server))) return bad('server is the server\'s id');
       if (!['off', 'script', 'workers-ai', 'owner-key'].includes(body.mode)) return bad('mode is off, script, workers-ai or owner-key');
-      return { ok: true, action: { op, game: meta.id, server: body.server, mode: body.mode } };
+      // The day's budget for the studio's brains: Workers AI neurons (workers-ai) or dollars of the owner's key (owner-key).
+      const budget = body.budget === undefined || body.budget === null ? undefined : Number(body.budget);
+      if (budget !== undefined && (!['workers-ai', 'owner-key'].includes(body.mode) || !(budget >= 0) || budget > (body.mode === 'owner-key' ? 100 : 1e7))) return bad('budget goes with workers-ai (neurons a day; the free allocation is 10,000 an account) or owner-key (dollars a day, at most 100)');
+      return { ok: true, action: { op, game: meta.id, server: body.server, mode: body.mode, ...(budget !== undefined ? { budget } : {}) } };
     }
     default:
       return bad('unknown control');
@@ -670,7 +703,7 @@ export function describe(cat, a) {
     case 'pass': return a.action === 'revoke' ? `Revoke the agent pass ${a.id}: that AI leaves every room and cannot sit again.` : `Issue an agent pass for an AI called "${a.label} · AI".`;
     case 'room-level': return `Set the AI in ${where} to ${levelName(a.level)} (level ${a.level}).`;
     case 'agents-brain': return ['workers-ai', 'owner-key'].includes(a.mode)
-      ? `Let the AI guides on ${gname}'s server ${a.server} talk: they speak only the lines the game's own agents.json gives them (never free text), at most one line every 8 seconds, never about a person, and a player can quiet them. Their brain runs on ${a.mode === 'workers-ai' ? 'this studio\'s own Workers AI (free allowance)' : 'your own AI provider key (your money, capped daily)'}.`
+      ? `Let the AI guides on ${gname}'s server ${a.server} talk: they speak only the lines the game's own agents.json gives them (never free text), at most one line every 8 seconds, never about a person, and a player can quiet them. Their brain runs on ${a.mode === 'workers-ai' ? `this studio's own Workers AI (free allowance${a.budget !== undefined ? `; at most ${Math.round(a.budget).toLocaleString('en-US')} neurons a day` : ''})` : `your own AI provider key (claude-haiku-4-5, your money${a.budget !== undefined ? `, at most $${Number(a.budget).toFixed(2)} a day` : ', capped daily'})`}.`
       : `Set the AI guides' brain on ${gname}'s server ${a.server} to ${a.mode}.`;
     default: return 'A control.';
   }
@@ -686,7 +719,12 @@ export async function needsAsk(env, cat, a) {
     const before = meta ? (await serversOf(env, meta, { fresh: true })).find((x) => x.id === a.server) : null;
     return narrows(before, a.fields);
   }
-  if (a.op === 'agents-brain') return ['workers-ai', 'owner-key'].includes(a.mode) && !(await talkConsented(env));
+  if (a.op === 'agents-brain') {
+    if (['workers-ai', 'owner-key'].includes(a.mode) && !(await talkConsented(env))) return true;
+    // Raising the cap on the owner's own money is the owner's to confirm; Workers AI's free allocation is not money.
+    if (a.mode === 'owner-key' && a.budget !== undefined) return a.budget > (await brainDay(env)).budget.usd;
+    return false;
+  }
   return false;
 }
 
@@ -765,7 +803,7 @@ export async function perform(env, cat, a) {
       try { await writeServer(env, meta.id, sv); } catch (error) { return { ok: false, error: 'not-migrated', message: `Servers need migration 0006_studio_servers.sql (npm run deploy). (${String(error?.message ?? error).slice(0, 120)})` }; }
       const view = serverView(sv, { origin: a.origin ?? '', game: meta.id });
       const notes = [];
-      if (sv.policy === 'beginner' && sv.guides) notes.push(`${sv.guides} AI guide seat${sv.guides === 1 ? '' : 's'} in every room, marked AI: the game's own bots play them now; guides talk once AI talk arrives (a later version, and only with the owner's yes).`);
+      if (sv.policy === 'beginner' && sv.guides) notes.push(`${sv.guides} AI guide seat${sv.guides === 1 ? '' : 's'} in every room, marked AI: they play from the game's script, silent. To let them talk (only the game's own agents.json lines), turn on a brain: agents brain ${meta.id} ${sv.id} workers-ai (the first time asks the owner).${meta.vocab ? '' : ` ${meta.name} has no agents.json yet: write one first.`}`);
       if (sv.policy === 'hybrid') notes.push(`${sv.aiSeats} seat${sv.aiSeats === 1 ? '' : 's'} in every room are AI companions, marked AI; the party votes their level.`);
       if (sv.policy === 'humans-only') notes.push('No AI can join; the game\'s practice bots are off unless the owner turns them on (bots: fill).');
       if (!(Number(meta.netplayRev) >= 6)) notes.push(`${meta.name}'s build predates servers (netplay revision ${meta.netplayRev ?? '5 or older'}): reserved AI seats stay empty and its bots do not read the dial until it is rebuilt with @homie-rocks/studio 0.16.`);
@@ -839,8 +877,24 @@ export async function perform(env, cat, a) {
         await writeServer(env, meta.id, sv);
         if (['workers-ai', 'owner-key'].includes(a.mode)) await env.DB.prepare("INSERT OR REPLACE INTO meta (key, value) VALUES ('agents_talk_ok', ?1)").bind(String(Date.now())).run();
       } catch (error) { return { ok: false, error: 'not-migrated', message: `Servers need migration 0006_studio_servers.sql (npm run deploy). (${String(error?.message ?? error).slice(0, 120)})` }; }
+      if (a.budget !== undefined) {
+        const day = await brainDay(env);
+        const next = { neurons: day.budget.neurons, usd: day.budget.usd, ...(a.mode === 'workers-ai' ? { neurons: Math.round(a.budget) } : { usd: Math.round(a.budget * 100) / 100 }) };
+        await env.DB.prepare("INSERT OR REPLACE INTO meta (key, value) VALUES ('brain_budget', ?1)").bind(JSON.stringify(next)).run().catch(() => {});
+      }
       await pushPolicy(env, meta, settings, sv);
-      return { ok: true, op: a.op, game: meta.id, server: sv.id, brain: sv.brain, note: ['workers-ai', 'owner-key'].includes(a.mode) ? 'Saved. AI guides\' talk arrives with @homie-rocks/studio 0.17; until then they play as the game\'s bots, silent.' : 'Saved.' };
+      const day = await brainDay(env);
+      const notes = [];
+      if (!meta.vocab && ['workers-ai', 'owner-key'].includes(a.mode)) notes.push(`${meta.name} has no agents.json yet: its guides play but have no words. Write one (the game skill's "Write the guide vocabulary"), build and deploy.`);
+      if (a.mode === 'workers-ai') notes.push(!env.AI ? 'This Worker has no Workers AI binding yet: run `npm run deploy` once more (it binds Workers AI when a server uses it). Until then the guides answer from the game\'s script.'
+        : !(day.budget.neurons > 0) ? 'The day\'s Workers AI budget is 0: the guides answer from the game\'s script (set --budget to let them think).'
+          : `The guides think with Workers AI (${day.model}) from their next decision: at most ${day.budget.neurons.toLocaleString('en-US')} neurons a day for the whole studio (${Math.round(day.used.neurons).toLocaleString('en-US')} used today), then the game's script until 00:00 UTC.`);
+      if (a.mode === 'owner-key') notes.push(!env.HOMIE_BRAIN_KEY ? 'Set your key on your own computer: `npx --no-install homie-studio agents brain key` opens a page there (the key goes straight to the Worker, never through a chat). Until then the guides answer from the game\'s script.'
+        : !(day.budget.usd > 0) ? 'The day\'s dollar cap is 0: the guides answer from the game\'s script.'
+          : `The guides think with your key (claude-haiku-4-5) from their next decision, at most $${day.budget.usd.toFixed(2)} a day ($${day.used.usd.toFixed(2)} used today), then the game's script until 00:00 UTC.`);
+      if (a.mode === 'script') notes.push('The guides play from the game\'s script, silent.');
+      if (a.mode === 'off') notes.push('The guides are the game\'s plain bots.');
+      return { ok: true, op: a.op, game: meta.id, server: sv.id, brain: sv.brain, budget: day.budget, note: `Saved. ${notes.join(' ')}`.trim() };
     }
     default: return { ok: false, error: 'op' };
   }

package/worker/pages.mjs

@@ -113,6 +113,10 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .room.at-bottom-right { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--dy)); right: calc(max(8px, env(safe-area-inset-right)) + var(--dx)); align-items: flex-end; flex-direction: column-reverse; }
 .room.at-bottom-left { bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--dy)); left: calc(max(8px, env(safe-area-inset-left)) + var(--dx)); align-items: flex-start; flex-direction: column-reverse; }
 .chip.chip-right { left: auto; right: max(10px, env(safe-area-inset-right)); }
+/* The room button and the server pill share one band at the room button's place, side by side (the server pill on
+   the inner side), so the shell never covers more of the game than the place the game gave the room button. */
+.room .pills { display: flex; align-items: center; gap: 8px; }
+.room.at-top-right .pills, .room.at-bottom-right .pills { flex-direction: row-reverse; }
 .pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(6,9,16,.62); color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .5s; }
 .pill svg { width: 15px; height: 15px; flex: none; }
 .pill.dim { opacity: .38; width: 34px; padding: 0; justify-content: center; }
@@ -164,8 +168,8 @@ ${SERVER_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}`;
   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="pills"><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>
   <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>
@@ -197,20 +201,27 @@ ${joinCard}${share}
 }
 
 /*
- * 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.
+ * SERVERS AND THE AI DIAL (0.16.0, NETPLAY.md section 17): the server pill beside the room button, in the same band
+ * (its name and badge, or on a phone held upright its dot; 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 (an opaque 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; }
+/* A phone held upright has no width to spare at its top: the server pill is its dot from the start (its sheet says
+   the name, the badge and the line; the chip names the server), so the band is the room button's label and one dot. */
+@media (max-width: 540px) {
+  .spill, .spill:hover, .spill:focus-visible, .spill[aria-expanded="true"] { width: 34px; padding: 0; justify-content: center; }
+  .spill span[data-server-label], .spill:hover span[data-server-label], .spill:focus-visible span[data-server-label], .spill[aria-expanded="true"] span[data-server-label] { display: none; }
+}
 .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; }
+.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: #080c16; 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; }
@@ -308,9 +319,16 @@ const SHELL_JS = String.raw`(function () {
   }
   place();
   addEventListener('resize', place);
-  function labelOf(room) { var m = /^pub-(\d+)$/.exec(room); return m ? 'Room ' + m[1] : room; }
+  function labelOf(room) {
+    var m = /^pub-(\d+)$/.exec(room);
+    if (m) return 'Room ' + m[1];
+    // A room of this page's server (s-<server>-<n>) is "Room <n>" too: the server pill beside the button names it.
+    var at = state.server ? 's-' + state.server.id + '-' : null;
+    var n = at && room.indexOf(at) === 0 ? room.slice(at.length) : '';
+    return /^\d+$/.test(n) ? 'Room ' + n : room;
+  }
   function flash(text) { if (!toast) return; toast.textContent = text; toast.hidden = false; clearTimeout(flash.t); flash.t = setTimeout(function () { toast.hidden = true; }, 1800); }
-  // The room pill and the server pill fade to dots after 6 s, so neither sits on the game's own HUD.
+  // The room pill and the server pill (in one band, at the room button's place) fade to dots after 6 s.
   function wake() {
     if (!toggle) return;
     var sp = document.querySelector('[data-server-toggle]');
@@ -549,7 +567,7 @@ const SHELL_JS = String.raw`(function () {
     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(); }
+    if (labelEl.textContent !== label) { labelEl.textContent = label; sToggle.setAttribute('aria-label', label + ': this server'); wake(); }
     sSheet.querySelector('[data-server-name]').textContent = name;
     sSheet.querySelector('[data-server-badge]').textContent = words.badge;
     sSheet.querySelector('[data-server-line]').textContent = words.line;