primocode 7.12.2 → 7.14.0

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

package/lib/act.js

@@ -185,6 +185,11 @@ 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 {} }
+
     for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
         const sp = new Spinner(subagent ? 'subagente trabalhando' : 'Primo Code pensando').start();
 

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');
@@ -40,11 +41,65 @@ const state = {
     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,
 };
 
+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) return;
+    state.liveTimer = setTimeout(cicloVideo, ms);
+    state.liveTimer.unref();
+}
+
+function cicloVideo() {
+    state.liveTimer = null;
+    if (!state.on) 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();
+    exec(cmd, { timeout: 8000 }, (err) => {
+        const dur = Date.now() - t0;
+        if (!err) {
+            try {
+                fs.renameSync(LIVE_TMP(), LIVE());
+                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',
@@ -123,6 +178,22 @@ function entrarNaAba(nome) {
     state.abaAtual = aba;
 }
 
+/**
+ * A instrução que o usuário acabou de dar. A página autopreenche na barra de
+ * comando, letra por letra, e marca o começo dela na linha do tempo.
+ */
+function instrucao(texto) {
+    if (!state.on) return;
+    const t = String(texto || '').trim();
+    if (!t) return;
+    state.instrucoes.push({ n: state.instrucoes.length + 1, hora: new Date().toTimeString().slice(0, 8), texto: corta(t, 300) });
+    if (state.instrucoes.length > 40) state.instrucoes.splice(0, state.instrucoes.length - 40);
+
+    state.passo++;
+    state.log.push({ n: state.passo, hora: new Date().toTimeString().slice(0, 8), tipo: 'instrucao', acao: corta(t, 160), ok: true, aba: null });
+    if (state.log.length > MAX_LOG) state.log.splice(0, state.log.length - MAX_LOG);
+}
+
 /**
  * Chamada pelo loop do agente depois de CADA tool. Quando o streaming está
  * desligado é um no-op — o caminho normal não paga nada por isto.
@@ -162,6 +233,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; }
 
@@ -188,73 +273,115 @@ 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 página segue o desenho do dono, traço a traço: fundo grafite, mascote
-// inclinado no canto, "Primocode" branco no alto; a janela de borda branca
-// grossa e canto bem redondo; barra #232323 com as três bolinhas e as abas em
-// texto branco centralizado, separadas por "|"; dentro, a tela preta com a
-// imagem ao vivo. O histórico (miniaturas + passos) fica ABAIXO da janela,
-// discreto — a moldura fica idêntica ao desenho.
+// A tela do painel, na identidade do app — a MESMA paleta do design system do
+// CLI (lib/ui.js): primária cyan #22d3ee, neutros slate, rose para falha. A
+// estrutura é a do desenho do dono: mascote inclinado no canto, "Primocode"
+// no alto, a janela com as bolinhas e as abas separadas por "|", a tela
+// embaixo. Dentro da tela roda o VÍDEO ao vivo (o loop de captura acima); as
+// abas em cima são tudo que o agente abriu — clicáveis, cada uma com seus
+// quadros e passos; e a barra de comando autopreenche a instrução digitando.
+const FAVICON = 'data:image/svg+xml,' + encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3.6">${MASCOTE_SVG.replace(/^<svg[^>]*>|<\/svg>$/g, '')}</svg>`,
+);
+
 const PAGINA = `<!doctype html>
 <html lang="pt-BR"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>PrimoCode · Ao vivo</title>
+<title>Primocode · Ao vivo</title>
+<link rel="icon" href="${FAVICON}">
 <style>
   * { box-sizing: border-box; margin: 0; }
-  body { background: #262626; color: #fff; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 16px 30px; }
+  ::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 no canto, nome centrado */
-  #topo { position: relative; width: min(1100px, 100%); padding: 44px 0 30px; text-align: center; }
-  #topo .mascote { position: absolute; left: 6px; top: 30px; width: 96px; height: 40px; transform: rotate(-32deg); }
+  /* ── 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(34px, 6vw, 58px); font-weight: 600; letter-spacing: .5px; }
-  #topo .vivo { position: absolute; right: 6px; top: 46px; display: inline-flex; align-items: center; gap: 7px; color: #8a8a8a; font-size: 12px; }
-  .dot { width: 9px; height: 9px; border-radius: 50%; background: #46d160; animation: pulsa 1.4s infinite; }
-  @keyframes pulsa { 50% { opacity: .25 } }
-
-  /* A janela — borda branca grossa, canto bem redondo */
-  #janela { width: min(1100px, 100%); background: #000; border: 10px solid #f5f5f5; border-radius: 46px; overflow: hidden; display: flex; flex-direction: column; }
-  #barra { position: relative; display: flex; align-items: center; background: #232323; padding: 14px 26px; min-height: 58px; }
-  #barra .b { flex: none; margin-right: 12px; }
-  #barra .b.r { width: 17px; height: 17px; border-radius: 50%; background: #d40000; }
-  #barra .b.y { width: 30px; height: 17px; border-radius: 50%; background: #ffdd00; }
-  #barra .b.g { width: 24px; height: 14px; border-radius: 50%; background: #33cc33; }
-
-  /* Abas: texto branco centralizado na barra, separadas por | */
-  #abas { position: absolute; left: 50%; transform: translateX(-50%); max-width: 62%; display: flex; align-items: center; gap: 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: clamp(16px, 2.4vw, 24px); font-weight: 500; }
+  #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 { border: 0; background: none; cursor: pointer; font: inherit; color: rgba(255,255,255,.5); padding: 2px 2px; }
-  .aba:hover { color: rgba(255,255,255,.8); }
-  .aba.ativa { color: #fff; }
-  .sep { color: rgba(255,255,255,.45); font-weight: 400; }
-
-  /* A tela */
-  #tela { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; background: #000; }
-  #tela img { width: 100%; max-height: 64vh; object-fit: contain; display: none; }
-  #aviso { color: #fff; text-align: center; font-size: clamp(20px, 3.4vw, 34px); font-weight: 500; padding: 110px 20px; }
-  #carimbo { position: absolute; left: 16px; bottom: 12px; background: rgba(0,0,0,.75); border: 1px solid #2e2e2e; color: #bdbdbd; font-size: 12px; padding: 3px 10px; border-radius: 8px; display: none; max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-  /* Histórico: fora da moldura, discreto, abaixo da janela */
-  #historico { width: min(1100px, 100%); padding-top: 14px; }
-  #filme { display: flex; gap: 6px; padding: 2px 2px 8px; overflow-x: auto; }
-  .foto { flex: none; border: 1px solid #3a3a3a; border-radius: 6px; background: #000; cursor: pointer; padding: 0; width: 84px; height: 50px; overflow: hidden; opacity: .7; }
+  .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: #fff; opacity: 1; }
-  #passos { max-height: 170px; overflow-y: auto; }
-  .item { padding: 3px 6px; display: flex; gap: 8px; font-size: 13px; }
-  .item .n { color: #6f6f6f; min-width: 3ch; text-align: right; }
-  .item .ok { color: #46d160; } .item .falha { color: #e5484d; }
-  .item .txt { flex: 1; word-break: break-word; color: #d6d6d6; }
-  .item .txt .erro { color: #e5484d; font-size: 12px; display: block; }
-  .item .hora { color: #6f6f6f; font-size: 11px; }
-  .item.temfoto { cursor: pointer; } .item.temfoto:hover .txt { color: #fff; }
-
-  footer { color: #6f6f6f; font-size: 12px; padding-top: 14px; }
+  .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">
@@ -262,82 +389,153 @@ const PAGINA = `<!doctype html>
     <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 que a IA está usando">
-    <div id="aviso">Tela que a IA está</div>
+    <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="passos"></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 (127.0.0.1) · /streaming desliga</footer>
+<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: [] };
+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 = '';
 
 function esc(s) { return String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
 
+// ── o vídeo: troca o quadro assim que um novo existe, sem piscar ──
+let quadroNaTela = -1;
+function modoVideo() { return abaSel === VIVO && fotoSel == null; }
+function videoTick() {
+  if (modoVideo() && dados.liveSeq > 0 && dados.liveSeq !== quadroNaTela) {
+    const seq = dados.liveSeq;
+    const pre = new Image();                       // pré-carrega fora da tela:
+    pre.onload = () => {                           // o quadro só entra inteiro
+      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 = seq;
+    };
+    pre.src = '/live?' + seq;
+  }
+  setTimeout(videoTick, 280);
+}
+
+// ── 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);
+  return id === VIVO ? dados.log : dados.log.filter((e) => e.aba === id || e.tipo === 'instrucao');
 }
 
 function render() {
-  // Abas: "Ao vivo" + uma por app/janela, texto separado 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) + '</button>'
+    '<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) {
-    const src = '/frame?n=' + atual.id;
-    if (img.dataset.n !== String(atual.id)) { img.src = src; img.dataset.n = String(atual.id); }
-    img.style.display = 'block'; aviso.style.display = 'none';
-    carimbo.style.display = 'block';
-    carimbo.textContent = '#' + atual.id + ' · ' + atual.hora + ' · ' + atual.acao + (fotoSel != null ? '  (clique na miniatura de novo para voltar ao mais recente)' : '');
+  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 {
-    img.style.display = 'none'; aviso.style.display = 'block'; carimbo.style.display = 'none';
-    if (dados.erroFoto) aviso.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 14)
+  // Filmstrip da aba (as últimas 16)
   const filme = document.getElementById('filme');
-  const tira = fs.slice(-14);
+  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;
 
-  // Passos da aba (mais novos primeiro)
-  const passos = logDaAba(abaSel).slice(-40).reverse();
-  document.getElementById('passos').innerHTML = passos.map((e) =>
-    '<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); render(); });
+  // 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() {
@@ -345,14 +543,16 @@ async function tick() {
     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, 700);
+  setTimeout(tick, 600);
 }
 tick();
+videoTick();
 </script>
 </body></html>`;
 
@@ -361,21 +561,33 @@ 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,
                     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.
@@ -411,9 +623,10 @@ 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 = '';
 }
 
-module.exports = { start, stop, step, isOn, url, descrever };
+module.exports = { start, stop, step, instrucao, isOn, url, descrever };

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.12.2",
+  "version": "7.14.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": {