@aksp/opencrew 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to opencrew are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/).
 
+## [1.7.0] — 2026-10-06
+
+Fase E1 "Escritório ao vivo — a equipe trabalhando, em 8 bits"
+(`specs/fase-e1-escritorio-ao-vivo.md`). Chega a quem já usa com um
+`npx @aksp/opencrew@latest update`.
+
+### Added
+- **Escritório ao vivo.** Uma página em pixel-art, aberta no navegador, mostra a crew
+  trabalhando: cada agente na sua mesa, digitando na vez dele, levando o papel ao colega na
+  passagem de bastão, de mão levantada quando espera a sua resposta, com ✓ quando termina e "!"
+  quando falha. Ao lado, o passo atual, a lista dos agentes com o status por extenso e o que cada
+  um fez, e a última passagem de bastão. O título da aba acompanha a execução.
+- **`/opencrew dashboard`** liga o Escritório, sobe a página e mostra o endereço
+  (`http://127.0.0.1:4747`, ou a porta livre seguinte); repetir o comando devolve o mesmo
+  endereço. **`/opencrew dashboard off`** desliga. Continua desligado por padrão.
+- Roda só no seu computador, sem internet e sem medição: o servidor
+  (`_opencrew/core/scripts/escritorio.mjs`) escuta só em `127.0.0.1`, só lê e não escreve em disco.
+- Sem execução nenhuma, a página roda uma demonstração e troca sozinha para a execução real
+  quando ela aparece (`?demo` no endereço força a demonstração). Com mais de uma crew, mostra a
+  de atualização mais recente e um seletor com as outras.
+- A página não mente sobre o que não sabe: execução há mais de 2 minutos sem novidade mostra há
+  quanto tempo foi a última atualização; há mais de 20, o agente sai da pose de digitar e aparece
+  "sem sinal". Servidor fora do ar: a página avisa e tenta de novo sozinha.
+
+### Changed
+- **Quem avisa o Escritório é um script, não a IA escrevendo JSON.** Com o Escritório ligado, o
+  runner roda um comando curto por passo (`_opencrew/core/scripts/estado.mjs`). Checkpoint, agente
+  pulado e execução que falha passam a aparecer; antes nunca eram gravados. Falha desse comando
+  não para a execução: o runner avisa uma vez e segue.
+- **Com o Escritório ligado, o estado final deixa de ser copiado para
+  `crews/<crew>/output/<run>/state.json`.** O estado da execução mora só em
+  `crews/<crew>/state.json`.
+- `state.json`: os agentes ganham os status `checkpoint` e `failed` e o campo `label`; a
+  execução ganha `checkpoint` e `failed`; `desk` e `delivering` deixam de ser gravados. Arquivo
+  gravado por versão anterior continua sendo lido pela página.
+- Os prompts de criar e de consertar crew não escrevem mais `state.json`.
+- README: a nota "o dashboard não é instalado" deu lugar à seção "Escritório ao vivo".
+
+### Removed
+- A pasta `dashboard/` do repositório (o desenho antigo, que nunca foi instalado pelo `init`). O
+  que servia migrou para `_opencrew/core/escritorio/`, sem os defeitos apontados na auditoria:
+  nome de agente entrava na página como HTML, o modo ao vivo lia o arquivo no lugar errado e a
+  página congelava se a primeira leitura falhasse.
+
+### Internal
+- `npm run verify`: o lint passa a cobrir `templates/_opencrew/core/escritorio/` (com os nomes
+  globais de navegador) e o alerta de tamanho mede os `.js` dessa pasta. Travas novas:
+  `tests/estado*.test.js`, `tests/escritorio*.test.js`, `tests/runtime-contracts-e1.test.js`,
+  `tests/docs-e1.test.js` e os cenários E1-07a, E1-07c e E1-upg nos testes de pacote, de
+  referências e de upgrade. A trava de conteúdo do mantenedor passa a ler também `.mjs` e `.css`.
+
 ## [1.6.3] — 2026-10-06
 
 **O Node mínimo subiu para o 20.17, numa versão de correção.** O pacote dizia 20.0, mas a lista

package/README.md

@@ -40,6 +40,9 @@ dentro da sua IDE.**
   termos que você proibiu e `[PREENCHER]` pendentes, e aponta afirmações a confirmar.
   Bloqueio não passa, seja qual for a nota do revisor. A crew não inventa casos nem números:
   quando falta um dado real, ela pergunta na aprovação final.
+- 🖥️ **Escritório ao vivo** — veja a equipe trabalhando numa sala em pixel-art, no navegador:
+  quem está digitando, quem passou o bastão, quem espera a sua resposta. Opcional, desligado por
+  padrão, só neste computador. Liga com `/opencrew dashboard`.
 - 📂 **Crew que conhece o projeto** — liste em `fontes:` os arquivos e pastas do seu projeto
   (decisões, calendário, manual de marca) e a crew os lê em todo run, tratando-os como verdade.
   Reorganizou as pastas? No início do run ela confere os caminhos, acha para onde o arquivo foi
