primocode 8.22.1 → 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();