# Protótipo v2 — a referência atual

`aprova.html` é o protótipo completo e navegável do produto redesenhado. Abra no navegador.
Não precisa de servidor: é um arquivo só, com CSS, JS e imagens embutidos.

Substitui `prototipos/01-produto.html` como referência de comportamento. Os quatro protótipos
originais continuam no repositório pelo raciocínio que carregam — ver a tabela em
`prototipos/README.md`.

## O que olhar, em ordem

A barra preta do topo **não faz parte do produto**. É o controle da simulação: troca entre
estúdio, cliente e equipe sobre o mesmo estado.

**1 · Estúdio.** O painel da rodada. A faixa de fase mostra em que ponto o ciclo está, quem
está segurando e só as ações válidas agora. Os números embaixo filtram a grade.

**2 · Cliente.** Sem conta, sem senha. Ele escolhe quem é, vê a grade e comenta. Repare no
progresso no topo e no rodapé — é o que evita revisão pela metade.

**3 · Abra a imagem 08 (Hall — balcão de recepção).**
Arraste para mover, role para dar zoom, `1` para resolução total. O contador no canto mostra
quantos MB você baixou contra os 92,8 MB do PNG original. Chega a 1:1 real com cerca de
0,25 MB — é a prova de D6, agora dentro do produto e não num teste separado.
Só essa imagem tem a pirâmide completa neste protótipo; nas outras o zoom para antes.

**4 · Marque alguma coisa.** Três ferramentas na barra: ponto, área e seta. O campo de texto
abre ancorado na marcação. Dentro dele dá para **anexar uma referência** de três jeitos:
o clipe, arrastar a imagem para cima do campo, ou simplesmente colar. Depois de enviar,
clicar no anexo abre a imagem no painel lateral, ao lado do render.

**4b · Corrija o que você escreveu.** No trilho da direita, os comentários seus trazem
**editar**. Os dos outros revisores, não — e o estúdio não edita nenhum comentário de cliente,
em modo nenhum. Texto alterado passa a exibir *editado*.

**5 · Vídeo V1 (Fachada — animação de aproximação).** Linha do tempo com os comentários como
marcadores. Clicar num marcador leva ao instante. Comentar guarda o tempo junto com o ponto.
O movimento é simulado a partir de um render — não há arquivo de vídeo aqui.

**6 · Equipe, com a rodada ainda na janela do cliente.** É a regra 1 do produto funcionando:
a equipe vê as imagens, não vê o retorno, e a tela diz por quê.

**7 · Encerre a janela e libere para a equipe.** Cai no **quadro de etapas**: uma matriz de
item por etapa do pipeline. Clique numa célula para avançar o estado, `alt`+clique para marcar
não se aplica, clique no cabeçalho para fechar a etapa inteira de uma vez. Só entram os itens
que o cliente pediu para ajustar. A aba ao lado é a fila de comentários, onde se marca
situação, responsável e resposta.

**7a · A aba "Tarefas" é a área interna do estúdio.** Uma linha por tarefa, agrupada por
responsável. Repare que há tarefas **internas** junto com os pedidos do cliente — coisas que o
estúdio se deu para fazer, que o cliente não vê. Use **"+ Adicionar tarefa"** no fim de um
grupo para criar uma: ela já nasce atribuída àquele grupo. Troque **Você é** e ligue
**"Só as minhas"** para ver a tela virar a lista pessoal do artista. A bolinha à esquerda
avança a situação num clique.

**7b · Clique em "Editar etapas".** O pipeline é seu: renomear, reordenar, adicionar, remover.
Cada etapa diz para que tipo vale — repare que Pós-produção só aparece nas imagens e Montagem
só no vídeo. Adicione uma etapa e leia o aviso: ele diz que o percentual do cliente vai cair
de tanto para tanto. Remova a Iluminação e ele avisa que você perde marcação já feita.
A aba **Modelo do estúdio** edita o padrão da casa sem tocar neste projeto.

**7c · Volte para o cliente.** Agora ele vê o **andamento**: percentual, data prevista e a
situação de cada item — com o nome público da etapa, não a matriz. O botão no cabeçalho do
quadro liga e desliga isso a qualquer momento; desligado, o cliente vê só a data prevista.

**8 · Suba a versão 2.** Os comentários abertos migram marcados como herdados; os resolvidos
não voltam. Reabra a imagem 08 e use **Comparar versões** — a cortina varre entre as duas com
o mesmo zoom e enquadramento.

**8b · Cronograma.** Uma faixa por etapa do pipeline. **Arraste uma barra** para mover a etapa,
**puxe a borda** para esticar, ou digite as datas — tudo encaixa no dia. "Reencadear" recoloca
tudo em sequência a partir do fim da janela.

Agora volte ao modo **Cliente** e clique em **Prazos e cronograma** no topo. Ele vê o mesmo
cronograma em qualquer fase, com as etapas públicas pelo nome público (a "Revisão interna"
some), a data de entrega, e — o que interessa a ele — **sua próxima janela de aprovação**,
hachurada, logo depois da entrega. Mude uma data no estúdio e volte: a dele acompanha, porque
sai da mesma faixa.

> A barra preta do topo mostra o **build**. Se ele não mudar depois de rodar `montar.py`, o
> navegador está servindo cópia velha — recarregue com `Ctrl+Shift+R`.

**9 · Relatório.** O registro da rodada, imprimível.

## Atalhos, dentro do visualizador

| tecla | ação |
|---|---|
| `←` `→` | item anterior e seguinte |
| `F` | ajustar à tela |
| `1` | resolução total |
| `C` | comparar versões |
| `R` | referência do briefing |
| `A` | aprovar ou desfazer |
| `espaço` | tocar o vídeo |
| `Esc` | fecha o comentário em edição; depois fecha o visualizador |

## Como é montado

`aprova.html` é **gerado**. Editar direto se perde na próxima montagem.

```
_fonte/
  aprova.template.html   marcação e todo o CSS
  app-1-telas.js         estado, dados de demonstração, telas
  app-2-viewer.js        visualizador, player, ações, teclado
  gerar_assets.py        lê os renders e produz assets.json (base64)
  montar.py              junta tudo em ../aprova.html
```

```bash
cd _fonte
python montar.py         # depois de mexer no template ou no JS
python gerar_assets.py   # só quando trocar os renders — é lento
```

`gerar_assets.py` lê os arquivos originais de `C:\_claude\Aprova` (caminho no topo do script).
Sem eles, `montar.py` continua funcionando com o `assets.json` já gerado.

## Limites conhecidos

São limites do protótipo, não do produto:

- Nada persiste. Recarregar volta ao estado inicial.
- Não há servidor, então também não há permissão de verdade. As regras de fase estão
  implementadas na interface; no produto elas precisam valer no servidor, em toda rota
  (`docs/04-modelo-de-dados.md`).
- O vídeo é movimento simulado sobre um render estático.
- Só a imagem 08 tem pirâmide até o 1:1.
- Anexo no comentário aparece montado, mas não dá para enviar arquivo novo.

## Dados

Estúdio, projeto, cliente e revisores são rótulos de exemplo, com e-mail em `example.com` —
domínio que a RFC 2606 reserva para documentação e que não entrega mensagem para ninguém.
Os comentários foram escritos para o protótipo.

**As imagens são renders reais de cliente.** Vale `docs/08-privacidade.md`: uso interno,
não usar em demonstração comercial até P2 estar resolvido. Trocar o conjunto é editar o
`CATALOGO` no topo de `gerar_assets.py` e rodar os dois scripts.