@@ -175,6 +178,8 @@ meu-projeto/
 │   │   ├── skills.engine.md      ← gerenciador de skills
 │   │   ├── architect.agent.yaml  ← definição do Arquiteto
 │   │   ├── best-practices/       ← 22 guias de melhores práticas + _catalog.yaml
+│   │   ├── scripts/              ← verificador, conferência de fontes e os scripts do Escritório
+│   │   ├── escritorio/           ← página do Escritório ao vivo (abre com /opencrew dashboard)
 │   │   └── prompts/              ← 13 prompts de fase (discovery, design, build, etc.)
 │   ├── agents/                   ← 5 agentes base compartilhados
 │   │   ├── researcher.agent.md
@@ -184,7 +189,7 @@ meu-projeto/
 │   │   └── strategist.agent.md
 │   ├── _memory/
 │   │   ├── company.md            ← perfil da sua empresa (onboarding)
-│   │   └── preferences.md        ← idioma, tier padrão, dashboard
+│   │   └── preferences.md        ← idioma, tier padrão, Escritório ligado ou desligado
 │   └── .opencrew-version
 │
 ├── crews/                        ← suas crews vivem aqui
@@ -202,9 +207,47 @@ meu-projeto/
 │   └── ...
 ```
 
-> O dashboard visual (`dashboard/index.html`) **não é instalado** pelo `init` — ele vive
-> só no repositório do OpenCrew e ainda é experimental (decisão de publicar ou remover:
-> fase U3a — ver `IDEIAS.md` no repositório).
+---
+
+## Escritório ao vivo
+
+Quer ver a equipe trabalhando? O **Escritório** é uma página em pixel-art, aberta no navegador,
+em que cada agente tem a sua mesa: digita quando é a vez dele, leva o papel ao colega na passagem
+de bastão e levanta a mão quando espera uma resposta sua. Ao lado do desenho ficam o passo atual,
+a lista dos agentes (com o status por extenso e o que cada um fez) e a última passagem de bastão.
+
+**Como abrir:** no chat da sua IDE, digite `/opencrew dashboard`. O comando liga o Escritório,
+sobe a página e mostra o endereço — `http://127.0.0.1:4747`, ou a porta livre seguinte. A próxima
+execução de crew aparece ali; enquanto não há nenhuma, a página roda uma demonstração. Repetir o
+comando é seguro: ele devolve o mesmo endereço.
+
+Se a sua IDE não roda comando em segundo plano, ela mostra o comando para você rodar em outro
+terminal, na pasta do projeto:
+
+```bash
+node _opencrew/core/scripts/escritorio.mjs            # Ctrl+C para fechar
+node _opencrew/core/scripts/escritorio.mjs --porta 5000
+```
+
+Para desligar: `/opencrew dashboard off`.
+
+O que vale saber antes de ligar:
+
+- **Vem desligado.** Sem o `/opencrew dashboard`, nada muda nas suas execuções.
+- **Roda só neste computador, sem internet e sem medição.** A página é servida em `127.0.0.1`,
+  só lê o estado das suas crews (`crews/<crew>/state.json`), não carrega nada de fora e não envia
+  dado nenhum para lugar nenhum.
+- **Com ele ligado, cada passo custa um comando curto a mais.** É assim que a IA avisa o que está
+  fazendo: um comando de terminal por passo. Em IDE que pede aprovação a cada comando, libere o
+  `estado.mjs` uma vez.
+- **A tela mostra o que a IA avisa, e pode atrasar.** Se a IA pular um aviso, o desenho só se
+  acerta no passo seguinte. Depois de 2 minutos sem novidade a página diz há quanto tempo foi a
+  última atualização; depois de 20, o agente aparece "sem sinal" — o que não quer dizer que
+  travou: um passo longo é normal.
+- **O Escritório nunca para a execução.** Se o aviso falhar, a crew segue trabalhando.
+- **Até 12 mesas.** Numa crew maior, os agentes a mais aparecem só na lista ao lado.
+
+Quem já usa o OpenCrew recebe o Escritório com um `npx @aksp/opencrew@latest update`.
 
 ---
 
@@ -284,7 +327,9 @@ npx @aksp/opencrew update --check
 | `/opencrew delete <nome>` | Remove uma crew |
 | `/opencrew skills` | Navega, instala ou remove skills |
 | `/opencrew install <skill>` | Instala uma skill do catálogo |
-| `/opencrew settings` | Altera preferências (idioma, tier, dashboard) |
+| `/opencrew settings` | Altera preferências (idioma, tier, Escritório) |
+| `/opencrew dashboard` | Liga e abre o Escritório ao vivo (a equipe trabalhando, no navegador) |
+| `/opencrew dashboard off` | Desliga o Escritório |
 | `/opencrew show-company` | Mostra o perfil da empresa |
 | `/opencrew edit-company` | Reconfigura o perfil da empresa |
 | `/opencrew help` | Mostra a lista de comandos |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aksp/opencrew",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },

package/templates/AGENTS.md

@@ -58,6 +58,8 @@ Route input to the matching action:
 | `/opencrew edit-company` | Re-run company profile setup |
 | `/opencrew show-company` | Display company.md contents |
 | `/opencrew settings` | Show/edit preferences.md |
+| `/opencrew dashboard` | Turn on and open the Escritório (live view) — see "Dashboard (Optional)" |
+| `/opencrew dashboard off` | Turn the Escritório off — see "Dashboard (Optional)" |
 | `/opencrew reset` | Confirm and reset all configuration |
 | Natural language about crews | Infer intent and route accordingly |
 
@@ -90,12 +92,24 @@ When running a crew:
 
 ## Dashboard (Optional)
 
-The dashboard is an optional animated view of a crew run (`dashboard/index.html`).
-It is **disabled by default**; most installs never use it. Toggle it via
-`Dashboard: enabled|disabled` in `_opencrew/_memory/preferences.md` (editable via
-`/opencrew settings`). When disabled, the runner never writes `state.json`; when
-enabled, it writes `crews/{name}/state.json` before each step and at every handoff
-(see `_opencrew/core/runner.pipeline.md`).
+The dashboard is the **Escritório**: a local page that shows the crew at work, step by step.
+It is **disabled by default**. The switch is the `Dashboard` line of
+`_opencrew/_memory/preferences.md`; while it says `enabled`, the Pipeline Runner reports each
+step with one short command (see `_opencrew/core/runner.pipeline.md`).
+
+**`/opencrew dashboard`** — in this order:
+1. Write `- **Dashboard:** enabled` in `_opencrew/_memory/preferences.md`, changing only that
+   line (if the file has no `Dashboard` line, add it at the end). Leave the rest of the file as is.
+2. Start `node _opencrew/core/scripts/escritorio.mjs` in the background, from the project root.
+   The line it prints carries the address (`http://127.0.0.1:<port>`; the port may vary).
+3. Show the address and tell the user that the next crew run appears there.
+
+If your IDE cannot keep a process running in the background, do step 1 and show the user the
+command of step 2 to run in another terminal. Running `/opencrew dashboard` again is safe: the
+script answers with the same address instead of opening a second page.
+
+**`/opencrew dashboard off`** — write `- **Dashboard:** disabled` the same way (only that line)
+and touch nothing else: stop no process, delete no file.
 
 ## Language Handling
 

package/templates/_opencrew/.opencrew-version

@@ -1 +1 @@
-1.6.3
+1.7.0

package/templates/_opencrew/core/escritorio/animacao.js

@@ -0,0 +1,64 @@
+// O que anima (regra 28): a passagem de bastão e a comemoração nascem da diferença entre duas
+// leituras da mesma crew, nunca de um status gravado. `transicao` anota no modelo a hora em que
+// cada uma começou; `quadro` (em quadro.js) desenha pelo tempo decorrido desde então.
+// Puro: sem DOM, sem relógio, sem rede. A hora entra por parâmetro.
+// Spec: fase-e1-escritorio-ao-vivo.md, regra 28 (repositório do OpenCrew).
+
+/** A entrega: ida até a frente da mesa de quem recebe, com o papel, e volta até sentar. */
+export const IDA_MS = 2000;
+export const VOLTA_MS = 2000;
+/** Quanto dura a comemoração de uma execução concluída. */
+export const COMEMORACAO_MS = 4000;
+/** Quem digita troca de pose a cada 0,3 s; quem anda, a cada 0,15 s. */
+export const DIGITAR_MS = 300;
+export const ANDAR_MS = 150;
+
+/** Nada em curso: é o que vale na primeira leitura de cada crew. */
+export const SEM_ANIMACAO = Object.freeze({ entrega: null, comemoracao: null });
+
+/** As duas leituras têm estado e são da mesma crew (ou as duas são da demonstração). */
+function mesmaCrew(anterior, atual) {
+  if (!anterior || !atual || anterior.semEstado || atual.semEstado) return false;
+  return Boolean(anterior.demo) === Boolean(atual.demo) && anterior.crew === atual.crew;
+}
+
+/** A passagem de bastão cuja data a leitura anterior não trazia; senão (ou sem data), `null`. */
+function entregaNova(anterior, atual, agoraMs) {
+  const { passagem } = atual;
+  if (!passagem || passagem.completedAt === (anterior.passagem?.completedAt ?? '')) return null;
+  return { deId: passagem.deId, paraId: passagem.paraId, inicioMs: agoraMs };
+}
+
+/** Começa quando a execução passa a `completed`, segue enquanto ela continuar assim. */
+function comemoracaoDe(anterior, atual, agoraMs) {
+  if (atual.execucao !== 'completed') return null;
+  return anterior.execucao === 'completed' ? (anterior.animacao?.comemoracao ?? null) : { inicioMs: agoraMs };
+}
+
+/**
+ * Compara duas leituras e devolve a atual com o que está animando. A página chama a cada leitura
+ * (cada consulta ao servidor, cada passo da demonstração), e não só quando vai pintar: assim a
+ * entrega que acontece com a aba oculta já aparece terminada na volta.
+ * @param {object|null} anterior o que esta função devolveu na leitura anterior; `null` na primeira
+ * @param {object} atual o modelo da leitura atual (de `montarPagina` ou `montarModelo`)
+ * @param {number} agoraMs a hora desta leitura, em milissegundos, no mesmo relógio de `quadro`
+ * @returns {object} `atual` mais `animacao`: `{ entrega, comemoracao }` · `entrega`:
+ *   `{ deId, paraId, inicioMs }` desde que `passagem.completedAt` mudou entre duas leituras da
+ *   mesma crew, ou `null`; uma passagem nova substitui a que está em curso, e qualquer outra
+ *   mudança de estado a deixa como está · `comemoracao`: `{ inicioMs }` desde que a execução
+ *   passou a `completed`, ou `null` · na primeira leitura de uma crew (abrir, trocar de crew,
+ *   sair da demonstração, voltar de "sem estado"), as duas são `null` · `animacao` só guarda
+ *   quando cada uma começou, e a entrega fica anotada depois de terminar: quem diz o que ainda
+ *   se move num instante é `quadro`
+ */
+export function transicao(anterior, atual, agoraMs) {
+  if (!mesmaCrew(anterior, atual)) return { ...atual, animacao: SEM_ANIMACAO };
+  const emCurso = anterior.animacao?.entrega ?? null;
+  return {
+    ...atual,
+    animacao: {
+      entrega: entregaNova(anterior, atual, agoraMs) ?? emCurso,
+      comemoracao: comemoracaoDe(anterior, atual, agoraMs),
+    },
+  };
+}

