primocode 7.15.0 → 7.17.0

package/lib/streaming.js

@@ -1,661 +0,0 @@
-/**
- * streaming.js — o painel "ao vivo": ver o agente mexendo no computador.
- *
- * O agente age no desktop do usuário (clica, digita, abre janela), mas rápido
- * demais para acompanhar a olho nu — e às vezes numa janela que não está na
- * frente. O /streaming liga um servidorzinho HTTP local que abre um site com
- * a cara do PrimoCode: mascote + nome no cabeçalho e, abaixo, uma "janela"
- * com ABAS — "Ao vivo" mostra a tela agora, e cada app/janela em que o agente
- * mexeu vira uma aba própria, com os passos e as fotos daquele app. Dá para
- * voltar e rever o que ele já fez, passo a passo.
- *
- * Zero dependências: http nativo, uma página HTML embutida que consulta
- * /state a cada 700ms. Só escuta em 127.0.0.1 — nada disso sai da máquina.
- */
-
-'use strict';
-
-const http = require('http');
-const fs = require('fs');
-const path = require('path');
-const os = require('os');
-const { exec } = require('child_process');
-const desktop = require('./desktop');
-
-const DIR = path.join(os.homedir(), '.primocode', 'streaming');
-const MAX_LOG = 300;
-// Fotos guardadas em disco para o "voltar no tempo" das abas. Além disso a
-// pasta viraria um álbum infinito — as mais velhas saem.
-const MAX_FRAMES = 80;
-const MAX_ABAS = 12;
-// Uma foto por ação no máximo a cada 600ms: digitar letra por letra não pode
-// virar uma rajada de screenshots.
-const INTERVALO_FOTO_MS = 600;
-
-const state = {
-    on: false,
-    server: null,
-    url: '',
-    frames: [],        // [{ id, hora, acao, aba }] — id é o nome do arquivo
-    proximoFrame: 1,
-    abas: [],          // [{ id, nome, passos: 0 }] — "Ao vivo" é virtual, não entra aqui
-    abaAtual: null,
-    log: [],
-    instrucoes: [],    // o que o usuário pediu — a página autopreenche digitando
-    erroFoto: null,
-    ultimaFoto: 0,
-    passo: 0,
-    // ── vídeo ao vivo ──
-    liveSeq: 0,        // sobe a cada frame novo; a página troca a imagem quando muda
-    liveAt: 0,         // quando o último frame de vídeo foi capturado
-    viewerAt: 0,       // último sinal de que alguém está com a página aberta
-    liveTimer: null,
-    liveBusy: false,   // uma captura em voo por vez — sem isso cada poll da página
-                       // abria OUTRA cadeia de captura e elas se multiplicavam
-};
-
-const LIVE = () => path.join(DIR, 'live.png');
-const LIVE_TMP = () => path.join(DIR, 'live-tmp.png');
-
-// ── O vídeo: um loop de captura enquanto alguém assiste ──────────────────
-// "Vídeo" aqui é o jeito honesto de fazer sem dependência: fotografar a tela
-// em sequência (2 a 3 quadros por segundo, conforme a máquina aguenta) e a
-// página trocar a imagem no ritmo — como um VNC simples. O loop é assíncrono
-// (exec, nunca execSync) para não roubar tempo do agente, escreve num tmp e
-// renomeia (troca atômica: o navegador nunca lê um PNG pela metade), e SÓ
-// roda enquanto a página deu sinal de vida há menos de 8s — painel fechado
-// não custa nada.
-function viuAgora() {
-    state.viewerAt = Date.now();
-    agendarVideo(0);
-}
-
-function agendarVideo(ms) {
-    if (!state.on || state.liveTimer || state.liveBusy) return;
-    state.liveTimer = setTimeout(cicloVideo, ms);
-    state.liveTimer.unref();
-}
-
-function cicloVideo() {
-    state.liveTimer = null;
-    if (!state.on || state.liveBusy) return;
-    if (Date.now() - state.viewerAt > 8000) return;   // ninguém olhando — o próximo /state religa
-
-    const cmd = desktop.screenshotCommand(LIVE_TMP());
-    if (!cmd) { if (!state.erroFoto) state.erroFoto = 'screenshot indisponível nesta máquina'; return; }
-
-    const t0 = Date.now();
-    state.liveBusy = true;
-    exec(cmd, { timeout: 8000 }, (err) => {
-        state.liveBusy = false;
-        const dur = Date.now() - t0;
-        if (!err) {
-            try {
-                // Rename é atômico; no Windows ele pode falhar se o navegador
-                // estiver lendo o arquivo NAQUELE instante — aí copia por cima.
-                try { fs.renameSync(LIVE_TMP(), LIVE()); }
-                catch { fs.copyFileSync(LIVE_TMP(), LIVE()); try { fs.unlinkSync(LIVE_TMP()); } catch {} }
-                state.liveSeq++;
-                state.liveAt = Date.now();
-                state.erroFoto = null;
-            } catch {}
-        } else if (!state.erroFoto) {
-            state.erroFoto = corta(String(err.message || err), 120);
-        }
-        // Máquina rápida ≈ 3 quadros/s; máquina lenta desacelera sozinha.
-        agendarVideo(Math.max(280, Math.min(1200, dur)));
-    });
-}
-
-// Ações cujo efeito aparece NA TELA — são as que merecem uma foto nova.
-const ACOES_NA_TELA = new Set([
-    'desktop_click', 'desktop_double_click', 'desktop_click_element',
-    'desktop_move', 'desktop_drag', 'desktop_type', 'desktop_key',
-    'desktop_scroll', 'desktop_open_app', 'desktop_focus', 'desktop_screenshot',
-    'browser_open', 'browser_click', 'browser_type', 'browser_key',
-    'browser_scroll',
-]);
-
-function isOn() { return state.on; }
-function url() { return state.url; }
-
-const corta = (s, n) => { const t = String(s ?? ''); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
-
-// A frase humana de cada ação — é o que aparece na linha do tempo.
-function descrever(name, args = {}) {
-    switch (name) {
-        case 'desktop_click': return `clique em (${args.x}, ${args.y})`;
-        case 'desktop_double_click': return `clique duplo em (${args.x}, ${args.y})`;
-        case 'desktop_click_element': return `clique em “${corta(args.name, 40)}”${args.double ? ' (duplo)' : ''}`;
-        case 'desktop_move': return `mouse para (${args.x}, ${args.y})`;
-        case 'desktop_drag': return `arrastou (${args.from_x}, ${args.from_y}) → (${args.to_x}, ${args.to_y})`;
-        case 'desktop_type': return `digitou “${corta(args.text, 40)}”`;
-        case 'desktop_key': return `tecla ${args.key}`;
-        case 'desktop_scroll': return `rolou a tela (${args.dy ?? 300})`;
-        case 'desktop_open_app': return `abriu ${corta(args.app || args.name, 40)}`;
-        case 'desktop_focus': return `focou a janela “${corta(args.window || args.title, 40)}”`;
-        case 'desktop_windows': return 'listou as janelas abertas';
-        case 'desktop_elements': return `leu os elementos${args.window ? ` de “${corta(args.window, 30)}”` : ' da janela em foco'}`;
-        case 'desktop_screenshot': return 'tirou um print da tela';
-        case 'desktop_size': return 'mediu a tela';
-        case 'browser_open': return `abriu ${corta(args.url, 60)} no navegador`;
-        case 'browser_click': return `clicou em “${corta(args.text || args.selector || `${args.x},${args.y}`, 40)}” na página`;
-        case 'browser_type': return `digitou “${corta(args.text, 40)}” na página`;
-        case 'browser_key': return `tecla ${args.key} na página`;
-        case 'browser_scroll': return 'rolou a página';
-        case 'browser_read': return 'leu a página';
-        case 'browser_screenshot': return 'print da página';
-        case 'browser_wait': return `esperou ${corta(args.selector, 40)}`;
-        case 'browser_eval': return 'rodou JavaScript na página';
-        case 'write_file': return `criou/reescreveu ${corta(args.path, 50)}`;
-        case 'edit_file': return `editou ${corta(args.path, 50)}`;
-        case 'multi_edit': return `editou ${corta(args.path, 50)} (várias trocas)`;
-        case 'read_file': return `leu ${corta(args.path, 50)}`;
-        case 'run_shell': return `rodou: ${corta(args.command, 60)}`;
-        case 'run_in_new_terminal': return `terminal novo: ${corta(args.command, 50)}`;
-        case 'write_todos': return 'atualizou o plano';
-        default: return name.replace(/_/g, ' ');
-    }
-}
-
-// ── Abas: uma por app/janela em que o agente mexeu ────────────────────────
-// Abrir um app, focar uma janela ou abrir um site começa (ou reencontra) a
-// aba daquele contexto. As ações seguintes caem nela — é o que deixa o
-// "o que a IA já fez" navegável depois, em vez de um rolo único.
-
-function nomeDeAba(name, args = {}) {
-    if (name === 'desktop_open_app') return String(args.app || args.name || '').trim();
-    if (name === 'desktop_focus') return String(args.window || args.title || '').trim();
-    if (name === 'browser_open') {
-        try { return new URL(String(args.url)).hostname || 'navegador'; } catch { return 'navegador'; }
-    }
-    if (args && args.window) return String(args.window).trim();
-    return '';
-}
-
-function entrarNaAba(nome) {
-    const alvo = corta(nome, 24);
-    if (!alvo) return;
-    let aba = state.abas.find((a) => a.nome.toLowerCase() === alvo.toLowerCase());
-    if (!aba) {
-        aba = { id: state.abas.length + 1, nome: alvo, passos: 0 };
-        state.abas.push(aba);
-        if (state.abas.length > MAX_ABAS) state.abas.shift();
-    }
-    state.abaAtual = aba;
-}
-
-/**
- * A instrução que o usuário acabou de dar. A página autopreenche na barra de
- * comando, letra por letra, e marca o começo dela na linha do tempo.
- */
-function instrucao(texto) {
-    if (!state.on) return;
-    const t = String(texto || '').trim();
-    if (!t) return;
-    state.instrucoes.push({ n: state.instrucoes.length + 1, hora: new Date().toTimeString().slice(0, 8), texto: corta(t, 300) });
-    if (state.instrucoes.length > 40) state.instrucoes.splice(0, state.instrucoes.length - 40);
-
-    state.passo++;
-    state.log.push({ n: state.passo, hora: new Date().toTimeString().slice(0, 8), tipo: 'instrucao', acao: corta(t, 160), ok: true, aba: null });
-    if (state.log.length > MAX_LOG) state.log.splice(0, state.log.length - MAX_LOG);
-}
-
-/**
- * Chamada pelo loop do agente depois de CADA tool. Quando o streaming está
- * desligado é um no-op — o caminho normal não paga nada por isto.
- */
-function step(name, args, result) {
-    if (!state.on) return;
-
-    const troca = nomeDeAba(name, args || {});
-    if (troca) entrarNaAba(troca);
-    if (!state.abaAtual && ACOES_NA_TELA.has(name)) entrarNaAba('Tela');
-
-    state.passo++;
-    if (state.abaAtual) state.abaAtual.passos++;
-
-    const entrada = {
-        n: state.passo,
-        hora: new Date().toTimeString().slice(0, 8),
-        acao: descrever(name, args || {}),
-        ok: !(result && result.ok === false),
-        erro: result && result.ok === false ? corta(result.error, 120) : undefined,
-        aba: state.abaAtual ? state.abaAtual.id : null,
-    };
-
-    if (ACOES_NA_TELA.has(name)) {
-        const frame = capturar(entrada);
-        if (frame) entrada.frame = frame;
-    }
-
-    state.log.push(entrada);
-    if (state.log.length > MAX_LOG) state.log.splice(0, state.log.length - MAX_LOG);
-}
-
-function capturar(entrada) {
-    const agora = Date.now();
-    if (agora - state.ultimaFoto < INTERVALO_FOTO_MS) return null;
-    state.ultimaFoto = agora;
-
-    const id = state.proximoFrame;
-    const arquivo = path.join(DIR, `frame-${id}.png`);
-
-    // Com o vídeo rodando, o quadro mais novo já está no disco — copiar é
-    // grátis e não fotografa duas vezes a mesma tela.
-    if (agora - state.liveAt < 900) {
-        try { fs.copyFileSync(LIVE(), arquivo); } catch { return null; }
-        state.proximoFrame++;
-        state.frames.push({ id, hora: entrada.hora, acao: entrada.acao, aba: entrada.aba });
-        while (state.frames.length > MAX_FRAMES) {
-            const velho = state.frames.shift();
-            try { fs.unlinkSync(path.join(DIR, `frame-${velho.id}.png`)); } catch {}
-        }
-        return id;
-    }
-
-    const r = desktop.screenshot(arquivo);
-    if (!r.ok) { if (!state.erroFoto) state.erroFoto = r.error; return null; }
-
-    state.erroFoto = null;
-    state.proximoFrame++;
-    state.frames.push({ id, hora: entrada.hora, acao: entrada.acao, aba: entrada.aba });
-    while (state.frames.length > MAX_FRAMES) {
-        const velho = state.frames.shift();
-        try { fs.unlinkSync(path.join(DIR, `frame-${velho.id}.png`)); } catch {}
-    }
-    return id;
-}
-
-// ── Página ────────────────────────────────────────────────────────────────
-// O desenho combinado: mascote + PrimoCode no cabeçalho; abaixo, uma "janela"
-// de borda branca com as três bolinhas e as ABAS; dentro, a tela que a IA
-// está usando (ou usou, nas abas antigas), com os passos daquela aba embaixo.
-
-// O mascote do CLI (▐▛███▜▌ …) redesenhado em SVG, célula a célula, na mesma
-// paleta: bloco cheio na cor viva, contorno na apagada.
-// Olhos e pés têm classe própria: a página anima (piscada e passinhos) por CSS.
-const MASCOTE_SVG = `<svg viewBox="0 0 9 3.6" aria-hidden="true">
-<g fill="#0891b2"><rect x="1" y="0" width="1" height="1"/><rect x="7" y="0" width="1" height="1"/><rect x="0" y="1" width="1" height="1" opacity=".7"/><rect x="8" y="1" width="1" height="1" opacity=".7"/><rect x="1" y="1" width="1" height="1"/><rect x="7" y="1" width="1" height="1"/></g>
-<g fill="#22d3ee"><rect x="2" y="0" width="5" height="1" rx=".12"/><rect x="2" y="1" width="5" height="1"/><rect class="pe pe1" x="1.9" y="2.2" width=".9" height=".5" rx=".1"/><rect class="pe pe2" x="3.4" y="2.2" width=".9" height=".5" rx=".1"/><rect class="pe pe1" x="4.9" y="2.2" width=".9" height=".5" rx=".1"/><rect class="pe pe2" x="6.4" y="2.2" width=".9" height=".5" rx=".1"/></g>
-<g fill="#0b1220"><rect class="olho" x="3" y=".35" width=".8" height=".5" rx=".1"/><rect class="olho" x="5.2" y=".35" width=".8" height=".5" rx=".1"/><rect x="3.9" y="1.25" width="1.2" height=".28" rx=".14"/></g>
-</svg>`;
-
-// A tela do painel, na identidade do app — a MESMA paleta do design system do
-// CLI (lib/ui.js): primária cyan #22d3ee, neutros slate, rose para falha. A
-// estrutura é a do desenho do dono: mascote inclinado no canto, "Primocode"
-// no alto, a janela com as bolinhas e as abas separadas por "|", a tela
-// embaixo. Dentro da tela roda o VÍDEO ao vivo (o loop de captura acima); as
-// abas em cima são tudo que o agente abriu — clicáveis, cada uma com seus
-// quadros e passos; e a barra de comando autopreenche a instrução digitando.
-const FAVICON = 'data:image/svg+xml,' + encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3.6">${MASCOTE_SVG.replace(/^<svg[^>]*>|<\/svg>$/g, '')}</svg>`,
-);
-
-const PAGINA = `<!doctype html>
-<html lang="pt-BR"><head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Primocode · Ao vivo</title>
-<link rel="icon" href="${FAVICON}">
-<style>
-  * { box-sizing: border-box; margin: 0; }
-  ::selection { background: rgba(34,211,238,.28); }
-  body {
-    background: radial-gradient(1100px 480px at 50% -120px, #12263f 0%, #0d1729 46%, #0b1220 100%) fixed #0b1220;
-    color: #e2e8f0; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 18px 34px;
-  }
-
-  /* ── Cabeçalho: mascote inclinado + nome, como no desenho ── */
-  #topo { position: relative; width: min(1120px, 100%); padding: 44px 0 26px; text-align: center; }
-  #topo .mascote { position: absolute; left: 4px; top: 24px; width: 104px; height: 44px; filter: drop-shadow(0 8px 20px rgba(34,211,238,.4)); animation: flutua 2.8s ease-in-out infinite; }
-  @keyframes flutua { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(6px) } }
-  #topo .mascote svg { width: 100%; height: 100%; display: block; overflow: visible; }
-  /* vivo: pisca os olhos de vez em quando e dá passinhos com os pés */
-  .mascote .olho { transform-box: fill-box; transform-origin: center; animation: piscaOlho 3.6s infinite; }
-  @keyframes piscaOlho { 0%, 89%, 100% { transform: scaleY(1) } 93%, 95% { transform: scaleY(.12) } }
-  .mascote .pe { transform-box: fill-box; transform-origin: center; }
-  .mascote .pe1 { animation: passinho 1.4s ease-in-out infinite; }
-  .mascote .pe2 { animation: passinho 1.4s ease-in-out infinite; animation-delay: .7s; }
-  @keyframes passinho { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-.14px) } }
-  #topo h1 { font-size: clamp(34px, 5.6vw, 54px); font-weight: 650; letter-spacing: .4px; color: #f1f5f9; text-shadow: 0 4px 28px rgba(34,211,238,.22); }
-  #topo h1 span { color: #22d3ee; }
-  #topo .vivo { position: absolute; right: 2px; top: 48px; display: inline-flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 12.5px; background: rgba(15,23,42,.85); border: 1px solid #1e293b; border-radius: 999px; padding: 6px 14px; }
-  .pulso { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee99; animation: pulsa 1.4s infinite; }
-  @keyframes pulsa { 50% { opacity: .3 } }
-
-  /* ── A janela ── */
-  #janela {
-    width: min(1120px, 100%); background: #000; border: 1px solid #24344d; border-radius: 22px;
-    overflow: hidden; display: flex; flex-direction: column;
-    box-shadow: 0 30px 80px rgba(2,6,23,.75), 0 0 60px rgba(34,211,238,.07), inset 0 1px 0 rgba(226,232,240,.07);
-  }
-  #barra { position: relative; display: flex; align-items: center; background: linear-gradient(#152238, #101a2c); padding: 13px 22px; min-height: 54px; border-bottom: 1px solid #0a1120; }
-  #barra .b { flex: none; width: 13px; height: 13px; border-radius: 50%; margin-right: 9px; box-shadow: inset 0 -1.5px 3px rgba(0,0,0,.35); }
-  #barra .b.r { background: #ff5f57; } #barra .b.y { background: #febc2e; } #barra .b.g { background: #28c840; }
-
-  /* Abas: tudo que ele abriu, clicável, separado por | como no desenho */
-  #abas { position: absolute; left: 50%; transform: translateX(-50%); max-width: 62%; display: flex; align-items: center; gap: 11px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: clamp(14px, 1.9vw, 18px); font-weight: 550; }
-  #abas::-webkit-scrollbar { display: none; }
-  .aba { position: relative; border: 0; background: none; cursor: pointer; font: inherit; color: #64748b; padding: 4px 3px 7px; transition: color .18s ease; }
-  .aba:hover { color: #cbd5e1; }
-  .aba.ativa { color: #22d3ee; text-shadow: 0 0 18px rgba(34,211,238,.5); }
-  .aba.ativa::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 2px; border-radius: 2px; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }
-  .aba .qtd { color: #475569; font-size: .68em; vertical-align: super; margin-left: 4px; font-weight: 600; }
-  .sep { color: #334155; font-weight: 300; }
-
-  /* ── Barra de comando: a instrução autopreenchendo ── */
-  #comando { display: flex; align-items: center; gap: 11px; background: #0a1120; border-bottom: 1px solid #060b16; padding: 11px 22px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14px; min-height: 44px; }
-  #comando .chevron { color: #22d3ee; font-weight: 700; flex: none; text-shadow: 0 0 10px rgba(34,211,238,.6); }
-  #comando .texto { color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  #comando .texto.vazio { color: #475569; font-style: italic; }
-  #comando .cursor { flex: none; width: 8px; height: 16px; background: #22d3ee; margin-left: 2px; animation: pisca 1s steps(1) infinite; box-shadow: 0 0 8px rgba(34,211,238,.7); }
-  @keyframes pisca { 50% { opacity: 0 } }
-  #comando .hora { margin-left: auto; color: #475569; font-size: 11.5px; flex: none; }
-
-  /* ── A tela: o vídeo ao vivo ── */
-  #tela { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; background: #000; }
-  #tela img { width: 100%; max-height: 60vh; object-fit: contain; display: none; }
-  #aviso { text-align: center; padding: 84px 24px; }
-  #aviso .titulo { font-size: clamp(19px, 3vw, 28px); font-weight: 550; color: #f1f5f9; }
-  #aviso .sub { color: #64748b; font-size: 14px; margin-top: 13px; line-height: 1.7; }
-  #badge { position: absolute; top: 14px; right: 16px; display: none; align-items: center; gap: 7px; background: rgba(8,12,22,.78); backdrop-filter: blur(6px); border: 1px solid #1e293b; color: #f1f5f9; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; padding: 6px 12px; border-radius: 999px; }
-  #badge .rec { width: 8px; height: 8px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 9px #fb7185; animation: pulsa 1.1s infinite; }
-  #carimbo { position: absolute; left: 16px; bottom: 13px; background: rgba(8,12,22,.78); backdrop-filter: blur(6px); border: 1px solid #1e293b; color: #94a3b8; font-size: 12px; padding: 5px 13px; border-radius: 999px; display: none; max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #carimbo b { color: #22d3ee; font-weight: 600; }
-
-  /* ── Linha do tempo ── */
-  #historico { width: min(1120px, 100%); padding-top: 18px; }
-  #filme { display: flex; gap: 9px; padding: 4px 2px 13px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #1e293b transparent; }
-  .foto { flex: none; border: 1.5px solid #1e293b; border-radius: 9px; background: #000; cursor: pointer; padding: 0; width: 100px; height: 60px; overflow: hidden; opacity: .6; transition: transform .16s ease, opacity .16s ease, border-color .16s ease, box-shadow .16s ease; }
-  .foto:hover { opacity: 1; transform: translateY(-2px); border-color: #475569; }
-  .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
-  .foto.ativa { border-color: #22d3ee; opacity: 1; box-shadow: 0 0 0 2px rgba(34,211,238,.3), 0 6px 18px rgba(2,6,23,.6); }
-
-  #cartao { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; overflow: hidden; }
-  #cartao header { display: flex; align-items: center; justify-content: space-between; padding: 11px 17px; border-bottom: 1px solid #16223a; color: #94a3b8; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
-  #cartao header span b { color: #22d3ee; }
-  #passos { max-height: 236px; overflow-y: auto; padding: 5px 0 9px; scrollbar-width: thin; scrollbar-color: #1e293b transparent; }
-  #passos::-webkit-scrollbar { width: 8px; } #passos::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
-  .item { padding: 5px 17px; display: flex; gap: 10px; font-size: 13.5px; align-items: baseline; transition: background .12s ease; }
-  .item:hover { background: #131f35; }
-  .item .n { color: #475569; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
-  .item .ok { color: #22d3ee; } .item .falha { color: #fb7185; }
-  .item .txt { flex: 1; word-break: break-word; color: #cbd5e1; }
-  .item .txt .erro { color: #fb7185; font-size: 12px; display: block; margin-top: 1px; }
-  .item .hora { color: #475569; font-size: 11px; font-variant-numeric: tabular-nums; }
-  .item.temfoto { cursor: pointer; } .item.temfoto:hover .txt { color: #f1f5f9; }
-  .item.pedido { background: #0c1526; border-top: 1px solid #16223a; border-bottom: 1px solid #16223a; margin: 6px 0; padding: 8px 17px; }
-  .item.pedido .txt { color: #f1f5f9; font-weight: 600; }
-  .item.pedido .chev { color: #22d3ee; font-weight: 800; }
-
-  footer { color: #475569; font-size: 12px; padding-top: 17px; }
-  footer b { color: #64748b; font-weight: 600; }
-</style></head>
-<body>
-<div id="topo">
-  <div class="mascote">${MASCOTE_SVG}</div>
-  <h1>Primo<span>code</span></h1>
-  <span class="vivo"><span class="pulso"></span><span id="st">conectando…</span></span>
-</div>
-
-<div id="janela">
-  <div id="barra">
-    <span class="b r"></span><span class="b y"></span><span class="b g"></span>
-    <nav id="abas"></nav>
-  </div>
-  <div id="comando">
-    <span class="chevron">❯</span>
-    <span class="texto vazio" id="cmdtexto">aguardando a sua instrução no terminal…</span>
-    <span class="cursor"></span>
-    <span class="hora" id="cmdhora"></span>
-  </div>
-  <section id="tela">
-    <img id="frame" alt="tela do computador, ao vivo">
-    <div id="aviso">
-      <div class="titulo">A tela do computador aparece aqui, em vídeo</div>
-      <div class="sub">Dê uma instrução no terminal do PrimoCode e assista ele trabalhando, ao vivo.<br>Cada app que ele abrir vira uma aba lá em cima — clique nelas para rever o que já foi feito.</div>
-    </div>
-    <div id="badge"><span class="rec"></span>AO VIVO</div>
-    <div id="carimbo"></div>
-  </section>
-</div>
-
-<div id="historico">
-  <div id="filme"></div>
-  <div id="cartao">
-    <header><span>Linha do tempo · <b id="abanome">Ao vivo</b></span><span id="resumo"></span></header>
-    <div id="passos"></div>
-  </div>
-</div>
-<footer>só nesta máquina <b>(127.0.0.1)</b> · <b>/streaming</b> desliga</footer>
-
-<script>
-const VIVO = 0;                 // id da aba "Ao vivo"
-let dados = { abas: [], frames: [], log: [], instrucoes: [], liveSeq: 0 };
-let abaSel = VIVO;              // aba escolhida pelo usuário
-let fotoSel = null;             // frame fixado (null = vídeo/mais recente)
-let ultimoEstado = '';
-
-function esc(s) { return String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
-
-// ── o vídeo: busca o quadro direto, desde o primeiro segundo ──
-// Não espera o /state confirmar nada: enquanto não há seq, tenta com
-// timestamp (um 404 só significa "primeiro quadro ainda não saiu" — tenta de
-// novo). Assim a tela aparece assim que o painel abre, sem depender de o
-// agente ter feito qualquer coisa.
-let quadroNaTela = '';
-let buscandoQuadro = false;
-function modoVideo() { return abaSel === VIVO && fotoSel == null; }
-function videoTick() {
-  if (modoVideo() && !buscandoQuadro) {
-    const marca = dados.liveSeq > 0 ? 's' + dados.liveSeq : 't' + Date.now();
-    if (marca !== quadroNaTela) {
-      buscandoQuadro = true;
-      const pre = new Image();                     // pré-carrega fora da tela:
-      pre.onload = () => {                         // o quadro só entra inteiro
-        buscandoQuadro = false;
-        if (!modoVideo()) return;
-        const img = document.getElementById('frame');
-        img.src = pre.src; img.style.display = 'block';
-        document.getElementById('aviso').style.display = 'none';
-        document.getElementById('badge').style.display = 'flex';
-        document.getElementById('carimbo').style.display = 'none';
-        quadroNaTela = marca;
-      };
-      pre.onerror = () => { buscandoQuadro = false; };
-      pre.src = '/live?' + marca;
-    }
-  }
-  setTimeout(videoTick, 300);
-}
-
-// ── a instrução autopreenchendo, letra por letra ──
-let digitando = null, instrucaoNaTela = 0;
-function autopreencher(inst) {
-  if (!inst || inst.n === instrucaoNaTela) return;
-  instrucaoNaTela = inst.n;
-  clearInterval(digitando);
-  const el = document.getElementById('cmdtexto');
-  el.classList.remove('vazio');
-  el.textContent = '';
-  document.getElementById('cmdhora').textContent = inst.hora;
-  let i = 0;
-  digitando = setInterval(() => {
-    i += 1 + Math.floor(Math.random() * 2);        // cadência de gente digitando
-    el.textContent = inst.texto.slice(0, i);
-    if (i >= inst.texto.length) clearInterval(digitando);
-  }, 32);
-}
-
-function framesDaAba(id) {
-  return id === VIVO ? dados.frames : dados.frames.filter((f) => f.aba === id);
-}
-function logDaAba(id) {
-  return id === VIVO ? dados.log : dados.log.filter((e) => e.aba === id || e.tipo === 'instrucao');
-}
-
-function render() {
-  // Abas: "Ao vivo" + tudo que ele abriu, separadas por |
-  const nav = document.getElementById('abas');
-  const abas = [{ id: VIVO, nome: 'Ao vivo' }, ...dados.abas];
-  nav.innerHTML = abas.map((a) =>
-    '<button class="aba' + (a.id === abaSel ? ' ativa' : '') + '" data-id="' + a.id + '">' + esc(a.nome)
-    + (a.passos ? '<span class="qtd">' + a.passos + '</span>' : '') + '</button>'
-  ).join('<span class="sep">|</span>');
-  nav.querySelectorAll('.aba').forEach((b) => b.onclick = () => {
-    abaSel = Number(b.dataset.id); fotoSel = null; quadroNaTela = -1; render();
-  });
-  const abaObj = abas.find((a) => a.id === abaSel) || abas[0];
-  document.getElementById('abanome').textContent = abaObj.nome;
-
-  // Fora do modo vídeo (aba antiga ou foto fixada): mostra o quadro daquela aba
-  const fs = framesDaAba(abaSel);
-  const img = document.getElementById('frame');
-  const aviso = document.getElementById('aviso');
-  const badge = document.getElementById('badge');
-  const carimbo = document.getElementById('carimbo');
-  if (!modoVideo()) {
-    const atual = fotoSel != null ? fs.find((f) => f.id === fotoSel) : fs[fs.length - 1];
-    badge.style.display = 'none';
-    if (atual) {
-      if (img.dataset.n !== 'f' + atual.id) { img.src = '/frame?n=' + atual.id; img.dataset.n = 'f' + atual.id; }
-      img.style.display = 'block'; aviso.style.display = 'none';
-      carimbo.style.display = 'block';
-      carimbo.innerHTML = '<b>#' + atual.id + '</b> · ' + atual.hora + ' · ' + esc(atual.acao)
-        + (fotoSel != null ? ' — <b>clique na miniatura de novo para voltar</b>' : '');
-    } else {
-      img.style.display = 'none'; aviso.style.display = 'block'; carimbo.style.display = 'none';
-    }
-  } else {
-    carimbo.style.display = 'none';
-    if (dados.erroFoto) { aviso.style.display = 'block'; aviso.querySelector('.sub').textContent = 'Sem imagem da tela: ' + dados.erroFoto; }
-  }
-
-  // Filmstrip da aba (as últimas 16)
-  const filme = document.getElementById('filme');
-  const tira = fs.slice(-16);
-  const marcada = fotoSel != null ? fotoSel : -1;
-  filme.innerHTML = tira.map((f) =>
-    '<button class="foto' + (f.id === marcada ? ' ativa' : '') + '" data-id="' + f.id + '" title="' + esc(f.acao) + '"><img loading="lazy" src="/frame?n=' + f.id + '"></button>').join('');
-  filme.querySelectorAll('.foto').forEach((b) => b.onclick = () => {
-    const id = Number(b.dataset.id);
-    fotoSel = (fotoSel === id) ? null : id;   // clicar de novo volta ao vídeo
-    quadroNaTela = -1;
-    render();
-  });
-  if (fotoSel == null) filme.scrollLeft = filme.scrollWidth;
-
-  // Linha do tempo da aba (mais novos primeiro); pedidos viram divisórias
-  const passos = logDaAba(abaSel).slice(-60).reverse();
-  document.getElementById('resumo').textContent = passos.filter((e) => e.tipo !== 'instrucao').length + ' passos';
-  document.getElementById('passos').innerHTML = passos.map((e) => {
-    if (e.tipo === 'instrucao') {
-      return '<div class="item pedido"><span class="n">' + e.n + '</span><span class="chev">❯</span>'
-        + '<span class="txt">' + esc(e.acao) + '</span><span class="hora">' + e.hora + '</span></div>';
-    }
-    return '<div class="item' + (e.frame ? ' temfoto" data-frame="' + e.frame : '') + '">'
-      + '<span class="n">' + e.n + '</span>'
-      + '<span class="' + (e.ok ? 'ok' : 'falha') + '">' + (e.ok ? '✔' : '✗') + '</span>'
-      + '<span class="txt">' + esc(e.acao) + (e.erro ? '<span class="erro">' + esc(e.erro) + '</span>' : '') + '</span>'
-      + '<span class="hora">' + e.hora + '</span></div>';
-  }).join('');
-  document.querySelectorAll('.item.temfoto').forEach((el) => el.onclick = () => { fotoSel = Number(el.dataset.frame); quadroNaTela = -1; render(); });
-}
-
-async function tick() {
-  try {
-    const s = await (await fetch('/state')).json();
-    dados = s;
-    document.getElementById('st').textContent = 'ao vivo';
-    autopreencher(s.instrucoes[s.instrucoes.length - 1]);
-    const assinatura = JSON.stringify([s.frames.length, s.log.length, s.abas.length, s.erroFoto]);
-    if (assinatura !== ultimoEstado) { ultimoEstado = assinatura; render(); }
-  } catch (e) {
-    document.getElementById('st').textContent = 'reconectando…';
-  }
-  setTimeout(tick, 600);
-}
-tick();
-videoTick();
-</script>
-</body></html>`;
-
-
-function start() {
-    if (state.on) return Promise.resolve(state.url);
-    try { fs.mkdirSync(DIR, { recursive: true }); } catch {}
-    // Fotos de sessões passadas não pertencem a esta linha do tempo.
-    try { for (const f of fs.readdirSync(DIR)) if (/^(frame-\d+|live|live-tmp)\.png$/.test(f)) fs.unlinkSync(path.join(DIR, f)); } catch {}
-
-    return new Promise((resolve, reject) => {
-        const server = http.createServer((req, res) => {
-            const u = new URL(req.url || '/', 'http://x');
-            if (u.pathname === '/state') {
-                viuAgora();   // página aberta = vídeo ligado
-                res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
-                res.end(JSON.stringify({
-                    erroFoto: state.erroFoto,
-                    abas: state.abas,
-                    frames: state.frames,
-                    log: state.log.slice(-120),
-                    instrucoes: state.instrucoes.slice(-20),
-                    liveSeq: state.liveSeq,
-                }));
-                return;
-            }
-            if (u.pathname === '/live') {
-                viuAgora();
-                fs.readFile(LIVE(), (err, buf) => {
-                    if (err) { res.writeHead(404); res.end(); return; }
-                    res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'no-store' });
-                    res.end(buf);
-                });
-                return;
-            }
-            if (u.pathname === '/frame') {
-                // O id vem de fora: só serve o arquivo se for número — nada de
-                // path traversal por aqui.
-                const id = Math.round(Number(u.searchParams.get('n')));
-                const conhecido = Number.isFinite(id) && state.frames.some((f) => f.id === id);
-                if (!conhecido) { res.writeHead(404); res.end(); return; }
-                fs.readFile(path.join(DIR, `frame-${id}.png`), (err, buf) => {
-                    if (err) { res.writeHead(404); res.end(); return; }
-                    // Cada frame é imutável: o navegador pode guardar à vontade.
-                    res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'max-age=3600' });
-                    res.end(buf);
-                });
-                return;
-            }
-            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(PAGINA);
-        });
-
-        server.on('error', reject);
-        // unref: o painel não pode segurar o processo vivo — /exit tem de sair
-        // mesmo com o streaming ligado.
-        server.on('connection', (s) => s.unref());
-        // Só na própria máquina: isto é a tela do usuário, não um serviço.
-        server.listen(0, '127.0.0.1', () => {
-            server.unref();
-            state.server = server;
-            state.on = true;
-            state.url = `http://127.0.0.1:${server.address().port}`;
-            // O vídeo começa JÁ: quando o navegador terminar de abrir, o
-            // primeiro quadro está no ar — nada de tela vazia esperando ação.
-            state.viewerAt = Date.now();
-            agendarVideo(50);
-            resolve(state.url);
-        });
-    });
-}
-
-function stop() {
-    if (state.server) { try { state.server.close(); } catch {} }
-    if (state.liveTimer) { clearTimeout(state.liveTimer); state.liveTimer = null; }
-    state.server = null;
-    state.on = false;
-    state.url = '';
-}
-
-module.exports = { start, stop, step, instrucao, isOn, url, descrever };