@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/es-ES/frames.mdx

@@ -20,13 +20,55 @@ chatear, ejecutar y (en desarrollo) editar código. Hay tres fotogramas que comp
 El código de tu aplicación es idéntico independientemente del marco que lo aloje. El agente habla
 a su aplicación a través del mismo actions y estado de la aplicación en todos los casos.
 
-```an-diagram title="Tres fotogramas, un tiempo de ejecución" summary="Su aplicación y el panel de agentes son los mismos en todos los cuadros; sólo cambia la envoltura que los rodea."
-{
-  "html": "<div class=\"diagram-frames\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Panel incrustado</span><small class=\"diagram-muted\">incluido en cada app · dev + prod</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Marco de desarrollo local</span><small class=\"diagram-muted\">app en iframe + panel + terminal CLI</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Marco cloud de Builder.io</span><small class=\"diagram-muted\">alojado: colaboración · edición visual · ejecuciones paralelas</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Mismo runtime<br><small class=\"diagram-muted\">tu app · acciones · estado de aplicación</small></div></div>",
-  "css": ".diagram-frames{display:flex;flex-direction:column;gap:10px;align-items:stretch}.diagram-frames .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-frames .diagram-arrow{font-size:22px;line-height:1;align-self:center}"
+<Diagram id="doc-block-kwsu7t" title={"Tres fotogramas, un tiempo de ejecución"} summary={"Su aplicación y el panel de agentes son los mismos en todos los cuadros; sólo cambia la envoltura que los rodea."}>
+
+```html
+<div class="diagram-frames">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Panel incrustado</span
+    ><small class="diagram-muted">incluido en cada app · dev + prod</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Marco de desarrollo local</span
+    ><small class="diagram-muted">app en iframe + panel + terminal CLI</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Marco cloud de Builder.io</span
+    ><small class="diagram-muted"
+      >alojado: colaboración · edición visual · ejecuciones paralelas</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    Mismo runtime<br /><small class="diagram-muted"
+      >tu app · acciones · estado de aplicación</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-frames {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+}
+.diagram-frames .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-frames .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## Panel de agente integrado {#embedded-agent}
 
 El panel integrado es la barra lateral del agente que representa su aplicación. Se envía con
@@ -57,13 +99,51 @@ El panel se ejecuta en uno de dos modos de herramienta:
   lista de herramientas de codificación y contratos UI compartidos, consulte
   [Agent-Native Code UI](/docs/code-agents-ui).
 
