@aksp/opencrew 1.6.2 → 1.7.0

package/src/lib/resumo.js

@@ -0,0 +1,125 @@
+// What `update` says (spec R2, rules 13 to 16; texts in §6). Each step of the command returns
+// what it created, rewrote or kept, and the lines here are built ONLY from that: no line states
+// something the step did not do, and a step that changed nothing gets no line. These sentences
+// are in PT-BR; the rest of the CLI is not yet (→ U5).
+import path from 'node:path';
+import { copyLine } from './blocos.js';
+import { legacyLines } from './legado.js';
+import { mcpMessage } from './mcp.js';
+import { UNREADABLE } from './manifest.js';
+import { log, info, ok, warn } from './ui.js';
+
+/** Last line of `update`: only what the code guarantees (a deleted crew template comes back). */
+export const UNTOUCHED = 'Não foram alterados: as crews que você criou, `_opencrew/_memory/`, `_opencrew/best-practices.local/` e `.env`.';
+
+/** `init` in a workspace that is already installed (rule 15). */
+export const ALREADY_INSTALLED = 'Para atualizar, rode `npx @aksp/opencrew@latest update`. Não apague `_opencrew/` para reinstalar: a pasta guarda a sua memória (`_opencrew/_memory/`) e as suas best-practices (`_opencrew/best-practices.local/`).';
+
+const NO_BRIDGES = 'Nenhuma ponte de IDE encontrada: nada a atualizar. Para criar a ponte de uma IDE: `npx @aksp/opencrew@latest init --repair-bridges --ide=<id>`.';
+const LEAK_REMOVED = 'CLAUDE.md: removi a seção de STATUS.md que as versões 1.4.0 e 1.4.1 gravaram por engano.';
+const FIRST_PROTECTED = 'Primeira atualização com proteção: sem registro anterior, guardamos tudo o que diferia. Daqui em diante, só o que você editar.';
+// By action of `deliverBlock`; `kept` has no line.
+const BLOCK = {
+  'AGENTS.md': {
+    created: 'AGENTS.md criado com o bloco do OpenCrew.',
+    added: 'AGENTS.md: bloco do OpenCrew acrescentado no topo; o seu texto foi mantido.',
+    updated: 'AGENTS.md: bloco do OpenCrew atualizado.',
+  },
+  '.gitignore': {
+    created: '`.gitignore` criado com o bloco do OpenCrew.',
+    added: '`.gitignore`: bloco do OpenCrew acrescentado no fim; as suas linhas foram mantidas.',
+    updated: '`.gitignore`: bloco do OpenCrew atualizado.',
+  },
+};
+const LEFTOVER = {
+  header: (n) => `${n} resto(s) de uma instalação antiga do OpenSquad (a pasta \`_opensquad/\` não existe neste projeto). Nada foi apagado:`,
+  bridge: (file) => `${file} — ponte do OpenSquad; o OpenCrew não usa este arquivo.`,
+  cites: (file) => `${file} — cita \`_opensquad/\`; confira antes de apagar, pode ser um arquivo seu.`,
+  end: 'Se você não usa mais o OpenSquad, pode apagar as pontes listadas. Este aviso volta a cada `update` enquanto os arquivos existirem.',
+  config: (file) => `O servidor \`playwright\` do \`.mcp.json\` aponta para \`${file}\`, que não existe neste projeto (resto do OpenSquad). Não alterei o arquivo.`,
+};
+const MCP_REWRITTEN = new Set(['added', 'output-dir']); // actions of `updateMcp` that change the file
+const MAX_COPIES = 15;
+
+/** Print the lines a function of this module returned: `[printer, text]` each. */
+export function say(lines) {
+  for (const [print, text] of lines) print(text);
+}
+
+/** Rule 14: the files `update` wrote in `crews/` because they were missing (`results` of deliverTree). */
+export function recreatedLines(results) {
+  const files = results.filter((r) => r.action === 'created').map((r) => r.file);
+  if (!files.length) return [];
+  return [[info, `${files.length} arquivo(s) que faltava(m) em \`crews/\` foram entregues de novo: ${files.join(', ')}.`]];
+}
+
+const blockLines = (results) => results
+  .map((r) => BLOCK[r?.file]?.[r.action])
+  .filter(Boolean)
+  .map((text) => [ok, text]);
+
+/** One line per case that happened: IDEs with a bridge rewritten, files created, or neither. */
+function bridgeLines(ides, bridges, legacy = []) {
+  if (!ides.length) return [[info, NO_BRIDGES]];
+  const cleaned = new Set(legacy.filter((l) => l.action === 'removed').map((l) => l.file));
+  const rewritten = bridges.filter((b) => b.action === 'updated' || b.action === 'added' || cleaned.has(b.file));
+  const labels = [...new Set(rewritten.map((b) => b.ide.label))];
+  const created = bridges.filter((b) => b.action === 'created' && !b.shared).map((b) => b.file);
+  const lines = [];
+  if (labels.length) lines.push([ok, `Pontes atualizadas: ${labels.join(', ')}.`]);
+  if (created.length) lines.push([ok, `Pontes criadas: ${created.join(', ')}.`]);
+  return lines.length ? lines : [[ok, 'Pontes das IDEs já estavam em dia.']];
+}
+
+function mcpLines(ctx, mcp) {
+  const said = mcpMessage(ctx, mcp.action);
+  return said ? [[said.warn ? warn : ok, said.text]] : [];
+}
+
+/** Rule 16. `mcp` = what this run did to .mcp.json: the line only says "não alterei" if so. */
+function leftoverLines({ files, config }, mcp) {
+  const lines = [];
+  if (files.length) {
+    lines.push([warn, LEFTOVER.header(files.length)]);
+    for (const { file, bridge } of files) lines.push([log, `    ${(bridge ? LEFTOVER.bridge : LEFTOVER.cites)(file)}`]);
+    lines.push([info, LEFTOVER.end]);
+  }
+  if (config && !MCP_REWRITTEN.has(mcp.action)) lines.push([warn, LEFTOVER.config(config)]);
+  return lines;
+}
+
+/** The copies of this run. `unreadable` = the manifest existed and could not be used. */
+function copyLines(ctx, unreadable) {
+  const n = ctx.copied.length;
+  if (!n) return [];
+  const dir = path.relative(ctx.target, ctx.backupDir).split(path.sep).join('/');
+  const header = ctx.manifest
+    ? `${n} arquivo(s) foram copiados para ${dir}/ antes de serem substituídos (editados por você, ou sem registro de entrega):`
+    : `${n} arquivo(s) diferentes do pacote novo foram copiados para ${dir}/ antes de serem substituídos:`;
+  const lines = [[warn, header], ...ctx.copied.slice(0, MAX_COPIES).map((f) => [log, `    ${copyLine(ctx, f)}`])];
+  if (n > MAX_COPIES) lines.push([log, `    … e mais ${n - MAX_COPIES}`]);
+  if (unreadable) lines.push([info, UNREADABLE.summary]);
+  else if (!ctx.manifest) lines.push([info, FIRST_PROTECTED]);
+  return lines;
+}
+
+/**
+ * The summary of an `update`, in the order the steps ran.
+ * @param {object} ctx delivery context (src/lib/manifest.js)
+ * @param {object} done what each step returned: `agents` and `gitignore` (deliverBlock; `agents`
+ *   is null when a pre-1.3 AGENTS.md was migrated), `ides` (detected), `bridges` (deliverBridges),
+ *   `leak` (the STATUS.md section left CLAUDE.md's block), `mcp` (updateMcp), `leftovers`
+ *   (findLeftovers) and `unreadable` (manifest)
+ * @returns {Array<[Function, string]>} lines for `say`
+ */
+export function updateSummary(ctx, done) {
+  return [
+    ...blockLines([done.agents, done.gitignore]),
+    ...bridgeLines(done.ides, done.bridges, ctx.legacy),
+    ...(done.leak ? [[ok, LEAK_REMOVED]] : []),
+    ...legacyLines(ctx).map((line) => [warn, line]),
+    ...mcpLines(ctx, done.mcp),
+    ...leftoverLines(done.leftovers, done.mcp),
+    ...copyLines(ctx, done.unreadable),
+  ];
+}

