primocode 7.16.0 → 7.18.0

package/bin/primocode.js

@@ -22,7 +22,6 @@ const cfg = require('../lib/config');
 const { runAct, interromper } = require('../lib/act');
 const pasta = require('../lib/pasta');
 const catalogo = require('../lib/catalogo');
-const streaming = require('../lib/streaming');
 const effort = require('../lib/effort');
 
 // A pasta de onde o comando foi dado. Não é mais onde ele trabalha (o padrão é
@@ -57,7 +56,6 @@ ${c.bold('Comandos')}
   ${c.brand('/read')} <arquivo>       mostra um arquivo
   ${c.brand('/run')} <comando>        executa no shell do projeto
   ${c.brand('/open')} <arquivo|url>   abre no navegador
-  ${c.brand('/streaming')}            painel ao vivo — veja o agente mexendo no computador
   ${c.brand('/status')}               checa o servidor
   ${c.brand('/name')} <nome>          como o Primo te chama
   ${c.brand('/mascot')} <estilo>      mascote: primo|fox|cat
@@ -81,7 +79,7 @@ ${c.bold('Onde ele trabalha')}
 
 // ── Autopreenchimento dos comandos (estilo Claude Code) ────────────────
 // Metade do comando já serve: Tab completa, e um prefixo único executa