package/templates/_opencrew/core/escritorio/app.js

@@ -0,0 +1,137 @@
+// A página do escritório: pergunta o estado ao servidor a cada segundo (e na hora, ao voltar para
+// a aba), entrega a resposta ao modelo e aplica o que ele devolve — o desenho no canvas, os
+// rótulos por cima e o painel em volta. Consulta que falha mantém o último estado bom e liga o
+// aviso; a página segue tentando, sem recarregar.
+// É o único módulo que toca na janela: o relógio, a rede, o endereço (`?demo`), o tamanho da tela
+// e a preferência "reduzir movimento" entram no modelo por parâmetro.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 20 a 23 e 28 (repositório do OpenCrew).
+import { ALTURA, LARGURA, MEMORIA_INICIAL, consultar, emExibicao, escala, escolher, montarPagina, quadro, transicao } from './modelo.js';
+import { animar } from './cena.js';
+import { criarPainel } from './painel.js';
+import { criarRotulos } from './rotulos.js';
+
+/** De quanto em quanto tempo a página pergunta o estado. */
+const INTERVALO_MS = 1000;
+/** Consulta sem resposta neste prazo é abandonada e conta como falha: a seguinte sai no ritmo normal. */
+const PRAZO_MS = 4000;
+/** Na demonstração nenhuma consulta traz o passo seguinte: o roteiro é relido neste ritmo. */
+const RITMO_DA_DEMO_MS = 200;
+/** Relativo à página: o servidor só atende o próprio endereço. */
+const ENDERECO = 'estado';
+
+/** Regra 16: o canvas tem 320·N × 180·N pixels de verdade e, na página, o tamanho que `escala` devolve. */
+function ajustar(p) {
+  const [moldura, sala, tela] = ['moldura', 'sala', 'tela'].map(p.el);
+  p.razao = p.janela.devicePixelRatio;
+  const { n, largura, altura } = escala(moldura.clientWidth, moldura.clientHeight, p.razao);
+  if (tela.width !== LARGURA * n) Object.assign(tela, { width: LARGURA * n, height: ALTURA * n });
+  sala.style.width = `${largura}px`;
+  sala.style.height = `${altura}px`;
+  // Quantos pixels da página vale um pixel lógico: o CSS dos rótulos acompanha a escala por aqui.
+  sala.style.setProperty('--u', String(largura / LARGURA));
+}
+
+/**
+ * Uma leitura: monta o modelo deste instante, compara com a leitura anterior (é daí que saem a
+ * entrega e a comemoração) e escreve a página. Na primeira, mostra a página e mede o canvas.
+ */
+function ler(p) {
+  const agora = Date.now();
+  const naDemo = emExibicao(p.memoria, { demo: p.demo }).modo === 'demo';
+  p.demoDesde = naDemo ? (p.demoDesde ?? agora) : null;
+  const opcoes = { agoraMs: agora, reduzirMovimento: p.menosMovimento.matches, demo: p.demo, decorridoDemoMs: naDemo ? agora - p.demoDesde : 0 };
+  const primeira = p.leitura === null;
+  p.leitura = transicao(p.leitura, montarPagina(p.memoria, opcoes), agora);
+  p.lidaEm = agora;
+  p.painel.atualizar(p.leitura);
+  p.rotulos.atualizar(p.leitura.agentes);
+  if (!primeira) return;
+  p.el('pagina').hidden = false;
+  ajustar(p);
+}
+
+/** A resposta de `/estado`, ou `null` se a consulta falhou, demorou demais ou veio inválida. */
+async function perguntar(p) {
+  const corte = new AbortController();
+  const prazo = p.janela.setTimeout(() => corte.abort(), PRAZO_MS);
+  try {
+    const resposta = await p.janela.fetch(ENDERECO, { cache: 'no-store', signal: corte.signal });
+    return resposta.ok ? await resposta.json() : null;
+  } catch {
+    return null;
+  } finally {
+    p.janela.clearTimeout(prazo);
+  }
+}
+
+/** Regra 20: uma consulta por vez; a que falha entra na memória como falha, e a página não para. */
+async function consultarServidor(p) {
+  if (p.consultando) return;
+  p.consultando = true;
+  const resposta = await perguntar(p);
+  p.consultando = false;
+  p.memoria = consultar(p.memoria ?? MEMORIA_INICIAL, resposta);
+  ler(p);
+}
+
+/** Regra 22: a escolha do usuário no seletor vale até ele trocar. */
+function escolherCrew(p, crew) {
+  if (!p.memoria) return;
+  p.memoria = escolher(p.memoria, crew);
+  ler(p);
+}
+
+/** Os bonecos deste instante, para a cena pintar; `null` antes da primeira leitura. */
+function quadroAgora(p) {
+  if (!p.leitura) return null;
+  const agora = Date.now();
+  if (p.leitura.modo === 'demo' && agora - p.lidaEm >= RITMO_DA_DEMO_MS) ler(p);
+  if (p.janela.devicePixelRatio !== p.razao) ajustar(p);
+  const bonecos = quadro(p.leitura, agora);
+  p.rotulos.acompanhar(bonecos);
+  return bonecos;
+}
+
+/** O que a página guarda entre uma consulta e a seguinte. */
+function criarPagina(janela) {
+  const documento = janela.document;
+  const el = (id) => documento.getElementById(id);
+  const p = {
+    janela,
+    documento,
+    el,
+    demo: new URLSearchParams(janela.location.search).has('demo'),
+    menosMovimento: janela.matchMedia('(prefers-reduced-motion: reduce)'),
+    rotulos: criarRotulos(el('rotulos'), documento),
+    memoria: null, // as consultas ao servidor; `null` até a primeira voltar
+    leitura: null, // o modelo da última leitura, com o que está animando
+    lidaEm: 0,
+    demoDesde: null, // quando a demonstração entrou na tela
+    consultando: false,
+    razao: 0, // a razão de pixels com que o canvas foi medido
+  };
+  p.painel = criarPainel(documento, (crew) => escolherCrew(p, crew));
+  return p;
+}
+
+/**
+ * Liga a página a uma janela. A frase de abertura, que já está no HTML, só some depois do
+ * primeiro desenho: se algo aqui não carregar ou não rodar, ela continua na tela.
+ * @param {Window} janela a janela do navegador (nos testes, uma de mentira)
+ */
+export function iniciar(janela) {
+  const p = criarPagina(janela);
+  const reajustar = () => ajustar(p);
+  janela.addEventListener('resize', reajustar);
+  if (janela.ResizeObserver) new janela.ResizeObserver(reajustar).observe(p.el('moldura'));
+  p.documento.addEventListener('visibilitychange', () => {
+    if (!p.documento.hidden) consultarServidor(p);
+  });
+  janela.setInterval(() => consultarServidor(p), INTERVALO_MS);
+  animar(janela, p.el('tela'), () => quadroAgora(p), () => {
+    p.el('abertura').hidden = true;
+  });
+  consultarServidor(p);
+}
+
+if (typeof window !== 'undefined') iniciar(window);

package/templates/_opencrew/core/escritorio/cena.js

@@ -0,0 +1,132 @@
+// A cena: pinta no canvas, em pixel lógico (320×180), o quadro que o modelo calculou — a sala, a
+// mesa de cada agente do elenco com o monitor, e os bonecos. Nada aqui decide pose, posição ou
+// cor de monitor: isso chega pronto de `quadro`. A cena só preenche retângulos; nenhum texto
+// entra no canvas (nome e balão são elementos da página, numa camada por cima).
+// O laço de animação pede um quadro por vez ao navegador e só pinta de novo quando ele muda.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 18, 19 e 28 (repositório do OpenCrew).
+import { ALTURA, BONECO, COLUNAS, LARGURA, LARGURA_COLUNA, TOPO } from './modelo.js';
+import { coresDoBoneco, linhasDoBoneco, retangulos } from './sprites.js';
+import { JANELA, LADRILHO, LADRILHO_ESCURO, PAREDE, PLANTA, RELOGIO } from './sprites-sala.js';
+import {
+  MESA, MESA_ACIMA, MONITOR, MONITOR_EM, SINAL_DUVIDA, SINAL_FALHA, SINAL_FEITO, SOMBRA,
+  TELA_AMBAR, TELA_EM, TELA_VERMELHA, TELAS_ACESAS,
+} from './sprites-mesa.js';
+
+/** Quem foi pulado aparece meio transparente. */
+const ALFA_DO_PULADO = 0.45;
+/** O sinal sobre a cabeça, por ação; quem entrega ou comemora não tem sinal. */
+const SINAIS = Object.freeze({ done: SINAL_FEITO, failed: SINAL_FALHA, 'sem-sinal': SINAL_DUVIDA });
+/** A tela do monitor, pela cor que o quadro manda pintar agora; apagado é o próprio monitor. */
+const TELAS = Object.freeze({
+  aceso: (fase) => TELAS_ACESAS[fase % TELAS_ACESAS.length],
+  ambar: () => TELA_AMBAR,
+  vermelho: () => TELA_VERMELHA,
+});
+
+const largura = (desenho) => desenho.linhas[0].length;
+const altura = (desenho) => desenho.linhas.length;
+const meio = (coluna) => coluna * LARGURA_COLUNA + LARGURA_COLUNA / 2;
+const centrado = (desenho, x, y) => ({ desenho, x: x - Math.floor(largura(desenho) / 2), y });
+
+// Na parede, uma janela sobre cada coluna de mesas e o relógio no meio; no chão, encostadas na
+// parede e fora do caminho de quem anda, duas plantas.
+const DECORACAO = Object.freeze([
+  ...Array.from({ length: COLUNAS }, (_, coluna) => centrado(JANELA, meio(coluna), 3)),
+  centrado(RELOGIO, LARGURA / 2, 3),
+  centrado(PLANTA, LARGURA_COLUNA, 6),
+  centrado(PLANTA, LARGURA - LARGURA_COLUNA, 6),
+]);
+
+/** Preenche uma matriz de pixels com o canto superior esquerdo em (x, y). */
+function pintar(ctx, { paleta, linhas }, x, y) {
+  for (const [dx, dy, l, a, letra] of retangulos(linhas)) {
+    ctx.fillStyle = paleta[letra];
+    ctx.fillRect(x + dx, y + dy, l, a);
+  }
+}
+
+/** O piso: ladrilhos claros e escuros em xadrez, da parede até o fim da tela. */
+function pintarPiso(ctx) {
+  for (let y = TOPO, linha = 0; y < ALTURA; y += altura(LADRILHO), linha++) {
+    for (let x = 0, coluna = 0; x < LARGURA; x += largura(LADRILHO), coluna++) {
+      pintar(ctx, (linha + coluna) % 2 ? LADRILHO_ESCURO : LADRILHO, x, y);
+    }
+  }
+}
+
+function pintarSala(ctx) {
+  for (let x = 0; x < LARGURA; x += largura(PAREDE)) pintar(ctx, PAREDE, x, 0);
+  pintarPiso(ctx);
+  for (const { desenho, x, y } of DECORACAO) pintar(ctx, desenho, x, y);
+}
+
+/** A mesa de um agente, com o monitor na cor e na fase que o quadro traz. */
+function pintarMesa(ctx, { mesa, monitor, monitorFase }) {
+  const [x, y] = [mesa.retangulo.x + MONITOR_EM.x, mesa.retangulo.y + MONITOR_EM.y];
+  pintar(ctx, MESA, mesa.retangulo.x, mesa.retangulo.y - MESA_ACIMA);
+  pintar(ctx, MONITOR, x, y);
+  const tela = TELAS[monitor]?.(monitorFase);
+  if (tela) pintar(ctx, tela, x + TELA_EM.x, y + TELA_EM.y);
+}
+
+/** O boneco na pose do quadro, com a sombra no chão (se está em pé) e o sinal sobre a cabeça. */
+function pintarBoneco(ctx, boneco) {
+  const { x, y, acao, pose, papel, espelhado } = boneco;
+  const linhas = linhasDoBoneco(pose, { papel, espelhado, festa: acao === 'comemorando' && pose === 'mao' });
+  const sinal = SINAIS[acao];
+  if (!boneco.sentado) pintar(ctx, SOMBRA, x + Math.floor((BONECO - largura(SOMBRA)) / 2), y + BONECO);
+  ctx.globalAlpha = acao === 'skipped' ? ALFA_DO_PULADO : 1;
+  pintar(ctx, { linhas, paleta: coresDoBoneco(boneco.aparencia) }, x, y);
+  ctx.globalAlpha = 1;
+  if (sinal) pintar(ctx, sinal, x + Math.floor((BONECO - largura(sinal)) / 2), y - altura(sinal) - 1);
+}
+
+/**
+ * Pinta um quadro inteiro, em pixel lógico: a sala e, do fundo para a frente, mesas e bonecos.
+ * Quem está mais abaixo na tela fica na frente: o boneco sentado é pintado antes da própria
+ * mesa (o tampo cobre as pernas dele) e quem entrega, parado diante de outra mesa, depois dela.
+ * @param {object} ctx o contexto 2D (ou qualquer objeto com `fillStyle`, `globalAlpha` e `fillRect`)
+ * @param {object[]} bonecos o que `quadro` devolveu; só há mesa para quem está nesta lista
+ */
+export function pintarCena(ctx, bonecos) {
+  pintarSala(ctx);
+  const camadas = bonecos.flatMap((boneco) => [
+    { base: boneco.mesa.retangulo.y + boneco.mesa.retangulo.altura, pintar: pintarMesa, boneco },
+    { base: boneco.y + BONECO, pintar: pintarBoneco, boneco },
+  ]);
+  camadas.sort((a, b) => a.base - b.base);
+  for (const camada of camadas) camada.pintar(ctx, camada.boneco);
+}
+
+/** O que muda o desenho de um boneco: se nada disto mudou, o quadro é o mesmo. */
+const resumo = (b) => [b.id, b.indice, b.acao, b.pose, b.papel, b.espelhado, b.x, b.y, b.monitor, b.monitorFase].join(':');
+
+/**
+ * O laço de animação. A cada quadro do navegador pede os bonecos e, se algo mudou desde a última
+ * pintura (ou o canvas mudou de tamanho), pinta na escala inteira do canvas, sem suavização.
+ * Um quadro que falha não para o laço.
+ * @param {object} janela de quem vem o `requestAnimationFrame`
+ * @param {object} tela o canvas, já com 320·N × 180·N pixels
+ * @param {() => object[] | null} obterQuadro os bonecos deste instante; `null`: ainda não há o que pintar
+ * @param {() => void} aoPintar chamada depois de cada pintura
+ */
+export function animar(janela, tela, obterQuadro, aoPintar) {
+  const ctx = tela.getContext('2d');
+  let pintado = '';
+  function passo() {
+    try {
+      const bonecos = obterQuadro();
+      const marca = bonecos ? `${tela.width}|${bonecos.map(resumo).join(';')}` : pintado;
+      if (marca === pintado) return;
+      const n = tela.width / LARGURA;
+      ctx.setTransform(n, 0, 0, n, 0, 0);
+      ctx.imageSmoothingEnabled = false;
+      pintarCena(ctx, bonecos);
+      pintado = marca;
+      aoPintar();
+    } finally {
+      janela.requestAnimationFrame(passo);
+    }
+  }
+  janela.requestAnimationFrame(passo);
+}

