@homie-rocks/studio 0.24.4 → 0.24.5

package/CHANGELOG.md

@@ -17,9 +17,32 @@ To bring a studio up to date, tell Claude: "Upgrade my studio to the newest Homi
 `npx -y @homie-rocks/studio@latest upgrade`, which shows what's new since the version your studio pins (from this
 file) and what the upgrade would change, and changes nothing until you agree.
 
+## [0.24.5] - 2026-10-03
+
+**Plugin 0.25.5** · [#39](https://github.com/homie-rocks/homie/pull/39)
+
+Room chat keeps off your game's HUD: on a phone the Chat pill is a round icon, as the room button is, and your game can say where the strip of new lines sits, or keep new lines in the Chat sheet, so a game with a busy HUD keeps typed chat.
+
+### Added
+
+- game.json `"screen": { "chat": … }` says where room chat's strip of new lines sits on each screen: `at` (a corner, `top-center` or `bottom-center`), `x` / `y` to move it in from its side and its edge, and `"lines": "sheet-only"` to keep new lines in the Chat sheet while the pill counts them. `desk`, `phone`, `sideways` and `tv` (the big screen's corner of lines) each take their own, changing only what they name. A game whose HUD or controls sit where the strip shows no longer has to keep chat to emoji to stay clear. `chat/CHAT.md` has every field; the template's AGENTS.md and the game skill say when to use it.
+- `homie-studio build` warns about a wrong field in `screen.chat` (the play page uses the default there), and says so when a place or `"sheet-only"` is written in game.json `"chat"` (the room's rules) instead.
+
+### Changed
+
+- The Chat pill follows the room button: on a phone (either way up), and beside a room button your game keeps an icon (`screen.share` `"label": false`), it is a round icon with the count of new lines on its corner. On a computer it still says "Chat", unless the word would take the room button's band off the screen or into the middle third of its width, where games keep a clock or a title; then it stays the icon until the window changes size.
+
+### Fixed
+
+- On a phone, the Chat pill's word no longer covers the HUD beside the room button: the first digit of a clock, the last letter of a title.
+
+### Upgrade notes
+
+- Nothing to do: a game without `screen.chat` shows the strip where it did. If you kept a game's chat to emoji only so the strip stayed off its HUD, tell Claude: "Put room chat where my game has room, and let players type again." It places the strip with `screen.chat` and resets the game's chat rules (`homie-studio chat rules <game> --reset`).
+
 ## [0.24.4] - 2026-10-03
 
-**Plugin 0.25.4** · [#37](https://github.com/homie-rocks/homie/pull/37)
+**Plugin 0.25.4** · [#37](https://github.com/homie-rocks/homie/pull/37) · [release-2026-10-03-studio-0.24.4](https://github.com/homie-rocks/homie/releases/tag/release-2026-10-03-studio-0.24.4)
 
 Your AI guides think with Cloudflare's Clef decision model, which does what a player asks; Clef runs on your own computer while you build; and your games can ask it for their own decisions (tactics, a director's call, a turn) in about a quarter of a second.
 

package/README.md

@@ -316,8 +316,9 @@ npx homie-studio chat remove night-rush pub-3 <line id>                 # take a
 npx homie-studio chat words                                             # the built-in word list the floor holds
 ```
 
-- **The play page:** a Chat pill beside the room button (the corner `screen.share` keeps clear of the HUD), its
-  sheet (the last minutes, the reactions, the quick lines, typing, Report), a short ticker of new lines, and two
+- **The play page:** a Chat pill beside the room button (the corner `screen.share` keeps clear of the HUD; a round
+  icon on a phone), its sheet (the last minutes, the reactions, the quick lines, typing, Report), a short strip of
+  new lines (game.json `screen.chat` puts it where the game has room, or keeps new lines in the sheet), and two
   switches each player keeps: "Show my messages over my character" and "Show chat on this screen". The big screen
   shows the lines in a corner; the watch page has a Chat button; homie.rocks shows a room's chat on its card.
 - **Rules** per game (game.json `"chat"`) and per server, in the office or with `chat rules`: off, emoji, quick

package/chat/CHAT.md

@@ -14,9 +14,12 @@ studio's owner is responsible for, read [OWNERS.md](OWNERS.md).
 
 - **The Chat pill** on the play page, beside the room button: the room's last minutes, the
   reactions, the quick lines, typing where allowed, Report on a line, and two switches ("Show my
-  messages over my character", "Show chat on this screen").
+  messages over my character", "Show chat on this screen"). On a phone it is a round icon, as the
+  room button is, with the count of new lines on its corner; on a computer it says "Chat" unless
+  the word would reach the middle of the top edge, where games keep a clock or a title.
 - **The float:** every reaction rises up every screen in the room.
-- **The ticker:** a new line shows for a moment where the play page's status chip sits.
+- **The strip:** a new line shows for a moment where the play page's status chip sits (the bottom
+  left), or where the game says (below).
 - **The big screen** (`/<game>/tv`) shows the room's lines in a corner; the **watch page** has a
   Chat button; **homie.rocks** shows the room's chat on its card when the studio allows it.
 
@@ -49,9 +52,37 @@ studio's owner is responsible for, read [OWNERS.md](OWNERS.md).
 | `block`, `allow` | the studio's own words to hold (`word*` inside words) or to let through | none |
 
 `"chat": false` turns it off. A kids server, and every beginner server, keeps chat to emoji and
-quick lines whatever the game says. Where new lines show for a moment: game.json
-`"screen": { "chat": "bottom-right" }` (any corner, `top-center` or `bottom-center`), or `false`
-for only the pill's count.
+quick lines whatever the game says.
+
+**Where it sits on the screen, in game.json `"screen"`**, so a game with a busy HUD keeps typed
+chat without anything covering its clock, its title or its controls. The Chat pill sits in the
+room button's band, so `"screen": { "share": … }` places both (`"label": false` keeps both round
+icons). `"screen": { "chat": … }` places the strip of new lines and the big screen's corner:
+
+```json
+"screen": {
+  "share": { "phone": { "at": "top-left", "label": false } },
+  "chat": {
+    "desk": { "at": "top-left", "y": 130 },
+    "phone": { "lines": "sheet-only" },
+    "tv": { "at": "top-right" }
+  }
+}
+```
+
+| Field | | Default |
+|---|---|---|
+| `at` | `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right` | the bottom left (the bottom right when the room button is at the bottom left) |
+| `x`, `y` | move it in from its side and its edge, in CSS pixels (0 to 600; in the middle of an edge, `x` moves it either way). Sharing the room button's place, it also sits past the button | 0 |
+| `lines` | `strip` (new lines show for a moment), or `sheet-only` (they wait in the Chat sheet and the pill counts them) | `strip` |
+| `desk`, `phone`, `sideways`, `tv` | a computer, a phone held upright, a phone turned sideways (else as `phone`), the big screen: each changes only what it names | |
+
+A plain string (`"chat": "bottom-right"`) is a place for every device, and `false` is
+`"lines": "sheet-only"` for every device. The big screen has no sheet: it takes a corner only
+(the top level's when that is a corner, else the one its join card leaves free) and keeps its
+lines unless its own `tv` entry says `"sheet-only"`, which leaves it the float. A wrong field is
+the default on the page, and `homie-studio build` says which. Look at the play page on a phone
+and a computer while a round is on and somebody says something, and at `/<id>/tv`.
 
 **Speech bubbles over characters**, with the port kit (the starters draw them):
 

package/lib/build.mjs

@@ -47,6 +47,7 @@ import { STUDIO_VERSION } from './version.mjs';
 import { licenseOf, remixRow } from '../worker/license.mjs';
 import { SERVER_LIMITS, serverOf } from '../worker/servers.mjs';
 import { chatProblems } from '../worker/chat.mjs';
+import { screenChatProblems } from '../worker/chat-page.mjs';
 import { vocabularyOf } from '../worker/brain.mjs';
 import { shopForBuild } from './shop.mjs';
 import { audienceOf } from '../worker/shop-rules.mjs';
@@ -323,6 +324,8 @@ export async function build(root, { only = null, log = () => {}, deploy = proces
     if (chatBad.length) throw new Error(`games/${g.id}/game.json: ${chatBad.join('; ')}`);
     // A game's own decisions (NETPLAY.md section 20): game.json "decide" is true or false (the Worker answers net.decide only then).
     if (g.decide !== undefined && typeof g.decide !== 'boolean') throw new Error(`games/${g.id}/game.json: "decide" is true (the host may ask the studio's decision model, within the AI brains' day) or false`);
+    // Where chat sits on the screen (game.json "screen": { "chat" }, 0.24.5): a wrong field is the default on the page.
+    for (const p of screenChatProblems(g.screen?.chat)) log(`warning: games/${g.id}/game.json: ${p}; the play page uses the default there`);
     // The game's own source, for other studios to remix (game.json "share": { "source": false } keeps it private).
     if (g.share?.source !== false) writeFileSync(join(out, 'source.json'), `${JSON.stringify(sourceOf(g.dir, g.id, { studio: studio.name ?? null, game: g.name ?? g.id, license: g.license }))}\n`);
     // Its assets' licences, and the address and SHA-256 of each one a remix may carry (`game remix` fetches them).

package/lib/scaffold.mjs

@@ -221,10 +221,16 @@ studio's pinned copy, never a registry lookup of the bare name.
 - Import it as \`import { createNetplay } from '@homie-rocks/studio/netplay'\`.
 - Phones and computers: touch controls on phones only, keys on computers; keep the
   centre of the screen clear during play.
-- The play page's small room button (Invite, Big screen, the room code) sits top right. If the game's
-  scoreboard or a bar is there, move it in game.json \`"screen": { "share": … }\`: a corner or \`top-center\`, per
-  device (\`desk\`, \`phone\`, \`sideways\`), with an \`x\` / \`y\` offset in pixels, and \`"label": false\` to keep it
-  a small icon (\`node_modules/@homie-rocks/studio/site/SITE.md\`). Look at it on a phone and a computer.
+- The play page's small room button (Invite, Big screen, the room code) sits top right, with the Chat pill
+  beside it (a round icon on a phone, as the room button is). If the game's scoreboard or a bar is there, move
+  both in game.json \`"screen": { "share": … }\`: a corner or \`top-center\`, per device (\`desk\`, \`phone\`,
+  \`sideways\`), with an \`x\` / \`y\` offset in pixels, and \`"label": false\` to keep them small icons
+  (\`node_modules/@homie-rocks/studio/site/SITE.md\`). Room chat's strip of new lines shows for a moment at the
+  bottom left: if the game's HUD or controls are there, \`"screen": { "chat": … }\` puts it where the game has
+  room (\`at\`: a corner, \`top-center\` or \`bottom-center\`; \`x\` / \`y\`; per device, and \`tv\` for the big
+  screen), or \`"lines": "sheet-only"\` keeps new lines in the Chat sheet, the pill counting them, so a game with
+  a busy HUD keeps typed chat (\`node_modules/@homie-rocks/studio/chat/CHAT.md\`). Look at both on a phone and a
+  computer while a round is on and somebody says something.
 - **Watch any player.** Every live room can be watched at \`/<id>/watch?room=<room>\` (each room on the Rooms page
   and the landing has a Watch button): the game itself, drawn by the watcher's own browser, which never takes a
   seat, with a strip of the players to switch between (a tap, keys 1-9, A for Auto, O for the whole room). Point the

package/lib/template-history.json

@@ -1156,6 +1156,45 @@
      }
     }
    }
+  },
+  "0.24.5": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "ce7a8fd91c6bbee2",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "ca131cd0472464fb",
+    "site/src/worker.mjs": "ca3f1630f2420ad3"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "214aa46eb3a895d5",
+     "## Layout": "8baf49e4291e7e88",
+     "## Commands (all through the pinned CLI in node_modules)": "d80ec56e4b4fc4c6",
+     "## The site": "ab922bb6bde23293",
+     "## Making games": "abf2f0d59341512d",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Art direction and models": "124772c374de7390",
+     "## Running live games (the back office)": "4aa5f513a7cd2c3b",
+     "## Servers and AI seats": "98d08705087a33ec",
+     "## Selling things (the shop)": "b04b0a2b25f524f2",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "7e8458adc1b81ece",
+     "## Beta": "9d02638207a26e73"
+    }
+   },
+   "named": {
+    "Homie Arcade": {
+     "sections": {
+      "AGENTS.md": {
+       "## Commands (all through the pinned CLI in node_modules)": "b35df2c19cd4b534"
+      }
+     }
+    }
+   }
   }
  }
 }

package/netplay/NETPLAY.md

@@ -1340,16 +1340,20 @@ ticker.
 ### What the page does (worker/chat-page.mjs)
 
 - **Play:** a Chat pill in the room button's band (game.json `screen.share` already keeps that
-  corner clear of the game's HUD), with a count of unread lines; its sheet: the room's last
+  corner clear of the game's HUD; a round icon on a phone and beside a room button kept an icon,
+  and on a computer wherever its word would reach the middle third of the top), with a count of
+  unread lines; its sheet: the room's last
   minutes, a row of reactions (2.5 rem circles that pop), the quick lines, typing where the rules
   allow it (and why not where they do not: "Sign in to type here. Emoji are open to everyone."),
   Report on a line, and two switches kept in this browser: **Show my messages over my character**
-  and **Show chat on this screen** (off: no ticker, no float, no bubbles in this game). New lines
-  show for a moment where the status chip sits (game.json `"screen": { "chat": "bottom-right" }`
-  moves them; `false` keeps only the pill's count).
+  and **Show chat on this screen** (off: no strip, no float, no bubbles in this game). New lines
+  show for a moment where the status chip sits; game.json `"screen": { "chat": … }` moves that
+  strip per device (`at`, `x` / `y`, `desk`, `phone`, `sideways`, `tv`) or keeps new lines in the
+  sheet (`"lines": "sheet-only"`, or `false`: only the pill's count). chat/CHAT.md has the fields.
 - **Float:** every reaction rises up every screen in the room, as on the television: at most six
   a second and eighteen at once, 2.4 s each with a little sway. The sender's own floats at once.
-- **TV** (`/<game>/tv`): the room's lines in the corner the QR card does not use, no typing.
+- **TV** (`/<game>/tv`): the room's lines in the corner the QR card does not use (or game.json
+  `screen.chat`'s corner), no typing.
 - **Watch:** a Chat button in the band; its panel over the stage (a bottom sheet on a phone).
 
 **Privacy.** Nothing a person says is stored: the room keeps the last 50 lines of the last 15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, big songs and videos in the studio's own R2 once it has storage (uploaded, checked by SHA-256, served at the same addresses), deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",

package/site/SITE.md

@@ -169,6 +169,10 @@ where the game has room, per device:
 - A button at the bottom left sends the "finding a room" chip to the bottom right.
 - On a server, the server's pill sits beside the button, on its inner side in the same band, never under it: on a
   phone held upright it is one more dot; elsewhere its name shows for a few seconds, then it is a dot too.
+- Room chat's Chat pill sits in the same band: a round icon on a phone (either way up) and beside a button kept an
+  icon; on a computer it says "Chat" unless the word would take the band off the screen or into the middle third of
+  its width, where games keep a clock or a title. Its strip of new lines (bottom left by default) moves with
+  `"screen": { "chat": … }`, per device, or stays in the Chat sheet (`"lines": "sheet-only"`): chat/CHAT.md.
 
 Look at the play page on a computer and a phone (both ways up) once a round is on: the button must not sit on a
 score, a timer or a bar. A room code the relay cannot use (1 to 32 letters, digits, `-` or `_`) is refused

package/worker/chat-page.mjs

@@ -3,10 +3,11 @@
  * screen (the TV view) and the watch page. It speaks on the page's own watch socket, so every game has it, old builds
  * too, with no game code:
  *
- *   play      a Chat pill beside the room button (the corner game.json screen.share keeps clear of the game's HUD),
- *             its sheet (the room's last minutes, the room's emoji, its quick lines, typing where the rules allow,
- *             Report on a line, and for the studio's owner Remove, Mute and Kick), a short ticker of new lines where the
- *             status chip sits, and reactions floating up the screen
+ *   play      a Chat pill beside the room button (the corner game.json screen.share keeps clear of the game's HUD; the
+ *             round icon on a phone, as the room button is), its sheet (the room's last minutes, the room's emoji, its
+ *             quick lines, typing where the rules allow, Report on a line, and for the studio's owner Remove, Mute and
+ *             Kick), a short strip of new lines where the status chip sits or where game.json screen.chat puts it
+ *             (chatPlaces; "sheet-only" keeps them in the sheet), and reactions floating up the screen
  *   tv        the room's lines in a corner (no typing: a television is read across a room) and the float
  *   watch     a Chat button in the watch page's band, its panel over the stage, and the float
  *
@@ -22,17 +23,86 @@ import { REACTIONS } from './chat.mjs';
 import { REPORT_REASONS, REPORT_WORDS } from './chat-store.mjs';
 import { NET_PALETTE } from './room.mjs';
 
+/** Where room chat's strip of new lines may sit: a corner, or the middle of the top or bottom edge. */
+export const CHAT_PLACES = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+const CHAT_CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const CHAT_DEVICES = ['desk', 'phone', 'sideways', 'tv'];
+const CHAT_FIELDS = ['at', 'x', 'y', 'lines'];
+
+/** One entry of game.json `screen.chat` as written (a place, false, or an object), keeping only the fields that are right. */
+function chatEntry(v) {
+  if (v === false) return { lines: 'sheet-only' };
+  if (typeof v === 'string') return CHAT_PLACES.includes(v) ? { at: v } : {};
+  if (!v || typeof v !== 'object' || Array.isArray(v)) return {};
+  const o = {};
+  if (CHAT_PLACES.includes(v.at)) o.at = v.at;
+  for (const k of ['x', 'y']) if (v[k] !== undefined && v[k] !== null && v[k] !== '' && Number.isFinite(Number(v[k]))) o[k] = Math.round(Number(v[k]));
+  if (v.lines === 'strip' || v.lines === 'sheet-only') o.lines = v.lines;
+  return o;
+}
+
+/**
+ * Where room chat sits on each screen, from game.json `screen.chat` (0.24.5), so a game with a busy HUD keeps its chat
+ * off its clock, its title and its controls. The Chat pill itself sits in the room button's band (`screen.share`
+ * places both); this places the strip of new lines that shows for a moment, and the big screen's corner of lines:
+ *
+ *   "chat": "bottom-right"                                   every device's strip there (and the big screen's corner)
+ *   "chat": false                                            no strip: new lines wait in the sheet, the pill counts them
+ *   "chat": { "at": "top-left", "y": 120 }                   moved 120 px in from its edge (x: from its side)
+ *   "chat": { "lines": "strip", "phone": { "lines": "sheet-only" }, "tv": { "at": "top-right" } }
+ *
+ * `at` is a place from CHAT_PLACES (default: the bottom left, or the bottom right when the room button is there); `x`
+ * and `y` move it in, 0 to 600 px (in the middle of an edge, `x` moves it either way); `lines` is "strip" (the default)
+ * or "sheet-only". `desk`, `phone` (held upright), `sideways` (else as `phone`) and `tv` (the big screen) each change
+ * only what they name. The big screen has no sheet: it takes a corner only, its place follows the top level's when that
+ * is a corner, and its lines stay unless its own entry says "sheet-only" (then it shows only the float).
+ */
+export function chatPlaces(value) {
+  const top = chatEntry(value);
+  const per = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+  const done = (o) => {
+    const at = o.at ?? null;
+    const clamp = (n, lo) => Math.max(lo, Math.min(600, n ?? 0));
+    return { at, x: clamp(o.x, at && at.endsWith('center') ? -600 : 0), y: clamp(o.y, 0), lines: o.lines ?? 'strip' };
+  };
+  const phone = { ...top, ...chatEntry(per.phone) };
+  const { lines: _l, ...where } = top;
+  const own = chatEntry(per.tv);
+  if (own.at && !CHAT_CORNERS.includes(own.at)) delete own.at;
+  const tv = { ...(CHAT_CORNERS.includes(where.at) ? where : {}), ...own };
+  return { desk: done({ ...top, ...chatEntry(per.desk) }), phone: done(phone), sideways: done({ ...phone, ...chatEntry(per.sideways) }), tv: done(tv) };
+}
+
+/** game.json `screen.chat` as the build reads it: the problems in words (the page uses the default for anything wrong). */
+export function screenChatProblems(value) {
+  if (value === undefined || value === null || value === false) return [];
+  const out = [];
+  const one = (v, name, top) => {
+    if (v === false) return;
+    if (typeof v === 'string') { if (!CHAT_PLACES.includes(v)) out.push(`${name} "${v}" is not a place (${CHAT_PLACES.join(', ')})`); return; }
+    if (!v || typeof v !== 'object' || Array.isArray(v)) { out.push(`${name} is a place, false, or { "at", "x", "y", "lines" }`); return; }
+    for (const k of Object.keys(v)) {
+      if (top && CHAT_DEVICES.includes(k)) continue;
+      if (!CHAT_FIELDS.includes(k)) out.push(`${name}.${k} is not a field (${k === 'corner' || k === 'place' ? 'the place is "at"' : `${CHAT_FIELDS.join(', ')}${top ? `, or ${CHAT_DEVICES.join(', ')}` : ''}`})`);
+    }
+    if (v.at !== undefined && !CHAT_PLACES.includes(v.at)) out.push(`${name}.at "${v.at}" is not a place (${CHAT_PLACES.join(', ')})`);
+    if (name.endsWith('.tv') && v.at !== undefined && !CHAT_CORNERS.includes(v.at)) out.push(`${name}.at: the big screen takes a corner`);
+    for (const k of ['x', 'y']) if (v[k] !== undefined && !Number.isFinite(Number(v[k]))) out.push(`${name}.${k} is a number of pixels`);
+    if (v.lines !== undefined && v.lines !== 'strip' && v.lines !== 'sheet-only') out.push(`${name}.lines is "strip" or "sheet-only"`);
+  };
+  one(value, 'screen.chat', true);
+  if (value && typeof value === 'object' && !Array.isArray(value)) for (const d of CHAT_DEVICES) if (value[d] !== undefined) one(value[d], `screen.chat.${d}`, false);
+  return out.slice(0, 8);
+}
+
 /** What a page's chat starts from (`window.__HOMIE_CHAT`): its surface, the game, and who this browser is to the studio. */
-export function chatBoot(g, { surface = 'play', owner = false, acct = false, member = false, room = null, place = null } = {}) {
-  const screen = g?.screen?.chat;
-  const ticker = screen === false ? false : typeof screen === 'string' ? screen : screen && typeof screen === 'object' && typeof screen.at === 'string' ? screen.at : null;
+export function chatBoot(g, { surface = 'play', owner = false, acct = false, member = false, room = null } = {}) {
   return {
     surface, game: g.id, name: g.name, owner: Boolean(owner), acct: Boolean(acct), member: Boolean(member), palette: NET_PALETTE,
     reactions: REACTIONS, reasons: REPORT_REASONS.map((k) => ({ k, text: REPORT_WORDS[k] })),
     ...(room ? { room } : {}),
-    // game.json "screen": { "chat": "bottom-right" | false }: where new lines show for a moment (false: only the pill's count).
-    ...(ticker !== null ? { ticker } : {}),
-    ...(place ? { place } : {}),
+    // game.json "screen": { "chat": … }: where the strip of new lines sits on each device, or "sheet-only" (chatPlaces).
+    places: chatPlaces(g?.screen?.chat),
     account: '/account/',
   };
 }
@@ -42,7 +112,11 @@ export const CHAT_CSS = `
 .cpill .cico { width: 15px; height: 15px; flex: none; }
 .cpill .cbadge { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--hot); color: #0b0b10; font: 800 10px/16px ui-sans-serif, system-ui, sans-serif; text-align: center; }
 .cpill.dim .cbadge { display: inline-block; }
+/* The pill as the room button's round icon (on a phone, beside a room button kept an icon, or where its word would reach
+   the game's clock or title): its word goes, and the count rides its corner. */
+.cpill.icon-only, .cpill.icon-only:hover, .cpill.icon-only:focus-visible, .cpill.icon-only[aria-expanded="true"] { position: relative; width: 34px; padding: 0; justify-content: center; }
 .cpill.icon-only span.cword { display: none; }
+.cpill.icon-only .cbadge { position: absolute; top: -5px; right: -5px; min-width: 16px; box-shadow: 0 0 0 2px rgba(6,9,16,.85); }
 .csheet { display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 16px)); }
 .chead { display: flex; align-items: center; gap: 8px; margin: 0 2px; }
 .chead b { font: 800 15px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
@@ -88,24 +162,25 @@ export const CHAT_CSS = `
 .creport { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 2px; }
 .creport p { grid-column: 1 / -1; margin: 0; color: #c3cad9; font: 600 12.5px/1.35 ui-sans-serif, system-ui, sans-serif; }
 .creport button { min-height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: inherit; font: 700 12px/1.2 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-align: left; }
-.ctick { position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 4px; max-width: min(320px, calc(100vw - 24px)); pointer-events: none; }
-.ctick.at-bottom-left { left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px); align-items: flex-start; }
-.ctick.at-bottom-right { right: max(10px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px); align-items: flex-end; }
-.ctick.at-bottom-center { left: 50%; transform: translateX(-50%); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px); align-items: center; }
-.ctick.at-top-left { left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 48px); align-items: flex-start; flex-direction: column-reverse; }
-.ctick.at-top-right { right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 48px); align-items: flex-end; flex-direction: column-reverse; }
-.ctick.at-top-center { left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 48px); align-items: center; flex-direction: column-reverse; }
+/* The strip of new lines (game.json screen.chat: its place, moved in by --chat-x / --chat-y). */
+.ctick { --chat-x: 0px; --chat-y: 0px; position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 4px; max-width: min(320px, calc(100vw - 24px)); pointer-events: none; }
+.ctick.at-bottom-left { left: calc(max(10px, env(safe-area-inset-left)) + var(--chat-x)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px + var(--chat-y)); align-items: flex-start; }
+.ctick.at-bottom-right { right: calc(max(10px, env(safe-area-inset-right)) + var(--chat-x)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px + var(--chat-y)); align-items: flex-end; }
+.ctick.at-bottom-center { left: calc(50% + var(--chat-x)); transform: translateX(-50%); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 36px + var(--chat-y)); align-items: center; }
+.ctick.at-top-left { left: calc(max(10px, env(safe-area-inset-left)) + var(--chat-x)); top: calc(max(10px, env(safe-area-inset-top)) + 48px + var(--chat-y)); align-items: flex-start; flex-direction: column-reverse; }
+.ctick.at-top-right { right: calc(max(10px, env(safe-area-inset-right)) + var(--chat-x)); top: calc(max(10px, env(safe-area-inset-top)) + 48px + var(--chat-y)); align-items: flex-end; flex-direction: column-reverse; }
+.ctick.at-top-center { left: calc(50% + var(--chat-x)); transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 48px + var(--chat-y)); align-items: center; flex-direction: column-reverse; }
 .ctick div { padding: 5px 10px; border-radius: 12px; background: rgba(6,9,16,.66); color: #eef1f8; font: 600 13px/1.3 ui-sans-serif, system-ui, -apple-system, sans-serif; overflow-wrap: anywhere; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ctin .2s ease-out; transition: opacity .5s; }
 .ctick div b { font-weight: 800; margin-right: 6px; }
 .ctick div.cout { opacity: 0; }
 @keyframes ctin { from { opacity: 0; transform: translateY(6px); } }
 .cfloat { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
-.ctv { position: fixed; z-index: 6; box-sizing: border-box; width: min(26rem, 30vw); max-height: 42vh; display: flex; flex-direction: column; justify-content: flex-end; gap: .3em; padding: .55em .8em; border-radius: 16px; background: rgba(8,12,22,.7); border: 1px solid rgba(255,255,255,.12); color: #eef1f8; font: 600 clamp(14px, 1.6vmin, 24px)/1.35 ui-sans-serif, system-ui, -apple-system, sans-serif; pointer-events: none; overflow: hidden; }
+.ctv { --chat-x: 0px; --chat-y: 0px; position: fixed; z-index: 6; box-sizing: border-box; width: min(26rem, 30vw); max-height: 42vh; display: flex; flex-direction: column; justify-content: flex-end; gap: .3em; padding: .55em .8em; border-radius: 16px; background: rgba(8,12,22,.7); border: 1px solid rgba(255,255,255,.12); color: #eef1f8; font: 600 clamp(14px, 1.6vmin, 24px)/1.35 ui-sans-serif, system-ui, -apple-system, sans-serif; pointer-events: none; overflow: hidden; }
 .ctv:empty { display: none; }
-.ctv.at-bottom-left { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
-.ctv.at-bottom-right { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
-.ctv.at-top-left { left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); justify-content: flex-start; }
-.ctv.at-top-right { right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); justify-content: flex-start; }
+.ctv.at-bottom-left { left: calc(max(16px, env(safe-area-inset-left)) + var(--chat-x)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--chat-y)); }
+.ctv.at-bottom-right { right: calc(max(16px, env(safe-area-inset-right)) + var(--chat-x)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--chat-y)); }
+.ctv.at-top-left { left: calc(max(16px, env(safe-area-inset-left)) + var(--chat-x)); top: calc(max(16px, env(safe-area-inset-top)) + var(--chat-y)); justify-content: flex-start; }
+.ctv.at-top-right { right: calc(max(16px, env(safe-area-inset-right)) + var(--chat-x)); top: calc(max(16px, env(safe-area-inset-top)) + var(--chat-y)); justify-content: flex-start; }
 .ctv div { overflow-wrap: anywhere; transition: opacity 1s; }
 .ctv div.cout { opacity: 0; }
 .ctv b { font-weight: 800; margin-right: .4em; }
@@ -221,21 +296,41 @@ export const CHAT_JS = String.raw`(function () {
     if (parts.length) raf = requestAnimationFrame(paint);
   }
 
-  /* ------------------------------------------------------------ the ticker: new lines, for a moment, where the chip sits */
+  /* ------------------------------------------------------------ where chat sits on this screen (game.json screen.chat) */
+  // This screen as the room button knows it (desk, phone held upright, phone turned sideways), else by its size.
+  function device() {
+    if (surface === 'tv') return 'tv';
+    var s = window.__shell && window.__shell.share;
+    if (s && s.device) return s.device;
+    var w = window.innerWidth || 0; var h = window.innerHeight || 0;
+    return w && h && Math.min(w, h) <= 540 ? (w > h ? 'sideways' : 'phone') : 'desk';
+  }
+  function placeHere() { var p = cfg.places || {}; return p[device()] || p.desk || { at: null, x: 0, y: 0, lines: 'strip' }; }
+
+  /* ------------------------------------------------------------ the strip: new lines, for a moment, where the chip sits */
   var tickEl = null;
   function tickPlace() {
-    if (cfg.ticker) return cfg.ticker;
+    var p = placeHere();
+    if (p.at) return p.at;
     var s = window.__shell && window.__shell.share;
     return s && s.at === 'bottom-left' ? 'bottom-right' : 'bottom-left';
   }
   function tick(m) {
-    if (surface === 'tv' || cfg.ticker === false || !st.show || st.open) return;
+    if (surface === 'tv' || !st.show || st.open) return;
+    // "sheet-only": a busy HUD keeps new lines in the sheet; the pill's count says they are there.
+    var p = placeHere();
+    if (p.lines === 'sheet-only') return;
     if (!tickEl) {
       var host = (surface === 'watch' ? document.querySelector('.stage') : null) || document.body;
       if (!host) return;
       tickEl = el('div', 'ctick'); tickEl.setAttribute('aria-hidden', 'true'); host.appendChild(tickEl); if (surface === 'watch') tickEl.style.position = 'absolute';
     }
-    tickEl.className = 'ctick at-' + tickPlace();
+    var at = tickPlace();
+    tickEl.className = 'ctick at-' + at;
+    // Moved in by the game's x / y, and past the room button when the strip shares its place.
+    var s = window.__shell && window.__shell.share; var same = surface === 'play' && s && s.at === at;
+    tickEl.style.setProperty('--chat-x', ((p.x || 0) + (same ? s.x || 0 : 0)) + 'px');
+    tickEl.style.setProperty('--chat-y', ((p.y || 0) + (same ? s.y || 0 : 0)) + 'px');
     var row = el('div');
     if (m.name) { var b = el('b', '', m.name); b.style.color = colourOf(m); row.appendChild(b); }
     row.appendChild(document.createTextNode(m.glyph && m.react ? m.glyph : (m.text || '')));
@@ -247,13 +342,16 @@ export const CHAT_JS = String.raw`(function () {
   /* ------------------------------------------------------------ the TV's corner */
   var tvEl = null;
   function tvLine(m) {
-    if (!st.show) return;
+    var p = placeHere();
+    if (!st.show || p.lines === 'sheet-only') return;
     if (!tvEl) {
       if (!document.body) return;
       tvEl = el('div', 'ctv');
       var join = document.querySelector('[data-join]');
       var at = join && /join-bottom-left/.test(join.className) ? 'bottom-right' : join && /join-top-left|join-top-right/.test(join.className) ? 'bottom-left' : 'bottom-left';
-      tvEl.className = 'ctv at-' + (cfg.ticker && cfg.ticker !== 'bottom-center' && cfg.ticker !== 'top-center' ? cfg.ticker : at);
+      tvEl.className = 'ctv at-' + (p.at || at);
+      tvEl.style.setProperty('--chat-x', (p.x || 0) + 'px');
+      tvEl.style.setProperty('--chat-y', (p.y || 0) + 'px');
       document.body.appendChild(tvEl);
     }
     var row = el('div', m.t === 'react' ? 'creact' : '');
@@ -277,6 +375,7 @@ export const CHAT_JS = String.raw`(function () {
       pill = el('button', 'pill cpill'); pill.type = 'button'; pill.setAttribute('data-chat-toggle', ''); pill.setAttribute('aria-expanded', 'false'); pill.setAttribute('aria-controls', 'chat-sheet'); pill.setAttribute('aria-label', 'Room chat');
       pill.innerHTML = ICON; pill.appendChild(el('span', 'cword', 'Chat')); badge = el('b', 'cbadge'); badge.hidden = true; pill.appendChild(badge);
       band.appendChild(pill);
+      watchBand(band);
       sheet = el('div', 'sheet csheet'); sheet.id = 'chat-sheet'; sheet.setAttribute('role', 'dialog'); sheet.setAttribute('aria-label', 'Room chat'); sheet.hidden = true;
       ui.appendChild(sheet);
       // One sheet at a time: the room's and the server's close this one, and this one closes theirs.
@@ -318,6 +417,52 @@ export const CHAT_JS = String.raw`(function () {
     renderFeed();
     paintRules();
   }
+  /*
+   * The pill's word, as the room button's: on a phone (either way up), or beside a room button that game.json keeps an
+   * icon ("label": false), the pill is the round icon from the start. Elsewhere its word shows unless, with it, the band
+   * would leave the screen or reach from its corner into the middle third of the screen's width (where games keep a
+   * clock or a title); once it has, it stays the icon until the screen changes size, so it never flickers as the room
+   * button's own label comes and goes.
+   */
+  var narrow = false;
+  function shareHere() { var s = window.__shell && window.__shell.share; return s || {}; }
+  function wordCollides() {
+    var band = pill && pill.parentNode;
+    var w = window.innerWidth || 0;
+    if (!band || !band.getBoundingClientRect || !w) return false;
+    var had = pill.classList.contains('icon-only');
+    if (had) pill.classList.remove('icon-only');
+    var r = band.getBoundingClientRect();
+    if (had) pill.classList.add('icon-only');
+    if (!r.width) return false;
+    if (r.left < 4 || r.right > w - 4) return true;
+    var at = shareHere().at || 'top-right';
+    if (/center/.test(at)) return false;
+    return /right/.test(at) ? r.left < w * 2 / 3 : r.right > w / 3;
+  }
+  function fitPill() {
+    if (!pill || surface !== 'play') return;
+    var s = shareHere();
+    if (!narrow && s.device !== 'phone' && s.device !== 'sideways' && s.label !== false) narrow = wordCollides();
+    var icon = s.device === 'phone' || s.device === 'sideways' || s.label === false || narrow;
+    if (icon) { pill.classList.add('icon-only'); pill.title = 'Room chat'; } else { pill.classList.remove('icon-only'); pill.title = ''; }
+    st.compact = icon;
+  }
+  var fitQueued = false;
+  function fitSoon() {
+    if (fitQueued) return;
+    fitQueued = true;
+    var go = function () { fitQueued = false; fitPill(); };
+    if (window.requestAnimationFrame) window.requestAnimationFrame(go); else setTimeout(go, 16);
+  }
+  function watchBand(band) {
+    fitPill();
+    // The band changes as the room code arrives, the server's pill shows and the labels fade to dots: look again.
+    try { if (window.ResizeObserver) new ResizeObserver(fitSoon).observe(band); } catch (e) {}
+    // A new size (a turned phone, a resized window): the room button moves first, then the word is measured afresh.
+    window.addEventListener('resize', function () { setTimeout(function () { narrow = false; fitPill(); }, 60); });
+  }
+  st.fit = fitPill;
   function openChat(on, quiet) {
     if (!sheet) return;
     st.open = Boolean(on);

package/worker/chat.mjs

@@ -209,7 +209,10 @@ export function chatProblems(raw) {
   const out = [];
   if (raw.mode !== undefined && !CHAT_MODES.includes(raw.mode)) out.push('chat.mode is off, emoji, lines or text');
   for (const k of ['who', 'react']) if (raw[k] !== undefined && !CHAT_WHO.includes(raw[k])) out.push(`chat.${k} is anyone, signed-in or members`);
-  if (raw.lines !== undefined && raw.lines !== null) {
+  // Where chat sits on the screen is the page's (game.json "screen": { "chat" }), never the room's rules.
+  for (const k of ['corner', 'place', 'at']) if (raw[k] !== undefined && (k !== 'at' || typeof raw.at === 'string')) out.push(`chat.${k}: where chat sits on the screen goes in "screen": { "chat": { "at": … } }`);
+  if (raw.lines === 'strip' || raw.lines === 'sheet-only') out.push(`chat.lines is the quick lines ({ "id": "text" }); "${raw.lines}" goes in "screen": { "chat": { "lines": "${raw.lines}" } }`);
+  else if (raw.lines !== undefined && raw.lines !== null) {
     const pairs = Array.isArray(raw.lines) ? raw.lines.map((x) => [x?.id, x?.text]) : typeof raw.lines === 'object' ? Object.entries(raw.lines) : null;
     if (!pairs) out.push('chat.lines is { "id": "text" }');
     else {

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.24.4';
+export const STUDIO_VERSION_TAG = '0.24.5';