primocode 9.8.0-beta.2 → 9.8.0-beta.21

package/app/app.js

@@ -1,444 +1,1017 @@
-/* A janela conversando com o PrimoCode.
+/* A janela do PrimoCode conversando com o agente.
  *
- * Nada de framework: é a mesma regra do resto do projeto, e aqui ela nem
- * custa — a página tem um campo, uma lista e um fluxo de eventos.
+ * Nada de framework: é a mesma regra do resto do projeto (zero dependência),
+ * e aqui ela nem custa — a página tem uma barra lateral, uma conversa, um
+ * compositor e um painel, ligados por um fluxo de eventos (SSE).
  *
- * O trabalho de verdade é traduzir a saída do terminal. O agente escreve com
- * códigos ANSI, e jogar isso na tela como texto puro mostraria "[38;5;45m" no
- * meio das frases. Então os códigos viram <span> com a cor certa — as mesmas
- * cores do lib/ui.js, para as duas telas serem o mesmo produto.
+ * A conversa chega ESTRUTURADA (evento `agente`, vindo de lib/fala.js): a
+ * fala do Primo vira texto, cada ferramenta vira uma linha cinza e o
+ * resultado dela fecha essa linha. O terminal cru continua chegando
+ * (`saida`) e mora atrás do botão "Terminal".
  */
 (function () {
   "use strict";
 
-  /* A chave chega na URL, na primeira abertura. Ela sai de lá assim que é
-     lida — numa aba comum ficaria à mostra e no histórico do navegador — mas
-     antes vai para o sessionStorage: sem isso, apertar F5 matava a janela,
-     porque a URL limpa não tem mais chave nenhuma. */
-  var CHAVE = new URLSearchParams(location.search).get("k") || "";
+  /* A chave chega na URL na primeira abertura. Sai de lá assim que é lida —
+     numa aba comum ficaria à mostra no histórico — mas antes vai para o
+     sessionStorage: sem isso, um F5 matava a janela. */
+  var busca = new URLSearchParams(location.search);
+  var CHAVE = busca.get("k") || "";
+  var ABRIR_PAINEL = busca.get("painel") || "";
   try {
     if (CHAVE) sessionStorage.setItem("primo-chave", CHAVE);
     else CHAVE = sessionStorage.getItem("primo-chave") || "";
   } catch (e) { /* sem sessionStorage: vale só esta abertura */ }
   if (location.search) history.replaceState(null, "", location.pathname);
 
-  var conversa = document.getElementById("conversa");
-  var rolo = document.getElementById("rolo");
-  var campo = document.getElementById("campo");
-  var forma = document.getElementById("forma");
-  var mandar = document.getElementById("mandar");
-  var parar = document.getElementById("parar");
-  var pensando = document.getElementById("pensando");
+  var $ = function (id) { return document.getElementById(id); };
+  var app = $("app");
+  var rolo = $("rolo");
+  var chat = $("chat");
+  var vazio = $("vazio");
+  var campo = $("campo");
+  var forma = $("forma");
+  var btnEnviar = $("btnEnviar");
+  var estado = {};
   var ocupado = false;
 
+  var pego = function (k, p) { try { return localStorage.getItem(k) || p; } catch (e) { return p; } };
+  var guardo = function (k, v) { try { localStorage.setItem(k, v); } catch (e) {} };
+
   function pedir(rota, corpo) {
     return fetch(rota, {
       method: corpo === undefined ? "GET" : "POST",
       headers: { "Content-Type": "application/json", "X-Primo-Chave": CHAVE },
       body: corpo === undefined ? undefined : JSON.stringify(corpo),
+    }).then(function (r) {
+      return r.json().catch(function () { return { ok: false, error: "resposta ilegível" }; })
+        .then(function (d) { d = d || {}; d.__status = r.status; return d; });
     });
   }
 
-  /* ── rolagem ───────────────────────────────────────────────────────────
-     Só acompanha se a pessoa JÁ estava embaixo. Puxar a tela de volta para o
-     fim enquanto alguém lê o que passou é a coisa mais irritante que um log
-     ao vivo faz. */
-  function noFim() {
-    return rolo.scrollTop + rolo.clientHeight >= rolo.scrollHeight - 60;
+  function el(tag, classe, texto) {
+    var e = document.createElement(tag);
+    if (classe) e.className = classe;
+    if (texto !== undefined) e.textContent = texto;
+    return e;
   }
-  function acompanhar(estava) {
-    if (estava) rolo.scrollTop = rolo.scrollHeight;
+  function icone(nome, classe) {
+    var ns = "http://www.w3.org/2000/svg";
+    var s = document.createElementNS(ns, "svg");
+    s.setAttribute("class", "ic" + (classe ? " " + classe : ""));
+    s.setAttribute("aria-hidden", "true");
+    var u = document.createElementNS(ns, "use");
+    u.setAttribute("href", "#i-" + nome);
+    s.appendChild(u);
+    return s;
   }
-
-  function limparBoasVindas() {
-    var b = document.getElementById("vazio");
-    if (b) b.hidden = true;
-    // A tira das mensagens nasce escondida para a tela vazia poder ocupar o
-    // meio. Esconder uma sem mostrar a outra deixaria a janela em branco na
-    // primeira mensagem — e nada na tela é o pior jeito de responder.
-    var t = document.getElementById("conversa");
-    if (t) t.hidden = false;
+  function fugir(s) {
+    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 
-  function voltarAoVazio() {
-    var b = document.getElementById("vazio");
-    var t = document.getElementById("conversa");
-    if (t) { t.innerHTML = ""; t.hidden = true; }
-    if (b) b.hidden = false;
+  /* ── os rótulos que a pessoa lê ──────────────────────────────────────
+     Os modos e os níveis são os do CLI (lib/perigo.js, lib/effort.js); os
+     nomes aqui são os que quem não programa entende. */
+  var PERMISSOES = {
+    auto: { rotulo: "Pergunta antes do perigoso", icone: "escudo",
+      desc: "Faz o trabalho e só pede licença antes do que não tem volta" },
+    perguntar: { rotulo: "Pergunta sempre", icone: "mao",
+      desc: "Pede licença antes de cada comando e de cada arquivo" },
+    livre: { rotulo: "Acesso completo", icone: "perigo",
+      desc: "Nunca pergunta, nem antes de apagar ou forçar push" },
+  };
+  var ESFORCOS = [
+    { nome: "low", rotulo: "Rápido", desc: "tarefa simples, resposta curta" },
+    { nome: "medium", rotulo: "Equilíbrio", desc: "o padrão do dia a dia" },
+    { nome: "high", rotulo: "Capricho", desc: "capricha e pesquisa referências" },
+    { nome: "xhigh", rotulo: "Esperto", desc: "o mais capaz, contexto enorme" },
+    { nome: "max", rotulo: "Máximo", desc: "pesquisa a fundo antes de escrever" },
+    { nome: "ultracode", rotulo: "Ultra", desc: "tudo no talo" },
+  ];
+  function esforcoDe(nome) {
+    for (var i = 0; i < ESFORCOS.length; i++) if (ESFORCOS[i].nome === nome) return ESFORCOS[i];
+    return ESFORCOS[1];
   }
 
-  /* ── ANSI → HTML ───────────────────────────────────────────────────────
-     Só o que o PrimoCode realmente emite: SGR de cor 256 (38;5;N), negrito e
-     reset. O resto dos códigos (mover cursor, apagar linha) é desenho de
-     terminal e é descartado — na página quem rola é o navegador. */
-  var ANSI = /\x1b\[([0-9;?]*)([a-zA-Z])/g;
+  /* ── o menu flutuante ────────────────────────────────────────────────
+     Um só, reaproveitado por todos os botões com ⌄: projeto, permissão,
+     esforço e o nome do app. Abre para cima quando o botão está embaixo —
+     o compositor fica colado no rodapé, e um menu para baixo sairia da tela. */
+  var menu = $("menu");
+  var menuDono = null;
+
+  function fecharMenu() {
+    menu.hidden = true;
+    menu.innerHTML = "";
+    if (menuDono) menuDono.setAttribute("aria-expanded", "false");
+    menuDono = null;
+  }
 
-  function fugir(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  function abrirMenu(dono, itens) {
+    if (menuDono === dono) { fecharMenu(); return; }
+    fecharMenu();
+    menuDono = dono;
+    dono.setAttribute("aria-expanded", "true");
+    itens.forEach(function (it) {
+      if (it.sep) { menu.appendChild(el("div", "menu-sep")); return; }
+      if (it.titulo) { menu.appendChild(el("div", "menu-titulo", it.titulo)); return; }
+      if (it.entrada) {
+        var f = el("form", "menu-entrada");
+        var i = el("input");
+        i.id = it.entrada.id; i.placeholder = it.entrada.placeholder; i.maxLength = 60;
+        var b = el("button", "", it.entrada.botao);
+        b.type = "submit";
+        f.appendChild(i); f.appendChild(b);
+        f.onsubmit = function (ev) {
+          ev.preventDefault();
+          if (!i.value.trim()) return;
+          fecharMenu();
+          it.entrada.acao(i.value.trim());
+        };
+        menu.appendChild(f);
+        setTimeout(function () { i.focus(); }, 0);
+        return;
+      }
+      var botao = el("button", "menu-item" + (it.classe ? " " + it.classe : ""));
+      botao.type = "button";
+      botao.setAttribute("role", "menuitem");
+      if (it.icone) botao.appendChild(icone(it.icone));
+      var rot = el("span", "rot", it.rotulo);
+      if (it.desc) rot.appendChild(el("span", "", it.desc));
+      botao.appendChild(rot);
+      if (it.marcado) botao.appendChild(el("span", "marcado", "✓"));
+      botao.onclick = function () { fecharMenu(); it.acao(); };
+      menu.appendChild(botao);
+    });
+    menu.hidden = false;
+    var r = dono.getBoundingClientRect();
+    var m = menu.getBoundingClientRect();
+    var esq = Math.min(r.left, window.innerWidth - m.width - 8);
+    var embaixo = r.top > window.innerHeight / 2;
+    menu.style.left = Math.max(8, esq) + "px";
+    menu.style.top = (embaixo ? Math.max(8, r.top - m.height - 6) : r.bottom + 6) + "px";
+    var primeiro = menu.querySelector("button, input");
+    if (primeiro && !itens.some(function (x) { return x.entrada; })) primeiro.focus();
   }
 
-  function paraHtml(texto, estado) {
-    var fora = "";
-    var ultimo = 0;
-    var m;
-    ANSI.lastIndex = 0;
+  document.addEventListener("mousedown", function (ev) {
+    if (!menu.hidden && !menu.contains(ev.target) && menuDono && !menuDono.contains(ev.target)) fecharMenu();
+  });
 
-    function abrir() {
-      var classes = [];
-      if (estado.cor) classes.push("c" + estado.cor);
-      if (estado.forte) classes.push("forte");
-      return classes.length ? '<span class="' + classes.join(" ") + '">' : "";
+  /* ── a conversa ──────────────────────────────────────────────────────── */
+
+  function noFim() { return rolo.scrollTop + rolo.clientHeight >= rolo.scrollHeight - 80; }
+  // Só acompanha se a pessoa JÁ estava embaixo: puxar a tela enquanto
+  // alguém lê o que passou é a coisa mais irritante que um chat ao vivo faz.
+  function acompanhar(estava) { if (estava) rolo.scrollTop = rolo.scrollHeight; }
+
+  function mostrarConversa() { vazio.hidden = true; chat.hidden = false; }
+  function limparConversa() {
+    chat.innerHTML = "";
+    chat.hidden = true;
+    vazio.hidden = false;
+    fala = null; grupo = null; pendentes = [];
+    trabalhando = null;
+    if (ocupado) mostrarTrabalhando();
+  }
+
+  /* Markdown pequeno e SEGURO: tudo é escapado antes, e só depois o que é
+     marcação vira tag. A resposta vem do modelo, e o modelo leu páginas da
+     internet — um <script> que ele repetisse não pode virar script aqui. */
+  function markdown(texto) {
+    var blocos = [];
+    var t = String(texto || "").replace(/\r/g, "");
+    t = t.replace(/```[^\n]*\n([\s\S]*?)(```|$)/g, function (_, codigo) {
+      blocos.push("<pre><code>" + fugir(codigo.replace(/\n$/, "")) + "</code></pre>");
+      return "\u0000" + (blocos.length - 1) + "\u0000";
+    });
+    var linhas = t.split("\n");
+    var fora = [];
+    var lista = null;
+    var para = [];
+    function inline(s) {
+      return fugir(s)
+        .replace(/`([^`]+)`/g, "<code>$1</code>")
+        .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/(^|[\s(])\*([^*\s][^*]*)\*/g, "$1<em>$2</em>");
     }
-    function fechar() {
-      return (estado.cor || estado.forte) ? "</span>" : "";
+    function fecharPara() { if (para.length) { fora.push("<p>" + para.map(inline).join("<br>") + "</p>"); para = []; } }
+    function fecharLista() { if (lista) { fora.push("</" + lista + ">"); lista = null; } }
+    linhas.forEach(function (l) {
+      var bloco = /^\u0000(\d+)\u0000$/.exec(l.trim());
+      var item = /^\s*[-*•]\s+(.*)$/.exec(l);
+      var num = /^\s*\d+[.)]\s+(.*)$/.exec(l);
+      var tit = /^\s*#{1,6}\s+(.*)$/.exec(l);
+      if (bloco) { fecharPara(); fecharLista(); fora.push(blocos[Number(bloco[1])]); return; }
+      if (item || num) {
+        fecharPara();
+        var tipo = item ? "ul" : "ol";
+        if (lista !== tipo) { fecharLista(); fora.push("<" + tipo + ">"); lista = tipo; }
+        fora.push("<li>" + inline((item || num)[1]) + "</li>");
+        return;
+      }
+      if (tit) { fecharPara(); fecharLista(); fora.push("<h4>" + inline(tit[1]) + "</h4>"); return; }
+      if (!l.trim()) { fecharPara(); fecharLista(); return; }
+      fecharLista();
+      para.push(l);
+    });
+    fecharPara(); fecharLista();
+    return fora.join("").replace(/\u0000(\d+)\u0000/g, function (_, i) { return blocos[Number(i)]; });
+  }
+
+  var fala = null;        // o bloco de texto do Primo que está chegando aos pedaços
+  var grupo = null;       // o grupo de linhas de ação em andamento
+  var pendentes = [];     // ações esperando o resultado
+  var trabalhando = null; // o "Trabalhando…" do fim da conversa
+
+  function anexar(no) {
+    mostrarConversa();
+    if (trabalhando && trabalhando.parentNode === chat) chat.insertBefore(no, trabalhando);
+    else chat.appendChild(no);
+  }
+
+  function mostrarTrabalhando() {
+    if (trabalhando) return;
+    trabalhando = el("div", "trabalhando");
+    trabalhando.appendChild(el("span", "pulso"));
+    trabalhando.appendChild(el("span", "brilho", "Trabalhando"));
+    mostrarConversa();
+    chat.appendChild(trabalhando);
+  }
+  function esconderTrabalhando() {
+    if (trabalhando && trabalhando.parentNode) trabalhando.parentNode.removeChild(trabalhando);
+    trabalhando = null;
+    // O que ficou sem resultado (parou no meio) não pode girar para sempre.
+    pendentes.forEach(function (p) { var r = p.querySelector(".rodando"); if (r) r.remove(); });
+    pendentes = [];
+  }
+
+  function escreverVoce(texto) {
+    fala = null; grupo = null;
+    var linha = el("div", "msg-voce");
+    linha.appendChild(el("div", "balao", texto));
+    anexar(linha);
+    rolo.scrollTop = rolo.scrollHeight;
+  }
+
+  function blocoDeFala() {
+    if (!fala) {
+      grupo = null;
+      fala = el("div", "msg-primo");
+      fala.__texto = "";
+      anexar(fala);
     }
+    return fala;
+  }
+
+  var ICONES = { ler: "ler", escrever: "arquivo", editar: "editar", rodar: "rodar", buscar: "busca",
+    web: "web", computador: "computador", plano: "plano", agente: "agente", outro: "barra" };
 
-    while ((m = ANSI.exec(texto)) !== null) {
-      var pedaco = texto.slice(ultimo, m.index);
-      if (pedaco) fora += abrir() + fugir(pedaco) + fechar();
-      ultimo = m.index + m[0].length;
-      if (m[2] !== "m") continue;                 // não é cor: descarta
-      var partes = m[1].split(";");
-      for (var i = 0; i < partes.length; i++) {
-        var n = partes[i];
-        if (n === "" || n === "0") { estado.cor = null; estado.forte = false; }
-        else if (n === "1") estado.forte = true;
-        else if (n === "38" && partes[i + 1] === "5") { estado.cor = partes[i + 2]; i += 2; }
-        else if (n === "39") estado.cor = null;
-        else if (n === "22") estado.forte = false;
+  function linhaDeAcao(e) {
+    var estava = noFim();
+    fala = null;
+    if (!grupo) { grupo = el("div", "acoes"); anexar(grupo); }
+    var caixa = el("div", "acao" + (e.prof ? " fundo" : ""));
+    var linha = el("button", "acao-linha");
+    linha.type = "button";
+    linha.appendChild(icone(ICONES[e.icone] || "barra"));
+    var texto = el("span", "acao-texto");
+    texto.appendChild(el("b", "", e.verbo || e.nome || "Ação"));
+    if (e.alvo) texto.appendChild(document.createTextNode(" " + e.alvo));
+    linha.appendChild(texto);
+    var meta = el("span", "acao-meta");
+    meta.appendChild(el("span", "rodando"));
+    linha.appendChild(meta);
+    linha.appendChild(icone("chev", "acao-seta"));
+    caixa.appendChild(linha);
+    caixa.__meta = meta;
+    caixa.__linha = linha;
+    caixa.__texto = texto;
+    caixa.__nome = e.nome;
+    grupo.appendChild(caixa);
+    pendentes.push(caixa);
+    acompanhar(estava);
+  }
+
+  function fecharAcao(r) {
+    var caixa = pendentes.pop();
+    if (!caixa) return;
+    var meta = caixa.__meta;
+    meta.innerHTML = "";
+    if (r.nome === "write_file" && r.criado) caixa.__texto.firstChild.textContent = "Criou";
+    if (r.ok === false) {
+      meta.appendChild(el("span", "falhou", "✗ " + (r.resumo || "falhou").slice(0, 80)));
+      if (r.resumo && r.resumo.length > 80) r.detalhe = r.resumo;
+    } else {
+      if (r.mais || r.menos) {
+        meta.appendChild(el("span", "mais", "+" + (r.mais || 0)));
+        meta.appendChild(el("span", "menos", "−" + (r.menos || 0)));
+      } else if (r.resumo) {
+        meta.appendChild(el("span", "", r.resumo));
       }
+      if (r.codigo !== undefined) meta.appendChild(el("span", r.codigo === 0 ? "ok" : "falhou", r.codigo === 0 ? "✓" : "exit " + r.codigo));
+    }
+    if (r.detalhe) {
+      var linha = caixa.__linha;
+      linha.classList.add("abre");
+      linha.setAttribute("aria-expanded", "false");
+      linha.onclick = function () {
+        var aberta = caixa.classList.toggle("aberta");
+        linha.setAttribute("aria-expanded", aberta ? "true" : "false");
+        var d = caixa.querySelector(".acao-detalhe");
+        if (aberta && !d) {
+          d = el("pre", "acao-detalhe");
+          String(r.detalhe).split("\n").forEach(function (l, i) {
+            var s = el("span", l.charAt(0) === "+" && caixa.__nome !== "run_shell" ? "l-mais"
+              : l.charAt(0) === "-" && caixa.__nome !== "run_shell" ? "l-menos" : "", (i ? "\n" : "") + l);
+            d.appendChild(s);
+          });
+          caixa.appendChild(d);
+        } else if (d) d.hidden = !aberta;
+      };
     }
-    var resto = texto.slice(ultimo);
-    if (resto) fora += abrir() + fugir(resto) + fechar();
-    return fora;
   }
 
-  /* O estado de cor atravessa os pedaços: o Node corta a saída onde der, e um
-     "\x1b[38;5;45m" pode chegar num pedaço e o texto colorido no seguinte.
-     Guardando o estado fora da função, a cor continua do outro lado do corte. */
-  var corrente = { cor: null, forte: false };
-  var bloco = null;
+  var agendado = null;
+  function redesenharFala() {
+    if (agendado) return;
+    agendado = requestAnimationFrame(function () {
+      agendado = null;
+      if (fala) { var estava = noFim(); fala.innerHTML = markdown(fala.__texto); acompanhar(estava); }
+    });
+  }
 
-  function escreverSaida(texto) {
+  function aoAgente(e) {
     var estava = noFim();
-    limparBoasVindas();
-    if (!bloco) {
-      bloco = document.createElement("pre");
-      bloco.className = "saida";
-      conversa.appendChild(bloco);
+    switch (e.tipo) {
+      case "pedaco": {
+        var b = blocoDeFala();
+        b.__texto += e.texto;
+        redesenharFala();
+        return;
+      }
+      case "fim":
+        if (fala) fala.innerHTML = markdown(fala.__texto);
+        fala = null;
+        break;
+      case "resposta": {
+        fala = null;
+        var r = blocoDeFala();
+        r.__texto = e.texto;
+        r.innerHTML = markdown(e.texto);
+        fala = null;
+        break;
+      }
+      case "pensamento":
+        fala = null; grupo = null;
+        anexar(el("div", "pensamento", e.texto));
+        break;
+      case "aviso":
+        fala = null; grupo = null;
+        anexar(el("div", "aviso-msg", e.texto));
+        break;
+      case "acao": linhaDeAcao(e); return;
+      case "resultado": fecharAcao(e); return;
     }
-    bloco.insertAdjacentHTML("beforeend", paraHtml(texto, corrente));
     acompanhar(estava);
   }
 
-  function escreverVoce(texto) {
-    var estava = noFim();
-    limparBoasVindas();
-    var linha = document.createElement("div");
-    linha.className = "voce";
-    var caixa = document.createElement("div");
-    caixa.textContent = texto;
-    linha.appendChild(caixa);
-    conversa.appendChild(linha);
-    bloco = null;                       // a próxima saída começa bloco novo
-    corrente = { cor: null, forte: false };
+  function escreverComando(texto) {
+    fala = null; grupo = null;
+    var pre = el("pre", "saida-comando");
+    pre.innerHTML = window.PrimoAnsi.paraHtml(String(texto).replace(/^\n+|\n+$/g, ""), { cor: null, forte: false });
+    anexar(pre);
     acompanhar(true);
-    void estava;
   }
 
   function escreverErro(texto) {
-    var estava = noFim();
-    var d = document.createElement("div");
-    d.className = "aviso-erro";
-    d.textContent = texto;
-    conversa.appendChild(d);
-    bloco = null;
-    acompanhar(estava);
+    fala = null; grupo = null;
+    anexar(el("div", "aviso-msg erro", texto));
+    acompanhar(true);
+  }
+
+  function reproduzir(lista) {
+    chat.innerHTML = "";
+    fala = null; grupo = null; pendentes = []; trabalhando = null;
+    if (!lista || !lista.length) { limparConversa(); return; }
+    lista.forEach(function (x) { tratar(x.evento, x.dados); });
+    // Na história, ação sem resultado já passou: nada fica girando.
+    pendentes.forEach(function (p) { var r = p.querySelector(".rodando"); if (r) r.remove(); });
+    pendentes = [];
+    if (ocupado) mostrarTrabalhando();
+    rolo.scrollTop = rolo.scrollHeight;
   }
 
-  /* ── estado ────────────────────────────────────────────────────────────── */
+  function tratar(evento, dados) {
+    if (evento === "voce") escreverVoce(dados);
+    else if (evento === "agente") aoAgente(dados);
+    else if (evento === "comando") escreverComando(dados);
+    else if (evento === "erro") escreverErro(dados);
+  }
+
+  /* ── o terminal ──────────────────────────────────────────────────────── */
+
+  var terminal = $("terminal");
+  var terminalSaida = $("terminalSaida");
+  var corTerminal = { cor: null, forte: false };
+  function escreverTerminal(texto) {
+    var estava = terminalSaida.scrollTop + terminalSaida.clientHeight >= terminalSaida.scrollHeight - 40;
+    terminalSaida.insertAdjacentHTML("beforeend", window.PrimoAnsi.paraHtml(texto, corTerminal));
+    // O terminal só guarda o fim: centenas de milhares de linhas deixariam
+    // a janela lenta sem ninguém estar olhando.
+    while (terminalSaida.childNodes.length > 6000) terminalSaida.removeChild(terminalSaida.firstChild);
+    if (estava) terminalSaida.scrollTop = terminalSaida.scrollHeight;
+  }
+  function alternarTerminal(mostrar) {
+    if (mostrar === undefined) mostrar = terminal.hidden;
+    terminal.hidden = !mostrar;
+    rolo.hidden = mostrar;
+    $("navTerminal").setAttribute("aria-pressed", mostrar ? "true" : "false");
+    if (mostrar) terminalSaida.scrollTop = terminalSaida.scrollHeight;
+    else campo.focus();
+  }
+  $("navTerminal").onclick = function () { alternarTerminal(); };
+  $("fecharTerminal").onclick = function () { alternarTerminal(false); };
+
+  /* ── o estado ────────────────────────────────────────────────────────── */
+
+  function iniciais(nome) {
+    var p = String(nome || "").trim().split(/\s+/).filter(Boolean);
+    if (!p.length) return "PC";
+    return ((p[0][0] || "") + (p.length > 1 ? p[p.length - 1][0] : "")).toUpperCase();
+  }
 
   function pintarEstado(e) {
     if (!e) return;
-    if (e.versao) document.getElementById("versao").textContent = "v" + e.versao;
-    document.getElementById("pasta").textContent = e.pasta || "";
-    document.getElementById("modo").textContent = e.modo || "";
-    document.getElementById("esforco").textContent = e.esforco || "";
-    document.title = (e.projeto ? e.projeto + " — " : "") + "PrimoCode";
+    estado = e;
+    var projeto = e.projeto || "";
+    $("projetoNome").textContent = projeto || "Escolher projeto";
+    $("btnProjeto").classList.toggle("tem", !!projeto);
+    $("topoTitulo").textContent = projeto;
+    document.title = (projeto ? projeto + " · " : "") + "PrimoCode";
+
+    var modo = PERMISSOES[e.permissoes] ? e.permissoes : "auto";
+    var perm = $("btnPermissao");
+    perm.dataset.modo = modo;
+    $("permRotulo").textContent = PERMISSOES[modo].rotulo;
+    $("permIcone").firstChild.setAttribute("href", "#i-" + PERMISSOES[modo].icone);
+    perm.title = PERMISSOES[modo].desc + " (/permissoes)";
+
+    var esf = esforcoDe(e.esforco);
+    $("esforcoRotulo").textContent = esf.rotulo;
+    $("esforcoNome").textContent = esf.nome;
+
+    var mic = $("btnMic");
+    mic.setAttribute("aria-pressed", e.voz ? "true" : "false");
+    mic.setAttribute("aria-label", e.voz ? "Desligar o modo voz" : "Ligar o modo voz");
+
+    $("nomeUsuario").textContent = e.usuario || "Você";
+    $("avatar").textContent = iniciais(e.usuario || "Primo Code");
+
+    if (e.mascote !== pintarEstado.mascote && window.PrimoMarca) {
+      pintarEstado.mascote = e.mascote;
+      $("mascote").innerHTML = window.PrimoMarca.linha({ mascote: e.mascote, tamanho: 56 });
+      $("mascotePainel").innerHTML = window.PrimoMarca.linha({ mascote: e.mascote, tamanho: 40 });
+    }
+
+    var caixa = $("anexos");
+    caixa.innerHTML = "";
+    (e.anexos || []).forEach(function (nome) {
+      var a = el("span", "anexo");
+      a.appendChild(icone("arquivo"));
+      a.appendChild(el("span", "", nome));
+      var x = el("button");
+      x.type = "button";
+      x.setAttribute("aria-label", "Tirar " + nome);
+      x.appendChild(icone("fechar"));
+      x.onclick = function () { pedir("/api/desanexar", { nome: nome }).then(function (d) { if (d.estado) pintarEstado(d.estado); }); };
+      a.appendChild(x);
+      caixa.appendChild(a);
+    });
+    caixa.hidden = !(e.anexos || []).length;
+    if (e.ocupado !== undefined) pintarOcupado(e.ocupado);
+    marcarProjetoAtual();
+  }
+
+  function atualizarEnviar() {
+    if (ocupado) {
+      btnEnviar.disabled = false;
+      btnEnviar.classList.add("parar");
+      btnEnviar.setAttribute("aria-label", "Parar");
+      btnEnviar.title = "Parar (Esc Esc)";
+      btnEnviar.firstChild.firstChild.setAttribute("href", "#i-pare");
+    } else {
+      btnEnviar.classList.remove("parar");
+      btnEnviar.disabled = !campo.value.trim();
+      btnEnviar.setAttribute("aria-label", "Enviar");
+      btnEnviar.title = "Enviar (Enter)";
+      btnEnviar.firstChild.firstChild.setAttribute("href", "#i-seta");
+    }
   }
 
+  var avisar = pego("primo-avisar", "") === "1";
   function pintarOcupado(v) {
+    var era = ocupado;
     ocupado = !!v;
-    pensando.hidden = !ocupado;
-    parar.hidden = !ocupado;
-    mandar.hidden = ocupado;
-    campo.placeholder = ocupado
-      ? "ele está trabalhando — pode ir escrevendo o próximo"
-      // O "Enter manda, Shift+Enter quebra linha" saiu daqui: ele já está
-      // escrito na dica logo abaixo do campo, e dizer a mesma coisa duas
-      // vezes na mesma tela faz a pessoa ler nenhuma das duas.
-      : "Peça alguma coisa…";
-  }
-
-  /* ── o fluxo ───────────────────────────────────────────────────────────
-     EventSource reconecta sozinho quando a conexão cai, e o servidor manda o
-     que já saiu ao ligar — então uma queda de rede local não deixa buraco na
-     conversa. */
+    if (ocupado) mostrarTrabalhando(); else esconderTrabalhando();
+    campo.placeholder = ocupado ? "Ele está trabalhando. Pode ir escrevendo o próximo" : "Peça qualquer coisa";
+    atualizarEnviar();
+    // Avisa só quando a janela está escondida: com ela na frente, a pessoa já viu.
+    if (era && !ocupado && avisar && document.hidden && window.Notification && Notification.permission === "granted") {
+      try { new Notification("PrimoCode", { body: "Terminei. Volte para ver o que eu fiz." }); } catch (e) {}
+    }
+    if (era && !ocupado) { carregarRecentes(); carregarProjetos(); }
+  }
+
+  /* ── o fluxo ─────────────────────────────────────────────────────────
+     EventSource reconecta sozinho, e o servidor manda a história ao ligar —
+     uma queda de rede local não deixa buraco na conversa. */
   function ligar() {
     var fonte = new EventSource("/api/fluxo?k=" + encodeURIComponent(CHAVE));
-    fonte.addEventListener("saida", function (ev) { escreverSaida(JSON.parse(ev.data)); });
-    fonte.addEventListener("voce", function (ev) { escreverVoce(JSON.parse(ev.data)); });
-    fonte.addEventListener("erro", function (ev) { escreverErro(JSON.parse(ev.data)); });
-    fonte.addEventListener("estado", function (ev) { pintarEstado(JSON.parse(ev.data)); });
-    fonte.addEventListener("ocupado", function (ev) { pintarOcupado(JSON.parse(ev.data)); });
-    fonte.onerror = function () { /* o EventSource se vira sozinho */ };
+    var ouvir = function (nome, fn) {
+      fonte.addEventListener(nome, function (ev) { var d; try { d = JSON.parse(ev.data); } catch (e) { return; } fn(d); });
+    };
+    ouvir("estado", pintarEstado);
+    ouvir("ocupado", pintarOcupado);
+    ouvir("historia", reproduzir);
+    ouvir("limpar", limparConversa);
+    ouvir("terminal", function (t) { terminalSaida.innerHTML = ""; corTerminal = { cor: null, forte: false }; escreverTerminal(t); });
+    ouvir("saida", escreverTerminal);
+    ouvir("voce", function (d) { tratar("voce", d); });
+    ouvir("agente", function (d) { tratar("agente", d); });
+    ouvir("comando", function (d) { tratar("comando", d); });
+    ouvir("erro", function (d) { tratar("erro", d); });
+    ouvir("arquivos", aoMudarArquivos);
   }
 
-  /* ── mandar ────────────────────────────────────────────────────────────── */
+  /* ── mandar ──────────────────────────────────────────────────────────── */
 
   function enviar(texto) {
-    texto = (texto || "").trim();
+    texto = String(texto || "").trim();
     if (!texto) return;
     pedir("/api/enviar", { texto: texto });
     campo.value = "";
     ajustarAltura();
+    atualizarEnviar();
   }
+  function parar() { pedir("/api/parar", {}); }
 
   function ajustarAltura() {
     campo.style.height = "auto";
-    campo.style.height = Math.min(campo.scrollHeight, window.innerHeight * 0.44) + "px";
+    campo.style.height = Math.min(campo.scrollHeight, window.innerHeight * 0.4) + "px";
   }
 
   forma.addEventListener("submit", function (ev) {
     ev.preventDefault();
-    enviar(campo.value);
+    if (ocupado && !campo.value.trim()) parar();
+    else enviar(campo.value);
   });
-
-  campo.addEventListener("input", ajustarAltura);
+  campo.addEventListener("input", function () { ajustarAltura(); atualizarEnviar(); });
   campo.addEventListener("keydown", function (ev) {
-    if (ev.key === "Enter" && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+    if (ev.key === "Enter" && !ev.shiftKey && !ev.isComposing) {
       ev.preventDefault();
       enviar(campo.value);
     }
   });
 
-  parar.addEventListener("click", function () { pedir("/api/parar", {}); });
-
+  /* Esc Esc para, como no terminal. Um Esc só fecha o que estiver aberto
+     (menu, diálogo) — parar o agente por um toque errado jogaria fora um
+     minuto de trabalho. */
+  var ultimoEsc = 0;
   document.addEventListener("keydown", function (ev) {
-    if (ev.key === "Escape" && ocupado) { pedir("/api/parar", {}); return; }
-    // Qualquer tecla de conteúdo devolve o foco ao campo: numa janela de chat
-    // não se clica para escrever.
-    if (ev.key.length === 1 && !ev.metaKey && !ev.ctrlKey && document.activeElement !== campo) {
-      campo.focus();
+    if (ev.key === "Escape") {
+      if (!menu.hidden) { fecharMenu(); return; }
+      var agora = Date.now();
+      if (ocupado && agora - ultimoEsc < 800) { parar(); ultimoEsc = 0; return; }
+      ultimoEsc = agora;
+      return;
     }
+    if ((ev.ctrlKey || ev.metaKey) && (ev.key === "b" || ev.key === "B")) { ev.preventDefault(); alternarLado(); return; }
+    if ((ev.ctrlKey || ev.metaKey) && (ev.key === "j" || ev.key === "J")) { ev.preventDefault(); alternarTerminal(); return; }
+    // Tecla de conteúdo devolve o foco ao campo: num chat não se clica para escrever.
+    var alvo = document.activeElement;
+    var escrevendo = alvo && (alvo.tagName === "INPUT" || alvo.tagName === "TEXTAREA");
+    if (ev.key.length === 1 && !ev.metaKey && !ev.ctrlKey && !ev.altKey && !escrevendo && !$("dlgAjuda").open) campo.focus();
   });
 
-  document.querySelectorAll(".sugestao").forEach(function (b) {
-    b.addEventListener("click", function () { enviar(b.dataset.manda); });
-  });
-
-  /* ── arrastar arquivo ──────────────────────────────────────────────────
-     "Eu quero que eu consiga arrastar os meus vídeos pra dentro do terminal,
-      e também lá no desktop."
-
-     O navegador não entrega o CAMINHO de um arquivo solto, por segurança — só
-     o conteúdo. Mas o PrimoCode roda na mesma máquina: o que ele precisa é do
-     caminho, e o nome sozinho não basta.
+  /* ── anexar ──────────────────────────────────────────────────────────
+     O navegador não entrega o CAMINHO de um arquivo, só o conteúdo. Então o
+     conteúdo sobe para o servidor e entra em state.attachedFiles, igual ao
+     /attach do terminal. */
+  var arquivo = $("arquivo");
+  $("btnAnexar").onclick = function () { arquivo.click(); };
+  arquivo.onchange = function () { subir(arquivo.files); arquivo.value = ""; };
+
+  function subir(lista) {
+    Array.prototype.forEach.call(lista || [], function (f) {
+      if (f.size > 2 * 1024 * 1024) { escreverErro(f.name + " passa de 2 MB. Anexe um arquivo menor ou peça pelo caminho."); return; }
+      var leitor = new FileReader();
+      leitor.onload = function () {
+        var base64 = String(leitor.result).split(",")[1] || "";
+        pedir("/api/anexar", { nome: f.name, base64: base64 }).then(function (d) {
+          if (d.estado) pintarEstado(d.estado);
+          else escreverErro(d.error || "Não consegui anexar " + f.name + ".");
+        });
+      };
+      leitor.readAsDataURL(f);
+    });
+  }
 
-     Duas portas, então. Soltar o arquivo escreve o nome no campo com uma
-     frase que o agente entende ("o arquivo X, que está em..."), e soltar TEXTO
-     — que é o que o Finder e o Explorer dão ao arrastar com a tecla de atalho,
-     e o que todo terminal recebe — entra como caminho de verdade. */
   var conta = 0;
-  window.addEventListener("dragenter", function (ev) {
-    ev.preventDefault(); conta++; document.body.classList.add("soltando");
-  });
+  window.addEventListener("dragenter", function (ev) { ev.preventDefault(); conta++; document.body.classList.add("soltando"); });
   window.addEventListener("dragover", function (ev) { ev.preventDefault(); });
-  window.addEventListener("dragleave", function () {
-    if (--conta <= 0) { conta = 0; document.body.classList.remove("soltando"); }
-  });
+  window.addEventListener("dragleave", function () { if (--conta <= 0) { conta = 0; document.body.classList.remove("soltando"); } });
   window.addEventListener("drop", function (ev) {
     ev.preventDefault();
     conta = 0;
     document.body.classList.remove("soltando");
-
+    var dt = ev.dataTransfer;
+    if (dt.files && dt.files.length) { subir(dt.files); return; }
+    // Texto solto (o caminho que o Finder dá com a tecla de atalho) entra no campo.
     var texto = "";
-    try { texto = ev.dataTransfer.getData("text/plain") || ""; } catch (e) {}
-    if (!texto && ev.dataTransfer.files && ev.dataTransfer.files.length) {
-      texto = Array.prototype.map.call(ev.dataTransfer.files, function (f) {
-        // Sem caminho: o nome, e o aviso de onde procurar. É o que dá para
-        // dizer com honestidade daqui.
-        return f.name;
-      }).join(" ");
-      if (texto) {
-        texto = "o arquivo " + texto + " (procure na pasta de Downloads ou na "
-          + "Área de Trabalho; se não achar, me peça o caminho completo)";
-      }
-    }
-    if (!texto) return;
-    campo.value = (campo.value ? campo.value.trimEnd() + " " : "") + texto + " ";
-    campo.focus();
-    ajustarAltura();
+    try { texto = dt.getData("text/plain") || ""; } catch (e) {}
+    if (texto) { campo.value = (campo.value ? campo.value.trimEnd() + " " : "") + texto + " "; ajustarAltura(); atualizarEnviar(); campo.focus(); }
   });
 
-  /* ── a barra lateral ─────────────────────────────────────────────────
-     Mascote, novo chat, histórico e configurações — a mesma coisa da página
-     /code do Conecta, e de propósito: quem sai de uma tela para a outra não
-     pode ter de reaprender onde ficam as coisas. */
-
-  var CHAVE_TEMA = "primocode_tema";
-  var CHAVE_COR = "primocode_cor";
-  var pego = function (k, p) { try { return localStorage.getItem(k) || p; } catch (e) { return p; } };
-  var guardo = function (k, v) { try { localStorage.setItem(k, v); } catch (e) {} };
-
-  function marcarEscolha(caixaId, atributo, valor) {
-    var caixa = document.getElementById(caixaId);
-    if (!caixa) return;
-    Array.prototype.forEach.call(caixa.children, function (b) {
-      b.setAttribute("aria-pressed", b.dataset[atributo] === valor ? "true" : "false");
+  /* ── os controles do compositor ─────────────────────────────────────── */
+
+  $("btnPermissao").onclick = function () {
+    var atual = estado.permissoes || "auto";
+    abrirMenu(this, [{ titulo: "Quando ele pede licença" }].concat(["auto", "perguntar", "livre"].map(function (m) {
+      return {
+        rotulo: PERMISSOES[m].rotulo, desc: PERMISSOES[m].desc, icone: PERMISSOES[m].icone,
+        marcado: m === atual, classe: m === "livre" ? "laranja" : "",
+        acao: function () { pedir("/api/permissoes", { modo: m }).then(function (d) { if (d.estado) pintarEstado(d.estado); }); },
+      };
+    })));
+  };
+
+  $("btnEsforco").onclick = function () {
+    var atual = estado.esforco || "medium";
+    abrirMenu(this, [{ titulo: "Esforço do agente" }].concat(ESFORCOS.map(function (n) {
+      return {
+        rotulo: n.rotulo + " · " + n.nome, desc: n.desc, marcado: n.nome === atual,
+        acao: function () { pedir("/api/esforco", { nivel: n.nome }).then(function (d) { if (d.estado) pintarEstado(d.estado); }); },
+      };
+    })));
+  };
+
+  $("btnMic").onclick = function () {
+    // O /voice ouve pelo microfone DO COMPUTADOR (o "ei, primo"), não pela
+    // página — por isso é um liga/desliga, e o terminal conta o progresso.
+    pedir("/api/voz", { ligar: !estado.voz }).then(function (d) { if (d.estado) pintarEstado(d.estado); });
+  };
+
+  /* ── projetos ────────────────────────────────────────────────────────── */
+
+  var projetos = [];
+  function entrar(nome) {
+    return pedir("/api/projeto", { nome: nome }).then(function (d) {
+      if (d.estado) { pintarEstado(d.estado); carregarProjetos(); recarregarPainel(true); }
+      else escreverErro(d.error || "Não consegui entrar no projeto.");
     });
   }
-  function aplicarTema(qual) {
-    // "sistema" não é um terceiro tema: é a ausência de escolha. Guardar
-    // "escuro" quando a pessoa quer seguir o aparelho faria a janela ignorar
-    // o modo noturno para sempre, sem ela ter como saber por quê.
-    var raiz = document.documentElement;
-    if (qual === "sistema") {
-      raiz.setAttribute("data-tema",
-        window.matchMedia("(prefers-color-scheme: dark)").matches ? "escuro" : "claro");
-    } else {
-      raiz.setAttribute("data-tema", qual);
-    }
-    marcarEscolha("temas", "tema", qual);
+  function criarProjeto(nome) {
+    return pedir("/api/projeto", { novo: nome }).then(function (d) {
+      if (d.estado) { pintarEstado(d.estado); carregarProjetos(); recarregarPainel(true); campo.focus(); }
+      else escreverErro(d.error || "Não consegui criar a pasta.");
+    });
   }
-  function aplicarCor(cor) {
-    document.documentElement.setAttribute("data-cor", cor);
-    marcarEscolha("cores", "cor", cor);
+  function menuDeProjetos(dono) {
+    var itens = [{ titulo: "Projetos em ~/primocode" }];
+    projetos.slice(0, 12).forEach(function (p) {
+      itens.push({ rotulo: p.nome, icone: "pasta", marcado: p.nome === estado.projeto, acao: function () { entrar(p.nome); } });
+    });
+    if (!projetos.length) itens.push({ titulo: "Nenhum projeto ainda" });
+    itens.push({ sep: true });
+    itens.push({ entrada: { id: "nomeNovaPasta", placeholder: "Nova pasta…", botao: "Criar", acao: criarProjeto } });
+    abrirMenu(dono, itens);
+  }
+  $("btnProjeto").onclick = function () { menuDeProjetos(this); };
+  $("btnNovoProjeto").onclick = function () {
+    abrirMenu(this, [{ titulo: "Novo projeto em ~/primocode" },
+      { entrada: { id: "nomeNovoProjeto", placeholder: "Nome da pasta", botao: "Criar", acao: criarProjeto } }]);
+  };
+
+  function marcarProjetoAtual() {
+    Array.prototype.forEach.call($("listaProjetos").querySelectorAll(".item"), function (b) {
+      b.setAttribute("aria-current", b.dataset.nome === estado.projeto ? "true" : "false");
+    });
   }
 
-  /* A LOGO — a mesma do ícone do sistema e da barra lateral do Conecta. Onde
-     o produto se apresenta vai ela; o mascote em pixel fica para onde ele é
-     personagem. */
-  function desenharMarca() {
-    if (!window.PrimoMarca) return;
-    var t = document.getElementById("marcaTopo");
-    var g = document.getElementById("marcaGrande");
-    var desenha = window.PrimoMarca.logo || window.PrimoMarca.svg;
-    if (t) t.innerHTML = desenha({ tamanho: 22 });
-    if (g) g.innerHTML = desenha({ tamanho: 82, rotulo: "PrimoCode" });
+  function carregarProjetos() {
+    return pedir("/api/projetos").then(function (d) {
+      if (!d.ok) return;
+      projetos = d.projetos || [];
+      var caixa = $("listaProjetos");
+      caixa.innerHTML = "";
+      if (!projetos.length) { caixa.appendChild(el("div", "vazio-lista", "Nenhum projeto")); return; }
+      projetos.slice(0, 8).forEach(function (p) {
+        var b = el("button", "item");
+        b.type = "button";
+        b.dataset.nome = p.nome;
+        b.appendChild(icone("pasta"));
+        b.appendChild(el("span", "titulo", p.nome));
+        b.onclick = function () { entrar(p.nome); };
+        caixa.appendChild(b);
+      });
+      marcarProjetoAtual();
+      filtrar();
+    });
   }
 
-  function quando(iso) {
-    if (!iso) return "";
-    var d = new Date(iso);
+  /* ── recentes ────────────────────────────────────────────────────────
+     Com conta, as conversas da nuvem (as mesmas do /chats e do celular):
+     clicar continua dali. Sem conta, os últimos pedidos deste computador:
+     clicar põe o pedido de volta no campo, para repetir ou ajustar. */
+  function quando(ms) {
+    if (!ms) return "";
+    var d = new Date(ms);
     if (isNaN(d)) return "";
     var dias = Math.floor((Date.now() - d.getTime()) / 86400000);
     if (dias <= 0) return d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
     if (dias === 1) return "ontem";
-    if (dias < 7) return dias + " dias";
+    if (dias < 7) return dias + " d";
     return d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
   }
 
   var conversaAberta = null;
-
-  function carregarConversas() {
-    var caixa = document.getElementById("recentes");
-    if (!caixa) return;
-    pedir("/api/conversas").then(function (r) { return r.json(); }).then(function (d) {
-      if (!d || !d.ok || !d.conversas || !d.conversas.length) return;   // deixa o texto de vazio
+  function carregarRecentes() {
+    return pedir("/api/recentes").then(function (d) {
+      if (!d.ok) return;
+      var caixa = $("listaRecentes");
       caixa.innerHTML = "";
-      d.conversas.forEach(function (c) {
-        var b = document.createElement("button");
-        b.className = "item";
-        b.setAttribute("aria-current", c.id === conversaAberta ? "true" : "false");
-        var t = document.createElement("span");
-        // textContent, nunca innerHTML: o título vem cifrado do banco e foi
-        // escrito por gente — um "<img onerror>" ali viraria script na janela.
-        t.textContent = c.titulo || "Conversa";
-        var q = document.createElement("span");
-        q.className = "quando";
-        q.textContent = quando(c.atualizada) + (c.mensagens ? " · " + c.mensagens + " msg" : "");
-        b.appendChild(t); b.appendChild(q);
-        b.onclick = function () { abrirConversa(c.id); };
+      var itens = d.itens || [];
+      if (!itens.length) { caixa.appendChild(el("div", "vazio-lista", "Nenhuma conversa ainda")); return; }
+      itens.slice(0, 20).forEach(function (c) {
+        var b = el("button", "item");
+        b.type = "button";
+        // textContent, nunca innerHTML: o título foi escrito por gente, e um
+        // <img onerror> ali viraria script na janela que MANDA NO AGENTE.
+        b.appendChild(el("span", "titulo", c.titulo || "Conversa"));
+        b.title = c.titulo || "";
+        if (d.fonte === "nuvem") {
+          b.setAttribute("aria-current", c.id === conversaAberta ? "true" : "false");
+          b.onclick = function () { abrirConversa(c); };
+        } else {
+          b.onclick = function () { campo.value = c.titulo; ajustarAltura(); atualizarEnviar(); campo.focus(); };
+        }
         caixa.appendChild(b);
       });
-    }).catch(function () { /* sem conta: fica o texto de vazio */ });
-  }
-
-  function abrirConversa(id) {
-    conversaAberta = id;
-    pedir("/api/conversa/" + encodeURIComponent(id)).then(function (r) { return r.json(); })
-      .then(function (d) {
-        if (!d || !d.ok) return;
-        voltarAoVazio();
-        limparBoasVindas();
-        var tira = document.getElementById("conversa");
-        (d.mensagens || []).forEach(function (m) {
-          var linha = document.createElement("div");
-          if (m.papel === "user") {
-            linha.className = "voce";
-            var dentro = document.createElement("div");
-            dentro.textContent = m.texto;
-            linha.appendChild(dentro);
-          } else {
-            linha.className = "saida";
-            linha.textContent = m.texto;
-          }
-          tira.appendChild(linha);
-        });
-        rolo.scrollTop = rolo.scrollHeight;
-        carregarConversas();
-      }).catch(function () {});
+      filtrar();
+    });
   }
 
-  function ligarLado() {
-    var novo = document.getElementById("btnNovo");
-    if (novo) novo.onclick = function () {
-      conversaAberta = null;
-      voltarAoVazio();
-      carregarConversas();
+  function abrirConversa(c) {
+    pedir("/api/conversa/abrir", { id: c.id, titulo: c.titulo }).then(function (d) {
+      if (!d.ok) { escreverErro(d.error || "Não consegui abrir a conversa."); return; }
+      conversaAberta = c.id;
+      carregarRecentes();
       campo.focus();
-    };
+    });
+  }
 
-    var dlg = document.getElementById("dlgConfig");
-    var abrir = document.getElementById("btnConfig");
-    var fechar = document.getElementById("fecharConfig");
-    if (abrir && dlg) abrir.onclick = function () {
-      // Os três valores vêm do estado que o terminal já manda; repetir a
-      // consulta aqui só para abrir um diálogo seria uma ida à toa.
-      ["pasta", "modo", "esforco"].forEach(function (k) {
-        var de = document.getElementById(k);
-        var para = document.getElementById(k + "Config");
-        if (de && para) para.textContent = de.textContent || "—";
+  /* A busca filtra o que já está na barra — recentes e projetos — sem ir ao
+     servidor: são no máximo vinte linhas. */
+  var campoBusca = $("campoBusca");
+  function filtrar() {
+    var q = (campoBusca.value || "").trim().toLowerCase();
+    ["listaProjetos", "listaRecentes"].forEach(function (id) {
+      Array.prototype.forEach.call($(id).querySelectorAll(".item"), function (b) {
+        b.hidden = !!q && b.textContent.toLowerCase().indexOf(q) < 0;
       });
-      dlg.showModal();
-    };
-    if (fechar && dlg) fechar.onclick = function () { dlg.close(); };
+    });
+  }
+  campoBusca.addEventListener("input", filtrar);
+  $("btnBusca").onclick = function () {
+    var caixa = $("busca");
+    caixa.hidden = !caixa.hidden;
+    if (!caixa.hidden) campoBusca.focus(); else { campoBusca.value = ""; filtrar(); }
+  };
+
+  var btnAvisos = $("btnAvisos");
+  btnAvisos.setAttribute("aria-pressed", avisar ? "true" : "false");
+  btnAvisos.onclick = function () {
+    avisar = !avisar;
+    guardo("primo-avisar", avisar ? "1" : "");
+    btnAvisos.setAttribute("aria-pressed", avisar ? "true" : "false");
+    if (avisar && window.Notification && Notification.permission === "default") {
+      try { Notification.requestPermission(); } catch (e) {}
+    }
+  };
 
-    var temas = document.getElementById("temas");
-    if (temas) temas.onclick = function (ev) {
-      var b = ev.target.closest("[data-tema]"); if (!b) return;
-      guardo(CHAVE_TEMA, b.dataset.tema); aplicarTema(b.dataset.tema);
-    };
-    var cores = document.getElementById("cores");
-    if (cores) cores.onclick = function (ev) {
-      var b = ev.target.closest("[data-cor]"); if (!b) return;
-      guardo(CHAVE_COR, b.dataset.cor); aplicarCor(b.dataset.cor);
-    };
+  $("btnNovo").onclick = function () {
+    pedir("/api/novo-chat", {}).then(function (d) {
+      if (!d.ok) { escreverErro(d.error || "Não deu para começar outro chat agora."); return; }
+      conversaAberta = null;
+      limparConversa();
+      alternarTerminal(false);
+      carregarRecentes();
+      campo.focus();
+    });
+  };
+
+  /* ── o nome do app, a ajuda e o tema ─────────────────────────────────── */
+
+  var CHAVE_TEMA = "primocode_tema";
+  function aplicarTema(qual) {
+    // "sistema" não é um terceiro tema: é seguir o aparelho. Guardar
+    // "escuro" no lugar faria a janela ignorar o modo claro para sempre.
+    var real = qual === "sistema"
+      ? (window.matchMedia("(prefers-color-scheme: light)").matches ? "claro" : "escuro")
+      : qual;
+    document.documentElement.setAttribute("data-tema", real);
+  }
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function () {
+    if (pego(CHAVE_TEMA, "escuro") === "sistema") aplicarTema("sistema");
+  });
+
+  var dlgAjuda = $("dlgAjuda");
+  function abrirAjuda() { if (!dlgAjuda.open) dlgAjuda.showModal(); }
+  $("btnAjuda").onclick = abrirAjuda;
+  $("navComandos").onclick = abrirAjuda;
+  $("fecharAjuda").onclick = function () { dlgAjuda.close(); };
+  $("listaComandos").onclick = function (ev) {
+    var b = ev.target.closest("[data-cmd]");
+    if (!b) return;
+    dlgAjuda.close();
+    campo.value = b.dataset.cmd;
+    ajustarAltura(); atualizarEnviar();
+    campo.focus();
+  };
+
+  $("btnMarca").onclick = function () {
+    var tema = pego(CHAVE_TEMA, "escuro");
+    var escolher = function (t) { return function () { guardo(CHAVE_TEMA, t); aplicarTema(t); }; };
+    abrirMenu(this, [
+      { titulo: "Tema" },
+      { rotulo: "Escuro", marcado: tema === "escuro", acao: escolher("escuro") },
+      { rotulo: "Claro", marcado: tema === "claro", acao: escolher("claro") },
+      { rotulo: "Do sistema", marcado: tema === "sistema", acao: escolher("sistema") },
+      { sep: true },
+      { rotulo: "Atalhos e comandos", icone: "ajuda", acao: abrirAjuda },
+      { rotulo: "Terminal", icone: "terminal", acao: function () { alternarTerminal(true); } },
+      { sep: true },
+      { titulo: "PrimoCode " + (estado.versao ? "v" + estado.versao : "") },
+    ]);
+  };
+
+  /* ── a barra lateral ──────────────────────────────────────────────────
+     Em tela larga ela fica aberta e a escolha é lembrada; abaixo de 960px
+     ela flutua por cima da conversa, então começa fechada e fecha sozinha
+     depois de uma escolha. */
+  var estreita = window.matchMedia("(max-width: 960px)");
+  function alternarLado(abrir) {
+    var aberta = !app.classList.contains("sem-lado");
+    if (abrir === undefined) abrir = !aberta;
+    app.classList.toggle("sem-lado", !abrir);
+    if (!estreita.matches) guardo("primo-lado", abrir ? "aberto" : "fechado");
+  }
+  $("btnLado").onclick = function () { alternarLado(false); };
+  $("btnLadoAbrir").onclick = function () { alternarLado(true); };
+  function ajustarLado() {
+    if (estreita.matches) app.classList.add("sem-lado");
+    else app.classList.toggle("sem-lado", pego("primo-lado", "aberto") === "fechado");
+  }
+  estreita.addEventListener("change", ajustarLado);
+  $("lado").addEventListener("click", function (ev) {
+    if (estreita.matches && ev.target.closest(".item, #btnNovo, #navTerminal, #navPrevia")) alternarLado(false);
+  });
+
+  /* ── o painel: Prévia e Arquivos ─────────────────────────────────────
+     A prévia é o index.html do projeto, servido pela rota com a chave no
+     caminho (os arquivos relativos da página precisam dela), num iframe
+     SEM allow-same-origin: o código da prévia não fala com a API. */
+  var painel = $("painel");
+  var previa = $("previa");
+  var aba = "previa";
+  var entrada = null;
+  var itensArvore = [];
+  var abertos = {};
+  var mudadosAgora = {};
+  var arquivoAberto = null;
+
+  function abrirPainel(qual) {
+    painel.hidden = false;
+    $("btnPainel").setAttribute("aria-pressed", "true");
+    if (qual) escolherAba(qual);
+    recarregarPainel(true);
+  }
+  function fecharPainel() {
+    painel.hidden = true;
+    $("btnPainel").setAttribute("aria-pressed", "false");
+    previa.removeAttribute("src");
+  }
+  $("btnPainel").onclick = function () { if (painel.hidden) abrirPainel(); else fecharPainel(); };
+  $("fecharPainel").onclick = fecharPainel;
+  $("navPrevia").onclick = function () { abrirPainel("previa"); };
+  $("btnRecarregar").onclick = function () { recarregarPainel(true); };
+
+  function escolherAba(qual) {
+    aba = qual;
+    $("abaPrevia").setAttribute("aria-selected", qual === "previa" ? "true" : "false");
+    $("abaArquivos").setAttribute("aria-selected", qual === "arquivos" ? "true" : "false");
+    $("corpoPrevia").hidden = qual !== "previa";
+    $("corpoArquivos").hidden = qual !== "arquivos";
+  }
+  $("abaPrevia").onclick = function () { escolherAba("previa"); recarregarPainel(true); };
+  $("abaArquivos").onclick = function () { escolherAba("arquivos"); recarregarPainel(false); };
+
+  function recarregarPainel(previaTambem) {
+    if (painel.hidden) return;
+    pedir("/api/arquivos/arvore").then(function (d) {
+      itensArvore = d.ok ? d.itens || [] : [];
+      entrada = d.ok ? d.entrada : null;
+      desenharArvore();
+      if (previaTambem || aba === "previa") atualizarPrevia();
+    });
+  }
+
+  function atualizarPrevia() {
+    var tem = !!entrada;
+    $("previaVazia").hidden = tem;
+    previa.hidden = !tem;
+    if (!tem) { previa.removeAttribute("src"); return; }
+    var caminho = entrada.split("/").map(encodeURIComponent).join("/");
+    // O `?v=` força o navegador a buscar de novo: o mesmo endereço no src
+    // não recarrega o iframe.
+    previa.src = "/api/previa/" + CHAVE + "/" + caminho + "?v=" + Date.now();
+  }
+
+  var espera = null;
+  function aoMudarArquivos(d) {
+    (d.mudados || []).forEach(function (m) { mudadosAgora[m] = Date.now(); });
+    if (painel.hidden) return;
+    // O agente escreve em rajada (três arquivos num segundo): recarregar a
+    // cada um faria a prévia piscar. Espera o silêncio.
+    clearTimeout(espera);
+    espera = setTimeout(function () {
+      recarregarPainel(aba === "previa");
+      if (arquivoAberto && (d.mudados || []).indexOf(arquivoAberto) >= 0) lerArquivo(arquivoAberto);
+    }, 350);
+  }
 
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () {
-      if (pego(CHAVE_TEMA, "escuro") === "sistema") aplicarTema("sistema");
+  function desenharArvore() {
+    var caixa = $("arvore");
+    caixa.innerHTML = "";
+    if (!itensArvore.length) {
+      caixa.appendChild(el("div", "vazio-lista", estado.projeto ? "Pasta vazia" : "Escolha um projeto para ver os arquivos"));
+      return;
+    }
+    itensArvore.forEach(function (it) {
+      var partes = it.caminho.split("/");
+      // Some quem está dentro de uma pasta fechada.
+      for (var i = 1; i < partes.length; i++) {
+        if (!abertos[partes.slice(0, i).join("/")]) return;
+      }
+      var b = el("button", "no");
+      b.type = "button";
+      b.setAttribute("role", "treeitem");
+      b.style.paddingLeft = (8 + (partes.length - 1) * 14) + "px";
+      if (it.tipo === "pasta") {
+        b.setAttribute("aria-expanded", abertos[it.caminho] ? "true" : "false");
+        b.appendChild(icone("pasta"));
+        b.onclick = function () { abertos[it.caminho] = !abertos[it.caminho]; desenharArvore(); };
+      } else {
+        b.appendChild(icone("arquivo"));
+        b.setAttribute("aria-selected", it.caminho === arquivoAberto ? "true" : "false");
+        if (mudadosAgora[it.caminho] > Date.now() - 60000) b.classList.add("mudou");
+        b.onclick = function () { lerArquivo(it.caminho); };
+      }
+      b.appendChild(el("span", "nome", partes[partes.length - 1]));
+      caixa.appendChild(b);
     });
   }
 
-  desenharMarca();
-  aplicarTema(pego(CHAVE_TEMA, "escuro"));
-  aplicarCor(pego(CHAVE_COR, "ciano"));
-  ligarLado();
-  carregarConversas();
+  function lerArquivo(caminho) {
+    arquivoAberto = caminho;
+    desenharArvore();
+    $("visorNome").textContent = caminho;
+    var visor = $("visor");
+    pedir("/api/arquivos/ler?p=" + encodeURIComponent(caminho)).then(function (d) {
+      visor.innerHTML = "";
+      if (!d.ok) { visor.textContent = "  " + (d.error || "não abriu"); return; }
+      if (d.binario) { visor.textContent = "  Arquivo binário (imagem, áudio…). Não dá para mostrar como texto."; return; }
+      if (d.grande) { visor.textContent = "  Arquivo grande demais para mostrar aqui (mais de 1 MB)."; return; }
+      var frag = document.createDocumentFragment();
+      String(d.conteudo || "").split("\n").forEach(function (l) { frag.appendChild(el("span", "ln", l || " ")); });
+      visor.appendChild(frag);
+    });
+  }
+
+  /* ── ligar tudo ──────────────────────────────────────────────────────── */
 
-  pedir("/api/estado").then(function (r) { return r.json(); }).then(pintarEstado)
-    .catch(function () {});
+  aplicarTema(pego(CHAVE_TEMA, "escuro"));
+  ajustarLado();
+  if (window.PrimoMarca) {
+    $("mascote").innerHTML = window.PrimoMarca.linha({ tamanho: 56 });
+    $("mascotePainel").innerHTML = window.PrimoMarca.linha({ tamanho: 40 });
+  }
+  pedir("/api/estado").then(function (d) { if (d.__status === 200) pintarEstado(d); }).catch(function () {});
+  carregarProjetos();
+  carregarRecentes();
   ligar();
+  if (ABRIR_PAINEL === "previa" || ABRIR_PAINEL === "arquivos") abrirPainel(ABRIR_PAINEL);
+  atualizarEnviar();
   campo.focus();
 })();