coworking-agents 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.10.0 — 2026-10-14
+- Fix: the test suite no longer stops a running office started at login (it turned the login item off through the real launchd label)
+- Three new rooms on the office floor, under the game room: the library, the lab and the waiting room. The agents stay at their desks; walk into a room (arrows/WASD or a click) and you see who is reading or browsing, running commands, or waiting on you right now. A number on the door says how many; Enter next to someone opens them (the waiting room opens the question)
+- Walk inside the rooftop, the trophy room and the server room too; the elevator door in the corner takes you back
+
+## 0.9.1 — 2026-10-14
+- ☰ → Settings → *Open with the computer*: the start-at-login switch right in the menu, with its green dot (it also stays in Personalise)
+- The browser tab shows the new app icon (the agent at its desk) instead of the old face; the menu bar keeps the small face, which reads best at that size
+- Phone: always the same address (the computer's name and port 4778, whatever port the office got), so the home-screen icon added once keeps working
+- Phone: turn it on from the office (☰ → 📱 → *Turn the phone on*) and it stays on, starting with the office every time with the same QR (the app and autostart included); *Turn the phone off* ends it. `--phone` still works
+- ☰ menu: three groups (See, Do, Settings) side by side, every item with a pixel icon in the same style, and it scrolls instead of running off the screen
+
 ## 0.9.0 — 2026-10-14
 - Tell me when… (☰ → ⏰, or the agent's panel): a notice when an agent finishes (once), when a limit passes a level you pick (again after it resets), or when any agent edits a file whose path has some text; in the office, the bell and as a system notification. Kept with your progress
 - Past conversations (☰ → 🗄): every Claude Code and Codex conversation on this computer from the last 60 days, open or closed, found by name, folder or what was said (last 30 days), and read as a chat with its helpers and a search inside it. Read only; off in private mode

package/README.md

@@ -212,13 +212,16 @@ The 🔔 bell collects agent requests, task updates, recommendations (*Apply*, *
 The office works in any browser. If you prefer an app:
 
 - **Create the app** (Personalise, or `npx coworking-agents install-app`): a *Coworking Agents* app made on your computer — free, no store, no signing — in Applications (macOS), the Start Menu and Desktop (Windows) or the applications menu (Linux). Opening it starts the office if needed and shows it in an app window. `uninstall-app` removes it.
-- **On the phone:** with `--phone`, add the phone panel to the home screen (Safari → Share → Add to Home Screen; Chrome → Add to Home screen). It opens full screen on the same Wi-Fi; the code is kept, and *Change the phone code* cuts every phone off.
+- **On the phone:** turn the phone on in ☰ → 📱 Phone (or start with `--phone`) and add it to the home screen (Safari → Share → Add to Home Screen; Chrome → Add to Home screen). Its address never changes: the computer's own name on the network (`yourmac.local`, so a new Wi-Fi address doesn't matter) and port 4778, with a kept code, so the icon added once keeps working after restarts and updates. *Change the phone code* cuts every phone off.
 - **Install as an app** (Personalise, or Chrome/Edge's install icon): its own window, no tabs, an icon in the Dock or taskbar. Nothing is cached; it is the same live office.
 - **`npx coworking-agents --app`** opens it in an app window of Chrome, Edge, Brave or Chromium without installing anything.
-- **Start with the computer:** `npx coworking-agents autostart on` (or the switch in Personalise) starts it hidden at login with the tray icon; `autostart off` undoes it. It uses each system's own login entry (macOS LaunchAgent, Windows Startup folder, Linux XDG autostart) with the program and its arguments, never a shell line.
+- **Start with the computer:** `npx coworking-agents autostart on` (or ☰ → Settings → *Open with the computer*) starts it hidden at login with the tray icon; `autostart off` undoes it. It uses each system's own login entry (macOS LaunchAgent, Windows Startup folder, Linux XDG autostart) with the program and its arguments, never a shell line.
 
 ## More panels
 
+The ☰ menu groups everything in three columns: **See** (tasks, costs, notices, history, repositories, past conversations, timelapse, releases), **Do** (new session, message several, tell me when…, phone, TV mode, search, replay, photo, decorate) and **Settings** (system notices, sounds, focus, walking, radio, open with the computer, language, personalise).
+
+
 - **📦 Repositories:** who is in each repo now, what is not committed, to push or behind, worktrees, open tasks, PRs and today's activity.
 - **📣 Message several agents:** one request to the agents you pick, typed into terminal sessions that are waiting and continued in the background for VS Code and app conversations; busy ones are left out.
 - **Office events and mood:** confetti for tests passing, a PR opened or a week under the cost goal; rain when tests or a task fail; the room turns grey-blue when many agents are stuck on you and warm when everything flows.
@@ -230,13 +233,14 @@ The office works in any browser. If you prefer an app:
 - **⏰ Tell me when…:** a notice when an agent finishes (also a button in its panel), when a limit passes a level you pick, or when any agent edits a file you name.
 - **🗄 Past conversations:** every Claude Code and Codex conversation from the last 60 days, open or closed, found by name, folder or what was said, and read as a chat with its helpers. Read only.
 - **🎞 Day timelapse:** a picture of the office every 5 minutes (no names), turned into a ~20 s GIF in your browser. The pictures stay in this browser for 3 days.
+- **👥 Everyone in the office:** the count under the office name (`6 agents +2 🤖` while helpers work); click it for every agent with its state and the helpers working for it.
 - **📺 TV mode** (or `?tv=1`): full screen, only the office and big counters; Esc leaves.
 - **Waiting on you today** in the daily report: measured time the agents waited on your answers and tasks stood blocked on you.
 - **Sounds and do not disturb** (Personalise): each sound on or off, and a daily quiet window that mutes sounds and system notifications.
 
 ## Phone panel (opt-in)
 
-`npx coworking-agents --phone` also serves a small app for your phone on the same Wi-Fi, in the office's pixel look, updated live as things change. Scan the QR code printed in the terminal or shown in ☰ → 📱 Phone, then add it to the home screen.
+Turn the phone on in ☰ → 📱 Phone (it stays on and starts with the office every time), or start with `npx coworking-agents --phone`: a small app for your phone on the same Wi-Fi, in the office's pixel look, updated live as things change. Scan the QR code printed in the terminal or shown in ☰ → 📱 Phone, then add it to the home screen.
 
 - **Now:** who needs you and every agent with what it is doing.
 - **Tap an agent** to see it in full: what it asks or does right now, your last request, its last answer, what it did, the files it touched, its helpers, model, context and cost. The **Conversation** tab shows the whole conversation as a chat, with a search inside it (only what you wrote and what it answered, never tool output). When it finished its turn you can **write to it**; the text is typed into its terminal, like the office does (not into the Claude app or VS Code).
@@ -271,6 +275,8 @@ Click the elevator (or press Enter next to it) to ride between floors, up to the
 
 ![The server room](docs/servers.png)
 
+
+**More rooms on the floor:** under the game room are the **library**, the **lab** and the **waiting room**. The agents stay at their desks; walk into a room and you see who is reading or browsing, running commands or tests, or waiting on you right now (a number on the door says how many). Enter next to someone opens them. You can also walk inside the rooftop, the trophy room and the server room.
 ## Achievements, coins and the shop
 
 - **86 achievements**, each with five tiers from bronze to legend, measured from your history (hours, actions, streaks, nights, Friday evenings, weeks and months with work, tokens, cache, models, cost), the live office (parallel sessions, subagents, giant contexts, commits and pushes, repos and branches, quick answers, clean desks) and what you do in the office (walking, talking, the radio, the shop, customising). A few are secret.

package/bin/coworking-agents.js

@@ -117,7 +117,7 @@ async function reuse() {
     } catch {}
   }
   console.log(`coworking-agents → ${hq.url}${privacy ? '  (private mode)' : ''}\nCtrl+C to close.`);
-  if (phone) {
+  if (phone || hq.phone) { // --phone, or the phone turned on in the office (remembered)
     if (hq.phone) console.log(`\nPhone (same Wi-Fi, trusted networks only — the LAN link is not encrypted) → ${hq.phone.url}\n${require('../src/qr').toTerminal(require('../src/qr').encode(hq.phone.url))}\n`);
     else console.log(`\nPhone panel not started: ${hq.phoneReason === 'nolan' ? 'no local network address found' : hq.phoneReason}`);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coworking-agents",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "A pixel-art coworking office for your AI coding agents (Claude Code, Codex, …): see who's working, who needs you, and who's editing the same checkout.",
   "bin": {
     "coworking-agents": "bin/coworking-agents.js"

package/public/index.html

@@ -4,10 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>coworking-agents</title>
-<link rel="icon" href="favicon.ico?v=4" sizes="any">
-<link rel="icon" href="favicon.png?v=4" type="image/png" sizes="64x64">
-<link rel="icon" href="favicon.svg?v=4" type="image/svg+xml">
-<link rel="apple-touch-icon" href="apple-touch-icon.png?v=4">
+<link rel="icon" href="favicon.ico?v=5" sizes="32x32">
+<link rel="icon" href="favicon.png?v=5" type="image/png" sizes="64x64">
+<link rel="apple-touch-icon" href="apple-touch-icon.png?v=5">
 <link rel="manifest" href="manifest.webmanifest">
 <meta name="theme-color" content="#17151a">
 <link rel="stylesheet" href="style.css">
@@ -86,6 +85,7 @@
 <script src="js/timelapse.js"></script>
 <script src="js/archive.js"></script>
 <script src="js/watches.js"></script>
+<script src="js/places.js"></script>
 <script src="js/main.js"></script>
 </body>
 </html>

package/public/js/floorplan.js

@@ -10,7 +10,7 @@ let ctx = mainCtx; // switched to the thumbnail canvas while drawing another flo
 Art.setCtx(ctx);
 const overlay = document.getElementById('overlay');
 let S = 3, W = 480, H = 300, CX = 320, RX = 330;
-let game = null, data = null, selected = null, layout = [], desks = [], rooms = [], floors = [], floor = 0, spots = null, hallBox = null, boardBox = null, wing = null, floorStates = [], building = false;
+let game = null, places = [], data = null, selected = null, layout = [], desks = [], rooms = [], floors = [], floor = 0, spots = null, hallBox = null, boardBox = null, wing = null, floorStates = [], building = false;
 
 function rawRoomKey(p) {
   if (p.repo && p.repo.name) return p.repo.name;
@@ -131,15 +131,19 @@ function buildFloor(i) {
   const game = { x: 8, y: gy, w: gw, h: GH, doorY: gy + GH / 2,
     doors: [{ side: 'right', x: 8 + gw, y: gy + GH / 2 }, { side: 'top', x: 8 + Math.round(gw * .2), y: gy }, { side: 'top', x: 8 + Math.round(gw * .62), y: gy }, { side: 'bottom', x: 8 + Math.round(gw * .75), y: gy + GH }] };
   y += GH + SHELF_GAP + 4;
+  // under the game room: the library, the lab and the waiting room, side by side, doors on their top wall to the hallway
+  const PH = 118, pw = Math.floor((CX - 20 - 16) / 3), py = y + 6;
+  const places = ['library', 'lab', 'waiting'].map((name, k) => { const x = 8 + k * (pw + 8); return { name, x, y: py, w: pw, h: PH, doors: [{ side: 'top', x: x + Math.round(pw / 2), y: py }] }; });
+  y += PH + SHELF_GAP + 10;
   const occupied = ds.filter(d => d.p);
   const lay = occupied.map(d => Object.assign({}, d));
   lay.forEach((c, k) => { occupied[k].cell = c; });
-  return { rooms: rs, desks: ds, layout: lay, bottom: y, H: 0, game };
+  return { rooms: rs, desks: ds, layout: lay, bottom: y, H: 0, game, places };
 }
 
 function useFloor(i) {
   const f = floorStates[i];
-  rooms = f.rooms; desks = f.desks; layout = f.layout; H = f.H; game = f.game;
+  rooms = f.rooms; desks = f.desks; layout = f.layout; H = f.H; game = f.game; places = f.places || [];
 }
 
 function fitScale() {

package/public/js/i18n.js

@@ -124,7 +124,7 @@ const I18N = {
     surprise: { hint: 'Uma surpresa! Clique para pegar', cake: 'Bolo surpresa na copa!', pigeon: 'Um pombo na janela!', ticket: 'Um bilhete dourado no chão!' },
     scoreboard: { title: 'Placar da semana entre as IAs', hours: 'horas', actions: 'ações', tokens: 'tokens' },
     share: { bestDay: 'Melhor dia', topAi: 'Mais usada', cost: 'Custo estimado', ready: 'Seu cartão da semana está pronto', readyWhy: 'Horas, ações, melhor dia, a IA mais usada e o custo da semana, numa imagem para compartilhar (Jornal → Cartão da semana).', card: 'Cartão da semana', visit: 'Foto para visita', week: 'Minha semana no escritório', hours: 'horas de agentes trabalhando', actions: 'ações', trophies: 'níveis de conquista · lendas', saved: 'Cartão salvo', visitSaved: 'Foto para visita salva', visitNote: 'Sem nomes, branches nem o nome do escritório.' },
-    elevator: { title: 'Elevador', sub: 'Escolha o andar: terraço, escritório, sala de troféus ou servidores.', terrace: '🌇 Terraço', trophy: '🏆 Sala de troféus', servers: '🖧 Sala de servidores', office: '🏢 Escritório', floor: n => `🏢 Andar ${n}` },
+    elevator: { title: 'Elevador', sub: 'Escolha o andar: terraço, escritório, troféus ou servidores. Dentro das salas você anda com as setas.', terrace: '🌇 Terraço', trophy: '🏆 Sala de troféus', servers: '🖧 Sala de servidores', office: '🏢 Escritório', floor: n => `🏢 Andar ${n}` },
     tasks: { tab: n => n ? `Tarefas (${n})` : 'Tarefas', sub: 'Crie uma tarefa e um agente trabalha nela em segundo plano. Você responde, aprova e revisa por aqui, sem abrir o terminal. Só as tarefas criadas aqui podem ser controladas; as sessões abertas por fora seguem só monitoradas.',
       newT: 'Nova tarefa', title: 'Título (opcional)', desc: 'O que fazer', folder: 'Pasta', agent: 'Agente', auto: 'Automático', profile: 'Perfil', prio: 'Prioridade', prios: ['', 'Baixa', 'Normal', 'Alta'],
       budget: 'Orçamento (US$, 0 = sem limite)', test: 'Comando de teste (opcional)', wt: 'Worktree separada (isola as alterações)', perm: 'Permissões', perms: { acceptEdits: 'Pode editar arquivos', plan: 'Só planejar', default: 'Pedir para tudo' },
@@ -349,7 +349,7 @@ const I18N = {
     surprise: { hint: 'A surprise! Click to grab it', cake: 'Surprise cake in the kitchen!', pigeon: 'A pigeon at the window!', ticket: 'A golden ticket on the floor!' },
     scoreboard: { title: "This week's AI scoreboard", hours: 'hours', actions: 'actions', tokens: 'tokens' },
     share: { bestDay: 'Best day', topAi: 'Used most', cost: 'Estimated cost', ready: 'Your weekly card is ready', readyWhy: "Hours, actions, best day, the AI used most and the week's cost, in one image to share (Newspaper → Weekly card).", card: 'Weekly card', visit: 'Visitor photo', week: 'My week at the office', hours: 'hours of agents at work', actions: 'actions', trophies: 'achievement tiers · legends', saved: 'Card saved', visitSaved: 'Visitor photo saved', visitNote: 'No names, branches or office name.' },
-    elevator: { title: 'Elevator', sub: 'Pick a floor: rooftop, office, trophy room or servers.', terrace: '🌇 Rooftop', trophy: '🏆 Trophy room', servers: '🖧 Server room', office: '🏢 Office', floor: n => `🏢 Floor ${n}` },
+    elevator: { title: 'Elevator', sub: 'Pick a floor: rooftop, office, trophies or servers. Inside the rooms you walk with the arrows.', terrace: '🌇 Rooftop', trophy: '🏆 Trophy room', servers: '🖧 Server room', office: '🏢 Office', floor: n => `🏢 Floor ${n}` },
     tasks: { tab: n => n ? `Tasks (${n})` : 'Tasks', sub: 'Create a task and an agent works on it in the background. You answer, approve and review here, no terminal needed. Only tasks created here can be controlled; sessions opened elsewhere stay monitor-only.',
       newT: 'New task', title: 'Title (optional)', desc: 'What to do', folder: 'Folder', agent: 'Agent', auto: 'Automatic', profile: 'Profile', prio: 'Priority', prios: ['', 'Low', 'Normal', 'High'],
       budget: 'Budget (USD, 0 = no limit)', test: 'Test command (optional)', wt: 'Separate worktree (isolates the changes)', perm: 'Permissions', perms: { acceptEdits: 'May edit files', plan: 'Plan only', default: 'Ask for everything' },
@@ -626,6 +626,15 @@ Object.assign(I18N.pt.officeObj.menu, { watches: 'Me avise quando…' });
 Object.assign(I18N.en.officeObj.menu, { watches: 'Tell me when…' });
 Object.assign(I18N.pt, { watch: { title: 'Me avise quando…', sub: 'Avisos que você escolhe. Chegam aqui, no sino e como notificação do sistema.', empty: 'Nenhum aviso ainda.', add: 'Adicionar', addDone: 'Quando um agente terminar', addLimit: 'Quando um limite passar de', addFile: 'Quando algum agente mexer num arquivo', filePh: 'parte do caminho, ex.: checkout.ts ou src/auth', note: 'Funcionam enquanto o escritório estiver aberto. O de agente vale uma vez; o de limite volta a valer quando o limite renova; o de arquivo avisa a cada edição nova.', whenDone: 'Me avise quando terminar', cancelDone: 'Cancelar o aviso', set: 'Aviso criado', whenDoneOf: n => `Quando ${n} terminar`, whenLimit: (l, p) => `Quando ${l} passar de ${p}%`, whenFile: t => `Quando algum agente mexer em “${t}”`, done: n => `${n} terminou`, needs: n => `${n} parou e precisa de você`, closed: n => `${n} fechou`, limit: (l, p) => `${l} chegou a ${p}%`, limitWhy: p => `Você pediu aviso a partir de ${p}%.`, file: (n, f) => `${n} mexeu em ${f}` } });
 Object.assign(I18N.en, { watch: { title: 'Tell me when…', sub: 'Notices you choose. They show here, in the bell and as system notifications.', empty: 'No notices yet.', add: 'Add', addDone: 'When an agent finishes', addLimit: 'When a limit passes', addFile: 'When any agent touches a file', filePh: 'part of the path, e.g. checkout.ts or src/auth', note: 'They work while the office is open. The agent one fires once; the limit one again after the limit resets; the file one on every new edit.', whenDone: 'Tell me when it finishes', cancelDone: 'Cancel the notice', set: 'Notice set', whenDoneOf: n => `When ${n} finishes`, whenLimit: (l, p) => `When ${l} passes ${p}%`, whenFile: t => `When any agent touches “${t}”`, done: n => `${n} finished`, needs: n => `${n} stopped and needs you`, closed: n => `${n} closed`, limit: (l, p) => `${l} reached ${p}%`, limitWhy: p => `You asked to be told from ${p}%.`, file: (n, f) => `${n} edited ${f}` } });
+// the phone panel turned on from the office
+Object.assign(I18N.pt, { phoneOn: { how: 'Veja os agentes, as tarefas e responda pelo celular, no mesmo Wi-Fi. Ao ligar aqui, ele volta a ligar sozinho toda vez que o escritório abrir.', on: 'Ligar o celular', off: 'Desligar o celular', cli: 'Ou abra o escritório com', kept: 'Fica ligado: abre junto com o escritório nas próximas vezes, com o mesmo QR.', fail: { nolan: 'não achei uma rede Wi-Fi neste computador', port: 'a porta do celular está ocupada', error: 'não deu para ligar', demo: 'modo demonstração' } } });
+Object.assign(I18N.en, { phoneOn: { how: 'See the agents and tasks and answer from your phone, on the same Wi-Fi. Turned on here, it comes back on by itself every time the office opens.', on: 'Turn the phone on', off: 'Turn the phone off', cli: 'Or start the office with', kept: 'It stays on: it opens with the office next time, with the same QR.', fail: { nolan: 'no Wi-Fi network found on this computer', port: 'the phone port is taken', error: 'could not turn it on', demo: 'demo mode' } } });
+// the ☰ menu's groups
+Object.assign(I18N.pt, { menuGroups: { see: 'Ver', do: 'Fazer', prefs: 'Ajustes', autostart: 'Abrir com o computador' } });
+Object.assign(I18N.en, { menuGroups: { see: 'See', do: 'Do', prefs: 'Settings', autostart: 'Open with the computer' } });
+// the library, the lab and the meeting room
+Object.assign(I18N.pt, { places: { waiting: 'Sala de espera', no_library: 'Ninguém lendo agora', no_lab: 'Nenhum comando rodando', no_waiting: 'Ninguém esperando você', library: 'Biblioteca', lab: 'Laboratório', meeting: 'Sala de reunião', back: 'Voltar ao escritório', noReaders: 'NINGUEM LENDO AGORA', noRunners: 'NENHUM COMANDO RODANDO', noMeeting: 'NENHUMA REUNIAO AGORA', pipeline: 'PIPELINE', plan: 'PLANO', helpersNow: 'AJUDANTES AGORA', meetCount: (a, h) => `${a} AGENTE${a === 1 ? '' : 'S'} · ${h} AJUDANTE${h === 1 ? '' : 'S'}` } });
+Object.assign(I18N.en, { places: { waiting: 'Waiting room', no_library: 'Nobody reading now', no_lab: 'No commands running', no_waiting: 'Nobody waiting on you', library: 'Library', lab: 'Lab', meeting: 'Meeting room', back: 'Back to the office', noReaders: 'NOBODY READING NOW', noRunners: 'NO COMMANDS RUNNING', noMeeting: 'NO MEETING NOW', pipeline: 'PIPELINE', plan: 'PLAN', helpersNow: 'HELPERS NOW', meetCount: (a, h) => `${a} AGENT${a === 1 ? '' : 'S'} · ${h} HELPER${h === 1 ? '' : 'S'}` } });
 let T = I18N[lang];
 // sound is on by default; alerts follow the browser permission (asked on open). Only the buttons turn them off.
 let soundOn = store.get('sound', true);

package/public/js/main.js

@@ -24,10 +24,10 @@ function loop(t) {
   if (document.hidden) return; // tab not visible: draw nothing (browsers also slow rAF, this makes it zero) // schedule first: an error in one frame must not stop the animation
   if (data && spots) {
     const f = (t / 70) | 0; // ~14 frames per second, a pixel-art pace
-    if (f !== lastFrame || (playerOn && (me.moving || me.path.length || keysDown.size))) {
+    if (f !== lastFrame || (playerOn && (me.moving || me.path.length || keysDown.size || (trophyView && (vme.moving || vme.path.length))))) {
       const dt = lastT ? Math.min(.25, (t - lastT) / 1000) : 0;
       lastT = t; lastFrame = f;
-      if (trophyView) (viewName === 'terrace' ? drawTerrace : viewName === 'servers' ? drawServers : drawTrophyRoom)(t); else if (building) { if (f % 3 === 0) drawThumbs(t, dt * 3); } else drawScene(t, dt);
+      if (trophyView) { roomUpdate(dt); ({ terrace: drawTerrace, servers: drawServers }[viewName] || drawTrophyRoom)(t); } else if (building) { if (f % 3 === 0) drawThumbs(t, dt * 3); } else drawScene(t, dt);
     }
   }
 }

package/public/js/places.js

@@ -0,0 +1,123 @@
+'use strict';
+// ---------------- the library, the lab and the waiting room on the office floor; walking inside the elevator rooms ----------------
+// The agents stay at their desks. Walk into one of the three rooms under the game room and it shows who is doing that
+// right now (measured from their state): reading or browsing (library), running commands (lab), waiting on you
+// (waiting room). Enter next to someone opens them. The rooftop, trophy and server rooms can be walked in too.
+
+// --- walking in a room: its floor, where you arrive, the door back ---
+const ROOM_WALK = {
+  terrace: { x: 20, y: 186, w: 600, h: 192, door: { x: 26, y: 222 } },
+  servers: { x: 20, y: 200, w: 600, h: 178, door: { x: 26, y: 236 } },
+  trophy: { x: 20, y: 290, w: 600, h: 88, door: { x: 26, y: 326 } },
+};
+const vme = { x: 0, y: 0, path: [], flip: false, moving: false, room: '' };
+let vTag = null, vHint = null, vLastHint = '';
+const roomWalk = () => (trophyView && playerOn && ROOM_WALK[viewName]) || null;
+function roomUpdate(dt) {
+  const F = roomWalk(); if (!F) { if (vTag) vTag.hidden = vHint.hidden = true; return; }
+  if (vme.room !== viewName) Object.assign(vme, { x: F.door.x + 22, y: F.door.y - 6, path: [], room: viewName }); // in through the door
+  let dx = 0, dy = 0; const k = c => keysDown.has(c);
+  if (k('ArrowLeft') || k('a')) dx--; if (k('ArrowRight') || k('d')) dx++; if (k('ArrowUp') || k('w')) dy--; if (k('ArrowDown') || k('s')) dy++;
+  vme.moving = false;
+  const clamp = p => ({ x: Math.max(F.x, Math.min(F.x + F.w - 16, p.x)), y: Math.max(F.y, Math.min(F.y + F.h - 24, p.y)) });
+  if (dx || dy) {
+    vme.path = []; const len = Math.hypot(dx, dy), step = PLAYER_SPEED * (k('Shift') ? 2 : 1) * dt;
+    Object.assign(vme, clamp({ x: vme.x + dx / len * step, y: vme.y + dy / len * step })); vme.moving = true; if (dx) vme.flip = dx < 0;
+  } else if (vme.path.length) {
+    const w = vme.path[0], ddx = w.x - vme.x, ddy = w.y - vme.y, d = Math.hypot(ddx, ddy), step = PLAYER_SPEED * 1.4 * dt;
+    if (d <= step) { vme.x = w.x; vme.y = w.y; vme.path.shift(); } else { vme.x += ddx / d * step; vme.y += ddy / d * step; if (Math.abs(ddx) > .5) vme.flip = ddx < 0; }
+    vme.moving = true;
+  }
+  if (vme.moving) { const rc = cv.getBoundingClientRect(), py = rc.top + vme.y * S; if (py > innerHeight - 80) scrollBy({ top: py - (innerHeight - 160) }); else if (py < 130) scrollBy({ top: py - 190 }); } // the page follows you
+  if (!vTag) { vTag = document.createElement('span'); vHint = document.createElement('span'); vTag.className = 'me-tag'; vHint.className = 'me-hint'; overlay.append(vTag, vHint); }
+  vTag.hidden = false; vTag.textContent = T.walk.you; vTag.style.left = (vme.x + 8) * S + 'px'; vTag.style.top = (vme.y - 4) * S + 'px';
+  const n = roomNear(), label = n ? n.label : '';
+  vHint.hidden = !n; if (label !== vLastHint) { vLastHint = label; vHint.innerHTML = `<b>Enter ↵</b> ${esc(label)}`; }
+  if (n) { vHint.style.left = (vme.x + 8) * S + 'px'; vHint.style.top = (vme.y + 30) * S + 'px'; }
+}
+// what Enter does where you stand: talk to the agent next to you, or take the door back
+function roomNear() {
+  const F = roomWalk(); if (!F) return null;
+  const c = { x: vme.x + 8, y: vme.y + 12 };
+  let best = null;
+  for (const h of viewHits) if (h.id) { const d = Math.hypot(h.x + h.w / 2 - c.x, h.y + h.h / 2 - c.y); if (d < 30 && (!best || d < best.d)) best = { d, h }; }
+  if (best) { const p = data.people.find(x => x.id === best.h.id); if (p) return { label: T.walk.talk(best.h.who || p.name), run: () => { setView(null); showPerson(p.id); } }; }
+  if (Math.hypot(F.door.x + 8 - c.x, F.door.y - c.y) < 26) return { label: T.places.back, run: () => setView(null) };
+  return null;
+}
+// you, drawn last in the room, and the elevator door you came in through
+function drawRoomWalker(t) {
+  const F = roomWalk(); if (!F) return;
+  const d = F.door; r(d.x - 4, d.y - 30, 26, 32, PAL.ink); r(d.x - 2, d.y - 28, 10, 28, '#9aa3b0'); r(d.x + 9, d.y - 28, 10, 28, '#9aa3b0'); r(d.x + 8, d.y - 28, 1, 28, '#5a6270');
+  r(d.x + 2, d.y - 37, 14, 8, '#1b1d2e'); r(d.x + 5, d.y - 35, 3, 1, '#feae34'); r(d.x + 6, d.y - 36, 1, 1, '#feae34'); r(d.x + 10, d.y - 33, 3, 1, '#feae34'); r(d.x + 11, d.y - 32, 1, 1, '#feae34'); // the lift's ▲▼
+  ctx.fillStyle = 'rgba(255,216,77,.35)'; ctx.fillRect(vme.x + 1, vme.y + 21, 14, 3);
+  Art.drawStanding(vme.x, vme.y, youLook(), t, vme.moving); if (typeof drawOutfit === 'function') drawOutfit(vme.x, vme.y - 2);
+}
+document.addEventListener('keydown', e => {
+  if (!roomWalk() || !reportEl.hidden) return;
+  const tag = (e.target.tagName || '').toLowerCase(); if (tag === 'input' || tag === 'textarea') return;
+  const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+  if (key === 'Shift') keysDown.add('Shift');
+  if (key.startsWith('Arrow') || (!e.metaKey && !e.ctrlKey && !e.altKey && key.length === 1 && 'wasd'.includes(key))) { keysDown.add(key); e.preventDefault(); e.stopImmediatePropagation(); }
+  if (e.key === 'Enter') { const n = roomNear(); if (n) { e.preventDefault(); n.run(); } }
+}, true);
+overlay.addEventListener('click', e => {
+  const F = roomWalk(); if (!F || e.target.closest('button,.tag')) return;
+  const rc = overlay.getBoundingClientRect(), x = (e.clientX - rc.left) / S - 8, y = (e.clientY - rc.top) / S - 14;
+  vme.path = [{ x: Math.max(F.x, Math.min(F.x + F.w - 16, x)), y: Math.max(F.y, Math.min(F.y + F.h - 24, y)) }];
+});
+
+// --- drawing helpers shared by the three rooms ---
+const plain = x => String(x || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toUpperCase(); // the pixel font has no accents
+const roomName = (x, y, txt) => { const s = plain(txt).slice(0, 12), w = s.length * 4 + 4; r(x + 8 - w / 2, y, w, 7, '#000000aa'); pixText(x + 10 - w / 2, y + 1, s, '#f4ecd8'); };
+const roomSign = (x, y, txt, bg, fg) => { txt = plain(txt); const w = txt.length * 4 + 12; r(x - w / 2 - 2, y - 2, w + 4, 13, PAL.ink); r(x - w / 2, y, w, 9, bg); pixText(x - w / 2 + 6, y + 2, txt, fg); };
+const roomEmpty = (Wt, Ht, txt) => { txt = plain(txt); const w = txt.length * 4 + 16; r(Wt / 2 - w / 2, Ht - 46, w, 14, '#00000066'); pixText(Wt / 2 - w / 2 + 8, Ht - 42, txt, '#f4ecd8'); };
+const doingOf = p => (p.doing ? `${p.doing.tool || ''} ${p.doing.what || ''}`.trim() : '');
+
+
+// ---- the three rooms on the office floor ----
+const PLACE_STATES = { library: ['read', 'web'], lab: ['terminal', 'mcp'], waiting: ['needs_you', 'waiting'] };
+let placeHits = [];
+const placeOf = name => places.find(P => P.name === name);
+function drawPlaceRooms(t, movers) {
+  placeHits = [];
+  for (const P of places) {
+    const { x, y, w, h } = P, d = P.doors[0], L = T.places;
+    // floor, walls with the door gap on top, a sign
+    const floorC = P.name === 'library' ? ['#8a5a3c', '#93613f'] : P.name === 'lab' ? ['#9aa3b0', '#a7b0bd'] : ['#5a4a6e', '#64547a'];
+    r(x, y, w, h, floorC[0]); for (let yy = y; yy < y + h; yy += 8) for (let xx = x + ((yy - y) / 8 % 2) * 8; xx < x + w; xx += 16) r(xx, yy, 8, 8, floorC[1]);
+    r(x - 2, y - 2, w + 4, 3, PAL.ink); r(x - 2, y, 2, h + 2, PAL.ink); r(x + w, y, 2, h + 2, PAL.ink); r(x - 2, y + h, w + 4, 2, PAL.ink);
+    r(d.x - 9, y - 2, 18, 3, floorC[1]); r(d.x - 9, y + 1, 18, 3, '#00000033'); // the open door
+    if (P.name === 'library') { // shelves along the back wall, two reading tables with green lamps
+      for (let i = 0; i < Math.floor((w - 12) / 34); i++) { const sx = x + 6 + i * 34; if (Math.abs(sx + 15 - d.x) < 22) continue; r(sx, y + 6, 30, 26, '#5a3a28'); for (let sh = 0; sh < 2; sh++) for (let k = 0; k < 6; k++) { const hh = hash(`pl${P.x}${i}${sh}${k}`); r(sx + 2 + k * 5, y + 8 + sh * 12 + (hh % 3), 4, 10 - (hh % 3), ['#a8434f', '#3b5dc9', '#63c74d', '#feae34', '#7a5cff', '#2ce8f5'][hh % 6]); } }
+      for (const tx of [x + w * .18, x + w * .58]) { r(tx, y + 70, w * .26, 12, '#6b4a33'); r(tx, y + 70, w * .26, 2, '#8a6a4a'); r(tx + w * .13 - 1, y + 62, 2, 8, '#c9a34a'); r(tx + w * .13 - 5, y + 59, 10, 4, '#2f8f4e'); }
+    } else if (P.name === 'lab') { // a CI screen on the back wall, two benches of monitors
+      r(x + w / 2 - 40, y + 6, 80, 24, PAL.ink); r(x + w / 2 - 38, y + 8, 76, 20, '#0c1410'); pixText(x + w / 2 - 34, y + 11, 'CI', '#62ff7a');
+      ['B', 'T', 'L'].forEach((c, i) => { const on = ((t / 600 + i) | 0) % 3 !== 2; r(x + w / 2 - 20 + i * 18, y + 18, 14, 7, on ? '#1f7a48' : '#1b2a22'); });
+      for (const by of [y + 58, y + 92]) { r(x + 10, by, w - 20, 8, '#e8ecf2'); r(x + 10, by, w - 20, 2, '#ffffff'); for (let k = 0; k < 3; k++) { const mx = x + 22 + k * (w - 44) / 3; r(mx, by - 10, 16, 10, PAL.ink); r(mx + 1, by - 9, 14, 8, '#0c1410'); r(mx + 3, by - 7, 4 + hash('lm' + k + by + ((t / 400) | 0)) % 9, 1, '#62ff7a'); } }
+    } else { // the waiting room: two phone booths with a red light, a bench
+      for (const bx of [x + 10, x + w - 34]) { r(bx, y + 8, 24, 44, '#3a2a4a'); r(bx + 2, y + 12, 20, 38, '#8fc7ff55'); r(bx + 8, y + 6, 8, 3, ((t / 400) | 0) % 2 ? '#ff4d57' : '#5a0f16'); }
+      r(x + w * .25, y + 88, w * .5, 6, '#6b4a33'); r(x + w * .25, y + 94, 3, 8, '#4a3324'); r(x + w * .75 - 3, y + 94, 3, 8, '#4a3324');
+    }
+    const label = plain(L[P.name]), lw = label.length * 4 + 8; r(x + 6, y + h - 12, lw, 9, '#00000088'); pixText(x + 10, y + h - 10, label, '#f4ecd8');
+    // inside, you see who is doing this right now (the agents themselves stay at their desks)
+    const here = playerOn && me.ready && me.x + 8 > x && me.x + 8 < x + w && me.y + 12 > y && me.y + 12 < y + h;
+    const who = (data ? data.people : []).filter(p => !p.leaving && PLACE_STATES[P.name].includes(p.state));
+    if (!here) { if (who.length) { const n = String(who.length); r(x + w - 18, y + h - 13, 14, 11, PAL.ink); r(x + w - 17, y + h - 12, 12, 9, P.name === 'waiting' ? '#e43b44' : '#1b1622'); pixText(x + w - 14 - (n.length - 1) * 2, y + h - 10, n, '#ffffff'); } continue; }
+    const cols = Math.max(1, Math.floor((w - 20) / 34)), seats = [];
+    for (let i = 0; i < who.length && seats.length < cols * 2; i++) seats.push({ x: x + 14 + (i % cols) * 34, y: y + (i < cols ? 44 : 78) - 4 });
+    who.slice(0, seats.length).forEach((p, i) => {
+      const st = seats[i], lk = look(p.id);
+      movers.push({ y: st.y, draw: () => { Art.drawFront(st.x, st.y, lk, t, { legs: Art.LEGS_SIT, legsKey: 'sit' }); const nm = plain(p.name).slice(0, 8), nw = nm.length * 4 + 4; r(st.x + 8 - nw / 2, st.y + 26, nw, 7, '#000000aa'); pixText(st.x + 10 - nw / 2, st.y + 27, nm, '#f4ecd8'); } });
+      placeHits.push({ x: st.x, y: st.y, id: p.id, name: p.name, need: P.name === 'waiting' });
+    });
+    if (!who.length) { const e = plain(L['no_' + P.name]), ew = e.length * 4 + 8; r(x + w / 2 - ew / 2, y + h / 2 - 5, ew, 10, '#00000088'); pixText(x + w / 2 - ew / 2 + 4, y + h / 2 - 3, e, '#f4ecd8'); }
+  }
+}
+// a click on someone you see in one of these rooms opens them
+overlay.addEventListener('click', e => {
+  if (trophyView || !placeHits.length) return;
+  const rc = overlay.getBoundingClientRect(), x = (e.clientX - rc.left) / S, y = (e.clientY - rc.top) / S;
+  const h = placeHits.find(h => x >= h.x && x <= h.x + 16 && y >= h.y - 2 && y <= h.y + 26); if (!h) return;
+  e.stopImmediatePropagation(); h.need && typeof openTalk === 'function' ? openTalk(h.id) : showPerson(h.id);
+}, true);

package/public/js/player.js

@@ -11,6 +11,7 @@ const PLAYER_SPEED = 70;
 function solidRooms() {
   const out = rooms.map(R => ({ x: R.x, y: R.y, w: R.w, h: R.h, doors: [{ x: R.doorX + 9, y: R.y + R.h, side: 'bottom' }], gap: 9 }));
   if (game) out.push({ x: game.x, y: game.y, w: game.w, h: game.h, doors: game.doors, gap: 9 });
+  for (const P of places) out.push({ x: P.x, y: P.y, w: P.w, h: P.h, doors: P.doors, gap: 9 });
   if (napBox) out.push({ x: RX - 4, y: wing.nap, w: RW + 8, h: 80, doors: [{ x: RX - 4, y: wing.nap + 37, side: 'left' }], gap: 9 });
   return out;
 }
@@ -97,6 +98,7 @@ function nearThing() {
   }
   for (const g of gameHits) if (near(g.x + g.w / 2, g.y + g.h, 24)) return { label: g.title, run: () => { const m = /data-tab="(\w+)"/.exec(g.attr); if (m) openReport(m[1]); else if (/trophyroom/.test(g.attr)) setTrophyView(true); else if (/arcade/.test(g.attr)) openArcade(); } };
   if (typeof officeTips === 'function') { const o = officeTips(); for (const [b, tab, label] of [[boardBox, 'tasks', o.tasks], [costBox, 'usage', o.costs], [noticesBox, 'notices', o.notices], [historyBox, 'feed', o.history], [releaseBox, 'version', o.releases]]) if (b && near(b.x + b.w / 2, b.y + b.h + 14, 26)) return { label: label.split('\n')[0], run: () => openReport(tab) }; }
+  for (const h of (typeof placeHits !== 'undefined' ? placeHits : [])) if (near(h.x + 8, h.y + 12, 22)) return { label: T.walk.talk(h.name), run: () => (h.need ? openTalk(h.id) : showPerson(h.id)) };
   if (radioBox && near(radioBox.x + 7, radioBox.y + 20, 26)) return { label: radioOn ? T.radio.on : T.radio.off, run: () => setRadio(!radioOn) };
   if (catBox && near(cat.x + 6, cat.y + 6, 18)) return { label: T.walk.pet, run: petCat };
   if (elevatorBox && near(elevatorBox.x + 14, elevatorBox.y + 30, 22)) return { label: T.elevator.title, run: openElevator };

package/public/js/rooms.js

@@ -264,7 +264,7 @@ function drawTrophyRoom(t) {
   r(cx - 50, Ht - 34, 100, 15, PAL.ink); r(cx - 49, Ht - 33, 98, 13, '#d9a441'); r(cx - 49, Ht - 33, 98, 1, '#ffd84d'); pixText(cx - 23, Ht - 29, 'HALL OF FAME', '#3b2418');
   const got = st.reduce((x, a) => x + a.tier, 0), all = st.reduce((x, a) => x + a.max, 0);
   pixText(cx - 70, Ht - 12, `${got}/${all}`, '#8a6420'); { const l2 = `${legends.length} LEGEND`; pixText(cx + 70 - l2.length * 4, Ht - 12, l2, '#a3283a'); }
-  trophyHits = hits;
+  trophyHits = hits; if (typeof drawRoomWalker === 'function') drawRoomWalker(t);
 }
 // clicking a trophy: a card with the trophy large, its tier and how far the next one is
 const trophyCard = document.createElement('div');

package/public/js/scene.js

@@ -448,6 +448,7 @@ function drawScene(t, dt) {
   movers.push({ y: cat.y, draw: () => drawMascot(cat.x, cat.y, cat.mode, t, cat.flip) });
   movers.push(...extraWalkers(t));
   drawPets(t, movers);
+  if (typeof drawPlaceRooms === 'function') drawPlaceRooms(t, movers); // the library, the lab and the waiting room (who you see depends on where you stand)
   drawPlayer(t, movers);
   movers.push({ y: robot.y, draw: () => drawRobot(t) });
   movers.sort((a, b) => a.y - b.y).forEach(m => m.draw());

package/public/js/tasks.js

@@ -622,11 +622,43 @@ function drawReleaseBadge(x, y, t) { // the rocket poster gets a star when a new
 // the same panels in the ☰ menu
 {
   const menu = document.getElementById('tools-menu');
-  if (menu) for (const [tab, icon] of [['tv', '📺'], ['phone', '📱'], ['broadcast', '📣'], ['repos', '📦'], ['tasks', '📋'], ['usage', '💲'], ['watches', '⏰'], ['archive', '🗄'], ['timelapse', '🎞'], ['feed', '🗂'], ['notices', '🔔'], ['version', '🚀']]) {
+  // each panel gets a 16 px pixel icon in the same style as the menu's other buttons (rectangles x, y, w, h)
+  const R = rects => rects.map(([x, y, w, h]) => `M${x} ${y}h${w}v${h}h-${w}z`).join('');
+  const ICON = {
+    tasks: R([[5, 1, 6, 3], [3, 3, 10, 1], [3, 3, 1, 12], [12, 3, 1, 12], [3, 14, 10, 1], [5, 7, 6, 1], [5, 10, 6, 1]]),
+    usage: R([[7, 1, 2, 14], [4, 3, 8, 2], [4, 5, 2, 2], [4, 7, 8, 2], [10, 9, 2, 2], [4, 11, 8, 2]]),
+    notices: 'M7 1h2v1h2v1h1v5h1v2h1v2H2v-2h1V8h1V3h1V2h2zM6 13h4v1H9v1H7v-1H6z',
+    feed: R([[2, 3, 2, 2], [6, 3, 8, 2], [2, 7, 2, 2], [6, 7, 8, 2], [2, 11, 2, 2], [6, 11, 8, 2]]),
+    repos: R([[1, 2, 14, 3], [2, 5, 1, 9], [13, 5, 1, 9], [2, 13, 12, 1], [6, 7, 4, 1]]),
+    archive: R([[3, 1, 10, 1], [3, 1, 1, 14], [12, 1, 1, 14], [3, 14, 10, 1], [3, 7, 10, 1], [7, 4, 2, 1], [7, 10, 2, 1]]),
+    timelapse: R([[1, 3, 14, 1], [1, 12, 14, 1], [1, 3, 1, 10], [14, 3, 1, 10], [6, 6, 2, 4], [8, 7, 2, 2]]),
+    version: R([[7, 1, 2, 2], [6, 3, 4, 7], [4, 8, 2, 3], [10, 8, 2, 3], [7, 11, 2, 3]]),
+    broadcast: R([[2, 6, 2, 4], [4, 5, 2, 6], [6, 4, 2, 8], [8, 2, 2, 12], [11, 7, 3, 2]]),
+    watches: R([[2, 1, 3, 2], [11, 1, 3, 2], [4, 3, 8, 1], [3, 4, 1, 8], [12, 4, 1, 8], [4, 12, 8, 1], [7, 6, 1, 4], [8, 9, 2, 1], [3, 13, 2, 2], [11, 13, 2, 2]]),
+    phone: R([[4, 1, 8, 1], [4, 1, 1, 14], [11, 1, 1, 14], [4, 14, 8, 1], [6, 12, 4, 1]]),
+    tv: R([[5, 1, 1, 3], [10, 1, 1, 3], [1, 4, 14, 1], [1, 12, 14, 1], [1, 4, 1, 9], [14, 4, 1, 9], [6, 13, 4, 2]]),
+  };
+  if (menu) for (const tab of ['tv', 'phone', 'broadcast', 'repos', 'tasks', 'usage', 'watches', 'archive', 'timelapse', 'feed', 'notices', 'version']) {
     const b = document.createElement('button'); b.className = 'icon-btn menu-panel'; b.dataset.menuTab = tab;
-    b.innerHTML = `<span aria-hidden="true">${icon}</span><span class="ml"></span>`; menu.prepend(b);
+    b.innerHTML = `<svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="${ICON[tab]}"/></svg><span class="ml"></span>`; menu.prepend(b);
     b.addEventListener('click', () => { if (typeof setMenu === 'function') setMenu(false); if (tab === 'tv') return setTv(true); openReport(tab); });
   }
+  // three groups instead of one long list: what you look at, what you do, how the office behaves
+  if (menu) {
+    const groups = [['see', ['[data-menu-tab=tasks]', '[data-menu-tab=usage]', '[data-menu-tab=notices]', '[data-menu-tab=feed]', '[data-menu-tab=repos]', '[data-menu-tab=archive]', '[data-menu-tab=timelapse]', '[data-menu-tab=version]']],
+      ['do', ['#btn-launch', '[data-menu-tab=broadcast]', '[data-menu-tab=watches]', '[data-menu-tab=phone]', '[data-menu-tab=tv]', '#btn-search', '#btn-replay', '#btn-photo', '#btn-deco']],
+      ['prefs', ['#btn-notify', '#btn-sound', '#btn-focus', '#btn-walk', '#btn-radio', '#btn-autostart', '#btn-lang', '#btn-office']]];
+    // start with the computer, right in the menu (it also stays in Personalise): a switch with the same green dot
+    const as = document.createElement('button'); as.id = 'btn-autostart'; as.className = 'icon-btn'; as.setAttribute('aria-pressed', 'false');
+    as.innerHTML = `<svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="${R([[7, 1, 2, 6], [4, 3, 2, 1], [10, 3, 2, 1], [3, 4, 1, 1], [12, 4, 1, 1], [2, 5, 1, 6], [13, 5, 1, 6], [3, 11, 1, 1], [12, 11, 1, 1], [4, 12, 2, 1], [10, 12, 2, 1], [6, 13, 4, 1]])}"/></svg><span class="ml"></span>`;
+    menu.appendChild(as);
+    const syncAs = () => fetch('api/autostart').then(r => r.json()).then(d => { as.setAttribute('aria-pressed', d.on ? 'true' : 'false'); as.disabled = !!d.demo; }).catch(() => {});
+    as.addEventListener('click', async () => { const on = as.getAttribute('aria-pressed') !== 'true'; as.disabled = true; const r = await api('api/autostart', { on }); as.disabled = false; as.setAttribute('aria-pressed', r.on ? 'true' : 'false'); toast(`<b>${esc(T.menuGroups.autostart)}</b>${esc(r.ok ? (r.on ? T.appx.asOn : T.appx.asOff) : '⚠')}`, r.ok ? 'ok' : 'warn'); if (typeof syncAutostart === 'function') syncAutostart(); });
+    syncAs(); document.getElementById('btn-menu').addEventListener('click', syncAs);
+    const secs = groups.map(([k, sels]) => { const sec = document.createElement('div'); sec.className = 'menu-sec'; sec.innerHTML = `<div class="menu-h" data-menu-group="${k}"></div>`; for (const q of sels) { const el = menu.querySelector(':scope > ' + q); if (el) sec.appendChild(el); } return sec; });
+    for (const el of [...menu.querySelectorAll(':scope > .icon-btn')]) secs[1].appendChild(el); // anything not listed still shows
+    secs.forEach(sec => menu.appendChild(sec));
+  }
 }
 // repositories at a glance: who is in each one now, what is not committed or pushed, task branches and PRs, today's activity
 // one message to several agents: typed into the ones waiting in a terminal, sent in the background to the others
@@ -730,10 +762,11 @@ document.addEventListener('click', async e => {
 async function renderPhone() {
   const P = T.phone, body = reportEl.querySelector('.report-body');
   const d = await api('api/phone'); if (reportTab !== 'phone' || reportEl.hidden) return;
-  if (!d || !d.on) { body.innerHTML = tabsHtml() + `<h3>📱 ${esc(P.title)}</h3><p>${esc(P.how)}</p><p><code>npx coworking-agents --phone</code></p><p class="note">${esc(P.warn)}</p>`; return; }
+  const F = T.phoneOn;
+  if (!d || !d.on) { body.innerHTML = tabsHtml() + `<h3>📱 ${esc(P.title)}</h3><p>${esc(F.how)}</p><p><button class="btn" data-phone-on="1">📱 ${esc(F.on)}</button> <small class="note" data-phone-msg>${d && d.reason && !['off', 'starting'].includes(d.reason) ? esc(F.fail[d.reason] || d.reason) : ''}</small></p><p class="note">${esc(F.cli)} <code>npx coworking-agents --phone</code></p><p class="note">${esc(P.warn)}</p>`; return; }
   body.innerHTML = tabsHtml() + `<h3>📱 ${esc(P.title)}</h3><p>${esc(P.scan)}</p><canvas class="qr" width="10" height="10"></canvas><p><code class="qr-url">${esc(d.url)}</code></p>${d.ipUrl && d.ipUrl !== d.url ? `<p class="note">${esc(T.phone.ipAlt)}</p><p><code class="qr-url">${esc(d.ipUrl)}</code></p>` : ''}<p class="note">${esc(P.warn)}</p>`;
   drawQr(body.querySelector('canvas.qr'), d.qr);
-  body.insertAdjacentHTML('beforeend', `<h3>📲 ${esc(T.phone.homeTitle)}</h3><p class="note">${esc(T.phone.homeIos)}</p><p class="note">${esc(T.phone.homeAndroid)}</p><p class="note">${esc(T.phone.homeNote)}</p><p><button class="btn small ghost" data-phonerotate>🔄 ${esc(T.phone.rotate)}</button> <small class="note" data-phonerotate-msg></small></p>`);
+  body.insertAdjacentHTML('beforeend', `<h3>📲 ${esc(T.phone.homeTitle)}</h3><p class="note">${esc(T.phone.homeIos)}</p><p class="note">${esc(T.phone.homeAndroid)}</p><p class="note">${esc(T.phone.homeNote)}</p><p><button class="btn small ghost" data-phonerotate>🔄 ${esc(T.phone.rotate)}</button> <button class="btn small ghost" data-phone-on="0">⏻ ${esc(F.off)}</button> <small class="note" data-phonerotate-msg></small></p><p class="note">${esc(F.kept)}</p>`);
   const V = T.visit; visitUntil = d.visit ? d.visit.until : 0;
   body.insertAdjacentHTML('beforeend', `<h3>👀 ${esc(V.title)}</h3><p class="note">${esc(V.sub)}</p>${d.visit
     ? `<p class="ok">${esc(V.live(new Date(d.visit.until).toLocaleTimeString(lang === 'pt' ? 'pt-BR' : 'en', { hour: '2-digit', minute: '2-digit' })))}</p><canvas class="qr qr-visit" width="10" height="10"></canvas><p><code class="qr-url">${esc(d.visit.url)}</code></p><p><button class="btn small danger" data-visit="stop">✕ ${esc(V.stop)}</button></p>`
@@ -745,6 +778,14 @@ function drawQr(c, qr) {
   c.width = c.height = (n + q * 2) * s; g.fillStyle = '#fff'; g.fillRect(0, 0, c.width, c.height); g.fillStyle = '#000';
   qr.forEach((row, r) => [...row].forEach((x, k) => { if (x === '1') g.fillRect((k + q) * s, (r + q) * s, s, s); }));
 }
+// turn the phone panel on or off right here (remembered: it comes back on with the office)
+document.addEventListener('click', async e => {
+  const b = e.target.closest('[data-phone-on]'); if (!b) return;
+  b.disabled = true;
+  const r = await api('api/phone-toggle', { on: b.dataset.phoneOn === '1' });
+  if (!r.ok) { b.disabled = false; const m = document.querySelector('[data-phone-msg]'); if (m) m.textContent = T.phoneOn.fail[r.reason] || r.reason || '?'; return; }
+  phoneOn = b.dataset.phoneOn === '1'; renderPhone();
+});
 document.addEventListener('click', async e => {
   const b = e.target.closest('[data-phonerotate]'); if (!b || !confirm(T.phone.rotateSure)) return;
   b.disabled = true; const r = await fetch('api/phone-rotate', { method: 'POST', headers: { 'X-Coworking': '1' } }).then(x => x.json()).catch(() => ({ ok: false }));
@@ -791,7 +832,7 @@ function setTv(on) {
 document.addEventListener('keydown', e => { if (e.key === 'Escape' && document.body.classList.contains('tv')) setTv(false); });
 document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement && document.body.classList.contains('tv')) setTv(false); });
 if (new URLSearchParams(location.search).get('tv') === '1') setTimeout(() => setTv(true), 500);
-function labelMenuPanels() { const O = T.officeObj; document.querySelectorAll('[data-menu-tab]').forEach(b => { const l = O.menu[b.dataset.menuTab]; b.querySelector('.ml').textContent = l; b.title = l; }); }
+function labelMenuPanels() { const O = T.officeObj; document.querySelectorAll('[data-menu-tab]').forEach(b => { const l = O.menu[b.dataset.menuTab]; b.querySelector('.ml').textContent = l; b.title = l; }); document.querySelectorAll('[data-menu-group]').forEach(h => { h.textContent = T.menuGroups[h.dataset.menuGroup]; }); const as = document.querySelector('#btn-autostart .ml'); if (as) { as.textContent = T.menuGroups.autostart; as.parentNode.title = T.appx.autostart; } }
 setInterval(labelMenuPanels, 2000); setTimeout(labelMenuPanels, 300);
 
 // ---- the recommendation card: current, recommended and pending config, the reason, Apply; refreshed as the task moves ----

package/public/js/topbar.js

@@ -213,7 +213,7 @@ const menuEl = document.getElementById('tools-menu'), menuBtn = document.getElem
 document.body.appendChild(menuEl); // out of the bar: its overflow would clip the menu in some browsers
 function setMenu(open) {
   menuEl.hidden = !open; menuBtn.setAttribute('aria-expanded', open);
-  if (open) { const b = menuBtn.getBoundingClientRect(); menuEl.style.top = (b.bottom + 8) + 'px'; menuEl.style.right = Math.max(8, innerWidth - b.right) + 'px'; }
+  if (open) { const b = menuBtn.getBoundingClientRect(); menuEl.style.top = (b.bottom + 8) + 'px'; menuEl.style.right = Math.max(8, innerWidth - b.right) + 'px'; menuEl.style.maxHeight = Math.max(160, innerHeight - b.bottom - 20) + 'px'; } // never taller than the window: it scrolls
 }
 menuBtn.onclick = e => { e.stopPropagation(); setMenu(menuEl.hidden); };
 menuEl.addEventListener('click', e => { if (e.target.closest('#btn-search,#btn-replay')) setMenu(false); });

package/public/js/views.js

@@ -71,7 +71,7 @@ function drawTerrace(t) {
   });
   if (!relaxing.length) { r(Wt / 2 - 66, Ht - 40, 132, 14, '#00000055'); pixText(Wt / 2 - 58, Ht - 36, lang === 'pt' ? 'NINGUEM DE FOLGA' : 'NOBODY ON BREAK', '#f4ecd8'); }
   if (!day) { ctx.fillStyle = 'rgba(10,12,40,.25)'; ctx.fillRect(0, HZ, Wt, Ht - HZ); } // evening light on the deck
-  viewHits = hits;
+  viewHits = hits; if (typeof drawRoomWalker === 'function') drawRoomWalker(t);
 }
 
 // ---- the server room: two rows of glass racks, a NOC wall with live numbers, cold aisle, cable trays ----
@@ -118,7 +118,7 @@ function drawServers(t) {
   r(14, 160, 8, 18, '#e43b44'); r(15, 156, 6, 4, '#2a2a30'); r(16, 164, 4, 6, '#ffffff');
   for (let x = 0; x < Wt; x += 16) r(x, Ht - 6, 8, 6, '#ffd84d'), r(x + 8, Ht - 6, 8, 6, '#1b1622');
   if (!people.length) pixText(Wt / 2 - 30, 200, 'NO SESSIONS', '#c0cbdc');
-  viewHits = hits;
+  viewHits = hits; if (typeof drawRoomWalker === 'function') drawRoomWalker(t);
 }
 
 // ---- the elevator panel: floors, the terrace, the server room, the trophy room ----
@@ -132,6 +132,7 @@ function openElevator() {
     ${btn('data-go="trophy"', E.trophy, viewName === 'trophy')}
     ${floors.map((f, i) => btn(`data-go-floor="${i}"`, floors.length > 1 ? E.floor(i + 1) : E.office, !trophyView && floor === i)).reverse().join('')}
     ${btn('data-go="servers"', E.servers, viewName === 'servers')}
+
   </div></div></div>`;
   liftEl.hidden = false; achBump('lifts');
 }

package/public/style.css

@@ -996,3 +996,15 @@ body.tv .app-ask { display: none; }
 .watch-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .watch-form select, .watch-form input { font: 13px/1.3 system-ui, -apple-system, sans-serif; padding: 6px 8px; border: 2px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
 .watch-form input[data-w-file] { min-width: 280px; }
+/* the ☰ menu: two columns on a wide window, a little tighter, and it scrolls instead of running off the screen */
+.tools-menu:not([hidden]) { overflow-y: auto; overscroll-behavior: contain; }
+.tools-menu .icon-btn { height: 30px; }
+/* three groups side by side on a wide window, stacked on a narrow one */
+.tools-menu:not([hidden]) { padding: 10px; gap: 0; }
+.tools-menu .menu-sec { display: flex; flex-direction: column; gap: 1px; min-width: 210px; }
+.tools-menu .menu-sec + .menu-sec { border-top: 2px dashed #332f37; margin-top: 8px; padding-top: 8px; }
+.tools-menu .menu-h { font: 700 10px/1 var(--pix); letter-spacing: .08em; text-transform: uppercase; color: #6f6577; padding: 4px 10px 8px; }
+@media (min-width: 900px) {
+  .tools-menu:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); column-gap: 10px; }
+  .tools-menu .menu-sec + .menu-sec { border-top: 0; margin-top: 0; padding-top: 0; border-left: 2px dashed #332f37; padding-left: 10px; }
+}

package/src/autostart.js

@@ -59,7 +59,8 @@ function enable(mode) {
 }
 function disable() {
   const e = entry(command('npx'));
-  if (process.platform === 'darwin') try { execFileSync('launchctl', ['bootout', `gui/${process.getuid()}/${LABEL}`], { stdio: 'ignore' }); } catch {}
+  // stop the running one too (the tests skip this: the label is the real one, and they must never stop your office)
+  if (process.platform === 'darwin' && !process.env.COWORKING_TEST) try { execFileSync('launchctl', ['bootout', `gui/${process.getuid()}/${LABEL}`], { stdio: 'ignore' }); } catch {}
   try { fs.unlinkSync(e.file); } catch {}
   return { ok: true };
 }

package/src/menubar.js

@@ -11,7 +11,7 @@ const { spawn, spawnSync } = require('child_process');
 
 const DIR = () => path.join(os.homedir(), '.config', 'coworking-agents');
 const FILE = () => path.join(DIR(), 'menubar.json');
-const ICON = path.join(__dirname, '..', 'public', 'favicon.png');
+const ICON = path.join(__dirname, '..', 'public', 'tray.png'); // the small face reads best at menu bar size
 let child = null, kind = null, base = '', token = '', lastBody = '', lastTip = '', seen = null, notes = [];
 
 const has = cmd => { try { return spawnSync('which', [cmd], { stdio: 'ignore' }).status === 0; } catch { return false; } };

package/src/server.js

@@ -126,7 +126,7 @@ function start({ port = 4777, host = '127.0.0.1', privacy = false, interval = 10
       return res.end();
     }
     // icons are public: browsers fetch them without cookies and cache the 401 otherwise
-    const PUBLIC_ICONS = new Set(['/favicon.ico', '/favicon.png', '/favicon.svg', '/apple-touch-icon.png', '/logo.svg', '/manifest.webmanifest', '/icon-192.png', '/icon-512.png']); // no data in any of them
+    const PUBLIC_ICONS = new Set(['/favicon.ico', '/favicon.png', '/apple-touch-icon.png', '/logo.svg', '/manifest.webmanifest', '/icon-192.png', '/icon-512.png']); // no data in any of them
     if (!PUBLIC_ICONS.has(url.pathname) && !sameSecret(cookie(req, 'cw'), token)) return send(res, 401, 'text/html; charset=utf-8', LOCKED);
 
     if (url.pathname === '/events') {
@@ -333,7 +333,7 @@ function start({ port = 4777, host = '127.0.0.1', privacy = false, interval = 10
     if (url.pathname === '/api/state') return send(res, 200, 'application/json', safeSnapshot());
     if (url.pathname === '/api/ping') return send(res, 200, 'application/json', '{"ok":true}');
     // the phone link and its QR code, only to this machine (the phone server itself never serves this)
-    if (url.pathname === '/api/phone') return send(res, 200, 'application/json', JSON.stringify(phoneInfo ? { on: true, url: phoneInfo.url, ipUrl: phoneInfo.ipUrl, qr: require('./qr').encode(phoneInfo.url).map(r => r.map(x => (x ? 1 : 0)).join('')), visit: visitNow && visitNow.until > Date.now() ? { ...visitNow, qr: require('./qr').encode(visitNow.url).map(r => r.map(x => (x ? 1 : 0)).join('')) } : null } : { on: false, reason: phoneReason }));
+    if (url.pathname === '/api/phone') return send(res, 200, 'application/json', JSON.stringify(phoneInfo ? { on: true, url: phoneInfo.url, ipUrl: phoneInfo.ipUrl, qr: require('./qr').encode(phoneInfo.url).map(r => r.map(x => (x ? 1 : 0)).join('')), visit: visitNow && visitNow.until > Date.now() ? { ...visitNow, qr: require('./qr').encode(visitNow.url).map(r => r.map(x => (x ? 1 : 0)).join('')) } : null } : { on: false, reason: phoneReason, always: !!tasks.list().settings.phone }));
     if (url.pathname === '/api/appinstall' && req.method === 'GET') return send(res, 200, 'application/json', JSON.stringify({ on: require('./appinstall').installed(), platform: process.platform, demo }));
     if (url.pathname === '/api/appinstall' && req.method === 'POST') { // create or remove the app on this computer
       const origin = req.headers.origin || '';
@@ -361,6 +361,21 @@ function start({ port = 4777, host = '127.0.0.1', privacy = false, interval = 10
       req.on('end', () => { let m = {}; try { m = JSON.parse(body); } catch {} if (demo) return send(res, 200, 'application/json', '{"ok":false,"reason":"demo"}'); const on = !!m.on; tasks.op({ op: 'settings', menubar: on }); const r = on ? mb.start({ base: baseUrl, token }) : (mb.stop(), { ok: true }); if (on) mb.write(snapshot({ privacy }), mbExtra()); send(res, 200, 'application/json', JSON.stringify({ ...r, on: mb.running() })); });
       return;
     }
+    if (url.pathname === '/api/phone-toggle' && req.method === 'POST') { // turn the phone panel on or off now, remembered for the next start
+      const origin = req.headers.origin || '';
+      if (req.headers['x-coworking'] !== '1' || (origin && !LOCAL_ORIGIN.test(origin))) { res.writeHead(403); return res.end(); }
+      let body = '';
+      req.on('data', c => { body += c; if (body.length > 1e3) req.destroy(); });
+      req.on('end', async () => {
+        let m = {}; try { m = JSON.parse(body); } catch {}
+        if (demo) return send(res, 200, 'application/json', '{"ok":false,"reason":"demo"}');
+        const on = !!m.on; tasks.op({ op: 'settings', phone: on });
+        if (on) return send(res, 200, 'application/json', JSON.stringify(await startPhoneNow()));
+        if (phoneInfo) { phoneInfo.close(); phoneInfo = null; } phoneReason = 'off'; visitNow = null;
+        send(res, 200, 'application/json', '{"ok":true}');
+      });
+      return;
+    }
     if (url.pathname === '/api/phone-rotate' && req.method === 'POST') { // a new phone code: every phone has to scan the QR again
       const origin = req.headers.origin || '';
       if (req.headers['x-coworking'] !== '1' || (origin && !LOCAL_ORIGIN.test(origin))) { res.writeHead(403); return res.end(); }
@@ -398,15 +413,23 @@ function start({ port = 4777, host = '127.0.0.1', privacy = false, interval = 10
     });
   }
 
+  // opt-in: a separate, restricted server on the LAN address (see src/phone.js); its code is kept like the office's, and its
+  // port is always the same (not the office's + 1), so a home-screen icon keeps working whatever port the office got
+  const PHONE_PORT = Number(process.env.COWORKING_PHONE_PORT) || 4778;
+  async function startPhoneNow() {
+    if (phoneInfo) return { ok: true };
+    try {
+      const r = await require('./phone').startPhone({ port: port ? PHONE_PORT : 0, privacy, demo, snapshot, tasks, sendText, people: () => real().people, token: keepToken ? phoneToken : '', onToken: onPhoneToken, extra: phoneUsage });
+      if (r.ok) { phoneInfo = r; phoneReason = ''; const t = r.url.split('t=')[1]; if (keepToken && onPhoneToken && t !== phoneToken) { phoneToken = t; onPhoneToken(t); } } else phoneReason = r.reason;
+      return r.ok ? { ok: true } : { ok: false, reason: r.reason };
+    } catch (e) { phoneReason = e.code === 'EADDRINUSE' ? 'port' : 'error'; return { ok: false, reason: phoneReason }; }
+  }
   return new Promise((resolve, reject) => {
     server.once('error', reject);
     server.listen(port, host, async () => {
       const base = `http://${host === '0.0.0.0' ? 'localhost' : host}:${server.address().port}`; baseUrl = base;
       if (!demo && (menubar || tasks.list().settings.menubar)) { mb.start({ base, token }); try { mb.write(snapshot({ privacy }), mbExtra()); } catch {} }
-      if (phone) { // opt-in: a separate, restricted server on the LAN address (see src/phone.js)
-        try { const r = await require('./phone').startPhone({ port: port ? server.address().port + 1 : 0, privacy, demo, snapshot, tasks, sendText, people: () => real().people, token: keepToken ? phoneToken : '', onToken: onPhoneToken, extra: phoneUsage }); if (r.ok) phoneInfo = r; else phoneReason = r.reason; }
-        catch (e) { phoneReason = e.code === 'EADDRINUSE' ? 'port' : 'error'; }
-      }
+      if (phone || (!demo && tasks.list().settings.phone)) await startPhoneNow(); // --phone, or turned on once in the office (remembered)
       resolve({ server, token, base, url: `${base}/?t=${token}`, phone: phoneInfo, phoneReason, close: () => { clearInterval(timer); clearInterval(mbTimer); clearInterval(paceTimer); mb.stop(); for (const c of clients) c.destroy(); server.close(); if (phoneInfo) phoneInfo.close(); } });
     });
   });

package/src/tasks.js

@@ -202,6 +202,7 @@ function op(m = {}) {
     if (m.autoReview !== undefined) settings.autoReview = !!m.autoReview;
     if (m.monthGoal !== undefined) settings.monthGoal = Math.max(0, Math.min(1e6, Number(m.monthGoal) || 0));
     if (m.menubar !== undefined) settings.menubar = !!m.menubar;
+    if (m.phone !== undefined) settings.phone = !!m.phone;
     if (['app', 'browser', ''].includes(m.appChoice)) settings.appChoice = m.appChoice;
     if (m.quiet && typeof m.quiet === 'object') settings.quiet = { on: !!m.quiet.on, from: /^([01]\d|2[0-3]):[0-5]\d$/.test(m.quiet.from) ? m.quiet.from : '22:00', to: /^([01]\d|2[0-3]):[0-5]\d$/.test(m.quiet.to) ? m.quiet.to : '08:00' };
     if (m.dayBudget !== undefined) settings.dayBudget = Math.max(0, Math.min(1e5, Number(m.dayBudget) || 0));

package/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="2" y="0" width="12" height="1" fill="#1b1622"/><rect x="1" y="1" width="1" height="1" fill="#1b1622"/><rect x="2" y="1" width="12" height="1" fill="#f4dfc6"/><rect x="14" y="1" width="1" height="1" fill="#1b1622"/><rect x="0" y="2" width="1" height="1" fill="#1b1622"/><rect x="1" y="2" width="2" height="1" fill="#f4dfc6"/><rect x="3" y="2" width="10" height="1" fill="#1b1622"/><rect x="13" y="2" width="2" height="1" fill="#f4dfc6"/><rect x="15" y="2" width="1" height="1" fill="#1b1622"/><rect x="0" y="3" width="1" height="1" fill="#1b1622"/><rect x="1" y="3" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="3" width="1" height="1" fill="#1b1622"/><rect x="3" y="3" width="10" height="1" fill="#2b2336"/><rect x="13" y="3" width="1" height="1" fill="#1b1622"/><rect x="14" y="3" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="3" width="1" height="1" fill="#1b1622"/><rect x="0" y="4" width="1" height="1" fill="#1b1622"/><rect x="1" y="4" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="4" width="1" height="1" fill="#1b1622"/><rect x="3" y="4" width="3" height="1" fill="#2b2336"/><rect x="6" y="4" width="1" height="1" fill="#2ce8f5"/><rect x="7" y="4" width="2" height="1" fill="#2b2336"/><rect x="9" y="4" width="1" height="1" fill="#ff5fd2"/><rect x="10" y="4" width="3" height="1" fill="#2b2336"/><rect x="13" y="4" width="1" height="1" fill="#1b1622"/><rect x="14" y="4" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="4" width="1" height="1" fill="#1b1622"/><rect x="0" y="5" width="1" height="1" fill="#1b1622"/><rect x="1" y="5" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="5" width="1" height="1" fill="#1b1622"/><rect x="3" y="5" width="2" height="1" fill="#2b2336"/><rect x="5" y="5" width="1" height="1" fill="#2ce8f5"/><rect x="6" y="5" width="4" height="1" fill="#2b2336"/><rect x="10" y="5" width="1" height="1" fill="#ff5fd2"/><rect x="11" y="5" width="2" height="1" fill="#2b2336"/><rect x="13" y="5" width="1" height="1" fill="#1b1622"/><rect x="14" y="5" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="5" width="1" height="1" fill="#1b1622"/><rect x="0" y="6" width="1" height="1" fill="#1b1622"/><rect x="1" y="6" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="6" width="1" height="1" fill="#1b1622"/><rect x="3" y="6" width="1" height="1" fill="#2b2336"/><rect x="4" y="6" width="1" height="1" fill="#2ce8f5"/><rect x="5" y="6" width="6" height="1" fill="#2b2336"/><rect x="11" y="6" width="1" height="1" fill="#ff5fd2"/><rect x="12" y="6" width="1" height="1" fill="#2b2336"/><rect x="13" y="6" width="1" height="1" fill="#1b1622"/><rect x="14" y="6" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="6" width="1" height="1" fill="#1b1622"/><rect x="0" y="7" width="1" height="1" fill="#1b1622"/><rect x="1" y="7" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="7" width="1" height="1" fill="#1b1622"/><rect x="3" y="7" width="2" height="1" fill="#2b2336"/><rect x="5" y="7" width="1" height="1" fill="#2ce8f5"/><rect x="6" y="7" width="4" height="1" fill="#2b2336"/><rect x="10" y="7" width="1" height="1" fill="#ff5fd2"/><rect x="11" y="7" width="2" height="1" fill="#2b2336"/><rect x="13" y="7" width="1" height="1" fill="#1b1622"/><rect x="14" y="7" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="7" width="1" height="1" fill="#1b1622"/><rect x="0" y="8" width="1" height="1" fill="#1b1622"/><rect x="1" y="8" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="8" width="1" height="1" fill="#1b1622"/><rect x="3" y="8" width="3" height="1" fill="#2b2336"/><rect x="6" y="8" width="1" height="1" fill="#2ce8f5"/><rect x="7" y="8" width="2" height="1" fill="#2b2336"/><rect x="9" y="8" width="1" height="1" fill="#ff5fd2"/><rect x="10" y="8" width="3" height="1" fill="#2b2336"/><rect x="13" y="8" width="1" height="1" fill="#1b1622"/><rect x="14" y="8" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="8" width="1" height="1" fill="#1b1622"/><rect x="0" y="9" width="1" height="1" fill="#1b1622"/><rect x="1" y="9" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="9" width="1" height="1" fill="#1b1622"/><rect x="3" y="9" width="10" height="1" fill="#2b2336"/><rect x="13" y="9" width="1" height="1" fill="#1b1622"/><rect x="14" y="9" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="9" width="1" height="1" fill="#1b1622"/><rect x="0" y="10" width="1" height="1" fill="#1b1622"/><rect x="1" y="10" width="2" height="1" fill="#f4dfc6"/><rect x="3" y="10" width="10" height="1" fill="#1b1622"/><rect x="13" y="10" width="2" height="1" fill="#f4dfc6"/><rect x="15" y="10" width="1" height="1" fill="#1b1622"/><rect x="1" y="11" width="1" height="1" fill="#1b1622"/><rect x="2" y="11" width="12" height="1" fill="#f4dfc6"/><rect x="14" y="11" width="1" height="1" fill="#1b1622"/><rect x="2" y="12" width="2" height="1" fill="#1b1622"/><rect x="4" y="12" width="2" height="1" fill="#f4dfc6"/><rect x="6" y="12" width="8" height="1" fill="#1b1622"/><rect x="3" y="13" width="1" height="1" fill="#1b1622"/><rect x="4" y="13" width="1" height="1" fill="#f4dfc6"/><rect x="5" y="13" width="1" height="1" fill="#1b1622"/><rect x="3" y="14" width="2" height="1" fill="#1b1622"/></svg>