primocode 7.12.1 → 7.13.0

package/lib/act.js

@@ -15,7 +15,10 @@ const tools = require('./tools');
 const api = require('./api');
 const cfg = require('./config');
 const catalogo = require('./catalogo');
-const streaming = require('./streaming');
+// "painel", não "streaming": dentro do runAct existe um `let streaming` (a
+// flag de texto chegando em stream) que SOMBREARIA este módulo — e o step()
+// viraria TypeError engolido pelo catch. Foi um bug real, pego em teste.
+const painel = require('./streaming');
 
 const MAX_ITERATIONS = 15;
 const MAX_PROFUNDIDADE = 2; // principal + 1 nível de subagente
@@ -182,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();
 
@@ -282,7 +290,7 @@ async function runAct(userPrompt, opts) {
 
             // Painel ao vivo (/streaming): registra o passo e fotografa a tela.
             // Nunca pode derrubar o loop — falha de foto é problema do painel.
-            try { streaming.step(tc.name, tc.arguments, result); } catch {}
+            try { painel.step(tc.name, tc.arguments, result); } catch {}
 
             // Uma escrita bem-sucedida limpa a dívida: o agente se corrigiu.
             if (result && result.ok === false) falhasPendentes.push(`${tc.name}(${tc.arguments?.path || ''}): ${result.error}`);

package/lib/desktop.js

@@ -407,8 +407,11 @@ function listWindows() {
                 return m ? `|${m[1]}` : '';
             });
         } else if (TOOLS.xdotool) {
+            // O xdotool sai com código ≠ 0 se UMA janela da lista não tiver nome
+            // — mas o stdout com as outras continua valendo. Jogar a saída fora
+            // por causa do código fazia o total dar 0 com janelas na cara.
             const r = runOut(`xdotool search --onlyvisible --name '.*' getwindowname %@ 2>/dev/null`);
-            if (r.ok) linhas = r.out.split('\n').map((t) => (t.trim() ? `|${t.trim()}` : ''));
+            if (r.out) linhas = r.out.split('\n').map((t) => (t.trim() ? `|${t.trim()}` : ''));
         } else {
             return { ok: false, error: 'Instale wmctrl ou xdotool para listar janelas no Linux.' };
         }
@@ -464,8 +467,13 @@ Write-Output $p.MainWindowTitle`,
         const busca = runOut(`xdotool search --onlyvisible --name ${sh1(t)} 2>/dev/null`);
         const id = (busca.out || '').trim().split('\n')[0];
         if (!id) return naoAchouJanela(t);
+        // windowactivate depende do window manager (EWMH). Sem ele — ou com um
+        // WM teimoso — raise+focus fazem o mesmo serviço.
         const r = run(`xdotool windowactivate --sync ${id}`);
-        return r.ok ? { ok: true, janela: t } : r;
+        if (r.ok) return { ok: true, janela: t };
+        const raise = run(`xdotool windowraise ${id}`);
+        const foco = run(`xdotool windowfocus ${id}`);
+        return (raise.ok || foco.ok) ? { ok: true, janela: t } : r;
     }
     return { ok: false, error: 'Focar janela não disponível: instale xdotool (Linux).' };
 }

package/lib/streaming.js

@@ -40,6 +40,7 @@ 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,
@@ -123,6 +124,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.
@@ -188,67 +205,106 @@ 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 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.
+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(255,255,255,.2); }
+  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;
+    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 ── */
+  #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; }
+  @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(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; }
+  @keyframes pulsa { 50% { opacity: .3 } }
+
+  /* ── A janela ── */
+  #janela {
+    width: min(1120px, 100%); background: #000; border: 9px solid #f5f5f5; border-radius: 44px;
+    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);
+  }
+  #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); }
+
+  #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::-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 { 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; }
+
+  /* ── 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; }
+  @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; }
+
+  /* ── 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; }
   .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; }
+  .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: #6f6f6f; font-size: 12px; padding-top: 14px; }
+  footer { color: #6b6b6b; font-size: 12px; padding-top: 18px; }
+  footer b { color: #9a9a9a; font-weight: 600; }
 </style></head>
 <body>
 <div id="topo">
@@ -262,43 +318,76 @@ 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>
+    <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>
     <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: [] };
 let abaSel = VIVO;              // aba escolhida pelo usuário
 let fotoSel = null;             // frame fixado no filmstrip (null = mais recente)
 let ultimoEstado = '';
 
+// ── autopreencher a instrução, 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);
+  }, 34);
+}
+
 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);
+  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" + uma por app/janela, 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(); });
+  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
   const fs = framesDaAba(abaSel);
@@ -307,19 +396,23 @@ function render() {
   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); }
+    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);
+    }
     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)' : '');
+    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.textContent = 'Sem foto da tela: ' + dados.erroFoto;
+    if (dados.erroFoto) aviso.querySelector('.sub').textContent = 'Sem foto 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);
   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 = () => {
@@ -329,14 +422,20 @@ function 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('');
+  // 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); render(); });
 }
 
@@ -345,6 +444,7 @@ 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) {
@@ -373,6 +473,7 @@ function start() {
                     abas: state.abas,
                     frames: state.frames,
                     log: state.log.slice(-120),
+                    instrucoes: state.instrucoes.slice(-20),
                 }));
                 return;
             }
@@ -416,4 +517,4 @@ function stop() {
     state.url = '';
 }
 
-module.exports = { start, stop, step, isOn, url, descrever };
+module.exports = { start, stop, step, instrucao, isOn, url, descrever };

package/package.json

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