@aksp/opencrew 1.6.2 → 1.7.0

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

package/templates/_opencrew/core/escritorio/index.html

@@ -0,0 +1,166 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark">
+<title>Escritório</title>
+<style>
+  :root {
+    color-scheme: dark;
+    --fundo: #12131c;
+    --painel: #1c1e2c;
+    --borda: #2e3350;
+    --poco: #0b0c12;
+    --tinta: #1a1c2c;
+    --papel: #f4f4ee;
+    --texto: #ecebe4;
+    --apagado: #9aa1b8;
+    --ambar: #f4a73b;
+    --verde: #5fd47a;
+    --vermelho: #e0564c;
+    --ceu: #7ec4e0;
+    --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  [hidden] { display: none !important; }
+  html, body { height: 100%; }
+  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 var(--sans); }
+  p, h1, h2, ul { margin: 0; }
+
+  /* Cabeçalho: a marca, a crew em exibição e o seletor (só com mais de uma crew). */
+  .topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px 10px; background: var(--painel); border-bottom: 4px solid var(--borda); }
+  .marca { font: 700 14px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); }
+  .marca::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--ambar); box-shadow: 4px 4px 0 var(--poco); }
+  .crew { font: 700 18px/1.2 var(--mono); overflow-wrap: anywhere; }
+  .seletor { margin-left: auto; font: 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
+  .seletor select { max-width: 60vw; margin-left: 6px; padding: 4px 8px; font: 700 13px var(--mono); color: var(--texto); background: var(--poco); border: 2px solid var(--borda); border-radius: 0; }
+  .seletor select:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
+
+  /* A frase de abertura fica na tela até o primeiro desenho; sem JavaScript, é o que se lê. */
+  .abertura { max-width: 64ch; margin: 24px 16px; padding: 14px 16px; font: 15px/1.5 var(--mono); background: var(--painel); border: 2px solid var(--borda); border-left: 6px solid var(--ambar); }
+
+  .pagina { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 16px; min-height: 0; padding: 14px 16px 16px; }
+  .palco { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
+
+  /* O passo atual, com a contagem e a barra de progresso. */
+  .andamento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 28px; }
+  .situacao { padding: 2px 8px; font: 700 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); background: var(--ceu); box-shadow: 3px 3px 0 var(--poco); }
+  [data-execucao="checkpoint"] .situacao { background: var(--ambar); }
+  [data-execucao="completed"] .situacao { background: var(--verde); }
+  [data-execucao="failed"] .situacao { background: var(--vermelho); }
+  .passo { font: 700 15px/1.3 var(--mono); overflow-wrap: anywhere; }
+  .barra { position: relative; flex: 1 1 180px; display: flex; height: 14px; background: var(--poco); border: 2px solid var(--borda); }
+  .barra span { flex: 0 0 0px; }
+  #barra-feito { background: var(--verde); }
+  #barra-atual { background: var(--ambar); animation: pulsar 1s steps(1, end) infinite; }
+  [data-execucao="failed"] #barra-atual { background: var(--vermelho); animation: none; }
+  .barra::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--total, 1) - 2px), var(--poco) calc(100% / var(--total, 1) - 2px), var(--poco) calc(100% / var(--total, 1))); }
+  @keyframes pulsar { 0% { opacity: 1; } 50% { opacity: .45; } }
+
+  .avisos { display: flex; flex-direction: column; gap: 4px; min-height: 26px; }
+  .aviso, .frase { padding: 3px 10px; font: 13px/1.5 var(--mono); border-left: 6px solid; }
+  .aviso { color: #ffd9d4; background: #2a1719; border-color: var(--vermelho); }
+  .frase { color: #ffe2b0; background: #2a2113; border-color: var(--ambar); }
+
+  /* O desenho: o canvas em escala inteira e, por cima, a camada de nomes e balões. A área é medida
+     pela página para escolher a escala; a moldura em volta dá espaço à borda e rola se nem a
+     escala 1 couber. */
+  .moldura { flex: 1 1 auto; display: flex; min-height: 200px; padding: 10px; overflow: auto; }
+  .area { flex: 1 1 0; display: flex; min-width: 0; min-height: 0; }
+  .sala { position: relative; flex: none; width: 320px; height: 180px; margin: auto; box-shadow: 0 0 0 4px var(--borda), 6px 6px 0 4px #07080d; --u: 1; --fio: max(1px, calc(var(--u) * .5px)); }
+  .sala canvas { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; }
+  .rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font: 700 clamp(9px, calc(var(--u) * 4.5px), 15px)/1.15 var(--mono); }
+  .rotulos div { position: absolute; display: flex; justify-content: center; transition: opacity .15s linear; }
+  .rotulos span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .nome span { padding: 0 calc(var(--u) * 1.5px); color: var(--papel); background: rgba(26, 28, 44, .8); }
+  .balao { padding-bottom: calc(var(--u) * 2px); }
+  .balao span { padding: 0 calc(var(--u) * 2px); color: var(--tinta); background: var(--papel); border: var(--fio) solid var(--tinta); }
+  .balao::after { content: ""; position: absolute; bottom: 0; left: calc(50% - var(--u) * 1px - var(--fio)); width: calc(var(--u) * 2px + var(--fio) * 2); height: calc(var(--u) * 2px + var(--fio)); background: var(--papel); border: solid var(--tinta); border-width: 0 var(--fio) var(--fio); }
+  .balao.espera span, .balao.espera::after { background: var(--ambar); }
+  .faixa { position: absolute; top: 0; right: 0; left: 0; height: calc(var(--u) * 13px); padding: 0 calc(var(--u) * 4px); overflow: hidden; font: 700 clamp(10px, calc(var(--u) * 5.5px), 20px)/calc(var(--u) * 11px) var(--mono); text-align: center; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); background: var(--ambar); border-bottom: calc(var(--u) * 2px) solid var(--tinta); }
+  .etiqueta { position: absolute; right: calc(var(--u) * 3px); bottom: calc(var(--u) * 3px); padding: 0 calc(var(--u) * 2px); font: 700 clamp(10px, calc(var(--u) * 5px), 16px)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); background: rgba(26, 28, 44, .85); border: var(--fio) solid var(--ambar); }
+
+  .rodape { display: flex; flex-direction: column; gap: 2px; min-height: 42px; }
+  .nota { font: 13px/1.5 var(--mono); color: var(--apagado); overflow-wrap: anywhere; }
+  .nota.falha { color: #ffd9d4; }
+
+  /* A lista: todo agente, com o status por extenso e o que fez. */
+  .lado { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border: 4px solid var(--borda); box-shadow: 6px 6px 0 #07080d; }
+  .lado h2 { padding: 8px 12px; font: 700 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); border-bottom: 2px solid var(--borda); }
+  .lista { flex: 1 1 auto; padding: 0; overflow: auto; list-style: none; }
+  .agente { display: grid; grid-template-columns: 10px 1.6em minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 9px 12px; border-bottom: 2px solid var(--borda); }
+  .agente .cor { width: 10px; height: 10px; margin-top: 5px; box-shadow: 0 0 0 2px var(--tinta); }
+  .agente .icone { font-size: 17px; line-height: 1.2; text-align: center; }
+  .agente .nome { display: block; font: 700 14px/1.3 var(--mono); overflow-wrap: anywhere; }
+  .agente .status { display: block; font: 12px/1.5 var(--mono); color: var(--apagado); }
+  .agente .sinal { display: inline-block; width: 1.4em; }
+  .agente .fez { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; opacity: .85; }
+  .agente[data-acao="working"], .agente[data-acao="checkpoint"] { background: #222538; }
+  .agente[data-acao="working"] .status { color: var(--verde); }
+  .agente[data-acao="checkpoint"] .status { color: var(--ambar); }
+  .agente[data-acao="done"] .status { color: var(--ceu); }
+  .agente[data-acao="failed"] .status { color: var(--vermelho); }
+  .agente[data-acao="sem-sinal"] .status { color: var(--texto); }
+  .agente[data-acao="skipped"] { opacity: .55; }
+
+  /* Tela estreita: a lista desce para baixo do desenho e a página rola. */
+  @media (max-width: 860px) {
+    body { height: auto; min-height: 100vh; min-height: 100dvh; }
+    .pagina { display: flex; flex-direction: column; padding: 12px; }
+    .moldura { flex: none; min-height: 0; padding: 6px; }
+    .area { aspect-ratio: 16 / 9; }
+    .lista { overflow: visible; }
+  }
+  @media (max-width: 359px) {
+    .pagina, .moldura { padding-right: 0; padding-left: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    #barra-atual { animation: none; }
+    .rotulos div { transition: none; }
+  }
+</style>
+</head>
+<body>
+<header class="topo">
+  <h1 class="marca">Escritório</h1>
+  <p class="crew" id="crew" hidden></p>
+  <label class="seletor" id="seletor-caixa" hidden>Crew em exibição <select id="seletor"></select></label>
+</header>
+<p class="abertura" id="abertura">Abrindo o escritório… Se esta mensagem não sumir, abra pelo endereço que o comando /opencrew dashboard mostrou, e não pelo arquivo.</p>
+<main class="pagina" id="pagina" hidden>
+  <section class="palco" aria-label="Sala do escritório">
+    <div class="andamento">
+      <span class="situacao" id="situacao" hidden></span>
+      <p class="passo" id="passo" role="status" hidden></p>
+      <div class="barra" id="barra" aria-hidden="true" hidden><span id="barra-feito"></span><span id="barra-atual"></span><span id="barra-resto"></span></div>
+    </div>
+    <div class="avisos">
+      <p class="aviso" id="aviso" role="alert" hidden></p>
+      <p class="frase" id="frase" hidden></p>
+    </div>
+    <div class="moldura">
+      <div class="area" id="moldura">
+        <div class="sala" id="sala">
+          <canvas id="tela" width="320" height="180" role="img" aria-label="Desenho do escritório em pixel-art. A lista Equipe diz o que cada agente está fazendo."></canvas>
+          <p class="faixa" id="faixa" role="status" hidden></p>
+          <div class="rotulos" id="rotulos" aria-hidden="true"></div>
+          <span class="etiqueta" id="etiqueta" hidden>Demonstração</span>
+        </div>
+      </div>
+    </div>
+    <div class="rodape">
+      <p class="nota" id="parada" hidden></p>
+      <p class="nota falha" id="motivo" hidden></p>
+      <p class="nota" id="passagem" hidden></p>
+    </div>
+  </section>
+  <aside class="lado" aria-label="Equipe">
+    <h2>Equipe</h2>
+    <ul class="lista" id="lista"></ul>
+  </aside>
+</main>
+<script type="module" src="app.js"></script>
+</body>
+</html>

package/templates/_opencrew/core/escritorio/modelo-agentes.js

@@ -0,0 +1,93 @@
+// O que cada agente mostra: a ação do boneco e o monitor (tabela da regra 18), o balão, a
+// aparência e a linha dele na lista ao lado do desenho.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 18, 21 e 24 (repositório do OpenCrew).
+import { mesaDe } from './modelo-mesas.js';
+import { STATUS_TEXTO, TEXTOS } from './modelo-textos.js';
+
+/** Cor da camisa de cada mesa, na ordem das mesas: 12 cores, nenhuma repetida. */
+export const CAMISAS = Object.freeze([
+  '#d95763', '#5b6ee1', '#fbf236', '#37946e',
+  '#df7126', '#76428a', '#5fcde4', '#d77bba',
+  '#99e550', '#3f3f74', '#cbdbfc', '#8a6f30',
+]);
+export const CABELOS = Object.freeze(['#222034', '#45283c', '#b0432b', '#f2c94c', '#9aa0a8', '#e9e4d8']);
+export const PELES = Object.freeze(['#f2d3b1', '#e0ac69', '#c68642', '#8d5524', '#6b4226']);
+
+/** Número fixo para cada texto (FNV-1a, 32 bits): o mesmo `id` dá sempre o mesmo. */
+function semente(texto) {
+  let h = 2166136261;
+  for (let i = 0; i < texto.length; i++) h = Math.imul(h ^ texto.charCodeAt(i), 16777619);
+  return h >>> 0;
+}
+
+/**
+ * Cores do boneco, em `#rrggbb`: a camisa vem da posição da mesa; cabelo e pele vêm do `id`,
+ * e por isso não mudam quando o agente troca de mesa.
+ * @param {string} id
+ * @param {number} indiceDaMesa posição no elenco; fora das 12 mesas, `camisa` é `null`
+ */
+export function aparencia(id, indiceDaMesa) {
+  const h = semente(String(id));
+  return {
+    camisa: CAMISAS[indiceDaMesa] ?? null,
+    cabelo: CABELOS[h % CABELOS.length],
+    pele: PELES[(h >>> 8) % PELES.length],
+  };
+}
+
+// Monitor de cada ação (regra 18). `animado`: linhas correndo (aceso) ou piscando 1 vez por
+// segundo (âmbar); o vermelho é fixo. `sem-sinal` é o desenho de `idle` com um "?" em cima.
+const MONITOR = Object.freeze({
+  idle: { cor: 'apagado' },
+  working: { cor: 'aceso', animado: true },
+  checkpoint: { cor: 'ambar', animado: true },
+  done: { cor: 'apagado' },
+  skipped: { cor: 'apagado' },
+  failed: { cor: 'vermelho' },
+  'sem-sinal': { cor: 'apagado' },
+});
+
+/** A ação é o status, menos para quem trabalha numa execução em checkpoint ou sem sinal. */
+function acaoDe(status, contexto) {
+  if (status !== 'working') return status;
+  if (contexto.execucao === 'checkpoint') return 'idle';
+  return contexto.semSinal ? 'sem-sinal' : 'working';
+}
+
+function balaoDe(acao, contexto) {
+  if (acao === 'working') return contexto.balaoDoPasso;
+  return acao === 'checkpoint' ? TEXTOS.aguardando : null;
+}
+
+/**
+ * Um agente como a página o mostra.
+ * @param {object} agente item de `agents` do estado normalizado
+ * @param {number} indice posição no elenco
+ * @param {object} contexto `{ execucao, balaoDoPasso, semSinal, reduzirMovimento }`, em que
+ *   `semSinal` é o texto "Sem sinal há …" ou `null`
+ * @returns {object} `{ id, indice, nome, icone, status, statusTexto, label, acao, monitor,
+ *   monitorAnimado, balao, mesa, aparencia }` · `status`: o do arquivo · `acao`: o que o boneco
+ *   faz (`idle`, `working`, `checkpoint`, `done`, `skipped`, `failed` ou `sem-sinal`) ·
+ *   `monitor`: `apagado`, `aceso`, `ambar` ou `vermelho` · `balao`: texto ou `null` · `mesa`:
+ *   a de `MESAS`, ou `null` do 13º em diante
+ */
+export function verAgente(agente, indice, contexto) {
+  const acao = acaoDe(agente.status, contexto);
+  const { cor, animado = false } = MONITOR[acao];
+  return {
+    id: agente.id,
+    indice,
+    nome: agente.name,
+    icone: agente.icon,
+    status: agente.status,
+    statusTexto: acao === 'sem-sinal' ? contexto.semSinal : STATUS_TEXTO[agente.status],
+    label: agente.label,
+    acao,
+    monitor: cor,
+    monitorAnimado: animado && !contexto.reduzirMovimento,
+    balao: balaoDe(acao, contexto),
+    mesa: mesaDe(indice),
+    aparencia: aparencia(agente.id, indice),
+  };
+}

package/templates/_opencrew/core/escritorio/modelo-estado.js

@@ -0,0 +1,71 @@
+// Leitura do estado da execução (`crews/<crew>/state.json`) como ele chega do servidor: aceita o
+// arquivo da 1.6.x e devolve sempre o mesmo formato, sem alterar o objeto recebido.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, §4 e regra 18 (repositório do OpenCrew).
+
+/** Status de agente que a página conhece, na ordem da tabela da regra 18. */
+export const STATUS_DE_AGENTE = Object.freeze(['idle', 'working', 'checkpoint', 'done', 'skipped', 'failed']);
+export const STATUS_DE_EXECUCAO = Object.freeze(['running', 'checkpoint', 'completed', 'failed']);
+
+const ehObjeto = (valor) => valor !== null && typeof valor === 'object' && !Array.isArray(valor);
+const inteiro = (valor, minimo) => (Number.isInteger(valor) && valor >= minimo ? valor : null);
+
+function texto(valor) {
+  if (typeof valor === 'string') return valor;
+  return typeof valor === 'number' ? String(valor) : '';
+}
+
+/** `delivering` (arquivo antigo) vale como `done`; status desconhecido vale como `idle`. */
+function statusDoAgente(valor) {
+  if (valor === 'delivering') return 'done';
+  return STATUS_DE_AGENTE.includes(valor) ? valor : 'idle';
+}
+
+function lerAgente(bruto, indice) {
+  const id = texto(bruto.id) || `agente-${indice + 1}`;
+  return {
+    id,
+    name: texto(bruto.name) || id,
+    icon: texto(bruto.icon),
+    status: statusDoAgente(bruto.status),
+    label: texto(bruto.label),
+  };
+}
+
+function lerPasso(bruto) {
+  const passo = ehObjeto(bruto) ? bruto : {};
+  return { current: inteiro(passo.current, 0) ?? 0, total: inteiro(passo.total, 1), label: texto(passo.label) };
+}
+
+function lerPassagem(bruto) {
+  if (!ehObjeto(bruto) || !texto(bruto.from) || !texto(bruto.to)) return null;
+  return { from: texto(bruto.from), to: texto(bruto.to), message: texto(bruto.message), completedAt: texto(bruto.completedAt) };
+}
+
+function lerData(valor) {
+  const ms = typeof valor === 'string' ? Date.parse(valor) : Number.NaN;
+  return Number.isFinite(ms) ? ms : null;
+}
+
+/**
+ * O estado bruto, conferido campo a campo. Nunca lança erro.
+ * @param {unknown} bruto o conteúdo de um `state.json`
+ * @returns {object|null} `null` ("sem estado") quando a entrada não é objeto ou `agents` não é
+ *   lista; senão `{ crew, status, step: { current, total, label }, agents: [{ id, name, icon,
+ *   status, label }], handoff, motivo, updatedAtMs }` · `status`: execução `idle` (1.6.x) ou
+ *   desconhecida vale como `running` · `step.total` e `updatedAtMs`: `null` quando vazios ou
+ *   inválidos · `handoff`: `{ from, to, message, completedAt }` ou `null` · item de `agents`
+ *   que não é objeto fica de fora
+ */
+export function normalizar(bruto) {
+  if (!ehObjeto(bruto) || !Array.isArray(bruto.agents)) return null;
+  return {
+    crew: texto(bruto.crew),
+    status: STATUS_DE_EXECUCAO.includes(bruto.status) ? bruto.status : 'running',
+    step: lerPasso(bruto.step),
+    agents: bruto.agents.filter(ehObjeto).map(lerAgente),
+    handoff: lerPassagem(bruto.handoff),
+    motivo: texto(bruto.motivo),
+    updatedAtMs: lerData(bruto.updatedAt),
+  };
+}

package/templates/_opencrew/core/escritorio/modelo-mesas.js

@@ -0,0 +1,81 @@
+// Geometria do escritório: a tela lógica de 320×180 e as 12 mesas, em grade de 4 colunas, pela
+// ordem do elenco. Tudo em pixel lógico e inteiro; a página aplica em porcentagem da tela.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 17 e 19 (repositório do OpenCrew).
+
+export const LARGURA = 320;
+export const ALTURA = 180;
+/** Lado do molde do boneco. */
+export const BONECO = 16;
+export const COLUNAS = 4;
+export const LINHAS = 3;
+export const MAX_MESAS = COLUNAS * LINHAS;
+/** Largura de uma coluna: é também a largura do nome e do balão na página. */
+export const LARGURA_COLUNA = LARGURA / COLUNAS;
+/** Altura da parede, no alto da sala; a primeira linha de mesas começa logo abaixo. */
+export const TOPO = 18;
+export const ALTURA_LINHA = (ALTURA - TOPO) / LINHAS;
+/** Tamanho do tampo de toda mesa. */
+export const MESA = Object.freeze({ largura: 44, altura: 11 });
+
+// Cada célula (80×54), de cima para baixo: 7 px para o sinal sobre a cabeça, o boneco sentado
+// (16), 1 px de folga, o tampo da mesa (11) e o corredor da frente (19), onde um boneco em pé
+// cabe sem encostar em nada. Nenhum boneco, sentado ou andando pelos vãos, encosta num tampo.
+const SINAL = 7;
+const FOLGA_DO_ASSENTO = 1;
+const FOLGA_DA_FRENTE = 2;
+
+function congelar(valor) {
+  for (const parte of Object.values(valor)) {
+    if (parte && typeof parte === 'object') congelar(parte);
+  }
+  return Object.freeze(valor);
+}
+
+function criarMesa(indice) {
+  const coluna = indice % COLUNAS;
+  const linha = Math.floor(indice / COLUNAS);
+  const centro = coluna * LARGURA_COLUNA + LARGURA_COLUNA / 2;
+  const cabeca = TOPO + linha * ALTURA_LINHA + SINAL;
+  const tampo = cabeca + BONECO + FOLGA_DO_ASSENTO;
+  const chao = tampo + MESA.altura;
+  return {
+    indice,
+    coluna,
+    linha,
+    retangulo: { x: centro - MESA.largura / 2, y: tampo, ...MESA },
+    boneco: { x: centro - BONECO / 2, y: cabeca },
+    frente: { x: centro - BONECO / 2, y: chao + FOLGA_DA_FRENTE },
+    nome: { x: centro, y: chao + 1 },
+    balao: { x: centro, y: cabeca - 1 },
+  };
+}
+
+/**
+ * As 12 mesas, na ordem do elenco (da esquerda para a direita, de cima para baixo). Cada uma:
+ * - `indice`, `coluna`, `linha`;
+ * - `retangulo` `{ x, y, largura, altura }`: o tampo, que nenhuma caminhada atravessa;
+ * - `boneco` `{ x, y }`: canto superior esquerdo do boneco sentado, atrás do tampo;
+ * - `frente` `{ x, y }`: canto superior esquerdo do boneco em pé na frente da mesa;
+ * - `nome` `{ x, y }`: meio da borda de cima do nome, sob a mesa;
+ * - `balao` `{ x, y }`: meio da borda de baixo do balão, sobre a cabeça.
+ * A lista e as mesas são imutáveis.
+ */
+export const MESAS = congelar(Array.from({ length: MAX_MESAS }, (_, i) => criarMesa(i)));
+
+/**
+ * X do canto esquerdo de um boneco que anda pelo meio de cada vão vertical, entre duas colunas
+ * de mesas. Os vãos horizontais de cada linha ficam atrás das mesas (o `boneco.y`, por onde quem
+ * está sentado sai) e na frente delas (o `frente.y`).
+ */
+export const VAOS_X = Object.freeze([1, 2, 3].map((coluna) => coluna * LARGURA_COLUNA - BONECO / 2));
+
+/** A mesa de quem ocupa a posição `indice` do elenco; `null` do 13º em diante. */
+export function mesaDe(indice) {
+  return MESAS[indice] ?? null;
+}
+
+/** As mesas de um elenco de `total` agentes: no máximo 12. */
+export function mesas(total) {
+  return MESAS.slice(0, Math.max(0, total));
+}

package/templates/_opencrew/core/escritorio/modelo-pagina.js

@@ -0,0 +1,95 @@
+// Qual crew está na tela: a memória das consultas ao servidor (o último estado bom de cada
+// crew), a escolha do usuário e a hora de mostrar a demonstração. Cada função devolve uma
+// memória nova; a página guarda a mais recente e pergunta de novo a cada consulta.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 20, 22 e 23 (repositório do OpenCrew).
+import { estadoDaDemo } from './demo.js';
+import { normalizar } from './modelo-estado.js';
+import { TEXTOS } from './modelo-textos.js';
+import { montarModelo } from './modelo-visao.js';
+
+/** Crew que some de uma resposta válida continua por este número de consultas; na seguinte, sai. */
+export const CONSULTAS_DE_ESPERA = 3;
+
+/**
+ * A memória antes da primeira consulta: `crews` é `[{ crew, estado, atualizadoMs, faltas }]`, a
+ * de atualização mais recente primeiro (`estado` é o bruto, como veio); `escolhida` é o nome da
+ * crew que o usuário escolheu, ou `null`; `falhas` conta as consultas seguidas que falharam.
+ */
+export const MEMORIA_INICIAL = Object.freeze({ crews: Object.freeze([]), escolhida: null, falhas: 0 });
+
+/** As crews de uma resposta de `/estado`, só as de estado legível; `null` se a resposta é inválida. */
+function lerResposta(resposta) {
+  if (resposta === null || typeof resposta !== 'object' || !Array.isArray(resposta.crews)) return null;
+  const lidas = [];
+  for (const item of resposta.crews) {
+    const lido = normalizar(item?.estado);
+    const nome = typeof item?.crew === 'string' ? item.crew : '';
+    if (lido && nome) lidas.push({ crew: nome, estado: item.estado, atualizadoMs: lido.updatedAtMs ?? 0, faltas: 0 });
+  }
+  return lidas;
+}
+
+/**
+ * Junta uma consulta à memória (regra 20).
+ * @param {object} memoria a memória anterior
+ * @param {unknown} resposta o JSON de `/estado`; `null` (ou qualquer coisa inválida) quando a
+ *   consulta falhou: aí tudo fica como estava e `falhas` sobe
+ * @returns {object} a memória nova; a crew ausente continua, com o último estado bom, por
+ *   `CONSULTAS_DE_ESPERA` respostas válidas seguidas, e a escolha do usuário cai quando a crew sai
+ */
+export function consultar(memoria, resposta) {
+  const vindas = lerResposta(resposta);
+  if (!vindas) return { ...memoria, falhas: memoria.falhas + 1 };
+  const presentes = new Set(vindas.map((c) => c.crew));
+  const ausentes = memoria.crews
+    .filter((c) => !presentes.has(c.crew) && c.faltas < CONSULTAS_DE_ESPERA)
+    .map((c) => ({ ...c, faltas: c.faltas + 1 }));
+  const crews = [...vindas, ...ausentes].sort((a, b) => b.atualizadoMs - a.atualizadoMs);
+  const escolhida = crews.some((c) => c.crew === memoria.escolhida) ? memoria.escolhida : null;
+  return { crews, escolhida, falhas: 0 };
+}
+
+/** O usuário escolheu uma crew no seletor (regra 22); nome que não está na memória é ignorado. */
+export function escolher(memoria, crew) {
+  return memoria.crews.some((c) => c.crew === crew) ? { ...memoria, escolhida: crew } : memoria;
+}
+
+/**
+ * O que vai para a tela (regras 22 e 23).
+ * @param {object} memoria
+ * @param {{ demo?: boolean }} [opcoes] `demo`: o endereço tem `?demo`
+ * @returns {{ modo: 'demo'|'real', crew: string|null, estado: object|null, crews: string[], frase: string|null }}
+ *   `real`: a crew escolhida pelo usuário ou, sem escolha, a de atualização mais recente, com o
+ *   estado bruto dela; `crews` são os nomes para o seletor · `demo`: sem nenhuma crew, ou com
+ *   `?demo` (aí sem seletor); `frase` é a da §6 para cada caso
+ */
+export function emExibicao(memoria, { demo = false } = {}) {
+  const semCrew = { modo: 'demo', crew: null, estado: null };
+  if (demo) return { ...semCrew, crews: [], frase: TEXTOS.demoForcada };
+  const crews = memoria.crews.map((c) => c.crew);
+  if (!crews.length) return { ...semCrew, crews, frase: TEXTOS.demonstracao };
+  const atual = memoria.crews.find((c) => c.crew === memoria.escolhida) ?? memoria.crews[0];
+  return { modo: 'real', crew: atual.crew, estado: atual.estado, crews, frase: null };
+}
+
+/**
+ * A página inteira num instante: escolhe a crew (ou a demonstração) e monta o modelo dela.
+ * @param {object} memoria
+ * @param {object} [opcoes]
+ * @param {number} [opcoes.agoraMs] a hora atual, em milissegundos
+ * @param {boolean} [opcoes.reduzirMovimento] o sistema pede menos movimento
+ * @param {boolean} [opcoes.demo] o endereço tem `?demo`
+ * @param {number} [opcoes.decorridoDemoMs] tempo desde que a demonstração entrou na tela
+ * @returns {object} o modelo de `montarModelo`, mais `modo` (`demo` ou `real`), `crews` (nomes
+ *   para o seletor), `frase` (a da demonstração, ou `null`) e `aviso` (o "sem conexão" da §6,
+ *   ou `null`)
+ */
+export function montarPagina(memoria, opcoes = {}) {
+  const { agoraMs, reduzirMovimento = false, decorridoDemoMs = 0 } = opcoes;
+  const { modo, crew, estado, crews, frase } = emExibicao(memoria, opcoes);
+  const demo = modo === 'demo';
+  const semConexao = memoria.falhas > 0;
+  const modelo = montarModelo(demo ? estadoDaDemo(decorridoDemoMs) : estado, { agoraMs, reduzirMovimento, demo, semConexao, crew });
+  return { ...modelo, modo, crews, frase, aviso: semConexao ? TEXTOS.semServidor : null };
+}