primocode 8.25.0 → 8.26.0

package/app/app.css

@@ -0,0 +1,230 @@
+/* A janela do PrimoCode.
+ *
+ * "Um aplicativo desktop bem bonito com as cores do PrimoCode, com aquele
+ *  azul. Bem estilo Codex. Um chat estilo terminal para quem não quer o
+ *  terminal."
+ *
+ * As cores não foram escolhidas aqui: são as mesmas de lib/ui.js, que já vêm
+ * do design system do produto. cyan-400 é o azul do PrimoCode; slate é a
+ * neutra; amber avisa e rose reprova. Repetir o terminal na tela não é falta
+ * de imaginação — é o que faz as duas telas serem o MESMO produto.
+ */
+
+:root {
+  --azul:       #22d3ee;   /* cyan-400  — a marca */
+  --azul-fundo: #0891b2;   /* cyan-600  — a mesma cor recuando */
+  --texto:      #e2e8f0;   /* slate-200 */
+  --fraco:      #94a3b8;   /* slate-400 */
+  --apagado:    #64748b;   /* slate-500 */
+  --alerta:     #fbbf24;   /* amber-400 */
+  --falha:      #fb7185;   /* rose-400  */
+
+  --fundo:      #0a0f16;
+  --painel:     #0f1620;
+  --borda:      #1e293b;
+  --borda-viva: #24384f;
+
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
+          Consolas, "Liberation Mono", monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+/* `display:flex` e `display:grid` nas regras abaixo ganham do `[hidden]` do
+   navegador, que é só `display:none` sem peso nenhum. O resultado era o botão
+   de parar e o "trabalhando" aparecendo com o agente parado — a janela dizia
+   que estava fazendo alguma coisa o tempo todo. */
+[hidden] { display: none !important; }
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--fundo);
+  color: var(--texto);
+  font-family: var(--sans);
+  font-size: 14px;
+  overflow: hidden;
+}
+
+body {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  /* O brilho azul atrás de tudo. Um só, bem aberto e bem fraco: dá
+     profundidade sem virar papel de parede. */
+  background-image:
+    radial-gradient(120% 80% at 50% -20%, rgba(34, 211, 238, .08), transparent 62%);
+}
+
+/* ── topo ───────────────────────────────────────────────────────────────── */
+
+#topo {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 11px 18px;
+  border-bottom: 1px solid var(--borda);
+  background: rgba(10, 15, 22, .72);
+  backdrop-filter: blur(14px);
+  /* Na janela do Chrome em modo app não há barra de título: esta faixa é a
+     barra, e precisa poder arrastar a janela. */
+  -webkit-app-region: drag;
+  user-select: none;
+}
+#topo button, #topo .chip { -webkit-app-region: no-drag; }
+
+.marca { display: flex; align-items: center; gap: 9px; }
+.logo { width: 19px; height: 19px; color: var(--azul); flex: 0 0 auto; }
+.nome { font-weight: 640; letter-spacing: -.012em; }
+.versao { color: var(--apagado); font-size: 11.5px; font-family: var(--mono); }
+
+.estado { display: flex; gap: 7px; align-items: center; min-width: 0; }
+.chip {
+  font-family: var(--mono); font-size: 11.5px;
+  color: var(--fraco); background: var(--painel);
+  border: 1px solid var(--borda); border-radius: 999px;
+  padding: 3px 10px; white-space: nowrap;
+  max-width: 300px; overflow: hidden; text-overflow: ellipsis;
+}
+.chip:empty { display: none; }
+#modo { color: var(--azul); border-color: var(--borda-viva); }
+
+/* ── conversa ───────────────────────────────────────────────────────────── */
+
+#rolo { overflow-y: auto; scroll-behavior: smooth; }
+#rolo::-webkit-scrollbar { width: 10px; }
+#rolo::-webkit-scrollbar-thumb { background: #1c2836; border-radius: 8px; border: 3px solid var(--fundo); }
+
+#conversa { max-width: 860px; margin: 0 auto; padding: 26px 22px 40px; }
+
+.boas-vindas { padding: 12vh 0 0; text-align: center; }
+.boas-vindas h1 {
+  font-size: 27px; font-weight: 620; letter-spacing: -.025em; margin: 0 0 10px;
+}
+.boas-vindas p {
+  color: var(--fraco); max-width: 460px; margin: 0 auto 26px; line-height: 1.6;
+}
+.atalhos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+.atalhos button {
+  font: inherit; font-size: 13px; color: var(--fraco); cursor: pointer;
+  background: var(--painel); border: 1px solid var(--borda);
+  border-radius: 999px; padding: 7px 15px;
+  transition: border-color .16s, color .16s, transform .16s;
+}
+.atalhos button:hover {
+  color: var(--texto); border-color: var(--borda-viva); transform: translateY(-1px);
+}
+
+/* O que o usuário disse: bolha à direita, curta, com a marca de lado. */
+.voce {
+  margin: 24px 0 14px; display: flex; justify-content: flex-end;
+}
+.voce > div {
+  background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,.07));
+  border: 1px solid rgba(34, 211, 238, .28);
+  border-radius: 14px 14px 4px 14px;
+  padding: 10px 15px; max-width: 78%;
+  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
+}
+
+/* A saída do agente: monoespaçada, como no terminal, porque É a saída do
+   terminal — as mesmas linhas, as mesmas cores. */
+.saida {
+  font-family: var(--mono); font-size: 12.8px; line-height: 1.62;
+  white-space: pre-wrap; word-break: break-word;
+  color: var(--texto); margin: 0;
+}
+.saida a { color: var(--azul); }
+
+/* As cores ANSI, traduzidas. Os números são os do lib/ui.js. */
+.c45  { color: var(--azul); }
+.c31  { color: var(--azul-fundo); }
+.c254 { color: var(--texto); }
+.c247 { color: var(--fraco); }
+.c243 { color: var(--apagado); }
+.c214 { color: var(--alerta); }
+.c204 { color: var(--falha); }
+.forte { font-weight: 650; }
+
+.aviso-erro {
+  margin: 14px 0; padding: 10px 14px; line-height: 1.55;
+  color: var(--falha); background: rgba(251, 113, 133, .08);
+  border: 1px solid rgba(251, 113, 133, .26); border-radius: 10px;
+}
+
+/* ── barra de baixo ─────────────────────────────────────────────────────── */
+
+#baixo {
+  border-top: 1px solid var(--borda);
+  background: rgba(10, 15, 22, .82);
+  backdrop-filter: blur(14px);
+  padding: 12px 22px 14px;
+}
+
+#pensando {
+  max-width: 860px; margin: 0 auto 9px;
+  display: flex; align-items: center; gap: 9px;
+  color: var(--azul); font-family: var(--mono); font-size: 12.5px;
+}
+.pulso {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
+  animation: bater 1.15s ease-in-out infinite;
+}
+@keyframes bater {
+  0%, 100% { opacity: .28; transform: scale(.72); }
+  50%      { opacity: 1;   transform: scale(1); }
+}
+
+#forma {
+  max-width: 860px; margin: 0 auto;
+  display: flex; align-items: flex-end; gap: 9px;
+  background: var(--painel);
+  border: 1px solid var(--borda);
+  border-radius: 15px; padding: 8px 8px 8px 15px;
+  transition: border-color .16s, box-shadow .16s;
+}
+#forma:focus-within {
+  border-color: rgba(34, 211, 238, .45);
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, .09);
+}
+
+#campo {
+  flex: 1; font: inherit; font-size: 14.5px; line-height: 1.55;
+  color: var(--texto); background: none; border: 0; outline: 0;
+  resize: none; max-height: 44vh; padding: 6px 0;
+}
+#campo::placeholder { color: var(--apagado); }
+
+#forma button {
+  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
+  display: grid; place-items: center; cursor: pointer; border: 0;
+  transition: background .16s, color .16s, opacity .16s;
+}
+#forma button svg { width: 18px; height: 18px; }
+#mandar { background: var(--azul); color: #04252c; }
+#mandar:hover { background: #67e8f9; }
+#mandar:disabled { background: #16323d; color: #3f6472; cursor: default; }
+#parar { background: rgba(251, 113, 133, .14); color: var(--falha); }
+#parar:hover { background: rgba(251, 113, 133, .24); }
+
+.dica {
+  max-width: 860px; margin: 8px auto 0;
+  color: var(--apagado); font-size: 11.5px; text-align: center;
+}
+
+/* ── arrastar arquivo ───────────────────────────────────────────────────── */
+
+#alvo-solto {
+  position: fixed; inset: 0; display: none; place-items: center;
+  background: rgba(6, 10, 16, .82); backdrop-filter: blur(3px); z-index: 40;
+}
+body.soltando #alvo-solto { display: grid; }
+#alvo-solto > div {
+  border: 2px dashed rgba(34, 211, 238, .55); border-radius: 18px;
+  padding: 44px 62px; text-align: center; color: var(--azul);
+  display: grid; gap: 6px;
+}
+#alvo-solto span { color: var(--fraco); font-size: 13px; }
+
+@media (max-width: 620px) {
+  .estado #pasta { display: none; }
+  #conversa, #forma, #pensando, .dica { max-width: none; }
+}