-// direto — "/str" vira "/streaming" sozinho. A lista é só a dos nomes
+// direto — "/eff" vira "/effort" sozinho. A lista é só a dos nomes
 // canônicos; os apelidos (/cd, /stream…) continuam valendo por extenso.
 const SLASH_COMANDOS = [
     ['/help', 'todos os comandos'],
@@ -97,7 +95,6 @@ const SLASH_COMANDOS = [
     ['/read', 'mostra um arquivo'],
     ['/run', 'roda um comando'],
     ['/open', 'abre no navegador'],
-    ['/streaming', 'painel ao vivo — vídeo dele trabalhando'],
     ['/status', 'checa o servidor'],
     ['/name', 'como ele te chama'],
     ['/mascot', 'primo | fox | cat'],
@@ -122,12 +119,11 @@ function completarSlash(line) {
 // Régua com os níveis, o marcador ▲ embaixo do escolhido, "Faster" à
 // esquerda e "Smarter" à direita. ←/→ move, Enter confirma, Esc cancela.
 
-function desenharEffort(idx) {
+// O layout sai em texto PLANO, com as marcas de onde pintar. Assim os dois
+// pintores (o normal e o do ultracode animado) desenham exatamente a mesma
+// régua — sem duas contas de posição para manter em sincronia.
+function layoutEffort(idx) {
     const cols = Math.max(52, Math.min(process.stdout.columns || 100, 104));
-    const regua = '▔'.repeat(cols);
-    const linhas = [];
-
-    // Cada nível ocupa uma coluna própria; o ultracode fica destacado no fim.
     const rotulos = effort.NOMES;
     const larguras = rotulos.map((n) => Math.max(n.length + 3, 9));
     const posicoes = [];
@@ -137,38 +133,130 @@ function desenharEffort(idx) {
         x += larguras[i];
     }
     const fimRegua = x;
-
-    linhas.push(c.dim(regua));
-    linhas.push('   ' + c.bold(c.white('Effort')));
-    linhas.push('');
-
-    // Faster ....▲.... Smarter — a trilha, com o marcador na posição atual.
     const marca = posicoes[idx];
+
     let trilha = '';
     for (let k = 23; k < fimRegua; k++) {
-        if (k === marca) trilha += c.brand('▲');
-        else if (k === fimRegua - 12) trilha += c.dim('┆');       // ultracode é um degrau à parte
-        else trilha += c.dim(k < marca ? '─' : '─');
+        if (k === marca) trilha += '▲';
+        else if (k === fimRegua - 12) trilha += '┆';   // ultracode é um degrau à parte
+        else trilha += '─';
     }
-    linhas.push('                       ' + c.muted('Faster') + ' '.repeat(Math.max(1, fimRegua - 23 - 6 - 7)) + c.muted('Smarter'));
-    linhas.push('                       ' + trilha);
 
-    // Os nomes, o escolhido aceso.
-    let linhaNomes = ' '.repeat(23);
+    let nomes = ' '.repeat(23);
+    let deNome = 0, ateNome = 0;
     for (let i = 0; i < rotulos.length; i++) {
         const nome = rotulos[i];
-        const espaco = larguras[i];
-        const pad = Math.floor((espaco - nome.length) / 2);
-        const texto = i === idx ? c.bold(c.brand(nome)) : c.muted(nome);
-        linhaNomes += ' '.repeat(pad) + texto + ' '.repeat(espaco - nome.length - pad);
+        const pad = Math.floor((larguras[i] - nome.length) / 2);
+        if (i === idx) { deNome = nomes.length + pad; ateNome = deNome + nome.length; }
+        nomes += ' '.repeat(pad) + nome + ' '.repeat(larguras[i] - nome.length - pad);
     }
-    linhas.push(linhaNomes);
 
     const nivel = effort.nivelDe(rotulos[idx]);
-    linhas.push('                       ' + c.dim(nivel.resumo));
-    linhas.push('');
-    linhas.push('   ' + c.muted('←/→ ajusta · Enter confirma · Esc cancela'));
-    return linhas.join('\n');
+    const vaoExtremos = Math.max(1, fimRegua - 23 - 6 - 7);
+
+    return {
+        cols,
+        marca,
+        destaque: { de: deNome, ate: ateNome },
+        linhas: [
+            { tipo: 'regua',    texto: '▔'.repeat(cols) },
+            { tipo: 'titulo',   texto: '   Effort' },
+            { tipo: 'vazio',    texto: '' },
+            { tipo: 'extremos', texto: ' '.repeat(23) + 'Faster' + ' '.repeat(vaoExtremos) + 'Smarter' },
+            { tipo: 'trilha',   texto: ' '.repeat(23) + trilha },
+            { tipo: 'nomes',    texto: nomes },
+            { tipo: 'resumo',   texto: ' '.repeat(23) + nivel.resumo },
+            { tipo: 'vazio',    texto: '' },
+            { tipo: 'ajuda',    texto: '   ←/→ ajusta · Enter confirma · Esc cancela' },
+        ],
+    };
+}
+
+// ── O brilho do ultracode ────────────────────────────────────────────────
+// No nível máximo o painel inteiro ganha um fundo roxo que ondula, como no
+// Claude Code. São faixas verticais de roxo em brilhos diferentes; a onda
+// anda para o lado a cada quadro, e o texto fica branco por cima.
+//
+// Roxos do cubo de 256 cores, ordenados pelo brilho REAL (luminância), do
+// mais escuro ao mais claro — a onda escolhe um deles por faixa. Fora da
+// lista ficaram os roxos escuros que puxam para o vinho (53-56): quebravam a
+// família violeta. Só 256 cores (não truecolor): funciona em qualquer
+// terminal, inclusive no Terminal.app do macOS.
+const ROXOS = [57, 92, 93, 63, 98, 99, 105, 141];
+
+function fundoRoxo(x, fase) {
+    // Duas ondas de períodos diferentes: o encontro delas dá o desenho
+    // irregular de faixas, em vez de listras repetidas e óbvias.
+    const faixa = Math.floor(x / 2);
+    const onda = Math.sin(faixa * 0.55 + fase) * 0.6 + Math.sin(faixa * 0.17 - fase * 0.7) * 0.4;
+    const i = Math.round((onda + 1) / 2 * (ROXOS.length - 1));
+    return ROXOS[Math.max(0, Math.min(ROXOS.length - 1, i))];
+}
+
+// Pinta a linha inteira (até a largura do painel) com a onda por baixo.
+// `destaque` é o trecho que fica branco e forte (o nível escolhido); o resto
+// da linha sai num lilás claro, para o escolhido saltar aos olhos.
+function pintarLinhaUltra(texto, largura, fase, opts = {}) {
+    const base = opts.base || 231;      // branco
+    const apagado = opts.apagado || base;
+    const destaque = opts.destaque;
+    let saida = '';
+    let corFundo = -1;
+    let corTexto = -1;
+    let forte = null;
+
+    for (let x = 0; x < largura; x++) {
+        const fundo = fundoRoxo(x, fase);
+        if (fundo !== corFundo) { saida += `\x1b[48;5;${fundo}m`; corFundo = fundo; }
+
+        const dentro = destaque && x >= destaque.de && x < destaque.ate;
+        const querForte = opts.negrito || dentro;
+        const querCor = dentro ? base : apagado;
+        if (querForte !== forte) { saida += querForte ? '\x1b[1m' : '\x1b[22m'; forte = querForte; }
+        if (querCor !== corTexto) { saida += `\x1b[38;5;${querCor}m`; corTexto = querCor; }
+
+        saida += texto[x] || ' ';
+    }
+    return saida + '\x1b[0m';
+}
+
+function desenharEffort(idx, fase) {
+    const L = layoutEffort(idx);
+    const ultra = effort.NOMES[idx] === 'ultracode';
+
+    if (ultra) {
+        // No ultracode o painel todo vira fundo animado. Cada linha é pintada
+        // com a MESMA onda, então as faixas ficam alinhadas de cima a baixo.
+        const LILAS = 189;   // lilás bem claro, para o que não é o escolhido
+        return L.linhas.map((l) => {
+            if (l.tipo === 'titulo') return pintarLinhaUltra(l.texto, L.cols, fase, { negrito: true });
+            if (l.tipo === 'nomes') return pintarLinhaUltra(l.texto, L.cols, fase, { destaque: L.destaque, apagado: LILAS });
+            if (l.tipo === 'resumo' || l.tipo === 'extremos') return pintarLinhaUltra(l.texto, L.cols, fase, { base: LILAS, apagado: LILAS });
+            return pintarLinhaUltra(l.texto, L.cols, fase, {});
+        }).join('\n');
+    }
+
+    return L.linhas.map((l) => {
+        const t = l.texto;
+        switch (l.tipo) {
+            case 'regua': return c.dim(t);
+            case 'titulo': return c.bold(c.white(t));
+            case 'extremos': return c.muted(t);
+            case 'trilha': {
+                // O marcador aceso, o resto da trilha recuada.
+                const antes = t.slice(0, L.marca);
+                const depois = t.slice(L.marca + 1);
+                return c.dim(antes) + c.brand('▲') + c.dim(depois);
+            }
+            case 'nomes': {
+                const { de, ate } = L.destaque;
+                return c.muted(t.slice(0, de)) + c.bold(c.brand(t.slice(de, ate))) + c.muted(t.slice(ate));
+            }
+            case 'resumo': return c.dim(t);
+            case 'ajuda': return c.muted(t);
+            default: return t;
+        }
+    }).join('\n');
 }
 
 // Desenha, escuta as setas, e devolve o nome escolhido (ou null se cancelou).
@@ -180,21 +268,38 @@ function sliderEffort(atual) {
         }
         let idx = effort.indiceDe(atual);
         const ALTURA = 9;   // linhas que o desenho ocupa — para redesenhar por cima
+        let fase = 0;
+        let anima = null;
 
         const pintar = (primeira) => {
             if (!primeira) process.stdout.write(`\x1b[${ALTURA}A\r`);
-            process.stdout.write(desenharEffort(idx).split('\n').map((l) => '\x1b[2K' + l).join('\n') + '\n');
+            process.stdout.write(desenharEffort(idx, fase).split('\n').map((l) => '\x1b[2K' + l).join('\n') + '\n');
+        };
+
+        // O fundo do ultracode ondula; sair dele apaga a animação na hora, para
+        // não redesenhar sozinho um painel que já está parado.
+        const cuidarDaAnimacao = () => {
+            const ultra = effort.NOMES[idx] === 'ultracode';
+            if (ultra && !anima) {
+                anima = setInterval(() => { fase += 0.32; pintar(false); }, 90);
+                anima.unref();
+            } else if (!ultra && anima) {
+                clearInterval(anima); anima = null;
+            }
         };
+
         pintar(true);
+        cuidarDaAnimacao();
 
         const aoTeclar = (ch, key) => {
             if (!key) return;
-            if (key.name === 'right' || key.name === 'l') { idx = Math.min(effort.NOMES.length - 1, idx + 1); pintar(false); return; }
-            if (key.name === 'left' || key.name === 'h') { idx = Math.max(0, idx - 1); pintar(false); return; }
+            if (key.name === 'right' || key.name === 'l') { idx = Math.min(effort.NOMES.length - 1, idx + 1); cuidarDaAnimacao(); pintar(false); return; }
+            if (key.name === 'left' || key.name === 'h') { idx = Math.max(0, idx - 1); cuidarDaAnimacao(); pintar(false); return; }
             if (key.name === 'return' || key.name === 'enter') { encerrar(effort.NOMES[idx]); return; }
             if (key.name === 'escape' || (key.ctrl && key.name === 'c')) { encerrar(null); return; }
         };
         const encerrar = (valor) => {
+            if (anima) { clearInterval(anima); anima = null; }
             process.stdin.removeListener('keypress', aoTeclar);
             sliderAtivo = false;
             resolve(valor);
@@ -222,7 +327,7 @@ function mostrarMenuSlash() {
     for (const [nome, desc] of SLASH_COMANDOS) {
         console.log(`  ${c.brand(ui.padRight(nome, 12))}${c.muted(desc)}`);
     }
-    console.log(c.dim('\n  Tab completa · metade do comando já serve: /str vira /streaming'));
+    console.log(c.dim('\n  Tab completa · metade do comando já serve: /eff vira /effort'));
 }
 
 let rl = null;
@@ -667,33 +772,6 @@ async function handleSlash(text) {
             break;
         }
 
-        // Painel ao vivo: um servidorzinho local mostra cada ação do agente na
-        // tela + a foto tirada logo depois dela. Liga/desliga; /streaming on|off
-        // também funciona.
-        case 'streaming': case 'stream': case 'live': {
-            const pedido = rest.toLowerCase();
-            const ligar = pedido === 'on' ? true : pedido === 'off' ? false : !streaming.isOn();
-
-            if (!ligar) {
-                if (streaming.isOn()) { streaming.stop(); console.log(c.ok('Streaming desligado.')); }
-                else console.log(c.muted('O streaming já estava desligado.'));
-                break;
-            }
-            if (streaming.isOn()) {
-                console.log(c.muted(`Já está ligado: ${streaming.url()}`));
-                break;
-            }
-            try {
-                const url = await streaming.start();
-                console.log(c.ok('Streaming ligado: ') + c.white(url));
-                console.log(c.muted('  Dê uma instrução e veja cada passo dele aí, ao vivo. /streaming de novo desliga.'));
-                await tools.openInBrowser(url);
-            } catch (e) {
-                console.log(c.err(`Não consegui ligar o streaming: ${e.message}`));
-            }
-            break;
-        }
-
         case 'name': {
             if (!rest) { console.log(c.muted(`  Nome atual: ${state.config.userName || '(nenhum)'}`)); break; }
             state.config.userName = rest;
@@ -770,7 +848,7 @@ async function handleSlash(text) {
         case 'exit': case 'quit': if (rl) rl.close(); break;
         default: {
             // "/" sozinho abre o menu; um prefixo único autopreenche e executa
-            // ("/str" → /streaming); prefixo ambíguo mostra as opções.
+            // ("/eff" → /effort); prefixo ambíguo mostra as opções.
             if (!cmd) { mostrarMenuSlash(); break; }
             const casam = SLASH_COMANDOS.map(([nome]) => nome.slice(1)).filter((n) => n.startsWith(cmd.toLowerCase()));
             if (casam.length === 1) {

package/lib/act.js

@@ -15,10 +15,6 @@ const tools = require('./tools');
 const api = require('./api');
 const cfg = require('./config');
 const catalogo = require('./catalogo');
-// "painel", não "streaming": dentro do runAct existe um `let streaming` (a
-// flag de texto chegando em stream) que SOMBREARIA este módulo — e o step()
-// viraria TypeError engolido pelo catch. Foi um bug real, pego em teste.
-const painel = require('./streaming');
 
 const MAX_ITERATIONS = 15;
 const MAX_PROFUNDIDADE = 2; // principal + 1 nível de subagente
@@ -201,11 +197,6 @@ async function runAct(userPrompt, opts) {
 
     let finalText = '';
 
-    // O pedido do usuário aparece na barra de comando do painel, digitado
-    // letra a letra — só o pedido principal; sub-tarefa de agente não é
-    // instrução de gente.
-    if (!subagent) { try { painel.instrucao(userPrompt); } catch {} }
-
     // Pedido novo zera o pedido de parada anterior.
     if (!subagent) PARAR = false;
 
@@ -308,10 +299,6 @@ async function runAct(userPrompt, opts) {
             const result = await tools.execute(tc.name, tc.arguments, { projectDir: pastaAtual });
             logResult(tc.name, result, profundidade);
 
-            // Painel ao vivo (/streaming): registra o passo e fotografa a tela.
-            // Nunca pode derrubar o loop — falha de foto é problema do painel.
-            try { painel.step(tc.name, tc.arguments, result); } catch {}
-
             // Uma escrita bem-sucedida limpa a dívida: o agente se corrigiu.
             if (result && result.ok === false) falhasPendentes.push(`${tc.name}(${tc.arguments?.path || ''}): ${result.error}`);
             else if (['write_file', 'edit_file'].includes(tc.name)) falhasPendentes.length = 0;

package/lib/desktop.js

@@ -659,8 +659,8 @@ function clickElement(nome, opts = {}) {
 }
 
 // ── Screenshot ────────────────────────────────────────
-// A ferramenta do Linux é resolvida UMA vez: o vídeo do /streaming chama isto
-// várias vezes por segundo, e um `which` por frame seria desperdício.
+// A ferramenta do Linux é resolvida UMA vez: um `which` a cada screenshot
+// seria desperdício.
 let LINUX_SHOT;
 function linuxShot() {
     if (LINUX_SHOT === undefined) LINUX_SHOT = firstCmd(['scrot', 'maim', 'gnome-screenshot', 'spectacle', 'import']);
@@ -669,8 +669,8 @@ function linuxShot() {
 
 /**
  * O comando de shell que fotografa a tela para `filename` — ou null quando a
- * plataforma não tem como. Existe separado do screenshot() para o painel do
- * /streaming capturar em LOOP, assíncrono, sem travar o agente.
+ * plataforma não tem como. Existe separado do screenshot() para quem precisa
+ * capturar de forma assíncrona, sem travar o processo.
  */
 function screenshotCommand(filename) {
     if (PLATFORM === 'darwin') return `screencapture -x "${filename}"`;

package/lib/referencia.js

@@ -8,10 +8,9 @@
  *
  * Duas decisões de projeto, deliberadas:
  *
- * 1. É VISÍVEL, não oculto. Cada pesquisa aparece no terminal e vira uma aba
- *    no /streaming, com as fontes. Um agente que abre coisas escondido do dono
- *    da máquina é um agente em que não dá para confiar — e o /streaming existe
- *    justamente para mostrar tudo.
+ * 1. É VISÍVEL, não oculto. Cada pesquisa aparece no terminal com as fontes
+ *    que ele abriu. Um agente que abre coisas escondido do dono da máquina é
+ *    um agente em que não dá para confiar.
  *
  * 2. Ele extrai CONHECIMENTO (como se faz, qual API, que cuidado tomar), não
  *    blocos de código para colar. Copiar trechos de terceiros para dentro do

package/lib/tools.js

@@ -391,7 +391,7 @@ async function despachar(name, args, ctx) {
 
             // Pesquisa de referência: abre documentação e exemplos sobre o
             // pedido e devolve o TEXTO para o modelo aprender antes de
-            // escrever. Aparece no terminal e no /streaming — nada oculto.
+            // escrever. Aparece no terminal, com as fontes — nada oculto.
             case 'pesquisar_referencia':
                 return referencia.pesquisar({
                     consulta: args.consulta || args.query || '',

package/lib/ui.js

@@ -157,13 +157,13 @@ const NOME = 'Primo Code';
 const TIPS = [
     'Peça um app novo, ou aponte para um repositório e mande clonar',
     '/dir <pasta> para ele trabalhar numa pasta que já é sua',
-    '/help lista tudo · /effort ajusta o esforço · /streaming mostra ao vivo',
+    '/help lista tudo · /effort ajusta o esforço · /status confere a API',
 ];
 
 const NEWS = [
     '/effort escolhe o esforço num slider — do rápido ao mais esperto',
     'Do "high" para cima ele PESQUISA referências antes de escrever',
-    'Esc Esc para o agente · /streaming mostra tudo ao vivo, e limpa os prints',
+    'Esc Esc a qualquer momento para o agente no meio do trabalho',
 ];
 
 // ── Cabeçalho ────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "7.16.0",
+  "version": "7.18.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Modelos grátis. Cria arquivos, roda comandos, controla navegador e desktop: abre apps, clica em botões e ícones pelo nome, digita e usa atalhos.",
   "main": "bin/primocode.js",
   "bin": {

package/lib/streaming.js

@@ -1,759 +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 = 60;
-const MAX_ABAS = 12;
-// Teto de disco: mesmo com poucos quadros, tela 4K dá PNG gordo. Passou
-// disso, as fotos mais velhas saem até caber. 120 MB de screenshots numa
-// pasta escondida é exatamente o tipo de coisa que ninguém vai limpar.
-const MAX_BYTES = 120 * 1024 * 1024;
-let bytesEmDisco = 0;
-// 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';
-        case 'pesquisar_referencia': return `pesquisou referências: “${corta(args.consulta || args.query, 50)}”`;
-        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();
-
-    // Trabalho que não é de janela também merece aba — senão o painel fica
-    // vazio de "o que ela fez" justamente no caso mais comum (mexer em
-    // arquivo, rodar comando, pesquisar referência).
-    if (['write_file', 'edit_file', 'multi_edit', 'read_file'].includes(name)) {
-        const arq = String(args.path || '').split(/[\\/]/).pop();
-        return arq ? `📄 ${arq}` : '📄 Arquivos';
-    }
-    if (['run_shell', 'run_in_new_terminal'].includes(name)) return '⌨ Terminal';
-    if (name === 'pesquisar_referencia') return '🔎 Pesquisa';
-    if (['glob', 'grep', 'list_dir'].includes(name)) return '🔍 Busca';
-    if (name.startsWith('browser_')) return '🌐 Navegador';
-    if (name.startsWith('desktop_')) return '🖥 Tela';
-    if (name === 'spawn_agent') return '🤖 Subagente';
-    return '';
-}
-
-let proximaAba = 1;
-function entrarNaAba(nome) {
-    const alvo = corta(nome, 24);
-    if (!alvo) return;
-    let aba = state.abas.find((a) => a.nome.toLowerCase() === alvo.toLowerCase());
-    if (!aba) {
-        // id de contador próprio: com `abas.length + 1`, uma aba descartada
-        // fazia a próxima nascer com id repetido — e os passos da nova
-        // apareciam dentro da antiga.
-        aba = { id: proximaAba++, nome: alvo, passos: 0 };
-        state.abas.push(aba);
-        if (state.abas.length > MAX_ABAS) state.abas.shift();
-    }
-    state.abaAtual = aba;
-}
-
-// Guarda o quadro e cobra o aluguel: acima de MAX_FRAMES ou de MAX_BYTES, as
-// fotos mais velhas são APAGADAS do disco. É o que impede a pasta de virar um
-// álbum infinito na máquina do usuário.
-function registrarFrame(meta, arquivo) {
-    let tamanho = 0;
-    try { tamanho = fs.statSync(arquivo).size; } catch {}
-    state.frames.push({ ...meta, bytes: tamanho });
-    bytesEmDisco += tamanho;
-
-    while (state.frames.length > MAX_FRAMES || (bytesEmDisco > MAX_BYTES && state.frames.length > 1)) {
-        const velho = state.frames.shift();
-        bytesEmDisco -= velho.bytes || 0;
-        try { fs.unlinkSync(path.join(DIR, `frame-${velho.id}.png`)); } catch {}
-    }
-    if (bytesEmDisco < 0) bytesEmDisco = 0;
-}
-
-/** Apaga TUDO que o painel deixou no disco. Chamado ao desligar e ao sair. */
-function limparDisco() {
-    try {
-        for (const f of fs.readdirSync(DIR)) {
-            if (/^(frame-\d+|live|live-tmp)\.png$/.test(f)) {
-                try { fs.unlinkSync(path.join(DIR, f)); } catch {}
-            }
-        }
-    } catch {}
-    state.frames = [];
-    bytesEmDisco = 0;
-}
-
-/**
- * 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) 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++;
-        registrarFrame({ id, hora: entrada.hora, acao: entrada.acao, aba: entrada.aba }, arquivo);
-        return id;
-    }
-
-    const r = desktop.screenshot(arquivo);
-    if (!r.ok) { if (!state.erroFoto) state.erroFoto = r.error; return null; }
-
-    state.erroFoto = null;
-    state.proximoFrame++;
-    registrarFrame({ id, hora: entrada.hora, acao: entrada.acao, aba: entrada.aba }, arquivo);
-    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.
-// O mascote: um robozinho PROGRAMADOR. A cabeça é um monitor com o prompt
-// "❯_" na tela (é isso que ele faz: linha de comando), antena com luz de
-// atividade e dois bracinhos que digitam num tecladinho. O anterior era um
-// bloco de pixels sem leitura nenhuma — não dizia "programação", não dizia
-// nada. Olhos, antena, mão e cursor têm classe própria: a animação é CSS.
-const MASCOTE_SVG = `<svg viewBox="0 0 44 40" aria-hidden="true">
-  <!-- antena com a luz de atividade -->
-  <line x1="22" y1="1.5" x2="22" y2="6" stroke="#0891b2" stroke-width="1.6" stroke-linecap="round"/>
-  <circle class="antena" cx="22" cy="2" r="2.3" fill="#22d3ee"/>
-  <!-- corpo/monitor -->
-  <rect x="4" y="6" width="36" height="24" rx="5" fill="#0e2233" stroke="#22d3ee" stroke-width="1.8"/>
-  <rect x="7.5" y="9.5" width="29" height="17" rx="3" fill="#071522"/>
-  <!-- olhos -->
-  <g fill="#22d3ee">
-    <rect class="olho" x="12" y="14" width="5" height="6" rx="2.2"/>
-    <rect class="olho" x="27" y="14" width="5" height="6" rx="2.2"/>
-  </g>
-  <!-- o prompt: ❯ e o cursor piscando (é um programador, afinal) -->
-  <path d="M12.5 23.2 l2.4 1.5 -2.4 1.5" fill="none" stroke="#5eead4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  <rect class="cursor" x="17" y="23" width="4.5" height="3.2" rx=".6" fill="#5eead4"/>
-  <!-- braços + teclado -->
-  <g stroke="#0891b2" stroke-width="1.8" stroke-linecap="round">
-    <path class="braco braco1" d="M6 27 L3.5 33"/>
-    <path class="braco braco2" d="M38 27 L40.5 33"/>
-  </g>
-  <rect x="8" y="33" width="28" height="5" rx="2" fill="#12384d" stroke="#0891b2" stroke-width="1.2"/>
-  <g fill="#22d3ee" opacity=".85">
-    <rect class="tecla t1" x="11" y="35" width="4" height="1.6" rx=".6"/>
-    <rect class="tecla t2" x="17" y="35" width="4" height="1.6" rx=".6"/>
-    <rect class="tecla t3" x="23" y="35" width="4" height="1.6" rx=".6"/>
-    <rect class="tecla t1" x="29" y="35" width="4" height="1.6" rx=".6"/>
-  </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.
-// O favicon é o próprio mascote — o viewBox vem dele, não fixo (já ficou
-// errado uma vez quando o desenho mudou de tamanho e o número aqui não).
-const FAVICON = 'data:image/svg+xml,' + encodeURIComponent(
-    MASCOTE_SVG.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/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: 8px; top: 18px; width: 62px; height: 56px; filter: drop-shadow(0 8px 20px rgba(34,211,238,.35)); animation: flutua 3s ease-in-out infinite; }
-  @keyframes flutua { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(5px) } }
-  #topo .mascote svg { width: 100%; height: 100%; display: block; overflow: visible; }
-  /* vivo: pisca os olhos, o cursor do prompt pisca, a antena respira e as
-     mãozinhas digitam no teclado */
-  .mascote .olho { transform-box: fill-box; transform-origin: center; animation: piscaOlho 4s infinite; }
-  @keyframes piscaOlho { 0%, 91%, 100% { transform: scaleY(1) } 94%, 96% { transform: scaleY(.1) } }
-  .mascote .cursor { animation: piscaCursor 1.05s steps(1) infinite; }
-  @keyframes piscaCursor { 50% { opacity: 0 } }
-  .mascote .antena { animation: respira 2.2s ease-in-out infinite; }
-  @keyframes respira { 0%, 100% { opacity: 1; r: 2.3 } 50% { opacity: .55; r: 1.9 } }
-  .mascote .braco { transform-box: fill-box; transform-origin: top center; }
-  .mascote .braco1 { animation: digita .62s ease-in-out infinite; }
-  .mascote .braco2 { animation: digita .62s ease-in-out infinite; animation-delay: .31s; }
-  @keyframes digita { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(1.6px) } }
-  .mascote .tecla { animation: teclaAcende 1.24s steps(1) infinite; }
-  .mascote .t2 { animation-delay: .31s } .mascote .t3 { animation-delay: .62s }
-  @keyframes teclaAcende { 0%, 74% { opacity: .35 } 75%, 99% { opacity: 1 } }
-  #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);
-            armarFaxina();
-            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 = '';
-    limparDisco();   // desligou o painel, as fotos vão junto
-}
-
-// Fechou o PrimoCode (/exit, Ctrl+C, Ctrl+D): nada de print esquecido no
-// disco. `exit` cobre a saída normal; os sinais cobrem o resto.
-let faxinaArmada = false;
-function armarFaxina() {
-    if (faxinaArmada) return;
-    faxinaArmada = true;
-    const faxina = () => { try { limparDisco(); } catch {} };
-    process.once('exit', faxina);
-    for (const sinal of ['SIGINT', 'SIGTERM', 'SIGHUP']) {
-        process.once(sinal, () => { faxina(); process.exit(0); });
-    }
-}
-
-module.exports = { start, stop, step, instrucao, isOn, url, descrever, limparDisco };