@agent-native/core 0.79.26 → 0.80.0

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

@@ -29,13 +29,77 @@ Existem dois caminhos de agente:
 
 Em ambos os casos, seu agente principal vê a resposta e pode referenciá-la ou aproveitá-la.
 
-```an-diagram title="Onde uma @-menção direciona" summary="O servidor divide cada menção por tipo: agentes personalizados são executados localmente, agentes conectados passam por A2A — ambas as respostas voltam ao contexto do agente principal."
-{
-  "html": "<div class=\"diagram-mention\"><div class=\"diagram-node\">@-mention<br><small class=\"diagram-muted\">in the composer</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\">Servidor resolve</span><small class=\"diagram-muted\">extract refs by type</small></div><div class=\"diagram-col\"><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">Agente personalizado<br><small class=\"diagram-muted\">agents/*.md &middot; runs local</small></div></div><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">Agente conectado<br><small class=\"diagram-muted\">A2A peer &middot; remote call</small></div></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box diagram-accent\">&lt;agent-response&gt;<br><small class=\"diagram-muted\">injected into main agent</small></div></div>",
-  "css": ".diagram-mention{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-mention .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-mention .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mention .row{display:flex;align-items:center;gap:8px}.diagram-mention .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ta9yf8" title={"Onde uma @-menção direciona"} summary={"O servidor divide cada menção por tipo: agentes personalizados são executados localmente, agentes conectados passam por A2A — ambas as respostas voltam ao contexto do agente principal."}>
+
+```html
+<div class="diagram-mention">
+  <div class="diagram-node">
+    @-mention<br /><small class="diagram-muted">in the composer</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">Servidor resolve</span
+    ><small class="diagram-muted">extract refs by type</small>
+  </div>
+  <div class="diagram-col">
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        Agente personalizado<br /><small class="diagram-muted"
+          >agents/*.md &middot; runs local</small
+        >
+      </div>
+    </div>
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        Agente conectado<br /><small class="diagram-muted"
+          >A2A peer &middot; remote call</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box diagram-accent">
+    &lt;agent-response&gt;<br /><small class="diagram-muted"
+      >injected into main agent</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mention {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mention .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-mention .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mention .row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-mention .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Como funciona {#how-it-works}
 
 Quando uma mensagem contendo uma menção `@` é enviada, acontece o seguinte no servidor:

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

@@ -25,13 +25,69 @@ São etapas, não produtos separados. Um fluxo de trabalho pode começar sem int
 agente com uma ação, aparece no chat como uma tabela ou gráfico e depois se torna um
 tela inteira em um aplicativo sem alterar a operação que o agente chama.
 
-```an-diagram title="O espectro de superfície" summary="Uma superfície de ação, quatro formatos de produto – cada um adiciona UI sem alterar a operação subjacente."
-{
-  "html": "<div class=\"diagram-spectrum\"><div class=\"diagram-card\"><strong>Headless</strong><small class=\"diagram-muted\">actions, jobs, scripts, outros agentes</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Chat enriquecido</strong><small class=\"diagram-muted\">composer, transcrição, cards de ferramentas</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Sidecar incorporado</strong><small class=\"diagram-muted\">agent beside an existing app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">maior parte do UI</span><strong>Aplicação completa</strong><small class=\"diagram-muted\">telas duráveis, dados, colaboração</small></div></div><div class=\"diagram-base\" data-rough><span class=\"diagram-muted\">mesmas actions · mesmo SQL · mesmo loop do agente</span></div>",
-  "css": ".diagram-spectrum{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-spectrum .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px;flex:1}.diagram-spectrum .diagram-arrow{align-self:center;font-size:22px;line-height:1}.diagram-base{margin-top:12px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-10jsx4d" title={"O espectro de superfície"} summary={"Uma superfície de ação, quatro formatos de produto – cada um adiciona UI sem alterar a operação subjacente."}>
+
+```html
+<div class="diagram-spectrum">
+  <div class="diagram-card">
+    <strong>Headless</strong
+    ><small class="diagram-muted">actions, jobs, scripts, outros agentes</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Chat enriquecido</strong
+    ><small class="diagram-muted"
+      >composer, transcrição, cards de ferramentas</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Sidecar incorporado</strong
+    ><small class="diagram-muted">agent beside an existing app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">maior parte do UI</span
+    ><strong>Aplicação completa</strong
+    ><small class="diagram-muted">telas duráveis, dados, colaboração</small>
+  </div>
+</div>
+<div class="diagram-base" data-rough>
+  <span class="diagram-muted"
+    >mesmas actions · mesmo SQL · mesmo loop do agente</span
+  >
+</div>
+```
+
+```css
+.diagram-spectrum {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-spectrum .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 150px;
+  flex: 1;
+}
+.diagram-spectrum .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-base {
+  margin-top: 12px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## Agente sem cabeça {#headless}
 
 Use o caminho sem cabeça quando ninguém precisar olhar para a tela de um aplicativo personalizado enquanto
@@ -347,13 +403,65 @@ export function AppShell({ children }) {
 }
 ```
 
-```an-diagram title="Como o sidecar faz a ponte para um aplicativo host" summary="O plugin monta rotas Agent-Native no lado do servidor; o sidecar React transmite o contexto da página e sai dos comandos do host."
-{
-  "html": "<div class=\"diagram-sidecar\"><div class=\"diagram-panel\"><strong>App host</strong><small class=\"diagram-muted\">seu SaaS existente</small><div class=\"diagram-node\">getContext()<br><small class=\"diagram-muted\">rota · seleção</small></div><div class=\"diagram-node\">onNavigate / onRefresh<br><small class=\"diagram-muted\">comandos do host</small></div></div><div class=\"diagram-col-arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div></div><div class=\"diagram-panel accent-panel\"><span class=\"diagram-pill accent\">AgentNativeEmbedded</span><small class=\"diagram-muted\">agent + workspace</small><div class=\"diagram-box\" data-rough>rotas Agent-Native<br><small class=\"diagram-muted\">mounted by the server plugin</small></div></div></div>",
-  "css": ".diagram-sidecar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sidecar .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:200px}.diagram-sidecar .diagram-col-arrows{display:flex;flex-direction:column;gap:6px}.diagram-sidecar .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-dejs3c" title="Como o sidecar faz a ponte para um aplicativo host" summary={"O plugin monta rotas Agent-Native no lado do servidor; o sidecar React transmite o contexto da página e sai dos comandos do host."}>
+
+```html
+<div class="diagram-sidecar">
+  <div class="diagram-panel">
+    <strong>App host</strong
+    ><small class="diagram-muted">seu SaaS existente</small>
+    <div class="diagram-node">
+      getContext()<br /><small class="diagram-muted">rota · seleção</small>
+    </div>
+    <div class="diagram-node">
+      onNavigate / onRefresh<br /><small class="diagram-muted"
+        >comandos do host</small
+      >
+    </div>
+  </div>
+  <div class="diagram-col-arrows">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  </div>
+  <div class="diagram-panel accent-panel">
+    <span class="diagram-pill accent">AgentNativeEmbedded</span
+    ><small class="diagram-muted">agent + workspace</small>
+    <div class="diagram-box" data-rough>
+      rotas Agent-Native<br /><small class="diagram-muted"
+        >mounted by the server plugin</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sidecar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sidecar .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 200px;
+}
+.diagram-sidecar .diagram-col-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.diagram-sidecar .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Consulte [Embedding SDK](/docs/embedding-sdk) para autenticação de host e isolamento de banco de dados
 modo iframe/seletor e ponte de nível inferior APIs.
 

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

@@ -20,13 +20,72 @@ O Agent Teams é executado no run-manager principal: os eventos são transmitido
 
 O estado do subagente é persistido na tabela `application_state` SQL (em `agent-task:<taskId>`), para que as tarefas sobrevivam a inicializações a frio sem servidor e funcionem em vários processos.
 
-```an-diagram title="Orquestrador e especialistas" summary="O chat principal delega para subagentes que executam seus próprios threads e reportam como chips embutidos."
-{
-  "html": "<div class=\"at-orc\"><div class=\"diagram-card main\"><span class=\"diagram-pill accent\">Chat principal</span><small class=\"diagram-muted\">orchestrator &mdash; reads your request, delegates</small></div><div class=\"at-fan\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"at-subs\"><div class=\"diagram-box\">Revisão de código<br><small class=\"diagram-muted\">own thread &amp; prompt</small></div><div class=\"diagram-box\">Análise BigQuery<br><small class=\"diagram-muted\">own tools</small></div><div class=\"diagram-box\">E-mail por voz<br><small class=\"diagram-muted\">own context</small></div></div></div><div class=\"diagram-pill\">each appears inline as a live chip &#8635;</div></div>",
-  "css": ".at-orc{display:flex;flex-direction:column;align-items:center;gap:12px}.at-orc .diagram-card{padding:14px 18px;display:flex;flex-direction:column;gap:4px;align-items:center}.at-orc .at-fan{display:flex;flex-direction:column;align-items:center;gap:8px}.at-orc .diagram-arrow{font-size:22px}.at-orc .at-subs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.at-orc .diagram-box{text-align:center}"
+<Diagram id="doc-block-1feksqh" title="Orquestrador e especialistas" summary={"O chat principal delega para subagentes que executam seus próprios threads e reportam como chips embutidos."}>
+
+```html
+<div class="at-orc">
+  <div class="diagram-card main">
+    <span class="diagram-pill accent">Chat principal</span
+    ><small class="diagram-muted"
+      >orchestrator &mdash; reads your request, delegates</small
+    >
+  </div>
+  <div class="at-fan">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="at-subs">
+      <div class="diagram-box">
+        Revisão de código<br /><small class="diagram-muted"
+          >own thread &amp; prompt</small
+        >
+      </div>
+      <div class="diagram-box">
+        Análise BigQuery<br /><small class="diagram-muted">own tools</small>
+      </div>
+      <div class="diagram-box">
+        E-mail por voz<br /><small class="diagram-muted">own context</small>
+      </div>
+    </div>
+  </div>
+  <div class="diagram-pill">each appears inline as a live chip &#8635;</div>
+</div>
+```
+
+```css
+.at-orc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.at-orc .diagram-card {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+}
+.at-orc .at-fan {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.at-orc .diagram-arrow {
+  font-size: 22px;
+}
+.at-orc .at-subs {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.at-orc .diagram-box {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## Quando gerar um subagente {#when-to-spawn}
 
 Aparece quando a tarefa:
@@ -85,13 +144,70 @@ A maior parte do código do aplicativo não chama isso diretamente — a estrutu
 
 ## Ciclo de vida da tarefa {#lifecycle}
 
-```an-diagram title="O que spawnTask() faz" summary="Cada spawn cria um thread, persiste o estado para SQL e transmite eventos de chip até a conclusão."
-{
-  "html": "<div class=\"at-life\"><div class=\"diagram-box\"><code>spawnTask()</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">create thread</span><small class=\"diagram-muted\">new row in <code>chat_threads</code>, description as first message</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">persist state</span><small class=\"diagram-muted\"><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>, status=running</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">stream</span><small class=\"diagram-muted\"><code>agent_task_started</code> &rarr; chip appears; <code>agent_task_step</code> &rarr; chip updates live</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">complete</span><small class=\"diagram-muted\">status=completed, write summary + preview, emit <code>agent_task_done</code></small></div></div>",
-  "css": ".at-life{display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:560px}.at-life .diagram-card{display:flex;flex-direction:column;gap:3px;padding:10px 14px}.at-life .diagram-box{align-self:flex-start}.at-life .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-14x2n99" title="O que spawnTask() faz" summary={"Cada spawn cria um thread, persiste o estado para SQL e transmite eventos de chip até a conclusão."}>
+
+```html
+<div class="at-life">
+  <div class="diagram-box"><code>spawnTask()</code></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">create thread</span
+    ><small class="diagram-muted"
+      >new row in <code>chat_threads</code>, description as first message</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">persist state</span
+    ><small class="diagram-muted"
+      ><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>,
+      status=running</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">stream</span
+    ><small class="diagram-muted"
+      ><code>agent_task_started</code> &rarr; chip appears;
+      <code>agent_task_step</code> &rarr; chip updates live</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">complete</span
+    ><small class="diagram-muted"
+      >status=completed, write summary + preview, emit
+      <code>agent_task_done</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.at-life {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  max-width: 560px;
+}
+.at-life .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 14px;
+}
+.at-life .diagram-box {
+  align-self: flex-start;
+}
+.at-life .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 A qualquer momento o agente pai pode retomar o subagente com acompanhamento via `sendToTask(taskId, message)`. Se o subagente cometer erros, `markTaskErrored(taskId, reason)` registra a falha e a apresenta ao usuário.
 
 As mensagens bidirecionais são duráveis. O acompanhamento dos pais aos subagentes em execução é
@@ -138,13 +254,57 @@ Subagentes podem gerar subagentes, o que é um risco descontrolado/de custo: uma
 
 O bate-papo de nível superior é profundo `0`. Um subagente gerado é a profundidade `1`; esse subagente pode aparecer mais uma vez (profundidade `2`); um spawn que criaria um subagente de profundidade `3` é **recusado**. O limite padrão é **2**.
 
-```an-diagram title="Proteção de profundidade de delegação (cap 2 padrão)" summary="Cada nível pode gerar um nível mais profundo até o limite; um spawn passado é recusado no lado do servidor."
-{
-  "html": "<div class=\"at-depth\"><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 0</span><strong>Chat de nível superior</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 1</span><strong>Subagente</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card warn\"><span class=\"diagram-pill warn\">depth 2</span><strong>Subagente's sub-agent</strong><small class=\"diagram-muted\">at the cap &mdash; may NOT spawn</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">depth 3</span><strong>Refused</strong><small class=\"diagram-muted\">server-side error</small></div></div>",
-  "css": ".at-depth{display:flex;flex-direction:column;gap:8px}.at-depth .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.at-depth .rung-1,.at-depth .diagram-card:nth-child(2){margin-inline-start:24px}.at-depth .diagram-card:nth-child(3){margin-inline-start:48px}.at-depth .diagram-card:nth-child(4){margin-inline-start:72px}"
+<Diagram id="doc-block-ipohq9" title={"Proteção de profundidade de delegação (cap 2 padrão)"} summary={"Cada nível pode gerar um nível mais profundo até o limite; um spawn passado é recusado no lado do servidor."}>
+
+```html
+<div class="at-depth">
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 0</span
+    ><strong>Chat de nível superior</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 1</span><strong>Subagente</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card warn">
+    <span class="diagram-pill warn">depth 2</span
+    ><strong>Subagente's sub-agent</strong
+    ><small class="diagram-muted">at the cap &mdash; may NOT spawn</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">depth 3</span><strong>Refused</strong
+    ><small class="diagram-muted">server-side error</small>
+  </div>
+</div>
+```
+
+```css
+.at-depth {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.at-depth .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.at-depth .rung-1,
+.at-depth .diagram-card:nth-child(2) {
+  margin-inline-start: 24px;
+}
+.at-depth .diagram-card:nth-child(3) {
+  margin-inline-start: 48px;
+}
+.at-depth .diagram-card:nth-child(4) {
+  margin-inline-start: 72px;
 }
 ```
 
+</Diagram>
+
 A aplicação é ambiental: cada subagente é executado dentro de um `AsyncLocalStorage` que registra sua própria profundidade, portanto, qualquer `spawnTask` alcançado transitivamente a partir dessa execução lê a profundidade de seu pai e recusa quando o limite é atingido - mesmo que a ferramenta `agent-teams` tenha sido entregue a um subagente que não deveria tê-la. A decisão é exposta como um `evaluateSubagentDepth(parentDepth)` puro e testável em unidade. Uma geração recusada retorna um erro claro: _"Limite de profundidade de delegação atingido (máx. N); não é possível gerar outro subagente."_
 
 ### Configurando o limite {#depth-guard-config}

package/corpus/core/docs/content/locales/pt-BR/agent-web-surfaces.mdx

@@ -19,13 +19,60 @@ O site de documentos é a implementação de referência. Hoje é enviado:
 
 A configuração de `publicMcp: true` também expõe o actions ativado como um endpoint MCP público, permitindo que agentes externos liguem para eles diretamente (consulte [MCP Protocol](/docs/mcp-protocol)).
 
-```an-diagram title="O que uma rota pública publica" summary="Uma rota pública se transforma em representações amigáveis ​​aos agentes. A leitura da rota é separada da chamada de ferramentas – o acesso à ferramenta permanece opcional."
-{
-  "html": "<div class=\"diagram-web\"><div class=\"diagram-box\" data-rough>Rota pública<br><small class=\"diagram-muted\">derived from route access settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">robots.txt</span><span class=\"diagram-pill\">sitemap.xml</span><span class=\"diagram-pill\">llms.txt</span><span class=\"diagram-pill\">.md mirror</span><span class=\"diagram-pill\">JSON-LD</span><span class=\"diagram-pill\">text/markdown</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col gate\"><span class=\"diagram-pill warn\">Ferramentas continuam privadas</span><small class=\"diagram-muted\">publicMcp + publicAgent.expose required</small></div></div>",
-  "css": ".diagram-web{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-web .diagram-arrow{font-size:22px;line-height:1}.diagram-web .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.diagram-web .gate{display:flex;flex-direction:column;gap:4px;align-items:flex-start}"
+<Diagram id="doc-block-wfes97" title={"O que uma rota pública publica"} summary={"Uma rota pública se transforma em representações amigáveis ​​aos agentes. A leitura da rota é separada da chamada de ferramentas – o acesso à ferramenta permanece opcional."}>
+
+```html
+<div class="diagram-web">
+  <div class="diagram-box" data-rough>
+    Rota pública<br /><small class="diagram-muted"
+      >derived from route access settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill">robots.txt</span
+    ><span class="diagram-pill">sitemap.xml</span
+    ><span class="diagram-pill">llms.txt</span
+    ><span class="diagram-pill">.md mirror</span
+    ><span class="diagram-pill">JSON-LD</span
+    ><span class="diagram-pill">text/markdown</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col gate">
+    <span class="diagram-pill warn">Ferramentas continuam privadas</span
+    ><small class="diagram-muted"
+      >publicMcp + publicAgent.expose required</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-web {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-web .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-web .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.diagram-web .gate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
 }
 ```
 
+</Diagram>
+
 ## Configuração {#config}
 
 Adicione `agentWeb` na configuração do aplicativo de espaço de trabalho existente (no `package.json` do seu aplicativo na chave `agent-native` — ou equivalentemente `workspace.agentWeb`, `agentWeb` ou `root.agentWeb`). A lista de rotas públicas ainda é derivada das configurações de acesso à rota do aplicativo; `agentWeb` controla como essa superfície pública é representada para os agentes.