package/templates/.mcp.json

@@ -1,5 +1,5 @@
 {
-  "_comment": "The Playwright MCP version is pinned for stability. To upgrade: npx @playwright/mcp@latest --version, then update the version below and run 'npx @aksp/opencrew update' to refresh.",
+  "_comment": "Versão do Playwright MCP fixada por estabilidade. Para trocar, edite a versão abaixo e reinicie a IDE. O `update` do OpenCrew não altera a versão que está neste arquivo.",
   "mcpServers": {
     "playwright": {
       "command": "npx",

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.2
+1.7.0

package/templates/_opencrew/core/best-practices/social-networks-publishing.md

@@ -11,7 +11,7 @@ version: "1.0.0"
 ## Compact Rules
 
 1. Never publish live content without explicit user confirmation.
-2. Always execute and report a successful dry-run before offering the live publish option.
+2. With `instagram-publisher`, execute and report a successful dry-run before offering the live publish option; `blotato` has no dry-run: send nothing to it, not even media, before the user answers with the word `publicar`.
 3. Validate all platform-specific constraints (image format, caption length) before API calls.
 4. Adapt and format content natively for each target platform; do not cross-post raw text.
 5. Report publishing results immediately, including success (with URL) or failure details.
@@ -19,7 +19,7 @@ version: "1.0.0"
 7. Track API usage and proactively warn users if approaching rate limits.
 8. Fall back gracefully if a required publishing skill is missing; list available alternatives.
 9. Inform the user and seek permission before converting image formats (e.g., PNG to JPEG).
-10. Display a structured preview (platform, images, caption, hashtags, validations) before dry-run.
+10. Display a structured preview (platform, images, caption, hashtags, validations) before anything is sent (the `instagram-publisher` dry-run included).
 11. Do not silently truncate captions; ask the user to shorten them if limits are exceeded.
 12. Request user direction (continue or abort) if one platform fails in a multi-platform batch.
 
@@ -29,9 +29,9 @@ version: "1.0.0"
 
 ## Core Principles
 
-1. **Never publish without explicit user confirmation.** This is the cardinal rule. Before any live post, present the full preview (platform, images, caption, hashtags) and wait for the user to confirm. A dry-run is not confirmation. The user must explicitly say "publish" or "go ahead" before any live API call is made.
+1. **Never publish without explicit user confirmation.** This is the cardinal rule. Before any live post, present the full preview (platform, images, caption, hashtags) and wait for the user to confirm. A dry-run is not confirmation. The user must answer with the confirmation word the publishing skill asks for (e.g. `publicar`) before any live API call is made; any other answer means do not publish.
 
-2. **Dry-run first, always.** The first execution of any publishing workflow must be a dry-run (test mode). This validates that credentials are configured, images meet requirements, captions are within limits, and the API connection works. Only after a successful dry-run should the user be offered the option to publish for real.
+2. **Dry-run first, where the skill has one (`instagram-publisher`).** There, the first execution of the publishing workflow must be a dry-run (test mode). This validates that credentials are configured, images meet requirements, captions are within limits, and the API connection works. Only after a successful dry-run should the user be offered the option to publish for real. `blotato` has no dry-run: send nothing to it, not even media, before the user answers with the word `publicar` — its upload is part of the publication.
 
 3. **Validate platform requirements before attempting to publish.** Every platform has specific constraints. Validate all of them before making any API call. If validation fails, report the specific issue and suggest a fix before proceeding.
 
@@ -107,12 +107,12 @@ Every platform has specific constraints that must be validated before making any
    Status: All validations passed
    ```
 
-5. **Execute dry-run.** Run the publishing workflow in test mode:
+5. **Execute dry-run (`instagram-publisher` only).** Run the publishing workflow in test mode:
    - Instagram: `--dry-run` flag on the publish script
-   - Blotato: validate API connection and media upload without posting
-   - Report dry-run results: credentials OK, media uploaded, container created, ready to publish.
+   - Blotato: no dry-run. Skip this step: nothing is uploaded or sent before the confirmation word (step 6)
+   - Report the `instagram-publisher` dry-run results: credentials OK, media uploaded, container created, ready to publish.
 
-6. **Request final confirmation.** Present the dry-run results and ask the user to confirm the live publish. Do not proceed without explicit approval.
+6. **Request final confirmation.** Present the dry-run results (Blotato: the preview) and ask for the skill's confirmation word. Do not proceed without it.
 
 7. **Publish and report.** Execute the live publish. Report the result immediately:
    - Success: post URL, post ID, platform, timestamp
@@ -130,7 +130,7 @@ Every platform has specific constraints that must be validated before making any
 ## Quality Criteria
 
 - [ ] User confirmation was received before any live publish (not just dry-run)
-- [ ] Dry-run was executed and passed before live publish
+- [ ] Dry-run was executed and passed before live publish (`instagram-publisher`); nothing was sent to Blotato before the confirmation word
 - [ ] All platform-specific validations passed (image format, dimensions, caption length, image count)
 - [ ] Publish preview was presented with complete details (platform, images, caption, validation status)
 - [ ] Successful publishes include post URL/permalink and post ID
@@ -213,7 +213,7 @@ Skill:   blotato (multi-platform)
 
 PLATFORM 1/3: Instagram
   Validation: All checks passed
-  Dry-run:    Passed
+  Preview:    Confirmed with the word "publicar"
   Publish:    Published successfully
   Post URL:   https://www.instagram.com/p/DEF456abc/
   Post ID:    ig_17899506834567890
@@ -221,7 +221,7 @@ PLATFORM 1/3: Instagram
 
 PLATFORM 2/3: LinkedIn
   Validation: All checks passed
-  Dry-run:    Passed
+  Preview:    Confirmed with the word "publicar"
   Publish:    FAILED
   Error:      403 Forbidden — "Publishing permission not granted"
   HTTP Status: 403
@@ -245,7 +245,7 @@ PLATFORM 3/3: X/Twitter
   [User chooses: b, provides short caption]
 
   Validation: All checks passed (short caption: 142 chars)
-  Dry-run:    Passed
+  Preview:    Confirmed with the word "publicar"
   Publish:    Published successfully
   Post URL:   https://x.com/brandname/status/1234567890123456789
   Post ID:    tw_1234567890123456789
@@ -276,7 +276,7 @@ SUMMARY
 
 5. **Never report success without a URL.** "Published successfully" without a post URL is not verifiable. Every successful publish must include the post permalink. If the API does not return a URL, report that as a limitation.
 
-6. **Never assume credentials are valid.** Always verify credentials during the dry-run phase. Tokens expire, permissions get revoked, accounts get disconnected. A credential check is part of every publish workflow.
+6. **Never assume credentials are valid.** Always verify credentials before publishing (the dry-run with `instagram-publisher`; listing the accounts, read-only, with `blotato`). Tokens expire, permissions get revoked, accounts get disconnected. A credential check is part of every publish workflow.
 
 7. **Never publish the same raw caption across all platforms without adaptation.** Instagram, LinkedIn, and X/Twitter have different formatting conventions, character limits, and audience expectations. At minimum, verify the caption fits the platform constraints. Ideally, suggest platform-specific adaptations.
 
@@ -284,7 +284,7 @@ SUMMARY
 
 1. **Present a structured preview before every publish.** Show: platform, account, images (with dimensions and format), caption (with character count), hashtags, and validation status. The user must see exactly what will be published.
 
-2. **Run a dry-run before every live publish.** Test the full workflow without posting. Verify credentials, upload media, create containers, validate everything. Report dry-run results before requesting confirmation.
+2. **Run a dry-run before every live publish with `instagram-publisher`.** Test the full workflow without posting. Verify credentials, upload media, create containers, validate everything. Report dry-run results before requesting confirmation. With `blotato` there is no dry-run: the preview and the confirmation word come before any upload.
 
 3. **Report results immediately after each publish.** Do not batch results. After each platform publish (success or failure), report the outcome with all relevant details before moving to the next platform.
 

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);
+}