package/app/app.js

@@ -0,0 +1,273 @@
+/* A janela conversando com o PrimoCode.
+ *
+ * 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.
+ *
+ * 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.
+ */
+(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") || "";
+  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 ocupado = false;
+
+  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),
+    });
+  }
+
+  /* ── 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 acompanhar(estava) {
+    if (estava) rolo.scrollTop = rolo.scrollHeight;
+  }
+
+  function limparBoasVindas() {
+    var b = conversa.querySelector(".boas-vindas");
+    if (b) b.remove();
+  }
+
+  /* ── 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;
+
+  function fugir(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  function paraHtml(texto, estado) {
+    var fora = "";
+    var ultimo = 0;
+    var m;
+    ANSI.lastIndex = 0;
+
+    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(" ") + '">' : "";
+    }
+    function fechar() {
+      return (estado.cor || estado.forte) ? "</span>" : "";
+    }
+
+    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;
+      }
+    }
+    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;
+
+  function escreverSaida(texto) {
+    var estava = noFim();
+    limparBoasVindas();
+    if (!bloco) {
+      bloco = document.createElement("pre");
+      bloco.className = "saida";
+      conversa.appendChild(bloco);
+    }
+    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 };
+    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);
+  }
+
+  /* ── estado ────────────────────────────────────────────────────────────── */
+
+  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";
+  }
+
+  function pintarOcupado(v) {
+    ocupado = !!v;
+    pensando.hidden = !ocupado;
+    parar.hidden = !ocupado;
+    mandar.hidden = ocupado;
+    campo.placeholder = ocupado
+      ? "ele está trabalhando — pode ir escrevendo o próximo"
+      : "Peça alguma coisa…  (Enter manda, Shift+Enter quebra linha)";
+  }
+
+  /* ── 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. */
+  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 */ };
+  }
+
+  /* ── mandar ────────────────────────────────────────────────────────────── */
+
+  function enviar(texto) {
+    texto = (texto || "").trim();
+    if (!texto) return;
+    pedir("/api/enviar", { texto: texto });
+    campo.value = "";
+    ajustarAltura();
+  }
+
+  function ajustarAltura() {
+    campo.style.height = "auto";
+    campo.style.height = Math.min(campo.scrollHeight, window.innerHeight * 0.44) + "px";
+  }
+
+  forma.addEventListener("submit", function (ev) {
+    ev.preventDefault();
+    enviar(campo.value);
+  });
+
+  campo.addEventListener("input", ajustarAltura);
+  campo.addEventListener("keydown", function (ev) {
+    if (ev.key === "Enter" && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+      ev.preventDefault();
+      enviar(campo.value);
+    }
+  });
+
+  parar.addEventListener("click", function () { pedir("/api/parar", {}); });
+
+  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();
+    }
+  });
+
+  document.querySelectorAll(".atalhos button").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.
+
+     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("dragover", function (ev) { ev.preventDefault(); });
+  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 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();
+  });
+
+  pedir("/api/estado").then(function (r) { return r.json(); }).then(pintarEstado)
+    .catch(function () {});
+  ligar();
+  campo.focus();
+})();