package/templates/_opencrew/core/escritorio/demo.js

@@ -0,0 +1,79 @@
+// Demonstração do escritório (regra 23): um roteiro fixo e uma função pura que devolve o estado
+// de cada instante, no formato do `state.json`. O roteiro passa por todos os status de agente,
+// por um checkpoint, por três passagens de bastão, por uma falha e pela execução concluída, e
+// recomeça. A página o desenha pelo mesmo caminho de uma execução de verdade.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 18 e 23 (repositório do OpenCrew).
+
+const ELENCO = [
+  { id: 'pesquisa', name: 'Pedro Pesquisa', icon: '🔎' },
+  { id: 'redacao', name: 'Rita Redação', icon: '✍️' },
+  { id: 'design', name: 'Davi Design', icon: '🎨' },
+  { id: 'revisao', name: 'Renata Revisão', icon: '🧐' },
+  { id: 'social', name: 'Sara Social', icon: '📣' },
+];
+
+const [I, W, C, D, S, F] = ['idle', 'working', 'checkpoint', 'done', 'skipped', 'failed'];
+
+// Cada cena: duração, status da execução, passo (`n` e `rotulo`) e o status de cada agente, na
+// ordem do elenco. `passagem` ([de, para, mensagem]) marca a cena em que o bastão troca de mão.
+const CENAS = [
+  { ms: 3000, status: 'running', n: 0, rotulo: '', agentes: [I, I, I, I, S] },
+  { ms: 6000, status: 'running', n: 1, rotulo: 'Pesquisar o tema', agentes: [W, I, I, I, S] },
+  { ms: 5000, status: 'checkpoint', n: 1, rotulo: 'Aprovar a pauta', agentes: [C, I, I, I, S] },
+  { ms: 7000, status: 'running', n: 2, rotulo: 'Escrever o texto', agentes: [D, W, I, I, S], passagem: ['pesquisa', 'redacao', 'Pauta aprovada, com três fontes.'] },
+  { ms: 7000, status: 'running', n: 3, rotulo: 'Criar a imagem', agentes: [D, D, W, I, S], passagem: ['redacao', 'design', 'Texto pronto, com título e chamada.'] },
+  { ms: 5000, status: 'failed', n: 3, rotulo: 'Criar a imagem', agentes: [D, D, F, I, S], motivo: 'Sem acesso ao banco de imagens.' },
+  { ms: 6000, status: 'running', n: 3, rotulo: 'Criar a imagem', agentes: [D, D, W, I, S] },
+  { ms: 7000, status: 'running', n: 4, rotulo: 'Revisar tudo', agentes: [D, D, D, W, S], passagem: ['design', 'revisao', 'Imagem pronta, no formato do post.'] },
+  { ms: 8000, status: 'completed', n: 4, rotulo: 'Revisar tudo', agentes: [D, D, D, D, S] },
+];
+
+/** O roteiro, como dado: o elenco e as cenas, na ordem. */
+export const ROTEIRO = Object.freeze({ crew: 'crew-de-exemplo', total: 4, agentes: ELENCO, cenas: CENAS });
+
+const INICIOS = CENAS.map((_, i) => CENAS.slice(0, i).reduce((soma, cena) => soma + cena.ms, 0));
+/** Duração de uma volta do roteiro. */
+export const DURACAO_DEMO_MS = INICIOS.at(-1) + CENAS.at(-1).ms;
+// Data fixa das passagens: só precisa mudar de uma passagem para a outra.
+const BASE = Date.UTC(2026, 0, 5, 9);
+
+/** Índice da cena em que cai o instante; o roteiro recomeça ao chegar ao fim. */
+function cenaEm(decorridoMs) {
+  const t = Number.isFinite(decorridoMs) && decorridoMs > 0 ? decorridoMs % DURACAO_DEMO_MS : 0;
+  return INICIOS.findLastIndex((inicio) => inicio <= t);
+}
+
+/** O `label` do agente: o rótulo do último passo em que ele trabalhou, até a cena `ate`. */
+function rotuloDe(agente, ate) {
+  const feitas = CENAS.slice(0, ate + 1).filter((cena) => cena.agentes[agente] === W);
+  return feitas.length ? feitas.at(-1).rotulo : '';
+}
+
+/** A última passagem de bastão até a cena `ate`, no formato do `handoff`. */
+function passagemAte(ate) {
+  const cena = CENAS.slice(0, ate + 1).findLastIndex((c) => c.passagem);
+  if (cena < 0) return null;
+  const [from, to, message] = CENAS[cena].passagem;
+  return { from, to, message, completedAt: new Date(BASE + INICIOS[cena]).toISOString() };
+}
+
+/**
+ * O estado da demonstração num instante. Mesmo instante, mesmo estado; depois de
+ * `DURACAO_DEMO_MS` o roteiro recomeça. Vem sem `updatedAt`: a demonstração nunca fica "sem sinal".
+ * @param {number} decorridoMs tempo desde que a demonstração começou (inválido vale como 0)
+ * @returns {object} um estado no formato do `state.json`
+ */
+export function estadoDaDemo(decorridoMs) {
+  const indice = cenaEm(decorridoMs);
+  const cena = CENAS[indice];
+  return {
+    crew: ROTEIRO.crew,
+    status: cena.status,
+    step: { current: cena.n, total: ROTEIRO.total, label: cena.rotulo },
+    agents: ELENCO.map((agente, i) => ({ ...agente, status: cena.agentes[i], label: rotuloDe(i, indice) })),
+    handoff: passagemAte(indice),
+    ...(cena.motivo ? { motivo: cena.motivo } : {}),
+    updatedAt: null,
+  };
+}

