primocode 9.8.0-beta.5 → 9.8.0-beta.6

package/README.md

@@ -1,4 +1,4 @@
-# PrimoCode v9.8.0-beta.5
+# PrimoCode v9.8.0-beta.6
 
 Agente de engenharia brasileiro para o terminal, no estilo Claude Code.
 Cria arquivos de verdade, roda comandos, **controla o navegador e o desktop** —
@@ -9,7 +9,7 @@ OpenRouter, e cada apelido (`top`/`main`/`fast`) é uma **corrente**: se um mode
 está no limite de pedidos, o próximo atende. Você não vê o erro, e não paga nada.
 
 ```
- ▐▛███▜▌   Primo Code v9.8.0-beta.5
+ ▐▛███▜▌   Primo Code v9.8.0-beta.6
 ▝▜█████▛▘  Bem-vindo de volta, Joel
   ▘▘ ▝▝    ~/primocode  · /dir <pasta> muda
 ```
@@ -284,6 +284,8 @@ primocode -c                           # continua a última conversa salva (--co
 |---|---|
 | `/dir <caminho>` | Trabalha numa pasta que já existe, onde você quiser |
 | `/project` | Lista projetos. `/project <nome>` cria em `~/primocode` |
+| `/projetos [n]` | Os projetos de `~/primocode` do mais recente para o mais antigo, com quando mexeu e o tamanho. `/projetos 2` entra no segundo (o `/project` sem nome mostra a mesma lista) |
+| `/novo <descrição>` | Começa um projeto NOVO do zero, em pasta própria com nome escolhido pelo modelo — sem cair num projeto parecido que já existe |
 | `/mode primocode\|chat\|auto` | Alterna o modo (fica guardado) |
 | `/voice` | Modo voz: uma orb, você fala, ele faz. O cérebro é o mesmo do terminal |
 | `/comandos` | Seus comandos: um `.md` em `~/.primocode/comandos/` (ou `<projeto>/.primocode/comandos/`) vira `/nome`, e `$ARGUMENTOS` recebe o que vem depois. Já vêm `/revisar`, `/explicar` e `/publicar`. `/comandos novo <nome>` cria um |
@@ -297,14 +299,23 @@ primocode -c                           # continua a última conversa salva (--co
 | `/attach <arquivo>` | Anexa arquivo ao próximo pedido |
 | `/detach` · `/files` | Remove / lista anexos |
 | `/all` | Lista as 46 ferramentas que ele sabe usar, por grupo |
-| `/desfazer` · `/undo` | Volta os arquivos que o último pedido mudou. `/desfazer lista` mostra os pedidos guardados · `/desfazer N` volta os N últimos |
+| `/desfazer` · `/undo` | Volta o projeto para como estava antes do último pedido — inclusive o que um comando apagou, moveu ou gerou (com git instalado, cada pedido tira uma foto do projeto num git à parte, que não toca no seu `.git`; `node_modules`, `dist` e o que o `.gitignore` ignora ficam de fora). Sem git, volta o que o agente escreveu com as ferramentas de arquivo. `/desfazer lista` mostra os pedidos e quantos arquivos cada um mudou · `/desfazer N` volta os N últimos |
 | `/tree [n]` | Árvore do projeto atual |
 | `/read <arquivo>` | Mostra um arquivo do projeto |
 | `/run <comando>` | Executa no shell, dentro da pasta do projeto |
 | `/open <arquivo\|url>` | Abre no navegador |
+| `/rc` | Abre a janela do PrimoCode: o chat, sem terminal |
+| `/ide` | Abre a PrimoCode IDE: os arquivos do projeto à esquerda, o editor no meio (Ctrl+S salva), a prévia do site ao lado, o chat com o Primo à direita e o terminal embaixo. Quando ele mexe num arquivo, a lista acende e a prévia se atualiza sozinha. Usa o mesmo servidor do `/rc` |
+| `primo ide` | Do shell: abre o PrimoCode já com a IDE aberta (`primo "pedido"` continua sendo o modo de um pedido só) |
+| `/abrir` | Abre o projeto atual no navegador: o servidor dele, se estiver de pé, ou a `index.html` (o `/open` sem nada faz o mesmo) |
+| `/copiar` | Copia a última resposta para a área de transferência (pbcopy, clip, wl-copy/xclip/xsel) |
+| `/historico [termo]` | Procura nos seus pedidos guardados nesta máquina (`~/.primocode/history.jsonl`), do mais recente. As conversas inteiras da conta ficam no `/chats` |
 | `/status` | Health check do servidor |
+| `/doctor` | Confere tudo com ✓/✗: Node, servidor, `/api`, Chrome, Python+PyObjC (cursor, macOS), disco e config. Cada ✗ diz como consertar |
+| `/custo` | Tokens enviados e recebidos e pedidos feitos nesta sessão, por provedor (estimado em caracteres ÷ 4 quando o provedor não manda o número) |
+| `/atalhos` | As teclas: Esc Esc para o agente, `!` roda no shell, Alt+Enter quebra linha… |
 | `/name <nome>` | Como o Primo te chama na saudação |
-| `/mascot primo\|fox\|cat` | Escolhe o mascote (mostra os três) |
+| `/mascot [nome\|n]` | Galeria dos 10 mascotes lado a lado (primo, fox, cat, robo, coruja, dragao, fantasma, capivara, polvo, pinguim), cada um com nome e bordão na abertura. Escolha por nome ou número. Depois de cada tarefa ele reage numa linha (`(^‿^)` pronto, `(°_°)` não terminou); `/mascot reacoes off` desliga |
 | `/config` | Mostra suas preferências e onde ficam salvas |
 | `/clear` · `/cls` | Limpa conversa / tela |
 | `/uninstall` | Remove o PrimoCode (seus projetos ficam) |

package/app/ansi.js

@@ -0,0 +1,55 @@
+/* ansi.js — a saída do terminal virando HTML com as cores do PrimoCode.
+ *
+ * A mesma tradução do app.js (a janela do /rc), agora num arquivo que a IDE
+ * também carrega. Só o que o PrimoCode realmente emite: 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.
+ *
+ * O `estado` 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.
+ */
+(function (raiz) {
+  "use strict";
+  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;
+      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();
+    // \r sozinho é o terminal voltando ao começo da linha para redesenhar;
+    // na página ele só deixaria um caractere invisível no meio do texto.
+    return fora.replace(/\r(?!\n)/g, "");
+  }
+
+  raiz.PrimoAnsi = { paraHtml: paraHtml, fugir: fugir };
+})(window);

package/app/ide.css

@@ -0,0 +1,345 @@
+/* A PrimoCode IDE.
+ *
+ * "Um app ao invés de CLI, aí fica uma IDE e uma CLI."
+ *
+ * Esta folha vem DEPOIS do app.css e não define cor nenhuma: tokens, o
+ * `.saida` com as cores ANSI, a bolha `.voce`, o campo com o `❯` e o botão
+ * de enviar são os mesmos da janela do /rc. Aqui só mora a planta da IDE —
+ * árvore à esquerda, editor e prévia no meio, chat à direita, terminal
+ * embaixo — e o que só ela tem (abas, calha de linhas, o acender da árvore).
+ */
+
+body.ide {
+  --w-arvore: 236px;
+  --w-chat: 368px;
+  --h-term: 188px;
+  --linha: 20px;           /* altura de uma linha do editor — a calha depende dela */
+  --codigo-tam: 13px;
+  --editor-fundo: #0b121b;
+  --realce: rgba(251, 191, 36, .16);   /* amber: "o agente mexeu aqui" */
+
+  display: grid;
+  grid-template-columns: var(--w-arvore) minmax(0, 1fr) var(--w-chat);
+  grid-template-rows: 44px minmax(0, 1fr) var(--h-term) 26px;
+  grid-template-areas:
+    "topo   topo     topo"
+    "arvore centro   chat"
+    "arvore terminal chat"
+    "barra  barra    barra";
+  background-image: none;
+}
+html[data-tema="claro"] body.ide { --editor-fundo: #fbfdfe; --realce: rgba(217, 119, 6, .14); }
+body.ide.sem-terminal { grid-template-rows: 44px minmax(0, 1fr) 0 26px; }
+body.ide.sem-terminal .terminal { display: none; }
+
+/* ── cabeçalhos de painel ─────────────────────────────────────────────── */
+.painel-cabeca {
+  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
+  height: 34px; padding: 0 10px 0 14px;
+  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado);
+  border-bottom: 1px solid var(--borda);
+}
+.painel-cabeca > span:first-child { font-weight: 600; }
+.icone-btn {
+  margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px;
+  border: 0; border-radius: 7px; background: none; color: var(--apagado); cursor: pointer;
+}
+.icone-btn:hover { background: var(--alto); color: var(--texto); }
+:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
+
+/* ── topo ─────────────────────────────────────────────────────────────── */
+.topo {
+  grid-area: topo; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 14px;
+  background: var(--barra); border-bottom: 1px solid var(--borda); min-width: 0;
+  -webkit-app-region: drag;
+}
+.topo button, .topo a { -webkit-app-region: no-drag; }
+.topo-marca { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+.topo-marca .nome { font-weight: 620; letter-spacing: -.01em; }
+.selo {
+  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
+  color: var(--azul); border: 1px solid color-mix(in srgb, var(--azul) 45%, transparent);
+  border-radius: 5px; padding: 1px 6px;
+}
+.topo-projeto {
+  display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--fraco); font-size: 13px;
+}
+.topo-projeto b { color: var(--texto); font-weight: 560; white-space: nowrap; }
+.topo-projeto .caminho {
+  font-family: var(--mono); font-size: 11.5px; color: var(--apagado);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+.botao-topo {
+  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
+  font: inherit; font-size: 12.5px; color: var(--fraco); text-decoration: none; cursor: pointer;
+  background: none; border: 1px solid var(--borda-viva); border-radius: 8px;
+}
+.botao-topo:hover { color: var(--texto); border-color: var(--azul); }
+.botao-topo[aria-pressed="true"] { color: var(--texto); background: var(--alto); }
+
+/* ── árvore ───────────────────────────────────────────────────────────── */
+.arvore {
+  grid-area: arvore; display: flex; flex-direction: column; min-height: 0;
+  background: var(--barra); border-right: 1px solid var(--borda);
+}
+.lista { flex: 1 1 0; overflow: auto; padding: 6px 6px 12px; font-size: 13px; }
+.lista::-webkit-scrollbar, .chat-rolo::-webkit-scrollbar, .terminal-saida::-webkit-scrollbar,
+#codigo::-webkit-scrollbar { width: 10px; height: 10px; }
+.lista::-webkit-scrollbar-thumb, .chat-rolo::-webkit-scrollbar-thumb, .terminal-saida::-webkit-scrollbar-thumb,
+#codigo::-webkit-scrollbar-thumb { background: var(--borda-viva); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
+#codigo::-webkit-scrollbar-corner { background: transparent; }
+
+.no {
+  position: relative; display: flex; align-items: center; gap: 6px; width: 100%;
+  height: 26px; padding: 0 8px 0 calc(8px + var(--nivel, 0) * 14px);
+  border: 0; border-radius: 6px; background: none; color: var(--fraco);
+  font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
+}
+.no:hover { background: var(--alto); color: var(--texto); }
+.no[aria-selected="true"] { background: color-mix(in srgb, var(--azul) 13%, transparent); color: var(--texto); }
+.no .nome-no { overflow: hidden; text-overflow: ellipsis; }
+.seta {
+  flex: 0 0 12px; display: grid; place-items: center; color: var(--apagado);
+  transition: transform .14s ease;
+}
+.no[aria-expanded="true"] .seta { transform: rotate(90deg); }
+.no.pasta { color: var(--texto); }
+
+/* O tipo de arquivo numa etiqueta de duas letras, e não num ícone: quem está
+   começando aprende a extensão lendo "js", "css", "md" — um desenhinho não
+   ensina nada. */
+.tipo {
+  flex: 0 0 22px; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: .02em; text-align: center; color: var(--apagado);
+}
+.tipo.t-html { color: var(--alerta); }
+.tipo.t-css  { color: var(--azul); }
+.tipo.t-js, .tipo.t-ts, .tipo.t-mjs { color: #fde68a; }
+.tipo.t-json { color: var(--fraco); }
+.tipo.t-img  { color: #fda4af; }
+.tipo.t-py   { color: #7dd3fc; }
+html[data-tema="claro"] .tipo.t-js, html[data-tema="claro"] .tipo.t-ts { color: #a16207; }
+html[data-tema="claro"] .tipo.t-img { color: #be123c; }
+html[data-tema="claro"] .tipo.t-py { color: #0369a1; }
+
+/* O acender de "o agente mexeu aqui". Âmbar porque é aviso — o cyan já é a
+   cor do que está selecionado. A etiqueta "agora" garante que o estado não
+   depende só de cor. */
+.no.mexido { background: var(--realce); color: var(--texto); }
+.no.mexido::after {
+  content: "agora"; margin-left: auto; padding-left: 8px;
+  font-family: var(--mono); font-size: 10px; color: var(--alerta);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .no.mexido { animation: acender 3.6s ease-out forwards; }
+  @keyframes acender {
+    0%   { background: color-mix(in srgb, var(--alerta) 34%, transparent); }
+    100% { background: var(--realce); }
+  }
+}
+.arvore-pe {
+  flex: 0 0 auto; padding: 8px 14px 10px; border-top: 1px solid var(--borda);
+  font-size: 11.5px; color: var(--apagado); line-height: 1.45;
+}
+.arvore-pe:empty { display: none; }
+
+/* ── centro: abas ─────────────────────────────────────────────────────── */
+.centro { grid-area: centro; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--editor-fundo); }
+.abas {
+  flex: 0 0 auto; display: flex; align-items: stretch; height: 36px;
+  background: var(--barra); border-bottom: 1px solid var(--borda);
+}
+.abas-rolo { flex: 1 1 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
+.abas-rolo::-webkit-scrollbar { display: none; }
+.aba {
+  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
+  max-width: 220px; padding: 0 8px 0 12px; cursor: pointer;
+  border: 0; border-right: 1px solid var(--borda); background: none;
+  color: var(--apagado); font: inherit; font-size: 12.5px;
+}
+.aba:hover { color: var(--texto); }
+.aba[aria-selected="true"] { background: var(--editor-fundo); color: var(--texto); }
+.aba[aria-selected="true"]::before {
+  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--azul);
+}
+.aba .nome-aba { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aba .fechar {
+  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
+  color: var(--apagado); font-size: 14px; line-height: 1;
+}
+.aba .fechar:hover { background: var(--alto); color: var(--texto); }
+/* Não salvo: a bolinha no lugar do ×, como em todo editor — e o título da
+   aba diz "não salvo" para quem não conhece a convenção. */
+.aba.sujo .fechar::before { content: "●"; font-size: 10px; color: var(--alerta); }
+.aba.sujo .fechar > span { display: none; }
+.aba.sujo:hover .fechar::before { display: none; }
+.aba.sujo:hover .fechar > span { display: inline; }
+
+.aba-previa {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin: 5px 6px; padding: 0 12px;
+  border: 1px solid var(--borda-viva); border-radius: 8px; background: none; cursor: pointer;
+  color: var(--fraco); font: inherit; font-size: 12.5px;
+}
+.aba-previa:hover { color: var(--texto); border-color: var(--azul); }
+.aba-previa[aria-pressed="true"] {
+  color: var(--azul); border-color: color-mix(in srgb, var(--azul) 55%, transparent);
+  background: color-mix(in srgb, var(--azul) 9%, transparent);
+}
+
+/* ── centro: editor + prévia lado a lado ──────────────────────────────── */
+.palco { flex: 1 1 0; display: flex; min-height: 0; }
+.area-editor { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
+.area-previa {
+  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
+  border-left: 1px solid var(--borda); background: var(--painel);
+}
+/* Janela estreita: editor e prévia não cabem juntos com a árvore e o chat.
+   A prévia passa a ocupar o palco inteiro e o botão dela vira a troca. */
+@media (max-width: 1240px) {
+  .centro.com-previa .area-editor { display: none; }
+  .area-previa { border-left: 0; }
+}
+
+.editor { flex: 1 1 0; display: flex; min-height: 0; font-family: var(--mono); font-size: var(--codigo-tam); }
+.calha {
+  flex: 0 0 auto; min-width: 48px; padding: 10px 12px 10px 10px; overflow: hidden;
+  text-align: right; color: var(--apagado); opacity: .7; line-height: var(--linha);
+  font-variant-numeric: tabular-nums; user-select: none; white-space: pre;
+  border-right: 1px solid var(--borda);
+}
+.calha .viva { color: var(--texto); opacity: 1; }
+.texto-volta { position: relative; flex: 1 1 0; min-width: 0; }
+.linha-atual {
+  position: absolute; left: 0; right: 0; top: 10px; height: var(--linha);
+  background: color-mix(in srgb, var(--azul) 6%, transparent); pointer-events: none;
+}
+#codigo {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  padding: 10px 16px; margin: 0; border: 0; outline: none; resize: none;
+  background: transparent; color: var(--texto); caret-color: var(--azul);
+  font: inherit; line-height: var(--linha); tab-size: 2; white-space: pre; overflow: auto;
+}
+#codigo::selection { background: color-mix(in srgb, var(--azul) 26%, transparent); }
+
+.faixa {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
+  font-size: 12.5px; color: var(--texto);
+  background: color-mix(in srgb, var(--alerta) 12%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--alerta) 32%, transparent);
+}
+.faixa > span { flex: 1 1 auto; }
+.faixa > span::before { content: "⚠ "; color: var(--alerta); }
+.faixa-btn {
+  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
+  border: 1px solid var(--borda-viva); background: var(--painel); color: var(--texto);
+}
+.faixa-btn:hover { border-color: var(--alerta); }
+
+.aviso-arquivo {
+  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 14px; padding: 24px; color: var(--fraco); text-align: center;
+}
+.aviso-arquivo img {
+  max-width: min(100%, 560px); max-height: 60%; border-radius: 8px; border: 1px solid var(--borda);
+  background: repeating-conic-gradient(var(--alto) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
+}
+.aviso-arquivo p { margin: 0; max-width: 46ch; line-height: 1.55; }
+
+.boas-vindas {
+  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 14px; padding: 28px; text-align: center;
+}
+.boas-vindas h1 { margin: 6px 0 0; font-size: 22px; font-weight: 620; letter-spacing: -.02em; text-wrap: balance; }
+.boas-vindas p { margin: 0; max-width: 50ch; color: var(--fraco); line-height: 1.6; }
+.atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 10px 0 0; }
+.atalhos > div { display: flex; align-items: center; gap: 8px; }
+.atalhos dt { display: flex; gap: 3px; }
+.atalhos dd { margin: 0; font-size: 12.5px; color: var(--apagado); }
+kbd {
+  font-family: var(--mono); font-size: 11px; color: var(--texto);
+  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--borda-viva);
+  border-bottom-width: 2px; background: var(--alto);
+}
+
+.previa-barra {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--borda); background: var(--barra); font-size: 12px;
+}
+.bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: 0 0 auto; }
+.previa-endereco {
+  font-family: var(--mono); color: var(--fraco); padding: 3px 10px; border-radius: 6px;
+  background: var(--painel); border: 1px solid var(--borda);
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.previa-estado { font-family: var(--mono); font-size: 11px; color: var(--apagado); white-space: nowrap; }
+.previa-estado.fresco { color: var(--azul); }
+#previa { flex: 1 1 0; width: 100%; border: 0; background: #fff; }
+.previa-vazia { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--fraco); padding: 24px; text-align: center; }
+.previa-vazia p { margin: 0; line-height: 1.8; }
+
+/* ── terminal ─────────────────────────────────────────────────────────── */
+.terminal {
+  grid-area: terminal; display: flex; flex-direction: column; min-height: 0; min-width: 0;
+  border-top: 1px solid var(--borda); background: var(--fundo);
+}
+.terminal-dica { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--apagado); opacity: .8; }
+.terminal-saida {
+  flex: 1 1 0; overflow: auto; padding: 8px 14px 12px; font-size: 12px; line-height: 1.55;
+}
+
+/* ── chat ─────────────────────────────────────────────────────────────── */
+.chat {
+  grid-area: chat; display: flex; flex-direction: column; min-height: 0; min-width: 0;
+  border-left: 1px solid var(--borda); background: var(--painel);
+}
+.chat-estado {
+  margin-left: auto; display: none; align-items: center; gap: 7px;
+  text-transform: none; letter-spacing: 0; font-family: var(--mono); font-size: 11.5px; color: var(--azul);
+}
+body.ocupado .chat-estado { display: flex; }
+.chat-rolo { flex: 1 1 0; overflow-y: auto; }
+.chat-vazio { padding: 28px 18px 8px; text-align: center; color: var(--fraco); }
+.chat-vazio p { margin: 0 0 12px; }
+.chat-vazio .sugestoes { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
+.chat-tira { padding: 4px 14px 18px; }
+.chat-tira .voce { margin: 16px 0 10px; }
+.chat-tira .voce > div { max-width: 92%; font-size: 13.5px; }
+.chat-tira .saida { font-size: 12.2px; }
+.chat-tira .aviso-erro { font-size: 13px; }
+
+.chat-caixa { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid var(--borda); }
+.chat-caixa .campo-volta { align-items: flex-end; padding: 7px 7px 7px 11px; }
+.chat-caixa .enviar { width: 30px; height: 30px; border-radius: 8px; }
+.anexo {
+  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fraco); cursor: pointer;
+  min-width: 0;
+}
+.anexo input { accent-color: var(--azul); margin: 0; }
+.anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.anexo b { font-family: var(--mono); font-weight: 500; color: var(--texto); }
+
+/* ── barra de status ──────────────────────────────────────────────────── */
+.barra {
+  grid-area: barra; display: flex; align-items: center; gap: 16px; padding: 0 12px;
+  font-family: var(--mono); font-size: 11.5px; color: var(--apagado);
+  background: var(--barra); border-top: 1px solid var(--borda); white-space: nowrap; min-width: 0;
+}
+.barra-espaco { flex: 1 1 auto; }
+.barra-item { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
+.barra-item:empty { display: none; }
+.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); }
+body.ocupado .ponto { background: var(--azul); }
+.barra-aviso { color: var(--alerta); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.barra-salvo.sujo { color: var(--alerta); }
+
+/* ── janelas menores ──────────────────────────────────────────────────── */
+@media (max-width: 1100px) {
+  body.ide { --w-arvore: 200px; --w-chat: 316px; --h-term: 160px; }
+  .topo-projeto .caminho, .terminal-dica, #esforco { display: none; }
+}
+@media (max-width: 760px) {
+  /* Abaixo disso não é mais IDE: é o chat. A janela do /rc faz isso melhor. */
+  body.ide { grid-template-columns: 0 minmax(0, 1fr) 0; }
+  .arvore, .chat { display: none; }
+}

package/app/ide.html

@@ -0,0 +1,183 @@
+<!doctype html>
+<html lang="pt-BR" data-tema="escuro">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>PrimoCode IDE</title>
+<link rel="stylesheet" href="/app.css">
+<link rel="stylesheet" href="/ide.css">
+<link rel="icon" href="/icone.svg">
+</head>
+<!--
+  A PrimoCode IDE (/ide, ou `primo ide` no terminal).
+
+    "Um app ao invés de CLI, aí fica uma IDE e uma CLI."
+
+  Mesmo servidor, mesma chave e mesmo fluxo da janela do /rc (lib/app.js);
+  o que ela tem a mais mora em lib/ide.js. As cores vêm do app.css — a IDE
+  não define paleta própria, para as duas janelas serem o mesmo produto.
+
+  Sem CDN de propósito: nada de CodeMirror nem Monaco. A regra da casa é "sem
+  dependência externa", e um editor que some quando a internet cai é o pior
+  editor para quem está começando. O editor abaixo é um <textarea> com número
+  de linha, Tab e Ctrl+S — leve, e sempre funciona.
+-->
+<body class="ide">
+
+<header class="topo">
+  <div class="topo-marca">
+    <span id="marcaTopo"></span>
+    <span class="nome">PrimoCode</span>
+    <span class="selo">IDE</span>
+  </div>
+  <div class="topo-projeto" title="pasta do projeto">
+    <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+    <b id="nomeProjeto">—</b>
+    <span id="pastaProjeto" class="caminho"></span>
+  </div>
+  <div class="topo-dir">
+    <span class="chip" id="modo"></span>
+    <span class="chip" id="esforco"></span>
+    <button class="botao-topo" id="btnTerminal" aria-pressed="true" title="Mostrar ou esconder o terminal (Ctrl+J)">
+      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m7 9 3 3-3 3M12.5 15H17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      Terminal
+    </button>
+    <a class="botao-topo" id="linkChat" href="/" title="Abrir a janela só de chat">Só o chat</a>
+  </div>
+</header>
+
+<aside class="arvore" aria-label="Arquivos do projeto">
+  <div class="painel-cabeca">
+    <span>Arquivos</span>
+    <button class="icone-btn" id="btnRecarregar" title="Recarregar a lista" aria-label="Recarregar a lista">
+      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+  </div>
+  <div class="lista" id="lista" role="tree"></div>
+  <div class="arvore-pe" id="arvorePe"></div>
+</aside>
+
+<main class="centro" id="centro">
+  <div class="abas" role="tablist" id="abas">
+    <div class="abas-rolo" id="abasRolo"></div>
+    <button class="aba-previa" id="btnPrevia" aria-pressed="false" title="Mostrar a prévia do site (atualiza sozinha)">
+      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="2.8" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
+      Prévia
+    </button>
+  </div>
+
+  <div class="palco">
+    <section class="area-editor" id="areaEditor">
+      <div class="faixa" id="faixa" hidden>
+        <span id="faixaTexto"></span>
+        <button class="faixa-btn" id="faixaRecarregar">Ver a versão do disco</button>
+        <button class="faixa-btn" id="faixaManter">Manter a minha</button>
+      </div>
+
+      <div class="editor" id="editor" hidden>
+        <div class="calha" id="calha" aria-hidden="true"></div>
+        <div class="texto-volta">
+          <div class="linha-atual" id="linhaAtual" aria-hidden="true"></div>
+          <textarea id="codigo" spellcheck="false" autocomplete="off" autocapitalize="off"
+                    wrap="off" aria-label="Editor de código"></textarea>
+        </div>
+      </div>
+
+      <div class="aviso-arquivo" id="avisoArquivo" hidden>
+        <img id="avisoImagem" alt="" hidden>
+        <p id="avisoTexto"></p>
+      </div>
+
+      <div class="boas-vindas" id="boasVindas">
+        <span id="marcaGrande"></span>
+        <h1>Seu projeto, o Primo e o site, lado a lado.</h1>
+        <p>Abra um arquivo na lista à esquerda, ou peça ao Primo no chat. Quando ele
+           mexer num arquivo, a lista acende e a prévia se atualiza sozinha.</p>
+        <dl class="atalhos">
+          <div><dt><kbd>Ctrl</kbd> <kbd>S</kbd></dt><dd>salva o arquivo</dd></div>
+          <div><dt><kbd>Tab</kbd></dt><dd>indenta a linha</dd></div>
+          <div><dt><kbd>Ctrl</kbd> <kbd>J</kbd></dt><dd>mostra o terminal</dd></div>
+        </dl>
+      </div>
+    </section>
+
+    <section class="area-previa" id="areaPrevia" hidden>
+      <div class="previa-barra">
+        <span class="bolinha" aria-hidden="true"></span>
+        <span class="previa-endereco" id="previaEndereco">index.html</span>
+        <span class="previa-estado" id="previaEstado"></span>
+        <button class="icone-btn" id="btnRecarregarPrevia" title="Recarregar a prévia" aria-label="Recarregar a prévia">
+          <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </button>
+      </div>
+      <!-- Sandbox SEM a mesma origem da IDE: ver lib/ide.js. O código da
+           prévia não pode herdar a chave e dar ordens ao agente. -->
+      <iframe id="previa" title="Prévia do site"
+              sandbox="allow-scripts allow-forms allow-modals allow-popups allow-pointer-lock"></iframe>
+      <div class="previa-vazia" id="previaVazia" hidden>
+        <p><b>Ainda não há um index.html neste projeto.</b></p>
+        <p>Peça ao Primo: <button class="sugestao" data-manda="crie uma página inicial simples em index.html">crie uma página inicial</button></p>
+      </div>
+    </section>
+  </div>
+</main>
+
+<section class="terminal" id="terminal" aria-label="Terminal">
+  <div class="painel-cabeca">
+    <span>Terminal</span>
+    <span class="terminal-dica">a mesma saída do PrimoCode no terminal</span>
+    <button class="icone-btn" id="btnFecharTerminal" title="Esconder o terminal" aria-label="Esconder o terminal">
+      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    </button>
+  </div>
+  <pre class="saida terminal-saida" id="terminalSaida"></pre>
+</section>
+
+<aside class="chat" aria-label="Chat com o Primo">
+  <div class="painel-cabeca">
+    <span>Primo</span>
+    <span class="chat-estado" id="chatEstado"><span class="pulso"></span> trabalhando</span>
+  </div>
+  <div class="chat-rolo" id="chatRolo">
+    <div class="chat-vazio" id="chatVazio">
+      <p>Peça do jeito que você falaria.</p>
+      <div class="sugestoes">
+        <button class="sugestao" data-manda="explica o que este projeto faz">explica este projeto</button>
+        <button class="sugestao" data-manda="crie um site de uma página sobre mim, em index.html">crie um site sobre mim</button>
+        <button class="sugestao" data-manda="/help">comandos</button>
+      </div>
+    </div>
+    <div class="chat-tira" id="chatTira"></div>
+  </div>
+  <form class="chat-caixa" id="forma">
+    <label class="anexo" id="anexo" hidden>
+      <input type="checkbox" id="anexar" checked>
+      <span>incluir <b id="anexoNome"></b></span>
+    </label>
+    <div class="campo-volta">
+      <span class="chevron">❯</span>
+      <textarea id="campo" rows="1" placeholder="Peça alguma coisa…" autocomplete="off" spellcheck="false"></textarea>
+      <button type="submit" id="mandar" class="enviar" title="Enviar (Enter)" aria-label="Enviar">
+        <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M12.5 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <button type="button" id="parar" class="enviar parar" title="Parar (Esc)" aria-label="Parar" hidden>
+        <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2" fill="currentColor"/></svg>
+      </button>
+    </div>
+  </form>
+</aside>
+
+<footer class="barra">
+  <span class="barra-item" id="barraAgente"><span class="ponto"></span> <span id="barraAgenteTxt">Primo pronto</span></span>
+  <span class="barra-item barra-aviso" id="barraAviso"></span>
+  <span class="barra-espaco"></span>
+  <span class="barra-item" id="barraPosicao"></span>
+  <span class="barra-item" id="barraLingua"></span>
+  <span class="barra-item" id="barraSalvo"></span>
+</footer>
+
+<script src="/primo-marca.js"></script>
+<script src="/ansi.js"></script>
+<script src="/ide.js"></script>
+</body>
+</html>