primocode 9.8.0-beta.4 → 9.8.0-beta.6

package/app/ide.js

@@ -0,0 +1,639 @@
+/* A PrimoCode IDE conversando com o PrimoCode.
+ *
+ *   "Um app ao invés de CLI, aí fica uma IDE e uma CLI."
+ *
+ * Sem framework, como a janela do /rc. Quatro partes, cada uma com a sua
+ * seção abaixo: a árvore (lista da pasta do projeto), o editor (um textarea
+ * com calha de linhas), a prévia (iframe que recarrega sozinho) e o chat +
+ * terminal (o mesmo fluxo SSE do /rc).
+ *
+ * O que amarra as quatro é o evento `arquivos` do servidor: o agente escreve
+ * um arquivo, o vigia de lib/ide.js avisa, e a árvore acende, a aba aberta
+ * se atualiza e a prévia recarrega — sem a pessoa clicar em nada.
+ */
+(function () {
+  "use strict";
+
+  // ── chave ────────────────────────────────────────────────────────────
+  // Mesmo trato do app.js: sai da URL assim que é lida, mas fica no
+  // sessionStorage para o F5 não matar a janela.
+  var CHAVE = new URLSearchParams(location.search).get("k") || "";
+  try {
+    if (CHAVE) sessionStorage.setItem("primo-chave", CHAVE);
+    else CHAVE = sessionStorage.getItem("primo-chave") || "";
+  } catch (e) { /* vale só esta abertura */ }
+  if (location.search) history.replaceState(null, "", location.pathname);
+
+  var $ = function (id) { return document.getElementById(id); };
+
+  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 {}; }).then(function (d) { d.__status = r.status; return d; });
+    });
+  }
+
+  // ── tema (o mesmo que a janela do /rc guardou) ───────────────────────
+  (function aplicarTema() {
+    var tema = "escuro", cor = "ciano";
+    try { tema = localStorage.getItem("primocode_tema") || tema; cor = localStorage.getItem("primocode_cor") || cor; } catch (e) {}
+    if (tema === "sistema") tema = matchMedia("(prefers-color-scheme: dark)").matches ? "escuro" : "claro";
+    document.documentElement.setAttribute("data-tema", tema);
+    document.documentElement.setAttribute("data-cor", cor);
+  })();
+  if (window.PrimoMarca) {
+    var desenha = window.PrimoMarca.logo || window.PrimoMarca.svg;
+    $("marcaTopo").innerHTML = desenha({ tamanho: 20 });
+    $("marcaGrande").innerHTML = desenha({ tamanho: 64, rotulo: "PrimoCode" });
+  }
+
+  // ── estado da página ─────────────────────────────────────────────────
+  var projeto = { pasta: "", nome: "", itens: [], entrada: null };
+  var abertas = [];          // abas: { caminho, tipo, conteudo, original, mtime, rolagem, selecao }
+  var ativa = null;          // caminho da aba ativa
+  var expandidas = {};       // pastas abertas na árvore
+  var mexidos = {};          // caminho → quando o agente mexeu (para acender)
+  var previaLigada = false;
+
+  function extensao(c) { var m = /\.([a-z0-9]+)$/i.exec(c || ""); return m ? m[1].toLowerCase() : ""; }
+  function nomeDe(c) { return String(c).split("/").pop(); }
+  var IMAGENS = { png: 1, jpg: 1, jpeg: 1, gif: 1, webp: 1, svg: 1, ico: 1 };
+  var LINGUAS = { html: "HTML", htm: "HTML", css: "CSS", js: "JavaScript", mjs: "JavaScript", ts: "TypeScript",
+    json: "JSON", md: "Markdown", py: "Python", txt: "Texto", svg: "SVG", sh: "Shell", yml: "YAML", yaml: "YAML" };
+
+  /* ── árvore ─────────────────────────────────────────────────────────── */
+
+  function carregarArvore() {
+    return pedir("/api/ide/arvore").then(function (d) {
+      if (!d.ok) { $("arvorePe").textContent = d.error || "não consegui ler a pasta"; return; }
+      var trocou = projeto.pasta && projeto.pasta !== d.pasta;
+      projeto = d;
+      $("nomeProjeto").textContent = d.nome || "projeto";
+      $("pastaProjeto").textContent = d.pasta;
+      $("arvorePe").textContent = d.cortada ? "Lista cortada em 4.000 itens — a pasta é grande demais para mostrar inteira." : "";
+      if (trocou) fecharTudo();
+      desenharArvore();
+      pintarPreviaVazia();
+    }).catch(function () {});
+  }
+
+  function filhosDe(pai) {
+    var prefixo = pai ? pai + "/" : "";
+    return projeto.itens.filter(function (i) {
+      if (i.caminho.indexOf(prefixo) !== 0) return false;
+      return i.caminho.slice(prefixo.length).indexOf("/") === -1;
+    });
+  }
+
+  function desenharArvore() {
+    var lista = $("lista");
+    var rolagem = lista.scrollTop;
+    lista.innerHTML = "";
+    if (!projeto.itens.length) {
+      var v = document.createElement("div");
+      v.className = "arvore-pe";
+      v.style.border = "0";
+      v.textContent = "Pasta vazia. Peça ao Primo para criar alguma coisa — os arquivos aparecem aqui na hora.";
+      lista.appendChild(v);
+      return;
+    }
+    (function andar(pai, nivel) {
+      filhosDe(pai).forEach(function (item) {
+        lista.appendChild(linhaDaArvore(item, nivel));
+        if (item.tipo === "pasta" && expandidas[item.caminho]) andar(item.caminho, nivel + 1);
+      });
+    })("", 0);
+    lista.scrollTop = rolagem;
+  }
+
+  function linhaDaArvore(item, nivel) {
+    var b = document.createElement("button");
+    b.className = "no" + (item.tipo === "pasta" ? " pasta" : "");
+    b.style.setProperty("--nivel", nivel);
+    b.setAttribute("role", "treeitem");
+    b.dataset.caminho = item.caminho;
+    b.title = item.caminho;
+    var seta = document.createElement("span");
+    seta.className = "seta";
+    var tipo = document.createElement("span");
+    tipo.className = "tipo";
+    if (item.tipo === "pasta") {
+      b.setAttribute("aria-expanded", expandidas[item.caminho] ? "true" : "false");
+      seta.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      b.appendChild(seta);
+      b.onclick = function () { expandidas[item.caminho] = !expandidas[item.caminho]; desenharArvore(); };
+    } else {
+      var ext = extensao(item.caminho);
+      tipo.textContent = ext ? ext.slice(0, 4) : "·";
+      tipo.className = "tipo t-" + (IMAGENS[ext] ? "img" : ext);
+      b.appendChild(seta);
+      b.appendChild(tipo);
+      b.setAttribute("aria-selected", item.caminho === ativa ? "true" : "false");
+      b.onclick = function () { irPara(item.caminho); };
+    }
+    if (mexidos[item.caminho] && Date.now() - mexidos[item.caminho] < 8000) b.classList.add("mexido");
+    var nome = document.createElement("span");
+    nome.className = "nome-no";
+    nome.textContent = nomeDe(item.caminho);
+    b.appendChild(nome);
+    return b;
+  }
+
+  // Mostra o arquivo que o agente acabou de criar: abre as pastas até ele.
+  function revelar(caminho) {
+    var partes = caminho.split("/");
+    for (var i = 1; i < partes.length; i++) expandidas[partes.slice(0, i).join("/")] = true;
+  }
+
+  /* ── abas ───────────────────────────────────────────────────────────── */
+
+  function aba(caminho) {
+    for (var i = 0; i < abertas.length; i++) if (abertas[i].caminho === caminho) return abertas[i];
+    return null;
+  }
+  function suja(a) { return a && a.tipo === "texto" && a.conteudo !== a.original; }
+
+  function desenharAbas() {
+    var rolo = $("abasRolo");
+    rolo.innerHTML = "";
+    abertas.forEach(function (a) {
+      var b = document.createElement("div");
+      b.className = "aba" + (suja(a) ? " sujo" : "");
+      b.setAttribute("role", "tab");
+      b.setAttribute("tabindex", "0");
+      b.setAttribute("aria-selected", a.caminho === ativa ? "true" : "false");
+      b.title = a.caminho + (suja(a) ? " — não salvo" : "");
+      var ext = extensao(a.caminho);
+      var t = document.createElement("span");
+      t.className = "tipo t-" + (IMAGENS[ext] ? "img" : ext);
+      t.textContent = ext.slice(0, 4);
+      var n = document.createElement("span");
+      n.className = "nome-aba";
+      n.textContent = nomeDe(a.caminho);
+      var x = document.createElement("span");
+      x.className = "fechar";
+      x.setAttribute("aria-label", "Fechar " + nomeDe(a.caminho));
+      x.innerHTML = "<span>×</span>";
+      x.onclick = function (ev) { ev.stopPropagation(); fecharAba(a.caminho); };
+      b.onclick = function () { irPara(a.caminho); };
+      b.onkeydown = function (ev) { if (ev.key === "Enter") irPara(a.caminho); };
+      b.appendChild(t); b.appendChild(n); b.appendChild(x);
+      rolo.appendChild(b);
+    });
+  }
+
+  /* Clique da pessoa num arquivo. Janela estreita com a prévia no palco
+     inteiro: clicar num arquivo é querer ver o arquivo, então a prévia sai
+     da frente. (Quando é o AGENTE que mexe, a prévia fica onde está.) */
+  function irPara(caminho) {
+    if (previaLigada && matchMedia("(max-width: 1240px)").matches) ligarPrevia(false);
+    return abrirArquivo(caminho);
+  }
+
+  function abrirArquivo(caminho) {
+    if (aba(caminho)) { mostrarAba(caminho); return Promise.resolve(); }
+    return pedir("/api/ide/arquivo?p=" + encodeURIComponent(caminho)).then(function (d) {
+      if (!d.ok) { avisar(d.error || "não abriu"); return; }
+      var a = { caminho: d.caminho, mtime: d.mtime, tamanho: d.tamanho, rolagem: 0, selecao: [0, 0] };
+      if (d.binario) a.tipo = "binario";
+      else if (d.grande) a.tipo = "grande";
+      else { a.tipo = "texto"; a.conteudo = a.original = d.conteudo; }
+      abertas.push(a);
+      mostrarAba(a.caminho);
+    });
+  }
+
+  function guardarPosicao() {
+    var a = aba(ativa);
+    if (!a || a.tipo !== "texto") return;
+    var c = $("codigo");
+    a.rolagem = c.scrollTop; a.rolagemX = c.scrollLeft;
+    a.selecao = [c.selectionStart, c.selectionEnd];
+  }
+
+  function mostrarAba(caminho) {
+    guardarPosicao();
+    ativa = caminho;
+    var a = aba(caminho);
+    $("boasVindas").hidden = !!a;
+    $("editor").hidden = !(a && a.tipo === "texto");
+    $("avisoArquivo").hidden = !(a && a.tipo !== "texto");
+    $("faixa").hidden = !(a && a.conflito);
+    if (a && a.conflito) $("faixaTexto").textContent = a.conflito;
+    if (a && a.tipo === "texto") {
+      var c = $("codigo");
+      c.value = a.conteudo;
+      c.setSelectionRange(a.selecao[0], a.selecao[1]);
+      c.scrollTop = a.rolagem; c.scrollLeft = a.rolagemX || 0;
+      desenharCalha(true);
+      c.focus();
+    } else if (a) {
+      var img = $("avisoImagem");
+      var ext = extensao(a.caminho);
+      img.hidden = !IMAGENS[ext];
+      if (IMAGENS[ext]) img.src = enderecoPrevia(a.caminho) + "?t=" + a.mtime;
+      $("avisoTexto").textContent = a.tipo === "grande"
+        ? nomeDe(a.caminho) + " tem " + tamanhoLegivel(a.tamanho) + ". O editor abre arquivos de até 1 MB — acima disso ele fica lento a cada tecla."
+        : IMAGENS[ext] ? nomeDe(a.caminho) + " · " + tamanhoLegivel(a.tamanho)
+        : nomeDe(a.caminho) + " não é texto (" + tamanhoLegivel(a.tamanho) + "), então não abre no editor. Peça ao Primo o que você quer fazer com ele.";
+    }
+    desenharAbas();
+    desenharArvore();
+    pintarAnexo();
+    pintarBarra();
+  }
+
+  function fecharAba(caminho) {
+    var a = aba(caminho);
+    if (suja(a) && !a.confirmouFechar) {
+      // Sem confirm(): a janela em modo app às vezes some com o diálogo. A
+      // primeira tentativa avisa; a segunda fecha.
+      a.confirmouFechar = true;
+      avisar(nomeDe(caminho) + " tem mudança não salva — Ctrl+S salva, ou feche de novo para descartar.");
+      return;
+    }
+    var i = abertas.indexOf(a);
+    abertas.splice(i, 1);
+    if (ativa === caminho) {
+      ativa = null;
+      var prox = abertas[i] || abertas[i - 1];
+      if (prox) { mostrarAba(prox.caminho); return; }
+    }
+    mostrarAba(ativa);
+  }
+
+  function fecharTudo() { abertas = []; ativa = null; mostrarAba(null); }
+
+  function tamanhoLegivel(n) {
+    if (n < 1024) return n + " bytes";
+    if (n < 1024 * 1024) return (n / 1024).toFixed(0) + " KB";
+    return (n / 1024 / 1024).toFixed(1).replace(".", ",") + " MB";
+  }
+
+  /* ── editor ─────────────────────────────────────────────────────────── */
+
+  var codigo = $("codigo");
+  var calha = $("calha");
+  var linhasNaCalha = 0;
+  var ALTURA = 20;   // = --linha no ide.css
+
+  function desenharCalha(forcar) {
+    var n = codigo.value.split("\n").length;
+    if (forcar || n !== linhasNaCalha) {
+      var s = "";
+      for (var i = 1; i <= n; i++) s += i + "\n";
+      calha.textContent = s;
+      linhasNaCalha = n;
+    }
+    calha.scrollTop = codigo.scrollTop;
+    marcarLinhaAtual();
+  }
+
+  function posicao() {
+    var antes = codigo.value.slice(0, codigo.selectionStart);
+    var linha = antes.split("\n").length;
+    return { linha: linha, coluna: antes.length - antes.lastIndexOf("\n") };
+  }
+
+  function marcarLinhaAtual() {
+    var p = posicao();
+    $("linhaAtual").style.transform = "translateY(" + ((p.linha - 1) * ALTURA - codigo.scrollTop) + "px)";
+    var a = aba(ativa);
+    if (a && a.tipo === "texto") $("barraPosicao").textContent = "Ln " + p.linha + ", Col " + p.coluna;
+  }
+
+  /* Inserir por execCommand mantém o Ctrl+Z funcionando: mexer no `value`
+     direto apaga o histórico de desfazer do textarea inteiro. */
+  function inserir(texto) {
+    if (!document.execCommand("insertText", false, texto)) {
+      codigo.setRangeText(texto, codigo.selectionStart, codigo.selectionEnd, "end");
+      codigo.dispatchEvent(new Event("input"));
+    }
+  }
+
+  function indentar(menos) {
+    var v = codigo.value, ini = codigo.selectionStart, fim = codigo.selectionEnd;
+    if (!menos && ini === fim) { inserir("  "); return; }
+    var comeco = v.lastIndexOf("\n", ini - 1) + 1;
+    var bloco = v.slice(comeco, fim);
+    var novo = menos ? bloco.replace(/^ {1,2}|^\t/gm, "") : bloco.replace(/^/gm, "  ");
+    codigo.setSelectionRange(comeco, fim);
+    inserir(novo);
+    codigo.setSelectionRange(comeco, comeco + novo.length);
+  }
+
+  codigo.addEventListener("keydown", function (ev) {
+    if (ev.key === "Tab") { ev.preventDefault(); indentar(ev.shiftKey); return; }
+    if (ev.key === "Enter" && !ev.ctrlKey && !ev.metaKey) {
+      // A linha nova começa na mesma indentação da de cima — sem isto, cada
+      // Enter em HTML aninhado joga o cursor de volta à coluna 1.
+      var v = codigo.value, ini = codigo.selectionStart;
+      var linha = v.slice(v.lastIndexOf("\n", ini - 1) + 1, ini);
+      var recuo = /^[ \t]*/.exec(linha)[0];
+      if (/[{[(>]\s*$/.test(linha) && !/<\/[^>]+>\s*$/.test(linha)) recuo += "  ";
+      ev.preventDefault();
+      inserir("\n" + recuo);
+    }
+  });
+  codigo.addEventListener("input", function () {
+    var a = aba(ativa);
+    if (!a || a.tipo !== "texto") return;
+    var eraSuja = suja(a);
+    a.conteudo = codigo.value;
+    a.confirmouFechar = false;
+    desenharCalha(false);
+    if (eraSuja !== suja(a)) desenharAbas();
+    pintarBarra();
+  });
+  codigo.addEventListener("scroll", function () { calha.scrollTop = codigo.scrollTop; marcarLinhaAtual(); });
+  ["click", "keyup", "select"].forEach(function (e) { codigo.addEventListener(e, marcarLinhaAtual); });
+
+  function salvar(forcar) {
+    var a = aba(ativa);
+    if (!a || a.tipo !== "texto") return;
+    guardarPosicao();
+    pedir("/api/ide/salvar", { caminho: a.caminho, conteudo: a.conteudo, mtimeBase: a.mtime, forcar: !!forcar })
+      .then(function (d) {
+        if (d.conflito) {
+          a.conflito = nomeDe(a.caminho) + " mudou no disco depois que você abriu (provavelmente o Primo).";
+          mostrarAba(a.caminho);
+          return;
+        }
+        if (!d.ok) { avisar("Não salvou: " + (d.error || "erro")); return; }
+        a.original = a.conteudo; a.mtime = d.mtime; a.conflito = null;
+        $("faixa").hidden = true;
+        desenharAbas();
+        pintarBarra("salvo agora");
+      });
+  }
+
+  /* O agente mexeu num arquivo aberto. Se a pessoa não tinha mexido, o
+     editor só acompanha (guardando o cursor). Se tinha, ninguém perde nada
+     calado: a faixa pergunta qual das duas fica. */
+  function atualizarAberta(a) {
+    return pedir("/api/ide/arquivo?p=" + encodeURIComponent(a.caminho)).then(function (d) {
+      if (!d.ok) return;
+      if (d.mtime === a.mtime) return;
+      if (d.conteudo === undefined) { a.mtime = d.mtime; return; }
+      if (suja(a)) {
+        a.conflito = nomeDe(a.caminho) + " mudou no disco (provavelmente o Primo) e você tem mudanças não salvas.";
+        if (a.caminho === ativa) mostrarAba(a.caminho);
+        return;
+      }
+      if (a.caminho === ativa) guardarPosicao();
+      a.conteudo = a.original = d.conteudo; a.mtime = d.mtime;
+      if (a.caminho === ativa) mostrarAba(a.caminho);
+    });
+  }
+
+  $("faixaRecarregar").onclick = function () {
+    var a = aba(ativa); if (!a) return;
+    a.conflito = null;
+    pedir("/api/ide/arquivo?p=" + encodeURIComponent(a.caminho)).then(function (d) {
+      if (d.ok && d.conteudo !== undefined) { a.conteudo = a.original = d.conteudo; a.mtime = d.mtime; }
+      mostrarAba(a.caminho);
+    });
+  };
+  $("faixaManter").onclick = function () {
+    var a = aba(ativa); if (!a) return;
+    a.conflito = null;
+    // Manter a minha é gravar a minha: o disco passa a ser o que está na tela.
+    salvar(true);
+    $("faixa").hidden = true;
+  };
+
+  /* ── prévia ─────────────────────────────────────────────────────────── */
+
+  function enderecoPrevia(caminho) {
+    return "/api/ide/previa/" + CHAVE + "/" + String(caminho || "").split("/").map(encodeURIComponent).join("/");
+  }
+
+  function pintarPreviaVazia() {
+    var tem = !!projeto.entrada;
+    $("previa").hidden = !tem;
+    $("previaVazia").hidden = tem;
+    $("previaEndereco").textContent = projeto.entrada || "sem index.html";
+  }
+
+  function recarregarPrevia() {
+    if (!previaLigada || !projeto.entrada) return;
+    $("previa").src = enderecoPrevia(projeto.entrada) + "?t=" + Date.now();
+    var e = $("previaEstado");
+    e.textContent = "atualizada " + new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    e.classList.add("fresco");
+    setTimeout(function () { e.classList.remove("fresco"); }, 1600);
+  }
+
+  function ligarPrevia(sim) {
+    previaLigada = sim;
+    $("areaPrevia").hidden = !sim;
+    $("centro").classList.toggle("com-previa", sim);
+    $("btnPrevia").setAttribute("aria-pressed", sim ? "true" : "false");
+    if (sim) { pintarPreviaVazia(); recarregarPrevia(); }
+  }
+  $("btnPrevia").onclick = function () { ligarPrevia(!previaLigada); };
+  $("btnRecarregarPrevia").onclick = recarregarPrevia;
+
+  /* ── o que o vigia manda ────────────────────────────────────────────── */
+
+  var esperaArvore = null, esperaPrevia = null;
+
+  function aoMudarArquivos(ev) {
+    if (ev.trocou && projeto.pasta && ev.pasta !== projeto.pasta) { carregarArvore(); return; }
+    var deVoce = {};
+    (ev.deVoce || []).forEach(function (c) { deVoce[c] = true; });
+    var doAgente = (ev.mudados || []).filter(function (c) { return !deVoce[c]; });
+    var agora = Date.now();
+    doAgente.forEach(function (c) { mexidos[c] = agora; revelar(c); });
+    if (doAgente.length) {
+      avisar("Primo mexeu em " + nomeDe(doAgente[0]) + (doAgente.length > 1 ? " e mais " + (doAgente.length - 1) : ""));
+    }
+    abertas.forEach(function (a) { if (doAgente.indexOf(a.caminho) >= 0) atualizarAberta(a); });
+
+    clearTimeout(esperaArvore);
+    esperaArvore = setTimeout(carregarArvore, 200);
+    // A prévia espera um pouco mais: o agente costuma escrever o HTML, o
+    // CSS e o JS em sequência, e recarregar a cada um faz a página piscar.
+    clearTimeout(esperaPrevia);
+    esperaPrevia = setTimeout(function () {
+      if (!projeto.entrada) carregarArvore().then(recarregarPrevia);
+      else recarregarPrevia();
+    }, 450);
+  }
+
+  /* ── chat e terminal ────────────────────────────────────────────────── */
+
+  var tira = $("chatTira"), chatRolo = $("chatRolo"), term = $("terminalSaida");
+  var corChat = { cor: null, forte: false }, corTerm = { cor: null, forte: false };
+  var blocoChat = null;
+  var ocupado = false;
+
+  function noFim(el) { return el.scrollTop + el.clientHeight >= el.scrollHeight - 60; }
+
+  function escreverSaida(texto) {
+    var html = window.PrimoAnsi.paraHtml(texto, corTerm);
+    var fimT = noFim(term);
+    term.insertAdjacentHTML("beforeend", html);
+    // Teto do terminal: janela aberta o dia inteiro não pode crescer sem fim.
+    while (term.childNodes.length > 4000) term.removeChild(term.firstChild);
+    if (fimT) term.scrollTop = term.scrollHeight;
+
+    var fimC = noFim(chatRolo);
+    $("chatVazio").hidden = true;
+    if (!blocoChat) {
+      blocoChat = document.createElement("pre");
+      blocoChat.className = "saida";
+      tira.appendChild(blocoChat);
+    }
+    blocoChat.insertAdjacentHTML("beforeend", window.PrimoAnsi.paraHtml(texto, corChat));
+    if (fimC) chatRolo.scrollTop = chatRolo.scrollHeight;
+  }
+
+  function escreverVoce(texto) {
+    $("chatVazio").hidden = true;
+    var linha = document.createElement("div");
+    linha.className = "voce";
+    var caixa = document.createElement("div");
+    caixa.textContent = texto;
+    linha.appendChild(caixa);
+    tira.appendChild(linha);
+    blocoChat = null;
+    corChat = { cor: null, forte: false };
+    chatRolo.scrollTop = chatRolo.scrollHeight;
+  }
+
+  function escreverErro(texto) {
+    var d = document.createElement("div");
+    d.className = "aviso-erro";
+    d.textContent = texto;
+    tira.appendChild(d);
+    blocoChat = null;
+  }
+
+  function pintarEstado(e) {
+    if (!e) return;
+    $("modo").textContent = e.modo || "";
+    $("esforco").textContent = e.esforco || "";
+    document.title = (e.projeto ? e.projeto + " — " : "") + "PrimoCode IDE";
+  }
+
+  function pintarOcupado(v) {
+    ocupado = !!v;
+    document.body.classList.toggle("ocupado", ocupado);
+    $("parar").hidden = !ocupado;
+    $("mandar").hidden = ocupado;
+    $("barraAgenteTxt").textContent = ocupado ? "Primo trabalhando…" : "Primo pronto";
+    $("campo").placeholder = ocupado ? "pode ir escrevendo o próximo" : "Peça alguma coisa…";
+  }
+
+  function ligarFluxo() {
+    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.addEventListener("arquivos", function (ev) { aoMudarArquivos(JSON.parse(ev.data)); });
+  }
+
+  /* "incluir index.html": o arquivo aberto vai junto no pedido como
+     @menção, o mesmo mecanismo do terminal (lib/mencoes.js). Pedir "melhora
+     isso aqui" com o arquivo na tela e o agente sem saber qual é seria a
+     primeira frustração de quem usa uma IDE. */
+  function pintarAnexo() {
+    var a = aba(ativa);
+    $("anexo").hidden = !a;
+    if (a) $("anexoNome").textContent = nomeDe(a.caminho);
+  }
+
+  function mencao(caminho) { return /\s/.test(caminho) ? '@"' + caminho + '"' : "@" + caminho; }
+
+  var campo = $("campo");
+  function enviar(texto) {
+    texto = String(texto || "").trim();
+    if (!texto) return;
+    var a = aba(ativa);
+    if (a && $("anexar").checked && texto.charAt(0) !== "/" && texto.indexOf(mencao(a.caminho)) < 0) {
+      texto += " (arquivo aberto: " + mencao(a.caminho) + ")";
+    }
+    pedir("/api/enviar", { texto: texto });
+    campo.value = "";
+    ajustarCampo();
+  }
+  function ajustarCampo() {
+    campo.style.height = "auto";
+    campo.style.height = Math.min(campo.scrollHeight, 180) + "px";
+  }
+  $("forma").addEventListener("submit", function (ev) { ev.preventDefault(); enviar(campo.value); });
+  campo.addEventListener("input", ajustarCampo);
+  campo.addEventListener("keydown", function (ev) {
+    if (ev.key === "Enter" && !ev.shiftKey) { ev.preventDefault(); enviar(campo.value); }
+  });
+  $("parar").onclick = function () { pedir("/api/parar", {}); };
+  document.querySelectorAll("[data-manda]").forEach(function (b) {
+    b.addEventListener("click", function () { enviar(b.dataset.manda); });
+  });
+
+  /* ── barra, terminal, atalhos ───────────────────────────────────────── */
+
+  var esperaAviso = null;
+  function avisar(texto) {
+    var el = $("barraAviso");
+    el.textContent = texto;
+    clearTimeout(esperaAviso);
+    esperaAviso = setTimeout(function () { el.textContent = ""; }, 6000);
+  }
+
+  function pintarBarra(salvoTexto) {
+    var a = aba(ativa);
+    var texto = !!(a && a.tipo === "texto");
+    $("barraLingua").textContent = texto ? (LINGUAS[extensao(a.caminho)] || "Texto") : "";
+    if (!texto) $("barraPosicao").textContent = "";
+    var s = $("barraSalvo");
+    s.textContent = !texto ? "" : suja(a) ? "● não salvo" : (salvoTexto || "salvo");
+    s.className = "barra-item barra-salvo" + (texto && suja(a) ? " sujo" : "");
+  }
+
+  function mostrarTerminal(sim) {
+    document.body.classList.toggle("sem-terminal", !sim);
+    $("btnTerminal").setAttribute("aria-pressed", sim ? "true" : "false");
+    try { localStorage.setItem("primocode_ide_terminal", sim ? "1" : "0"); } catch (e) {}
+    if (sim) term.scrollTop = term.scrollHeight;
+  }
+  $("btnTerminal").onclick = function () { mostrarTerminal(document.body.classList.contains("sem-terminal")); };
+  $("btnFecharTerminal").onclick = function () { mostrarTerminal(false); };
+  $("btnRecarregar").onclick = carregarArvore;
+  // "Só o chat" leva a chave junto: a outra página a lê da URL.
+  $("linkChat").href = "/?k=" + encodeURIComponent(CHAVE);
+
+  document.addEventListener("keydown", function (ev) {
+    var mod = ev.ctrlKey || ev.metaKey;
+    if (mod && ev.key.toLowerCase() === "s") { ev.preventDefault(); salvar(false); return; }
+    if (mod && ev.key.toLowerCase() === "j") { ev.preventDefault(); $("btnTerminal").click(); return; }
+    if (ev.key === "Escape" && ocupado) pedir("/api/parar", {});
+  });
+  // Fechar a janela com arquivo não salvo: o único aviso que o navegador
+  // deixa dar nessa hora.
+  window.addEventListener("beforeunload", function (ev) {
+    if (abertas.some(suja)) { ev.preventDefault(); ev.returnValue = ""; }
+  });
+
+  /* ── abertura ───────────────────────────────────────────────────────────
+     A IDE abre trabalhando, não vazia: se o projeto tem um index.html, ele
+     já vem aberto no editor e a prévia ao lado. */
+  var terminalGuardado = "1";
+  try { terminalGuardado = localStorage.getItem("primocode_ide_terminal") || "1"; } catch (e) {}
+  mostrarTerminal(terminalGuardado !== "0");
+  pintarOcupado(false);
+  pedir("/api/estado").then(pintarEstado).catch(function () {});
+  carregarArvore().then(function () {
+    if (projeto.entrada) {
+      revelar(projeto.entrada);
+      abrirArquivo(projeto.entrada).then(function () { ligarPrevia(true); });
+    }
+  });
+  ligarFluxo();
+})();