@agent-native/core 0.79.26 → 0.80.0

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.

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

@@ -18,13 +18,69 @@ Um cliente de e-mail baseado em agente. Conecte sua conta Gmail e o agente poder
 
 Quando você abre o aplicativo, a caixa de entrada do teclado e a visualização do tópico permanecem focadas no próprio e-mail. O agente sempre sabe em qual visualização você está e qual tópico está aberto, então você pode dizer "arquivar isto" ou "esboçar uma recusa amigável" sem explicar o que "isto" é.
 
-```an-diagram title="Como flui uma solicitação de email" summary="Os atalhos de teclado e os prompts do agente executam as mesmas ações. O e-mail reside em Gmail; rascunhos, automações e rastreamento ao vivo em SQL e application_state."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Você conduz<br><small class=\"diagram-muted\">atalhos J/K/E/R</small></div><div class=\"diagram-node\">Você pede ao agente<br><small class=\"diagram-muted\">\"redija uma recusa amigável\"</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-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">várias contas, via OAuth</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">rascunhos · automações · rastreamento</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Caixa de entrada 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-1y413ry" title={"Como flui uma solicitação de email"} summary={"Os atalhos de teclado e os prompts do agente executam as mesmas ações. O e-mail reside em Gmail; rascunhos, automações e rastreamento ao vivo em SQL e application_state."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Você conduz<br /><small class="diagram-muted">atalhos J/K/E/R</small>
+    </div>
+    <div class="diagram-node">
+      Você pede ao agente<br /><small class="diagram-muted"
+        >"redija uma recusa amigável"</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-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">várias contas, via OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >rascunhos · automações · rastreamento</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">Caixa de entrada 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
 
 - **Leia e faça triagem de e-mails** com atalhos de teclado (`J`/`K` para mover, `E` para arquivar, `R` para responder, `C` para redigir).

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

@@ -23,13 +23,72 @@ commit, branch ou git diff — em uma revisão visual de código de alta altitud
 a mesma superfície de revisão, para que você possa anotar, comentar e enviar feedback ao
 agente da mesma maneira.
 
-```an-diagram title="Dois comandos, uma superfície de revisão" summary="Ambos os comandos são publicados por meio do conector do Plano MCP hospedado na mesma superfície de anotação e comentário."
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">antes do codigo: arquitetura, UI, refatoracao</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">depois do codigo: PR, commit, branch, diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Conector MCP do Plan<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Superficie de revisao<br><small class=\"diagram-muted\">diagramas · wireframes · codigo anotado · comentarios</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">Agente de codigo<br><small class=\"diagram-muted\">feedback devolvido</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-woqr2s" title={"Dois comandos, uma superfície de revisão"} summary={"Ambos os comandos são publicados por meio do conector do Plano MCP hospedado na mesma superfície de anotação e comentário."}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted"
+        >antes do codigo: arquitetura, UI, refatoracao</small
+      >
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted"
+        >depois do codigo: PR, commit, branch, diff</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Conector MCP do Plan<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Superficie de revisao<br /><small class="diagram-muted"
+      >diagramas · wireframes · codigo anotado · comentarios</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    Agente de codigo<br /><small class="diagram-muted"
+      >feedback devolvido</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-114m1dg">
   <Screen
     surface="desktop"

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

@@ -18,13 +18,58 @@ Gere apresentações completas a partir de um prompt, edite slides visualmente e
 
 Quando você abre uma apresentação, a tela do slide, o esboço, as notas e a tira de filme permanecem em uma superfície do editor enquanto o agente ainda pode criar, revisar e navegar pelos slides por meio do actions.
 
-```an-diagram title="Solicitar a apresentação" summary="Peça uma apresentação e o agente transmitirá os slides, um de cada vez, por meio das mesmas ações que você poderia chamar do CLI."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</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\">escolhe layouts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">paralelo, em streaming</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">O editor renderiza 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:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ibzjph" title={"Solicitar a apresentação"} summary={"Peça uma apresentação e o agente transmitirá os slides, um de cada vez, por meio das mesmas ações que você poderia chamar do CLI."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    Prompt<br /><small class="diagram-muted">"10-slide pitch deck"</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">escolhe layouts</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">paralelo, em streaming</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">O editor renderiza 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: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Gere apresentações a partir de um prompt.** "Gere uma apresentação de 10 slides para um serviço de assinatura de café, o público são investidores."

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

@@ -18,13 +18,62 @@ Um estúdio de vídeo programático para o tipo de gráficos em movimento, demon
 
 Ao abrir o estúdio, você verá uma lista de composições na tela inicial. Clique em um e você verá um player na parte superior, uma linha do tempo na parte inferior e um painel de propriedades à direita. O agente sempre sabe qual composição você tem aberta.
 
-```an-diagram title="Animação como dados" summary="Uma composição é um componente React; cada animação lê uma trilha para que o agente e a linha do tempo editem os mesmos dados."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">arrastar, redimensionar, percorrer</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Composição React<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</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 .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-xlg7n5" title={"Animação como dados"} summary={"Uma composição é um componente React; cada animação lê uma trilha para que o agente e a linha do tempo editem os mesmos dados."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >arrastar, redimensionar, percorrer</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Composição React<br /><small class="diagram-muted"
+      >Remotion &lt;Player&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</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 .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## O que você pode fazer com isso
 
 - **Gere animações a partir de um prompt.** "Adicione um cartão de título que aparece gradualmente em 2 segundos e dura até 5." O agente edita a composição.

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

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="Uma chamada track(), cada provedor" summary="Os chamadores de servidores e clientes acessam o mesmo registro, que espalha cada evento para todos os provedores ativos em paralelo."
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">Código do servidor<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">Código do navegador<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</span><small class=\"diagram-muted\">fan-out, disparar e esquecer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-shuakz" title="Uma chamada track(), cada provedor" summary="Os chamadores de servidores e clientes acessam o mesmo registro, que espalha cada evento para todos os provedores ativos em paralelo.">
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Código do servidor<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      Código do navegador<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</span
+    ><small class="diagram-muted">fan-out, disparar e esquecer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Provedores integrados {#built-in}
 
 Defina um env var e o provedor será registrado automaticamente na inicialização do servidor. Não são necessárias alterações de código.

package/corpus/core/docs/content/locales/pt-BR/using-your-agent.mdx

@@ -9,13 +9,60 @@ A ideia definidora por trás do agente nativo é que o agente e o UI são **parc
 
 Existe uma linha direta simples. O agente **vê** o que você está vendo, você o **direciona** para o que deseja, pode **incorporá-lo** em qualquer lugar, pode usar totalmente **UI leve** quando for mais adequado e pode **coeditar** os mesmos documentos ao mesmo tempo. Cada uma delas é uma página nesta seção.
 
-```an-diagram title="O ciclo do dia a dia" summary="Cinco maneiras de trabalhar com um agente acoplado — cada uma é uma página nesta seção."
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>UI leve</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">Coeditar</span><small class=\"diagram-muted\">ao vivo, lado a lado</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-16kdlwj" title="O ciclo do dia a dia" summary={"Cinco maneiras de trabalhar com um agente acoplado — cada uma é uma página nesta seção."}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>UI leve</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">Coeditar</span
+    ><small class="diagram-muted">ao vivo, lado a lado</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Ele vê o que você está vendo {#it-sees}
 
 O agente não fica cego para sua tela. Abra um e-mail e ele saberá qual tópico. Selecione um gráfico e ele saberá qual gráfico. Destaque um parágrafo e ele poderá atuar exatamente nesse intervalo. Essa consciência compartilhada é o que permite dizer "responda a isto" ou "resuma a seleção" sem precisar explicar o contexto todas as vezes.

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

@@ -19,13 +19,52 @@ O botão de voz do compositor grava o áudio no navegador e depois escolhe um pr
 
 A escolha do provedor é armazenada no estado do aplicativo em `voice-transcription-prefs` para que o usuário possa forçar `"auto"` (padrão - escolhe o melhor provedor disponível), `"builder-gemini"`, `"builder"`, `"gemini"`, `"groq"`, `"openai"` ou `"browser"` nas configurações da barra lateral.
 
-```an-diagram title="Substituição do provedor de transcrição de voz" summary="O compositor grava o áudio e, em seguida, percorre os provedores de servidores em ordem, acessando o navegador Web Speech API somente quando nenhum provedor de servidor estiver disponível."
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">Botão de microfone<br><small class=\"diagram-muted\">grava webm/opus</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">padrão quando Builder está conectado</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-8df511" title={"Substituição do provedor de transcrição de voz"} summary={"O compositor grava o áudio e, em seguida, percorre os provedores de servidores em ordem, acessando o navegador Web Speech API somente quando nenhum provedor de servidor estiver disponível."}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    Botão de microfone<br /><small class="diagram-muted">grava webm/opus</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted">padrão quando Builder está conectado</small>
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 A rota é **somente da mesma origem** — POSTs entre sites são rejeitados para que um invasor não possa gravar créditos de transcrição de uma página externa.
 
 ## Habilitando provedores {#enabling-providers}