@agent-native/core 0.79.26 → 0.80.0

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

@@ -22,13 +22,77 @@ Si una plantilla no debe exponer extensiones creadas por el usuario, configúrel
 Extensión orientada al agente actions y orientación rápida mientras se deja el resto del
 agente de aplicación intacto.
 
-```an-diagram title="El puente de la caja de arena" summary="La extensión HTML se ejecuta en un iframe aislado y llega al host solo a través de un conjunto fijo de ayudas de puente: cada llamada tiene un alcance y un acceso verificado."
-{
-  "html": "<div class=\"ext-bridge\"><div class=\"diagram-card sandbox\" data-rough><span class=\"diagram-pill warn\">Sandboxed iframe</span><small class=\"diagram-muted\">Alpine.js HTML &middot; no host cookies, session, or DOM</small><div class=\"ext-helpers\"><span class=\"diagram-pill\">appAction</span><span class=\"diagram-pill\">appFetch</span><span class=\"diagram-pill\">dbQuery / dbExec</span><span class=\"diagram-pill\">extensionData</span><span class=\"diagram-pill\">extensionFetch</span></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Plantilla host<br><small class=\"diagram-muted\">acciones, SQL con alcance automático</small></div><div class=\"diagram-box\">Secret proxy<br><small class=\"diagram-muted\"><code>${keys.NAME}</code>, bloqueado al dominio</small></div><div class=\"diagram-box\">APIs externas<br><small class=\"diagram-muted\">solo mediante extensionFetch</small></div></div></div>",
-  "css": ".ext-bridge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ext-bridge .sandbox{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.ext-bridge .ext-helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.ext-bridge .diagram-col{display:flex;flex-direction:column;gap:8px}.ext-bridge .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-916xvd" title="El puente de la caja de arena" summary={"La extensión HTML se ejecuta en un iframe aislado y llega al host solo a través de un conjunto fijo de ayudas de puente: cada llamada tiene un alcance y un acceso verificado."}>
+
+```html
+<div class="ext-bridge">
+  <div class="diagram-card sandbox" data-rough>
+    <span class="diagram-pill warn">Sandboxed iframe</span
+    ><small class="diagram-muted"
+      >Alpine.js HTML &middot; no host cookies, session, or DOM</small
+    >
+    <div class="ext-helpers">
+      <span class="diagram-pill">appAction</span
+      ><span class="diagram-pill">appFetch</span
+      ><span class="diagram-pill">dbQuery / dbExec</span
+      ><span class="diagram-pill">extensionData</span
+      ><span class="diagram-pill">extensionFetch</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Plantilla host<br /><small class="diagram-muted"
+        >acciones, SQL con alcance automático</small
+      >
+    </div>
+    <div class="diagram-box">
+      Secret proxy<br /><small class="diagram-muted"
+        ><code>${keys.NAME}</code>, bloqueado al dominio</small
+      >
+    </div>
+    <div class="diagram-box">
+      APIs externas<br /><small class="diagram-muted"
+        >solo mediante extensionFetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.ext-bridge {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ext-bridge .sandbox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.ext-bridge .ext-helpers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.ext-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ext-bridge .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 Las extensiones también se pueden **respaldar en el repositorio en modo de archivo local**. En ese flujo de trabajo,
 `agent-native.json` declara una carpeta `extensions`, cada extensión tiene una
 Manifiesto `extension.json` más un archivo de entrada HTML, y la aplicación los representa
@@ -220,14 +284,54 @@ Una ranura es un widget con nombre en el área que incluye una plantilla:
 
 Cuando una extensión se **instala en una ranura**, el anfitrión inserta el contexto relevante (el correo electrónico del contacto, la identificación del panel, la identificación del evento) en el iframe. La extensión dice `window.slotContext` para saber qué está mirando el usuario.
 
-```an-diagram title="Las ranuras introducen contexto en el widget" summary="La plantilla de host posee espacios con nombre; instalar una extensión en uno le proporciona window.slotContext para lo que el usuario esté viendo actualmente."
-{
-"html": "<div class=\"slot\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Hilo de correo</span><small class=\"diagram-muted\">slot <code>mail.contact-sidebar.bottom</code></small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box accent\"><code>window.slotContext</code><br><small class=\"diagram-muted\">{ contactEmail }</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Notas de contacto</span><small class=\"diagram-muted\">loads notes for that contact &mdash; same widget, different context</small></div></div>",
-"css": ".slot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.slot .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.slot .diagram-arrow{font-size:22px}"
-}
+<Diagram id="doc-block-1uwb6po" title="Las ranuras introducen contexto en el widget" summary={"La plantilla de host posee espacios con nombre; instalar una extensión en uno le proporciona window.slotContext para lo que el usuario esté viendo actualmente."}>
+
+```html
+<div class="slot">
+  <div class="diagram-card">
+    <span class="diagram-pill">Hilo de correo</span
+    ><small class="diagram-muted"
+      >slot <code>mail.contact-sidebar.bottom</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box accent">
+    <code>window.slotContext</code><br /><small class="diagram-muted"
+      >{ contactEmail }</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Notas de contacto</span
+    ><small class="diagram-muted"
+      >loads notes for that contact &mdash; same widget, different
+      context</small
+    >
+  </div>
+</div>
+```
 
+```css
+.slot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.slot .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  min-width: 180px;
+}
+.slot .diagram-arrow {
+  font-size: 22px;
+}
 ```
 
+</Diagram>
+
 ### Un ejemplo concreto
 
 Imagine la extensión de notas de contacto de la galería. Por sí solo, es un widget independiente. Para que aparezca dentro de la barra lateral de contacto de Mail:

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

@@ -19,13 +19,68 @@ Cualquier host compatible con MCP puede acceder a una aplicación nativa del age
 
 El puente del agente externo cierra el ciclo. Primero, conecta su propio agente a una aplicación **alojada**, ya sea pegando el MCP URL remoto de la aplicación en un host de chat como Claude o ChatGPT, o ejecutando el flujo de desarrollador CLI para agentes de codificación locales. Luego, el agente hace el trabajo sobre MCP y entrega al usuario una **Aplicación MCP** UI en línea en hosts compatibles o un único enlace **"Abrir en <aplicación> →"** que abre la aplicación real centrada exactamente en lo que se produjo. Reutiliza el contrato `navigate` / `application_state` existente; el UI ya drena cada 2 segundos (ver [Context Awareness](/docs/context-awareness)); no hay un segundo mecanismo de navegación.
 
-```an-diagram title="El viaje de ida y vuelta del agente externo" summary="Un host externo llama a una herramienta a través de MCP; la aplicación devuelve un artefacto más un enlace Abrir. Al hacer clic en él, se resuelve la sesión del navegador y se enfoca el artefacto en la interfaz de usuario en ejecución; el enlace no tiene ningún estado privilegiado."
-{
-  "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>Host externo<br><small class=\"diagram-muted\">Claude &middot; ChatGPT &middot; Codex &middot; Cursor</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\">Herramienta MCP call</span><small class=\"diagram-muted\">e.g. <code>manage-draft</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>La app produce un artefacto<br><small class=\"diagram-muted\">+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>El usuario hace clic en el enlace</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill ok\"><code>/_agent-native/open</code></span><small class=\"diagram-muted\">resolves the <strong>browser</strong> session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Writes <code>navigate</code> app-state<br><small class=\"diagram-muted\">La UI enfoca el artefacto</small></div></div>",
-  "css": ".xa-trip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.xa-trip .center{display:flex;flex-direction:column;align-items:center;gap:4px}.xa-trip .diagram-arrow{font-size:22px;line-height:1}.xa-trip code{font-size:.85em}"
+<Diagram id="doc-block-q6cilz" title="El viaje de ida y vuelta del agente externo" summary={"Un host externo llama a una herramienta a través de MCP; la aplicación devuelve un artefacto más un enlace Abrir. Al hacer clic en él, se resuelve la sesión del navegador y se enfoca el artefacto en la interfaz de usuario en ejecución; el enlace no tiene ningún estado privilegiado."}>
+
+```html
+<div class="xa-trip">
+  <div class="diagram-box" data-rough>
+    Host externo<br /><small class="diagram-muted"
+      >Claude &middot; ChatGPT &middot; Codex &middot; Cursor</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">Herramienta MCP call</span
+    ><small class="diagram-muted">e.g. <code>manage-draft</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    La app produce un artefacto<br /><small class="diagram-muted"
+      >+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>El usuario hace clic en el enlace</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill ok"><code>/_agent-native/open</code></span
+    ><small class="diagram-muted"
+      >resolves the <strong>browser</strong> session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Writes <code>navigate</code> app-state<br /><small class="diagram-muted"
+      >La UI enfoca el artefacto</small
+    >
+  </div>
+</div>
+```
+
+```css
+.xa-trip {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.xa-trip .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.xa-trip .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.xa-trip code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 La regla de identidad es la bisagra de seguridad: el enlace es solo `view` + identificadores de registro + filtros, y la escritura `navigate` centrada en el registro está dirigida a quien haya iniciado sesión en el **navegador**, nunca al token MCP del agente externo. Es por eso que es seguro pegar el enlace en una terminal o en la transcripción del chat.
 
 ## ¿Qué ruta de agente necesitas? {#which-agent-path}
@@ -247,13 +302,69 @@ Esta es la explicación canónica de los niveles del catálogo MCP; otras págin
 
 El servidor MCP ofrece un **catálogo compacto de forma predeterminada para cada persona que llama**: conectores alojados (ChatGPT, Claude), clientes de código (Código Claude, Cursor, Codex) y el proxy local CLI/stdio por igual. La superficie de acción completa se ofrece solo mediante suscripción explícita. El catálogo nunca se deduce del nombre del cliente o del agente de usuario.
 
-```an-diagram title="Dos niveles de catálogo" summary="Cada persona que llama obtiene el nivel compacto de forma predeterminada; la superficie completa de ~105 herramientas es solo opcional. La búsqueda de herramientas cierra la brecha para que nunca nada quede realmente oculto."
-{
-  "html": "<div class=\"xa-tiers\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Compact / connector tier &middot; default</span><strong>~20&ndash;30 tools</strong><small class=\"diagram-muted\">Template-declared app actions + cross-app builtins (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>, <code>create_embed_session</code>) + always-present <code>tool-search</code>.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Full tier &middot; opt-in</span><strong>~105 herramientas</strong><small class=\"diagram-muted\">Explicit opt-in only: <code>--full-catalog</code> token or <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small></div></div><p class=\"diagram-muted note\"><code>tool-search</code> reaches any full-tier tool on demand &mdash; so the compact default keeps context small without hiding capability.</p>",
-  "css": ".xa-tiers{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}.xa-tiers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1;min-width:240px}.xa-tiers .diagram-arrow{align-self:center;font-size:24px;line-height:1}.xa-tiers .note{flex-basis:100%;margin:4px 0 0;font-size:.85em}.xa-tiers code{font-size:.85em}"
+<Diagram id="doc-block-1y1gjh2" title={"Dos niveles de catálogo"} summary={"Cada persona que llama obtiene el nivel compacto de forma predeterminada; la superficie completa de ~105 herramientas es solo opcional. La búsqueda de herramientas cierra la brecha para que nunca nada quede realmente oculto."}>
+
+```html
+<div class="xa-tiers">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill ok"
+      >Compact / connector tier &middot; default</span
+    ><strong>~20&ndash;30 tools</strong
+    ><small class="diagram-muted"
+      >Template-declared app actions + cross-app builtins
+      (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>,
+      <code>create_embed_session</code>) + always-present
+      <code>tool-search</code>.</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Full tier &middot; opt-in</span
+    ><strong>~105 herramientas</strong
+    ><small class="diagram-muted"
+      >Explicit opt-in only: <code>--full-catalog</code> token or
+      <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small
+    >
+  </div>
+</div>
+<p class="diagram-muted note">
+  <code>tool-search</code> reaches any full-tier tool on demand &mdash; so the
+  compact default keeps context small without hiding capability.
+</p>
+```
+
+```css
+.xa-tiers {
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.xa-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 240px;
+}
+.xa-tiers .diagram-arrow {
+  align-self: center;
+  font-size: 24px;
+  line-height: 1;
+}
+.xa-tiers .note {
+  flex-basis: 100%;
+  margin: 4px 0 0;
+  font-size: 0.85em;
+}
+.xa-tiers code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 ### Nivel compacto/conector (predeterminado) {#connector-tier}
 
 De forma predeterminada, cada agente conectado ve un catálogo pequeño y seleccionado (entre 20 y 30 herramientas frente a 105 en la superficie completa):

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

@@ -28,13 +28,67 @@ El agente nativo es para personas que desean que una aplicación real y un agent
 
 La mayoría de las aplicaciones incorporan IA como una ocurrencia tardía que en realidad no puede _hacer_ cosas en la aplicación. En una aplicación nativa del agente, el agente es un ciudadano de primera clase que comparte el mismo actions, la misma base de datos y el mismo estado que el UI, por lo que puede hacer cualquier cosa que los botones puedan hacer y modificar el propio código de la aplicación. Ver [What Is Agent-Native?](/docs/what-is-agent-native#the-ladder).
 
-```an-diagram title="IA integrada frente a agent-native" summary="Una barra lateral de chat integrada vive en su propio mundo. Un agente agent-native comparte las mismas acciones, base de datos y estado que la interfaz de usuario."
-{
-  "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">IA añadida por encima</span><div class=\"diagram-node\">Barra lateral de chat</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>mundo de IA separado<br><small class=\"diagram-muted\">no puede tocar la app</small></div><div class=\"diagram-box diagram-muted\">App UI &amp; data</div></div><div class=\"diagram-divider\" aria-hidden=\"true\"></div><div class=\"diagram-col\"><span class=\"diagram-pill ok\">Agent-native</span><div class=\"diagram-row2\"><div class=\"diagram-node\">UI</div><div class=\"diagram-node\">Agent</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>shared actions, DB &amp; state</div></div></div>",
-  "css": ".diagram-vs{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}.diagram-vs .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:center;flex:1;min-width:200px}.diagram-vs .diagram-row2{display:flex;gap:8px}.diagram-vs .diagram-arrow{font-size:20px;line-height:1}.diagram-vs .diagram-divider{width:1px;align-self:stretch;background:currentColor;opacity:.15}"
+<Diagram id="doc-block-182gis3" title="IA integrada frente a agent-native" summary={"Una barra lateral de chat integrada vive en su propio mundo. Un agente agent-native comparte las mismas acciones, base de datos y estado que la interfaz de usuario."}>
+
+```html
+<div class="diagram-vs">
+  <div class="diagram-col">
+    <span class="diagram-pill warn">IA añadida por encima</span>
+    <div class="diagram-node">Barra lateral de chat</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      mundo de IA separado<br /><small class="diagram-muted"
+        >no puede tocar la app</small
+      >
+    </div>
+    <div class="diagram-box diagram-muted">App UI &amp; data</div>
+  </div>
+  <div class="diagram-divider" aria-hidden="true"></div>
+  <div class="diagram-col">
+    <span class="diagram-pill ok">Agent-native</span>
+    <div class="diagram-row2">
+      <div class="diagram-node">UI</div>
+      <div class="diagram-node">Agent</div>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>shared actions, DB &amp; state</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vs {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+.diagram-vs .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+.diagram-vs .diagram-row2 {
+  display: flex;
+  gap: 8px;
+}
+.diagram-vs .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-vs .diagram-divider {
+  width: 1px;
+  align-self: stretch;
+  background: currentColor;
+  opacity: 0.15;
 }
 ```
 
+</Diagram>
+
 ### ¿Es de código abierto? {#is-this-open-source}
 
 Sí. El marco y todas las plantillas son de código abierto. Puede ejecutar todo localmente, autohospedarse o utilizar la nube de Builder.io para alojamiento administrado, colaboración y funciones de equipo.
@@ -126,13 +180,49 @@ En cualquier lugar. El servidor se ejecuta en Nitro, que se compila en cualquier
 
 SSE proporciona a las escrituras del mismo proceso una ruta inmediata al navegador, y una encuesta ligera de contador de versiones sigue siendo la alternativa porque funciona en todos los entornos de implementación, incluidos los sin servidor y los perimetrales, donde es posible que los sockets persistentes no estén disponibles. Ver [Key Concepts — Sincronización en vivo](/docs/key-concepts#polling-sync).
 
-```an-diagram title="SSE primero, respaldo de encuesta" summary="Las escrituras en el mismo proceso se transmiten al instante; una encuesta de contador de versiones mantiene convergentes las escrituras sin servidor, perimetrales y entre procesos."
-{
-  "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>Escritura en BD</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">SSE<br><small class=\"diagram-muted\">/_agent-native/events &middot; instant</small></div><div class=\"diagram-node\">Sondeo<br><small class=\"diagram-muted\">/_agent-native/poll &middot; universal fallback</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Recarga del navegador</div></div>",
-  "css": ".diagram-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-transport .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-transport .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-bph01y" title="SSE primero, respaldo de encuesta" summary={"Las escrituras en el mismo proceso se transmiten al instante; una encuesta de contador de versiones mantiene convergentes las escrituras sin servidor, perimetrales y entre procesos."}>
+
+```html
+<div class="diagram-transport">
+  <div class="diagram-box" data-rough>Escritura en BD</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      SSE<br /><small class="diagram-muted"
+        >/_agent-native/events &middot; instant</small
+      >
+    </div>
+    <div class="diagram-node">
+      Sondeo<br /><small class="diagram-muted"
+        >/_agent-native/poll &middot; universal fallback</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>Recarga del navegador</div>
+</div>
+```
+
+```css
+.diagram-transport {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-transport .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-transport .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ### ¿Por qué el UI no puede llamar directamente a un LLM? {#why-no-inline-llm-calls}
 
 La IA no es determinista, por lo que necesita un flujo de conversación para brindar retroalimentación e iteración (no botones de un solo uso) y el agente ya tiene su código base, instrucciones, skills y el historial del que carece una llamada en línea. Dirigir todo a través del agente también es lo que permite que la aplicación se controle desde Slack, Telegram u otro agente. Ver [Key Concepts — Agent chat bridge](/docs/key-concepts#agent-chat-bridge).

package/docs/content/locales/es-ES/file-uploads.mdx

@@ -17,13 +17,70 @@ El orden de resolución del proveedor es:
 2. **Proveedor Builder.io**: integrado, se activa automáticamente cuando se conecta Builder.io
 3. **SQL reserva**: almacena archivos como base64 en la base de datos (está bien para desarrollo, no para producción)
 
-```an-diagram title="Orden de resolución del proveedor" summary="uploadFile() elige el primer proveedor configurado en orden. El respaldo SQL siempre existe, por lo que las cargas funcionan sin configuración."
-{
-  "html": "<div class=\"diagram-upload\"><div class=\"diagram-box\" data-rough>uploadFile()<br><small class=\"diagram-muted\">POST /_agent-native/file-upload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-step\"><span class=\"diagram-pill accent\">1</span><div class=\"diagram-node\">Registrado por el usuario<br><small class=\"diagram-muted\">registerFileUploadProvider() — S3, R2, GCS…</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><div class=\"diagram-node\">Builder.io<br><small class=\"diagram-muted\">automático al conectar — servido por CDN</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill warn\">3</span><div class=\"diagram-node\">respaldo SQL<br><small class=\"diagram-muted\">base64 en BD — solo desarrollo</small></div></div></div></div>",
-  "css": ".diagram-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-upload .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-upload .diagram-step{display:flex;align-items:center;gap:8px}.diagram-upload .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-12sluna" title={"Orden de resolución del proveedor"} summary={"uploadFile() elige el primer proveedor configurado en orden. El respaldo SQL siempre existe, por lo que las cargas funcionan sin configuración."}>
+
+```html
+<div class="diagram-upload">
+  <div class="diagram-box" data-rough>
+    uploadFile()<br /><small class="diagram-muted"
+      >POST /_agent-native/file-upload</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-step">
+      <span class="diagram-pill accent">1</span>
+      <div class="diagram-node">
+        Registrado por el usuario<br /><small class="diagram-muted"
+          >registerFileUploadProvider() — S3, R2, GCS…</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span>
+      <div class="diagram-node">
+        Builder.io<br /><small class="diagram-muted"
+          >automático al conectar — servido por CDN</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill warn">3</span>
+      <div class="diagram-node">
+        respaldo SQL<br /><small class="diagram-muted"
+          >base64 en BD — solo desarrollo</small
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-upload {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-upload .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-upload .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-upload .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-7xne1g" title="El punto final de carga" method="POST" path="/_agent-native/file-upload" summary={"Cargue un archivo a través del proveedor activo y obtenga un URL público."} request={{
   "contentType": "multipart/form-data"
 }} responses={[

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.)