package/app/icone.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#0a0f16"/>
+  <path d="M8 10.5 13 16l-5 5.5" fill="none" stroke="#22d3ee" stroke-width="2.6"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.5 22H24" fill="none" stroke="#22d3ee" stroke-width="2.6" stroke-linecap="round"/>
+</svg>

package/app/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>PrimoCode</title>
+<link rel="stylesheet" href="/app.css">
+<link rel="icon" href="/icone.svg">
+</head>
+<body>
+
+<header id="topo">
+  <div class="marca">
+    <svg class="logo" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M4 6.5 9 12l-5 5.5" fill="none" stroke="currentColor" stroke-width="2.1"
+            stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M12.5 18h7.5" fill="none" stroke="currentColor" stroke-width="2.1"
+            stroke-linecap="round"/>
+    </svg>
+    <span class="nome">PrimoCode</span>
+    <span class="versao" id="versao"></span>
+  </div>
+  <div class="estado">
+    <span class="chip" id="pasta" title="pasta de trabalho"></span>
+    <span class="chip" id="modo"></span>
+    <span class="chip" id="esforco"></span>
+  </div>
+</header>
+
+<main id="rolo">
+  <div id="conversa">
+    <div class="boas-vindas">
+      <h1>Oi. O que a gente vai construir?</h1>
+      <p>Escreva do jeito que você falaria. Ele lê a pasta, escreve o código,
+         roda o que precisar e conta o que fez.</p>
+      <div class="atalhos">
+        <button data-manda="/tudo">o que ele sabe fazer</button>
+        <button data-manda="/project">meus projetos</button>
+        <button data-manda="/effort">esforço</button>
+        <button data-manda="/help">comandos</button>
+      </div>
+    </div>
+  </div>
+</main>
+
+<footer id="baixo">
+  <div id="pensando" hidden><span class="pulso"></span><span id="pensando-txt">trabalhando</span></div>
+  <form id="forma">
+    <textarea id="campo" rows="1" placeholder="Peça alguma coisa…  (Enter manda, Shift+Enter quebra linha)"
+              autocomplete="off" spellcheck="false"></textarea>
+    <button type="submit" id="mandar" title="Enviar (Enter)" aria-label="Enviar">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 12h13m0 0-5-5m5 5-5 5" fill="none" stroke="currentColor"
+              stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button type="button" id="parar" title="Parar (Esc)" hidden aria-label="Parar">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2" fill="currentColor"/></svg>
+    </button>
+  </form>
+  <div class="dica" id="dica">arraste um vídeo ou arquivo aqui para o PrimoCode usar</div>
+</footer>
+
+<div id="alvo-solto"><div><strong>Solte aqui</strong><span>o caminho entra no pedido</span></div></div>
+
+<script src="/app.js"></script>
+</body>
+</html>

