primocode 11.2.0 → 11.3.0

package/lib/tui/tela.js

@@ -27,12 +27,26 @@
 
 'use strict';
 
-const { c, visibleWidth, truncate, logo } = require('./ui.js');
+const { c, visibleWidth, truncate, logo, logoBloco, ampliar } = require('./ui.js');
 
 const RESET = '\x1b[0m';
 const FUNDO_LATERAL = '\x1b[48;5;234m';
-const LATERAL_W = 42;          // a largura da barra da direita
-const LATERAL_MIN = 110;       // abaixo disso a barra some: a conversa precisa do espaço
+/* A barra da direita. No OpenCode ela tem 42 colunas e só aparece de 120 para
+   cima. Aqui ela cabe em 100: de 100 a 119 colunas fica estreita (30, como no
+   artefato do estilo 1); de 120 para cima é a larga (42); abaixo de 100 some,
+   e a conversa fica com a tela inteira. Ctrl+X B liga e desliga, como lá. */
+const LATERAL_W = 42;
+const LATERAL_ESTREITA = 30;
+const LATERAL_MIN = 100;
+const LATERAL_LARGA = 120;
+function larguraLateral(W, oculta) {
+    if (oculta) return 0;
+    /* Cresce com o terminal: 42 colunas até 159, 48 a partir de 160 e 56 a
+       partir de 200 (a conversa fica com o resto, que é sempre a maior parte). */
+    if (W >= 200) return 56;
+    if (W >= 160) return 48;
+    return W >= LATERAL_LARGA ? LATERAL_W : W >= LATERAL_MIN ? LATERAL_ESTREITA : 0;
+}
 const RECUO = 3;               // quanto a resposta entra em relação ao painel do pedido
 
 /* ── A conversa como texto ───────────────────────────────────────────────
@@ -57,11 +71,34 @@ function acrescentar(linhas, texto) {
         if (k >= 0) linhas[linhas.length - 1] = p.slice(k + 1);
         else linhas[linhas.length - 1] += p;
     });
+    fecharAcao(linhas);
     // Guarda as últimas 5.000: uma sessão longa não pode crescer sem fim.
     if (linhas.length > 5000) linhas.splice(0, linhas.length - 5000);
     return linhas;
 }
 
+/* A FERRAMENTA QUE TERMINOU. O motor escreve a ação com "●" quando ela começa
+   e o resultado ("⎿ ...") quando ela acaba. Na tela cheia a linha da ação vira
+   "✓" (verde) quando o resultado chega, e leva o "+N −M" do resultado, como as
+   linhas de ferramenta do OpenCode. Roda a cada texto novo e só mexe numa
+   linha que ainda esteja com "●". */
+const SEM_COR = (t) => String(t).replace(/\x1b\[[0-9;]*m/g, '');
+const VERDE = '\x1b[38;5;78m';
+function fecharAcao(linhas) {
+    let n = linhas.length;
+    while (n > 0 && !/\S/.test(SEM_COR(linhas[n - 1]))) n--;     // o texto acabou em "\n": a última linha vem vazia
+    if (n < 2 || !/^\s*⎿/.test(SEM_COR(linhas[n - 1]))) return;
+    for (let i = n - 2; i >= 0 && i >= n - 40; i--) {
+        const t = SEM_COR(linhas[i]);
+        if (/^\s*✓/.test(t)) return;                       // já fechada
+        if (!/^\s*●/.test(t)) continue;
+        const m = SEM_COR(linhas[n - 1]).match(/\+(\d+)\s+[−-](\d+)/);
+        linhas[i] = linhas[i].replace(/●/, VERDE + '✓' + RESET)
+            + (m ? '  ' + c.ok('+' + m[1]) + ' ' + c.err('−' + m[2]) : '');
+        return;
+    }
+}
+
 /**
  * Quebra uma linha com cor em pedaços de no máximo `w` colunas: no ESPAÇO
  * quando dá (palavra cortada ao meio é o que faz texto de terminal parecer
@@ -107,24 +144,113 @@ function caber(s, w, fundo) {
     return fundo + String(s).split(RESET).join(RESET + fundo) + ' '.repeat(falta) + RESET;
 }
 
+/* ── Pedaços de linha com cor ────────────────────────────────────────── */
+
+/** As colunas visíveis [de, ate) de uma linha com cor, religando a cor que estava ativa. */
+function fatiar(linha, de, ate) {
+    let col = 0, ativo = '', out = '', dentro = false;
+    for (const m of String(linha).matchAll(/\x1b\[[0-9;]*m|[\s\S]/gu)) {
+        const t = m[0];
+        if (t.startsWith('\x1b[')) {
+            ativo = (t === RESET || t === '\x1b[m') ? '' : ativo + t;
+            if (dentro) out += t;
+            continue;
+        }
+        const w = visibleWidth(t);
+        if (col >= ate) break;
+        if (col >= de && col + w <= ate) { if (!dentro) { dentro = true; out += ativo; } out += t; }
+        col += w;
+    }
+    return out + (dentro && ativo ? RESET : '');
+}
+
+/** Põe `texto` (já colorido, `larg` colunas) por cima de `linha`, a partir da coluna `ini`. */
+function sobrepor(linha, ini, texto, larg, W) {
+    const antes = caber(fatiar(linha, 0, ini), ini);
+    return antes + RESET + texto + RESET + fatiar(linha, ini + larg, W);
+}
+
+/* ── A cor do terminal ────────────────────────────────────────────────────
+   O desenho usa as 256 cores (funciona em qualquer terminal). Quando o terminal
+   diz que tem cor verdadeira, cada cor vira RGB, e a da marca é exatamente a
+   #22d3ee. NO_COLOR tira toda a cor (o item escolhido vira vídeo invertido). */
+function modoDeCor(env = process.env) {
+    if (env.NO_COLOR !== undefined && env.NO_COLOR !== '') return 'none';
+    if (env.TERM === 'dumb') return 'none';
+    const ct = String(env.COLORTERM || '').toLowerCase();
+    if (ct.includes('truecolor') || ct.includes('24bit')) return 'true';
+    if (/^(iTerm\.app|vscode|WezTerm|ghostty|Hyper)$/.test(env.TERM_PROGRAM || '') || /direct|truecolor|kitty|ghostty|wezterm/.test(env.TERM || '')) return 'true';
+    return '256';
+}
+const NIVEL = [0, 95, 135, 175, 215, 255];
+function rgb256(n) {
+    if (n < 16) return [[0, 0, 0], [128, 0, 0], [0, 128, 0], [128, 128, 0], [0, 0, 128], [128, 0, 128], [0, 128, 128], [192, 192, 192],
+        [128, 128, 128], [255, 0, 0], [0, 255, 0], [255, 255, 0], [0, 0, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255]][n];
+    if (n >= 232) { const v = 8 + (n - 232) * 10; return [v, v, v]; }
+    const k = n - 16;
+    return [NIVEL[Math.floor(k / 36)], NIVEL[Math.floor(k / 6) % 6], NIVEL[k % 6]];
+}
+// As cores da marca e dos fundos de diff/permissão, exatas em cor verdadeira.
+const EXATAS = {
+    45: [34, 211, 238], 31: [8, 145, 178], 254: [226, 232, 240], 247: [148, 163, 184], 243: [100, 116, 139],
+    214: [251, 191, 36], 204: [251, 113, 133],
+    '48:22': [13, 38, 24], '48:52': [43, 18, 22], '48:58': [42, 34, 12], '48:234': [20, 24, 33], '48:235': [29, 35, 49],
+};
+function adaptarCor(texto, modo) {
+    const t = String(texto);
+    if (modo === '256' || !modo) return t;
+    if (modo === 'none') {
+        return t.replace(/\x1b\[48;5;216m/g, '\x1b[7m')
+            .replace(/\x1b\[(?:38|48);5;\d+m/g, '').replace(/\x1b\[(?:3[0-7]|4[0-7]|9[0-7]|10[0-7])m/g, '');
+    }
+    return t.replace(/\x1b\[(38|48);5;(\d+)m/g, (_, tipo, n) => {
+        const [r, g, b] = EXATAS[tipo + ':' + n] || (tipo === '38' && EXATAS[n]) || rgb256(+n);
+        return `\x1b[${tipo};2;${r};${g};${b}m`;
+    });
+}
+
+/* ── O painel colorido (pedido, permissão): barra grossa + fundo ─────────── */
+const BARRA = { brand: '\x1b[38;5;45m', warn: '\x1b[38;5;214m', err: '\x1b[38;5;204m' };
+const FUNDO = { brand: '\x1b[48;5;235m', warn: '\x1b[48;5;58m', err: '\x1b[48;5;52m' };
+function painelCor(linhas, tipo, w) {
+    const barra = BARRA[tipo] || BARRA.brand, fundo = FUNDO[tipo] || FUNDO.brand;
+    const vazia = fundo + barra + '┃' + RESET + fundo + ' '.repeat(Math.max(0, w - 1)) + RESET;
+    const corpo = linhas.map((l) => {
+        const t = truncate(l, w - 4);
+        return fundo + barra + '┃' + RESET + fundo + '  ' + String(t).split(RESET).join(RESET + fundo)
+            + ' '.repeat(Math.max(0, w - 3 - visibleWidth(t))) + RESET;
+    });
+    return [vazia, ...corpo, vazia];
+}
+
+/** Barra de progresso "████░░░░" com `w` colunas. */
+function barraDe(pct, w, cor) {
+    const cheio = Math.max(0, Math.min(w, Math.round((Math.max(0, Math.min(100, pct)) / 100) * w)));
+    return (cor || c.brand)('█'.repeat(cheio)) + c.dim('░'.repeat(w - cheio));
+}
+
 /* ── A barra da direita ──────────────────────────────────────────────── */
 
 /**
- * @param {object} lat  { titulo, secoes: [{titulo, linhas}], rodape: [] }
+ * O que a barra mostra, de cima para baixo (a ordem e o espírito da do OpenCode):
+ * título da sessão, as seções (Contexto, Plano, Tarefas, Arquivos alterados,
+ * MCP/LSP), e no pé o Primo pequeno com o estado, a pasta e a versão.
+ * @param {object} lat  { titulo, subtitulo, secoes: [{titulo, linhas}], pe: [], rodape: [] }
  * @param {number} alto quantas linhas a tela tem
+ * @param {number} larg a largura da barra (30 ou 42)
  */
-function lateral(lat, alto) {
-    const w = LATERAL_W - 4;           // 2 de margem de cada lado
+function lateral(lat, alto, larg = LATERAL_W) {
+    const w = larg - 4;                // 2 de margem de cada lado
     const corpo = [''];
-    // O topo: o logo (animado enquanto trabalha) e o estado do Primo agora.
-    if (lat.topo && lat.topo.length) corpo.push(...lat.topo, '');
     for (const l of quebrarComCor(c.bold(c.white(lat.titulo || 'Nova sessão')), w)) corpo.push(l);
+    if (lat.subtitulo) corpo.push(c.dim(truncate(lat.subtitulo, w)));
     for (const s of (lat.secoes || [])) {
+        if (!s.linhas || !s.linhas.length) continue;      // seção vazia não aparece
         corpo.push('');
         corpo.push(c.bold(c.white(s.titulo)));
         for (const l of s.linhas) corpo.push(...quebrarComCor(l, w));
     }
-    const rodape = (lat.rodape || []).slice();
+    const rodape = [...(lat.pe && lat.pe.length ? [...lat.pe, ''] : []), ...(lat.rodape || [])];
     rodape.push('');
     const linhas = [];
     for (let i = 0; i < alto; i++) {
@@ -132,13 +258,100 @@ function lateral(lat, alto) {
         let l = '';
         if (deBaixo < rodape.length) l = rodape[rodape.length - 1 - deBaixo];
         else if (i < corpo.length) l = corpo[i];
-        linhas.push(caber('  ' + caber(l, w) + '  ', LATERAL_W, FUNDO_LATERAL));
+        linhas.push(caber('  ' + caber(l, w) + '  ', larg, FUNDO_LATERAL));
     }
     return linhas;
 }
 
+/* ── Diálogos e avisos (a paleta ctrl+p, modelo, agente, sessões, tema) ──── */
+
+const SEL_FUNDO = '\x1b[48;5;45m\x1b[38;5;16m';
+const DLG_FUNDO = '\x1b[48;5;235m';
+
+/**
+ * O diálogo no meio da tela, como o `dialog-select` do OpenCode: título e "esc",
+ * a linha de busca, e a lista (agrupada por seção) com o item escolhido numa faixa.
+ * @param {object} d  { titulo, filtro, itens: [{nome, desc, tecla, secao}], sel, vazio }
+ * @returns {{linhas: string[], largura: number, cursorLinha: number, cursorColuna: number}}
+ */
+function dialogo(d, W, H) {
+    const largura = Math.max(28, Math.min(Math.max(64, Math.round(W * 0.4)), 110, W - 4));
+    const dentro = largura - 4;
+    const pad = (s) => DLG_FUNDO + String(s).split(RESET).join(RESET + DLG_FUNDO) + ' '.repeat(Math.max(0, largura - visibleWidth(s))) + RESET;
+    const linha = (s) => pad('  ' + caber(s, dentro) + '  ');
+    const itens = d.itens || [];
+    const maxLista = Math.max(3, Math.min(Math.max(14, Math.round(H * 0.4)), H - 10));
+    // Linhas da lista: cabeçalho de seção quando ela muda, depois o item.
+    const lista = [];
+    let ultima = null;
+    itens.forEach((it, idx) => {
+        if (it.secao && it.secao !== ultima) { lista.push({ cab: it.secao }); ultima = it.secao; }
+        lista.push({ it, idx });
+    });
+    const posSel = Math.max(0, lista.findIndex((x) => x.idx === d.sel));
+    const topo = Math.max(0, Math.min(posSel - Math.floor(maxLista / 2), lista.length - maxLista));
+    const vis = lista.slice(topo, topo + maxLista);
+
+    const out = [];
+    out.push(pad(''));
+    const esc = c.dim('esc');
+    out.push(pad('  ' + c.bold(c.white(d.titulo || '')) + ' '.repeat(Math.max(1, dentro - visibleWidth(d.titulo || '') - 3)) + esc + '  '));
+    out.push(pad(''));
+    const buscar = (d.filtro ? c.white(d.filtro) : c.dim('Buscar'));
+    out.push(linha(buscar));
+    const cursorLinha = out.length - 1;
+    const cursorColuna = 2 + (d.filtro ? visibleWidth(d.filtro) : 0);
+    out.push(pad(''));
+    if (!itens.length) out.push(linha(c.dim(d.vazio || 'Nada achado')));
+    for (const x of vis) {
+        if (x.cab) { out.push(linha(c.bold(c.brand(x.cab)))); continue; }
+        const it = x.it;
+        const tecla = it.tecla || '';
+        const nomeW = Math.max(8, dentro - visibleWidth(tecla) - 2);
+        const esq = it.nome + (it.desc ? '  ' + it.desc : '');
+        if (x.idx === d.sel) {
+            const txt = ' ' + caber(truncate(it.nome + (it.desc ? '  ' + stripCor(it.desc) : ''), nomeW - 1), nomeW) + tecla + ' ';
+            out.push(pad('  ' + SEL_FUNDO + caber(txt, dentro) + RESET + DLG_FUNDO + '  '));
+        } else {
+            const corpo = c.white(it.nome) + (it.desc ? '  ' + c.dim(stripCor(it.desc)) : '');
+            const tx = truncate(corpo, nomeW);
+            out.push(linha(tx + ' '.repeat(Math.max(1, dentro - visibleWidth(tx) - visibleWidth(tecla))) + c.dim(tecla)));
+        }
+        void esq;
+    }
+    if (lista.length > maxLista) out.push(linha(c.dim(`↑↓ para ver mais (${itens.length} itens)`)));
+    out.push(pad(''));
+    return { linhas: out, largura, cursorLinha, cursorColuna };
+}
+const stripCor = SEM_COR;
+
+/** O aviso que aparece uns segundos no canto de cima (toast do OpenCode). */
+function toast(t, W) {
+    const tipo = t.tipo === 'erro' ? 'err' : t.tipo === 'aviso' ? 'warn' : 'brand';
+    const larg = Math.max(20, Math.min(Math.max(40, Math.round(W * 0.25)), 64, W - 4));
+    const texto = quebrarComCor(String(t.texto || ''), larg - 4).slice(0, 4);
+    const linhas = painelCor(texto, tipo, larg);
+    return { linhas, largura: larg };
+}
+
 /* ── O quadro inteiro ─────────────────────────────────────────────────── */
 
+/** Os comandos que a home lista, com o atalho de cada um (o líder é o ctrl+x, como no OpenCode). */
+const COMANDOS_HOME = [
+    ['/clear', 'nova conversa', 'ctrl+x n'],
+    ['/projects', 'abrir um projeto', 'ctrl+x p'],
+    ['/estudio', 'criar vídeo, slides ou motion', 'ctrl+x s'],
+    ['/agentes', 'ver quem está disponível', 'ctrl+x a'],
+    ['/mode', 'trocar o modo ou o esforço', 'ctrl+x m'],
+];
+
+function linhaDeComando(cmd, desc, tecla, largura) {
+    const cw = 12;
+    const meio = largura - cw - visibleWidth(tecla) - 2;
+    return c.brand(cmd.padEnd(cw)) + c.white(truncate(desc, Math.max(4, meio))).padEnd(0)
+        + ' '.repeat(Math.max(1, meio - visibleWidth(truncate(desc, Math.max(4, meio))))) + c.dim(tecla);
+}
+
 /**
  * @param {object} e
  * @param {number} e.colunas, e.linhas   o tamanho do terminal
@@ -147,48 +360,96 @@ function lateral(lat, alto) {
  * @param {boolean} e.home               ainda não houve pedido: logo no meio
  * @param {(colunas:number, centro:boolean)=>{linhas:string[], cursorLinha:number, cursorColuna:number}} e.caixa
  * @param {object} e.lateral             o conteúdo da barra da direita
- * @param {string} e.versao, e.pasta     o rodapé da home
+ * @param {boolean} e.lateralOculta      a pessoa desligou a barra (ctrl+x b)
+ * @param {string} e.versao, e.pasta, e.plano   o rodapé da home
+ * @param {object} e.dialogo, e.toast    o diálogo aberto e o aviso do canto
  * @returns {{linhas: string[], cursor: {linha:number, coluna:number}, rolagemMax: number}}
  */
 function quadro(e) {
     const W = Math.max(30, e.colunas || 80);
     const H = Math.max(10, e.linhas || 24);
+    const q = e.home ? quadroHome(e, W, H) : quadroSessao(e, W, H);
+    return aplicarSobreposicoes(q, e, W, H);
+}
 
-    if (e.home) {
-        const caixa = e.caixa(W, true);
-        const lg = W >= 60 && e.logo ? e.logo : W >= 50 ? logo() : [c.bold(c.white('primocode'))];
-        /* O painel fica PARADO no lugar dele: o menu, quando abre, cobre o
-           que está em cima (o logo), em vez de empurrar tudo para cima. */
-        const menu = Math.max(0, caixa.linhas.findIndex((l) => l.includes('┃')) - (/┃/.test(caixa.linhas[0]) ? 0 : 0));
-        const bloco = lg.length + 2 + caixa.linhas.length - menu;
-        const topo = Math.max(0, Math.floor((H - bloco) / 2) - 1);
-        const linhas = [];
-        for (let i = 0; i < topo; i++) linhas.push('');
-        for (const l of lg) linhas.push(' '.repeat(Math.max(0, Math.floor((W - visibleWidth(l)) / 2))) + l);
-        linhas.push('', '');
-        const inicioCaixa = Math.max(0, linhas.length - menu);
-        linhas.length = inicioCaixa;
-        linhas.push(...caixa.linhas);
-        while (linhas.length < H - 1) linhas.push('');
-        linhas.length = H - 1;
-        const esq = ' ' + c.dim(e.pasta || '');
-        // Folga à direita: terminais como o Orca põem um botão flutuante no
-        // canto de baixo, e ele cobria a versão ("10.").
-        const dir = c.dim(e.versao || '') + '      ';
-        linhas.push(esq + ' '.repeat(Math.max(1, W - visibleWidth(esq) - visibleWidth(dir))) + dir);
-        return {
-            linhas: linhas.map((l) => caber(l, W)),
-            cursor: { linha: inicioCaixa + caixa.cursorLinha, coluna: caixa.cursorColuna },
-            rolagemMax: 0,
-        };
+function aplicarSobreposicoes(q, e, W, H) {
+    let linhas = q.linhas.slice();
+    if (e.dialogo) {
+        // O fundo escurece (o "scrim" do OpenCode): sem cor, num cinza baixo, para o diálogo saltar.
+        linhas = linhas.map((l) => '\x1b[38;5;238m' + SEM_COR(l) + RESET);
+        const d = dialogo(e.dialogo, W, H);
+        const topo = Math.max(1, Math.min(Math.floor(H / 5), H - d.linhas.length - 1));
+        const ini = Math.floor((W - d.largura) / 2);
+        d.linhas.forEach((l, i) => { if (topo + i < H) linhas[topo + i] = sobrepor(linhas[topo + i], ini, l, d.largura, W); });
+        q = { ...q, cursor: { linha: topo + d.cursorLinha, coluna: ini + d.cursorColuna } };
     }
+    if (e.toast && e.toast.texto) {
+        const t = toast(e.toast, W);
+        const ini = W - t.largura - 2;
+        t.linhas.forEach((l, i) => { if (1 + i < H) linhas[1 + i] = sobrepor(linhas[1 + i], ini, l, t.largura, W); });
+    }
+    return { ...q, linhas };
+}
+
+function quadroHome(e, W, H) {
+    const caixa = e.caixa(W, true);
+    /* Terminal grande (160x45 para cima): o Primo e o logo em 2x, pixel a pixel. */
+    const grande = W >= 160 && H >= 45;
+    const dobrar = (a) => (grande ? ampliar(a) : a);
+    const art = dobrar(e.logo && e.logo.length ? e.logo : (W >= 50 ? logoBloco() : [c.bold(c.white('primocode'))]));
+    /* O painel fica PARADO no lugar dele: o menu, quando abre, cobre o que está
+       em cima (o logo), em vez de empurrar tudo para cima. */
+    const menu = Math.max(0, caixa.linhas.findIndex((l) => l.includes('┃')));
+    const nucleo = caixa.linhas.slice(menu);
+    const dica = ' '.repeat(0) + c.white('tab') + ' ' + c.dim('troca o modo') + '    ' + c.white('ctrl+p') + ' ' + c.dim('comandos');
+    const cmds = e.comandosHome || COMANDOS_HOME;
+    // A lista acompanha a caixa (que cresce com o terminal): mesma borda, só que mais estreita.
+    const larguraBox = Math.max(0, ...caixa.linhas.filter((l) => l.includes('┃')).map((l) => visibleWidth(l) - (SEM_COR(l).match(/^ */)[0].length)));
+    const larguraCmd = Math.min(W >= 160 ? Math.max(52, larguraBox - 8) : 52, W - 6);
+    // Quanto cabe: primeiro some a lista de comandos, depois o Primo.
+    const montar = (comLista, comPrimo) => {
+        const arte = comPrimo ? art : dobrar(e.logoSimples || logoBloco());
+        const topo = [...arte, '', c.dim('v' + String(e.versao || '').replace(/^v/, '')), ''];
+        const base = [dica];
+        if (comLista) base.push('', ...cmds.map(([a, b, k]) => ' '.repeat(Math.floor((W - larguraCmd) / 2)) + linhaDeComando(a, b, k, larguraCmd)));
+        return { topo, base };
+    };
+    let m = montar(true, true);
+    const altoDe = (x) => x.topo.length + nucleo.length + 1 + x.base.length;
+    if (altoDe(m) > H - 2) m = montar(false, true);
+    if (altoDe(m) > H - 2) m = montar(false, false);
+    const total = altoDe(m);
+    const inicio = Math.max(0, Math.floor((H - 1 - total) / 2));
+    const linhas = new Array(H - 1).fill('');
+    const centrar = (l) => ' '.repeat(Math.max(0, Math.floor((W - visibleWidth(l)) / 2))) + l;
+    m.topo.forEach((l, i) => { if (inicio + i < H - 1) linhas[inicio + i] = centrar(l); });
+    const linhaCaixa = inicio + m.topo.length;
+    // o menu aberto sobe por cima do logo (as linhas antes do painel)
+    caixa.linhas.slice(0, menu).forEach((l, i) => { const k = linhaCaixa - menu + i; if (k >= 0 && k < H - 1) linhas[k] = l; });
+    nucleo.forEach((l, i) => { if (linhaCaixa + i < H - 1) linhas[linhaCaixa + i] = l; });
+    const larguraBase = linhaCaixa + nucleo.length + 1;
+    m.base.forEach((l, i) => {
+        if (larguraBase + i < H - 1) linhas[larguraBase + i] = l.startsWith(' ') ? l : centrar(l);
+    });
+    const esq = ' ' + c.dim(e.pasta || '');
+    // Folga à direita: terminais como o Orca põem um botão flutuante no canto de baixo.
+    const dir = c.dim((e.plano ? e.plano + ' · ' : '') + (e.versao || '')) + '      ';
+    linhas.push(esq + ' '.repeat(Math.max(1, W - visibleWidth(esq) - visibleWidth(dir))) + dir);
+    return {
+        linhas: linhas.map((l) => caber(l, W)),
+        cursor: { linha: linhaCaixa + caixa.cursorLinha - menu, coluna: caixa.cursorColuna },
+        rolagemMax: 0,
+    };
+}
 
+function quadroSessao(e, W, H) {
     /* O PAINEL de um comando que desenha a própria tela (o slider do
        /effort, o marketplace): fica no pé da conversa, logo acima da caixa,
        por cima do que estiver ali — a tela cheia nunca sai do ar. */
     const painel = (e.painel ? String(e.painel).split('\n') : []);
-    const comLateral = W >= LATERAL_MIN;
-    const mainW = comLateral ? W - LATERAL_W : W;
+    const lw = larguraLateral(W, e.lateralOculta);
+    const comLateral = lw > 0;
+    const mainW = comLateral ? W - lw : W;
     /* Uma coluna de margem dos dois lados, para a conversa e para a caixa: o
        pedido mandado (um painel) e a caixa de digitar ficam na MESMA borda. */
     const caixa0 = e.caixa(mainW - 1, false);
@@ -197,13 +458,12 @@ function quadro(e) {
 
     /* A conversa, quebrada na largura da coluna. Os PAINÉIS (o pedido que se
        mandou) ficam na borda da caixa; o resto — a resposta, as ações, o
-       fecho "▣" — entra RECUADO, como no OpenCode. Sem o recuo, tudo saía
-       colado na borda e um bloco não se separava do outro. */
+       fecho "▣" — entra RECUADO, como no OpenCode. */
     const visiveis = [];
     for (const l of (e.conversa || [])) {
-        const painel = /^(\x1b\[[0-9;]*m)*┃/.test(l);
-        const margem = painel ? ' ' : ' '.repeat(RECUO + 1);
-        for (const p of quebrarComCor(l, painel ? mainW - 2 : mainW - 2 - RECUO)) visiveis.push(margem + p);
+        const ehPainel = /^(\x1b\[[0-9;]*m)*┃/.test(l);
+        const margem = ehPainel ? ' ' : ' '.repeat(RECUO + 1);
+        for (const p of quebrarComCor(l, ehPainel ? mainW - 2 : mainW - 2 - RECUO)) visiveis.push(margem + p);
     }
     while (visiveis.length && !temTexto(visiveis[visiveis.length - 1])) visiveis.pop();
     if (visiveis.length) visiveis.push('');     // um respiro entre a conversa e a caixa
@@ -225,7 +485,7 @@ function quadro(e) {
     }
 
     const esquerda = [...conversa, ...caixa.linhas].map((l) => caber(l, mainW));
-    const direita = comLateral ? lateral(e.lateral || {}, H) : null;
+    const direita = comLateral ? lateral(e.lateral || {}, H, lw) : null;
     const linhas = esquerda.map((l, i) => (direita ? l + direita[i] : l));
     return {
         linhas,
@@ -237,9 +497,12 @@ function quadro(e) {
 function temTexto(l) { return visibleWidth(l) > 0 && /\S/.test(l.replace(/\x1b\[[0-9;]*m/g, '')); }
 
 /** A largura que o texto da conversa tem, numa tela de `colunas`. */
-function larguraDaConversa(colunas) {
+function larguraDaConversa(colunas, oculta) {
     const W = Math.max(30, colunas || 80);
-    return (W >= LATERAL_MIN ? W - LATERAL_W : W) - 2 - RECUO;
+    return (W - larguraLateral(W, oculta)) - 2 - RECUO;
 }
 
-module.exports = { RECUO, larguraDaConversa, quadro, acrescentar, quebrarComCor, lateral, caber, LATERAL_W, LATERAL_MIN };
+module.exports = {
+    RECUO, larguraDaConversa, quadro, acrescentar, quebrarComCor, lateral, caber, LATERAL_W, LATERAL_ESTREITA, LATERAL_MIN, LATERAL_LARGA,
+    larguraLateral, dialogo, toast, painelCor, barraDe, fatiar, sobrepor, modoDeCor, adaptarCor, COMANDOS_HOME, fecharAcao,
+};

package/lib/tui/ui.js

@@ -36,6 +36,20 @@ const PALETTE = {
     reset:      '\x1b[0m',
 };
 
+/* NO_COLOR (https://no-color.org): sem nenhuma cor. Negrito e reset ficam. */
+if (process.env.NO_COLOR !== undefined && process.env.NO_COLOR !== '') {
+    for (const k of Object.keys(PALETTE)) if (k !== 'bold' && k !== 'reset') PALETTE[k] = '';
+}
+
+/* O que a barra da direita da tela cheia mostra e que vem do trabalho do agente:
+   as tarefas (write_todos) e os arquivos alterados, com +N −M. O act.js preenche. */
+const estadoSessao = { todos: [], arquivos: new Map() };
+function registrarArquivo(caminho, mais, menos) {
+    if (!caminho) return;
+    const a = estadoSessao.arquivos.get(caminho) || { mais: 0, menos: 0 };
+    estadoSessao.arquivos.set(caminho, { mais: a.mais + mais, menos: a.menos + menos });
+}
+
 const c = {
     ...PALETTE,
     brand: (s) => `${PALETTE.brand}${s}${PALETTE.reset}`,
@@ -351,6 +365,66 @@ function letreiro(palavra) {
     return out;
 }
 
+
+/* ── O logo em letras de bloco de 3 linhas (a home do estilo 2) ─────────
+   "primo" no tom do texto e "code" na cor da marca, como no artefato
+   .refazer/cli-alvo.html. Desenho próprio, não de fonte nenhuma. */
+const BLOCOS = {
+    p: ['█▀▀█', '█▄▄█', '█   '], r: ['█▀▀▀', '█   ', '▀   '], i: ['▀█▀', ' █ ', '▀▀▀'],
+    m: ['█▀▄▀█', '█ ▀ █', '▀   ▀'], o: ['█▀▀█', '█  █', '▀▀▀▀'], c: ['█▀▀▀', '█   ', '▀▀▀▀'],
+    d: ['█▀▀▄', '█  █', '▀▀▀ '], e: ['█▀▀▀', '█▀▀ ', '▀▀▀▀'],
+};
+const palavraBloco = (w) => [0, 1, 2].map((j) => [...w].map((ch) => BLOCOS[ch][j]).join(' '));
+function logoBloco() {
+    const a = palavraBloco('primo'), b = palavraBloco('code');
+    return a.map((l, i) => `\x1b[38;5;254m${l}${PALETTE.reset}  ${PALETTE.brand}${b[i]}${PALETTE.reset}`);
+}
+
+/* Escala 2x, pixel a pixel: cada célula vira 2x2 células e cada quarto de
+   célula (os 4 pixels que ▀▄▌▐▛▜▙▟ desenham) vira UMA célula cheia, na cor
+   da célula de origem. É o mesmo desenho, maior, sem redesenhar nada. */
+const QUARTOS_BITS = { '▀': 0b1100, '▄': 0b0011, '█': 0b1111, '▌': 0b1010, '▐': 0b0101, '▘': 0b1000, '▝': 0b0100, '▖': 0b0010, '▗': 0b0001,
+    '▛': 0b1110, '▜': 0b1101, '▙': 0b1011, '▟': 0b0111, '▚': 0b1001, '▞': 0b0110 };
+function ampliar(linhas) {
+    const out = [];
+    for (const linha of linhas) {
+        let cor = '';
+        const cel = [];
+        for (const m of String(linha).matchAll(/(\x1b\[[0-9;]*m)|([\s\S])/gu)) {
+            if (m[1]) { cor = m[1] === '\x1b[0m' ? '' : m[1]; continue; }
+            cel.push({ ch: m[2], cor });
+        }
+        const topo = [], base = [];
+        for (const { ch, cor: k } of cel) {
+            const q = ch === ' ' ? 0 : (QUARTOS_BITS[ch] !== undefined ? QUARTOS_BITS[ch] : 0b1111);
+            const px = (b) => (q & b ? k + '█' + (k ? '\x1b[0m' : '') : ' ');
+            topo.push(px(8) + px(4)); base.push(px(2) + px(1));
+        }
+        out.push(topo.join(''), base.join(''));
+    }
+    return out;
+}
+
+/* TEMAS: o escuro é o padrão, com a cor da marca (#22d3ee). Os outros só
+   trocam a cor de destaque: `c.brand` lê o PALETTE na hora de pintar. */
+const TEMAS = {
+    marca:   { nome: 'Marca (ciano)',   brand: 45,  brandDim: 31 },
+    ambar:   { nome: 'Âmbar',           brand: 214, brandDim: 172 },
+    violeta: { nome: 'Violeta',         brand: 141, brandDim: 98 },
+    verde:   { nome: 'Verde',           brand: 78,  brandDim: 35 },
+    rosa:    { nome: 'Rosa',            brand: 211, brandDim: 168 },
+};
+let temaAtual = 'marca';
+function definirTema(id) {
+    const t = TEMAS[id];
+    if (!t) return false;
+    PALETTE.brand = `\x1b[38;5;${t.brand}m`; PALETTE.brandDim = `\x1b[38;5;${t.brandDim}m`;
+    PALETTE.ok = PALETTE.brand; PALETTE.cyan = PALETTE.brand;
+    temaAtual = id;
+    return true;
+}
+const temaDoMomento = () => temaAtual;
+
 /** O logo: "primo" apagado e "code" aceso, lado a lado. */
 function logo() {
     const a = letreiro('primo'), b = letreiro('code');
@@ -363,7 +437,7 @@ const LOGO_W = visibleWidth(logo()[0]);
    home ele cresce 2×: cada quarto de bloco (▘ ▝ ▖ ▗) vira um bloco cheio, e
    cada bloco cheio vira 2×2. Ficam 6 linhas × 18 colunas, com a cor de cada
    pedaço preservada — o mesmo desenho, não um desenho novo. */
-const QUARTOS = {
+const QUARTOS_AMP = {
     ' ': [0, 0, 0, 0], '█': [1, 1, 1, 1], '▀': [1, 1, 0, 0], '▄': [0, 0, 1, 1],
     '▌': [1, 0, 1, 0], '▐': [0, 1, 0, 1], '▘': [1, 0, 0, 0], '▝': [0, 1, 0, 0],
     '▖': [0, 0, 1, 0], '▗': [0, 0, 0, 1], '▛': [1, 1, 1, 0], '▜': [1, 1, 0, 1],
@@ -381,7 +455,7 @@ function mascoteGrande(style) {
         }
         const cima = [], baixo = [];
         for (const [ch, cr] of cels) {
-            const q = QUARTOS[ch] || (ch === ' ' ? QUARTOS[' '] : QUARTOS['█']);
+            const q = QUARTOS_AMP[ch] || (ch === ' ' ? QUARTOS_AMP[' '] : QUARTOS_AMP['█']);
             const bloco = (b) => (b ? `${cr}█${PALETTE.reset}` : ' ');
             cima.push(bloco(q[0]) + bloco(q[1]));
             baixo.push(bloco(q[2]) + bloco(q[3]));
@@ -760,4 +834,4 @@ function friendlyError(raw) {
 
 module.exports = {
     extraDoSpinner,
-    titulo, agora, c, logo, logoComMascote, mascoteGrande, logoAnimado, letreiro, convite, EXEMPLOS, mascot, MASCOTES, resolverMascote, mascoteInfo, galeriaMascotes, reacao, welcomeBox, Spinner, PENSANDO, actionHeader, friendlyError, visibleWidth, stripAnsi, truncate, padRight };
+    estadoSessao, registrarArquivo, logoBloco, ampliar, TEMAS, definirTema, temaDoMomento, titulo, agora, c, logo, logoComMascote, mascoteGrande, logoAnimado, letreiro, convite, EXEMPLOS, mascot, MASCOTES, resolverMascote, mascoteInfo, galeriaMascotes, reacao, welcomeBox, Spinner, PENSANDO, actionHeader, friendlyError, visibleWidth, stripAnsi, truncate, padRight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Requer conta Conecta Primo AI (Premium ou Super). 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": {
@@ -11,7 +11,7 @@
     "postinstall": "node lib/preparar.js || true",
     "test:server": "cd server && npm test",
     "test": "node scripts/testes.js",
-    "test:app": "node test/app-fluxo.test.mjs && node test/app-primeira.test.mjs && node test/app-entrar.test.mjs",
+    "test:app": "node test/app-fluxo.test.mjs && node test/app-primeira.test.mjs && node test/app-entrar.test.mjs && node test/app-tela-estudio.test.mjs && node test/app-celular-telas.test.mjs",
     "app:build": "cd app && npm run dist",
     "app:dev": "cd app && npm start",
     "mobile:build": "cd mobile && npm run build"
@@ -55,5 +55,9 @@
   ],
   "primocode": {
     "servidorMinimo": "8.12.0"
+  },
+  "devDependencies": {
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0"
   }
 }

package/voz/primo_voz/transcrever.py

@@ -200,6 +200,18 @@ def main() -> int:
             return 1
         print(json.dumps({"ok": True, "palavras": ws}, ensure_ascii=False))
         return 0
+    if acao == "arquivo":
+        # `... arquivo <wav> [idioma]`: a fala de um arquivo vira texto (o app desktop grava no microfone e manda para cá).
+        if not disponivel():
+            print(json.dumps({"ok": False, "error": "o faster-whisper não está instalado"}))
+            return 1
+        try:
+            texto = transcrever(Path(sys.argv[2]), sys.argv[3] if len(sys.argv) > 3 else "pt")
+        except Exception as e:
+            print(json.dumps({"ok": False, "error": str(e)}))
+            return 1
+        print(json.dumps({"ok": True, "texto": texto}, ensure_ascii=False))
+        return 0
     if acao != "baixar":
         print(json.dumps({"ok": False, "error": f"ação desconhecida: {acao}"}))
         return 2