@agent-native/core 0.79.25 → 0.79.27

package/corpus/core/docs/content/locales/pt-BR/template-brain.mdx

@@ -19,13 +19,78 @@ A superfície do produto permanece simples de propósito: **Perguntar** é o cha
 experiência, enquanto **Fontes**, **Revisão** e **Conhecimento** são de administração/suporte
 superfícies para conectar dados, aprovar propostas e inspecionar a memória citada.
 
-```an-diagram title="Da fonte à resposta citada" summary="O Brain ingere fontes aprovadas em capturas brutas, destila memória durável, passa por revisão e só então responde com citações."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Capturas brutas<br><small class=\"diagram-muted\">deduplicado, redigido</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><small class=\"diagram-muted\">fatos · decisões · processos</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">aprovado, atômico</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1yyr150" title={"Da fonte à resposta citada"} summary={"O Brain ingere fontes aprovadas em capturas brutas, destila memória durável, passa por revisão e só então responde com citações."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Capturas brutas<br /><small class="diagram-muted"
+      >deduplicado, redigido</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><small class="diagram-muted"
+      >fatos · decisões · processos</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">aprovado, atômico</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-10sg8a3">
   <Screen
     surface="desktop"

package/corpus/core/docs/content/locales/pt-BR/template-calendar.mdx

@@ -18,13 +18,71 @@ Um aplicativo de calendário desenvolvido por agente. Conecte seu Google Calenda
 
 Quando você abre o aplicativo, a visualização do calendário ativo é a superfície principal. O agente ainda sabe em que dia, semana ou evento você está olhando, então você pode dizer “agende uma ligação de 30 minutos com Alex neste dia” sem explicar tudo.
 
-```an-diagram title="Como flui uma solicitação de agendamento" summary="Quer você clique no calendário ou pergunte ao agente, as mesmas ações são lidas ao vivo em Google Calendar e respondidas na mesma visualização."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Você clica<br><small class=\"diagram-muted\">arrastar, barra de ferramentas, atalhos</small></div><div class=\"diagram-node\">Você pede ao agente<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">ao vivo, várias contas</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">reservas · disponibilidade</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">A visualização do calendário atualiza ao vivo</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1im0qyx" title={"Como flui uma solicitação de agendamento"} summary={"Quer você clique no calendário ou pergunte ao agente, as mesmas ações são lidas ao vivo em Google Calendar e respondidas na mesma visualização."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Você clica<br /><small class="diagram-muted"
+        >arrastar, barra de ferramentas, atalhos</small
+      >
+    </div>
+    <div class="diagram-node">
+      Você pede ao agente<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >ao vivo, várias contas</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">reservas · disponibilidade</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">A visualização do calendário atualiza ao vivo</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Veja seu Google Calendar real** em visualização diária, semanal ou mensal, com diversas contas sobrepostas.

package/corpus/core/docs/content/locales/pt-BR/template-chat.mdx

@@ -37,13 +37,70 @@ Se você deseja o menor tempo de execução somente de ação sem navegador UI,
 
 Esse é o ponto. O Chat é um shell padrão fino e útil para seu próprio agente, não um produto de domínio que finge ser genérico.
 
-```an-diagram title="O que vem no shell do Chat" summary="Uma superfície de bate-papo fina sobre o tempo de execução padrão da estrutura — ações, threads duráveis, sincronização ao vivo e autenticação — com espaço para adicionar sua própria UI."
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">Lista de threads<br><small class=\"diagram-muted\">criar · reabrir · fixar · arquivar</small></div><div class=\"diagram-node\">Chat em página inteira<br><small class=\"diagram-muted\">superfície de chat do framework em /</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">Tabelas SQL centrais<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">Sincronização ao vivo &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">login · organizações · sessões</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-125nleh" title="O que vem no shell do Chat" summary={"Uma superfície de bate-papo fina sobre o tempo de execução padrão da estrutura — ações, threads duráveis, sincronização ao vivo e autenticação — com espaço para adicionar sua própria UI."}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      Lista de threads<br /><small class="diagram-muted"
+        >criar · reabrir · fixar · arquivar</small
+      >
+    </div>
+    <div class="diagram-node">
+      Chat em página inteira<br /><small class="diagram-muted"
+        >superfície de chat do framework em /</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      Tabelas SQL centrais<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">Sincronização ao vivo &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted"
+        >login · organizações · sessões</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Quando escolher {#when-to-pick}
 
 - **Você deseja um aplicativo básico com o qual os usuários possam conversar imediatamente** e depois estender com actions e UI.

package/corpus/core/docs/content/locales/pt-BR/template-clips.mdx

@@ -19,13 +19,61 @@ Um aplicativo que captura tudo: gravações de tela, notas de reuniões do seu c
 
 Pense nos moldes de Loom + Granola + Wispr Flow reunidos em um aplicativo - mas o agente é um editor de primeira classe em todas as superfícies, e as gravações, reuniões e ditados são seus, não de um fornecedor de SaaS. O Clips também torna as gravações compartilhadas legíveis pelo agente: cole um link de compartilhamento normal do Clips em um agente e ele poderá "ouvir" a transcrição como texto e "ver" os quadros de tela com carimbo de data e hora como imagens - sem necessidade de vídeo bruto. A visualização de quadros funciona em qualquer agente com capacidade de imagem (ChatGPT, Código Claude, Cursor, Codex); os bate-papos na web somente de texto ainda recebem a transcrição completa e podem levar um quadro que você carrega.
 
-```an-diagram title="Capture, transcreva, reutilize" summary="Três tipos de captura pousam em uma biblioteca; o agente transcreve, titula e resume, então cada transcrição pode ser pesquisada e compartilhada."
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">Gravação de tela</div><div class=\"diagram-node\">Reunião de calendário</div><div class=\"diagram-node\">Ditado segurando Fn</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Uma biblioteca<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">título · resumo · capítulos</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">Pesquisar</div><div class=\"diagram-pill\">Compartilhar</div><div class=\"diagram-pill\">Legível por agentes links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1lenkc" title="Capture, transcreva, reutilize" summary={"Três tipos de captura pousam em uma biblioteca; o agente transcreve, titula e resume, então cada transcrição pode ser pesquisada e compartilhada."}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">Gravação de tela</div>
+    <div class="diagram-node">Reunião de calendário</div>
+    <div class="diagram-node">Ditado segurando Fn</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Uma biblioteca<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">título · resumo · capítulos</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Pesquisar</div>
+    <div class="diagram-pill">Compartilhar</div>
+    <div class="diagram-pill">Legível por agentes links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Grave sua tela** com um gravador integrado, sobreposição de webcam, captura de áudio e pausa/corte.

package/corpus/core/docs/content/locales/pt-BR/template-content.mdx

@@ -22,13 +22,73 @@ resultado, quer você mesmo faça isso ou pergunte.
 
 Ao abrir o aplicativo, você verá uma árvore de páginas ao lado do editor. O agente sempre sabe qual página você está visualizando e qual texto você selecionou, para que as edições do documento possam permanecer baseadas na página atual.
 
-```an-diagram title="Um documento, muitos editores" summary="Você e o agente escrevem através do mesmo pipeline Yjs. SQL é o armazenamento canônico; arquivos locais e Notion são superfícies de sincronização opcionais."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Você digita<br><small class=\"diagram-muted\">menu slash, barra de ferramentas</small></div><div class=\"diagram-node\">Edições do agente<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">ao vivo, merge sem conflito</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">armazenamento SQL canônico</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Arquivos locais .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Páginas do Notion<br><small class=\"diagram-muted\">pull · push</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-h0fy3f" title="Um documento, muitos editores" summary={"Você e o agente escrevem através do mesmo pipeline Yjs. SQL é o armazenamento canônico; arquivos locais e Notion são superfícies de sincronização opcionais."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Você digita<br /><small class="diagram-muted"
+        >menu slash, barra de ferramentas</small
+      >
+    </div>
+    <div class="diagram-node">
+      Edições do agente<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">ao vivo, merge sem conflito</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted"
+      >armazenamento SQL canônico</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Arquivos locais .md / .mdx<br /><small class="diagram-muted"
+        >/local-files</small
+      >
+    </div>
+    <div class="diagram-box">
+      Páginas do Notion<br /><small class="diagram-muted">pull · push</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Escreva rich text** com títulos, listas, tabelas, blocos de código, imagens e links. Comandos de barra (`/`) inserem blocos; selecionar o texto abre uma barra de ferramentas de formatação.

package/corpus/core/docs/content/locales/pt-BR/template-design.mdx

@@ -18,13 +18,67 @@ Design é um estúdio de prototipagem HTML nativo do agente. Em vez de uma tela
 
 Quando você abre o aplicativo, o protótipo gerado é o centro da área de trabalho, com modos de visualização, revisões imediatas e controles de exportação à mão. Tudo o que o agente produz é HTML real que você pode refinar, exportar ou entregar.
 
-```an-diagram title="Um artefato, sem tradução" summary="O agente gera Alpine/Tailwind HTML autônomo; o iframe, a fonte editável e todas as exportações leem os mesmos arquivos. Um sistema de design vinculado alimenta tokens em cada passagem."
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">Sistema de design</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Gerar com agente</span><small class=\"diagram-muted\">arquivos HTML / JSX independentes</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">ajuste controles · refine com Cmd+I</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · entrega</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1d1e5bg" title={"Um artefato, sem tradução"} summary={"O agente gera Alpine/Tailwind HTML autônomo; o iframe, a fonte editável e todas as exportações leem os mesmos arquivos. Um sistema de design vinculado alimenta tokens em cada passagem."}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Prompt<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">Sistema de design</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Gerar com agente</span
+    ><small class="diagram-muted">arquivos HTML / JSX independentes</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >ajuste controles · refine com Cmd+I</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · entrega</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Quando escolher
 
 - **Você deseja um conceito refinado de página de destino, direção de produto UI ou exploração de marca** que possa deixar a ferramenta como HTML real, e não uma tela de desenho em camadas.

package/corpus/core/docs/content/locales/pt-BR/template-dispatch.mdx

@@ -20,13 +20,66 @@ Dispatch é o **plano de controle do espaço de trabalho**. Enquanto outros mode
 
 Se você estiver executando um [multi-app workspace](/docs/multi-app-workspace) com muitos aplicativos, o Dispatch é a cola.
 
-```an-diagram title="Orquestre, não se especialize" summary="As mensagens de todos os canais chegam a uma caixa de entrada; o orquestrador faz a triagem e delega o trabalho do domínio para o aplicativo especializado certo em A2A — segredos, recursos e aprovações permanecem centrais."
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">Solicitações A2A</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">caixa central · triagem · roteamento</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Agente Mail</div><div class=\"diagram-node\">Agente Analytics</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">Cofre de segredos</span><span class=\"diagram-pill\">Recursos do workspace</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">Jobs agendados</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-12kx1a9" title={"Orquestre, não se especialize"} summary={"As mensagens de todos os canais chegam a uma caixa de entrada; o orquestrador faz a triagem e delega o trabalho do domínio para o aplicativo especializado certo em A2A — segredos, recursos e aprovações permanecem centrais."}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">Solicitações A2A</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">caixa central · triagem · roteamento</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">Agente Mail</div>
+    <div class="diagram-node">Agente Analytics</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">Cofre de segredos</span
+  ><span class="diagram-pill">Recursos do workspace</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">Jobs agendados</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## O que faz {#what-it-does}
 
 - **Caixa de entrada central.** DMs Slack, mensagens de telegrama, notificações por e-mail, solicitações A2A de outros agentes — tudo em um só lugar. O agente do Dispatch faz a triagem e cuida deles sozinho ou delega. Consulte [Messaging](/docs/messaging) para saber como conectar Slack, e-mail e Telegram ao seu espaço de trabalho.

package/corpus/core/docs/content/locales/pt-BR/template-forms.mdx

@@ -18,13 +18,73 @@ Forms é um construtor de formulários nativo do agente. Descreva o formulário
 
 Ao abrir o aplicativo, você vê seus formulários, o editor atual e uma visualização ao vivo. O agente pode criar um formulário a partir de um prompt, atualizar rótulos e opções de campos, alterar a validação e conectar destinos de envio usando o mesmo actions que o UI usa.
 
-```an-diagram title="Construa, publique, colete" summary="O agente e o editor visual editam uma definição de formulário SQL-backed. A página de preenchimento público não é autenticada e os envios são direcionados do lado do servidor para seus destinos."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Prompt do agente<br><small class=\"diagram-muted\">\"add an NPS question\"</small></div><div class=\"diagram-node\">Editor visual<br><small class=\"diagram-muted\">rótulos, validação, ordem</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-form · update-form</span><small class=\"diagram-muted\">JSON de campos, JSON de configurações</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">SQL com Drizzle</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Página pública de preenchimento<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">+ Slack / webhook / Planilhas</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-8ltf14" title="Construa, publique, colete" summary={"O agente e o editor visual editam uma definição de formulário SQL-backed. A página de preenchimento público não é autenticada e os envios são direcionados do lado do servidor para seus destinos."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Prompt do agente<br /><small class="diagram-muted"
+        >"add an NPS question"</small
+      >
+    </div>
+    <div class="diagram-node">
+      Editor visual<br /><small class="diagram-muted"
+        >rótulos, validação, ordem</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-form · update-form</span
+    ><small class="diagram-muted">JSON de campos, JSON de configurações</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">SQL com Drizzle</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Página pública de preenchimento<br /><small class="diagram-muted"
+        >unauthenticated</small
+      >
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >+ Slack / webhook / Planilhas</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Crie formulários de forma conversacional.** "Crie um formulário de contato", "adicione uma pergunta de pontuação NPS", "torne o campo de e-mail obrigatório." O agente atualiza o esquema do formulário e as atualizações de visualização do estado apoiado por SQL.