primocode 8.25.0 → 8.27.0

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.27.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 && node test/elementos.test.js"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -27,6 +27,7 @@
   "files": [
     "bin/",
     "lib/",
+    "app/",
     "studio/",
     "README.md"
   ]

package/studio/ferramentas/00-protocolo.md

@@ -57,7 +57,8 @@ Em dúvida entre duas, escolha a que o usuário vai **mostrar para outra pessoa*
 - **Ritmo.** Em decks longos, um `layout: "secao"` a cada 3–5 cenas.
 - **Escolha o tema pelo assunto:** `meia-noite` produto e tecnologia · `claro`
   corporativo e projetor · `papel` editorial e longo · `neon` técnico e dev ·
-  `brasa` energia e urgência · `floresta` sustentabilidade e saúde.
+  `brasa` energia e urgência · `floresta` sustentabilidade e saúde ·
+  `ambar` curso, aula e conteúdo longo · `grafite` técnico sóbrio e relatório.
 - **Notas do apresentador** (`notas` na cena) em quem vai falar por cima.
 - **Nunca invente dado com cara de real.** Sem fonte, escreva a ordem de grandeza
   ou deixe o campo como pergunta explícita ao usuário.

package/studio/ferramentas/01-modelos.md

@@ -134,9 +134,10 @@ Sem declarar nada, os elementos já entram em cascata na ordem em que aparecem.
 
 ### Temas
 
-`meia-noite` `claro` `papel` `neon` `brasa` `floresta` `retro` `oceano` `doce` `mono`
+`meia-noite` `claro` `papel` `neon` `brasa` `floresta` `retro` `oceano` `doce`
+`mono` `ambar` `grafite`
 
-São esses dez, e só. Nome fora da lista é recusado: escuro é `meia-noite`, não
+São esses doze, e só. Nome fora da lista é recusado: escuro é `meia-noite`, não
 `noite`. Vale no documento ou por cena.
 
 ### Identidade — o que separa um vídeo genérico de um da marca

package/studio/ferramentas/corte.md

@@ -89,6 +89,8 @@ cena. Se o assunto não empurrar para nenhuma, escolha a que você NÃO usou da
 | explicação, tutorial, passo a passo | `papel` ou `claro` | `lofi` | **Aula** |
 | conquista, agradecimento, celebração | `doce` ou `neon` | `alegre` | **Brinde** |
 | memória, história, retrospectiva | `retro` ou `mono` | `lofi` | **Linha** |
+| curso, aula, treinamento, método | `ambar` | `lofi` | **Aula** |
+| relatório, número, análise técnica | `grafite` | `ambiente` | **Manchete** |
 
 ### As seis estruturas
 
@@ -178,6 +180,85 @@ livre de direitos, ou uma das trilhas geradas acima.
 
 ---
 
+## Elementos que dão cara de produção
+
+Estes seis existem porque um vídeo genérico é feito só de título + texto. São
+baratos de escrever e mudam completamente o resultado.
+
+### `selo` — a pílula de estado
+
+```json
+{ "tipo": "selo", "texto": "Módulo 2 de 5" }
+{ "tipo": "selo", "texto": "Resultado 4", "icone": "★", "estilo": "vivo" }
+```
+
+`estilo`: sem nada (contorno), `"vivo"` (preenchido) ou `"solto"` (só o texto
+em versalete). Vai sozinho para cima do título.
+
+### `progresso` — onde estamos no caminho
+
+```json
+{ "tipo": "progresso", "atual": 4, "total": 15 }
+```
+
+Mostra "4/15" e os pontinhos. Use em série de cenas: diz ao espectador que
+existe um percurso, e isso segura ele até o fim. `"numero": false` deixa só
+os pontos.
+
+### `avatar` — a pessoa
+
+```json
+{ "tipo": "avatar", "src": "/midia/foto.jpg", "nome": "Cleiton Paris", "tamanho": 280 }
+```
+
+Círculo com anel aceso. Sem `src`, mostra as iniciais do `nome` — melhor que
+um buraco cinza. Vai para cima do nome sozinho.
+
+### `dispositivo` — celular, notebook ou navegador com conteúdo dentro
+
+```json
+{ "tipo": "dispositivo", "forma": "celular", "dentro": [ ...elementos... ] }
+```
+
+`forma`: `celular` | `notebook` | `tablet` | `navegador` (este aceita
+`"endereco": "primocode.dev"`). `dentro` é uma lista de elementos comuns — o
+que couber. Nos layouts `imagem-direita` / `imagem-esquerda` o aparelho vai
+para o lado sozinho, com o texto do outro. É o enquadramento mais forte que
+existe aqui: use quando estiver mostrando uma tela.
+
+### `conversa` — balões de pergunta e resposta
+
+```json
+{ "tipo": "conversa", "itens": [
+    { "de": "eu",  "texto": "Como acelero meu workflow?" },
+    { "de": "ela", "texto": "Peça o storyboard em seis quadros." } ] }
+```
+
+Entram um de cada vez, como diálogo. `de: "eu"` à esquerda; qualquer outra
+coisa à direita, com a cor do tema. Combina com `dispositivo` — a conversa
+dentro do celular é a cena mais usada em vídeo de IA.
+
+### `passos` e `opcoes`
+
+```json
+{ "tipo": "passos", "atual": 2, "itens": ["Passo 1|roteiro", "Passo 2|storyboard", "Passo 3|corte"] }
+{ "tipo": "opcoes", "pergunta": "O que garante o look?", "certa": 1,
+  "itens": ["LUT uniforme", "Saturação aleatória", "Espaços de cor diferentes"] }
+```
+
+`passos` acende a etapa `atual` e apaga as outras — mude o `atual` a cada
+cena e a série ganha movimento sem esforço. `opcoes` marca a alternativa
+`certa` com ✓ (não escreva o ✓ no texto: ele vem sozinho). Alternativa faz o
+espectador pensar antes da resposta, e pensar é o que segura alguém no vídeo.
+
+### Vidro
+
+`"estilo": "vidro"` em `cartoes` dá painel translúcido com bisel de luz em
+cima e sombra embaixo — o "liquid glass". Funciona em tema escuro; em tema
+claro use os cartões normais.
+
+---
+
 ## Editar o vídeo do usuário (`clipe`)
 
 Quando a pessoa manda uma gravação dela — o rosto falando, uma tela gravada,

package/studio/server.py

@@ -784,7 +784,7 @@ def gravar_analise(ident, dados):
 # "Ele não alterna entre os temas, usa um tema só pra todos os vídeos, e o
 # vídeo sempre tem a mesma estrutura. Fica tudo genérico."
 #
-# O estúdio tem dez temas, onze fundos, oito transições e seis trilhas. O
+# O estúdio tem doze temas, onze fundos, oito transições e seis trilhas. O
 # agente usa uma fatia estreita e repete — porque a spec tem UM exemplo
 # completo e modelo ancora em exemplo. Conselho escrito na spec ajuda pouco
 # quando ela nem sempre é relida.
@@ -922,7 +922,7 @@ def _texto_do_doc(doc):
 # Os temas que o render.css de fato define. Fora desta lista não existe cor
 # nenhuma — foi o que aconteceu com "noite", que passou como se fosse tema.
 TEMAS_VALIDOS = {"claro", "meia-noite", "papel", "neon", "brasa", "floresta",
-                 "retro", "oceano", "doce", "mono"}
+                 "retro", "oceano", "doce", "mono", "ambar", "grafite"}
 
 
 def _tema_invalido(tema, onde=""):
@@ -989,7 +989,13 @@ def validar_doc(modelo, doc):
     # preto": documento válido na forma, invisível na tela.
     TIPOS_VALIDOS = {"texto", "lista", "cartoes", "numeros", "tabela", "codigo",
                      "citacao", "forma", "imagem", "icone", "grafico", "no", "conector",
-                     "objeto3d", "clipe"}
+                     "objeto3d", "clipe",
+                     "selo", "progresso", "avatar", "dispositivo", "conversa",
+                     "passos", "opcoes"}
+    # Os sete últimos são o vocabulário do vídeo de referência. O comentário
+    # mora aqui fora porque test/vocabulario.test.js lê esta lista com
+    # expressão regular, comparando com a do render.js — palavra de comentário
+    # dentro das chaves entrava na lista como se fosse um tipo válido.
 
     # Tema inventado tinha o mesmo destino silencioso do tipo inventado: o CSS
     # não casa com [data-tema="noite"], nenhuma cor é definida e a peça sai

package/studio/web/js/ferramentas.js

@@ -2,10 +2,10 @@
    ferramentas.js — o que cada ferramenta oferece na interface.
    ========================================================================== */
 
-// Os dez que o render.css define. A lista tinha seis: quatro temas existiam
+// Os doze que o render.css define. A lista tinha seis: quatro temas existiam
 // no CSS, a IA podia usá-los, e o editor não os oferecia a ninguém.
 var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta",
-  "retro", "oceano", "doce", "mono"];
+  "retro", "oceano", "doce", "mono", "ambar", "grafite"];
 
 var PALETA = ["#ff5a36", "#ffb03a", "#f4e04d", "#2fbf7f", "#1f8fe0", "#8b5cf6",
               "#f472b6", "#ffffff", "#9aa4b2", "#111318"];