@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/es-ES/template-mail.mdx

@@ -18,13 +18,69 @@ Un cliente de correo electrónico impulsado por agentes. Conecte su cuenta Gmail
 
 Cuando abres la aplicación, la bandeja de entrada del teclado y la vista del hilo permanecen enfocadas en el correo mismo. El agente siempre sabe en qué vista se encuentra y qué hilo tiene abierto, por lo que puede decir "archivar esto" o "redactar un rechazo amistoso" sin explicar qué es "esto".
 
-```an-diagram title="Cómo fluye una solicitud por correo" summary="Los atajos de teclado y las indicaciones del agente ejecutan las mismas acciones. El correo electrónico vive en Gmail; borradores, automatizaciones y seguimiento en vivo en SQL y application_state."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Tú controlas<br><small class=\"diagram-muted\">atajos J/K/E/R</small></div><div class=\"diagram-node\">Le pides al agente<br><small class=\"diagram-muted\">\"redacta un rechazo amable\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">varias cuentas, vía OAuth</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">borradores · automatizaciones · seguimiento</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">La bandeja se actualiza en vivo</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-z9ug9h" title={"Cómo fluye una solicitud por correo"} summary={"Los atajos de teclado y las indicaciones del agente ejecutan las mismas acciones. El correo electrónico vive en Gmail; borradores, automatizaciones y seguimiento en vivo en SQL y application_state."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Tú controlas<br /><small class="diagram-muted">atajos J/K/E/R</small>
+    </div>
+    <div class="diagram-node">
+      Le pides al agente<br /><small class="diagram-muted"
+        >"redacta un rechazo amable"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">varias cuentas, vía OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >borradores · automatizaciones · seguimiento</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">La bandeja se actualiza en vivo</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Qué puedes hacer con él
 
 - **Leer y clasificar correos electrónicos** con atajos de teclado (`J`/`K` para mover, `E` para archivar, `R` para responder, `C` para redactar).

package/docs/content/locales/es-ES/template-plan.mdx

@@ -23,13 +23,70 @@ commit, bifurcación o git diff: en una revisión de código visual a gran altur
 la misma superficie de revisión, para que pueda anotar, comentar y enviar comentarios al
 agente de la misma manera.
 
-```an-diagram title="Dos comandos, una superficie de revisión" summary="Ambos comandos publican a través del conector alojado Plan MCP en la misma superficie de anotaciones y comentarios."
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">antes del codigo: arquitectura, UI, refactor</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">despues del codigo: PR, commit, rama, diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Conector MCP de Plan<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Superficie de revision<br><small class=\"diagram-muted\">diagramas · wireframes · codigo anotado · comentarios</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">Agente de codigo<br><small class=\"diagram-muted\">feedback devuelto</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-17q5b97" title={"Dos comandos, una superficie de revisión"} summary={"Ambos comandos publican a través del conector alojado Plan MCP en la misma superficie de anotaciones y comentarios."}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted"
+        >antes del codigo: arquitectura, UI, refactor</small
+      >
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted"
+        >despues del codigo: PR, commit, rama, diff</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Conector MCP de Plan<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Superficie de revision<br /><small class="diagram-muted"
+      >diagramas · wireframes · codigo anotado · comentarios</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    Agente de codigo<br /><small class="diagram-muted">feedback devuelto</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-vi5rkz">
   <Screen
     surface="desktop"

package/docs/content/locales/es-ES/template-slides.mdx

@@ -18,13 +18,58 @@ Genere presentaciones completas a partir de un mensaje, edite diapositivas visua
 
 Cuando abre una plataforma, el lienzo de diapositivas, el esquema, las notas y la tira de película permanecen en una superficie del editor mientras el agente aún puede crear, revisar y navegar por las diapositivas a través de actions.
 
