Preel — plano técnico (v0, 2026-07-25)

Insight central de arquitetura

Separar cérebro de músculo (aprendizado do fluxo manual de gravação com agent-browser):

• Modo Descoberta — LLM (Claude) + snapshot de acessibilidade decide passos. Roda 1x por fluxo (onboarding) e em reparo. Caro ($0,5–2), lento. Output = flow script compilado, não o vídeo.
• Modo Replay — executa flow script determinístico, sem LLM, com trusted events (CDP Input domain / Playwright — nunca dispatchEvent sintético: os hacks de native setter do React e autocomplete que exige clique real são sintomas de evento não-confiável). Centavos, segundos, roda em toda PR.
• Self-healing — step falha → agente re-entra naquele ponto com script antigo + snapshot atual, propõe patch, re-replaya, salva versão nova e anota no comment. Se não resolve → comment de falha com screenshot (sinal útil: a PR quebrou o fluxo).

Componentes

1. GitHub App — webhook de PR, comment com gif 6s + link mp4 (GitHub não embeda vídeo).
2. Control plane — Next.js + Convex + Clerk (stack já dominada no Recastr). Fila: Convex scheduler ou Inngest.
3. Sandbox runner — Fly Machines (1ª opção) ou E2B. VM efêmera com docker: clone, build, app, Chromium, replay engine. Secrets só como env da VM.
4. Recorder — CDP Page.startScreencast → webm, dentro da VM.
5. Editor — ffmpeg dirigido por timeline.json (timestamps de cada step do replay engine): gap >1,5s → corta pra 0,4s; fill → setpts 1.4x; mask → boxblur na região/intervalo; marker → chapter. Zero contact sheet — a timeline é programática.
6. Storage — Cloudflare R2 (egress grátis).

Flow script (artefato central)

version: 1
name: checkout-flow
viewport: [1440, 900]
style: { typingDelayMs: 45, pauseAfterActionMs: 600 }
steps:
  - goto: /
  - click:  { role: button, name: /entrar/i }
  - fill:   { role: textbox, name: /email/i, value: "{{env.DEMO_EMAIL}}" }
  - fill:   { role: textbox, name: /senha/i, value: "{{env.DEMO_PASSWORD}}", mask: true }
  - assert: { url: /dashboard/ }
  - exec:   { run: "node scripts/simulate-webhook.js" }
  - wait_for: { text: /assinatura ativa/i }
  - marker: { label: "plano ativo" }

• Seletores por acessibilidade (role+name) — sobrevivem a refactor e são o vocabulário do agente. Fallback CSS/text.
• mask → blur (secret nunca aparece no vídeo). exec → estado mid-flow (caso webhook/seed). marker → capítulo.
• Versionado no control plane, legível/editável pelo user.

Config no repo (.preel.yml)

build:
  setup: npm ci
  seed: npm run seed:demo
  start: npm run dev
  ready: { port: 3000, path: /, timeout: 120 }
env: [DATABASE_URL, DEMO_EMAIL, DEMO_PASSWORD]  # valores no dashboard
flows: [checkout-flow]

v1 não detecta stack — user declara (igual CI). Detecção automática = v2. Banco: start+seed responsabilidade do user (SQLite, docker-compose, staging Neon/Supabase próprio).

Custos por execução

• Replay: VM 2cpu/4GB ~3–6 min (build domina) ≈ $0,01–0,03 + storage. Viável por-PR.
• Discovery/reparo: +$0,5–2 LLM, raro.
• Build cache (layer de deps por repo) corta 5min → <1min — fazer cedo, é custo E latência.

Fases

• F1 — validação (2–3 sem): sem GitHub App. Dashboard/CLI: repo + config + env → discovery → vídeo. Cobaias: vek1, sageland, prospek. Prova agente-autor + replay + edição automática.
• F2 — produto (3–4 sem): GitHub App, comment gif+link, self-healing, dashboard de fluxos/versões.
• F3: build cache, detecção de stack, múltiplos fluxos, narração/legendas (reconecta com motor Recastr).

Riscos

1. Tempo de build mata UX → cache agressivo + rodar só quando PR toca código relevante.
2. App sem dado não gera demo útil → seed obrigatório no onboarding, validado pelo agente.
3. Flake de replay → wait_for explícito em todo step (agente gera), retry 1x antes do reparo.

Reaproveitamento do Recastr

Copiar (não a marca): worker Playwright/CDP + screencast + WS streaming, lições de infra (Railway, WORKER_SECRET). Runner, GitHub App, flow script e frontend = novos.

Ver preel-overview pro contexto de mercado e defensibilidade.