primocode 7.11.0 → 7.12.1

package/lib/streaming.js

@@ -3,9 +3,11 @@
  *
  * 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 mostra, no
- * navegador, cada ação em ordem + uma foto da tela tirada logo depois dela.
- * Você dá a instrução no terminal e VÊ o agente fazendo, passo a passo.
+ * 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.
@@ -20,8 +22,11 @@ const os = require('os');
 const desktop = require('./desktop');
 
 const DIR = path.join(os.homedir(), '.primocode', 'streaming');
-const FRAME = path.join(DIR, 'frame.png');
-const MAX_LOG = 200;
+const MAX_LOG = 300;
+// Fotos guardadas em disco para o "voltar no tempo" das abas. Além disso a
+// pasta viraria um álbum infinito — as mais velhas saem.
+const MAX_FRAMES = 80;
+const MAX_ABAS = 12;
 // Uma foto por ação no máximo a cada 600ms: digitar letra por letra não pode
 // virar uma rajada de screenshots.
 const INTERVALO_FOTO_MS = 600;
@@ -30,7 +35,10 @@ const state = {
     on: false,
     server: null,
     url: '',
-    frame: 0,          // contador: a página troca a imagem quando ele muda
+    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: [],
     erroFoto: null,
     ultimaFoto: 0,
@@ -88,6 +96,33 @@ function descrever(name, args = {}) {
     }
 }
 
+// ── Abas: uma por app/janela em que o agente mexeu ────────────────────────
+// Abrir um app, focar uma janela ou abrir um site começa (ou reencontra) a
+// aba daquele contexto. As ações seguintes caem nela — é o que deixa o
+// "o que a IA já fez" navegável depois, em vez de um rolo único.
+
+function nomeDeAba(name, args = {}) {
+    if (name === 'desktop_open_app') return String(args.app || args.name || '').trim();
+    if (name === 'desktop_focus') return String(args.window || args.title || '').trim();
+    if (name === 'browser_open') {
+        try { return new URL(String(args.url)).hostname || 'navegador'; } catch { return 'navegador'; }
+    }
+    if (args && args.window) return String(args.window).trim();
+    return '';
+}
+
+function entrarNaAba(nome) {
+    const alvo = corta(nome, 24);
+    if (!alvo) return;
+    let aba = state.abas.find((a) => a.nome.toLowerCase() === alvo.toLowerCase());
+    if (!aba) {
+        aba = { id: state.abas.length + 1, nome: alvo, passos: 0 };
+        state.abas.push(aba);
+        if (state.abas.length > MAX_ABAS) state.abas.shift();
+    }
+    state.abaAtual = aba;
+}
+
 /**
  * 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.
@@ -95,119 +130,262 @@ function descrever(name, args = {}) {
 function step(name, args, result) {
     if (!state.on) return;
 
+    const troca = nomeDeAba(name, args || {});
+    if (troca) entrarNaAba(troca);
+    if (!state.abaAtual && ACOES_NA_TELA.has(name)) entrarNaAba('Tela');
+
     state.passo++;
-    state.log.push({
+    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,
-    });
-    if (state.log.length > MAX_LOG) state.log.splice(0, state.log.length - MAX_LOG);
+        aba: state.abaAtual ? state.abaAtual.id : null,
+    };
 
-    if (ACOES_NA_TELA.has(name)) capturar();
+    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() {
+function capturar(entrada) {
     const agora = Date.now();
-    if (agora - state.ultimaFoto < INTERVALO_FOTO_MS) return;
+    if (agora - state.ultimaFoto < INTERVALO_FOTO_MS) return null;
     state.ultimaFoto = agora;
-    const r = desktop.screenshot(FRAME);
-    if (r.ok) { state.frame++; state.erroFoto = null; }
-    else if (!state.erroFoto) state.erroFoto = r.error;
+
+    const id = state.proximoFrame;
+    const arquivo = path.join(DIR, `frame-${id}.png`);
+    const r = desktop.screenshot(arquivo);
+    if (!r.ok) { if (!state.erroFoto) state.erroFoto = r.error; return null; }
+
+    state.erroFoto = null;
+    state.proximoFrame++;
+    state.frames.push({ id, hora: entrada.hora, acao: entrada.acao, aba: entrada.aba });
+    while (state.frames.length > MAX_FRAMES) {
+        const velho = state.frames.shift();
+        try { fs.unlinkSync(path.join(DIR, `frame-${velho.id}.png`)); } catch {}
+    }
+    return id;
 }
 
 // ── Página ────────────────────────────────────────────────────────────────
+// O desenho combinado: mascote + PrimoCode no cabeçalho; abaixo, uma "janela"
+// de borda branca com as três bolinhas e as ABAS; dentro, a tela que a IA
+// está usando (ou usou, nas abas antigas), com os passos daquela aba embaixo.
+
+// O mascote do CLI (▐▛███▜▌ …) redesenhado em SVG, célula a célula, na mesma
+// paleta: bloco cheio na cor viva, contorno na apagada.
+const MASCOTE_SVG = `<svg viewBox="0 0 9 3.6" aria-hidden="true">
+<g fill="#0891b2"><rect x="1" y="0" width="1" height="1"/><rect x="7" y="0" width="1" height="1"/><rect x="0" y="1" width="1" height="1" opacity=".7"/><rect x="8" y="1" width="1" height="1" opacity=".7"/><rect x="1" y="1" width="1" height="1"/><rect x="7" y="1" width="1" height="1"/></g>
+<g fill="#22d3ee"><rect x="2" y="0" width="5" height="1" rx=".12"/><rect x="2" y="1" width="5" height="1"/><rect x="1.9" y="2.2" width=".9" height=".5" rx=".1"/><rect x="3.4" y="2.2" width=".9" height=".5" rx=".1"/><rect x="4.9" y="2.2" width=".9" height=".5" rx=".1"/><rect x="6.4" y="2.2" width=".9" height=".5" rx=".1"/></g>
+<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.
 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>
 <style>
   * { box-sizing: border-box; margin: 0; }
-  body { background: #0b1220; color: #e2e8f0; font: 14px/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace; height: 100vh; display: flex; flex-direction: column; }
-  header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #1e293b; }
-  .dot { width: 9px; height: 9px; border-radius: 50%; background: #22d3ee; animation: pulsa 1.4s infinite; }
+  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; }
+
+  /* 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); }
+  #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 } }
-  header b { color: #22d3ee; font-weight: 600; }
-  header span { color: #64748b; font-size: 12px; margin-left: auto; }
-  main { flex: 1; display: flex; min-height: 0; }
-  #tela { flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px; min-width: 0; background: #0f172a; }
-  #tela img { max-width: 100%; max-height: 100%; border: 1px solid #1e293b; border-radius: 8px; display: none; }
-  #aviso { color: #64748b; text-align: center; max-width: 46ch; }
-  aside { width: 360px; max-width: 45%; border-left: 1px solid #1e293b; overflow-y: auto; padding: 10px 0; }
-  .item { padding: 6px 14px; display: flex; gap: 8px; border-left: 2px solid transparent; }
-  .item.novo { border-left-color: #22d3ee; background: #0f172a; }
-  .item .n { color: #475569; min-width: 3ch; text-align: right; }
-  .item .ok { color: #22d3ee; }
-  .item .falha { color: #fb7185; }
-  .item .txt { flex: 1; word-break: break-word; }
-  .item .hora { color: #475569; font-size: 11px; }
-  .item .erro { color: #fb7185; font-size: 12px; display: block; }
+
+  /* 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; }
+  #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; }
+  .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; }
 </style></head>
 <body>
-<header><span class="dot"></span><b>PrimoCode</b> · Ao vivo <span id="st">conectando…</span></header>
-<main>
+<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>
+</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>
   <section id="tela">
-    <img id="frame" alt="tela do computador">
-    <div id="aviso">Aguardando a primeira ação na tela…<br><br>Dê uma instrução no terminal do PrimoCode e acompanhe cada passo aqui.</div>
+    <img id="frame" alt="tela que a IA está usando">
+    <div id="aviso">Tela que a IA está</div>
+    <div id="carimbo"></div>
   </section>
-  <aside id="log"></aside>
-</main>
+</div>
+
+<div id="historico">
+  <div id="filme"></div>
+  <div id="passos"></div>
+</div>
+<footer>só nesta máquina (127.0.0.1) · /streaming desliga</footer>
+
 <script>
-let ultimoFrame = -1, ultimoPasso = -1;
+const VIVO = 0;                 // id da aba "Ao vivo"
+let dados = { abas: [], frames: [], log: [] };
+let abaSel = VIVO;              // aba escolhida pelo usuário
+let fotoSel = null;             // frame fixado no filmstrip (null = mais recente)
+let ultimoEstado = '';
+
+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);
+}
+function logDaAba(id) {
+  return id === VIVO ? dados.log : dados.log.filter((e) => e.aba === id);
+}
+
+function render() {
+  // Abas: "Ao vivo" + uma por app/janela, texto separado 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>'
+  ).join('<span class="sep">|</span>');
+  nav.querySelectorAll('.aba').forEach((b) => b.onclick = () => { abaSel = Number(b.dataset.id); fotoSel = null; render(); });
+
+  // Imagem: a fixada no filmstrip, senão a mais nova da 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 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)' : '');
+  } else {
+    img.style.display = 'none'; aviso.style.display = 'block'; carimbo.style.display = 'none';
+    if (dados.erroFoto) aviso.textContent = 'Sem foto da tela: ' + dados.erroFoto;
+  }
+
+  // Filmstrip da aba (as últimas 14)
+  const filme = document.getElementById('filme');
+  const tira = fs.slice(-14);
+  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('');
+  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"
+    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(); });
+}
+
 async function tick() {
   try {
     const s = await (await fetch('/state')).json();
-    document.getElementById('st').textContent = 'ao vivo · porta ' + location.port;
-    if (s.frame !== ultimoFrame && s.frame > 0) {
-      ultimoFrame = s.frame;
-      const img = document.getElementById('frame');
-      img.src = '/frame?' + s.frame;
-      img.style.display = 'block';
-      document.getElementById('aviso').style.display = 'none';
-    }
-    if (s.erroFoto) {
-      document.getElementById('aviso').textContent = 'Sem foto da tela: ' + s.erroFoto;
-    }
-    const fim = s.log.length ? s.log[s.log.length - 1].n : -1;
-    if (fim !== ultimoPasso) {
-      ultimoPasso = fim;
-      const el = document.getElementById('log');
-      el.innerHTML = s.log.slice().reverse().map((e, i) =>
-        '<div class="item' + (i === 0 ? ' novo' : '') + '">'
-        + '<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('');
-    }
+    dados = s;
+    document.getElementById('st').textContent = 'ao vivo';
+    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);
 }
-function esc(s) { return String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c])); }
 tick();
 </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+\.png$/.test(f)) fs.unlinkSync(path.join(DIR, f)); } catch {}
 
     return new Promise((resolve, reject) => {
         const server = http.createServer((req, res) => {
-            const rota = (req.url || '/').split('?')[0];
-            if (rota === '/state') {
+            const u = new URL(req.url || '/', 'http://x');
+            if (u.pathname === '/state') {
                 res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
-                res.end(JSON.stringify({ frame: state.frame, erroFoto: state.erroFoto, log: state.log.slice(-60) }));
+                res.end(JSON.stringify({
+                    erroFoto: state.erroFoto,
+                    abas: state.abas,
+                    frames: state.frames,
+                    log: state.log.slice(-120),
+                }));
                 return;
             }
-            if (rota === '/frame') {
-                fs.readFile(FRAME, (err, buf) => {
+            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; }
-                    res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'no-store' });
+                    // 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "7.11.0",
+  "version": "7.12.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": {