Remove legacy vanilla HTML UIs, keep only React SPA

[breno23augusto]

O que mudou

Substituição do dashboard HTML monolítico inline (src/server/index.html e src/server/kanban.html) por uma SPA React com Vite em frontend/, servida pelo mesmo dashboard.ts.

🏗️ Novo frontend (Vite + React + MUI)

• frontend/ — SPA React com TypeScript, Vite, MUI (Material UI)
  • frontend/src/App.tsx — rotas: / (Dashboard) e /runs/:id/kanban (Kanban)
  • frontend/src/pages/Dashboard.tsx — tabela de runs, gráficos, status MCP
  • frontend/src/pages/Kanban.tsx — swim-lane view com cards expansíveis
  • frontend/src/components/ — Layout, DashboardCharts, MarkdownRenderer
  • frontend/src/api/client.ts — cliente HTTP para API do dashboard
  • frontend/vite.config.ts — proxy /api → http://localhost:3334
  • frontend/dist/ — build output servido pelo dashboard.ts

🎨 Design System — Forest Canopy

• Tema escuro com paleta verde-musgo (#2d4a2d, #3d5e3d) e tons quentes de terra
• Tipografia: headings em serifa (Lora), corpo em sans-serif (Inter)
• Logo original do Tamandua restaurado como favicon e header

🔥 Arquivos removidos

• src/server/index.html (1178 linhas) — dashboard inline HTML+CSS+JS
• src/server/kanban.html (1335 linhas) — kanban inline HTML+CSS+JS

🔧 Alterações no servidor (src/server/dashboard.ts)

• Rota GET / agora serve frontend/dist/index.html (React SPA)
• Rota GET /runs/:id/kanban serve a mesma SPA (client-side routing via React Router)
• Nova rota GET /assets/* para servir assets estáticos do frontend (JS, CSS, imagens, fontes)
• Nova rota GET /api/runs/:id/events — expõe eventos de uma run específica
• Porta padrão do dashboard alterada de 3333 para 3334 (consistente com a documentação)

📦 Build (package.json)

• npm run build agora compila o frontend (cd frontend && npm install && npx vite build)
• Removeu o cp dos HTMLs legados para dist/server/

🧪 Testes

• src/server/kanban-html.test.ts — reescrito para validar SPA React (root div, script tag, fontes)
• tests/dashboard-kanban.test.ts — reescrito: valida API + SPA em vez de HTML inline
• tests/dashboard-run-token-spend.test.ts — removeu teste que lia index.html legado
• tests/dashboard-status-mcp.test.ts — valida SPA em vez de HTML inline
• tests/system-token-spend-counter.test.ts — novo: teste e2e do contador de tokens do sistema
• tests/serial-files.txt — adicionado system-token-spend-counter.test.ts à lane serial
• tests/www-content-sync.test.ts — assertions mais flexíveis para o www redesign
• tests/www-index.test.ts — adaptado para nova estrutura de seções e navegação do www
• tests/www-styles.test.ts — adaptado para novas classes CSS (.why-card, .pipeline-flow, etc.)
• tests/agentsmd-skill-update-warning.test.ts — atualizado para referenciar frontend/
• tests/audit-agents-md.test.ts — atualizado para remover referência a index.html

🌐 Site www (www/)

• Redesign completo: novo hero com terminal interativo, seções reorganizadas, tipografia DM Sans/Inter/JetBrains Mono, logo SVG, cards "Why Tamandua", pipeline flow visual, seção AutoResearch, seção Commands, seção Security
• www/styles.css — refatorado: novas classes (.why-card, .pipeline-flow, .terminal-*, .why-grid), breakpoints ajustados, classes legadas removidas (.feature-icon, .arch-step, .why-list, .yaml-code)
• www/scripts.js — scroll spy atualizado para novos IDs de seção

📝 Workflow de teste de frontend

• workflows/frontend-test/ — agent instructions e workflow YAML atualizados para validar a SPA React em vez dos HTMLs legados

📚 Documentação

• AGENTS.md — estrutura do projeto atualizada (remove index.html/kanban.html, adiciona frontend/)
• skills/tamandua-agents/SKILL.md — artefatos para revisar: frontend/ no lugar de src/server/index.html
• audit-agents-md.md — tabela de artefatos: frontend/ no lugar de src/server/index.html

🐛 Fix extra

• src/server/daemon.ts — porta padrão do dashboard corrigida de 3333 para 3334
• src/server/kanban-data.ts — formatação de datas legível (DD/MM HH:mm), indicador "retries exhausted" nos cards

Por que

O HTML inline em src/server/ era difícil de manter, sem type safety, sem componentização, e impedia evoluções mais complexas da UI (gráficos interativos, lazy loading, estado global). A migração para React + Vite + MUI traz:

• Componentização — Layout, Charts, Markdown reutilizáveis
• Type safety — TypeScript em todo o frontend
• Build otimizado — Vite com code splitting, tree shaking, asset hashing
• Roteamento client-side — React Router para navegação sem recarregar
• Manutenibilidade — Separação clara entre servidor e frontend

Breaking changes

• Dashboard não serve mais HTML inline — requer frontend/dist/ compilado
• Porta padrão do dashboard agora é 3334 (era 3333)
• GET /assets/* é uma nova rota reservada para assets do frontend

Como testar

./build                          # compila TypeScript + frontend
npm test                         # testes unitários + integração
./run-all-e2e-tests              # smoke + scripted (zero tokens)

Artefatos revisados

• docs/creating-workflows.md — sem referências aos HTMLs removidos
• skills/tamandua-agents/SKILL.md — atualizado
• src/server/mcp-server.ts — sem referências
• src/cli/cli.ts — sem referências
• frontend/ — novo (SPA React)
• README.md — sem referências aos HTMLs removidos
• AGENTS.md — atualizado
• audit-agents-md.md — atualizado

[breno23augusto]

@igorhvr veja o que acha, achei que deu uma visibilidade melhor no kanban.