package/bin/primocode.js

@@ -25,6 +25,7 @@ const pasta = require('../lib/pasta');
 const catalogo = require('../lib/catalogo');
 const effort = require('../lib/effort');
 const memoria = require('../lib/memoria-conversa');
+const appLib = require('../lib/app');
 
 // Rede de segurança de último recurso: sem isto, uma exceção fora de um
 // try/catch (ex.: dentro de um callback de socket, como o parser de SSE) não
@@ -61,6 +62,10 @@ const state = {
     engine: 'server',   // 'server' (OpenRouter/Groq) | 'claude-code' (/claude)
 };
 
+// A janela do /app, quando aberta. Uma por sessão: o segundo /app traz a que
+// existe para a frente em vez de subir outro servidor ao lado.
+let janelaAberta = null;
+
 const HELP = `
 ${c.bold('Comandos')}
   ${c.brand('/dir')} <caminho>       trabalha numa pasta que já existe (onde você quiser)
@@ -75,6 +80,7 @@ ${c.bold('Comandos')}
   ${c.brand('/read')} <arquivo>       mostra um arquivo
   ${c.brand('/run')} <comando>        executa no shell do projeto
   ${c.brand('/open')} <arquivo|url>   abre no navegador
+  ${c.brand('/app')}                  abre a janela do PrimoCode (chat, sem terminal)
   ${c.brand('/status')}               checa o servidor
   ${c.brand('/name')} <nome>          como o Primo te chama
   ${c.brand('/mascot')} <estilo>      mascote: primo|fox|cat
@@ -115,6 +121,7 @@ const SLASH_COMANDOS = [
     ['/read', 'mostra um arquivo'],
     ['/run', 'roda um comando'],
     ['/open', 'abre no navegador'],
+    ['/app', 'abre a janela do PrimoCode'],
     ['/status', 'checa o servidor'],
     ['/name', 'como ele te chama'],
     ['/mascot', 'primo | fox | cat'],
@@ -925,6 +932,51 @@ async function handleSlash(text) {
             break;
         }
 
+        /* A janela. "Se mandar /app pra ele, ele abre o aplicativo — para o
+           Mac e o Windows, já instalado junto com o npm, com as cores do
+           PrimoCode. Um chat estilo terminal para quem não quer o terminal."
+
+           Uma janela por sessão: mandar /app de novo traz a que já existe
+           para a frente em vez de abrir outra do lado. */
+        case 'app': {
+            if (janelaAberta) {
+                // Já existe: reabre no MESMO endereço. O navegador traz a
+                // janela daquela URL para a frente em vez de fazer outra.
+                await appLib.abrirJanela(janelaAberta.url);
+                console.log(c.muted('  A janela já estava aberta — trouxe para a frente.'));
+                break;
+            }
+            const sp = new Spinner('abrindo a janela').start();
+            try {
+                janelaAberta = await appLib.abrir({
+                    versao: VERSION,
+                    enviar: (t) => sendPrompt(t),
+                    barra: (t) => handleSlash(t),
+                    interromper,
+                    estado: () => ({
+                        pasta: state.workDir ? shortPath(state.workDir) : null,
+                        projeto: state.currentProject,
+                        modo: state.mode,
+                        esforco: state.config.effort,
+                    }),
+                });
+                sp.stop();
+                const j = janelaAberta.janela || {};
+                console.log(c.ok('  Janela aberta.')
+                    + c.muted(j.modo === 'janela' ? `  (${j.navegador})`
+                        : j.modo === 'aba' ? '  (aba do navegador padrão)' : ''));
+                console.log(c.dim(`  ${janelaAberta.url}`));
+                if (j.modo === 'nenhum') {
+                    console.log(c.warn('  Não consegui abrir sozinho — copie o endereço acima no navegador.'));
+                }
+                console.log(c.muted('  O terminal continua funcionando: os dois mostram a mesma coisa.'));
+            } catch (e) {
+                sp.stop();
+                console.log(c.err(`  Não subiu: ${e.message}`));
+            }
+            break;
+        }
+
         case 'uninstall': {
             if (await confirm('Remover o PrimoCode? Seus projetos em ~/primocode NÃO serão apagados.')) {
                 await tools.uninstall();

package/lib/app.js

@@ -0,0 +1,334 @@
+/**
+ * app.js — o PrimoCode como aplicativo de janela.
+ *
+ *   "Se mandar /app pra ele, ele abre o aplicativo que você vai desenvolver
+ *    para o Mac e o Windows, já instala junto com o npm. Vai ser um aplicativo
+ *    desktop bem bonito com as cores do PrimoCode, com aquele azul. Bem estilo
+ *    Codex. Vai ter o chat em localhost. Um chat estilo terminal para quem não
+ *    quer o terminal."
+ *
+ * ── POR QUE NÃO É ELECTRON ───────────────────────────────────────────────
+ * O PrimoCode tem ZERO dependência de npm, e isso não é purismo: é o que faz
+ * `npm i -g primocode` levar segundos em vez de baixar 200 MB de navegador
+ * empacotado. Electron levaria os dois embora — a promessa de "já instala
+ * junto com o npm" e a instalação leve.
+ *
+ * O que Electron entrega, no fundo, é uma janela sem barra de endereço
+ * mostrando uma página local. Chrome, Edge e Brave fazem exatamente isso com
+ * `--app=<url>`: janela limpa, ícone próprio na barra de tarefas, sem abas.
+ * O navegador já está na máquina do usuário — no Windows o Edge vem com o
+ * sistema, no Mac o Safari (e quase sempre o Chrome).
+ *
+ * Então: servidor HTTP local (http do Node, nada instalado) + janela do
+ * navegador em modo app. Se não houver nenhum navegador de Chromium, abre
+ * numa aba normal, que continua funcionando.
+ *
+ * ── POR QUE ELE ESPELHA O TERMINAL ───────────────────────────────────────
+ * O pedido foi "um chat estilo terminal para quem não quer o terminal" — e o
+ * agente já conta o que faz, linha por linha, com cor. Reescrever essa saída
+ * para a web daria duas verdades para manter, e uma delas ficaria velha.
+ *
+ * Aqui a saída é a MESMA: o `process.stdout.write` é espelhado, os códigos
+ * ANSI viram cor de verdade na página, e o terminal continua imprimindo
+ * normalmente. Quem abrir os dois vê a mesma coisa nos dois.
+ *
+ * ── SEGURANÇA ────────────────────────────────────────────────────────────
+ * Este servidor MANDA NO AGENTE: quem fala com ele executa comando, escreve
+ * arquivo e gasta a cota do usuário. Por isso ele só escuta em 127.0.0.1 e
+ * exige uma chave sorteada a cada abertura — sem ela, uma página qualquer
+ * aberta no mesmo navegador dispararia pedidos para cá.
+ */
+
+'use strict';
+
+const http = require('http');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const crypto = require('crypto');
+const { execFile } = require('child_process');
+
+const WEB = path.join(__dirname, '..', 'app');
+const PORTA_PADRAO = Number(process.env.PRIMOCODE_APP_PORT) || 7788;
+
+// ── espelho da saída ─────────────────────────────────────────────────────
+
+/* Duplica tudo que vai para o terminal, sem tirar nada de lá.
+ *
+ * O `write` original continua sendo chamado com os mesmos argumentos e o mesmo
+ * retorno: se este espelho mudasse o valor de volta, o Node passaria a achar
+ * que o buffer encheu (ou que não encheu) e a saída sairia picada. */
+function espelhar(aoEscrever) {
+    const real = process.stdout.write.bind(process.stdout);
+    process.stdout.write = function (pedaco, enc, cb) {
+        try {
+            aoEscrever(typeof pedaco === 'string' ? pedaco : Buffer.from(pedaco).toString('utf8'));
+        } catch { /* o espelho nunca pode derrubar a saída */ }
+        return real(pedaco, enc, cb);
+    };
+    return function parar() { process.stdout.write = real; };
+}
+
+/* O prompt do readline e os quadros do rodinha não são conteúdo: são a
+   interface do TERMINAL se redesenhando. Na página eles viravam lixo piscando
+   no meio da conversa. O jeito de reconhecê-los é o que sobra depois de tirar
+   o ANSI: pedaço curto e sem quebra de linha é desenho, não texto. */
+function ehRuido(texto) {
+    const limpo = texto.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, '').replace(/\r/g, '');
+    if (limpo.includes('\n')) return false;
+    return limpo.trim().length < 12;
+}
+
+// ── o servidor ───────────────────────────────────────────────────────────
+
+function tipoDe(arquivo) {
+    if (arquivo.endsWith('.html')) return 'text/html; charset=utf-8';
+    if (arquivo.endsWith('.css')) return 'text/css; charset=utf-8';
+    if (arquivo.endsWith('.js')) return 'application/javascript; charset=utf-8';
+    if (arquivo.endsWith('.svg')) return 'image/svg+xml';
+    return 'application/octet-stream';
+}
+
+/**
+ * Sobe a janela do PrimoCode.
+ *
+ * @param {object} op
+ * @param {(texto:string)=>Promise} op.enviar      manda um pedido ao agente
+ * @param {(texto:string)=>Promise} op.barra       trata um comando /barra
+ * @param {()=>void}                op.interromper para o que estiver rodando
+ * @param {()=>object}              op.estado      { pasta, modo, esforco, projeto }
+ * @param {string}                  op.versao
+ */
+async function abrir(op) {
+    const chave = crypto.randomBytes(16).toString('hex');
+    const ouvintes = new Set();
+    let ocupado = false;
+    const fila = [];
+
+    // O histórico de saída para quem abrir a janela DEPOIS de o agente já ter
+    // começado — sem isto a página nasceria vazia no meio de uma tarefa.
+    const memoria = [];
+    const MEMORIA_MAX = 400;
+
+    function emitir(evento, dados) {
+        const linha = `event: ${evento}\ndata: ${JSON.stringify(dados)}\n\n`;
+        for (const res of ouvintes) {
+            try { res.write(linha); } catch { ouvintes.delete(res); }
+        }
+    }
+
+    const pararEspelho = espelhar((pedaco) => {
+        if (ehRuido(pedaco)) return;
+        memoria.push(pedaco);
+        if (memoria.length > MEMORIA_MAX) memoria.shift();
+        emitir('saida', pedaco);
+    });
+
+    async function processar(texto) {
+        fila.push(texto);
+        if (ocupado) return;
+        ocupado = true;
+        emitir('ocupado', true);
+        while (fila.length) {
+            const t = String(fila.shift() || '').trim();
+            if (!t) continue;
+            emitir('voce', t);
+            try {
+                if (t.startsWith('/')) await op.barra(t);
+                else await op.enviar(t);
+            } catch (e) {
+                emitir('erro', (e && e.message) || String(e));
+            }
+        }
+        ocupado = false;
+        emitir('ocupado', false);
+        emitir('estado', op.estado());
+    }
+
+    const servidor = http.createServer((req, res) => {
+        const url = new URL(req.url, 'http://127.0.0.1');
+        const rota = url.pathname;
+
+        /* A chave protege a API, que é onde está tudo o que importa: a conversa
+           do usuário e a capacidade de dar ordens ao agente. A página em si —
+           HTML, CSS, JS — não guarda segredo nenhum e não faz nada sem a
+           chave, então ela é servida solta.
+
+           Não é frouxidão, é o contrário: exigir chave nos estáticos também
+           quebrava a própria janela, porque o navegador pede /app.css e
+           /app.js sem parâmetro nenhum. A página vinha, ficava sem estilo e
+           sem script, e o "app bonito" era um formulário branco. */
+        if (rota.startsWith('/api/')) {
+            const dada = url.searchParams.get('k') || req.headers['x-primo-chave'];
+            if (dada !== chave) {
+                res.writeHead(403, { 'Content-Type': 'text/plain; charset=utf-8' });
+                return res.end('chave inválida — abra a janela com o comando /app');
+            }
+        }
+        /* CSRF: uma página de terceiro consegue disparar POST simples para
+           127.0.0.1 sem preflight. Ela não saberia a chave, mas o cinto e o
+           suspensório custam três linhas. */
+        const origem = req.headers.origin;
+        if (origem && !origem.startsWith(`http://127.0.0.1:${servidor.__porta}`)
+            && !origem.startsWith(`http://localhost:${servidor.__porta}`)) {
+            res.writeHead(403).end();
+            return;
+        }
+
+        if (rota === '/api/fluxo') {
+            res.writeHead(200, {
+                'Content-Type': 'text/event-stream; charset=utf-8',
+                'Cache-Control': 'no-cache',
+                Connection: 'keep-alive',
+                // Sem isto um proxy no meio segura os eventos até fechar.
+                'X-Accel-Buffering': 'no',
+            });
+            res.write(': ligado\n\n');
+            ouvintes.add(res);
+            res.write(`event: estado\ndata: ${JSON.stringify(op.estado())}\n\n`);
+            for (const pedaco of memoria) {
+                res.write(`event: saida\ndata: ${JSON.stringify(pedaco)}\n\n`);
+            }
+            res.write(`event: ocupado\ndata: ${JSON.stringify(ocupado)}\n\n`);
+            // Batida a cada 20s: proxy e sistema derrubam conexão parada, e
+            // uma janela que "morre sozinha depois de um tempo" seria um bug
+            // impossível de achar depois.
+            const batida = setInterval(() => { try { res.write(': ok\n\n'); } catch {} }, 20000);
+            req.on('close', () => { clearInterval(batida); ouvintes.delete(res); });
+            return;
+        }
+
+        if (rota === '/api/enviar' && req.method === 'POST') {
+            let corpo = '';
+            req.on('data', (c) => { corpo += c; if (corpo.length > 200000) req.destroy(); });
+            req.on('end', () => {
+                let texto = '';
+                try { texto = JSON.parse(corpo).texto || ''; } catch { /* vazio */ }
+                res.writeHead(200, { 'Content-Type': 'application/json' }).end('{"ok":true}');
+                if (texto.trim()) processar(texto);
+            });
+            return;
+        }
+
+        if (rota === '/api/parar' && req.method === 'POST') {
+            try { op.interromper(); } catch {}
+            res.writeHead(200, { 'Content-Type': 'application/json' }).end('{"ok":true}');
+            return;
+        }
+
+        if (rota === '/api/estado') {
+            res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
+            return res.end(JSON.stringify(Object.assign({ versao: op.versao }, op.estado())));
+        }
+
+        // Estáticos. `basename` corta qualquer "../" antes de virar caminho:
+        // este servidor fala com o disco do usuário e não pode servir o que
+        // estiver fora da pasta do aplicativo.
+        const nome = rota === '/' ? 'index.html' : path.basename(rota);
+        const arquivo = path.join(WEB, nome);
+        fs.readFile(arquivo, (erro, dados) => {
+            if (erro) { res.writeHead(404).end('não encontrado'); return; }
+            res.writeHead(200, { 'Content-Type': tipoDe(nome) });
+            res.end(dados);
+        });
+    });
+
+    const porta = await escutar(servidor, PORTA_PADRAO);
+    servidor.__porta = porta;
+    const url = `http://127.0.0.1:${porta}/?k=${chave}`;
+
+    const janela = await abrirJanela(url);
+    return {
+        url, porta, chave, servidor, janela,
+        fechar() { try { pararEspelho(); } catch {} try { servidor.close(); } catch {} },
+    };
+}
+
+/* Porta ocupada não é erro: é outra janela do PrimoCode, ou qualquer coisa
+   que pegou a 7788 primeiro. Anda dez casas e desiste — se dez portas
+   seguidas estão tomadas, o problema é outro. */
+function escutar(servidor, inicial) {
+    return new Promise((ok, falha) => {
+        let porta = inicial;
+        const tentar = () => {
+            servidor.once('error', (e) => {
+                if (e.code === 'EADDRINUSE' && porta < inicial + 10) { porta++; tentar(); }
+                else falha(e);
+            });
+            servidor.listen(porta, '127.0.0.1', () => ok(porta));
+        };
+        tentar();
+    });
+}
+
+/* ── a janela ────────────────────────────────────────────────────────────
+   `--app=` abre sem barra de endereço, sem abas e com entrada própria na
+   barra de tarefas: é o que faz parecer aplicativo em vez de site. Chrome,
+   Edge, Brave e Vivaldi entendem, porque todos são Chromium.
+
+   `--user-data-dir` aponta para uma pasta do PrimoCode de propósito: sem ele,
+   o Chrome que JÁ ESTÁ ABERTO recebe o pedido e devolve uma aba comum — o
+   modo app é ignorado quando há um perfil em uso. Com perfil próprio nasce
+   uma janela de verdade, e o histórico do usuário fica fora disto. */
+function candidatosDeNavegador() {
+    const p = os.platform();
+    if (p === 'darwin') {
+        return [
+            '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+            '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+            '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+            '/Applications/Chromium.app/Contents/MacOS/Chromium',
+            '/Applications/Arc.app/Contents/MacOS/Arc',
+        ];
+    }
+    if (p === 'win32') {
+        const bases = [process.env['PROGRAMFILES'], process.env['PROGRAMFILES(X86)'],
+            process.env.LOCALAPPDATA].filter(Boolean);
+        const relativos = [
+            'Google\\Chrome\\Application\\chrome.exe',
+            'Microsoft\\Edge\\Application\\msedge.exe',
+            'BraveSoftware\\Brave-Browser\\Application\\brave.exe',
+        ];
+        const fora = [];
+        for (const b of bases) for (const r of relativos) fora.push(path.join(b, r));
+        return fora;
+    }
+    return ['/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium',
+        '/usr/bin/chromium-browser', '/usr/bin/microsoft-edge', '/usr/bin/brave-browser'];
+}
+
+function abrirJanela(url) {
+    const perfil = path.join(os.homedir(), '.primocode', 'janela');
+    try { fs.mkdirSync(perfil, { recursive: true }); } catch {}
+
+    for (const exe of candidatosDeNavegador()) {
+        if (!fs.existsSync(exe)) continue;
+        try {
+            const filho = execFile(exe, [
+                `--app=${url}`,
+                `--user-data-dir=${perfil}`,
+                '--window-size=1180,820',
+                '--no-first-run',
+                '--no-default-browser-check',
+            ], () => {});
+            // A janela é do usuário: se o PrimoCode do terminal terminar, ela
+            // continua de pé.
+            filho.unref();
+            return Promise.resolve({ modo: 'janela', navegador: path.basename(exe) });
+        } catch { /* tenta o próximo */ }
+    }
+
+    // Nenhum Chromium instalado: aba comum no navegador padrão. Funciona
+    // igual — só não fica com cara de aplicativo.
+    const p = os.platform();
+    const [cmd, args] = p === 'darwin' ? ['open', [url]]
+        : p === 'win32' ? ['cmd.exe', ['/c', 'start', '', url]]
+        : ['xdg-open', [url]];
+    return new Promise((ok) => {
+        execFile(cmd, args, { timeout: 10000 }, (erro) => {
+            ok(erro ? { modo: 'nenhum', erro: erro.message } : { modo: 'aba' });
+        });
+    });
+}
+
+module.exports = { abrir, abrirJanela, espelhar, ehRuido, candidatosDeNavegador };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.25.0",
+  "version": "8.26.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": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/app.test.js"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -27,6 +27,7 @@
   "files": [
     "bin/",
     "lib/",
+    "app/",
     "studio/",
     "README.md"
   ]