-```an-diagram title="Incitar a cubierta" summary="Solicite una plataforma y el agente transmitirá las diapositivas una a la vez a través de las mismas acciones que podría llamar desde CLI."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">elige diseños</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">paralelo, en streaming</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">El editor renderiza en vivo</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-gqrq0j" title="Incitar a cubierta" summary={"Solicite una plataforma y el agente transmitirá las diapositivas una a la vez a través de las mismas acciones que podría llamar desde CLI."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    Prompt<br /><small class="diagram-muted">"10-slide pitch deck"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">elige diseños</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">paralelo, en streaming</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">El editor renderiza en vivo</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Qué puedes hacer con él
 
 - **Genere presentaciones a partir de un mensaje.** "Genere una presentación de 10 diapositivas para un servicio de suscripción de café, la audiencia son los inversores".

package/docs/content/locales/es-ES/template-videos.mdx

@@ -18,13 +18,62 @@ Un estudio de vídeo programático para el tipo de gráficos en movimiento, demo
 
 Cuando abras el estudio, verás una lista de composiciones en la pantalla de inicio. Haga clic en uno y obtendrá un reproductor en la parte superior, una línea de tiempo en la parte inferior y un panel de propiedades a la derecha. El agente siempre sabe qué composición tienes abierta.
 
-```an-diagram title="Animación como datos" summary="Una composición es un componente React; Cada animación se lee de una pista para que el agente y la línea de tiempo editen los mismos datos."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">arrastrar, redimensionar, recorrer</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Composición React<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1vwmjf8" title={"Animación como datos"} summary={"Una composición es un componente React; Cada animación se lee de una pista para que el agente y la línea de tiempo editen los mismos datos."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >arrastrar, redimensionar, recorrer</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Composición React<br /><small class="diagram-muted"
+      >Remotion &lt;Player&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Qué puedes hacer con él
 
 - **Genere animaciones a partir de un mensaje.** "Agregue una tarjeta de título que se desvanece a los 2 segundos y se mantiene hasta los 5". El agente edita la composición.

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

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="Una llamada track(), cada proveedor" summary="Las personas que llaman al servidor y al cliente acceden al mismo registro, que distribuye cada evento a todos los proveedores activos en paralelo."
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">Código del servidor<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">Código del navegador<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</span><small class=\"diagram-muted\">distribución, enviar y olvidar</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19mt7vs" title="Una llamada track(), cada proveedor" summary={"Las personas que llaman al servidor y al cliente acceden al mismo registro, que distribuye cada evento a todos los proveedores activos en paralelo."}>
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Código del servidor<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      Código del navegador<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</span
+    ><small class="diagram-muted">distribución, enviar y olvidar</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Proveedores integrados {#built-in}
 
 Establezca una var de entorno y el proveedor se registre automáticamente al iniciar el servidor. No se requieren cambios de código.

package/docs/content/locales/es-ES/using-your-agent.mdx

@@ -9,13 +9,60 @@ La idea que define el agente nativo es que el agente y el UI son **socios iguale
 
 Hay una línea directa simple. El agente **ve** lo que estás viendo, tú lo **diriges** hacia lo que deseas, puedes **incrustarlo** en cualquier lugar, puedes hacerlo completamente **UI ligera** cuando sea mejor y puedes **coeditar** los mismos documentos al mismo tiempo. Cada una de ellas es una página en esta sección.
 
-```an-diagram title="El bucle del día a día" summary="Cinco formas de trabajar con un agente acoplado: cada una es una página en esta sección."
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>UI ligera</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">Coeditar</span><small class=\"diagram-muted\">en vivo, lado a lado</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-112kskq" title={"El bucle del día a día"} summary={"Cinco formas de trabajar con un agente acoplado: cada una es una página en esta sección."}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>UI ligera</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">Coeditar</span
+    ><small class="diagram-muted">en vivo, lado a lado</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Ve lo que estás mirando {#it-sees}
 
 El agente no está ciego a su pantalla. Abra un correo electrónico y sabrá qué hilo. Seleccione un gráfico y sabrá qué gráfico. Resalte un párrafo y podrá actuar solo en ese rango. Esa conciencia compartida es lo que te permite decir "responder a esto" o "resumir la selección" sin tener que explicar el contexto cada vez.

package/docs/content/locales/es-ES/voice-input.mdx

@@ -19,13 +19,54 @@ El botón de voz del compositor graba audio en el navegador y luego elige un pro
 
 La elección del proveedor se almacena en el estado de la aplicación en `voice-transcription-prefs` para que el usuario pueda forzar `"auto"` (predeterminado: elige el mejor proveedor disponible), `"builder-gemini"`, `"builder"`, `"gemini"`, `"groq"`, `"openai"` o `"browser"` en la configuración de la barra lateral.
 
-```an-diagram title="Respaldo del proveedor de transcripción de voz" summary="El compositor graba audio, luego recorre los proveedores de servidores en orden y accede al navegador Web Speech API solo cuando no hay ningún proveedor de servidor disponible."
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">Botón de micrófono<br><small class=\"diagram-muted\">graba webm/opus</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">predeterminado cuando Builder está conectado</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-hj0d3v" title={"Respaldo del proveedor de transcripción de voz"} summary={"El compositor graba audio, luego recorre los proveedores de servidores en orden y accede al navegador Web Speech API solo cuando no hay ningún proveedor de servidor disponible."}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    Botón de micrófono<br /><small class="diagram-muted">graba webm/opus</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted"
+      >predeterminado cuando Builder está conectado</small
+    >
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 La ruta es **solo del mismo origen**: las POST entre sitios se rechazan para que un atacante no pueda grabar créditos de transcripción desde una página externa.
 
 ## Habilitación de proveedores {#enabling-providers}

package/docs/content/locales/es-ES/what-is-agent-native.mdx

@@ -50,13 +50,59 @@ Tres cosas cambian cuando llegas al peldaño 3:
 
 Ese es el peldaño 3. Es agente nativo.
 
-```an-diagram title="El principio de la escalera" summary="La mayoría de los equipos se detienen en el peldaño 1 o 2. El agente nativo es el peldaño 3: una aplicación real y un agente real en una superficie de acción compartida."
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">Peldaño 3 · agent-native</span><strong>Agente + UI como socios iguales</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">Peldaño 2</span><strong>Un chat con herramientas</strong><small class=\"diagram-muted\">El agente puede actuar, pero sigue siendo solo una ventana de chat. Sin paneles, listas ni atajos.</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">Peldaño 1</span><strong>Una sola llamada LLM</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-1qj0agk" title="El principio de la escalera" summary={"La mayoría de los equipos se detienen en el peldaño 1 o 2. El agente nativo es el peldaño 3: una aplicación real y un agente real en una superficie de acción compartida."}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">Peldaño 3 · agent-native</span
+    ><strong>Agente + UI como socios iguales</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">Peldaño 2</span
+    ><strong>Un chat con herramientas</strong
+    ><small class="diagram-muted"
+      >El agente puede actuar, pero sigue siendo solo una ventana de chat. Sin
+      paneles, listas ni atajos.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">Peldaño 1</span
+    ><strong>Una sola llamada LLM</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 Consulta [Key Concepts — Protocols](/docs/key-concepts#protocols) para ver cómo todo esto depende de la misma definición de acción.
 
 ## Por qué todo agente necesita un UI {#why-every-agent-needs-a-ui}
@@ -89,13 +135,58 @@ Este es el principio definitorio.
 >
 > **Del agente** — lenguaje natural, otros agentes vía A2A, Slack, Telegram. El agente escribe en la base de datos; el UI se actualiza automáticamente.
 
-```an-diagram title="Un sistema, dos maneras de entrar" summary="El agente y la interfaz de usuario escriben en las mismas acciones y en la misma base de datos. Todo lo que uno hace, el otro lo ve."
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">clics, formularios, atajos</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">lenguaje natural · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">base de datos SQL</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">La UI se actualiza en vivo</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1wecaga" title="Un sistema, dos maneras de entrar" summary="El agente y la interfaz de usuario escriben en las mismas acciones y en la misma base de datos. Todo lo que uno hace, el otro lo ve.">
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted">clics, formularios, atajos</small>
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted"
+        >lenguaje natural · A2A · Slack</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">base de datos SQL</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">La UI se actualiza en vivo</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 Cuando el agente crea un borrador de correo electrónico, aparece en UI. Cuando hace clic en "Enviar", el agente sabe que fue enviado. No existe un "mundo de agentes" y un "mundo UI" separados: es un solo sistema. Consulte [Key Concepts](/docs/key-concepts) para conocer la arquitectura que hace que esto funcione.
 
 ## Personalización normalmente reservada para herramientas eléctricas {#workspace-customization}