@agent-native/core 0.79.26 → 0.79.27

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

@@ -9,13 +9,56 @@ A migração **não é um produto ou modelo separado** — é o produto integrad
 Objetivo `/migrate` dentro do espaço de trabalho [Agent-Native Code](/docs/code-agents-ui).
 Ele é executado como uma sessão normal de código que você pode retomar, anexar, inspecionar e interromper.
 
-```an-diagram title="/migrate é uma sessão de código, não um aplicativo separado" summary="Um caminho, URL, ou descrição entra; a execução compartilha o mesmo armazenamento, transcrição e controles que qualquer outra sessão de código e pode emitir um dossiê portátil."
-{
-  "html": "<div class=\"diagram-migrate\"><div class=\"diagram-col\"><div class=\"diagram-pill\">./local-app</div><div class=\"diagram-pill\">https://example.com</div><div class=\"diagram-pill\">--describe \\\"...\\\"</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">/migrate goal</span><small class=\"diagram-muted\">mesmo store · transcrição · controles de execução</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>App migrado</div><div class=\"diagram-pill ok\">--emit dossier</div></div></div>",
-  "css": ".diagram-migrate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-migrate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-migrate .diagram-arrow{font-size:22px;line-height:1}.diagram-migrate .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1d1h1x6" title={"/migrate é uma sessão de código, não um aplicativo separado"} summary={"Um caminho, URL, ou descrição entra; a execução compartilha o mesmo armazenamento, transcrição e controles que qualquer outra sessão de código e pode emitir um dossiê portátil."}>
+
+```html
+<div class="diagram-migrate">
+  <div class="diagram-col">
+    <div class="diagram-pill">./local-app</div>
+    <div class="diagram-pill">https://example.com</div>
+    <div class="diagram-pill">--describe \"...\"</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">/migrate goal</span
+    ><small class="diagram-muted"
+      >mesmo store · transcrição · controles de execução</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box" data-rough>App migrado</div>
+    <div class="diagram-pill ok">--emit dossier</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-migrate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-migrate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-migrate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-migrate .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ```bash
 npx @agent-native/core@latest code /migrate ./my-next-app --out ../migrated-app
 npx @agent-native/core@latest code /migrate https://example.com --describe "marketing site plus dashboard"

package/corpus/core/docs/content/locales/pt-BR/multi-app-workspace.mdx

@@ -142,13 +142,60 @@ Os aplicativos nativos do agente dentro de um espaço de trabalho resolvem o com
 
 A mesclagem acontece pelo nome do arquivo. Se um aplicativo fornecer um arquivo local que também existe no upstream, o arquivo local vencerá. Caso contrário, a versão compartilhada do espaço de trabalho será aplicada. Se shared também não fornecer um, o padrão da estrutura entra em ação. Isso se aplica aos plug-ins skills, actions e `AGENTS.md`.
 
-```an-diagram title="Três camadas, mescladas por nome de arquivo" summary="Cada aplicativo resolve plug-ins, habilidades, ações e AGENTS.md primeiro do app-local, depois do pacote compartilhado e, em seguida, do padrão da estrutura."
-{
-  "html": "<div class=\"layer\"><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">1 &middot; App local</span><small class=\"diagram-muted\"><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; Workspace shared</span><small class=\"diagram-muted\"><code>packages/shared/</code> &mdash; the mid-layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">3 &middot; Framework default</span><small class=\"diagram-muted\"><code>@agent-native/core</code> &mdash; lowest</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box ok\">first match wins</div></div>",
-  "css": ".layer{display:flex;flex-direction:column;align-items:center;gap:6px}.layer .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 16px;width:320px}.layer .diagram-arrow{font-size:18px;line-height:1}.layer .diagram-box{margin-top:2px}"
+<Diagram id="doc-block-1y2xf74" title={"Três camadas, mescladas por nome de arquivo"} summary={"Cada aplicativo resolve plug-ins, habilidades, ações e AGENTS.md primeiro do app-local, depois do pacote compartilhado e, em seguida, do padrão da estrutura."}>
+
+```html
+<div class="layer">
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">1 &middot; App local</span
+    ><small class="diagram-muted"
+      ><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2 &middot; Workspace shared</span
+    ><small class="diagram-muted"
+      ><code>packages/shared/</code> &mdash; the mid-layer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">3 &middot; Framework default</span
+    ><small class="diagram-muted"
+      ><code>@agent-native/core</code> &mdash; lowest</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&darr;</div>
+  <div class="diagram-box ok">first match wins</div>
+</div>
+```
+
+```css
+.layer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.layer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 16px;
+  width: 320px;
+}
+.layer .diagram-arrow {
+  font-size: 18px;
+  line-height: 1;
+}
+.layer .diagram-box {
+  margin-top: 2px;
 }
 ```
 
+</Diagram>
+
 Quando um aplicativo precisar de algo diferente, solte um arquivo local:
 
 | Coisa a ser substituída         | Arquivo a ser criado dentro do aplicativo                    |
@@ -252,13 +299,49 @@ npx @agent-native/core@latest deploy
 
 Cada aplicativo é construído com `APP_BASE_PATH=/<name>` e `VITE_APP_BASE_PATH=/<name>` e emitido por meio da predefinição Nitro selecionada. Cloudflare Pages é a predefinição padrão e usa um expedidor de trabalho em `dist/_worker.js` mais `_routes.json`. Netlify é compatível com `npx @agent-native/core@latest deploy --preset netlify`; ele emite funções de aplicativo em `.netlify/functions-internal/<app>-server` e gera redirecionamentos que deixam ativos estáticos não forçados para que o CDN sirva os arquivos primeiro. Vercel é compatível com `npx @agent-native/core@latest deploy --preset vercel`; ele grava um pacote raiz `.vercel/output` usando Build Output API do Vercel.
 
-```an-diagram title="Implantação unificada: uma origem, um caminho por aplicativo" summary="Cada aplicativo é fornecido com uma única origem, portanto, as sessões de login e o A2A entre aplicativos são gratuitos."
-{
-  "html": "<div class=\"deploy\"><div class=\"diagram-box accent\">your-agents.com<br><small class=\"diagram-muted\">one DNS record &middot; one cert &middot; one CDN</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"deploy-apps\"><div class=\"diagram-box\">/mail/*</div><div class=\"diagram-box\">/calendar/*</div><div class=\"diagram-box\">/forms/*</div></div><div class=\"diagram-pill ok\">shared login cookie on the apex &bull; same-origin A2A, no CORS</div></div>",
-  "css": ".deploy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.deploy .deploy-apps{display:flex;flex-direction:column;gap:8px}.deploy .diagram-arrow{font-size:24px}.deploy .diagram-pill{flex-basis:100%}"
+<Diagram id="doc-block-1l5ncko" title={"Implantação unificada: uma origem, um caminho por aplicativo"} summary={"Cada aplicativo é fornecido com uma única origem, portanto, as sessões de login e o A2A entre aplicativos são gratuitos."}>
+
+```html
+<div class="deploy">
+  <div class="diagram-box accent">
+    your-agents.com<br /><small class="diagram-muted"
+      >one DNS record &middot; one cert &middot; one CDN</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="deploy-apps">
+    <div class="diagram-box">/mail/*</div>
+    <div class="diagram-box">/calendar/*</div>
+    <div class="diagram-box">/forms/*</div>
+  </div>
+  <div class="diagram-pill ok">
+    shared login cookie on the apex &bull; same-origin A2A, no CORS
+  </div>
+</div>
+```
+
+```css
+.deploy {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.deploy .deploy-apps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.deploy .diagram-arrow {
+  font-size: 24px;
+}
+.deploy .diagram-pill {
+  flex-basis: 100%;
 }
 ```
 
+</Diagram>
+
 Estar na **mesma origem** é onde reside a verdadeira recompensa:
 
 - **Sessão de login compartilhada.** Better Auth define seu cookie no domínio apex, portanto, fazer login em qualquer aplicativo conecta você a todos os aplicativos. Nenhuma dança SSO entre domínios.

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

@@ -19,13 +19,49 @@ Um novo andaime `npx @agent-native/core@latest create` já vem com:
 
 Se você estiver avaliando agente nativo para um CRM, rastreador de projeto, caixa de entrada de suporte ou qualquer ferramenta de equipe, a base multilocatário já está lá. Todos os modelos próprios são multilocatários. Consulte [Cloneable SaaS templates](/docs/cloneable-saas) para ver a lista.
 
-```an-diagram title="Associação e isolamento da organização" summary="Os usuários ingressam em organizações como owner/admin/member. Cada linha proprietária carrega o org_id do locatário que a possui e nenhuma linha vaza através do limite."
-{
-  "html": "<div class=\"mt-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org. A</span><small class=\"diagram-muted\">members: alice (owner), bob (member)</small><div class=\"diagram-box\">rows where org_id = A</div></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org. B</span><small class=\"diagram-muted\">members: carol (owner)</small><div class=\"diagram-box\">rows where org_id = B</div></div></div><div class=\"mt-wall\" aria-hidden=\"true\"><span class=\"diagram-pill warn\">no cross-org reads</span></div>",
-  "css": ".mt-grid{display:flex;gap:16px;flex-wrap:wrap}.mt-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;flex:1;min-width:200px}.mt-wall{display:flex;justify-content:center;margin-top:12px}"
+<Diagram id="doc-block-nfti3p" title={"Associação e isolamento da organização"} summary={"Os usuários ingressam em organizações como owner/admin/member. Cada linha proprietária carrega o org_id do locatário que a possui e nenhuma linha vaza através do limite."}>
+
+```html
+<div class="mt-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Org. A</span
+    ><small class="diagram-muted">members: alice (owner), bob (member)</small>
+    <div class="diagram-box">rows where org_id = A</div>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Org. B</span
+    ><small class="diagram-muted">members: carol (owner)</small>
+    <div class="diagram-box">rows where org_id = B</div>
+  </div>
+</div>
+<div class="mt-wall" aria-hidden="true">
+  <span class="diagram-pill warn">no cross-org reads</span>
+</div>
+```
+
+```css
+.mt-grid {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.mt-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 200px;
+}
+.mt-wall {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## O alternador organizacional UI {#org-switcher}
 
 O org-switcher e os membros UI são renderizados em cada modelo sem código extra. Eles conduzem as rotas REST da organização principal em `/_agent-native/org/*` (criar organização, alternar organização, listar/convidar/remover membros, alterar funções, definir domínio de e-mail permitido). Os usuários escolhem a organização ativa no switcher; o painel de membros lida com convites e mudanças de função.
@@ -36,13 +72,49 @@ Este é o módulo `org/` da própria estrutura, não o plugin de organização d
 
 Os dados do locatário são isolados por uma coluna `org_id` (adicionada por `ownableColumns()`), e a estrutura define o escopo de cada consulta para a organização ativa automaticamente: `session.orgId → AGENT_ORG_ID → SQL`. Quando um usuário troca de organização, UI, actions e agente veem apenas os dados dessa organização. O agente não consegue acessar os dados de uma organização da qual o usuário não é membro.
 
-```an-diagram title="Da sessão ao escopo SQL" summary="A organização ativa na sessão torna-se AGENT_ORG_ID, que a estrutura incorpora na cláusula WHERE de cada consulta."
-{
-  "html": "<div class=\"mt-pipe\"><div class=\"diagram-node\">session.orgId<br><small class=\"diagram-muted\">active org on session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">AGENT_ORG_ID<br><small class=\"diagram-muted\">request context</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL row scoping<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div></div>",
-  "css": ".mt-pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.mt-pipe .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-uppcw" title={"Da sessão ao escopo SQL"} summary={"A organização ativa na sessão torna-se AGENT_ORG_ID, que a estrutura incorpora na cláusula WHERE de cada consulta."}>
+
+```html
+<div class="mt-pipe">
+  <div class="diagram-node">
+    session.orgId<br /><small class="diagram-muted"
+      >active org on session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    AGENT_ORG_ID<br /><small class="diagram-muted">request context</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    SQL row scoping<br /><small class="diagram-muted"
+      >WHERE owner_email = ? AND org_id = ?</small
+    >
+  </div>
+</div>
+```
+
+```css
+.mt-pipe {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mt-pipe .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.mt-pipe .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Este é o mesmo pipeline usado para escopo por usuário. Para a mecânica de nível SQL, o contrato `ownableColumns()` e os protetores `accessFilter`/`resolveAccess`/`assertAccess`, consulte [Security → Data Scoping](/docs/security#data-scoping) — a única fonte de verdade para o pipeline de escopo.
 
 ## Documentos relacionados {#related}

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

@@ -17,13 +17,65 @@ controles de aprovação/negação ou links para visualizações de aplicativos.
 quando um host externo como Claude, ChatGPT, Copilot ou Cursor deve ser renderizado
 uma rota in-line do seu aplicativo.
 
-```an-diagram title="O caminho de renderização nativo" summary="Uma ação retorna JSON; o tempo de execução corresponde a um discriminante de widget explícito ou chatUI.renderer; AssistantChat monta um componente React real. Sem iframe, sem execução de HTML."
-{
-  "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">Ação executa<br><small class=\"diagram-muted\">retorna JSON estruturado</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\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">monta um widget React</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
-  "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1k5139p" title={"O caminho de renderização nativo"} summary={"Uma ação retorna JSON; o tempo de execução corresponde a um discriminante de widget explícito ou chatUI.renderer; AssistantChat monta um componente React real. Sem iframe, sem execução de HTML."}>
+
+```html
+<div class="diagram-render">
+  <div class="diagram-node">
+    Ação executa<br /><small class="diagram-muted"
+      >retorna JSON estruturado</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">Match</span
+    ><small class="diagram-muted"
+      >explicit widget &middot; chatUI.renderer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;AssistantChat&gt;<br /><small class="diagram-muted"
+      >monta um widget React</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill ok">DataTable</div>
+    <div class="diagram-pill ok">DataChart</div>
+    <div class="diagram-pill ok">DataInsights</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-render {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-render .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-render .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+}
+.diagram-render .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Widgets declarados por ação {#action-declared-widgets}
 
 O caminho nativo tem duas partes explícitas:
@@ -208,13 +260,61 @@ pontos do tutorial aqui para a história do tempo de execução e [Component API
 lista cada conector e adaptador com seu caminho de importação; o contrato em si é
 descrito abaixo.
 
-```an-diagram title="O tempo de execução BYO mantém o shell de bate-papo Agent-Native" summary="Seu agente externo transmite eventos normalizados por meio de um conector; Agent-Native mantém o compositor, a transcrição, os cartões de ferramentas, as aprovações e os widgets nativos."
-{
-  "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>Seu agente<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">eventos message-* / tool-* normalizados</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
-  "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-2rq7jl" title={"O tempo de execução BYO mantém o shell de bate-papo Agent-Native"} summary={"Seu agente externo transmite eventos normalizados por meio de um conector; Agent-Native mantém o compositor, a transcrição, os cartões de ferramentas, as aprovações e os widgets nativos."}>
+
+```html
+<div class="diagram-byo">
+  <div class="diagram-box" data-rough>
+    Seu agente<br /><small class="diagram-muted"
+      >OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot;
+      HTTP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">connector</span
+    ><small class="diagram-muted"
+      >eventos message-* / tool-* normalizados</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill">&lt;AssistantChat runtime=&hellip; /&gt;</div>
+    <small class="diagram-muted"
+      >composer &middot; transcript &middot; tool cards</small
+    ><small class="diagram-muted">approvals &middot; native widgets</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-byo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-byo .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-byo .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-byo .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Todos os conectores são exportados de `@agent-native/core/client/chat` (e da raiz
 entrada `@agent-native/core/client`). Use o tempo de execução genérico HTTP quando seu agente
 pode expor um endpoint POST que retorna eventos de tempo de execução SSE ou NDJSON:

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

@@ -18,13 +18,84 @@ await notify(
 );
 ```
 
-```an-diagram title="Uma chamada, muitos destinos" summary="notify() sempre grava a linha da caixa de entrada com escopo do proprietário, espalha todos os canais registrados em paralelo (melhor esforço) e emite warning.sent no barramento de eventos."
-{
-  "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
-  "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-16x7wpy" title="Uma chamada, muitos destinos" summary={"notify() sempre grava a linha da caixa de entrada com escopo do proprietário, espalha todos os canais registrados em paralelo (melhor esforço) e emite warning.sent no barramento de eventos."}>
+
+```html
+<div class="diagram-notify">
+  <div class="diagram-node">
+    notify(input, { owner })<br /><small class="diagram-muted"
+      >any server code &middot; action, automation, plugin</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel fan" data-rough>
+    <div class="fan-row">
+      <span class="diagram-pill accent">inbox</span>
+      <div class="diagram-box" data-rough>
+        notifications table &rarr; bell UI<br /><small class="diagram-muted"
+          >always on &middot; owner-scoped</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">webhook</span>
+      <div class="diagram-box" data-rough>
+        POST JSON to NOTIFICATIONS_WEBHOOK_URL<br /><small class="diagram-muted"
+          >best-effort</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">custom</span>
+      <div class="diagram-box" data-rough>
+        registerNotificationChannel(...)<br /><small class="diagram-muted"
+          >best-effort &middot; runs in parallel</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">notification.sent</span
+    ><small class="diagram-muted"
+      >event bus &middot; automations can chain</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-notify {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-notify .fan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+.diagram-notify .fan-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-notify .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-notify .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Gravidades {#severities}
 
 | Gravidade  | Usar para                              |
@@ -44,13 +115,69 @@ A gravidade orienta o estilo do selo no menu suspenso e é transmitida aos canai
 
 O canal webhook resolve referências `${keys.NAME}` em URL e `NOTIFICATIONS_WEBHOOK_AUTH` em relação ao [secrets](/docs/security) ad-hoc do proprietário, de forma que o valor bruto nunca entre no contexto do agente. As listas de permissões URL por chave são aplicadas – a mesma regra que a ferramenta de automações `web-request` usa.
 
-```an-diagram title="Canais e gravidade" summary="a caixa de entrada está sempre ativada; o webhook precisa de um env var; canais personalizados são registrados na inicialização. A severidade impulsiona o estilo do emblema e é transmitida a todos os canais."
-{
-  "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>A gravidade define o badge</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">confirmações, FYI</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
-  "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"
+<Diagram id="doc-block-1b6ozy6" title="Canais e gravidade" summary={"a caixa de entrada está sempre ativada; o webhook precisa de um env var; canais personalizados são registrados na inicialização. A severidade impulsiona o estilo do emblema e é transmitida a todos os canais."}>
+
+```html
+<div class="diagram-channels">
+  <div class="diagram-panel col" data-rough>
+    <strong>Channels</strong>
+    <div class="diagram-box" data-rough>
+      inbox<br /><small class="diagram-muted"
+        >always on &mdash; part of the primitive</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      webhook<br /><small class="diagram-muted"
+        >needs NOTIFICATIONS_WEBHOOK_URL</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      custom<br /><small class="diagram-muted"
+        >registerNotificationChannel()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-panel col" data-rough>
+    <strong>A gravidade define o badge</strong>
+    <div class="sev-row">
+      <span class="diagram-pill">info</span
+      ><span class="diagram-muted">confirmações, FYI</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">warning</span
+      ><span class="diagram-muted">look at soon</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill accent">critical</span
+      ><span class="diagram-muted">needs immediate attention</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-channels {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.diagram-channels .col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  min-width: 240px;
+}
+.diagram-channels .sev-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 ```
 
+</Diagram>
+
 ## API {#api}
 
 ### `notify(input, meta)` {#notify}