-```an-diagram title="Puerta de solicitud de código" summary="Un mensaje escrito con código necesita un marco con capacidad para codificar. Con uno conectado, la solicitud se dirige allí; sin uno, el panel explica que los cambios de código necesitan Desktop o Builder."
-{
-  "html": "<div class=\"diagram-gate\"><div class=\"diagram-node\" data-rough>message<br><small class=\"diagram-muted\">type: \\\"code\\\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>code-capable frame connected?</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">yes &rarr; route to frame, show code-agent indicator</div><div class=\"diagram-pill warn\">no &rarr; dialog: needs Desktop or Builder</div></div></div>",
-  "css": ".diagram-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-gate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-gate .diagram-arrow{font-size:22px;line-height:1}.diagram-gate .center{text-align:center}"
+<Diagram id="doc-block-14b7eu4" title={"Puerta de solicitud de código"} summary={"Un mensaje escrito con código necesita un marco con capacidad para codificar. Con uno conectado, la solicitud se dirige allí; sin uno, el panel explica que los cambios de código necesitan Desktop o Builder."}>
+
+```html
+<div class="diagram-gate">
+  <div class="diagram-node" data-rough>
+    message<br /><small class="diagram-muted">type: \"code\"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    code-capable frame connected?
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">
+      yes &rarr; route to frame, show code-agent indicator
+    </div>
+    <div class="diagram-pill warn">
+      no &rarr; dialog: needs Desktop or Builder
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-gate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-gate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-gate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-gate .center {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 El "modo de código" es el conmutador de capacidad del agente, distinto del modo de desarrollo del entorno
 (`NODE_ENV` / Vite). El enlace del cliente es `useCodeMode()`. (Ver
 [Compatibility notes](#compatibility) para los alias de retrocompatibilidad.)

package/docs/content/locales/es-ES/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 Ahora se puede acceder a esa acción desde el chat UI, CLI, HTTP, MCP, A2A,
 trabajos programados y webhooks. Defina una vez y llame desde cualquier lugar.
 
-```an-diagram title="Una acción, cada superficie" summary="Un único archivo defineAction se distribuye a cada consumidor sin cableado adicional."
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">Interfaz de chat</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">Trabajos programados</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-xk8dna" title={"Una acción, cada superficie"} summary={"Un único archivo defineAction se distribuye a cada consumidor sin cableado adicional."}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">Interfaz de chat</span
+    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
+    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">Trabajos programados</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## El estado está integrado
 
 Sin cabeza no significa apátrida. Actions, sesiones, estado de la aplicación, subprocesos,

package/docs/content/locales/es-ES/harness-agents.mdx

@@ -23,13 +23,54 @@ debajo de `runAgentLoop`. Un arnés no es un proveedor `AgentEngine`: ejecuta su
 propio bucle de extremo a extremo, por lo que Agent-Native lo controla como una sesión, no como una sola
 llamada modelo.
 
-```an-diagram title="Un arnés es dueño de su bucle; Agent-Native dirige la sesión" summary="El AgentHarness sustrato creates/resumes la sesión nativa, transmite sus eventos a la transcripción normal y persiste resumeState en SQL entre turnos."
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-dzm02u" title={"Un arnés es dueño de su bucle; Agent-Native dirige la sesión"} summary={"El AgentHarness sustrato creates/resumes la sesión nativa, transmite sus eventos a la transcripción normal y persiste resumeState en SQL entre turnos."}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## ¿Qué documento de codificación quiero? {#which-doc}
 
 | Quieres...                                                                           | Usar                                         |
@@ -213,13 +254,43 @@ para que un hilo pueda sobrevivir a través de turnos, procesos e implementacion
 es **opaco**: Agent-Native lo guarda y lo devuelve, pero nunca lo inspecciona ni
 lo interpreta.
 
-```an-diagram title="Reanudación en turnos, procesos y despliegues" summary="Cada turno separa un resumeState opaco en SQL; el siguiente turno lo devuelve a createSession en lugar de reproducir el historial de chat."
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>Turno N<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">opaco · sesión de arnés SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>Turno N+1<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-11yarik" title={"Reanudación en turnos, procesos y despliegues"} summary={"Cada turno separa un resumeState opaco en SQL; el siguiente turno lo devuelve a createSession en lugar de reproducir el historial de chat."}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    Turno N<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >opaco · sesión de arnés SQL</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    Turno N+1<br /><small class="diagram-muted"
+      >createSession.resumeState</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/docs/content/locales/es-ES/human-approval.mdx

@@ -80,13 +80,59 @@ En `approval_required`, el chat UI muestra una opción **Aprobar/Denegar** en la
 
 ## De un extremo a otro {#flow}
 
-```an-diagram title="La interrupción de la aprobación" summary="Una llamada cerrada pausa el turno antes de que se active run(). La aprobación reemite el turno llevando la clave de la convocatoria; sólo entonces ocurre el efecto secundario."
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>El agente llama a send-email</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gate verdadero, llamada aún no aprobada</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>La persona hace clic en Aprobar en el chat<br><small class=\"diagram-muted\">el cliente reenvía el turno con approvedToolCalls: [approvalKey]</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-q1vb4z" title={"La interrupción de la aprobación"} summary={"Una llamada cerrada pausa el turno antes de que se active run(). La aprobación reemite el turno llevando la clave de la convocatoria; sólo entonces ocurre el efecto secundario."}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>El agente llama a send-email</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gate verdadero, llamada aún no aprobada</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    La persona hace clic en Aprobar en el chat<br /><small class="diagram-muted"
+      >el cliente reenvía el turno con approvedToolCalls: [approvalKey]</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 El uso canónico (e intencionalmente raro) de esta puerta en el marco es la acción `send-email` de la plantilla de correo, que configura `needsApproval: true` para que el agente pueda redactar y hacer cola libremente, pero nunca pueda enviar un mensaje sin que un humano apruebe el envío específico.
 
 ## Relacionado

package/docs/content/locales/es-ES/key-concepts.mdx

@@ -17,13 +17,67 @@ Cada aplicación nativa del agente consta de tres cosas que funcionan juntas:
 >
 > **Computadora**: base de datos, navegador, ejecución de código. Los agentes trabajan directamente con SQL y herramientas integradas; Los servidores MCP son complementos opcionales, no la base.
 
-```an-diagram title="Agente, aplicación y computadora." summary="Tres capas trabajando juntas en una tienda SQL compartida. Tanto el agente como la aplicación leen y escriben los mismos datos."
-{
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">lee y escribe datos, ejecuta acciones, modifica código</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full UI React</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">base de datos SQL · browser · code execution</small></div></div>",
-  "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
+<Diagram id="doc-block-b13lfv" title={"Agente, aplicación y computadora."} summary={"Tres capas trabajando juntas en una tienda SQL compartida. Tanto el agente como la aplicación leen y escriben los mismos datos."}>
+
+```html
+<div class="diagram-arch">
+  <div class="diagram-row">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Agent</span
+      ><small class="diagram-muted"
+        >lee y escribe datos, ejecuta acciones, modifica código</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >action-only, chat, control plane, or full UI React</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">
+    &darr;&nbsp;&uarr;
+  </div>
+  <div class="diagram-box" data-rough>
+    Computer<br /><small class="diagram-muted"
+      >base de datos SQL · browser · code execution</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-arch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-arch .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-arch .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 220px;
+}
+.diagram-arch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-arch .diagram-box {
+  text-align: center;
+  padding: 12px 18px;
 }
 ```
 
+</Diagram>
+
 Las aplicaciones headless pueden ejecutar el mismo bucle de producción de aplicación-agente desde la carpeta con `pnpm agent`, mientras que las aplicaciones UI montan el panel de agente integrado y se ejecutan localmente con `pnpm dev`. En la nube, Builder.io proporciona un marco administrado (el entorno que aloja al agente junto a su aplicación) con colaboración, edición visual e infraestructura administrada para equipos.
 
 ## Bloques de creación de agentes {#agent-building-blocks}
@@ -273,13 +327,55 @@ El flujo es:
 4. Recuperación de ganchos `useActionQuery` y ganchos `useQuery` con versión de origen
 5. Los componentes representan los nuevos datos sin recargar la página
 
-```an-diagram title="Flujo de sincronización en vivo" summary="La escritura de un agente se convierte en una representación de la interfaz de usuario sin actualización manual: SSE primero, el sondeo como respaldo universal."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Acción del agente<br><small class=\"diagram-muted\">escribe en la BD</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Evento de cambio<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Recarga de consulta<br><small class=\"diagram-muted\">renderiza, sin recargar</small></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"
+<Diagram id="doc-block-n5bcq3" title={"Flujo de sincronización en vivo"} summary={"La escritura de un agente se convierte en una representación de la interfaz de usuario sin actualización manual: SSE primero, el sondeo como respaldo universal."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    Acción del agente<br /><small class="diagram-muted">escribe en la BD</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Evento de cambio<br /><small class="diagram-muted"
+      >source: action / settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">useDbSync</span
+    ><small class="diagram-muted">SSE &middot; poll fallback</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Recarga de consulta<br /><small class="diagram-muted"
+      >renderiza, sin recargar</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-sync .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
 }
 ```
 
+</Diagram>
+
 Esto funciona en todos los entornos de implementación, incluidos los sin servidor y los perimetrales, porque utiliza la base de datos, no el estado en memoria ni los observadores del sistema de archivos.
 
 ## Marcos {#frames}

package/docs/content/locales/es-ES/local-file-mode.mdx

@@ -46,13 +46,69 @@ El UI y el agente actions deben mantener la misma forma en ambos modos. Un conte
 el editor aún edita documentos; la diferencia es si esos documentos resuelven
 a filas SQL o archivos locales.
 
-```an-diagram title="Mismas acciones, dos fuentes de verdad" summary="La interfaz de usuario y el agente llaman a acciones idénticas en ambos modos. La capa de acción decide si cada llamada se resuelve en SQL filas o archivos de repositorio."
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">UI de contenido</div><div class=\"diagram-node\">Agente + acciones<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">Modo base de datos</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">alojado · compartir · comentarios · historial</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">revisión Git · ediciones del agente de código</small></div></div></div>",
-  "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-2brs7j" title="Mismas acciones, dos fuentes de verdad" summary={"La interfaz de usuario y el agente llaman a acciones idénticas en ambos modos. La capa de acción decide si cada llamada se resuelve en SQL filas o archivos de repositorio."}>
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">UI de contenido</div>
+    <div class="diagram-node">
+      Agente + acciones<br /><small class="diagram-muted"
+        >list/get/update-document</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-row resolve">
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill accent">Modo base de datos</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted"
+        >alojado · compartir · comentarios · historial</small
+      >
+    </div>
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill ok">Local File Mode</span
+      ><small class="diagram-muted">repo files via agent-native.json</small
+      ><small class="diagram-muted"
+        >revisión Git · ediciones del agente de código</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mode .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-mode .resolve {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ## Repositorio de ejemplo
 
 Un espacio de trabajo de contenido puede ser tan pequeño como este: