primocode 9.8.0-beta.6 → 9.8.0-beta.8

package/app/ide.css

@@ -1,345 +0,0 @@
-/* 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

@@ -1,183 +0,0 @@
-<!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>