@agent-native/core 0.79.26 → 0.80.0

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

@@ -14,13 +14,61 @@ Isso é complementar à pontuação post-hoc em [Observability](/docs/observabil
 
 O executor resolve um mecanismo/modelo independente de provedor a partir do registro existente (nenhum modelo é codificado), de modo que o mesmo conjunto é executado em qualquer mecanismo para o qual o aplicativo está configurado.
 
-```an-diagram title="Da entrada fixa ao portão de implantação" summary="Na verdade, o executor executa o loop do agente em cada caso, pontua a saída e sai diferente de zero se algum marcador cair abaixo do limite – tornando-o um portão CI drop-in."
-{
-  "html": "<div class=\"eval-flow\"><div class=\"diagram-node\">*.eval.ts<br><small class=\"diagram-muted\">prompt + expected behavior</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Executar o loop do agente<br><small class=\"diagram-muted\">real engine/model</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Scorers<br><small class=\"diagram-muted\">every one must pass threshold</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box ok\">exit 0 &rarr; deploy</div><div class=\"diagram-box warn\">exit 1 &rarr; block</div></div></div>",
-  "css": ".eval-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eval-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.eval-flow .diagram-col{display:flex;flex-direction:column;gap:8px}.eval-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-crnqur" title={"Da entrada fixa ao portão de implantação"} summary={"Na verdade, o executor executa o loop do agente em cada caso, pontua a saída e sai diferente de zero se algum marcador cair abaixo do limite – tornando-o um portão CI drop-in."}>
+
+```html
+<div class="eval-flow">
+  <div class="diagram-node">
+    *.eval.ts<br /><small class="diagram-muted"
+      >prompt + expected behavior</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Executar o loop do agente<br /><small class="diagram-muted"
+      >real engine/model</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Scorers<br /><small class="diagram-muted"
+      >every one must pass threshold</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box ok">exit 0 &rarr; deploy</div>
+    <div class="diagram-box warn">exit 1 &rarr; block</div>
+  </div>
+</div>
+```
+
+```css
+.eval-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.eval-flow .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.eval-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.eval-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Escrever uma avaliação {#writing}
 
 Solte um arquivo `*.eval.ts` em qualquer lugar do aplicativo (ou um arquivo `evals/*.ts`). Cada arquivo `export default defineEval(...)` (ou exporta um array deles):
@@ -80,13 +128,59 @@ Importado de `@agent-native/core/eval`:
 
 `createScorer` constrói um marcador a partir de um pipeline de 4 etapas no estilo Mastra. Somente `generateScore` é necessário:
 
-```an-diagram title="O pipeline do marcador em 4 etapas" summary="pré-processar e analisar o padrão de identidade; apenas generateScore é necessário. analyze pode executar JS simples ou chamar um juiz LLM via ctx."
-{
-  "html": "<div class=\"scorer\"><div class=\"diagram-card\"><span class=\"diagram-pill\">preprocess(run)</span><small class=\"diagram-muted\">transform the run/output &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">analyze(x, ctx)</span><small class=\"diagram-muted\">plain JS or LLM judge &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">generateScore(a)</span><small class=\"diagram-muted\">&rarr; 0..1 normalized &middot; <strong>required</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">generateReason</span><small class=\"diagram-muted\">human-readable why &middot; optional</small></div></div>",
-  "css": ".scorer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scorer .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.scorer .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-p64lbf" title="O pipeline do marcador em 4 etapas" summary={"pré-processar e analisar o padrão de identidade; apenas generateScore é necessário. analyze pode executar JS simples ou chamar um juiz LLM via ctx."}>
+
+```html
+<div class="scorer">
+  <div class="diagram-card">
+    <span class="diagram-pill">preprocess(run)</span
+    ><small class="diagram-muted"
+      >transform the run/output &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">analyze(x, ctx)</span
+    ><small class="diagram-muted"
+      >plain JS or LLM judge &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">generateScore(a)</span
+    ><small class="diagram-muted"
+      >&rarr; 0..1 normalized &middot; <strong>required</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">generateReason</span
+    ><small class="diagram-muted">human-readable why &middot; optional</small>
+  </div>
+</div>
+```
+
+```css
+.scorer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.scorer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.scorer .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```text
 preprocess(run)     → x          transform the run/output (optional)
 analyze(x, ctx)     → analysis   plain JS OR an LLM judge (optional)

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

@@ -22,13 +22,77 @@ Se um modelo não deve expor extensões de autoria do usuário, defina
 extensão actions voltada para o agente e orientação imediata enquanto deixa o restante
 agente de aplicativo intacto.
 
-```an-diagram title="A ponte da caixa de areia" summary="A extensão HTML é executada em um iframe isolado e atinge o host apenas por meio de um conjunto fixo de auxiliares de ponte - cada chamada tem escopo e acesso verificado."
-{
-  "html": "<div class=\"ext-bridge\"><div class=\"diagram-card sandbox\" data-rough><span class=\"diagram-pill warn\">Sandboxed iframe</span><small class=\"diagram-muted\">Alpine.js HTML &middot; no host cookies, session, or DOM</small><div class=\"ext-helpers\"><span class=\"diagram-pill\">appAction</span><span class=\"diagram-pill\">appFetch</span><span class=\"diagram-pill\">dbQuery / dbExec</span><span class=\"diagram-pill\">extensionData</span><span class=\"diagram-pill\">extensionFetch</span></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Template host<br><small class=\"diagram-muted\">ações, SQL com escopo automático</small></div><div class=\"diagram-box\">Secret proxy<br><small class=\"diagram-muted\"><code>${keys.NAME}</code>, travado ao domínio</small></div><div class=\"diagram-box\">APIs externas<br><small class=\"diagram-muted\">somente via extensionFetch</small></div></div></div>",
-  "css": ".ext-bridge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ext-bridge .sandbox{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.ext-bridge .ext-helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.ext-bridge .diagram-col{display:flex;flex-direction:column;gap:8px}.ext-bridge .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-2dtgp8" title="A ponte da caixa de areia" summary={"A extensão HTML é executada em um iframe isolado e atinge o host apenas por meio de um conjunto fixo de auxiliares de ponte - cada chamada tem escopo e acesso verificado."}>
+
+```html
+<div class="ext-bridge">
+  <div class="diagram-card sandbox" data-rough>
+    <span class="diagram-pill warn">Sandboxed iframe</span
+    ><small class="diagram-muted"
+      >Alpine.js HTML &middot; no host cookies, session, or DOM</small
+    >
+    <div class="ext-helpers">
+      <span class="diagram-pill">appAction</span
+      ><span class="diagram-pill">appFetch</span
+      ><span class="diagram-pill">dbQuery / dbExec</span
+      ><span class="diagram-pill">extensionData</span
+      ><span class="diagram-pill">extensionFetch</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Template host<br /><small class="diagram-muted"
+        >ações, SQL com escopo automático</small
+      >
+    </div>
+    <div class="diagram-box">
+      Secret proxy<br /><small class="diagram-muted"
+        ><code>${keys.NAME}</code>, travado ao domínio</small
+      >
+    </div>
+    <div class="diagram-box">
+      APIs externas<br /><small class="diagram-muted"
+        >somente via extensionFetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.ext-bridge {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ext-bridge .sandbox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.ext-bridge .ext-helpers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.ext-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ext-bridge .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 As extensões também podem ser **repo-apoiadas no modo de arquivo local**. Nesse fluxo de trabalho,
 `agent-native.json` declara uma pasta `extensions`, cada extensão tem um
 Manifesto `extension.json` mais um arquivo de entrada HTML, e o aplicativo os renderiza
@@ -220,14 +284,54 @@ Um slot é um widget nomeado onde um modelo é enviado:
 
 Quando uma extensão é **instalada em um slot**, o host envia o contexto relevante — o e-mail do contato, o ID do painel, o ID do evento — para o iframe. A extensão lê `window.slotContext` para saber o que o usuário está vendo.
 
-```an-diagram title="Os slots empurram o contexto para o widget" summary="O modelo de host possui slots nomeados; instalar uma extensão em um alimenta window.slotContext para tudo o que o usuário está visualizando no momento."
-{
-"html": "<div class=\"slot\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Thread de e-mail</span><small class=\"diagram-muted\">slot <code>mail.contact-sidebar.bottom</code></small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box accent\"><code>window.slotContext</code><br><small class=\"diagram-muted\">{ contactEmail }</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Notas de contato</span><small class=\"diagram-muted\">loads notes for that contact &mdash; same widget, different context</small></div></div>",
-"css": ".slot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.slot .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.slot .diagram-arrow{font-size:22px}"
-}
+<Diagram id="doc-block-1mbdamx" title="Os slots empurram o contexto para o widget" summary={"O modelo de host possui slots nomeados; instalar uma extensão em um alimenta window.slotContext para tudo o que o usuário está visualizando no momento."}>
+
+```html
+<div class="slot">
+  <div class="diagram-card">
+    <span class="diagram-pill">Thread de e-mail</span
+    ><small class="diagram-muted"
+      >slot <code>mail.contact-sidebar.bottom</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box accent">
+    <code>window.slotContext</code><br /><small class="diagram-muted"
+      >{ contactEmail }</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Notas de contato</span
+    ><small class="diagram-muted"
+      >loads notes for that contact &mdash; same widget, different
+      context</small
+    >
+  </div>
+</div>
+```
 
+```css
+.slot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.slot .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  min-width: 180px;
+}
+.slot .diagram-arrow {
+  font-size: 22px;
+}
 ```
 
+</Diagram>
+
 ### Um exemplo concreto
 
 Imagine a extensão de notas de contato da galeria. Por si só, é um widget independente. Para fazê-lo aparecer na barra lateral de contatos do Mail:

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

@@ -19,13 +19,68 @@ Um aplicativo nativo do agente pode ser acessado por qualquer host compatível c
 
 A ponte de agente externo fecha o loop. Primeiro, você conecta seu próprio agente a um aplicativo **hospedado**, colando o MCP URL remoto do aplicativo em um host de bate-papo como Claude ou ChatGPT ou executando o fluxo do desenvolvedor CLI para agentes de codificação locais. Em seguida, o agente faz o trabalho no MCP e entrega ao usuário um **MCP App** UI inline em hosts compatíveis ou um único link **"Abrir em <app> →"** que abre o aplicativo real focado exatamente no que foi produzido. Ele reutiliza o contrato `navigate`/`application_state` existente, o UI já drena a cada 2s (consulte [Context Awareness](/docs/context-awareness)) — não há segundo mecanismo de navegação.
 
-```an-diagram title="A viagem de ida e volta do agente externo" summary="Um host externo chama uma ferramenta por MCP; o aplicativo retorna um artefato mais um link Abrir. Clicar nele resolve a sessão do navegador e concentra o artefato na UI em execução – o link não carrega nenhum estado privilegiado."
-{
-  "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>Host externo<br><small class=\"diagram-muted\">Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Ferramenta MCP call</span><small class=\"diagram-muted\">e.g. <code>manage-draft</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>O app produz um artefato<br><small class=\"diagram-muted\">+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Usuário clica no link</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill ok\"><code>/_agent-native/open</code></span><small class=\"diagram-muted\">resolves the <strong>browser</strong> session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Writes <code>navigate</code> app-state<br><small class=\"diagram-muted\">A UI foca o artefato</small></div></div>",
-  "css": ".xa-trip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.xa-trip .center{display:flex;flex-direction:column;align-items:center;gap:4px}.xa-trip .diagram-arrow{font-size:22px;line-height:1}.xa-trip code{font-size:.85em}"
+<Diagram id="doc-block-13fhjp1" title="A viagem de ida e volta do agente externo" summary={"Um host externo chama uma ferramenta por MCP; o aplicativo retorna um artefato mais um link Abrir. Clicar nele resolve a sessão do navegador e concentra o artefato na UI em execução – o link não carrega nenhum estado privilegiado."}>
+
+```html
+<div class="xa-trip">
+  <div class="diagram-box" data-rough>
+    Host externo<br /><small class="diagram-muted"
+      >Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">Ferramenta MCP call</span
+    ><small class="diagram-muted">e.g. <code>manage-draft</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    O app produz um artefato<br /><small class="diagram-muted"
+      >+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>Usuário clica no link</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill ok"><code>/_agent-native/open</code></span
+    ><small class="diagram-muted"
+      >resolves the <strong>browser</strong> session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Writes <code>navigate</code> app-state<br /><small class="diagram-muted"
+      >A UI foca o artefato</small
+    >
+  </div>
+</div>
+```
+
+```css
+.xa-trip {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.xa-trip .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.xa-trip .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.xa-trip code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 A regra de identidade é a dobradiça de segurança: o link é apenas `view` + ids de registro + filtros, e a gravação `navigate` com foco em registro tem como escopo quem está conectado ao **navegador** — nunca o token MCP do agente externo. É por isso que é seguro colar o link em um terminal ou transcrição de bate-papo.
 
 ## Qual caminho de agente você precisa? {#which-agent-path}
@@ -247,13 +302,69 @@ Esta é a explicação canônica das camadas do catálogo MCP — links para out
 
 O servidor MCP fornece um **catálogo compacto por padrão para cada chamador** — conectores hospedados (ChatGPT, Claude), clientes de código (código Claude, Cursor, Codex) e o proxy local CLI/stdio. A superfície de ação completa é veiculada apenas com aceitação explícita. O catálogo nunca é inferido do nome do cliente ou do agente do usuário.
 
-```an-diagram title="Duas camadas de catálogo" summary="Cada chamador obtém a camada compacta por padrão; a superfície completa de aproximadamente 105 ferramentas é apenas opcional. a pesquisa de ferramentas preenche a lacuna para que nada fique realmente oculto."
-{
-  "html": "<div class=\"xa-tiers\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Compact / connector tier &middot; default</span><strong>~20&ndash;30 tools</strong><small class=\"diagram-muted\">Template-declared app actions + cross-app builtins (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>, <code>create_embed_session</code>) + always-present <code>tool-search</code>.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Full tier &middot; opt-in</span><strong>~105 ferramentas</strong><small class=\"diagram-muted\">Explicit opt-in only: <code>--full-catalog</code> token or <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small></div></div><p class=\"diagram-muted note\"><code>tool-search</code> reaches any full-tier tool on demand &mdash; so the compact default keeps context small without hiding capability.</p>",
-  "css": ".xa-tiers{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}.xa-tiers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1;min-width:240px}.xa-tiers .diagram-arrow{align-self:center;font-size:24px;line-height:1}.xa-tiers .note{flex-basis:100%;margin:4px 0 0;font-size:.85em}.xa-tiers code{font-size:.85em}"
+<Diagram id="doc-block-x64uzj" title={"Duas camadas de catálogo"} summary={"Cada chamador obtém a camada compacta por padrão; a superfície completa de aproximadamente 105 ferramentas é apenas opcional. a pesquisa de ferramentas preenche a lacuna para que nada fique realmente oculto."}>
+
+```html
+<div class="xa-tiers">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill ok"
+      >Compact / connector tier &middot; default</span
+    ><strong>~20&ndash;30 tools</strong
+    ><small class="diagram-muted"
+      >Template-declared app actions + cross-app builtins
+      (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>,
+      <code>create_embed_session</code>) + always-present
+      <code>tool-search</code>.</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Full tier &middot; opt-in</span
+    ><strong>~105 ferramentas</strong
+    ><small class="diagram-muted"
+      >Explicit opt-in only: <code>--full-catalog</code> token or
+      <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small
+    >
+  </div>
+</div>
+<p class="diagram-muted note">
+  <code>tool-search</code> reaches any full-tier tool on demand &mdash; so the
+  compact default keeps context small without hiding capability.
+</p>
+```
+
+```css
+.xa-tiers {
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.xa-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 240px;
+}
+.xa-tiers .diagram-arrow {
+  align-self: center;
+  font-size: 24px;
+  line-height: 1;
+}
+.xa-tiers .note {
+  flex-basis: 100%;
+  margin: 4px 0 0;
+  font-size: 0.85em;
+}
+.xa-tiers code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 ### Camada compacta/conector (padrão) {#connector-tier}
 
 Por padrão, cada agente conectado vê um catálogo pequeno e selecionado (cerca de 20 a 30 ferramentas versus cerca de 105 na superfície completa):

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

@@ -28,13 +28,67 @@ Agente nativo é para pessoas que desejam que um aplicativo real e um agente de
 
 A maioria dos aplicativos utiliza a IA como uma reflexão tardia que não pode realmente _fazer_ coisas no aplicativo. Em um aplicativo nativo do agente, o agente é um cidadão de primeira classe que compartilha o mesmo actions, banco de dados e estado que o UI, portanto, pode fazer qualquer coisa que os botões puderem — e modificar o próprio código do aplicativo. Consulte [What Is Agent-Native?](/docs/what-is-agent-native#the-ladder).
 
-```an-diagram title="IA aparafusada vs. agent-native" summary="Uma barra lateral de bate-papo integrada vive em seu próprio mundo. Um agente agent-native compartilha as mesmas ações, banco de dados e estado que a UI."
-{
-  "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">IA acoplada depois</span><div class=\"diagram-node\">Barra lateral de chat</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>mundo de IA separado<br><small class=\"diagram-muted\">não consegue mexer no app</small></div><div class=\"diagram-box diagram-muted\">App UI &amp; data</div></div><div class=\"diagram-divider\" aria-hidden=\"true\"></div><div class=\"diagram-col\"><span class=\"diagram-pill ok\">Agent-native</span><div class=\"diagram-row2\"><div class=\"diagram-node\">UI</div><div class=\"diagram-node\">Agent</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>shared actions, DB &amp; state</div></div></div>",
-  "css": ".diagram-vs{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}.diagram-vs .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:center;flex:1;min-width:200px}.diagram-vs .diagram-row2{display:flex;gap:8px}.diagram-vs .diagram-arrow{font-size:20px;line-height:1}.diagram-vs .diagram-divider{width:1px;align-self:stretch;background:currentColor;opacity:.15}"
+<Diagram id="doc-block-gefzrm" title="IA aparafusada vs. agent-native" summary={"Uma barra lateral de bate-papo integrada vive em seu próprio mundo. Um agente agent-native compartilha as mesmas ações, banco de dados e estado que a UI."}>
+
+```html
+<div class="diagram-vs">
+  <div class="diagram-col">
+    <span class="diagram-pill warn">IA acoplada depois</span>
+    <div class="diagram-node">Barra lateral de chat</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      mundo de IA separado<br /><small class="diagram-muted"
+        >não consegue mexer no app</small
+      >
+    </div>
+    <div class="diagram-box diagram-muted">App UI &amp; data</div>
+  </div>
+  <div class="diagram-divider" aria-hidden="true"></div>
+  <div class="diagram-col">
+    <span class="diagram-pill ok">Agent-native</span>
+    <div class="diagram-row2">
+      <div class="diagram-node">UI</div>
+      <div class="diagram-node">Agent</div>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>shared actions, DB &amp; state</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vs {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+.diagram-vs .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+.diagram-vs .diagram-row2 {
+  display: flex;
+  gap: 8px;
+}
+.diagram-vs .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-vs .diagram-divider {
+  width: 1px;
+  align-self: stretch;
+  background: currentColor;
+  opacity: 0.15;
 }
 ```
 
+</Diagram>
+
 ### É código aberto? {#is-this-open-source}
 
 Sim. A estrutura e todos os modelos são de código aberto. Você pode executar tudo localmente, hospedar-se sozinho ou usar a nuvem do Builder.io para hospedagem gerenciada, colaboração e recursos de equipe.
@@ -126,13 +180,49 @@ Em qualquer lugar. O servidor é executado em Nitro, que compila para qualquer d
 
 SSE fornece às gravações do mesmo processo um caminho imediato para o navegador, e uma pesquisa leve de contador de versões continua sendo a alternativa porque funciona em todos os ambientes de implantação - incluindo sem servidor e de borda, onde soquetes persistentes podem não estar disponíveis. Consulte [Key Concepts — Sincronização ao vivo](/docs/key-concepts#polling-sync).
 
-```an-diagram title="SSE primeiro, pesquisa alternativa" summary="O mesmo processo grava fluxo instantaneamente; uma pesquisa de contador de versões mantém as gravações sem servidor, de borda e de processo cruzado convergentes."
-{
-  "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>Escrita no DB</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">SSE<br><small class=\"diagram-muted\">/_agent-native/events &middot; instant</small></div><div class=\"diagram-node\">Polling<br><small class=\"diagram-muted\">/_agent-native/poll &middot; universal fallback</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Recarregamento do navegador</div></div>",
-  "css": ".diagram-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-transport .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-transport .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1lfotqx" title="SSE primeiro, pesquisa alternativa" summary={"O mesmo processo grava fluxo instantaneamente; uma pesquisa de contador de versões mantém as gravações sem servidor, de borda e de processo cruzado convergentes."}>
+
+```html
+<div class="diagram-transport">
+  <div class="diagram-box" data-rough>Escrita no DB</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      SSE<br /><small class="diagram-muted"
+        >/_agent-native/events &middot; instant</small
+      >
+    </div>
+    <div class="diagram-node">
+      Polling<br /><small class="diagram-muted"
+        >/_agent-native/poll &middot; universal fallback</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>Recarregamento do navegador</div>
+</div>
+```
+
+```css
+.diagram-transport {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-transport .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-transport .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ### Por que o UI não pode chamar um LLM diretamente? {#why-no-inline-llm-calls}
 
 A IA não é determinística, portanto, você precisa de fluxo de conversa para fornecer feedback e iterar (não botões únicos) e o agente já tem sua base de código, instruções, skills e histórico que faltam em uma chamada inline. Rotear tudo através do agente também é o que permite que o aplicativo seja conduzido a partir de Slack, Telegram ou outro agente. Consulte [Key Concepts — Agent chat bridge](/docs/key-concepts#agent-chat-bridge).

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

@@ -17,13 +17,70 @@ A ordem de resolução do provedor é:
 2. **Provedor Builder.io** — integrado, ativado automaticamente quando Builder.io é conectado
 3. **SQL substituto** — armazena arquivos como base64 no banco de dados (ótimo para desenvolvimento, não para produção)
 
-```an-diagram title="Ordem de resolução do provedor" summary="uploadFile() escolhe o primeiro provedor configurado na ordem. O substituto SQL sempre existe, então os uploads funcionam sem configuração."
-{
-  "html": "<div class=\"diagram-upload\"><div class=\"diagram-box\" data-rough>uploadFile()<br><small class=\"diagram-muted\">POST /_agent-native/file-upload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-step\"><span class=\"diagram-pill accent\">1</span><div class=\"diagram-node\">Registrado pelo usuário<br><small class=\"diagram-muted\">registerFileUploadProvider() — S3, R2, GCS…</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><div class=\"diagram-node\">Builder.io<br><small class=\"diagram-muted\">automático ao conectar — servido por CDN</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill warn\">3</span><div class=\"diagram-node\">fallback SQL<br><small class=\"diagram-muted\">base64 no DB — só desenvolvimento</small></div></div></div></div>",
-  "css": ".diagram-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-upload .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-upload .diagram-step{display:flex;align-items:center;gap:8px}.diagram-upload .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1t5oj8a" title={"Ordem de resolução do provedor"} summary={"uploadFile() escolhe o primeiro provedor configurado na ordem. O substituto SQL sempre existe, então os uploads funcionam sem configuração."}>
+
+```html
+<div class="diagram-upload">
+  <div class="diagram-box" data-rough>
+    uploadFile()<br /><small class="diagram-muted"
+      >POST /_agent-native/file-upload</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-step">
+      <span class="diagram-pill accent">1</span>
+      <div class="diagram-node">
+        Registrado pelo usuário<br /><small class="diagram-muted"
+          >registerFileUploadProvider() — S3, R2, GCS…</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span>
+      <div class="diagram-node">
+        Builder.io<br /><small class="diagram-muted"
+          >automático ao conectar — servido por CDN</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill warn">3</span>
+      <div class="diagram-node">
+        fallback SQL<br /><small class="diagram-muted"
+          >base64 no DB — só desenvolvimento</small
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-upload {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-upload .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-upload .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-upload .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-ywda4g" title="O ponto final de upload" method="POST" path="/_agent-native/file-upload" summary={"Faça upload de um arquivo por meio do provedor ativo e receba de volta um URL público."} request={{
   "contentType": "multipart/form-data"
 }} responses={[