@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/es-ES/cli-adapters.mdx

@@ -12,13 +12,53 @@ description: "Brinde al agente acceso estructurado a cualquier herramienta CLI (
 
 Un adaptador CLI incluye una única herramienta de línea de comandos (`gh`, `ffmpeg`, `stripe`, `aws`) para que el agente pueda descubrirla, comprobar si está instalada y ejecutarla con un resultado stdout/stderr/código de salida consistente. Sin esta unión, cada script reinventa cómo invocar un CLI y analizar su salida.
 
-```an-diagram title="Adaptador CLI → registro → superficie de acción" summary="ShellCliAdapter envuelve un binario; CliRegistry recopila adaptadores para su descubrimiento; defineAction expone una llamada en la superficie de acción agente + UI."
-{
-  "html": "<div class=\"diagram-cli\"><div class=\"diagram-node\" data-rough>gh · ffmpeg · stripe<br><small class=\"diagram-muted\">command-line tools</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>ShellCliAdapter<br><small class=\"diagram-muted\">isAvailable · execute</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>CliRegistry<br><small class=\"diagram-muted\">describe() for discovery</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">defineAction</div></div>",
-  "css": ".diagram-cli{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-cli .diagram-arrow{font-size:22px;line-height:1}.diagram-cli .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-vx4go0" title={"Adaptador CLI → registro → superficie de acción"} summary={"ShellCliAdapter envuelve un binario; CliRegistry recopila adaptadores para su descubrimiento; defineAction expone una llamada en la superficie de acción agente + UI."}>
+
+```html
+<div class="diagram-cli">
+  <div class="diagram-node" data-rough>
+    gh · ffmpeg · stripe<br /><small class="diagram-muted"
+      >command-line tools</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    ShellCliAdapter<br /><small class="diagram-muted"
+      >isAvailable · execute</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    CliRegistry<br /><small class="diagram-muted"
+      >describe() for discovery</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill accent">defineAction</div>
+</div>
+```
+
+```css
+.diagram-cli {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-cli .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-cli .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## La interfaz {#the-interface}
 
 Cada adaptador CLI implementa `CliAdapter`:

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

@@ -15,13 +15,51 @@ Para enrutamiento basado en archivos (agregar páginas, parámetros dinámicos y
 
 La forma principal de leer y escribir datos de aplicaciones desde el navegador es a través de enlaces de acción. Nunca escriba a mano llamadas `fetch` a rutas `/_agent-native/*`; en su lugar, utilice los ayudantes con nombre (consulte [Actions](/docs/actions)).
 
-```an-diagram title="El bucle de datos del navegador" summary="Los ganchos leen y escriben mediante acciones; useDbSync observa la base de datos para que las escrituras en segundo plano y del agente vuelvan a buscar los mismos cachés automáticamente."
-{
-  "html": "<div class=\"diagram-client\"><div class=\"diagram-col\"><div class=\"diagram-node\">useActionQuery<br><small class=\"diagram-muted\">cached read</small></div><div class=\"diagram-node\">useActionMutation<br><small class=\"diagram-muted\">write + invalidate</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-box\" data-rough>Actions<br><small class=\"diagram-muted\">/_agent-native/actions/*</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>base de datos SQL</strong></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">useDbSync &rarr; refetch on change</div></div>",
-  "css": ".diagram-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-client .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-client .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1gc0aq4" title="El bucle de datos del navegador" summary={"Los ganchos leen y escriben mediante acciones; useDbSync observa la base de datos para que las escrituras en segundo plano y del agente vuelvan a buscar los mismos cachés automáticamente."}>
+
+```html
+<div class="diagram-client">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useActionQuery<br /><small class="diagram-muted">cached read</small>
+    </div>
+    <div class="diagram-node">
+      useActionMutation<br /><small class="diagram-muted"
+        >write + invalidate</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-box" data-rough>
+    Actions<br /><small class="diagram-muted">/_agent-native/actions/*</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough><strong>base de datos SQL</strong></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">useDbSync &rarr; refetch on change</div>
+</div>
+```
+
+```css
+.diagram-client {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-client .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-client .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```tsx
 import {
   useActionQuery,
@@ -376,13 +414,46 @@ function DashboardView({ id }) {
 - **Mutaciones iniciadas por UI:** Cuando ejecuta una acción desde UI usando `useActionMutation`, la mutación activa inmediatamente un evento local con `source: "action"` en caso de éxito. Esto activa una **rebusca instantánea y optimista** de todas las claves de consulta dependiendo de esa acción, evitando retrasos visuales.
 - **Mutaciones en segundo plano o del agente:** Cuando el agente de IA, un webhook o un trabajador en segundo plano muta los datos, la actualización se transmite al cliente. El `useDbSync` del cliente captura esto instantáneamente a través de SSE (Eventos enviados por el servidor) o recurre al **tic de sondeo de 2 segundos**. La versión de la clave de consulta luego cambia, lo que activa una nueva búsqueda en segundo plano.
 
-```an-diagram title="Dos caminos para una nueva recuperación" summary="Una mutación local invalida sus propios cachés instantáneamente; una escritura remota llega a esta pestaña a través de SSE, o el tick de sondeo como alternativa."
-{
-  "html": "<div class=\"diagram-latency\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Esta pestaña</span><strong>useActionMutation</strong><small class=\"diagram-muted\">fires source: \"action\" on success &rarr; instant local refetch</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Agente · webhook · otra pestaña</span><strong>Escritura remota</strong><small class=\"diagram-muted\">SSE push, or the ~2s polling tick as fallback &rarr; version bumps &rarr; background refetch</small></div></div></div>",
-  "css": ".diagram-latency .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-latency .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px}"
+<Diagram id="doc-block-1lm4ior" title={"Dos caminos para una nueva recuperación"} summary={"Una mutación local invalida sus propios cachés instantáneamente; una escritura remota llega a esta pestaña a través de SSE, o el tick de sondeo como alternativa."}>
+
+```html
+<div class="diagram-latency">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill ok">Esta pestaña</span
+      ><strong>useActionMutation</strong
+      ><small class="diagram-muted"
+        >fires source: "action" on success &rarr; instant local refetch</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">Agente · webhook · otra pestaña</span
+      ><strong>Escritura remota</strong
+      ><small class="diagram-muted"
+        >SSE push, or the ~2s polling tick as fallback &rarr; version bumps
+        &rarr; background refetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-latency .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-latency .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## cn(...entradas) {#cn}
 
 Utilidad para fusionar nombres de clases (clsx + tailwind-merge):

package/docs/content/locales/es-ES/cloneable-saas.mdx

@@ -51,13 +51,54 @@ Esta no es una afirmación teórica. El autor del marco ejecuta su bandeja de en
 
 El camino desde "Quiero mi propio SaaS" hasta "Tengo mi propio SaaS" es corto:
 
-```an-diagram title="Bifurca y personaliza" summary="Elija un producto terminado, póngale una marca, evolucione en un lenguaje sencillo y envíelo a su propio dominio."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">nombre, colores, logotipo, copy</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-mroml5" title="Bifurca y personaliza" summary={"Elija un producto terminado, póngale una marca, evolucione en un lenguaje sencillo y envíelo a su propio dominio."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>Pick</strong
+    ><small class="diagram-muted">a complete template</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>Brand</strong
+    ><small class="diagram-muted">nombre, colores, logotipo, copy</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">3</span><strong>Customize</strong
+    ><small class="diagram-muted">ask the agent &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>Ship</strong
+    ><small class="diagram-muted">your own domain</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **Elija una plantilla.** Utilice el selector CLI o explore los documentos y elija una para comenzar.
 2. **Marca.** Cambia el nombre, los colores, el logotipo y el texto. La mayoría de las plantillas exponen esto en un único archivo de configuración.
 3. **Personalízalo.** Pídele al agente que agregue la columna que necesitas, cambia la forma en que se agrupa la bandeja de entrada, conéctate a tu API interno, agrega una nueva vista. El agente edita el código; revisas la diferencia.
@@ -74,13 +115,49 @@ Un modelo tradicional de bifurcación del código base se desmorona a escala: ca
 
 El resultado: Claude: flexibilidad a nivel de código para cada usuario, con una economía de implementación normal de SaaS.
 
-```an-diagram title="Por qué escalan las bifurcaciones por usuario" summary="Dos ideas mantienen práctico el modelo de bifurcación y personalización: el agente realiza el mantenimiento y la personalización por usuario reside en SQL, no en el código por usuario."
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>Compartird codebase</strong><small class=\"diagram-muted\">una app, desplegada una vez</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>Capa por usuario en SQL</strong><small class=\"diagram-muted\">skills · memoria · instrucciones · MCP · subagentes</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-18s9hur" title={"Por qué escalan las bifurcaciones por usuario"} summary={"Dos ideas mantienen práctico el modelo de bifurcación y personalización: el agente realiza el mantenimiento y la personalización por usuario reside en SQL, no en el código por usuario."}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>Compartird codebase</strong
+    ><small class="diagram-muted">una app, desplegada una vez</small>
+    <div class="diagram-pill accent">agent does the maintenance</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>Capa por usuario en SQL</strong
+    ><small class="diagram-muted"
+      >skills · memoria · instrucciones · MCP · subagentes</small
+    >
+    <div class="diagram-pill ok">no per-user code</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## ¿No quieres bifurcar? {#hosted}
 
 No es necesario. Cada plantilla también está disponible como una aplicación alojada en `agent-native.com`: `mail.agent-native.com`, `calendar.agent-native.com`, etc. Utilice la versión alojada de forma gratuita o de pago; bifurca solo cuando quieras cambiar algo que la versión alojada no expone.

package/docs/content/locales/es-ES/code-agents-ui.mdx

@@ -25,13 +25,76 @@ Hay tres capas:
 - **Escritorio**: la pestaña Código de la barra lateral izquierda agrega inicio de terminal nativo, vistas web de aplicaciones y enlaces profundos de escritorio mientras se usa el mismo modelo de ejecución.
 - **UI compartido**: `@agent-native/code-agents-ui` renderiza la superficie reutilizable React.
 
-```an-diagram title="Tres capas en una sola tienda" summary="CLI, Desktop y la interfaz de usuario compartida son superficies diferentes en el mismo almacén de ejecución y ejecutor respaldado por archivos; los hosts lo adaptan a través del contrato CodeAgentsHost."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">iniciar · reanudar · estado · detener</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">terminal nativo · webviews · enlaces profundos</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Compartird UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Almacén de ejecuciones en archivos + ejecutor<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1pigctn" title="Tres capas en una sola tienda" summary={"CLI, Desktop y la interfaz de usuario compartida son superficies diferentes en el mismo almacén de ejecución y ejecutor respaldado por archivos; los hosts lo adaptan a través del contrato CodeAgentsHost."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted"
+        >iniciar · reanudar · estado · detener</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted"
+        >terminal nativo · webviews · enlaces profundos</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">Compartird UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    Almacén de ejecuciones en archivos + ejecutor<br /><small
+      class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 La división actual converge intencionalmente: la barra lateral del agente estándar y los equipos de agentes se ejecutan en el ciclo de vida principal de `run-manager`, mientras que el código Agent-Native utiliza sesiones locales de larga duración respaldadas por el almacén de ejecución de código basado en archivos y el vocabulario compartido del controlador de ejecución en segundo plano.
 
 El UI compartido está controlado por el host. No sabe si se está ejecutando en Electron, una plantilla de navegador o un futuro shell alojado. Los hosts proporcionan una implementación `CodeAgentsHost`.
@@ -373,13 +436,43 @@ La conexión es solo saliente desde el escritorio:
 5. El móvil lee `hosts`, `runs` y `transcript` desde Dispatch; nunca habla
    directamente al escritorio.
 
-```an-diagram title="El Dispatch remoto es solo saliente" summary="El móvil nunca habla directamente con el escritorio. Desktop realiza encuestas largas a Dispatch, reclama comandos, gestiona el almacén de ejecución local y refleja los resultados."
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>Móvil / Telegram<br><small class=\"diagram-muted\">/code · sesiones</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Relay de Dispatch<br><small class=\"diagram-muted\">hosts · ejecuciones · transcripción</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">long-polls · reclama · dirige el almacén de ejecuciones</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1qkssr7" title="El Dispatch remoto es solo saliente" summary={"El móvil nunca habla directamente con el escritorio. Desktop realiza encuestas largas a Dispatch, reclama comandos, gestiona el almacén de ejecución local y refleja los resultados."}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    Móvil / Telegram<br /><small class="diagram-muted">/code · sesiones</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Relay de Dispatch<br /><small class="diagram-muted"
+      >hosts · ejecuciones · transcripción</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >long-polls · reclama · dirige el almacén de ejecuciones</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Los puntos finales de retransmisión remota canónicos son:
 
 <Endpoint id="doc-block-1xqpgw5" title="Trabajo en cola de reclamaciones de escritorio" method="POST" path="/_agent-native/integrations/remote/poll" summary={"El escritorio realiza una encuesta prolongada al relé para reclamar comandos en cola"} auth="Desktop device token" responses={[

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

@@ -25,13 +25,72 @@ Evite importar componentes UI desde el paquete básico `@agent-native/core`. Usa
 `@agent-native/core/client` o una subruta `@agent-native/core/client/*` enfocada
 para que los paquetes elijan la entrada segura para el navegador.
 
-```an-diagram title="Bajar una capa, no fuera del marco." summary="Cada capa mantiene el mismo tiempo de ejecución (acciones, estado del subproceso y sincronización SQL-backed) al tiempo que le brinda más control sobre Chrome."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">Toda la barra lateral alrededor de tu app. El caso del 80 %.</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">El panel o una página de chat en tu propio layout.</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">Redactarr and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>Mismo runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-1v79shu" title="Bajar una capa, no fuera del marco." summary={"Cada capa mantiene el mismo tiempo de ejecución (acciones, estado del subproceso y sincronización SQL-backed) al tiempo que le brinda más control sobre Chrome."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted"
+      >Toda la barra lateral alrededor de tu app. El caso del 80 %.</small
+    >
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted"
+      >El panel o una página de chat en tu propio layout.</small
+    >
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + runtime</span
+    ><small class="diagram-muted"
+      >Own the chrome; optionally pass a BYO AgentChatRuntime.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span
+    ><small class="diagram-muted"
+      >Redactarr and transcript primitives only.</small
+    >
+  </div>
+  <div class="diagram-rail" data-rough>
+    Mismo runtime: actions &middot; thread state &middot; SQL-backed sync
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## Agente y chat UI {#agent-chat-ui}
 
 | API                                  | Ruta de importación                          | Usar cuando                                                                                                                                 |
@@ -178,13 +237,64 @@ ganchos de documentos colaborativos.
 | `useCollaborativeMap()` / `useCollaborativeArray()` | Experimenta con el estado estructurado Y.Map/Y.Array cuando la colaboración del cuerpo de texto enriquecido no encaja correctamente. |
 | `dedupeCollabUsersByEmail()`                        | Crea una pila de avatar personalizada sin pestañas duplicadas para el mismo usuario.                                                 |
 
-```an-diagram title="Presencia: los humanos y el agente comparten una capa de conciencia." summary="useCollaborativeDoc posee la instancia de conocimiento; los ganchos de cliente publican cursores y selecciones; Los asistentes del servidor permiten que la acción de un agente aparezca como un participante en vivo."
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">Acción del agente<br><small class=\"diagram-muted\">agentUpdateSelection()</small></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\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">renderiza a todos, agente incluido</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1tkd3rr" title="Presencia: los humanos y el agente comparten una capa de conciencia." summary={"useCollaborativeDoc posee la instancia de conocimiento; los ganchos de cliente publican cursores y selecciones; Los asistentes del servidor permiten que la acción de un agente aparezca como un participante en vivo."}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Humans<br /><small class="diagram-muted"
+        >usePresence &middot; cursors, selection</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      Acción del agente<br /><small class="diagram-muted"
+        >agentUpdateSelection()</small
+      >
+    </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">useCollaborativeDoc</span
+    ><small class="diagram-muted">awareness layer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >renderiza a todos, agente incluido</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 El agente del lado del servidor actions que quiera aparecer como participante en vivo utiliza el
 ayudantes de presencia de agentes `@agent-native/core/collab` de nivel inferior: