@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/pt-BR/database.mdx

@@ -7,13 +7,61 @@ description: "Conecte um banco de dados SQL portátil ao seu aplicativo nativo d
 
 Os aplicativos nativos do agente usam [Drizzle ORM](https://orm.drizzle.team) e oferecem suporte a back-ends SQL portáteis. Para qualquer coisa além do desenvolvimento local, conecte um banco de dados SQL persistente — Postgres, libSQL/Turso ou outro back-end compatível com Drizzle — configurando `DATABASE_URL`. Quando essa variável não é definida, o aplicativo volta para um arquivo SQLite local com configuração zero para que você possa começar a desenvolver imediatamente.
 
-```an-diagram title="Um esquema, muitos back-ends" summary="O código do aplicativo usa os auxiliares independentes de dialeto da estrutura. O dialeto é detectado automaticamente em DATABASE_URL em tempo de execução; unset significa um arquivo SQLite local."
-{
-  "html": "<div class=\"diagram-db\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">@agent-native/core/db/schema</span><small class=\"diagram-muted\">table · text · integer · real · now</small><small class=\"diagram-muted\">+ Drizzle query DSL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>DATABASE_URL<br><small class=\"diagram-muted\">dialect auto-detected</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Postgres<br><small class=\"diagram-muted\">Neon · Supabase</small></span><span class=\"diagram-pill\">libSQL / Turso</span><span class=\"diagram-pill\">Cloudflare D1</span><span class=\"diagram-pill warn\">SQLite file<br><small class=\"diagram-muted\">unset = local dev only</small></span></div></div>",
-  "css": ".diagram-db{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-db .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-db .diagram-arrow{font-size:22px;line-height:1}.diagram-db .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-16ajvk8" title="Um esquema, muitos back-ends" summary={"O código do aplicativo usa os auxiliares independentes de dialeto da estrutura. O dialeto é detectado automaticamente em DATABASE_URL em tempo de execução; unset significa um arquivo SQLite local."}>
+
+```html
+<div class="diagram-db">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">@agent-native/core/db/schema</span
+    ><small class="diagram-muted">table · text · integer · real · now</small
+    ><small class="diagram-muted">+ Drizzle query DSL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    DATABASE_URL<br /><small class="diagram-muted">dialect auto-detected</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill"
+      >Postgres<br /><small class="diagram-muted">Neon · Supabase</small></span
+    ><span class="diagram-pill">libSQL / Turso</span
+    ><span class="diagram-pill">Cloudflare D1</span
+    ><span class="diagram-pill warn"
+      >SQLite file<br /><small class="diagram-muted"
+        >unset = local dev only</small
+      ></span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-db {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-db .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-db .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-db .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 ## Padrão local: arquivo SQLite {#default-sqlite}
 
 Quando `DATABASE_URL` não está definido, o aplicativo cria um banco de dados SQLite em `data/app.db`. Este é o padrão de configuração zero para desenvolvimento local – nenhuma configuração é necessária. Destina-se apenas ao desenvolvimento; para produção, defina `DATABASE_URL` como um banco de dados SQL persistente.

package/docs/content/locales/pt-BR/deployment.mdx

@@ -28,13 +28,60 @@ npx @agent-native/core@latest deploy
 
 Cada aplicativo é criado com `APP_BASE_PATH=/<name>` e `VITE_APP_BASE_PATH=/<name>` e, em seguida, empacotado para a predefinição Nitro de destino. Cloudflare Pages é a predefinição padrão e usa um expedidor trabalhador gerado em `dist/_worker.js`; Netlify usa uma função por aplicativo em `.netlify/functions-internal/<app>-server` mais redirecionamentos gerados; Vercel grava um `.vercel/output` em nível de espaço de trabalho usando Build Output API.
 
-```an-diagram title="Uma origem, muitos aplicativos" summary="Cada aplicativo de espaço de trabalho é construído com seu próprio caminho base e montado sob um prefixo de caminho em uma única origem - portanto, o login e o cross-app A2A são da mesma origem e gratuitos."
-{
-  "html": "<div class=\"diagram-ws\"><div class=\"diagram-panel\" data-rough><strong>https://your-agents.com</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/mail/*</span><small class=\"diagram-muted\">apps/mail</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/calendar/*</span><small class=\"diagram-muted\">apps/calendar</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/forms/*</span><small class=\"diagram-muted\">apps/forms</small></div></div><div class=\"diagram-col wins\"><span class=\"diagram-pill ok\">shared login session</span><span class=\"diagram-pill ok\">A2A entre apps sem configuração</span></div></div>",
-  "css": ".diagram-ws{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-ws .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-ws .diagram-row{display:flex;align-items:center;gap:8px}.diagram-ws .wins{display:flex;flex-direction:column;gap:8px;align-items:flex-start}"
+<Diagram id="doc-block-n4oodk" title="Uma origem, muitos aplicativos" summary={"Cada aplicativo de espaço de trabalho é construído com seu próprio caminho base e montado sob um prefixo de caminho em uma única origem - portanto, o login e o cross-app A2A são da mesma origem e gratuitos."}>
+
+```html
+<div class="diagram-ws">
+  <div class="diagram-panel" data-rough>
+    <strong>https://your-agents.com</strong>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/mail/*</span
+      ><small class="diagram-muted">apps/mail</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/calendar/*</span
+      ><small class="diagram-muted">apps/calendar</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/forms/*</span
+      ><small class="diagram-muted">apps/forms</small>
+    </div>
+  </div>
+  <div class="diagram-col wins">
+    <span class="diagram-pill ok">shared login session</span
+    ><span class="diagram-pill ok">A2A entre apps sem configuração</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-ws {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-ws .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+.diagram-ws .diagram-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-ws .wins {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
 }
 ```
 
+</Diagram>
+
 A implantação da mesma origem oferece duas grandes vitórias gratuitamente:
 
 - **Sessão de login compartilhada** — faça login em qualquer aplicativo, todos os aplicativos estarão conectados.
@@ -95,13 +142,61 @@ Quando você executa `npx @agent-native/core@latest build`, Nitro cria o cliente
 
 A saída é independente – copie `.output/` para qualquer ambiente e execute-o.
 
-```an-diagram title="Construa para implantar" summary="Uma árvore de origem é construída para uma predefinição Nitro; a mesma saída independente é executada em Node, Vercel, Netlify, Cloudflare, AWS ou Deno. Cada instância aponta para o mesmo DATABASE_URL persistente."
-{
-  "html": "<div class=\"diagram-deploy\"><div class=\"diagram-box\" data-rough>Fonte do app</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">build</span><small class=\"diagram-muted\">Nitro preset</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Node.js</span><span class=\"diagram-pill\">Vercel</span><span class=\"diagram-pill\">Netlify</span><span class=\"diagram-pill\">Cloudflare</span><span class=\"diagram-pill\">AWS Lambda</span><span class=\"diagram-pill\">Deno</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>DATABASE_URL persistente<br><small class=\"diagram-muted\">shared by every instance</small></div></div>",
-  "css": ".diagram-deploy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-deploy .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-deploy .diagram-arrow{font-size:22px;line-height:1}.diagram-deploy .diagram-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-erbaf0" title="Construa para implantar" summary={"Uma árvore de origem é construída para uma predefinição Nitro; a mesma saída independente é executada em Node, Vercel, Netlify, Cloudflare, AWS ou Deno. Cada instância aponta para o mesmo DATABASE_URL persistente."}>
+
+```html
+<div class="diagram-deploy">
+  <div class="diagram-box" data-rough>Fonte do app</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">build</span
+    ><small class="diagram-muted">Nitro preset</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill">Node.js</span
+    ><span class="diagram-pill">Vercel</span
+    ><span class="diagram-pill">Netlify</span
+    ><span class="diagram-pill">Cloudflare</span
+    ><span class="diagram-pill">AWS Lambda</span
+    ><span class="diagram-pill">Deno</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    DATABASE_URL persistente<br /><small class="diagram-muted"
+      >shared by every instance</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-deploy {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-deploy .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-deploy .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-deploy .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 ## Configurando a predefinição {#setting-the-preset}
 
 Por padrão, Nitro é compilado para Node.js. Para atingir uma plataforma diferente, defina a predefinição em seu `vite.config.ts`:

package/docs/content/locales/pt-BR/dispatch.mdx

@@ -11,13 +11,66 @@ Dispatch é o aplicativo central que fica na frente de todos os outros aplicativ
 
 Sem o Dispatch, cada aplicativo em um espaço de trabalho com vários aplicativos acaba reimplementando o mesmo encanamento: seu próprio bot Slack, seu próprio armazenamento secreto, seus próprios trabalhos agendados, sua própria cópia das instruções do espaço de trabalho. A rotação de uma chave API se transforma em dez reimplantações. Adicionar uma nova política se transforma em dez copiar e colar. O Dispatch centraliza tudo isso em um aplicativo para que os outros permaneçam focados em seus domínios.
 
-```an-diagram title="Dispatch como plano de controle do espaço de trabalho" summary="Uma caixa de entrada, um cofre, um gateway MCP e recursos compartilhados ficam na frente dos aplicativos de domínio, que Dispatch alcança como pares A2A."
-{
-  "html": "<div class=\"dsp-hub\"><div class=\"diagram-node\">Users &amp; external agents<br><small class=\"diagram-muted\">Slack · e-mail · Telegram · WhatsApp · MCP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel dsp-control\" data-rough><span class=\"diagram-pill accent\">Dispatch &mdash; control plane</span><div class=\"dsp-caps\"><span class=\"diagram-pill\">Caixa de entrada central</span><span class=\"diagram-pill\">Cofre de segredos</span><span class=\"diagram-pill\">Delegação entre apps</span><span class=\"diagram-pill\">MCP gateway</span><span class=\"diagram-pill\">Recursos do workspace</span></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"dsp-peers\"><div class=\"diagram-box\" data-rough>Mail</div><div class=\"diagram-box\" data-rough>Calendar</div><div class=\"diagram-box\" data-rough>Analytics</div></div><small class=\"diagram-muted\">domain apps &mdash; A2A peers</small></div>",
-  "css": ".dsp-hub{display:flex;flex-direction:column;align-items:center;gap:10px}.dsp-hub .dsp-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dsp-hub .dsp-caps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.dsp-hub .dsp-peers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}"
+<Diagram id="doc-block-99a3t2" title={"Dispatch como plano de controle do espaço de trabalho"} summary={"Uma caixa de entrada, um cofre, um gateway MCP e recursos compartilhados ficam na frente dos aplicativos de domínio, que Dispatch alcança como pares A2A."}>
+
+```html
+<div class="dsp-hub">
+  <div class="diagram-node">
+    Users &amp; external agents<br /><small class="diagram-muted"
+      >Slack · e-mail · Telegram · WhatsApp · MCP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel dsp-control" data-rough>
+    <span class="diagram-pill accent">Dispatch &mdash; control plane</span>
+    <div class="dsp-caps">
+      <span class="diagram-pill">Caixa de entrada central</span
+      ><span class="diagram-pill">Cofre de segredos</span
+      ><span class="diagram-pill">Delegação entre apps</span
+      ><span class="diagram-pill">MCP gateway</span
+      ><span class="diagram-pill">Recursos do workspace</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="dsp-peers">
+    <div class="diagram-box" data-rough>Mail</div>
+    <div class="diagram-box" data-rough>Calendar</div>
+    <div class="diagram-box" data-rough>Analytics</div>
+  </div>
+  <small class="diagram-muted">domain apps &mdash; A2A peers</small>
+</div>
+```
+
+```css
+.dsp-hub {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.dsp-hub .dsp-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.dsp-hub .dsp-caps {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dsp-hub .dsp-peers {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 ```
 
+</Diagram>
+
 ## Quando você deseja despacho {#when}
 
 Entre em contato com o Dispatch quando alguma destas situações for verdadeira:
@@ -108,13 +161,86 @@ Examine um exemplo de ponta a ponta. Um usuário manda uma DM para o bot: _"resu
 4. **Resposta postada no tópico.** O agente de análise retorna um resultado. O Dispatch o formata e publica de volta no mesmo thread Slack em que o usuário escreveu, usando a identidade vinculada, se houver (para que o agente atue com as permissões do solicitante, não do proprietário do espaço de trabalho).
 5. **Recuperação se alguma coisa morrer.** Se o processador travar no meio do voo — tempo limite A2A, erro do agente downstream, congelamento de função — um trabalho de nova tentativa varre tarefas travadas a cada 60 segundos e reinicia o processador. Até três tentativas antes que a tarefa seja marcada como `failed`.
 
-```an-diagram title="Uma mensagem Slack através de Dispatch" summary="Slack é enfileirado em SQL, uma nova execução o esgota, o agente Dispatch delega o trabalho do domínio em A2A e a resposta retorna ao thread de origem. Uma nova tentativa dos anos 60 recupera qualquer coisa que morra no meio do voo."
-{
-  "html": "<div class=\"dsp-flow\"><div class=\"dsp-row\"><div class=\"diagram-node\">DM do Slack<br><small class=\"diagram-muted\">\"summarize last week's signups\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/slack/webhook</strong><br><small class=\"diagram-muted\">verifica + INSERT tarefa pendente</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">200</div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough><strong>fresh processor</strong><br><small class=\"diagram-muted\">assume tarefa · inicia loop do agente</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\">O agente Dispatch decide</span><small class=\"diagram-muted\">analytics intent &rarr; call-agent</small></div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough>App de analytics<br><small class=\"diagram-muted\">par A2A · executa o trabalho SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">reply posted in thread</div></div><div class=\"diagram-panel dsp-retry\" data-rough><span class=\"diagram-pill warn\">recovery</span> <span class=\"diagram-muted\">if the processor crashes &mdash; A2A timeout, downstream error, freeze &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply still arrives</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</span></div></div>",
-  "css": ".dsp-flow{display:flex;flex-direction:column;gap:12px}.dsp-flow .dsp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dsp-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.dsp-flow .dsp-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-lhilyt" title={"Uma mensagem Slack através de Dispatch"} summary={"Slack é enfileirado em SQL, uma nova execução o esgota, o agente Dispatch delega o trabalho do domínio em A2A e a resposta retorna ao thread de origem. Uma nova tentativa dos anos 60 recupera qualquer coisa que morra no meio do voo."}>
+
+```html
+<div class="dsp-flow">
+  <div class="dsp-row">
+    <div class="diagram-node">
+      DM do Slack<br /><small class="diagram-muted"
+        >"summarize last week's signups"</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>
+      <strong>/slack/webhook</strong><br /><small class="diagram-muted"
+        >verifica + INSERT tarefa pendente</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">200</div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      <strong>fresh processor</strong><br /><small class="diagram-muted"
+        >assume tarefa · inicia loop do agente</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">O agente Dispatch decide</span
+      ><small class="diagram-muted">analytics intent &rarr; call-agent</small>
+    </div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      App de analytics<br /><small class="diagram-muted"
+        >par A2A · executa o trabalho SQL</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">reply posted in thread</div>
+  </div>
+  <div class="diagram-panel dsp-retry" data-rough>
+    <span class="diagram-pill warn">recovery</span>
+    <span class="diagram-muted"
+      >if the processor crashes &mdash; A2A timeout, downstream error, freeze
+      &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply
+      still arrives</span
+    >
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</span>
+  </div>
+</div>
+```
+
+```css
+.dsp-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dsp-flow .dsp-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dsp-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.dsp-flow .dsp-retry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 O mesmo fluxo se aplica a e-mail, Telegram e WhatsApp — apenas o adaptador muda.
 
 ## História de confiabilidade {#reliability}

package/docs/content/locales/pt-BR/drop-in-agent.mdx

@@ -27,13 +27,72 @@ Você não precisa criar um agente nativo do zero. O bate-papo do agente, a guia
 
 Todos eles são exportados de `@agent-native/core/client`.
 
-```an-diagram title="O modelo de montagem" summary="<AgentSidebar> envolve seu layout existente. Suas rotas são renderizadas na área principal; o painel do agente é montado ao lado deles. <AgentPanel> é o mesmo painel sem o wrapper."
-{
-  "html": "<div class=\"diagram-mount\"><div class=\"diagram-box sidebar\" data-rough><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><div class=\"inner\"><div class=\"diagram-node main\">Seu aplicativo<br><small class=\"diagram-muted\">children: header + &lt;Outlet/&gt;</small></div><div class=\"diagram-node panel\">Painel do agente<br><small class=\"diagram-muted\">chat &middot; CLI &middot; workspace</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card alt\"><span class=\"diagram-pill\">&lt;AgentPanel&gt;</span><small class=\"diagram-muted\">same panel, no wrapper &mdash; you own the layout</small></div></div>",
-  "css": ".diagram-mount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mount .sidebar{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-mount .inner{display:flex;gap:10px}.diagram-mount .main{flex:2}.diagram-mount .panel{flex:1}.diagram-mount .alt{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-mount .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-kyw6fz" title="O modelo de montagem" summary={"<AgentSidebar> envolve seu layout existente. Suas rotas são renderizadas na área principal; o painel do agente é montado ao lado deles. <AgentPanel> é o mesmo painel sem o wrapper."}>
+
+```html
+<div class="diagram-mount">
+  <div class="diagram-box sidebar" data-rough>
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span>
+    <div class="inner">
+      <div class="diagram-node main">
+        Seu aplicativo<br /><small class="diagram-muted"
+          >children: header + &lt;Outlet/&gt;</small
+        >
+      </div>
+      <div class="diagram-node panel">
+        Painel do agente<br /><small class="diagram-muted"
+          >chat &middot; CLI &middot; workspace</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card alt">
+    <span class="diagram-pill">&lt;AgentPanel&gt;</span
+    ><small class="diagram-muted"
+      >same panel, no wrapper &mdash; you own the layout</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mount {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mount .sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-mount .inner {
+  display: flex;
+  gap: 10px;
+}
+.diagram-mount .main {
+  flex: 2;
+}
+.diagram-mount .panel {
+  flex: 1;
+}
+.diagram-mount .alt {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-mount .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## O caso 80%: `<AgentSidebar>` {#sidebar}
 
 A configuração mais comum é uma barra lateral que abre à direita em qualquer tela.

package/docs/content/locales/pt-BR/durable-resume.mdx

@@ -13,13 +13,56 @@ As execuções do agente hospedado são interrompidas: uma função sem servidor
 
 Um currículo durável preenche essa lacuna. Resumindo, a estrutura sabe quais chamadas de ferramentas de efeitos colaterais já foram concluídas e se recusa a executá-las novamente – em duas camadas.
 
-```an-diagram title="Duas camadas bloqueiam efeitos colaterais duplicados no currículo" summary="O diário lê o livro-razão durável e classifica as chamadas anteriores; a camada 1 informa ao modelo, a camada 2 bloqueia uma gravação reenviada que corresponde a uma entrada concluída."
-{
-  "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">Camada 2 · escrita redisparada com bloqueio rígido</div></div></div>",
-  "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-23xzov" title={"Duas camadas bloqueiam efeitos colaterais duplicados no currículo"} summary={"O diário lê o livro-razão durável e classifica as chamadas anteriores; a camada 1 informa ao modelo, a camada 2 bloqueia uma gravação reenviada que corresponde a uma entrada concluída."}>
+
+```html
+<div class="diagram-durable">
+  <div class="diagram-box" data-rough>
+    Run-event ledger<br /><small class="diagram-muted"
+      >tool_start / tool_done</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Tool-call journal</strong
+    ><small class="diagram-ok">completed = start+done</small
+    ><small class="diagram-warn">interrupted = start, no done</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Layer 1 · prompt note &rarr; model</div>
+    <div class="diagram-pill accent">
+      Camada 2 · escrita redisparada com bloqueio rígido
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-durable {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-durable .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-durable .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-durable .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## O diário de chamadas de ferramenta {#journal}
 
 O diário é uma **leitura pura do registro durável de eventos de execução** — não há nenhum novo gancho de gravação no caminho ativo. Classifica as chamadas de ferramenta já gravadas para o turno atual:

package/docs/content/locales/pt-BR/embedding-sdk.mdx

@@ -11,13 +11,58 @@ já estou usando. Se você ainda está decidindo entre agentes sem cabeça, chat
 arquivo secundário incorporado ou um aplicativo completo, comece com
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="A membrana de incorporação" summary="O aplicativo host fornece autenticação do lado do servidor e contexto de página ativa; Agent-Native executa o sidecar durável e acessa a guia aberta por meio de ações do cliente e comandos do host."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>App SaaS host</strong><small class=\"diagram-muted\">sua UI, sua autenticação</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; ações do cliente</div><div class=\"diagram-pill\">&larr; comandos do host</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">chat durável · estado do app · extensões</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">tabelas do framework</small></div></div>",
-  "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-93byob" title={"A membrana de incorporação"} summary={"O aplicativo host fornece autenticação do lado do servidor e contexto de página ativa; Agent-Native executa o sidecar durável e acessa a guia aberta por meio de ações do cliente e comandos do host."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-box" data-rough>
+    <strong>App SaaS host</strong
+    ><small class="diagram-muted">sua UI, sua autenticação</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">getContext &rarr;</div>
+    <div class="diagram-pill">&larr; ações do cliente</div>
+    <div class="diagram-pill">&larr; comandos do host</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Agent-Native sidecar</strong
+    ><small class="diagram-muted"
+      >chat durável · estado do app · extensões</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL<br /><small class="diagram-muted">tabelas do framework</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Comece aqui: o plugin com baterias incluídas {#batteries-included}
 
 Para a maioria dos hosts SaaS, **use o tempo de execução integrado completo** — o plug-in do servidor
@@ -373,13 +418,47 @@ const hostTools = createAgentNativeHostTools({
 
 Para um colega de trabalho no estilo CLAW, o iframe também pode registrar sua guia ativa do navegador com o backend sidecar. O agente então obtém ferramentas de back-end normais que enfileiram uma solicitação, o iframe a reivindica, a página host a executa e o back-end retorna o resultado ao agente.
 
-```an-diagram title="Ponte de sessão de navegador mediada por servidor" summary="Uma ferramenta de back-end enfileira o trabalho; a aba registrada reivindica-o, executa-o na página ativa e o resultado retorna ao agente - então um agente backend/Slack/A2A ainda pode tocar na aba aberta."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>Agente backend<br><small class=\"diagram-muted\">conversa · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>A aba ativa assume<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
-  "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-m32le3" title={"Ponte de sessão de navegador mediada por servidor"} summary={"Uma ferramenta de back-end enfileira o trabalho; a aba registrada reivindica-o, executa-o na página ativa e o resultado retorna ao agente - então um agente backend/Slack/A2A ainda pode tocar na aba aberta."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-node" data-rough>
+    Agente backend<br /><small class="diagram-muted"
+      >conversa · Slack · A2A</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    enqueue request<br /><small class="diagram-muted"
+      >/_agent-native/browser-sessions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    A aba ativa assume<br /><small class="diagram-muted"
+      >registered bridge</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">result &rarr; agent</div>
+</div>
+```
+
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 No aplicativo sidecar, inicie a ponte de sessão do navegador uma vez quando o iframe for montado:
 
 ```tsx