feat(web): migra Conversa e Reacoes para o painel novo

- Conversa: chat empurrado por SSE, indicador de "pensando", gesto da
  resposta com repetir, voz com aviso claro quando o contexto nao e seguro
  e leitura em voz alta so de respostas novas
- Memoria unificada: lembrancas da conversa + rotina/preferencias em abas;
  apagar tudo com confirmacao inline (sem confirm nativo)
- Reacoes: biblioteca com miniaturas estaticas (sem iframe por cartao),
  busca, mostrar no celular, feedback, editar em <dialog>, duplicar,
  ativar e excluir com Desfazer no toast; criar com IA; diario; grade de
  gestos com estrela para favoritos; uma unica previa lateral
- treinamento recarrega por evento SSE ao terminar, sem polling
- corrige icones encolhidos em botoes .pequeno.icone

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tests/test_painel_web_browser.py

@@ -17,7 +17,10 @@ spec = importlib.util.spec_from_file_location('kiosk_web', ROOT / 'kiosk-server.
 kiosk = importlib.util.module_from_spec(spec)
 spec.loader.exec_module(kiosk)
 from braco import Braco
+from cerebro import Cerebro
+from conversa import Conversa
 from servos import ControleServos
+from treinamento import Treinamento
 
 TOKEN = 'token-de-teste-123'
 
@@ -38,6 +41,10 @@ def main(capturas=None):
         server.controle = kiosk.ControlePC(tmp / 'app.json')
         server.servos = ControleServos(tmp / 'servos.json', HW())
         server.braco = Braco(tmp / 'braco.json', server.servos)
+        server.cerebro = Cerebro(tmp / 'ia.json', server.controle, kiosk.enfileirar)
+        server.conversa = Conversa(tmp / 'memoria.db', server.cerebro)
+        server.treinamento = Treinamento(tmp / 'treinamento.db', iniciar=False)
+        server.conversa.treinamento = server.treinamento
         kiosk.ligar_eventos(server)
         thread = threading.Thread(target=server.serve_forever, daemon=True)
         thread.start()
@@ -109,6 +116,40 @@ def testar(base, server, capturas):
             page.get_by_label('Buscar ajuste').fill('')
             page.screenshot(path=str(Path(capturas) / 'ajustes.png'), full_page=True)
 
+        # 6b. conversa: pergunta de hora é respondida pelo relógio (sem IA) e chega por SSE
+        page.get_by_role('link', name='Conversa').first.click()
+        page.get_by_label('Mensagem').fill('Que horas são?')
+        page.get_by_role('button', name='Enviar').click()
+        expect(page.get_by_text('no horário de São Paulo')).to_be_visible(timeout=5000)
+        page.get_by_label('Nova lembrança').fill('Meu nome é Júlio')
+        page.get_by_role('button', name='Adicionar').click()
+        expect(page.get_by_text('Meu nome é Júlio')).to_be_visible(timeout=5000)
+        page.get_by_role('tab', name='Rotina e preferências').click()
+        page.get_by_label('Nova rotina').fill('Treino às 7h')
+        page.get_by_role('button', name='Adicionar').click()
+        expect(page.get_by_text('Treino às 7h')).to_be_visible(timeout=5000)
+        if capturas:
+            page.screenshot(path=str(Path(capturas) / 'conversa.png'), full_page=True)
+
+        # 6c. reações: criar emoji, mostrar no celular, excluir e desfazer pelo toast
+        page.get_by_role('link', name='Reações').first.click()
+        page.get_by_role('button', name='Novo emoji').click()
+        page.get_by_label('Nome').fill('Ideia brilhante')
+        page.get_by_label('Quando usar').fill('Quando tiver uma ideia')
+        page.get_by_role('radio', name='🚀').click()
+        page.get_by_role('button', name='Salvar').click()
+        cartao = page.locator('li.reacao', has_text='Ideia brilhante')
+        expect(cartao).to_be_visible(timeout=5000)
+        cartao.get_by_role('button', name='Mostrar').click()
+        page.wait_for_timeout(400)
+        assert server.treinamento.expressao['receita']['nome'] == 'Ideia brilhante'
+        cartao.get_by_role('button', name='Excluir').click()
+        expect(cartao).to_have_count(0, timeout=5000)
+        page.get_by_role('button', name='Desfazer').last.click()
+        expect(page.locator('li.reacao', has_text='Ideia brilhante')).to_be_visible(timeout=5000)
+        if capturas:
+            page.screenshot(path=str(Path(capturas) / 'reacoes.png'), full_page=True)
+
         # 7. celular: barra inferior e nada de rolagem horizontal
         page.set_viewport_size({'width': 400, 'height': 860})
         page.get_by_role('link', name='Ao vivo').click()
@@ -129,7 +170,7 @@ def testar(base, server, capturas):
 
         assert not erros, erros
         browser.close()
-    print('OK: token, SSE, dock 1-9, paleta, E-Stop, ajustes otimistas, celular 400px, tema claro')
+    print('OK: token, SSE, dock 1-9, paleta, E-Stop, ajustes otimistas, conversa, memória, reações com desfazer, celular 400px, tema')
 
 
 if __name__ == '__main__':

web/src/App.svelte

@@ -169,7 +169,7 @@
     <Tela />
   </main>
 
-  {#if nav.atual !== 'ao-vivo'}
+  {#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes'}
     <MiniRosto />
   {/if}
 </div>

web/src/lib/componentes/Abas.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" generics="T extends string">
+  let { abas, ativa = $bindable(), rotulo }: { abas: { id: T; titulo: string; contador?: number }[]; ativa: T; rotulo: string } =
+    $props();
+
+  function tecla(e: KeyboardEvent, i: number) {
+    const d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
+    if (!d) return;
+    const prox = abas[(i + d + abas.length) % abas.length];
+    ativa = prox.id;
+    (e.currentTarget as HTMLElement).parentElement?.querySelector<HTMLElement>(`[data-aba="${prox.id}"]`)?.focus();
+  }
+</script>
+
+<div class="abas" role="tablist" aria-label={rotulo}>
+  {#each abas as aba, i (aba.id)}
+    <button
+      role="tab"
+      data-aba={aba.id}
+      aria-selected={ativa === aba.id}
+      tabindex={ativa === aba.id ? 0 : -1}
+      onclick={() => (ativa = aba.id)}
+      onkeydown={(e) => tecla(e, i)}
+    >
+      {aba.titulo}
+      {#if aba.contador !== undefined}<span class="contador">{aba.contador}</span>{/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .abas {
+    display: flex;
+    gap: var(--e-1);
+    border-bottom: 1px solid var(--borda);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--e-2);
+    padding: var(--e-2) var(--e-3);
+    min-height: 40px;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    background: transparent;
+    color: var(--texto-3);
+    font: 500 var(--t-sm) var(--fonte);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  button[aria-selected='true'] {
+    color: var(--texto);
+    border-bottom-color: var(--destaque);
+  }
+  .contador {
+    font-size: var(--t-xs);
+    padding: 0 6px;
+    border-radius: var(--raio-pill);
+    background: var(--superficie-3);
+    color: var(--texto-2);
+  }
+</style>

web/src/lib/componentes/Miniatura.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { SIMBOLO_EMOJI } from '../treinamento.svelte';
+
+  // Prévia estática de uma reação (sem iframe): figurinha SVG, emoji ou olhos do 1º passo.
+  let { receita, tamanho = 64 }: { receita: any; tamanho?: number } = $props();
+  const passo = $derived(receita?.passos?.[0]);
+  const simbolo = $derived(receita?.emoji?.caractere || SIMBOLO_EMOJI[receita?.simbolo] || '');
+</script>
+
+<div class="miniatura" style="--t: {tamanho}px" aria-hidden="true">
+  {#if receita?.figurinha?.formas}
+    <svg viewBox="0 0 100 100" width={tamanho} height={tamanho}>
+      {#each receita.figurinha.formas as forma, i (i)}
+        <path d={forma.caminho} fill={forma.cor} />
+      {/each}
+    </svg>
+  {:else if receita?.emoji}
+    <span class="emoji">{receita.emoji.caractere}</span>
+  {:else}
+    <svg viewBox="0 0 100 60" width={tamanho} height={tamanho * 0.6}>
+      {#if passo?.olhos === 'feliz'}
+        <path d="M18 38 Q30 18 42 38 M58 38 Q70 18 82 38" stroke={passo.cor} stroke-width="8" fill="none" stroke-linecap="round" />
+      {:else if passo?.olhos === 'triste'}
+        <path d="M18 26 Q30 44 42 26 M58 26 Q70 44 82 26" stroke={passo.cor} stroke-width="8" fill="none" stroke-linecap="round" />
+      {:else}
+        {@const ry = passo?.olhos === 'surpreso' ? 20 : 16}
+        <ellipse cx="30" cy="30" rx="12" {ry} fill={passo?.cor ?? '#5cd6ff'} />
+        <ellipse cx="70" cy="30" rx="12" {ry} fill={passo?.cor ?? '#5cd6ff'} />
+      {/if}
+    </svg>
+    {#if simbolo}<span class="simbolo">{simbolo}</span>{/if}
+  {/if}
+</div>
+
+<style>
+  .miniatura {
+    position: relative;
+    width: var(--t);
+    height: var(--t);
+    display: grid;
+    place-items: center;
+    border-radius: var(--raio);
+    background: #05080c;
+    flex: none;
+  }
+  .emoji {
+    font-size: calc(var(--t) * 0.55);
+    line-height: 1;
+  }
+  .simbolo {
+    position: absolute;
+    right: 2px;
+    bottom: 0;
+    font-size: calc(var(--t) * 0.3);
+  }
+</style>

web/src/lib/componentes/Modal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { X } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+
+  // <dialog> nativo: foco preso, Esc e fundo vêm de graça.
+  let { aberto = $bindable(false), titulo, children }: { aberto: boolean; titulo: string; children: Snippet } = $props();
+  let dialogo: HTMLDialogElement;
+
+  $effect(() => {
+    if (aberto && !dialogo.open) dialogo.showModal();
+    else if (!aberto && dialogo.open) dialogo.close();
+  });
+</script>
+
+<dialog
+  bind:this={dialogo}
+  onclose={() => (aberto = false)}
+  onclick={(e) => e.target === dialogo && (aberto = false)}
+  aria-label={titulo}
+>
+  <div class="conteudo">
+    <header>
+      <h2>{titulo}</h2>
+      <button class="btn fantasma icone pequeno" aria-label="Fechar" onclick={() => (aberto = false)}><X size={18} /></button>
+    </header>
+    {#if aberto}{@render children()}{/if}
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    width: min(480px, calc(100vw - 2 * var(--e-4)));
+    padding: 0;
+    border: 1px solid var(--borda-forte);
+    border-radius: var(--raio-lg);
+    background: var(--superficie);
+    color: var(--texto);
+    box-shadow: var(--sombra-flutuante);
+  }
+  dialog::backdrop {
+    background: rgb(0 0 0 / 0.5);
+  }
+  .conteudo {
+    display: grid;
+    gap: var(--e-4);
+    padding: var(--e-5);
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  h2 {
+    font-size: var(--t-lg);
+  }
+</style>

web/src/lib/tema.css

@@ -101,7 +101,7 @@ img, video, canvas, iframe { max-width: 100%; }
 .btn.fantasma:hover:not(:disabled) { background: var(--superficie-2); }
 .btn.icone { padding: 0; width: 40px; }
 .btn.pequeno { min-height: 32px; padding: 0 var(--e-3); font-size: var(--t-xs); }
-.btn.pequeno.icone { width: 32px; }
+.btn.pequeno.icone { width: 32px; padding: 0; }
 
 /* ---------- formulários ---------- */
 .campo { display: grid; gap: var(--e-1); }

web/src/lib/treinamento.svelte.ts

@@ -0,0 +1,73 @@
+/**
+ * Biblioteca de reações, rotinas e diário (/treinamento/*). Sem polling: recarrega ao abrir a
+ * tela, depois de cada ação e quando o servidor avisa (SSE 'treinamento') que terminou de criar.
+ */
+import { pedir, postar } from './api';
+import { avisos } from './avisos.svelte';
+import { ouvir } from './estado.svelte';
+
+export interface ReacaoBiblioteca {
+  id: number;
+  horario: number;
+  receita: any;
+  feedback: -1 | 0 | 1;
+  ativa: boolean;
+}
+
+export interface StatusTreinamento {
+  ocupado: boolean;
+  erro: string;
+  automatico: boolean;
+  rotina: { id: number; texto: string }[];
+  diario: { id: number; horario: number; papel: string; texto: string }[];
+  resumos: { id: number; horario: number; texto: string }[];
+  emojis: string[];
+  desfazer: [string] | null;
+  reacoes: ReacaoBiblioteca[];
+  prompt_orientacao: string;
+  ultimo_prompt_figurinha: string;
+}
+
+class Treinamento {
+  status = $state<StatusTreinamento | null>(null);
+  carregando = $state(false);
+
+  async carregar() {
+    this.carregando = true;
+    try {
+      this.status = await pedir<StatusTreinamento>('/treinamento/status');
+    } catch (e) {
+      avisos.erro(e);
+    } finally {
+      this.carregando = false;
+    }
+  }
+
+  /** Executa uma ação e recarrega; devolve true se deu certo (erro vira toast). */
+  async acao(rota: string, dados: object = {}, sucesso?: string) {
+    try {
+      await postar('/treinamento/' + rota, dados);
+      if (sucesso) avisos.ok(sucesso);
+      await this.carregar();
+      return true;
+    } catch (e) {
+      avisos.erro(e);
+      return false;
+    }
+  }
+}
+
+export const treinamento = new Treinamento();
+
+let estavaOcupado = false;
+ouvir('treinamento', (d: { ocupado: boolean; erro: string }) => {
+  if (treinamento.status) treinamento.status = { ...treinamento.status, ocupado: d.ocupado, erro: d.erro };
+  if (estavaOcupado && !d.ocupado) {
+    if (d.erro) avisos.mostrar('Gemini: ' + d.erro, 'erro');
+    else avisos.ok('Novas reações prontas.');
+    treinamento.carregar();
+  }
+  estavaOcupado = d.ocupado;
+});
+
+export const SIMBOLO_EMOJI: Record<string, string> = { ideia: '💡', cafe: '☕', musica: '🎵', coracao: '❤️', estrela: '⭐' };

web/src/telas/Conversa.svelte

@@ -1,7 +1,403 @@
 <script lang="ts">
+  import { Mic, MicOff, Plus, Send, Trash2, Volume2, X } from '@lucide/svelte';
+  import { onMount, tick } from 'svelte';
+  import { postar } from '../lib/api';
+  import { avisos, tentar } from '../lib/avisos.svelte';
+  import { gesto, GESTOS_INFO } from '../lib/comandos.svelte';
+  import Abas from '../lib/componentes/Abas.svelte';
   import Card from '../lib/componentes/Card.svelte';
+  import Selo from '../lib/componentes/Selo.svelte';
+  import Toggle from '../lib/componentes/Toggle.svelte';
+  import { estado, ouvir } from '../lib/estado.svelte';
+  import { treinamento } from '../lib/treinamento.svelte';
+
+  const SUGESTOES = ['Oi, Carinha! Tudo bem?', 'Que horas são?', 'Me conta uma curiosidade', 'Como você está se sentindo?'];
+
+  let texto = $state('');
+  let enviando = $state(false);
+  let lista = $state<HTMLElement>();
+  const conversa = $derived(estado.conversa);
+  const ocupado = $derived(enviando || !!conversa?.ocupado);
+
+  async function enviar(mensagem = texto) {
+    const t = mensagem.trim();
+    if (!t || ocupado) return;
+    enviando = true;
+    try {
+      await postar('/conversa/enviar', { texto: t });
+      texto = '';
+    } catch (e) {
+      avisos.erro(e);
+    } finally {
+      enviando = false;
+    }
+  }
+
+  // Rola para o fim quando chegam mensagens.
+  $effect(() => {
+    void conversa?.historico.length;
+    void conversa?.ocupado;
+    tick().then(() => lista?.scrollTo({ top: lista.scrollHeight, behavior: 'smooth' }));
+  });
+
+  // ---------- voz (Web Speech API): fala só respostas novas, nunca a antiga ao abrir
+  let lerEmVoz = $state(false);
+  try {
+    lerEmVoz = localStorage.getItem('carinha_voz') === '1';
+  } catch {
+    /* ok */
+  }
+  function falar(t: string) {
+    if (!('speechSynthesis' in window) || !t) return;
+    speechSynthesis.cancel();
+    const u = new SpeechSynthesisUtterance(t);
+    u.lang = 'pt-BR';
+    u.pitch = 1.35;
+    u.rate = 1.05;
+    const voz = speechSynthesis.getVoices().find((v) => v.lang.startsWith('pt'));
+    if (voz) u.voice = voz;
+    speechSynthesis.speak(u);
+  }
+  let ultimaFalada = estado.conversa?.ultima?.id;
+  onMount(() =>
+    ouvir('conversa', (c) => {
+      if (c.ultima && c.ultima.id !== ultimaFalada) {
+        ultimaFalada = c.ultima.id;
+        if (lerEmVoz) falar(c.ultima.texto);
+      }
+    }),
+  );
+
+  const Reconhecimento = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+  const vozDisponivel = !!Reconhecimento && window.isSecureContext;
+  const motivoSemVoz = !Reconhecimento
+    ? 'Este navegador não reconhece voz.'
+    : 'O microfone do navegador exige HTTPS ou localhost.';
+  let gravando = $state(false);
+  let reconhecimento: any = null;
+  function microfone() {
+    if (gravando) return reconhecimento?.stop();
+    reconhecimento = new Reconhecimento();
+    reconhecimento.lang = 'pt-BR';
+    reconhecimento.interimResults = false;
+    reconhecimento.onstart = () => (gravando = true);
+    reconhecimento.onend = () => (gravando = false);
+    reconhecimento.onerror = (e: any) => {
+      gravando = false;
+      avisos.mostrar(e.error === 'not-allowed' ? 'Permissão do microfone negada.' : 'Microfone: ' + e.error, 'erro');
+    };
+    reconhecimento.onresult = (e: any) => {
+      texto = e.results[0][0].transcript;
+      enviar();
+    };
+    reconhecimento.start();
+  }
+
+  // ---------- memória: lembranças da conversa + rotinas do treinamento
+  type AbaMemoria = 'lembrancas' | 'rotinas';
+  let aba = $state<AbaMemoria>('lembrancas');
+  let nova = $state('');
+  const itensMemoria = $derived(aba === 'lembrancas' ? (conversa?.lembrancas ?? []) : (treinamento.status?.rotina ?? []));
+  onMount(() => {
+    treinamento.carregar();
+  });
+
+  async function adicionar(e: SubmitEvent) {
+    e.preventDefault();
+    const t = nova.trim();
+    if (!t) return;
+    const ok =
+      aba === 'lembrancas'
+        ? await tentar(() => postar('/conversa/lembrar', { texto: t }))
+        : await treinamento.acao('rotina', { texto: t });
+    if (ok) nova = '';
+  }
+  const apagarLembranca = (id: number) => tentar(() => postar('/conversa/apagar', { id }));
+  const apagarRotina = (id: number) => treinamento.acao('rotina-apagar', { id });
+
+  let confirmarLimpar = $state(false);
+  async function limparTudo() {
+    confirmarLimpar = false;
+    await tentar(() => postar('/conversa/limpar'), 'Conversa, lembranças e diário apagados.');
+    treinamento.carregar();
+  }
 </script>
 
-<Card titulo="Conversa" descricao="Chat, voz e memória migram na fase 3.">
-  <p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/conversa">abrir Conversa (versão anterior)</a>.</p>
+<div class="conversa">
+  <Card class="chat">
+    {#snippet acoes()}
+      {#if conversa}
+        <Selo tom="destaque">{conversa.provedor === 'gemini' ? 'Gemini' : 'Qwen local'} · {conversa.modelo}</Selo>
+        <a class="pequeno-texto" href="#/ajustes">trocar</a>
+      {/if}
+    {/snippet}
+
+    <div class="mensagens" bind:this={lista} aria-live="polite">
+      {#if !conversa?.historico.length}
+        <div class="boas-vindas">
+          <p>Converse com o Carinha. Ele responde aqui e reage com o rosto no celular.</p>
+          <div class="sugestoes">
+            {#each SUGESTOES as s (s)}
+              <button class="btn pequeno" onclick={() => enviar(s)} disabled={ocupado}>{s}</button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      {#each conversa?.historico ?? [] as m, i (i)}
+        <div class="msg {m.role}">
+          <p>{m.content}</p>
+          {#if m.role === 'assistant'}
+            <button class="btn fantasma pequeno icone" aria-label="Ler em voz alta" onclick={() => falar(m.content)}>
+              <Volume2 size={14} />
+            </button>
+          {/if}
+        </div>
+      {/each}
+      {#if conversa?.ocupado}
+        <div class="msg assistant pensando" aria-label="Carinha está pensando"><span></span><span></span><span></span></div>
+      {/if}
+      {#if conversa?.ultima && !conversa.ocupado && GESTOS_INFO[conversa.ultima.gesto]}
+        <button class="gesto-resposta" onclick={() => gesto(conversa.ultima!.gesto)}>
+          {GESTOS_INFO[conversa.ultima.gesto].emoji} reagiu com {GESTOS_INFO[conversa.ultima.gesto].nome.toLowerCase()} · repetir
+        </button>
+      {/if}
+    </div>
+
+    {#if conversa?.erro}<p class="erro pequeno-texto">{conversa.erro}</p>{/if}
+
+    <form
+      class="entrada"
+      onsubmit={(e) => {
+        e.preventDefault();
+        enviar();
+      }}
+    >
+      <button
+        type="button"
+        class="btn icone"
+        class:gravando
+        onclick={microfone}
+        disabled={!vozDisponivel || ocupado}
+        title={vozDisponivel ? (gravando ? 'Parar de ouvir' : 'Falar') : motivoSemVoz}
+        aria-label={gravando ? 'Parar de ouvir' : 'Falar'}
+      >
+        {#if vozDisponivel}<Mic size={18} />{:else}<MicOff size={18} />{/if}
+      </button>
+      <input type="text" bind:value={texto} placeholder="Escreva para o Carinha…" maxlength="600" aria-label="Mensagem" />
+      <button class="btn primario" type="submit" disabled={ocupado || !texto.trim()}>
+        <Send size={16} /> <span class="rotulo-enviar">Enviar</span>
+      </button>
+    </form>
+    <div class="linha entre">
+      <Toggle
+        rotulo="Ler respostas em voz alta neste PC"
+        checked={lerEmVoz}
+        onchange={(v) => {
+          lerEmVoz = v;
+          try {
+            localStorage.setItem('carinha_voz', v ? '1' : '0');
+          } catch {
+            /* ok */
+          }
+        }}
+      />
+    </div>
   </Card>
+
+  <Card titulo="Memória" descricao="O que o Carinha leva em conta ao responder. São dados, nunca instruções.">
+    <Abas
+      rotulo="Memória"
+      bind:ativa={aba}
+      abas={[
+        { id: 'lembrancas', titulo: 'Lembranças', contador: conversa?.lembrancas.length ?? 0 },
+        { id: 'rotinas', titulo: 'Rotina e preferências', contador: treinamento.status?.rotina.length ?? 0 },
+      ]}
+    />
+    <form class="linha nova" onsubmit={adicionar}>
+      <input
+        type="text"
+        bind:value={nova}
+        maxlength="300"
+        placeholder={aba === 'lembrancas' ? 'Ex.: Meu nome é Júlio' : 'Ex.: Treino às 7h de segunda a sexta'}
+        aria-label={aba === 'lembrancas' ? 'Nova lembrança' : 'Nova rotina'}
+      />
+      <button class="btn" type="submit" disabled={!nova.trim()}><Plus size={16} /> Adicionar</button>
+    </form>
+    <ul class="itens">
+      {#each itensMemoria as item (item.id)}
+        <li>
+          <span>{item.texto}</span>
+          <button
+            class="btn fantasma pequeno icone"
+            aria-label="Apagar"
+            onclick={() => (aba === 'lembrancas' ? apagarLembranca(item.id) : apagarRotina(item.id))}
+          >
+            <X size={14} />
+          </button>
+        </li>
+      {:else}
+        <li class="fraco pequeno-texto">Nada guardado ainda.</li>
+      {/each}
+    </ul>
+    <div class="perigo-zona">
+      {#if confirmarLimpar}
+        <p class="pequeno-texto">Apagar conversa, lembranças e diário? Rotinas e reações ficam.</p>
+        <div class="linha">
+          <button class="btn perigo pequeno" onclick={limparTudo}>Sim, apagar</button>
+          <button class="btn pequeno" onclick={() => (confirmarLimpar = false)}>Cancelar</button>
+        </div>
+      {:else}
+        <button class="btn fantasma pequeno" onclick={() => (confirmarLimpar = true)}>
+          <Trash2 size={14} /> Apagar conversa e lembranças
+        </button>
+      {/if}
+    </div>
+  </Card>
+</div>
+
+<style>
+  .conversa {
+    display: grid;
+    gap: var(--e-4);
+    align-items: start;
+  }
+  :global(.chat) {
+    grid-template-rows: auto 1fr auto auto;
+  }
+  .mensagens {
+    display: flex;
+    flex-direction: column;
+    gap: var(--e-3);
+    min-height: 320px;
+    max-height: min(60vh, 640px);
+    overflow-y: auto;
+    padding: var(--e-1);
+  }
+  .boas-vindas {
+    margin: auto;
+    display: grid;
+    gap: var(--e-4);
+    justify-items: center;
+    text-align: center;
+    color: var(--texto-2);
+    max-width: 420px;
+  }
+  .sugestoes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--e-2);
+    justify-content: center;
+  }
+  .msg {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--e-1);
+    max-width: 82%;
+  }
+  .msg p {
+    padding: var(--e-2) var(--e-3);
+    border-radius: var(--raio);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .msg.user {
+    align-self: flex-end;
+  }
+  .msg.user p {
+    background: var(--destaque);
+    color: var(--destaque-texto);
+    border-bottom-right-radius: 4px;
+  }
+  .msg.assistant p {
+    background: var(--superficie-2);
+    border: 1px solid var(--borda);
+    border-bottom-left-radius: 4px;
+  }
+  .pensando {
+    gap: 4px;
+    padding: var(--e-3);
+    border-radius: var(--raio);
+    background: var(--superficie-2);
+    width: fit-content;
+  }
+  .pensando span {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--texto-3);
+    animation: pulo 1s infinite ease-in-out;
+  }
+  .pensando span:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .pensando span:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  @keyframes pulo {
+    50% {
+      transform: translateY(-4px);
+      opacity: 0.5;
+    }
+  }
+  .gesto-resposta {
+    align-self: flex-start;
+    border: 1px dashed var(--borda-forte);
+    border-radius: var(--raio-pill);
+    background: transparent;
+    color: var(--texto-2);
+    font: var(--t-xs) var(--fonte);
+    padding: 4px 12px;
+    cursor: pointer;
+  }
+  .entrada {
+    display: flex;
+    gap: var(--e-2);
+  }
+  .gravando {
+    background: var(--perigo-suave);
+    border-color: var(--perigo);
+    color: var(--perigo);
+  }
+  .erro {
+    color: var(--perigo);
+  }
+  .nova input {
+    flex: 1;
+    min-width: 180px;
+  }
+  .itens {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--e-1);
+    max-height: 320px;
+    overflow: auto;
+  }
+  .itens li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--e-2);
+    padding: var(--e-2) var(--e-3);
+    border-radius: var(--raio-sm);
+    background: var(--superficie-2);
+    font-size: var(--t-sm);
+  }
+  .perigo-zona {
+    border-top: 1px solid var(--borda);
+    padding-top: var(--e-3);
+    display: grid;
+    gap: var(--e-2);
+  }
+  @media (max-width: 480px) {
+    .rotulo-enviar {
+      display: none;
+    }
+  }
+  @media (min-width: 1100px) {
+    .conversa {
+      grid-template-columns: 3fr 2fr;
+    }
+  }
+</style>

web/src/telas/Reacoes.svelte

@@ -1,7 +1,449 @@
 <script lang="ts">
+  import {
+    Copy, Download, Eye, EyeOff, Pencil, Plus, Search, Send, Sparkles, Square, ThumbsDown, ThumbsUp, Trash2, Undo2,
+  } from '@lucide/svelte';
+  import { onMount } from 'svelte';
+  import { postar } from '../lib/api';
+  import { avisos, tentar } from '../lib/avisos.svelte';
+  import Abas from '../lib/componentes/Abas.svelte';
   import Card from '../lib/componentes/Card.svelte';
+  import Gestos from '../lib/componentes/Gestos.svelte';
+  import Miniatura from '../lib/componentes/Miniatura.svelte';
+  import Modal from '../lib/componentes/Modal.svelte';
+  import RostoPrevia from '../lib/componentes/RostoPrevia.svelte';
+  import Selo from '../lib/componentes/Selo.svelte';
+  import Toggle from '../lib/componentes/Toggle.svelte';
+  import { treinamento, type ReacaoBiblioteca } from '../lib/treinamento.svelte';
+
+  type Aba = 'biblioteca' | 'criar' | 'gestos' | 'diario';
+  let aba = $state<Aba>('biblioteca');
+  let previa = $state<{ previa: (receita: unknown) => void }>();
+  let busca = $state('');
+  const st = $derived(treinamento.status);
+
+  onMount(() => {
+    treinamento.carregar();
+  });
+
+  const normal = (t: string) => t.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+  const reacoes = $derived(
+    (st?.reacoes ?? []).filter((r) => !busca || normal(r.receita.nome + ' ' + r.receita.motivo).includes(normal(busca))),
+  );
+  const tipo = (r: ReacaoBiblioteca) => (r.receita.figurinha ? 'Desenho' : r.receita.emoji ? 'Emoji' : 'Animação');
+
+  // ---------- ações da biblioteca
+  const mostrar = (r: ReacaoBiblioteca) => tentar(() => postar('/comando', { tipo: 'reacao', valor: r.id }), 'Enviada ao celular.');
+  const pararNoCelular = () => {
+    previa?.previa({ limpar: true });
+    tentar(() => postar('/comando', { tipo: 'parar_reacao' }));
+  };
+  const biblioteca = (dados: object, sucesso?: string) => treinamento.acao('biblioteca', dados, sucesso);
+  const desfazer = () => biblioteca({ acao: 'desfazer' }, 'Alteração desfeita.');
+
+  async function excluir(r: ReacaoBiblioteca) {
+    if (await biblioteca({ acao: 'excluir', id: r.id }))
+      avisos.ok(`“${r.receita.nome}” excluída.`, { rotulo: 'Desfazer', fazer: desfazer });
+  }
+  const feedback = (r: ReacaoBiblioteca, valor: -1 | 1) =>
+    treinamento.acao('feedback', { id: r.id, valor: r.feedback === valor ? 0 : valor });
+
+  function exportar() {
+    if (!st) return;
+    const url = URL.createObjectURL(
+      new Blob([JSON.stringify(st.reacoes.map((r) => r.receita), null, 2)], { type: 'application/json' }),
+    );
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'carinha-reacoes.json';
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  // ---------- editor
+  let editorAberto = $state(false);
+  let editando = $state<ReacaoBiblioteca | null>(null);
+  let form = $state({ nome: '', motivo: '', caractere: '💡', local: 'olhos' });
+  function abrirEditor(r: ReacaoBiblioteca | null) {
+    editando = r;
+    form = {
+      nome: r?.receita.nome ?? '',
+      motivo: r?.receita.motivo ?? '',
+      caractere: r?.receita.emoji?.caractere ?? (r ? '' : '💡'),
+      local: r?.receita.emoji?.local ?? r?.receita.figurinha?.local ?? 'olhos',
+    };
+    editorAberto = true;
+  }
+  async function salvarEditor(e: SubmitEvent) {
+    e.preventDefault();
+    const dados = { acao: editando ? 'editar' : 'criar', id: editando?.id ?? null, ...form, nome: form.nome.trim(), motivo: form.motivo.trim() };
+    if (await biblioteca(dados, editando ? 'Reação atualizada.' : 'Emoji criado.')) editorAberto = false;
+  }
+
+  // ---------- criar com IA
+  let pedido = $state('');
+  async function desenhar(e: SubmitEvent) {
+    e.preventDefault();
+    if (await treinamento.acao('figurinha', { texto: pedido.trim() }, 'Pedido enviado ao Gemini. A figurinha aparece no celular quando ficar pronta.'))
+      pedido = '';
+  }
+  let confirmarDiario = $state(false);
+  const hora = (t: number) => new Date(t * 1000).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
 </script>
 
-<Card titulo="Reações" descricao="Biblioteca e criação com IA migram na fase 3.">
-  <p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/emojis">abrir Reações (versão anterior)</a>.</p>
+<div class="reacoes">
+  <div class="principal">
+    <Abas
+      rotulo="Reações"
+      bind:ativa={aba}
+      abas={[
+        { id: 'biblioteca', titulo: 'Biblioteca', contador: st?.reacoes.length },
+        { id: 'criar', titulo: 'Criar com IA' },
+        { id: 'gestos', titulo: 'Gestos do rosto' },
+        { id: 'diario', titulo: 'Diário' },
+      ]}
+    />
+
+    {#if aba === 'biblioteca'}
+      <div class="barra">
+        <label class="busca">
+          <Search size={16} />
+          <input type="search" bind:value={busca} placeholder="Buscar reação" aria-label="Buscar reação" />
+        </label>
+        <button class="btn primario" onclick={() => abrirEditor(null)} disabled={st?.ocupado}><Plus size={16} /> Novo emoji</button>
+        <button class="btn" onclick={desfazer} disabled={!st?.desfazer || st?.ocupado}><Undo2 size={16} /> Desfazer</button>
+        <button class="btn" onclick={pararNoCelular}><Square size={16} /> Parar no celular</button>
+        <button class="btn fantasma" onclick={exportar} disabled={!st?.reacoes.length}><Download size={16} /> Exportar</button>
+      </div>
+
+      {#if !st}
+        <p class="fraco">Carregando biblioteca…</p>
+      {:else}
+        <ul class="grade-reacoes">
+          {#each reacoes as r (r.id)}
+            <li class="reacao" class:inativa={!r.ativa}>
+              <button class="topo" onclick={() => previa?.previa(r.receita)} title="Ver na prévia">
+                <Miniatura receita={r.receita} />
+                <div class="info">
+                  <strong>{r.receita.nome}</strong>
+                  <span class="fraco pequeno-texto">{r.receita.motivo}</span>
+                  <span class="linha">
+                    <Selo>{tipo(r)}</Selo>
+                    {#if !r.ativa}<Selo tom="aviso">Desativada</Selo>{/if}
+                  </span>
+                </div>
+              </button>
+              <div class="acoes">
+                <button class="btn pequeno primario" onclick={() => mostrar(r)}><Send size={14} /> Mostrar</button>
+                <button
+                  class="btn pequeno icone"
+                  class:marcado={r.feedback === 1}
+                  aria-pressed={r.feedback === 1}
+                  aria-label="Gostei"
+                  onclick={() => feedback(r, 1)}><ThumbsUp size={14} /></button
+                >
+                <button
+                  class="btn pequeno icone"
+                  class:marcado-ruim={r.feedback === -1}
+                  aria-pressed={r.feedback === -1}
+                  aria-label="Não gostei"
+                  onclick={() => feedback(r, -1)}><ThumbsDown size={14} /></button
+                >
+                <span class="espaco"></span>
+                <button class="btn pequeno icone fantasma" aria-label="Editar" title="Editar" onclick={() => abrirEditor(r)}><Pencil size={14} /></button>
+                <button class="btn pequeno icone fantasma" aria-label="Duplicar" title="Duplicar" onclick={() => biblioteca({ acao: 'duplicar', id: r.id }, 'Reação duplicada.')}
+                  ><Copy size={14} /></button
+                >
+                <button
+                  class="btn pequeno icone fantasma"
+                  aria-label={r.ativa ? 'Desativar' : 'Ativar'}
+                  title={r.ativa ? 'Desativar (a IA deixa de usar)' : 'Ativar'}
+                  onclick={() => biblioteca({ acao: 'ativar', id: r.id, ativa: !r.ativa })}
+                >
+                  {#if r.ativa}<EyeOff size={14} />{:else}<Eye size={14} />{/if}
+                </button>
+                <button class="btn pequeno icone fantasma perigo-texto" aria-label="Excluir" title="Excluir" onclick={() => excluir(r)}><Trash2 size={14} /></button>
+              </div>
+            </li>
+          {:else}
+            <li class="fraco">{busca ? 'Nenhuma reação encontrada.' : 'Crie um emoji ou peça um desenho ao Gemini.'}</li>
+          {/each}
+        </ul>
+      {/if}
+    {:else if aba === 'criar'}
+      <div class="grade-criar">
+        <Card titulo="Desenhar figurinha" descricao="O Gemini desenha um SVG e o celular mostra assim que ficar pronto.">
+          <form class="grade" onsubmit={desenhar}>
+            <label class="campo">
+              <span>O que desenhar</span>
+              <textarea bind:value={pedido} maxlength="1000" placeholder="Ex.: um sol de óculos escuros sorrindo" required></textarea>
+            </label>
+            <button class="btn primario" type="submit" disabled={st?.ocupado || !pedido.trim()}>
+              <Sparkles size={16} /> {st?.ocupado ? 'Gemini trabalhando…' : 'Desenhar e mostrar'}
+            </button>
+          </form>
+          {#if st?.ultimo_prompt_figurinha}
+            <details>
+              <summary class="pequeno-texto fraco">Último pedido enviado</summary>
+              <pre class="mono">{st.ultimo_prompt_figurinha}</pre>
+            </details>
+          {/if}
         </Card>
+        <Card titulo="Reações automáticas" descricao="A partir da conversa e da rotina, o Gemini inventa 3 animações novas.">
+          <button class="btn" onclick={() => treinamento.acao('gerar', {}, 'Gemini está criando 3 reações…')} disabled={st?.ocupado}>
+            <Sparkles size={16} /> Gerar 3 agora
+          </button>
+          <Toggle
+            rotulo="Gerar sozinho a cada hora"
+            ajuda="Cada geração é uma chamada paga ao Gemini"
+            checked={!!st?.automatico}
+            disabled={!st}
+            onchange={(v) => treinamento.acao('config', { automatico: v })}
+          />
+          {#if st?.ocupado}<Selo tom="aviso">Gemini trabalhando…</Selo>{/if}
+          {#if st?.erro}<p class="erro pequeno-texto">{st.erro}</p>{/if}
+        </Card>
+      </div>
+    {:else if aba === 'gestos'}
+      <Card titulo="Gestos do rosto" descricao="Toque para mandar ao celular. A estrela fixa o gesto nos favoritos (atalhos 1 a 9).">
+        <Gestos completo />
+      </Card>
+    {:else}
+      <div class="grade-criar">
+        <Card titulo="Resumos">
+          {#each st?.resumos ?? [] as r (r.id)}
+            <article class="entrada"><time class="fraco pequeno-texto">{hora(r.horario)}</time><p>{r.texto}</p></article>
+          {:else}
+            <p class="fraco pequeno-texto">Os resumos aparecem quando o Gemini gera reações.</p>
+          {/each}
+        </Card>
+        <Card titulo="Diário">
+          {#snippet acoes()}
+            {#if confirmarDiario}
+              <button
+                class="btn perigo pequeno"
+                onclick={async () => {
+                  confirmarDiario = false;
+                  await treinamento.acao('limpar-diario', {}, 'Diário e resumos apagados.');
+                }}>Apagar diário</button
+              >
+              <button class="btn pequeno" onclick={() => (confirmarDiario = false)}>Cancelar</button>
+            {:else}
+              <button class="btn pequeno fantasma" onclick={() => (confirmarDiario = true)} disabled={!st?.diario.length}>
+                <Trash2 size={14} /> Limpar
+              </button>
+            {/if}
+          {/snippet}
+          <div class="diario">
+            {#each st?.diario ?? [] as m (m.id)}
+              <article class="entrada">
+                <time class="fraco pequeno-texto">{hora(m.horario)} · {m.papel === 'user' ? 'Você' : 'Carinha'}</time>
+                <p>{m.texto}</p>
+              </article>
+            {:else}
+              <p class="fraco pequeno-texto">Vazio.</p>
+            {/each}
+          </div>
+        </Card>
+      </div>
+    {/if}
+  </div>
+
+  <aside class="lateral">
+    <div class="quadro"><RostoPrevia bind:this={previa} titulo="Prévia das reações" /></div>
+    <p class="fraco pequeno-texto">Clique numa reação para ver aqui sem mandar ao celular.</p>
+  </aside>
+</div>
+
+<Modal bind:aberto={editorAberto} titulo={editando ? 'Editar reação' : 'Novo emoji'}>
+  <form class="grade" onsubmit={salvarEditor}>
+    <label class="campo"><span>Nome</span><input type="text" bind:value={form.nome} maxlength="50" required /></label>
+    <label class="campo"><span>Quando usar</span><input type="text" bind:value={form.motivo} maxlength="200" required /></label>
+    {#if !editando?.receita.figurinha}
+      <div class="campo">
+        <span>Emoji</span>
+        <div class="emojis" role="radiogroup" aria-label="Emoji">
+          {#each st?.emojis ?? [] as e (e)}
+            <button type="button" role="radio" aria-checked={form.caractere === e} onclick={() => (form.caractere = e)}>{e}</button>
+          {/each}
+        </div>
+      </div>
+      <label class="campo">
+        <span>Onde aparece</span>
+        <select bind:value={form.local}>
+          <option value="olhos">Nos olhos</option>
+          <option value="ao_redor">Ao redor do rosto</option>
+        </select>
+      </label>
+    {/if}
+    <div class="linha">
+      <button class="btn primario" type="submit" disabled={!editando && !form.caractere}>Salvar</button>
+      <button class="btn" type="button" onclick={() => (editorAberto = false)}>Cancelar</button>
+    </div>
+  </form>
+</Modal>
+
+<style>
+  .reacoes {
+    display: grid;
+    gap: var(--e-4);
+    align-items: start;
+  }
+  .principal {
+    display: grid;
+    gap: var(--e-4);
+    min-width: 0;
+  }
+  .barra {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--e-2);
+  }
+  .busca {
+    flex: 1;
+    min-width: 200px;
+    display: flex;
+    align-items: center;
+    gap: var(--e-2);
+    padding-left: var(--e-3);
+    border: 1px solid var(--borda-forte);
+    border-radius: var(--raio-sm);
+    background: var(--fundo-2);
+    color: var(--texto-3);
+  }
+  .busca input {
+    border: 0;
+    background: transparent;
+  }
+  .grade-reacoes {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--e-3);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+  }
+  .reacao {
+    display: grid;
+    gap: var(--e-3);
+    padding: var(--e-3);
+    border: 1px solid var(--borda);
+    border-radius: var(--raio-lg);
+    background: var(--superficie);
+  }
+  .reacao.inativa {
+    opacity: 0.6;
+  }
+  .topo {
+    display: flex;
+    gap: var(--e-3);
+    text-align: left;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+  .info {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+    align-content: start;
+  }
+  .info strong {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .acoes {
+    display: flex;
+    gap: var(--e-1);
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .espaco {
+    flex: 1;
+  }
+  .marcado {
+    color: var(--ok);
+    border-color: var(--ok);
+  }
+  .marcado-ruim {
+    color: var(--perigo);
+    border-color: var(--perigo);
+  }
+  .perigo-texto:hover {
+    color: var(--perigo);
+  }
+  .grade-criar {
+    display: grid;
+    gap: var(--e-4);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+    align-items: start;
+  }
+  pre {
+    white-space: pre-wrap;
+    font-size: var(--t-xs);
+    color: var(--texto-2);
+    max-height: 200px;
+    overflow: auto;
+  }
+  .erro {
+    color: var(--perigo);
+  }
+  .entrada {
+    display: grid;
+    gap: 2px;
+    font-size: var(--t-sm);
+  }
+  .diario {
+    display: grid;
+    gap: var(--e-3);
+    max-height: 480px;
+    overflow: auto;
+  }
+  .lateral {
+    display: grid;
+    gap: var(--e-2);
+  }
+  .quadro {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--raio-lg);
+    overflow: hidden;
+    border: 1px solid var(--borda);
+    background: #000;
+  }
+  .emojis {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    gap: 4px;
+    max-height: 180px;
+    overflow: auto;
+  }
+  .emojis button {
+    height: 40px;
+    border: 1px solid var(--borda);
+    border-radius: var(--raio-sm);
+    background: var(--superficie-2);
+    font-size: 1.3rem;
+    cursor: pointer;
+  }
+  .emojis button[aria-checked='true'] {
+    border-color: var(--destaque);
+    background: var(--destaque-suave);
+  }
+  @media (max-width: 1099px) {
+    .lateral {
+      order: -1;
+    }
+  }
+  @media (min-width: 1100px) {
+    .reacoes {
+      grid-template-columns: 1fr 340px;
+    }
+    .lateral {
+      position: sticky;
+      top: calc(var(--topo-altura) + var(--e-4));
+    }
+  }
+</style>