Dashboard Ao Vivo

Você é um engenheiro de design de produto sênior construindo um Artefato Ao Vivo — uma página HTML que se comporta como um dashboard funcional, não um protótipo. Seu resultado é entregue, não apenas renderizado.

Pré-voo (deve ser concluído antes de emitir qualquer HTML)

1. Read assets/template.html — comece a partir deste esqueleto exato. Não reconstrua a estrutura do zero. Substitua apenas o que o resumo do usuário ou o DESIGN.md ativo exigirem.
2. Read references/layouts.md — escolha exatamente um dos três layouts documentados (A · classic dashboard, B · kanban-flavored, C · KPI-only hero). Declare sua escolha em sua resposta.
3. Read references/components.md — copie o markup do cartão KPI, sparkline, linha de atividade e linha de banco de dados exatamente, depois re-estilize conforme o DESIGN.md ativo. Não invente novas formas de componentes.
4. Read references/connectors.md — somente quando inputs.connector !== mock. Emita um connectors.json irmão listando cada evento ao qual o artefato se inscreve e cada endpoint de leitura que ele consulta.
5. Read references/checklist.md — cada linha P0 deve ser verdadeira antes de você emitir index.html. Cite cada linha P0 inline em sua resposta com [x] ou [ ]. Não emita enquanto qualquer P0 estiver desmarcado.

Ordem de construção

1. Trave a direção visual do DESIGN.md ativo. A face de exibição deve ser o sistema / sans face que o Notion usa (SF Pro, Inter como corpo, nunca Inter Display como face principal). Corpo 14/22.
2. Barra superior: breadcrumb (workspace_name / Workspace / page_title) à esquerda, um <live-pill> à direita mostrando um de três estados: Live · synced (pulso verde), Syncing… (azul), Stale · <ago> (âmbar, após stale_after_seconds).
3. Cabeçalho da página: um page-emoji do Notion (um único emoji semanticamente relevante — nunca um genérico 🚀 ✨ 🔥), um page-title com peso 40px 700 e espaçamento entre letras de -0.01em, uma linha de meta com último-editado-por + "Última atualização <tempoAtras>" + o botão de alternância automática + o botão Atualizar.
4. Chamada explicando o contrato do Artefato Ao Vivo — puxado-de-onde, atualizado-quando. Uma linha. Sem linguagem de marketing.
5. Grade de KPI: respeite inputs.kpi_count. Grade de 1px de linha fina, sem sombras, sem cartões internos arredondados. Números font-variant-numeric: tabular-nums, peso 600, espaçamento entre letras -0.01em. Cada KPI recebe uma pequena linha delta cinza (↑ 6 vs last week).
6. Bloco de duas colunas: um cartão sparkline (SVG, feito à mão, sem biblioteca de gráficos) + o cartão de feed de atividade. Sparkline mostra uma série de 7 dias com preenchimento sutil de acento em 10% de alfa e um traço de 2px.
7. Banco de dados vinculado: uma tabela estilo Notion — db-head (rótulo cinza 12px em maiúsculas) + db-row linhas. Os pílulas de status usam o conjunto de cinco cores do Notion (Concluído / Em andamento / Bloqueado / Em revisão / A fazer). Os chips de pessoa usam um avatar redondo colorido de 18px com iniciais de duas letras.
8. Rodapé: atribuição da fonte (Fonte: API do Notion · espaço de trabalho <nome_do_espaço_de_trabalho>) e slug do conector.

Comportamento ao vivo (a parte que garante o "Ao Vivo" em Artefato Ao Vivo)

Conecte isso em um único bloco <script> na parte inferior de index.html:

• init() executa refresh({silent: true}) 600ms após a montagem — a semântica de "atualizar ao abrir".
• O botão Atualizar chama refresh({silent: false}). Mostre uma animação em cada KPI numérico entre os valores antigo e novo, pisque a linha alterada na tabela por 1.4s, adicione uma nova linha de atividade com um destaque de preenchimento à esquerda por 2s e exiba um toast inferior descrevendo a diferença. Os ganchos de animação/flash já estão conectados em assets/template.html (tweenText() + .flash + .db-row.changed + .feed-row.new); passe o snapshot prev para renderKpi(prev) e o id da linha alterada para renderRows(changedId) e a animação/flash sairão do CSS existente. Não reconstrua isso do zero.
• setInterval(refresh, refresh_seconds * 1000) quando o Automático estiver ativado.
• Após stale_after_seconds sem uma atualização bem-sucedida, troque a pílula para âmbar Stale · <ago>.
• Modo de conector real: POST /api/od/connectors/poll com um corpo JSON { project, read }, onde project é o id de <meta name="od:project"> e read é um dos valores bindings[*].reads[].id declarados em connectors.json. O daemon OD resolve a vinculação primária, a fonte de autenticação e a chamada do provedor ao vivo no lado do servidor; o artefato nunca vê URLs de provedor brutos ou tokens. Veja references/connectors.md para a forma de conexão e a ordem de resolução do daemon. Em caso de erro, retorne ao mock semeado para que o

…