package/templates/_opencrew/core/escritorio/escala.js

@@ -0,0 +1,27 @@
+// Escala do canvas (regra 16): a tela interna de 320×180 só é ampliada em escala inteira, e a
+// conta é feita em pixels do dispositivo, para o pixel continuar quadrado com a tela do sistema
+// em 125% ou 150%.
+// Puro: sem DOM, sem relógio, sem rede. O tamanho disponível e a razão de pixels entram por
+// parâmetro.
+// Spec: fase-e1-escritorio-ao-vivo.md, regra 16 (repositório do OpenCrew).
+import { ALTURA, LARGURA } from './modelo-mesas.js';
+
+// Folga da conta com decimais: um canvas do tamanho exato que esta função devolveu tem de caber
+// de novo (com razão 1,7 e escala 5, a divisão dá 4,999999999999999).
+const FOLGA = 1e-9;
+
+/**
+ * A maior escala inteira em que a tela cabe no espaço disponível.
+ * @param {number} largura largura disponível, em pixels de CSS
+ * @param {number} altura altura disponível, em pixels de CSS
+ * @param {number} dpr pixels do dispositivo por pixel de CSS; inválido vale como 1
+ * @returns {{ n: number, largura: number, altura: number }} `n`: o maior inteiro N ≥ 1 em que
+ *   320·N × 180·N cabe em largura·dpr × altura·dpr (se nem N = 1 cabe, 1: a página rola) ·
+ *   `largura` e `altura`: o tamanho do canvas em pixels de CSS (320·N/dpr × 180·N/dpr)
+ */
+export function escala(largura, altura, dpr) {
+  const razao = Number.isFinite(dpr) && dpr > 0 ? dpr : 1;
+  const cabe = Math.min((largura * razao) / LARGURA, (altura * razao) / ALTURA);
+  const n = Number.isFinite(cabe) ? Math.max(1, Math.floor(cabe + FOLGA)) : 1;
+  return { n, largura: (LARGURA * n) / razao, altura: (ALTURA * n) / razao };
+}