primocode 7.13.0 → 7.14.1

package/bin/primocode.js

@@ -78,6 +78,53 @@ ${c.bold('Onde ele trabalha')}
   ${c.dim('Pasta de projeto nova só nasce quando ele vai mexer em arquivo.')}
 `;
 
+// ── 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
+// canônicos; os apelidos (/cd, /stream…) continuam valendo por extenso.
+const SLASH_COMANDOS = [
+    ['/help', 'todos os comandos'],
+    ['/project', 'lista/cria projetos em ~/primocode'],
+    ['/dir', 'trabalhar numa pasta sua'],
+    ['/mode', 'primocode | chat | auto'],
+    ['/model', 'top | main | fast'],
+    ['/attach', 'anexa arquivo ao pedido'],
+    ['/detach', 'remove os anexos'],
+    ['/files', 'lista os anexos'],
+    ['/tudo', 'tudo que ele sabe fazer'],
+    ['/tree', 'árvore do projeto'],
+    ['/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'],
+    ['/config', 'suas preferências'],
+    ['/clear', 'limpa a conversa'],
+    ['/cls', 'limpa a tela'],
+    ['/uninstall', 'remove o PrimoCode'],
+    ['/version', 'versão'],
+    ['/exit', 'sair'],
+];
+
+// O completer do readline: Tab completa o que der. Só age na palavra do
+// comando — depois do primeiro espaço o argumento é seu, não dele.
+function completarSlash(line) {
+    if (!line.startsWith('/') || /\s/.test(line)) return [[], line];
+    const baixa = line.toLowerCase();
+    const acertos = SLASH_COMANDOS.map(([nome]) => nome).filter((nome) => nome.startsWith(baixa));
+    return [acertos, line];
+}
+
+function mostrarMenuSlash() {
+    console.log('');
+    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'));
+}
+
 let rl = null;
 
 function makePrompt() {
@@ -605,7 +652,26 @@ async function handleSlash(text) {
         // rl.close() em vez de process.exit(): sair na marra descarta o que
         // ainda estava no buffer de saída.
         case 'exit': case 'quit': if (rl) rl.close(); break;
-        default: console.log(c.err(`Comando desconhecido: /${cmd}. Digite /help.`));
+        default: {
+            // "/" sozinho abre o menu; um prefixo único autopreenche e executa
+            // ("/str" → /streaming); 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) {
+                console.log(c.dim(`  → /${casam[0]}`));
+                await handleSlash('/' + casam[0] + (rest ? ' ' + rest : ''));
+                break;
+            }
+            if (casam.length > 1) {
+                console.log(c.muted(`  /${cmd}… pode ser:`));
+                for (const n of casam) {
+                    const [, desc] = SLASH_COMANDOS.find(([nome]) => nome === '/' + n);
+                    console.log(`    ${c.brand(ui.padRight('/' + n, 12))}${c.dim(desc)}`);
+                }
+                break;
+            }
+            console.log(c.err(`Comando desconhecido: /${cmd}. Digite / para ver o menu.`));
+        }
     }
 }
 
@@ -682,7 +748,7 @@ async function main() {
         userName: state.config.userName,
         pastaPadrao: state.workDirOrigem === 'padrao',
     }));
-    rl = readline.createInterface({ input: process.stdin, output: process.stdout, prompt: makePrompt() });
+    rl = readline.createInterface({ input: process.stdin, output: process.stdout, prompt: makePrompt(), completer: completarSlash });
     rl.prompt();
 
     // Fila: o readline continua emitindo 'line' enquanto um pedido está sendo
@@ -692,6 +758,38 @@ async function main() {
     let closed = false;
     let saidBye = false;
 
+    // ── Sugestão fantasma: o autopreenchimento VISÍVEL enquanto digita ──
+    // "/str" mostra "eaming" esmaecido na frente do cursor, como o Claude
+    // Code. Seta → (ou Tab) aceita; Enter com o pedaço já executa. Desenhada
+    // DEPOIS de o readline processar a tecla (setImmediate), por cima do que
+    // sobrou da linha (\\x1b[0K limpa), e o cursor volta para o lugar.
+    if (process.stdin.isTTY && process.stdout.isTTY) {
+        let fantasma = '';
+        const desenharFantasma = () => {
+            if (busy || pendingAsk || !rl) return;
+            const linha = rl.line;
+            const noFim = rl.cursor === linha.length;
+            fantasma = '';
+            if (noFim && linha.startsWith('/') && !/\s/.test(linha) && linha.length > 1) {
+                const baixa = linha.toLowerCase();
+                const hit = SLASH_COMANDOS.map(([n]) => n).find((n) => n.startsWith(baixa) && n.length > linha.length);
+                if (hit) fantasma = hit.slice(linha.length);
+            }
+            if (!noFim) return;   // cursor no meio: não mexe no que vem depois dele
+            // Limpa resto da linha (fantasma antigo) e desenha o novo, voltando o cursor.
+            process.stdout.write('\x1b[0K' + (fantasma ? `\x1b[2m${fantasma}\x1b[0m\x1b[${fantasma.length}D` : ''));
+        };
+        process.stdin.on('keypress', (ch, key) => {
+            // Seta → no fim da linha aceita a sugestão inteira.
+            if (key && key.name === 'right' && fantasma && rl && rl.cursor === rl.line.length) {
+                const resto = fantasma;
+                fantasma = '';
+                rl.write(resto);
+            }
+            setImmediate(desenharFantasma);
+        });
+    }
+
     function sayBye() {
         if (saidBye) return;
         saidBye = true;

package/lib/desktop.js

@@ -659,25 +659,40 @@ function clickElement(nome, opts = {}) {
 }
 
 // ── Screenshot ────────────────────────────────────────
-function screenshot(saveTo) {
-    const filename = saveTo || `desktop-${Date.now()}.png`;
-    const done = (r) => (r.ok ? { ok: true, path: filename, bytes: sizeOf(filename) } : r);
+// 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.
+let LINUX_SHOT;
+function linuxShot() {
+    if (LINUX_SHOT === undefined) LINUX_SHOT = firstCmd(['scrot', 'maim', 'gnome-screenshot', 'spectacle', 'import']);
+    return LINUX_SHOT;
+}
 
-    if (PLATFORM === 'darwin') {
-        return done(run(`screencapture -x "${filename}"`));
-    }
+/**
+ * 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.
+ */
+function screenshotCommand(filename) {
+    if (PLATFORM === 'darwin') return `screencapture -x "${filename}"`;
     if (PLATFORM === 'win32') {
         const ps = `Add-Type -AssemblyName System.Drawing; Add-Type -AssemblyName System.Windows.Forms; $b=[System.Windows.Forms.Screen]::PrimaryScreen.Bounds; $bmp=New-Object System.Drawing.Bitmap($b.Width,$b.Height); $g=[System.Drawing.Graphics]::FromImage($bmp); $g.CopyFromScreen($b.Location,[System.Drawing.Point]::Empty,$bmp.Size); $bmp.Save('${filename.replace(/'/g, "''")}'); $g.Dispose(); $bmp.Dispose()`;
-        return done(pwshRun(ps));
+        return pwshCmd(ps);
     }
-    // Linux: tenta as ferramentas comuns, na ordem.
-    const scrot = firstCmd(['scrot', 'gnome-screenshot', 'spectacle', 'import', 'maim']);
-    if (scrot === 'scrot') return done(run(`scrot -o "${filename}"`));
-    if (scrot === 'maim') return done(run(`maim "${filename}"`));
-    if (scrot === 'gnome-screenshot') return done(run(`gnome-screenshot -f "${filename}"`));
-    if (scrot === 'spectacle') return done(run(`spectacle -b -n -o "${filename}"`));
-    if (scrot === 'import') return done(run(`import -window root "${filename}"`)); // ImageMagick
-    return { ok: false, error: 'Screenshot indisponível no Linux. Instale scrot, gnome-screenshot, spectacle, maim ou ImageMagick (import).' };
+    const tool = linuxShot();
+    if (tool === 'scrot') return `scrot -o "${filename}"`;
+    if (tool === 'maim') return `maim "${filename}"`;
+    if (tool === 'gnome-screenshot') return `gnome-screenshot -f "${filename}"`;
+    if (tool === 'spectacle') return `spectacle -b -n -o "${filename}"`;
+    if (tool === 'import') return `import -window root "${filename}"`; // ImageMagick
+    return null;
+}
+
+function screenshot(saveTo) {
+    const filename = saveTo || `desktop-${Date.now()}.png`;
+    const cmd = screenshotCommand(filename);
+    if (!cmd) return { ok: false, error: 'Screenshot indisponível no Linux. Instale scrot, maim, gnome-screenshot, spectacle ou ImageMagick (import).' };
+    const r = run(cmd);
+    return r.ok ? { ok: true, path: filename, bytes: sizeOf(filename) } : r;
 }
 
 function sizeOf(f) {
@@ -719,7 +734,7 @@ module.exports = {
     click, doubleClick, move, drag, scroll,
     type, key,
     openApp, listWindows, focusWindow, uiElements, clickElement,
-    screenshot, getScreenSize,
+    screenshot, screenshotCommand, getScreenSize,
     TOOLS,
     // Puras, exportadas para o test/desktop.test.js provar a tradução de teclas
     // e a escolha de elemento sem depender do SO da máquina de teste.

package/lib/streaming.js

@@ -19,6 +19,7 @@ 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');
@@ -44,8 +45,68 @@ const state = {
     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',
@@ -179,6 +240,20 @@ function capturar(entrada) {
 
     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; }
 
@@ -205,13 +280,13 @@ const MASCOTE_SVG = `<svg viewBox="0 0 9 3.6" aria-hidden="true">
 <g fill="#0b1220"><rect x="3" y=".35" width=".8" height=".5" rx=".1"/><rect 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 finalizada, a partir do desenho do dono: fundo grafite, mascote
-// inclinado, "Primocode" branco no alto; a janela de borda branca grossa com
-// as três bolinhas e as abas separadas por "|"; e, novidade combinada, a
-// BARRA DE COMANDO — a instrução que você deu no terminal aparece ali,
-// autopreenchendo letra por letra, com cursor piscando, enquanto o agente
-// executa. Abaixo da moldura, a linha do tempo: miniaturas para voltar em
-// qualquer passo e a lista de ações, com cada pedido marcando onde começou.
+// 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>`,
 );
@@ -223,94 +298,97 @@ const PAGINA = `<!doctype html>
 <link rel="icon" href="${FAVICON}">
 <style>
   * { box-sizing: border-box; margin: 0; }
-  ::selection { background: rgba(255,255,255,.2); }
+  ::selection { background: rgba(34,211,238,.28); }
   body {
-    background: radial-gradient(1200px 500px at 50% -100px, #2e2e2e 0%, #262626 55%, #1f1f1f 100%) fixed #262626;
-    color: #fff; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    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 ── */
-  #topo { position: relative; width: min(1120px, 100%); padding: 46px 0 28px; text-align: center; }
-  #topo .mascote { position: absolute; left: 4px; top: 28px; width: 100px; height: 42px; transform: rotate(-32deg); filter: drop-shadow(0 6px 14px rgba(34,211,238,.35)); animation: flutua 3.2s ease-in-out infinite alternate; }
+  /* ── 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: 26px; width: 100px; height: 42px; transform: rotate(-32deg); filter: drop-shadow(0 8px 20px rgba(34,211,238,.4)); animation: flutua 3.2s ease-in-out infinite alternate; }
   @keyframes flutua { from { translate: 0 0 } to { translate: 0 5px } }
   #topo .mascote svg { width: 100%; height: 100%; display: block; }
-  #topo h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 650; letter-spacing: .5px; text-shadow: 0 3px 22px rgba(0,0,0,.55); }
-  #topo .vivo { position: absolute; right: 2px; top: 50px; display: inline-flex; align-items: center; gap: 8px; color: #a9a9a9; font-size: 12.5px; background: #1c1c1cd9; border: 1px solid #363636; border-radius: 999px; padding: 6px 14px; }
-  .dot { width: 9px; height: 9px; border-radius: 50%; background: #46d160; box-shadow: 0 0 8px #46d16088; animation: pulsa 1.4s infinite; }
+  #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: 9px solid #f5f5f5; border-radius: 44px;
+    width: min(1120px, 100%); background: #000; border: 1px solid #24344d; border-radius: 22px;
     overflow: hidden; display: flex; flex-direction: column;
-    box-shadow: 0 34px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06), 0 10px 34px rgba(0,0,0,.5);
+    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(#262626, #212121); padding: 15px 28px; min-height: 60px; border-bottom: 1px solid #0c0c0c; }
-  #barra .b { flex: none; margin-right: 12px; box-shadow: inset 0 -2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5); }
-  #barra .b.r { width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff5a5a, #d40000); }
-  #barra .b.y { width: 30px; height: 17px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #ffe95c, #f5c400); }
-  #barra .b.g { width: 24px; height: 14px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #6fe589, #24b53e); }
+  #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 { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; display: flex; align-items: center; gap: 13px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: clamp(15px, 2.2vw, 22px); font-weight: 550; }
+  /* 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 { border: 0; background: none; cursor: pointer; font: inherit; color: rgba(255,255,255,.45); padding: 3px 2px; transition: color .18s ease, text-shadow .18s ease; }
-  .aba:hover { color: rgba(255,255,255,.85); }
-  .aba.ativa { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,.45); }
-  .aba .qtd { color: rgba(255,255,255,.35); font-size: .62em; vertical-align: super; margin-left: 4px; font-weight: 600; }
-  .sep { color: rgba(255,255,255,.28); font-weight: 300; }
+  .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: 12px; background: #141414; border-bottom: 1px solid #0a0a0a; padding: 12px 26px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14.5px; min-height: 46px; }
-  #comando .chevron { color: #46d160; font-weight: 700; flex: none; }
-  #comando .texto { color: #eaeaea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  #comando .texto.vazio { color: #5c5c5c; font-style: italic; }
-  #comando .cursor { flex: none; width: 8px; height: 17px; background: #eaeaea; margin-left: 2px; animation: pisca 1s steps(1) infinite; }
+  #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: #5c5c5c; font-size: 11.5px; flex: none; }
-
-  /* ── A tela ── */
-  #tela { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; background: #000; }
-  #tela img { width: 100%; max-height: 62vh; object-fit: contain; display: none; opacity: 0; transition: opacity .28s ease; }
-  #aviso { color: #fff; text-align: center; padding: 90px 24px; }
-  #aviso .titulo { font-size: clamp(20px, 3.2vw, 32px); font-weight: 550; }
-  #aviso .sub { color: #8f8f8f; font-size: 14.5px; margin-top: 14px; line-height: 1.7; }
-  #carimbo { position: absolute; left: 18px; bottom: 14px; background: rgba(10,10,10,.72); backdrop-filter: blur(6px); border: 1px solid #2e2e2e; color: #c9c9c9; font-size: 12px; padding: 5px 13px; border-radius: 999px; display: none; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #carimbo b { color: #fff; font-weight: 600; }
+  #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: 20px; }
-  #filme { display: flex; gap: 10px; padding: 4px 2px 14px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
-  .foto { flex: none; border: 1.5px solid #3a3a3a; border-radius: 10px; background: #000; cursor: pointer; padding: 0; width: 104px; height: 62px; overflow: hidden; opacity: .65; transition: transform .16s ease, opacity .16s ease, border-color .16s ease, box-shadow .16s ease; }
-  .foto:hover { opacity: 1; transform: translateY(-2px); border-color: #7a7a7a; }
+  #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: #fff; opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.45); }
-
-  #cartao { background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 18px; overflow: hidden; }
-  #cartao header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #272727; color: #bdbdbd; font-size: 13px; font-weight: 600; letter-spacing: .3px; }
-  #cartao header span b { color: #fff; }
-  #passos { max-height: 240px; overflow-y: auto; padding: 6px 0 10px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
-  #passos::-webkit-scrollbar { width: 8px; } #passos::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }
-  .item { padding: 5px 18px; display: flex; gap: 10px; font-size: 13.5px; align-items: baseline; transition: background .12s ease; }
-  .item:hover { background: #222; }
-  .item .n { color: #6b6b6b; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
-  .item .ok { color: #46d160; } .item .falha { color: #ff6b6b; }
-  .item .txt { flex: 1; word-break: break-word; color: #dcdcdc; }
-  .item .txt .erro { color: #ff8a8a; font-size: 12px; display: block; margin-top: 1px; }
-  .item .hora { color: #6b6b6b; font-size: 11px; font-variant-numeric: tabular-nums; }
-  .item.temfoto { cursor: pointer; } .item.temfoto:hover .txt { color: #fff; }
-  .item.pedido { background: #191919; border-top: 1px solid #262626; border-bottom: 1px solid #262626; margin: 6px 0; padding: 8px 18px; }
-  .item.pedido .txt { color: #fff; font-weight: 600; }
-  .item.pedido .chev { color: #46d160; font-weight: 800; }
-
-  footer { color: #6b6b6b; font-size: 12px; padding-top: 18px; }
-  footer b { color: #9a9a9a; font-weight: 600; }
+  .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>Primocode</h1>
-  <span class="vivo"><span class="dot"></span><span id="st">conectando…</span></span>
+  <h1>Primo<span>code</span></h1>
+  <span class="vivo"><span class="pulso"></span><span id="st">conectando…</span></span>
 </div>
 
 <div id="janela">
@@ -325,11 +403,12 @@ const PAGINA = `<!doctype html>
     <span class="hora" id="cmdhora"></span>
   </div>
   <section id="tela">
-    <img id="frame" alt="tela que a IA está usando">
+    <img id="frame" alt="tela do computador, ao vivo">
     <div id="aviso">
-      <div class="titulo">Tela que a IA está usando aparece aqui</div>
-      <div class="sub">Dê uma instrução no terminal do PrimoCode e veja cada passo, ao vivo.<br>Cada app em que ele mexer vira uma aba — volte nelas para rever o que já foi feito.</div>
+      <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>
@@ -345,12 +424,45 @@ const PAGINA = `<!doctype html>
 
 <script>
 const VIVO = 0;                 // id da aba "Ao vivo"
-let dados = { abas: [], frames: [], log: [], instrucoes: [] };
+let dados = { abas: [], frames: [], log: [], instrucoes: [], liveSeq: 0 };
 let abaSel = VIVO;              // aba escolhida pelo usuário
-let fotoSel = null;             // frame fixado no filmstrip (null = mais recente)
+let fotoSel = null;             // frame fixado (null = vídeo/mais recente)
 let ultimoEstado = '';
 
-// ── autopreencher a instrução, letra por letra ──
+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;
@@ -362,14 +474,12 @@ function autopreencher(inst) {
   document.getElementById('cmdhora').textContent = inst.hora;
   let i = 0;
   digitando = setInterval(() => {
-    i += 1 + Math.floor(Math.random() * 2);            // cadência de gente digitando
+    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);
-  }, 34);
+  }, 32);
 }
 
-function esc(s) { return String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
-
 function framesDaAba(id) {
   return id === VIVO ? dados.frames : dados.frames.filter((f) => f.aba === id);
 }
@@ -378,46 +488,52 @@ function logDaAba(id) {
 }
 
 function render() {
-  // Abas: "Ao vivo" + uma por app/janela, separadas por |
+  // 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; render(); });
+  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;
 
-  // Imagem: a fixada no filmstrip, senão a mais nova da aba
+  // Fora do modo vídeo (aba antiga ou foto fixada): mostra o quadro daquela aba
   const fs = framesDaAba(abaSel);
-  const atual = fotoSel != null ? fs.find((f) => f.id === fotoSel) : fs[fs.length - 1];
   const img = document.getElementById('frame');
   const aviso = document.getElementById('aviso');
+  const badge = document.getElementById('badge');
   const carimbo = document.getElementById('carimbo');
-  if (atual) {
-    if (img.dataset.n !== String(atual.id)) {
-      img.style.opacity = '0';
-      img.onload = () => { img.style.opacity = '1'; };
-      img.src = '/frame?n=' + atual.id;
-      img.dataset.n = String(atual.id);
+  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';
     }
-    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 ao ao-vivo</b>' : '');
   } else {
-    img.style.display = 'none'; aviso.style.display = 'block'; carimbo.style.display = 'none';
-    if (dados.erroFoto) aviso.querySelector('.sub').textContent = 'Sem foto da tela: ' + dados.erroFoto;
+    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' + ((atual && f.id === atual.id) ? ' ativa' : '') + '" data-id="' + f.id + '" title="' + esc(f.acao) + '"><img loading="lazy" src="/frame?n=' + f.id + '"></button>').join('');
+    '<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 "mais recente"
+    fotoSel = (fotoSel === id) ? null : id;   // clicar de novo volta ao vídeo
+    quadroNaTela = -1;
     render();
   });
   if (fotoSel == null) filme.scrollLeft = filme.scrollWidth;
@@ -436,7 +552,7 @@ function render() {
       + '<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); render(); });
+  document.querySelectorAll('.item.temfoto').forEach((el) => el.onclick = () => { fotoSel = Number(el.dataset.frame); quadroNaTela = -1; render(); });
 }
 
 async function tick() {
@@ -450,9 +566,10 @@ async function tick() {
   } catch (e) {
     document.getElementById('st').textContent = 'reconectando…';
   }
-  setTimeout(tick, 700);
+  setTimeout(tick, 600);
 }
 tick();
+videoTick();
 </script>
 </body></html>`;
 
@@ -461,12 +578,13 @@ 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+\.png$/.test(f)) fs.unlinkSync(path.join(DIR, f)); } catch {}
+    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,
@@ -474,9 +592,19 @@ function start() {
                     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.
@@ -505,6 +633,10 @@ function start() {
             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);
         });
     });
@@ -512,6 +644,7 @@ function start() {
 
 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 = '';

package/lib/ui.js

@@ -161,9 +161,9 @@ const TIPS = [
 ];
 
 const NEWS = [
-    'Agora ele INTERAGE com o computador: janelas, botões e ícones pelo nome',
-    '/streaming abre um painel ao vivo — veja cada passo dele na tela',
-    'Dois provedores em corrente: acabou a cota de um, o outro atende',
+    '/streaming agora é VÍDEO ao vivo — assista ele trabalhando, aba por aba',
+    'Comandos se autopreenchem: /str + Tab (ou Enter) vira /streaming',
+    'Ele INTERAGE com o computador: janelas, botões e ícones pelo nome',
 ];
 
 // ── Cabeçalho ────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "7.13.0",
+  "version": "7.14.1",
   "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": {