@agent-native/core 0.79.25 → 0.79.27

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

@@ -33,13 +33,63 @@ Quando um usuário envia uma mensagem, a estrutura registra automaticamente:
 
 Não são necessárias alterações de código. A instrumentação se conecta ao `production-agent.ts` de forma transparente.
 
-```an-diagram title="Cada corrida alimenta o loop" summary="Uma execução de agente produz um rastreamento, pontuações automatizadas e um gancho de feedback – tudo armazenado no próprio SQL do aplicativo e exibido no painel. Os experimentos dividem o tráfego entre variantes de configuração."
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">Execução do agente<br><small class=\"diagram-muted\">production-agent.ts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Capturado automaticamente</span><small class=\"diagram-muted\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
-  "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-ss2sdw" title="Cada corrida alimenta o loop" summary={"Uma execução de agente produz um rastreamento, pontuações automatizadas e um gancho de feedback – tudo armazenado no próprio SQL do aplicativo e exibido no painel. Os experimentos dividem o tráfego entre variantes de configuração."}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    Execução do agente<br /><small class="diagram-muted"
+      >production-agent.ts</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Capturado automaticamente</span
+    ><small class="diagram-muted"
+      >tokens &middot; cost &middot; latency &middot; tool calls</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">Traces &amp; spans</div>
+    <div class="diagram-box">Evals (5 scorers + LLM judge)</div>
+    <div class="diagram-box">Feedback &amp; frustration index</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    Dashboard<br /><small class="diagram-muted"
+      >scoped to the signed-in user</small
+    >
+  </div>
+</div>
+```
+
+```css
+.obs-loop {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.obs-loop .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.obs-loop .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.obs-loop .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## O painel {#dashboard}
 
 Adicione o painel a qualquer modelo com uma única rota:
@@ -147,13 +197,59 @@ PUT /_agent-native/observability/experiments/:id
 
 Use os identificadores de modelo reais que seu mecanismo aceita no lugar de `<your-model-id>` / `<other-model-id>` (os nomes dos modelos mudam frequentemente - verifique seu fornecedor/mecanismo para obter os IDs atuais). O loop do agente resolve automaticamente a variante do usuário e aplica a substituição de configuração. A atribuição usa hashing consistente – o mesmo usuário sempre obtém a mesma variante.
 
-```an-diagram title="Atribuição de variante de hash consistente" summary="Cada usuário faz hash para uma variante estável, o loop aplica a substituição de configuração dessa variante e os resultados são acumulados por variante com intervalos de confiança."
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">ID do usuário<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">override de configuração A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">override de configuração B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Resultados per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
-  "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-815qg2" title={"Atribuição de variante de hash consistente"} summary={"Cada usuário faz hash para uma variante estável, o loop aplica a substituição de configuração dessa variante e os resultados são acumulados por variante com intervalos de confiança."}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    ID do usuário<br /><small class="diagram-muted">consistent hash</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-card">
+      <span class="diagram-pill">control &middot; 50%</span
+      ><small class="diagram-muted">override de configuração A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">override de configuração B</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Resultados per variant<br /><small class="diagram-muted"
+      >cost &middot; latency &middot; satisfaction</small
+    >
+  </div>
+</div>
+```
+
+```css
+.exp {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.exp .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.exp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.exp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Configuração {#config}
 
 Todas as configurações são armazenadas na chave `observability-config`:

package/docs/content/locales/pt-BR/observational-memory.mdx

@@ -19,13 +19,56 @@ OM representa um fio longo em três camadas, do mais destilado ao mais recente:
 | **Observações**               | Entradas densas e datadas que reúnem uma série de mensagens brutas em um registro compacto do que aconteceu.                |
 | **Mensagens brutas recentes** | Os últimos N turnos são mantidos **literalmente** — nunca dobrados — para que o agente sempre veja o contexto mais recente. |
 
-```an-diagram title="Três níveis, destilados até recentes" summary="O prefixo mais antigo se transforma em observações datadas e uma reflexão de arco longo; apenas as voltas mais recentes permanecem textuais."
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Reflexões</span><small class=\"diagram-muted\">resumo de longo arco condensado do log de observações</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observações</span><small class=\"diagram-muted\">entradas densas e datadas que condensam trechos de mensagens brutas</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Mensagens brutas recentes</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — nunca condensados</small></div></div>",
-  "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-19rljfz" title={"Três níveis, destilados até recentes"} summary={"O prefixo mais antigo se transforma em observações datadas e uma reflexão de arco longo; apenas as voltas mais recentes permanecem textuais."}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">Reflexões</span
+    ><small class="diagram-muted"
+      >resumo de longo arco condensado do log de observações</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observações</span
+    ><small class="diagram-muted"
+      >entradas densas e datadas que condensam trechos de mensagens
+      brutas</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">Mensagens brutas recentes</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — nunca condensados</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: stretch;
+  gap: 8px;
+}
+.om .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.om .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Em cada turno, o lado de leitura os reúne em um único bloco `[Observational Memory]` autodenominado que substitui o prefixo bruto mais antigo, mantém a janela bruta recente intacta e diz ao modelo para tratar o registro compactado como oficial (não refaça o trabalho concluído, confie nas decisões, nomes, datas e status registrados).
 
 ## Como a compactação é executada {#compaction}
@@ -35,13 +78,54 @@ Duas passagens são executadas como uma etapa de **disparar e esquecer, melhor e
 1. **Observador** — quando as mensagens _não observadas_ de um thread excedem o limite do token de observação, ele as agrupa em uma única entrada de observação densa.
 2. **Refletor** — quando o próprio registro de observação persistente excede o limite do token de reflexão, condensa as observações em uma reflexão de nível superior.
 
-```an-diagram title="Dois passes de melhor esforço após uma curva limpa" summary="Cada operação autônoma passa abaixo de seu limite, portanto, operar o compactador a cada curva é barato. As falhas são engolidas e nunca adicionam latência."
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">Turno limpo termina<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
-  "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-udy915" title={"Dois passes de melhor esforço após uma curva limpa"} summary={"Cada operação autônoma passa abaixo de seu limite, portanto, operar o compactador a cada curva é barato. As falhas são engolidas e nunca adicionam latência."}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    Turno limpo termina<br /><small class="diagram-muted"
+      >fire-and-forget</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observer</span
+    ><small class="diagram-muted"
+      >unobserved tokens &gt; 30k? &rarr; fold into one observation</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Reflector</span
+    ><small class="diagram-muted"
+      >observation log &gt; 40k? &rarr; condense into a reflection</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om-pass {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.om-pass .diagram-node,
+.om-pass .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.om-pass .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Ambos passam no modo autônomo abaixo de seus limites, portanto, chamar o compactador após cada curva é barato. Como o OM substitui o prefixo bruto volátil por texto compactado estável, ele também mantém o prompt **cache-stable** em voltas de um thread longo.
 
 Os dados do OM residem no próprio banco de dados SQL do aplicativo, com escopo definido para o proprietário (e organização, quando presente) — o mesmo modelo de escopo do restante da estrutura. Ele nunca é compartilhado entre os usuários.

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

@@ -10,13 +10,54 @@ Ao abrir pela primeira vez um aplicativo criado na estrutura nativa do agente, v
 para o chat do agente: conecte um mecanismo de IA, opcionalmente aponte o aplicativo para compartilhado
 infraestrutura e adicione provedores somente quando precisar deles.
 
-```an-diagram title="A lista de verificação de configuração" summary="Apenas é necessário conectar um mecanismo de IA. O painel rastreia a conclusão e se oculta automaticamente quando tudo o que é necessário é feito."
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>Conectar um motor de IA</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Entrega de e-mail</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
-  "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-162mde6" title={"A lista de verificação de configuração"} summary={"Apenas é necessário conectar um mecanismo de IA. O painel rastreia a conclusão e se oculta automaticamente quando tudo o que é necessário é feito."}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span
+    ><strong>Conectar um motor de IA</strong
+    ><small class="diagram-muted"
+      >Connect Builder (one click) or paste an LLM key</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Database</strong
+    ><small class="diagram-muted">set <code>DATABASE_URL</code></small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Authentication</strong
+    ><small class="diagram-muted">OAuth / access token</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Entrega de e-mail</strong
+    ><small class="diagram-muted">Resend / SendGrid</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">all required done &rarr; panel auto-hides</div>
+</div>
+```
+
+```css
+.ob {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ob .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+}
+.ob .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## Para usuários finais
 
 ### O que você verá

package/docs/content/locales/pt-BR/plan-plugin.mdx

@@ -14,13 +14,70 @@ Uma instalação oferece:
 - **Dois skills** — `/visual-plan` (o ponto de entrada canônico) e `/visual-recap`.
 - **O conector do Plano MCP** — registrado no aplicativo hospedado em `https://plan.agent-native.com` (endpoint MCP `https://plan.agent-native.com/_agent-native/mcp`, nome do servidor `plan`).
 
-```an-diagram title="Três rotas, um pacote" summary="Os plug-ins universais CLI, Claude Code e Codex instalam as mesmas duas habilidades mais o conector do Plano hospedado."
-{
-  "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Plugin Claude Code<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Plugin Codex<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
-  "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
+<Diagram id="doc-block-1uxomn4" title={"Três rotas, um pacote"} summary="Os plug-ins universais CLI, Claude Code e Codex instalam as mesmas duas habilidades mais o conector do Plano hospedado.">
+
+```html
+<div class="diagram-routes">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Universal CLI<br /><small class="diagram-muted"
+        >skills add visual-plan</small
+      >
+    </div>
+    <div class="diagram-node">
+      Plugin Claude Code<br /><small class="diagram-muted"
+        >/plugin install</small
+      >
+    </div>
+    <div class="diagram-node">
+      Plugin Codex<br /><small class="diagram-muted">codex plugin add</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">/visual-plan</span
+    ><span class="diagram-pill accent">/visual-recap</span
+    ><small class="diagram-muted">two skills</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Plan MCP connector<br /><small class="diagram-muted"
+      >plan.agent-native.com/_agent-native/mcp</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-routes {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-routes .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-routes .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-routes .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-routes .center .diagram-pill {
+  margin: 2px;
 }
 ```
 
+</Diagram>
+
 Por padrão, ambos skills publicam no aplicativo Plan hospedado — eles criam um plano via
 o conector MCP e entregarei a você um link ou plano in-line para revisão. Eles nunca descartam
 um plano Markdown/ASCII embutido no chat como entrega. Se uma ferramenta de planejamento
@@ -82,13 +139,47 @@ Isso mantém o conteúdo do plano fora do banco de dados do plano Agent-Native.
 comentários, capturas de tela e histórico do plano ficam indisponíveis até que você explicitamente
 publicar mais tarde.
 
-```an-diagram title="Modo hospedado vs. modo de arquivos locais" summary="Por padrão, as habilidades são publicadas por meio do conector; O modo local-files grava MDX no disco e visualiza por meio de uma ponte localhost."
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Padrão · hospedado</span><strong>Publicar no app Plan</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Privacidade de arquivos locais</span><strong>Gravar MDX no disco</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No Escrita no DBs until <code>publish-visual-plan</code>.</small></div></div>",
-  "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"
+<Diagram id="doc-block-rf25cs" title="Modo hospedado vs. modo de arquivos locais" summary={"Por padrão, as habilidades são publicadas por meio do conector; O modo local-files grava MDX no disco e visualiza por meio de uma ponte localhost."}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Padrão · hospedado</span
+    ><strong>Publicar no app Plan</strong
+    ><small class="diagram-muted"
+      >MCP connector &rarr; hosted DB &rarr; share links, comments, history,
+      screenshots</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Privacidade de arquivos locais</span
+    ><strong>Gravar MDX no disco</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No Escrita no DBs until
+      <code>publish-visual-plan</code>.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-modes {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-modes .diagram-card {
+  flex: 1 1 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
 }
 ```
 
+</Diagram>
+
 O Agent Native Desktop tem um caminho de sincronização de arquivo local separado para planos hospedados: o
 O aplicativo para desktop pode espelhar um plano hospedado em arquivos MDX locais e importar as edições de volta
 sem clonar o aplicativo Plan ou executar um CLI. Esse fluxo de trabalho mantém o hospedado

package/docs/content/locales/pt-BR/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ Em cada push de PR, o fluxo de trabalho:
 7. Insere um único comentário de PR fixo que incorpora as capturas de tela **inline** com um elemento `<picture>` (veiculado por meio do proxy de imagem camuflada do GitHub) ao lado do link para a recapitulação interativa.
 8. Conclui a verificação `Visual Recap` como bem-sucedida, ignorada ou neutra.
 
-```an-diagram title="O que acontece em cada push de relações públicas" summary="Uma comparação limitada alimenta um agente de codificação real, que cria uma recapitulação; o fluxo de trabalho faz uma captura de tela e exibe um comentário fixo."
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">Push do PR<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Agente de código<br><small class=\"diagram-muted\">Claude Code / Codex lê o diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Chrome headless<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Um comentário fixo no PR<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
-  "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
+<Diagram id="doc-block-8iqfz5" title={"O que acontece em cada push de relações públicas"} summary={"Uma comparação limitada alimenta um agente de codificação real, que cria uma recapitulação; o fluxo de trabalho faz uma captura de tela e exibe um comentário fixo."}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    Push do PR<br /><small class="diagram-muted"
+      >bounded base&hellip;head diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Agente de código<br /><small class="diagram-muted"
+      >Claude Code / Codex lê o diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-visual-recap</span
+    ><small class="diagram-muted">publishes recap plan</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Chrome headless<br /><small class="diagram-muted"
+      >light + dark screenshots</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Um comentário fixo no PR<br /><small class="diagram-muted"
+      >inline screenshot + plan link</small
+    >
+  </div>
+</div>
+<div class="diagram-foot diagram-muted">
+  Plus an informational <span class="diagram-pill">Visual Recap</span> check
+  &mdash; non-blocking, never required.
+</div>
+```
+
+```css
+.diagram-recap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-recap .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-recap .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-recap .diagram-foot {
+  flex-basis: 100%;
+  margin-top: 10px;
+  font-size: 13px;
 }
 ```
 
+</Diagram>
+
 Um re-push atualiza o mesmo plano e o mesmo comentário fixo em vigor – sem planos órfãos, sem spam de comentários.
 
 ## Instalando
@@ -157,13 +216,71 @@ Se você deseja gerar recapitulações para PRs de bifurcação, um segundo arqu
 
 Para instalá-lo, copie o arquivo de [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) para o diretório `.github/workflows/` do seu repositório junto com o `pr-visual-recap.yml` existente. Os mesmos segredos (`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`) se aplicam.
 
-```an-diagram title="Portão de consentimento de RP do Fork" summary="Os PRs do Fork não recebem segredos por padrão; autores confiáveis ​​são executados automaticamente e colaboradores externos exigem um novo rótulo de recapitulação do mantenedor."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">PR de fork aberto<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Autor confiável</span><small class=\"diagram-muted\">OWNER, MEMBER ou COLLABORATOR roda automaticamente</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Contribuidor externo</span><small class=\"diagram-muted\">mantenedor revisa o diff e depois aplica <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Verificações de gate<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Execuções de recapitulação<br><small class=\"diagram-muted\">apenas código do repo base · diff do fork é entrada de texto</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"
+<Diagram id="doc-block-t1ajfw" title={"Portão de consentimento de RP do Fork"} summary={"Os PRs do Fork não recebem segredos por padrão; autores confiáveis ​​são executados automaticamente e colaboradores externos exigem um novo rótulo de recapitulação do mantenedor."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    PR de fork aberto<br /><small class="diagram-muted"
+      >main workflow has no secrets</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">Autor confiável</span
+    ><small class="diagram-muted"
+      >OWNER, MEMBER ou COLLABORATOR roda automaticamente</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Contribuidor externo</span
+    ><small class="diagram-muted"
+      >mantenedor revisa o diff e depois aplica <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Verificações de gate<br /><small class="diagram-muted"
+      >fork PR? &amp; trusted or fresh label?</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">
+    Execuções de recapitulação<br /><small class="diagram-muted"
+      >apenas código do repo base · diff do fork é entrada de texto</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-fork .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### Como funciona o portão de rótulos
 
 1. Um contribuidor fork abre um PR. O fluxo de trabalho normal do `pull_request` é ignorado porque o GitHub retém segredos das execuções de bifurcação.