Ficha de cena da máquina (curso Frontends com Vibecoding, capítulo bônus, 25/09/2026)
======================================================================================

Preencha os dez campos ANTES do primeiro pedido ao agente. Copie um bloco por cena.
Número sem fonte e data vira "cenário ilustrativo" e o rótulo viaja colado ao número.

--------------------------------------------------------------------------------------
cena: <nome curto, por exemplo "orquestrador com harness">
objetivo_didatico: <uma frase: o que a pessoa leiga precisa perceber em dez segundos>
metafora: <a metáfora de negócio e a metáfora a EVITAR>
roteiro:
  - 0-3 s: <o que aparece e o que a pessoa percebe>
  - 3-8 s: <...>
  - 8-14 s: <...>
  - 14-20 s: <o estado final e o que mudou>
dado_real:
  valor: <número com unidade>
  fonte: <quem publicou, título>
  data: <DD/MM/AAAA da consulta ou da publicação>
  url: <endereço>
  rotulo: <"medido" ou "anunciado" ou "cenário ilustrativo">
biblioteca:
  degrau_mais_barato: <CSS puro, SVG, Canvas 2D, Motion, React Flow, Three.js...>
  pacote_e_versao: <nome e faixa do package.json>
  por_que_nao_o_degrau_de_baixo: <a razão em uma frase>
estados_obrigatorios:
  sem_javascript: <o que fica visível: figura estática com a mesma história>
  movimento_reduzido: <nada anda sozinho; como a pessoa avança>
  sem_webgl_ou_sem_api: <aviso e alternativa>
  celular_fraco: <teto de partículas, corpos, quadros>
orcamento:
  peso_antes_do_clique_kb: <0 se a biblioteca só desce por botão>
  peso_depois_do_clique_kb: <medido no build, gzip>
  quadro_ms: <16,7 a 60 Hz; 8,3 a 120 Hz>
  quadros_longos_permitidos: <0 acima de 50 ms durante a interação>
acessibilidade:
  rotulo_do_palco: <role="img" ou "group" com aria-label que resume o estado>
  regiao_de_status: <uma só, role="status", texto por etapa>
  teclado: <todo controle alcançável; alvo de 44 px>
  contraste: <AA nos dois temas, cor só por token>
criterio_de_aceite:
  - <mensurável: "tempo de parede = duração do mais lento, não a soma">
  - <mensurável: "0 quadros longos ao disparar a cena no celular de referência">
  - <mensurável: "figura estática lida sem JavaScript conta a mesma história">
prompt_conteiner: <ver prompt-conteiner-cena.txt>
--------------------------------------------------------------------------------------

Exemplo preenchido: orquestrador com harness (a cena 1 do capítulo)
--------------------------------------------------------------------------------------
cena: orquestrador com harness
objetivo_didatico: a pessoa percebe que o tempo de parede é o do modelo mais lento e que a verificação devolve o resultado reprovado ao começo
metafora: balcão de despacho de transportadora; evitar o maestro, que sugere harmonia contínua e esconde a volta
roteiro:
  - 0-3 s: o pedido entra e o orquestrador parte em cinco tarefas; cinco arestas acendem juntas
  - 3-12 s: as cinco correm; a barra de parede cresce; a soma cresce cinco vezes mais rápido
  - 12-15 s: a verificação reprova uma resposta; a aresta de volta fica vermelha; a tarefa reexecuta
  - 15-20 s: a resposta sai; a leitura compara 221 s de parede com 360 s de soma
dado_real:
  valor: parede 221 s; soma 360 s; custo US$ 0,48; 5 de 5 agentes
  fonte: geo-orchestrator, board de cinco modelos, arquivo 5llm_board_analysis.json
  data: 25/09/2026
  url: https://github.com/alexandrebrt14-sys/geo-orchestrator
  rotulo: medido
biblioteca:
  degrau_mais_barato: React Flow (grafo com estado por nó); a figura estática é SVG à mão
  pacote_e_versao: @xyflow/react ^12.11.3
  por_que_nao_o_degrau_de_baixo: o grafo tem estado por nó, zoom e toque; SVG à mão não guarda estado
estados_obrigatorios:
  sem_javascript: figura em SVG do anel do harness com a legenda que afirma a volta
  movimento_reduzido: sem aresta animada; botão "Avançar etapa"
  sem_webgl_ou_sem_api: não se aplica (DOM e SVG)
  celular_fraco: nove nós; grade 3 mais 2 abaixo de 1150 px
orcamento:
  peso_antes_do_clique_kb: 0 (o laboratório desce quando entra na tela)
  peso_depois_do_clique_kb: cerca de 45 (React Flow comprimido) mais CSS
  quadro_ms: 16,7
  quadros_longos_permitidos: 0
acessibilidade:
  rotulo_do_palco: role="img" com o resumo do grafo
  regiao_de_status: uma, com narração por etapa, parede, soma, reexecuções e custo
  teclado: botões e interruptores com 44 px e foco visível
  contraste: tokens do tema nos dois modos
criterio_de_aceite:
  - no modo paralelo a leitura de parede é igual à maior duração e nunca à soma
  - com a verificação ligada existe exatamente uma volta e a leitura conta uma reexecução
  - com movimento reduzido nenhuma aresta se move e a cena avança só por botão
prompt_conteiner: prompt-conteiner-cena.txt, bloco 1
--------------------------------------------------------------------------------------