coworking-agents 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.8.0 — 2026-10-14
+- The office wall: frames, screens and windows spread evenly between the light switch and the whiteboard (same gap between each), a quiet wallpaper pattern and a chair rail with wainscot instead of plain stripes; sunlight comes in only through real windows
+- Everyone in the office: click the agent count under the office name for every agent with its state and the helpers working for it; an agent opens its panel, a helper opens its conversation
+- Top bar: under the office name, how many agents are in the office, with "+N 🤖" while helpers (subagents) work (hover for who); the bar keeps its size; the phone shows the same in its header and on each agent's card
+- Conversation (computer and phone): every agent's helpers (Claude subagents, Codex child threads) listed above the chat, with a dot on the ones still working; pick one to read its own conversation, from the request it got to its answer, with the same search
+- Conversation in the side panel: click an agent, then *Conversation* for the whole conversation as a chat, a search inside it, and a box to write to it when it finished its turn
+- Tasks as a board (Tasks → *Board*): queued, running, waiting on you, done; drag a card to retry, conclude or cancel it
+- When you spend (Costs and limits): output tokens per weekday and hour over the last 28 days, with the peak; and under each limit, at the measured pace of the last hour, when it would run out or that it lasts until it resets
+- Day timelapse (☰ → 🎞): a picture of the office every 5 minutes while it is open, drawn without names, turned into a ~20 s GIF made in the browser; kept only in this browser for 3 days
+- Fix: a stalled Read or Edit no longer shows as waiting for your approval in the modes that never ask for them (auto, accept edits, don't ask, bypass), nor a quick tool waiting on a command running beside it
+- Phone app updates faster: the live link pings every 5 s (a quiet office no longer looks offline and falls back to polling), reopens at once when the app comes back from the background, and new messages reach the open conversation with each change
+- Phone app: an agent's whole conversation as a chat (its own tab next to the summary), with a search inside it that also reaches older messages, and the message box at the bottom. Only what you wrote and what it answered; no tool output, reminders or command echoes; off in private mode
+- Phone home-screen icon opens with its code: the code link is the page itself (no redirect) and the manifest has no fixed start, so the icon keeps the link it was added from (iOS gives a home-screen app its own cookies)
+- Phone app keeps working when the Wi-Fi hands the computer a new address: the link uses the computer's own .local name (Bonjour), and the phone server moves to the new address by itself (same port and code). The address link stays shown for phones that don't resolve the name
+
 ## 0.7.0 — 2026-10-13
 - Phone app, live: the office pushes every change as it happens (the 3-second poll only runs while the stream is down)
 - Phone app: tap an agent to see it in full: what it is asking or doing now, your last request, its last answer, what it did, the files it touched, helpers, model, context, cost (texts hidden in private mode)

package/README.md

@@ -224,6 +224,10 @@ The office works in any browser. If you prefer an app:
 - **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.
 - **Files touched most** (Repositories): what agent sessions edited most this week.
 - **🖥 Tray icon** (Personalise or `--menubar`): how many are working, who needs you (red), a small bar with the fullest token limit (`●2 ▰▰▱▱▱ 41%`), today's spend, the limits, who is working on what and tasks asking permission; clicking opens the office on that agent or task, and it notifies you when nobody has the office open (outside quiet hours). macOS uses JavaScript for Automation, Windows uses PowerShell and Windows Forms, Linux uses `zenity` (icon and tooltip) or `notify-send` (notices only) — all part of the system or one package away. It reads a private status file the office writes and goes away when the office closes.
+- **💬 Conversation** (click an agent): the whole conversation as a chat, a search inside it, and a box to write to it once it finished its turn. Its helpers (subagents) are listed above the chat; pick one to read its own conversation. Only what you wrote and what it answered; off in private mode.
+- **▦ Task board** (Tasks → Board): queued, running, waiting on you and done; drag a card to retry, conclude or cancel it.
+- **When you spend** (Costs and limits): a weekday × hour map of output tokens over the last 28 days, and under each limit when it would run out at the pace of the last hour.
+- **🎞 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.
 - **📺 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.
@@ -233,7 +237,7 @@ The office works in any browser. If you prefer an app:
 `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.
 
 - **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. 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).
+- **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).
 - **Tasks:** answer permission questions (*Allow* / *Deny*), reply, conclude, retry or cancel, **see the changes** (summary and coloured diff) and start a new task in a folder already in use.
 - **Office:** a picture of the office drawn without names. **Usage:** today's and the month's spend and the limits.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coworking-agents",
-  "version": "0.7.0",
+  "version": "0.8.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

@@ -82,6 +82,8 @@
 <script src="js/views.js"></script>
 <script src="js/fun2.js"></script>
 <script src="js/tasks.js"></script>
+<script src="js/talkdesk.js"></script>
+<script src="js/timelapse.js"></script>
 <script src="js/main.js"></script>
 </body>
 </html>

package/public/js/i18n.js

@@ -595,10 +595,27 @@ Object.assign(I18N.en, { clashPause: t => `Pause “${t}”`, clashPauseSure: 'P
 Object.assign(I18N.en, { phone: { diagApp: 'Running as a full-screen app ✓', diagSafari: 'Running inside Safari (not as an app): add it to the Home Screen with “Open as Web App” on', diagScreen: 'screen', diagPage: 'page', diagInsets: 'inset top / bottom', tabNow: 'Now', tabTasks: 'Tasks', tabOffice: 'Office', tabUsage: 'Usage', agents: 'Agents', noAgents: 'No agent open.', justNow: 'now', newTask: 'New task', newPh: 'What should the agent do?', noFolders: 'Open an agent or create a task on the computer first: the phone only creates tasks in folders already in use.', working: n => `${n} working`, needCount: n => `${n} need${n === 1 ? 's' : ''} you`, idleCount: n => `${n} idle`, officeAlt: 'The office now, without names', officeNote: t => `Picture ${t === 'now' ? 'from just now' : 'from ' + t + ' ago'}, without names. It refreshes while the office is open on the computer.`, noFrame: 'Open the office on the computer to see its picture here.', today: 'spent today', month: 'spent this month', goal: g => `Month's goal (${g})`, limits: 'Limits', noLimits: 'No limit data yet.', fiveH: '5 hours', week: 'week', resets: t => `resets in ${t}`, estimate: 'Estimates at API prices, from the logs on the computer.', homeTitle: 'As an app on the phone', homeIos: 'iPhone: open the link in Safari → Share → Add to Home Screen.', homeAndroid: 'Android: open it in Chrome → ⋮ menu → Add to Home screen (or Install app).', homeNote: 'The icon opens full screen, like an app, whenever the phone is on the same Wi-Fi and the office runs with --phone. The code is kept, so no need to scan again.', rotate: 'Change the phone code', rotateSure: 'Change the code? Every phone will have to scan the QR again.', status: (w, n) => `${w} working · ${n} need you`, needYou: 'Need you', nothing: 'Nobody is waiting on you right now.', tasks: 'Tasks', noTasks: 'No open tasks.', openOffice: 'This question has to be answered on the computer.', offline: 'no connection to the office', done: 'done', fail: { demo: 'demo mode', gone: 'the session closed', busy: 'it is no longer waiting', text: 'invalid option', state: 'not possible now', notty: 'could not find the terminal', unsupported: 'cannot answer from here', nodir: 'folder not allowed', nodesc: 'write what to do', attempts: 'no attempts left' },
   title: 'Phone', how: 'Start the office with --phone to see tasks and answer permissions from your phone, on the same Wi-Fi.', scan: 'Point your phone camera at the code (same Wi-Fi).', warn: 'Trusted networks only: the local network connection is not encrypted.' } });
 // the phone's live view: one agent in full, writing to it, a task's changes
-Object.assign(I18N.pt.phone, { back: 'Voltar', agentGone: 'Esta sessão fechou.', asking: 'Pedindo agora', doingNow: 'Fazendo agora', lastAsk: 'Seu último pedido', lastReply: 'Última resposta', msgPh: 'Escreva para o agente…', msgSend: 'Enviar', msgOnlyIdle: 'Dá para escrever quando ele terminar a vez (no terminal; o app do Claude e o VS Code não recebem texto de fora).', recent: 'O que fez', files: 'Arquivos', helpers: 'Ajudantes', info: 'Detalhes', model: 'Modelo', ctx: 'Contexto', cost: 'Custo', turns: 'Turnos', open: 'Aberto há', folder: 'Pasta', diff: 'Ver mudanças', diffHide: 'Esconder mudanças', noDiff: 'Nada mudou ainda.', live: 'ao vivo' });
-Object.assign(I18N.pt.phone.fail, { desktop: 'é o app do Claude: não recebe texto de fora', notforeground: 'o agente não está na frente no terminal', notfound: 'não achei a janela do terminal', platform: 'só funciona no Mac', private: 'modo privado', notask: 'a tarefa sumiu', unknown: 'erro' });
-Object.assign(I18N.en.phone, { back: 'Back', agentGone: 'This session closed.', asking: 'Asking now', doingNow: 'Doing now', lastAsk: 'Your last request', lastReply: 'Last answer', msgPh: 'Write to the agent…', msgSend: 'Send', msgOnlyIdle: 'You can write once it finishes its turn (in a terminal; the Claude app and VS Code take no text from outside).', recent: 'What it did', files: 'Files', helpers: 'Helpers', info: 'Details', model: 'Model', ctx: 'Context', cost: 'Cost', turns: 'Turns', open: 'Open for', folder: 'Folder', diff: 'See changes', diffHide: 'Hide changes', noDiff: 'Nothing changed yet.', live: 'live' });
-Object.assign(I18N.en.phone.fail, { desktop: 'it is the Claude app: it takes no text from outside', notforeground: 'the agent is not in front in its terminal', notfound: 'could not find the terminal window', platform: 'only works on a Mac', private: 'private mode', notask: 'the task is gone', unknown: 'error' });
+Object.assign(I18N.pt.phone, { main: 'Principal', helperOf: t => `Ajudante ${t}`, summaryTab: 'Resumo', talkTab: 'Conversa', talkSearch: 'Buscar na conversa', talkFound: n => `${n} mensage${n === 1 ? 'm encontrada' : 'ns encontradas'}`, talkEmpty: 'Nada na conversa ainda.', talkNone: 'Nada encontrado.', talkCut: 'Mostrando as mensagens mais recentes; a busca procura no resto.', you: 'Você', ipAlt: 'O link usa o nome do computador na rede, que continua valendo quando o Wi-Fi troca o endereço. Se o celular não abrir pelo nome (alguns Android), use o endereço de agora:', back: 'Voltar', agentGone: 'Esta sessão fechou.', asking: 'Pedindo agora', doingNow: 'Fazendo agora', lastAsk: 'Seu último pedido', lastReply: 'Última resposta', msgPh: 'Escreva para o agente…', msgSend: 'Enviar', msgOnlyIdle: 'Dá para escrever quando ele terminar a vez (no terminal; o app do Claude e o VS Code não recebem texto de fora).', recent: 'O que fez', files: 'Arquivos', helpers: 'Ajudantes', info: 'Detalhes', model: 'Modelo', ctx: 'Contexto', cost: 'Custo', turns: 'Turnos', open: 'Aberto há', folder: 'Pasta', diff: 'Ver mudanças', diffHide: 'Esconder mudanças', noDiff: 'Nada mudou ainda.', live: 'ao vivo' });
+Object.assign(I18N.pt.phone.fail, { nofile: 'não achei o registro da conversa', desktop: 'é o app do Claude: não recebe texto de fora', notforeground: 'o agente não está na frente no terminal', notfound: 'não achei a janela do terminal', platform: 'só funciona no Mac', private: 'modo privado', notask: 'a tarefa sumiu', unknown: 'erro' });
+Object.assign(I18N.en.phone, { main: 'Main', helperOf: t => `Helper ${t}`, summaryTab: 'Summary', talkTab: 'Conversation', talkSearch: 'Search the conversation', talkFound: n => `${n} message${n === 1 ? '' : 's'} found`, talkEmpty: 'Nothing in the conversation yet.', talkNone: 'Nothing found.', talkCut: 'Showing the latest messages; the search looks through the rest.', you: 'You', ipAlt: 'The link uses the computer’s name on the network, which keeps working when the Wi-Fi hands out a new address. If the phone does not open it by name (some Android phones), use the current address:', back: 'Back', agentGone: 'This session closed.', asking: 'Asking now', doingNow: 'Doing now', lastAsk: 'Your last request', lastReply: 'Last answer', msgPh: 'Write to the agent…', msgSend: 'Send', msgOnlyIdle: 'You can write once it finishes its turn (in a terminal; the Claude app and VS Code take no text from outside).', recent: 'What it did', files: 'Files', helpers: 'Helpers', info: 'Details', model: 'Model', ctx: 'Context', cost: 'Cost', turns: 'Turns', open: 'Open for', folder: 'Folder', diff: 'See changes', diffHide: 'Hide changes', noDiff: 'Nothing changed yet.', live: 'live' });
+Object.assign(I18N.en.phone.fail, { nofile: 'could not find the conversation log', desktop: 'it is the Claude app: it takes no text from outside', notforeground: 'the agent is not in front in its terminal', notfound: 'could not find the terminal window', platform: 'only works on a Mac', private: 'private mode', notask: 'the task is gone', unknown: 'error' });
+// an agent's whole conversation in the side panel
+Object.assign(I18N.pt, { chat: { main: 'Principal', helpers: n => `${n} ajudante${n === 1 ? '' : 's'} (subagentes): toque para ver a conversa de cada um.`, helperOf: t => `Ajudante ${t}`, summary: 'Resumo', talk: 'Conversa', search: 'Buscar na conversa', found: n => `${n} mensage${n === 1 ? 'm encontrada' : 'ns encontradas'}`, empty: 'Nada na conversa ainda.', none: 'Nada encontrado.', cut: 'Mostrando as mensagens mais recentes; a busca procura no resto.', you: 'Você', write: 'Escreva para o agente…', send: 'Enviar', onlyIdle: 'Dá para escrever quando ele terminar a vez (no terminal; o app do Claude e o VS Code não recebem texto de fora). Use “Perguntar a este agente” no resumo para os outros.', fail: { gone: 'a sessão fechou', nofile: 'não achei o registro da conversa', private: 'modo privado', busy: 'ele está trabalhando; espere terminar', unsupported: 'não dá para escrever nesta sessão', notty: 'não achei o terminal', notforeground: 'o agente não está na frente no terminal', notfound: 'não achei a janela do terminal', desktop: 'é o app do Claude: não recebe texto de fora', platform: 'só funciona no Mac', text: 'texto inválido', demo: 'modo demonstração', unknown: 'erro' } } });
+Object.assign(I18N.en, { chat: { main: 'Main', helpers: n => `${n} helper${n === 1 ? '' : 's'} (subagents): click one to see its conversation.`, helperOf: t => `Helper ${t}`, summary: 'Summary', talk: 'Conversation', search: 'Search the conversation', found: n => `${n} message${n === 1 ? '' : 's'} found`, empty: 'Nothing in the conversation yet.', none: 'Nothing found.', cut: 'Showing the latest messages; the search looks through the rest.', you: 'You', write: 'Write to the agent…', send: 'Send', onlyIdle: 'You can write once it finishes its turn (in a terminal; the Claude app and VS Code take no text from outside). Use “Ask this agent” in the summary for the others.', fail: { gone: 'the session closed', nofile: 'could not find the conversation log', private: 'private mode', busy: 'it is working; wait for it to finish', unsupported: 'cannot write to this session', notty: 'could not find the terminal', notforeground: 'the agent is not in front in its terminal', notfound: 'could not find the terminal window', desktop: 'it is the Claude app: it takes no text from outside', platform: 'only works on a Mac', text: 'invalid text', demo: 'demo mode', unknown: 'error' } } });
+// tasks as a board
+Object.assign(I18N.pt.tasks, { board: { list: 'Lista', board: 'Quadro', hint: 'Arraste um cartão: de “Esperando você” para “Rodando” tenta de novo, para “Concluídas” conclui; da fila ou de “Rodando” para “Concluídas” cancela. Clique para abrir.', cols: { queue: 'Na fila', running: 'Rodando', you: 'Esperando você', done: 'Concluídas' } } });
+Object.assign(I18N.en.tasks, { board: { list: 'List', board: 'Board', hint: 'Drag a card: from “Waiting on you” to “Running” retries it, to “Done” concludes it; from the queue or “Running” to “Done” cancels it. Click to open.', cols: { queue: 'Queued', running: 'Running', you: 'Waiting on you', done: 'Done' } } });
+// usage map and the pace of the limits
+Object.assign(I18N.pt, { heat: { title: 'Quando você gasta', peak: (d, h, day) => `Pico: ${d} às ${h}h. O dia que mais gasta: ${day}.`, note: n => `Tokens de saída por dia da semana e hora, nos últimos ${n} dias. Passe o mouse para ver o valor.`, endsAt: (t, r) => `Nesse ritmo (${r} pontos/h) acaba às ${t}, antes de renovar`, lasts: r => `Nesse ritmo (${r} pontos/h) dura até renovar`, steady: 'Parado ou quase: dura até renovar' } });
+Object.assign(I18N.en, { heat: { title: 'When you spend', peak: (d, h, day) => `Peak: ${d} at ${h}:00. Busiest day: ${day}.`, note: n => `Output tokens per weekday and hour over the last ${n} days. Hover for the value.`, endsAt: (t, r) => `At this pace (${r} points/h) it runs out at ${t}, before it resets`, lasts: r => `At this pace (${r} points/h) it lasts until it resets`, steady: 'Flat or nearly: it lasts until it resets' } });
+// the day's timelapse
+Object.assign(I18N.pt.officeObj.menu, { timelapse: 'Timelapse do dia' });
+Object.assign(I18N.en.officeObj.menu, { timelapse: 'Day timelapse' });
+Object.assign(I18N.pt, { timelapse: { title: 'Timelapse do dia', sub: 'Uma foto do escritório a cada 5 minutos enquanto ele está aberto, sem nomes, branches nem nome do escritório. Vira um GIF de uns 20 segundos.', today: n => `Gerar o GIF de hoje (${n} foto${n === 1 ? '' : 's'})`, yesterday: n => `De ontem (${n})`, now: 'Tirar uma foto agora', reading: 'Lendo as fotos…', making: 'Montando o GIF…', few: 'Poucas fotos ainda: deixe o escritório aberto um pouco mais.', alt: 'O dia no escritório, acelerado', save: 'Salvar GIF', info: (n, s) => `${n} fotos · ${s}`, note: 'As fotos ficam só neste navegador (os últimos 3 dias) e nunca saem do computador.' } });
+Object.assign(I18N.en, { timelapse: { title: 'Day timelapse', sub: 'A picture of the office every 5 minutes while it is open, without names, branches or the office name. It becomes a GIF of about 20 seconds.', today: n => `Make today's GIF (${n} picture${n === 1 ? '' : 's'})`, yesterday: n => `Yesterday's (${n})`, now: 'Take a picture now', reading: 'Reading the pictures…', making: 'Making the GIF…', few: 'Too few pictures yet: leave the office open a while longer.', alt: 'The day in the office, sped up', save: 'Save GIF', info: (n, s) => `${n} pictures · ${s}`, note: 'The pictures stay in this browser only (the last 3 days) and never leave the computer.' } });
+// how many agents and helpers are in the office
+Object.assign(I18N.pt, { crew: { title: 'Todos no escritório', sub: (a, h) => `${a} agente${a === 1 ? '' : 's'} e ${h} ajudante${h === 1 ? '' : 's'} (subagentes) trabalhando agora.`, note: 'Clique num agente para abrir o painel dele, ou num ajudante para ler a conversa dele. Os ajudantes que já terminaram ficam na aba Conversa do agente.', agents: n => n === 1 ? 'agente' : 'agentes', helpers: n => n === 1 ? 'ajudante' : 'ajudantes', none: 'Nenhum ajudante (subagente) trabalhando agora.', status: n => `${n} ajudante${n === 1 ? '' : 's'}` } });
+Object.assign(I18N.en, { crew: { title: 'Everyone in the office', sub: (a, h) => `${a} agent${a === 1 ? '' : 's'} and ${h} helper${h === 1 ? '' : 's'} (subagents) working right now.`, note: 'Click an agent to open its panel, or a helper to read its conversation. Helpers that finished stay in the agent\'s Conversation tab.', agents: n => n === 1 ? 'agent' : 'agents', helpers: n => n === 1 ? 'helper' : 'helpers', none: 'No helpers (subagents) working right now.', status: n => `${n} helper${n === 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/panel.js

@@ -78,6 +78,7 @@ function renderPanel() {
   const p = data.people.find(x => x.id === selected);
   if (!p) { selected = null; panel.hidden = true; return; }
   if (panelBody.contains(document.activeElement) && /^(TEXTAREA|INPUT|SELECT)$/.test(document.activeElement.tagName)) return; // don't wipe what is being typed
+  if (typeof deskTalkOn === 'function' && deskTalkOn(p)) return; // the Conversation view (talkdesk.js)
   const col = KIND_COLOR[p.state] || '#888';
   const ctxMax = p.ctxMax || 0, ctxPct = ctxMax ? Math.min(1, p.ctx / ctxMax) : 0;
   const certs = certsOf(p);
@@ -126,6 +127,7 @@ function renderPanel() {
     ${tools.length ? `<h3>${P.tools}</h3><ul class="bars">${tools.map(([k, n]) => `<li><code>${esc(k)}</code><span class="tbar"><i style="width:${(n / toolMax * 100).toFixed(1)}%"></i></span><span class="t">${Number(n) || 0}</span></li>`).join('')}</ul>` : ''}
     <h3 id="certs-h">${P.certs}</h3>${certs.length ? `<div class="certs">${certs.map(c => `<div class="cert" style="--c:${certColor(c)}"><small>${T.kinds[c.kind]}</small>${esc(c.name)}${c.kind === 'badge' ? `<br><span class="note">${esc(c.desc)}</span>` : ` <span class="note">${Number(c.n) || 0}×</span>`}</div>`).join('')}</div>` : `<p class="note">${P.noCerts}</p>`}
     <p class="note" style="margin-top:18px">${P.session}: <code>${esc(p.id)}</code></p>`;
+  if (typeof deskTabsHtml === 'function') panelBody.querySelector('header.ph').insertAdjacentHTML('afterend', deskTabsHtml());
   const face = Art.portrait(p.id, p.state === 'needs_you' ? 'open' : null);
   const fb = panelBody.querySelector('.ph-face');
   fb.appendChild(face);

package/public/js/report.js

@@ -146,6 +146,23 @@ reportEl.addEventListener('click', async e => {
 });
 function closeReport() { reportEl.hidden = true; }
 
+// how fast a limit is filling and when it runs out at that pace (measured over the last hour; nothing until there is enough)
+function paceHtml(u, id, key) {
+  const H = T.heat, x = u && u.pace && u.pace[id] && u.pace[id][key]; if (!x) return '';
+  const at = ms => new Date(ms).toLocaleTimeString(lang === 'pt' ? 'pt-BR' : 'en', { hour: '2-digit', minute: '2-digit' }) + (new Date(ms).toDateString() === new Date().toDateString() ? '' : ' ' + new Date(ms).toLocaleDateString(lang === 'pt' ? 'pt-BR' : 'en', { weekday: 'short' }));
+  return x.fullAt ? `<small class="pace hot">⏱ ${esc(H.endsAt(at(x.fullAt), x.perHour))}</small>` : `<small class="pace">✓ ${esc(x.perHour > 0.5 ? H.lasts(x.perHour) : H.steady)}</small>`;
+}
+// when the tokens go: weekday × hour over the last 28 days, darker = more output tokens
+function heatHtml(u) {
+  const H = T.heat, g = u && u.heat && u.heat.grid; if (!g) return '';
+  const max = Math.max(1, ...g.flat().map(c => c.out)); if (max <= 1) return '';
+  const days = lang === 'pt' ? ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'] : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], order = [1, 2, 3, 4, 5, 6, 0];
+  let best = null; for (const d of order) for (let h = 0; h < 24; h++) if (!best || g[d][h].out > best.out) best = { d, h, out: g[d][h].out };
+  const byDay = order.map(d => ({ d, out: g[d].reduce((n, c) => n + c.out, 0) })).sort((a, b) => b.out - a.out)[0];
+  const rows = order.map(d => `<div class="hrow"><span>${esc(days[d])}</span>${g[d].map((c, h) => `<i style="--a:${c.out ? (0.12 + 0.88 * c.out / max).toFixed(2) : 0}" title="${esc(days[d])} ${h}h · ${esc(fmtK(c.out))} tokens${c.usd ? ' · ' + esc(fmtUSD(c.usd)) : ''}"></i>`).join('')}</div>`).join('');
+  return `<h3>${esc(H.title)}</h3><p class="note">${esc(H.peak(days[best.d], best.h, days[byDay.d]))}</p>
+    <div class="heat">${rows}<div class="hrow axis"><span></span>${Array.from({ length: 24 }, (_, h) => `<em>${h % 3 ? '' : h}</em>`).join('')}</div></div><p class="note">${esc(H.note(u.heat.days))}</p>`;
+}
 function renderReport() {
   if (reportTab === 'tasks') return renderTasks();
   if (reportTab === 'notices') return renderNotices();
@@ -155,6 +172,8 @@ function renderReport() {
   if (reportTab === 'broadcast') return renderBroadcast();
   if (reportTab === 'today') return renderToday();
   if (reportTab === 'feed') return renderFeed();
+  if (reportTab === 'timelapse') return renderTimelapse();
+  if (reportTab === 'crew') return renderCrew();
   if (reportTab === 'ach') return renderAchievements();
   if (reportTab === 'paper') return renderPaper();
   if (reportTab === 'queue') return renderQueue();
@@ -181,16 +200,17 @@ function renderReport() {
     <div class="axis">${days.map((k, i) => `<span>${i % 2 ? '' : k.slice(8) + '/' + k.slice(5, 7)}</span>`).join('')}</div>
     <div class="legend">${Object.keys(AGENT).map(id => `<span><i class="ailogo" data-ai="${esc(id)}"></i>${esc(AGENT[id].label)}</span>`).join('')}</div>`;
   // limits first: one big tile per window, the most urgent thing on the page
-  const limTile = (id, label, w) => {
+  const limTile = (id, label, w, key) => {
     if (!w) return '';
     const pct = Math.max(0, Math.min(100, w.usedPercent)), c = pct > 85 ? '#e43b44' : pct > 60 ? '#feae34' : '#63c74d';
-    return `<div class="ltile" style="--c:${c}"><div class="ltop"><span style="color:${AGENT[id].color}"><i class="ailogo" data-ai="${esc(id)}"></i>${esc(AGENT[id].label)}</span><small>${esc(label)}</small></div><b>${Math.round(pct)}%</b><div class="lbar"><i style="width:${pct}%"></i></div><small>${esc(U.resets)} ${esc(untilText(w.resetsAt))}</small></div>`;
+    return `<div class="ltile" style="--c:${c}"><div class="ltop"><span style="color:${AGENT[id].color}"><i class="ailogo" data-ai="${esc(id)}"></i>${esc(AGENT[id].label)}</span><small>${esc(label)}</small></div><b>${Math.round(pct)}%</b><div class="lbar"><i style="width:${pct}%"></i></div><small>${esc(U.resets)} ${esc(untilText(w.resetsAt))}</small>${paceHtml(u, id, key)}</div>`;
   };
-  const tiles = Object.keys(AGENT).flatMap(id => { const l = L[id]; return l ? [limTile(id, U.fiveHour, l.primary), limTile(id, U.week, l.secondary)] : []; }).join('');
+  const tiles = Object.keys(AGENT).flatMap(id => { const l = L[id]; return l ? [limTile(id, U.fiveHour, l.primary, '5h'), limTile(id, U.week, l.secondary, 'week')] : []; }).join('');
   const total = id => u && u.byAgent && u.byAgent[id] ? u.byAgent[id].total : null;
   body.innerHTML = tabsHtml() + `<h2 hidden>${esc(U.title)}</h2><p class="sub">${esc(U.reportSub)}${u && u.scannedAt ? ' · ' + esc(U.updated) + ' ' + esc(ago(Date.now() - u.scannedAt)) : ''}</p>
     <h3>${esc(U.limits)}</h3><div class="ltiles">${tiles || `<p class="note">${esc(U.none)}</p>`}</div>
     ${costGoalHtml(u)}
+    ${heatHtml(u)}
     <h3>${esc(U.last14)}</h3><div class="chart-wrap"><span class="ymax">${tok(max)}</span>${chart}</div>
     <h3>${esc(U.allTime)}</h3><div class="rgrid">${Object.keys(AGENT).map(card).join('')}</div>
     <p class="note" style="margin-top:14px">${esc(U.note)} ${esc(U.costNote)}</p>`;

package/public/js/scene.js

@@ -58,25 +58,35 @@ function drawUsageBoard(x, y, t) {
 const skyHour = () => styleHour(qs.get('hour') ? Number(qs.get('hour')) : new Date().getHours() + new Date().getMinutes() / 60);
 function drawWall(t, sky) {
   r(0, 0, W, TOP - 6, PAL.wall);
-  for (let x = 0; x < W; x += 24) r(x, 0, 1, TOP - 6, PAL.wallShade);
+  // wallpaper: a quiet dotted diamond pattern, then a chair rail with wood wainscot below the frames
+  for (let y = 8, k = 0; y < TOP - 16; y += 6, k++) for (let x = (k % 2) * 6; x < W; x += 12) r(x, y, 1, 1, PAL.wallShade);
   r(0, 0, W, 3, PAL.wallTrim); r(0, 3, W, 1, PAL.ink2);
+  r(0, TOP - 14, W, 2, PAL.wallTrim); r(0, TOP - 12, W, 1, PAL.wallShade); r(0, TOP - 11, W, 3, shade(PAL.wall, .93));
+  for (let x = 18; x < W; x += 36) r(x, TOP - 11, 1, 3, PAL.wallShade);
   r(0, TOP - 8, W, 2, PAL.wallShade); r(0, TOP - 6, W, 5, PAL.base); r(0, TOP - 6, W, 1, '#8f553f'); r(0, TOP - 1, W, 1, PAL.ink);
   windowBoxes = []; releaseBox = historyBox = costBox = noticesBox = null;
-  let extra = 0; // window slots after the agent of the month become the costs screen and the notice board
-  const nWin = Math.max(1, Math.floor((CX - 30) / 74));
-  // the third window slot becomes the dev corner of the wall: neon </> and two posters
+  // what hangs on the wall, chosen by how much wall there is (as many 74 px slots as fit), then spread evenly
+  // between the light switch and the whiteboard so the gaps match
+  const nWin = Math.max(1, Math.floor((CX - 30) / 74)), items = [];
+  let extra = 0; // slots after the agent of the month become the costs screen and the notice board
   for (let i = 0; i < nWin; i++) {
-    const wx = 16 + i * 74;
-    if (i === 1) drawUsageBoard(wx - 6, 7, t);
+    if (i === 1) items.push({ w: 112, draw: x => drawUsageBoard(x, 7, t) });
     else if (i === 2) continue; // covered by the usage screen
-    else if (i === 3 && nWin >= 5) { Art.drawNeon(wx + 9, 10, Date.now() - neonFlash < 400 ? (((Date.now() / 60) | 0) % 2 ? t : 120 * 47) : t, wallGlows); neonBox = { x: wx + 7, y: 8, w: 34, h: 18 }; Art.drawPoster(wx - 16, 14, 0); Art.drawPoster(wx + 46, 14, 2); releaseBox = { x: wx - 17, y: 13, w: 22, h: 28 }; historyBox = { x: wx + 45, y: 13, w: 22, h: 28 }; if (typeof drawReleaseBadge === 'function') drawReleaseBadge(wx - 16, 14, t); }
-    else if (i === 4 && nWin >= 7) drawTrophyShelf(wx - 8, 9, 64, t);
-    else if (i === 5) { if (nWin >= 7) drawAgentOfMonth(wx, 10, t, wallGlows); else Art.drawPoster(wx + 14, 12, 1); }
-    else if (i >= 6 && extra < 2 && typeof drawCostScreen === 'function') { if (extra++ === 0) { drawCostScreen(wx, 9, 48, 30, t); costBox = { x: wx - 1, y: 8, w: 50, h: 32 }; } else { drawNoticeCork(wx, 9, 48, 30, t); noticesBox = { x: wx - 1, y: 8, w: 50, h: 32 }; } }
-    else { Art.drawWindow(wx, 9, 48, 30, sky, t, i); drawSkyExtras(wx, 9, 48, 30, sky, t, i, skyHour()); drawWindowView(wx, 9, 48, 30, sky, i); drawSeasonWindow(wx, 9, 48, 30, t); drawWeather(wx, 9, 48, 30, t); drawGlassDrops(wx, 9, 48, 30, t); drawHolidayWindow(wx, 9, 48, 30, t, sky); windowBoxes.push({ x: wx, y: 9, w: 48, h: 30 }); }
+    else if (i === 3 && nWin >= 5) items.push({ w: 84, draw: x => { // the dev corner: two posters around the neon </>
+      Art.drawPoster(x, 14, 0); Art.drawPoster(x + 62, 14, 2); releaseBox = { x: x - 1, y: 13, w: 22, h: 28 }; historyBox = { x: x + 61, y: 13, w: 22, h: 28 };
+      Art.drawNeon(x + 25, 10, Date.now() - neonFlash < 400 ? (((Date.now() / 60) | 0) % 2 ? t : 120 * 47) : t, wallGlows); neonBox = { x: x + 23, y: 8, w: 34, h: 18 };
+      if (typeof drawReleaseBadge === 'function') drawReleaseBadge(x, 14, t);
+    } });
+    else if (i === 4 && nWin >= 7) items.push({ w: 64, draw: x => drawTrophyShelf(x, 9, 64, t) });
+    else if (i === 5) items.push(nWin >= 7 ? { w: 52, draw: x => drawAgentOfMonth(x, 10, t, wallGlows) } : { w: 22, draw: x => Art.drawPoster(x, 12, 1) });
+    else if (i >= 6 && extra < 2 && typeof drawCostScreen === 'function') items.push(extra++ === 0 ? { w: 48, draw: x => { drawCostScreen(x, 9, 48, 30, t); costBox = { x: x - 1, y: 8, w: 50, h: 32 }; } } : { w: 48, draw: x => { drawNoticeCork(x, 9, 48, 30, t); noticesBox = { x: x - 1, y: 8, w: 50, h: 32 }; } });
+    else items.push({ w: 48, draw: x => { Art.drawWindow(x, 9, 48, 30, sky, t, i); drawSkyExtras(x, 9, 48, 30, sky, t, i, skyHour()); drawWindowView(x, 9, 48, 30, sky, i); drawSeasonWindow(x, 9, 48, 30, t); drawWeather(x, 9, 48, 30, t); drawGlassDrops(x, 9, 48, 30, t); drawHolidayWindow(x, 9, 48, 30, t, sky); windowBoxes.push({ x, y: 9, w: 48, h: 30 }); } });
   }
-  // the ON AIR sign takes the gap between the last window and the whiteboard, when there is one
-  { const lastEnd = 16 + (nWin - 1) * 74 + 48, gap = RX - 14 - lastEnd; moodBox = null; if (gap >= 32) drawMoodSign(lastEnd + ((gap - 24) / 2 | 0), 16, t, wallGlows); }
+  moodBox = null;
+  const left = 18, right = RX - 24, sum = () => items.reduce((n, it) => n + it.w, 0);
+  if (right - left - sum() - 26 >= (items.length + 1) * 8) items.push({ w: 26, draw: x => drawMoodSign(x + 1, 16, t, wallGlows) }); // ON AIR, when there is room
+  const gap = items.length > 1 ? Math.min(40, Math.max(6, (right - left - sum()) / (items.length - 1))) : 0, start = left + Math.max(0, ((right - left) - sum() - gap * (items.length - 1)) / 2);
+  let x = start; for (const it of items) { it.draw(Math.round(x)); x += it.w + gap; }
   boardBox = { x: RX - 14, y: 8, w: 56, h: 30 };
   if (typeof drawTaskBoard === 'function') drawTaskBoard(boardBox.x, boardBox.y, boardBox.w, boardBox.h, t); else Art.drawWhiteboard(boardBox.x, boardBox.y, boardBox.w, boardBox.h, counts(), t);
   Art.drawClock(RX + 58, 20);
@@ -94,8 +104,8 @@ function drawShafts(sky, nWin) {
   if (sky.phase === 'night') return;
   ctx.save();
   ctx.fillStyle = sky.phase === 'day' ? 'rgba(255,246,214,0.08)' : 'rgba(255,180,120,0.08)';
-  for (let i = 0; i < nWin; i++) {
-    const x = 16 + i * 74;
+  for (const b of windowBoxes) {
+    const x = b.x;
     ctx.beginPath(); ctx.moveTo(x, TOP); ctx.lineTo(x + 48, TOP); ctx.lineTo(x + 80, TOP + 80); ctx.lineTo(x + 32, TOP + 80); ctx.closePath(); ctx.fill();
   }
   ctx.restore();
@@ -400,7 +410,7 @@ function drawScene(t, dt) {
   r(CX - 8, TOP, 16, H - TOP, '#6e2f3f'); r(CX - 6, TOP, 12, H - TOP, '#8e3e52');
   for (let y = TOP + 6; y < H; y += 10) { r(CX - 1, y, 2, 4, '#c96f84'); r(CX - 5, y + 5, 1, 1, '#c96f84'); r(CX + 4, y + 5, 1, 1, '#c96f84'); }
   for (let y = TOP + 70; y < H - 30; y += 150) Art.drawPlant(CX + 9, y, false);
-  if (sky.phase !== 'night') for (let i = 0; i < nWin; i++) lights.push({ x: 40 + i * 74, y: TOP + 20, r: 60 });
+  if (sky.phase !== 'night') for (const b of windowBoxes) lights.push({ x: b.x + 24, y: TOP + 20, r: 60 });
   const arrived = z => layout.filter(c => c.actor && c.actor.mode === z);
   const meet = arrived('meet').map(c => ({ spot: c.actor.spot, lk: look(c.p.id), label: c.p.name, lead: true }));
   const used = new Set(meet.map(m => m.spot));

package/public/js/talkdesk.js

@@ -0,0 +1,106 @@
+'use strict';
+// ---------------- an agent's whole conversation in the side panel ----------------
+// Two views of the selected agent: Summary (the panel as it was) and Conversation (a chat with a search inside it).
+// The conversation is read on the server from the session's own log; only what you wrote and what it answered.
+let deskSub = 'info', deskTalkSub = '', deskHelpers = [], deskTalk = null, deskTalkFor = '', deskTalkKey = '', deskTalkQ = '', deskTalkBusy = false, deskTalkDrawn = '', deskTalkTimer = 0;
+const deskCanMsg = p => ['claude', 'codex'].includes(p.agent) && p.entrypoint !== 'claude-desktop' && ['idle', 'asleep'].includes(p.state);
+function deskTabsHtml() {
+  const C = T.chat;
+  return `<div class="ptabs"><button class="${deskSub === 'info' ? 'on' : ''}" data-psub="info">${esc(C.summary)}</button>${data && data.privacy ? '' : `<button class="${deskSub === 'talk' ? 'on' : ''}" data-psub="talk">💬 ${esc(C.talk)}</button>`}</div>`;
+}
+const deskMark = (text, q) => {
+  const t = String(text || ''); if (!q) return esc(t);
+  const low = t.toLowerCase(), out = []; let i = 0, k;
+  while ((k = low.indexOf(q, i)) >= 0) { out.push(esc(t.slice(i, k)), '<mark>', esc(t.slice(k, k + q.length)), '</mark>'); i = k + q.length; }
+  out.push(esc(t.slice(i))); return out.join('');
+};
+// **bold** and `code` on already escaped text
+const deskMd = h => h.replace(/\*\*([^*\n]+)\*\*/g, '<b>$1</b>').replace(/`([^`\n]+)`/g, '<code>$1</code>');
+function deskTalkList(p) {
+  const C = T.chat, r = deskTalk, q = deskTalkQ.toLowerCase();
+  if (!r) return `<p class="note">…</p>`;
+  if (!r.ok) return `<p class="note">⚠ ${esc(C.fail[r.reason] || r.reason || '?')}</p>`;
+  if (!r.items.length) return `<p class="note">${esc(q ? C.none : C.empty)}</p>`;
+  const when = ms => { const x = new Date(ms), today = new Date().toDateString() === x.toDateString(); return x.toLocaleString(lang === 'pt' ? 'pt-BR' : 'en', today ? { hour: '2-digit', minute: '2-digit' } : { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }); };
+  return (q ? `<p class="note">${esc(C.found(r.found))}</p>` : r.cut || r.total > r.items.length ? `<p class="note">${esc(C.cut)}</p>` : '')
+    + r.items.map(m => `<div class="bubble ${m.role === 'user' ? 'me' : 'it'}"><p>${deskMd(deskMark(m.text, q))}</p><small>${(h => m.role === 'user' ? esc(h ? p.name : C.you) : esc(h ? h.type : p.name))(deskHelpers.find(x => x.id === deskTalkSub))}${m.at ? ' · ' + esc(when(m.at)) : ''}</small></div>`).join('');
+}
+// the agent itself and each of its helpers (subagents), newest first; a dot marks the ones still working
+function deskHelpersHtml() {
+  const C = T.chat; if (!deskHelpers.length) return '';
+  const cur = deskHelpers.find(h => h.id === deskTalkSub);
+  return `<div class="phelpers"><button class="${deskTalkSub ? '' : 'on'}" data-psubag="">${esc(C.main)}</button>${deskHelpers.map(h => `<button class="${h.id === deskTalkSub ? 'on' : ''}" data-psubag="${esc(h.id)}" title="${esc(h.what)}">${h.live ? '● ' : ''}${esc(h.type)}</button>`).join('')}</div>
+    ${cur ? `<p class="note">🤖 ${esc(C.helperOf(cur.type))}${cur.what ? ': ' + esc(cur.what) : ''}</p>` : `<p class="note">${esc(C.helpers(deskHelpers.length))}</p>`}`;
+}
+async function deskLoadTalk(p, toEnd) {
+  if (deskTalkBusy) return; deskTalkBusy = true;
+  const id = p.id, r = await fetch(`api/talk?id=${encodeURIComponent(id)}&q=${encodeURIComponent(deskTalkQ)}&sub=${encodeURIComponent(deskTalkSub)}`).then(x => x.json()).catch(() => ({ ok: false, reason: 'unknown' }));
+  deskTalkBusy = false;
+  if (selected !== id || deskSub !== 'talk') return;
+  deskTalk = r; deskTalkFor = id; if (r.helpers) deskHelpers = r.helpers;
+  const hb = document.getElementById('ptalk-helpers'); if (hb) hb.innerHTML = deskHelpersHtml();
+  const box = panelBody.querySelector('.ptalk-box'); if (box) box.hidden = !!deskTalkSub; // a helper takes no messages
+  const list = document.getElementById('ptalk-list');
+  const atEnd = panel.scrollHeight - panel.scrollTop - panel.clientHeight < 140;
+  if (list) list.innerHTML = deskTalkList(p);
+  if (list && (toEnd || atEnd) && !deskTalkQ) panel.scrollTop = panel.scrollHeight;
+}
+// called by renderPanel: draws the conversation view and returns true, or false for the summary
+function deskTalkOn(p) {
+  if (deskSub !== 'talk' || (data && data.privacy)) return false;
+  const C = T.chat, key = `${p.state}|${p.lastReplyAt}|${p.lastPromptAt}`;
+  if (deskTalkFor !== p.id) { deskTalk = null; deskTalkQ = ''; deskTalkKey = ''; deskTalkDrawn = ''; deskTalkSub = ''; deskHelpers = []; }
+  const shell = `${p.id}|${p.state}|${deskCanMsg(p)}|${lang}`;
+  if (shell !== deskTalkDrawn || !document.getElementById('ptalk-list')) { // the frame only when it changes; the list fills in place
+    deskTalkDrawn = shell;
+    panelBody.innerHTML = `<header class="ph"><div class="ph-face"></div><div><h2>${esc(p.name)}</h2><p class="sub">${esc(p.title || '—')}</p>
+      <div class="pills"><span class="pill" style="background:${agentOf(p).color}">${esc(agentOf(p).label)}</span><span class="pill" style="background:${KIND_COLOR[p.state] || '#888'}">${esc(T.states[p.state] || p.state)}</span></div></div></header>
+      ${deskTabsHtml()}<div id="ptalk-helpers">${deskHelpersHtml()}</div><input type="search" class="ptalk-q" data-ptalkq placeholder="${esc(C.search)}" value="${esc(deskTalkQ)}"><div id="ptalk-list">${deskTalkList(p)}</div>
+      <div class="card ptalk-box"${deskTalkSub ? ' hidden' : ''}>${deskCanMsg(p) ? `<textarea data-ptalk-text rows="3" placeholder="${esc(C.write)}"></textarea><p><button class="btn small" data-ptalk-send="${esc(p.id)}">➤ ${esc(C.send)}</button> <small class="note" data-ptalk-msg></small></p>` : `<p class="note">${esc(C.onlyIdle)}</p>`}</div>`;
+    panelBody.querySelector('.ph-face').appendChild(Art.portrait(p.id, p.state === 'needs_you' ? 'open' : null));
+  }
+  if (key !== deskTalkKey || !deskTalk) { const first = !deskTalk; deskTalkKey = key; deskLoadTalk(p, first); }
+  return true;
+}
+panelBody.addEventListener('click', async e => {
+  const t = e.target.closest('[data-psub]');
+  if (t) { deskSub = t.dataset.psub; deskTalkDrawn = ''; deskTalk = null; deskTalkKey = ''; renderPanel(); return; }
+  const sa = e.target.closest('[data-psubag]');
+  if (sa) { deskTalkSub = sa.dataset.psubag; deskTalk = null; const p = data && data.people.find(x => x.id === selected); const list = document.getElementById('ptalk-list'); if (list) list.innerHTML = '<p class="note">…</p>'; if (p) deskLoadTalk(p, true); return; }
+  const s = e.target.closest('[data-ptalk-send]'); if (!s) return;
+  const ta = panelBody.querySelector('[data-ptalk-text]'), m = panelBody.querySelector('[data-ptalk-msg]'), text = ta ? ta.value.trim() : '';
+  if (!text) return ta && ta.focus();
+  s.disabled = true;
+  const r = await fetch('api/reply', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Coworking': '1' }, body: JSON.stringify({ id: s.dataset.ptalkSend, text }) }).then(x => x.json()).catch(() => ({ ok: false, reason: 'unknown' }));
+  s.disabled = false;
+  if (r.ok) { ta.value = ''; ta.blur(); }
+  if (m) m.textContent = r.ok ? '✓' : '⚠ ' + (T.chat.fail[r.reason] || r.reason || '?');
+});
+panelBody.addEventListener('input', e => {
+  if (!e.target.matches('[data-ptalkq]')) return;
+  clearTimeout(deskTalkTimer);
+  deskTalkTimer = setTimeout(() => { deskTalkQ = e.target.value.trim().slice(0, 100); const p = data && data.people.find(x => x.id === selected); if (p) deskLoadTalk(p, !deskTalkQ); }, 350);
+});
+
+// ---------------- everyone in the office ----------------
+// Opened from the count under the office name: every agent with its state, and the helpers working for it right now.
+// An agent opens its panel; a helper opens that agent's conversation on the helper.
+function renderCrew() {
+  const C = T.crew, body = reportEl.querySelector('.report-body'), live = data.people.filter(p => !p.leaving);
+  const order = { needs_you: 0, waiting: 0, idle: 2, asleep: 3 }, rank = p => order[p.state] ?? 1;
+  const rows = live.slice().sort((a, b) => rank(a) - rank(b) || a.name.localeCompare(b.name)).map(p => `<li class="crew-row">
+    <button class="crew-agent" data-crew="${esc(p.id)}"><span class="crew-face" data-crew-face="${esc(p.id)}"></span><span class="crew-txt"><b>${esc(p.name)}</b><small>${esc(agentOf(p).label)}${p.repo ? ' · ' + esc(p.repo.name) : ''}${p.title ? ' · ' + esc(p.title) : ''}</small></span><span class="pill" style="background:${KIND_COLOR[p.state] || '#888'}">${esc(T.states[p.state] || p.state)}</span></button>
+    ${(p.subagents || []).length ? `<ul class="crew-subs">${p.subagents.map(a => `<li><button data-crew="${esc(p.id)}" data-crew-sub="${esc(a.id)}">🤖 <b>${esc(a.type)}</b> ${esc(a.description || '')}${a.doing ? `<small> · ${esc(a.doing)}</small>` : ''}</button></li>`).join('')}</ul>` : ''}</li>`).join('');
+  const n = live.reduce((k, p) => k + (p.subagents || []).length, 0);
+  body.innerHTML = tabsHtml() + `<h2>👥 ${esc(C.title)}</h2><p class="sub">${esc(C.sub(live.length, n))}</p><ul class="crew-list">${rows || `<li class="note">—</li>`}</ul><p class="note">${esc(C.note)}</p>`;
+  body.querySelectorAll('[data-crew-face]').forEach(el => { try { el.appendChild(Art.portrait(el.dataset.crewFace)); } catch {} });
+}
+reportEl.addEventListener('click', e => {
+  if (reportTab !== 'crew') return;
+  const b = e.target.closest('[data-crew]'); if (!b) return;
+  const id = b.dataset.crew, sub = b.dataset.crewSub || '';
+  closeReport();
+  if (sub) { deskSub = 'talk'; deskTalkFor = id; deskTalkSub = sub; deskTalk = null; deskTalkKey = ''; deskTalkDrawn = ''; } else deskSub = 'info';
+  showPerson(id);
+});
+document.addEventListener('click', e => { if (e.target.closest('#host .crew')) openReport('crew'); });

package/public/js/tasks.js

@@ -359,6 +359,7 @@ function shipHtml(t, c) {
 }
 const shipApi = body => fetch('api/task-ship', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Coworking': '1' }, body: JSON.stringify(body) }).then(r => r.json()).catch(() => ({ ok: false, reason: 'unknown' }));
 function renderTasks() {
+  if (boardDrag) return; // never redraw under a card being dragged
   const X = TT(), body = reportEl.querySelector('.report-body');
   if (taskSel && taskDetail) return renderTaskDetail(body);
   const draft = reportEl.querySelector('.tform') ? tfVal() : null; // what was typed survives the refresh
@@ -369,15 +370,50 @@ function renderTaskList(X, body) {
   const order = ['blocked', 'running', 'pending', 'failed', 'done', 'cancelled'], list = taskData.tasks.slice().sort((a, b) => order.indexOf(a.state) - order.indexOf(b.state) || b.priority - a.priority || b.updated - a.updated);
   const kindL = { task: X.kinds.task, session: X.kinds.session, today: X.kinds.today, month: X.kinds.month };
   body.innerHTML = tabsHtml() + `<p class="sub">${esc(X.sub)}</p>${taskData.privacy ? `<p class="note">🔒 ${esc(X.privateNote)}</p>` : ''}${taskData.dayStopped ? `<div class="talert">⏸ ${esc(X.dayStopped(fmtUSD(taskData.spentToday || 0), fmtUSD(taskData.settings.dayBudget || 0)))}</div>` : ''}` + formHtml() + settingsHtml()
-    + `<div class="trow"><label style="flex:2">🔎 <input data-tsearch placeholder="${esc(X.search)}"></label></div>`
+    + `<div class="trow"><label style="flex:2">🔎 <input data-tsearch placeholder="${esc(X.search)}"></label><span class="tview">${[['list', '☰', X.board.list], ['board', '▦', X.board.board]].map(([k, i, l]) => `<button class="btn small ${taskView === k ? '' : 'ghost'}" data-tview="${k}">${i} ${esc(l)}</button>`).join('')}</span></div>`
     + (taskSaid.length ? `<h4 class="tsaid-h">💬 ${esc(X.saidTitle(taskSaid.length))}</h4><ul class="queue tsaid">${taskSaid.map(r => { const live = data && data.people.some(p => p.id === r.id); return `<li ${live ? `data-tperson="${esc(r.id)}"` : ''}><span><small>${esc(r.agent)} · ${esc(r.role === 'user' ? X.saidYou : X.saidAgent)} · ${esc(ago(Date.now() - r.at))}${live ? ' · ' + esc(X.saidLive) : ''}</small><br>${esc(r.snippet)}</span></li>`; }).join('')}</ul>` : '')
     + (taskSearch.length ? `<ul class="queue">${taskSearch.map(r => `<li ${r.kind === 'task' ? `data-topen="${esc(r.id)}"` : r.live ? `data-tperson="${esc(r.id)}"` : ''}><b>${esc(r.title)}</b> <small>${esc(kindL[r.kind] || r.kind)} · ${esc(r.agent || '')}${r.state ? ' · ' + esc(X.states[r.state] || T.states[r.state] || r.state) : ''}</small></li>`).join('')}</ul>` : '')
-    + (list.length ? [['need', ['blocked', 'failed']], ['active', ['running', 'pending']], ['done', ['done', 'cancelled']]].map(([g, sts]) => {
+    + (list.length && taskView === 'board' ? boardHtml(list) : list.length ? [['need', ['blocked', 'failed']], ['active', ['running', 'pending']], ['done', ['done', 'cancelled']]].map(([g, sts]) => {
       const items = list.filter(t => sts.includes(t.state)); if (!items.length) return '';
       const ul = `<ul class="queue tlist">${items.map(rowHtml).join('')}</ul>`;
       return g === 'done' ? `<details class="tgroup"><summary><h4>${esc(X.groups[g])} <small>${items.length}</small></h4></summary>${ul}</details>` : `<div class="tgroup"><h4>${esc(X.groups[g])} <small>${items.length}</small></h4>${ul}</div>`;
     }).join('') : `<p class="note">${esc(X.empty)}</p>`) + rankingHtml() + compareHtml();
 }
+// ---- the tasks as a board: queue, running, waiting on you, done; drag a card to retry, conclude or cancel it ----
+let taskView = store.get('taskView', 'list'), boardDrag = null;
+const BOARD = [['queue', ['pending']], ['running', ['running']], ['you', ['blocked', 'failed']], ['done', ['done', 'cancelled']]];
+// what dropping a task on a column does (null: not allowed there)
+function boardMove(t, to) {
+  if (to === 'running' && ['blocked', 'failed'].includes(t.state)) return 'retry';
+  if (to === 'done' && t.state === 'blocked') return 'conclude';
+  if (to === 'done' && ['pending', 'running', 'failed'].includes(t.state)) return 'cancel';
+  return null;
+}
+function boardHtml(list) {
+  const X = TT(), B = X.board;
+  const card = t => `<div class="bcard st-${t.state}" draggable="true" data-bdrag="${esc(t.id)}" data-topen="${esc(t.id)}"><b>${esc(t.title)}</b>
+    <small>${esc(t.agent)} · ${t.costUnknown && !t.cost ? '?' : esc(fmtUSD(t.cost || 0))} · ${esc(ago(Date.now() - t.updated))}</small>${t.ask ? `<span class="bask">🔐 ${esc(t.ask.tool)}</span>` : t.reason && ['blocked', 'failed'].includes(t.state) ? `<span class="bwhy">${esc(X.reasons[t.reason] || t.reason)}</span>` : ''}</div>`;
+  return `<p class="note">${esc(B.hint)}</p><div class="board">${BOARD.map(([k, sts]) => { const items = list.filter(t => sts.includes(t.state)), shown = k === 'done' ? items.slice(0, 12) : items;
+    return `<div class="bcol" data-bcol="${k}"><h4>${esc(B.cols[k])} <small>${items.length}</small></h4>${shown.map(card).join('') || `<p class="note bempty">—</p>`}</div>`; }).join('')}</div>`;
+}
+reportEl.addEventListener('dragstart', e => {
+  const c = e.target.closest && e.target.closest('[data-bdrag]'); if (!c || reportTab !== 'tasks') return;
+  const t = taskData.tasks.find(x => x.id === c.dataset.bdrag); if (!t) return;
+  boardDrag = t; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', t.id); c.classList.add('dragging');
+  reportEl.querySelectorAll('[data-bcol]').forEach(col => col.classList.toggle('bok', !!boardMove(t, col.dataset.bcol)));
+});
+reportEl.addEventListener('dragover', e => { const col = e.target.closest && e.target.closest('[data-bcol]'); if (boardDrag && col && boardMove(boardDrag, col.dataset.bcol)) { e.preventDefault(); col.classList.add('bover'); } });
+reportEl.addEventListener('dragleave', e => { const col = e.target.closest && e.target.closest('[data-bcol]'); if (col && !col.contains(e.relatedTarget)) col.classList.remove('bover'); });
+reportEl.addEventListener('dragend', () => { boardDrag = null; reportEl.querySelectorAll('.bok,.bover,.dragging').forEach(x => x.classList.remove('bok', 'bover', 'dragging')); });
+reportEl.addEventListener('drop', async e => {
+  const col = e.target.closest && e.target.closest('[data-bcol]'), t = boardDrag; if (!col || !t) return;
+  e.preventDefault(); boardDrag = null;
+  const op = boardMove(t, col.dataset.bcol); reportEl.querySelectorAll('.bok,.bover,.dragging').forEach(x => x.classList.remove('bok', 'bover', 'dragging'));
+  if (!op || (op === 'cancel' && !confirm(TT().cancelSure))) return;
+  const r = await api('api/tasks', { op, id: t.id });
+  if (!r.ok) toast(`<b>${esc(t.title)}</b>${esc(tFail(r))}`, 'warn');
+  await pollTasks(); renderTasks();
+});
 function renderTaskDetail(body) {
   const X = TT(), t = taskDetail, ev = t.events || [], live = t.state === 'running';
   const evHtml = ev.slice(-60).reverse().map(e => {
@@ -434,6 +470,7 @@ reportEl.addEventListener('click', async e => {
     const ti = reportEl.querySelector('[data-tf="title"]'); if (ti && !ti.value) ti.value = x.name; return;
   }
   const per = e.target.closest('[data-tperiod]'); if (per) { taskPeriod = per.dataset.tperiod; return renderTasks(); }
+  const tv = e.target.closest('[data-tview]'); if (tv) { taskView = tv.dataset.tview; store.set('taskView', taskView); return renderTasks(); }
   const op1 = e.target.closest('[data-topen]'); if (op1) { taskDiff = null; return loadTask(op1.dataset.topen); }
   const pp = e.target.closest('[data-tperson]'); if (pp) { closeReport(); selected = pp.dataset.tperson; return renderPanel(); }
   const b = e.target.closest('[data-tact]'); if (!b) return;
@@ -585,7 +622,7 @@ 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', '💲'], ['feed', '🗂'], ['notices', '🔔'], ['version', '🚀']]) {
+  if (menu) for (const [tab, icon] of [['tv', '📺'], ['phone', '📱'], ['broadcast', '📣'], ['repos', '📦'], ['tasks', '📋'], ['usage', '💲'], ['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.addEventListener('click', () => { if (typeof setMenu === 'function') setMenu(false); if (tab === 'tv') return setTv(true); openReport(tab); });
@@ -694,7 +731,7 @@ 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; }
-  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><p class="note">${esc(P.warn)}</p>`;
+  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>`);
   const V = T.visit; visitUntil = d.visit ? d.visit.until : 0;