@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/es-ES/workspace-connections.mdx

@@ -16,13 +16,75 @@ Las conexiones del espacio de trabajo son el marco primitivo para los metadatos
 - **credentialRef**: un puntero a un secreto de almacén (`{ key: "SLACK_BOT_TOKEN", scope: "org" }`). La conexión dice dónde vive el token; la bóveda guarda el valor.
 - **Preparación**: el estado combinado que ve una aplicación: `connected` (otorgado + credenciales presentes), `needs_grant`, `needs_credentials`, `needs_attention` o `not_configured`.
 
-```an-diagram title="Conéctese una vez, otorgue aplicaciones, reutilice credenciales" summary="Una conexión contiene metadatos del proveedor (nunca secretos) y referencias de credenciales que apuntan a la bóveda. Las subvenciones por aplicación lo desbloquean. Las aplicaciones leen un único estado de preparación."
-{
-  "html": "<div class=\"diagram-conn\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection</span><div class=\"diagram-box\" data-rough>named provider account<br><small class=\"diagram-muted\">provider, label, estado, permisos, configuración &middot; never stores secret values</small></div><div class=\"diagram-muted\">credentialRef &rarr; pointer to a vault secret</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill\">Grant</span><div class=\"diagram-box\" data-rough>per-app permission<br><small class=\"diagram-muted\">no grant = no credential access</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Readiness</span><small class=\"diagram-muted\">what the app sees</small><div class=\"sev-row\"><span class=\"diagram-pill ok\">connected</span><span class=\"diagram-pill warn\">needs_grant</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">needs_credentials</span><span class=\"diagram-pill warn\">needs_attention</span></div><div class=\"sev-row\"><span class=\"diagram-pill\">not_configured</span></div></div></div>",
-  "css": ".diagram-conn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-conn .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-conn .diagram-arrow{font-size:22px;line-height:1}.diagram-conn .sev-row{display:flex;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-wj2qsa" title={"Conéctese una vez, otorgue aplicaciones, reutilice credenciales"} summary={"Una conexión contiene metadatos del proveedor (nunca secretos) y referencias de credenciales que apuntan a la bóveda. Las subvenciones por aplicación lo desbloquean. Las aplicaciones leen un único estado de preparación."}>
+
+```html
+<div class="diagram-conn">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Connection</span>
+    <div class="diagram-box" data-rough>
+      named provider account<br /><small class="diagram-muted"
+        >provider, label, estado, permisos, configuración &middot; never stores
+        secret values</small
+      >
+    </div>
+    <div class="diagram-muted">
+      credentialRef &rarr; pointer to a vault secret
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill">Grant</span>
+    <div class="diagram-box" data-rough>
+      per-app permission<br /><small class="diagram-muted"
+        >no grant = no credential access</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Readiness</span
+    ><small class="diagram-muted">what the app sees</small>
+    <div class="sev-row">
+      <span class="diagram-pill ok">connected</span
+      ><span class="diagram-pill warn">needs_grant</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">needs_credentials</span
+      ><span class="diagram-pill warn">needs_attention</span>
+    </div>
+    <div class="sev-row"><span class="diagram-pill">not_configured</span></div>
+  </div>
+</div>
+```
+
+```css
+.diagram-conn {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-conn .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-conn .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-conn .sev-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 ### Ejemplo resuelto: Slack
 
 Conecta Slack una vez y concédelo a Brain and Analytics:
@@ -260,13 +322,71 @@ La bóveda de credenciales responde: "¿Dónde se almacena el secreto, quién pu
 
 Los metadatos del proveedor de conexión del espacio de trabajo responden: "¿Qué proveedor es este, qué puede hacer, qué claves de credenciales podría necesitar y qué plantillas deberían ofrecerlo?"
 
-```an-diagram title="Almacén de conexión versus bóveda" summary="La bóveda posee el valor secreto. La conexión posee los metadatos del proveedor más credentialRefs (punteros). En el momento de la ejecución, la aplicación resuelve la referencia a través de una conexión otorgada y lee el valor de la bóveda."
-{
-  "html": "<div class=\"diagram-vault\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Almacén de conexiones</span><div class=\"diagram-box\" data-rough>provider account + metadata<br><small class=\"diagram-muted\">estado, permisos, configuración</small></div><div class=\"diagram-box\" data-rough>credentialRef<br><small class=\"diagram-muted\">{ key: SLACK_BOT_TOKEN, scope: org }</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Acción de app</span><small class=\"diagram-muted\">resolves at execution time through a granted ref</small><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Vault</span><div class=\"diagram-box\" data-rough>secret value<br><small class=\"diagram-muted\">nunca se devuelve al agente ni a la UI</small></div></div></div>",
-  "css": ".diagram-vault{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-vault .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-vault .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-vault .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1aypycl" title={"Almacén de conexión versus bóveda"} summary={"La bóveda posee el valor secreto. La conexión posee los metadatos del proveedor más credentialRefs (punteros). En el momento de la ejecución, la aplicación resuelve la referencia a través de una conexión otorgada y lee el valor de la bóveda."}>
+
+```html
+<div class="diagram-vault">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Almacén de conexiones</span>
+    <div class="diagram-box" data-rough>
+      provider account + metadata<br /><small class="diagram-muted"
+        >estado, permisos, configuración</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      credentialRef<br /><small class="diagram-muted"
+        >{ key: SLACK_BOT_TOKEN, scope: org }</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Acción de app</span
+    ><small class="diagram-muted"
+      >resolves at execution time through a granted ref</small
+    >
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Vault</span>
+    <div class="diagram-box" data-rough>
+      secret value<br /><small class="diagram-muted"
+        >nunca se devuelve al agente ni a la UI</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vault {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-vault .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-vault .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-vault .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Usar ambos juntos:
 
 1. El envío (u otro flujo de configuración del espacio de trabajo) crea el secreto de la bóveda subyacente o la referencia de credencial OAuth.

package/docs/content/locales/es-ES/workspace-management.mdx

@@ -9,13 +9,59 @@ description: "Bifurcación, CODEOWNERS, revisión de relaciones públicas y cóm
 
 Esta guía cubre el aspecto operativo de la ejecución de un espacio de trabajo nativo del agente: cómo bifurcar, quién revisa qué, cómo configurar la propiedad del código y cómo el plano de control de envío encaja en su modelo de gobierno.
 
-```an-diagram title="Dos planos de gobernanza" summary="Git gobierna el código; Dispatch gobierna el tiempo de ejecución. Son complementarios: no replique uno dentro del otro."
-{
-  "html": "<div class=\"gov\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Git y GitHub</span><strong>Gobernanza de código</strong><div class=\"gov-list\"><span class=\"diagram-pill\">CODEOWNERS</span><span class=\"diagram-pill\">branch protection</span><span class=\"diagram-pill\">Revisión de PR</span><span class=\"diagram-pill\">git log / blame</span></div></div><div class=\"diagram-pill diagram-muted\">+</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Dispatch</span><strong>Runtime governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">vault secrets &amp; grants</span><span class=\"diagram-pill\">workspace resources</span><span class=\"diagram-pill\">agent profiles</span><span class=\"diagram-pill\">approvals &amp; audit</span></div></div></div>",
-  "css": ".gov{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gov .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.gov .gov-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}"
+<Diagram id="doc-block-xxqyqo" title="Dos planos de gobernanza" summary={"Git gobierna el código; Dispatch gobierna el tiempo de ejecución. Son complementarios: no replique uno dentro del otro."}>
+
+```html
+<div class="gov">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Git y GitHub</span
+    ><strong>Gobernanza de código</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">CODEOWNERS</span
+      ><span class="diagram-pill">branch protection</span
+      ><span class="diagram-pill">Revisión de PR</span
+      ><span class="diagram-pill">git log / blame</span>
+    </div>
+  </div>
+  <div class="diagram-pill diagram-muted">+</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Dispatch</span
+    ><strong>Runtime governance</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">vault secrets &amp; grants</span
+      ><span class="diagram-pill">workspace resources</span
+      ><span class="diagram-pill">agent profiles</span
+      ><span class="diagram-pill">approvals &amp; audit</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.gov {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.gov .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.gov .gov-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## Bifurcación
 
 ### Ramas de funciones

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

@@ -11,13 +11,68 @@ Cada aplicación nativa del agente viene con un **espacio de trabajo**: la capa
 
 El giro: **son filas SQL, no archivos del sistema de archivos.** Cada usuario obtiene su propio espacio de trabajo almacenado en la base de datos. No hay una caja de desarrollo que activar, ni un contenedor por usuario, ni archivos que montar. Un SaaS multiinquilino puede brindar a cada usuario un agente totalmente personalizable de forma esencialmente gratuita, porque todo son filas (memoria personal, servidores MCP personales, skills personal, subagentes personales) y el código base compartido los aloja todos a la vez.
 
-```an-diagram title="Un espacio de trabajo Claude-Code, pero almacenado en SQL" summary="La misma capa de personalización (instrucciones, habilidades, memoria, agentes, trabajos, MCP) excepto que cada archivo es una fila en una base de datos compartida de múltiples inquilinos."
-{
-  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Workspace agent-native</span><small class=\"diagram-muted\">rows in one base de datos SQL</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">una base de código, muchos usuarios, con alcance <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
-  "css": ".ws-map{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ws-map .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:220px}.ws-map .ws-files,.ws-map .ws-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.ws-map .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-1v2thml" title="Un espacio de trabajo Claude-Code, pero almacenado en SQL" summary={"La misma capa de personalización (instrucciones, habilidades, memoria, agentes, trabajos, MCP) excepto que cada archivo es una fila en una base de datos compartida de múltiples inquilinos."}>
+
+```html
+<div class="ws-map">
+  <div class="diagram-card cc">
+    <span class="diagram-pill warn">Claude Code / Codex</span
+    ><small class="diagram-muted">~/.claude/ on a local disk</small>
+    <div class="ws-files">
+      <span class="diagram-box">CLAUDE.md</span
+      ><span class="diagram-box">skills/</span
+      ><span class="diagram-box">memory</span
+      ><span class="diagram-box">mcp.json</span>
+    </div>
+    <small class="diagram-muted">one codebase per developer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card an">
+    <span class="diagram-pill accent">Workspace agent-native</span
+    ><small class="diagram-muted">rows in one base de datos SQL</small>
+    <div class="ws-rows">
+      <span class="diagram-pill">AGENTS.md</span
+      ><span class="diagram-pill">skills/&hellip;</span
+      ><span class="diagram-pill">memory/&hellip;</span
+      ><span class="diagram-pill">mcp-servers/&hellip;</span>
+    </div>
+    <small class="diagram-muted"
+      >una base de código, muchos usuarios, con alcance
+      <code>u:&lt;email&gt;:&hellip;</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.ws-map {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ws-map .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 220px;
+}
+.ws-map .ws-files,
+.ws-map .ws-rows {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0;
+}
+.ws-map .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 | Código Claude / Codex                           | Espacio de trabajo nativo del agente                                    |
 | ----------------------------------------------- | ----------------------------------------------------------------------- |
 | Archivos en su disco local                      | Filas en una base de datos SQL compartida                               |
@@ -51,13 +106,62 @@ Las rutas canónicas que controlan cómo el agente usa cada recurso:
 
 Estas rutas se aplican en los tres ámbitos: espacio de trabajo, organización/aplicación y personal. El ámbito posterior gana cuando existe la misma ruta en múltiples niveles.
 
-```an-diagram title="Tres alcances, un archivo efectivo" summary="El tiempo de ejecución resuelve la misma ruta en los ámbitos del espacio de trabajo, la aplicación y el personal durante la lectura: gana el ámbito más específico."
-{
-  "html": "<div class=\"ws-stack\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Workspace</span><small class=\"diagram-muted\">valores predeterminados de empresa desde Dispatch</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Organización / aplicación</span><small class=\"diagram-muted\">team override for one app</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Personal</span><small class=\"diagram-muted\">per-user override &mdash; wins</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Effective <code>context/brand.md</code></div></div>",
-  "css": ".ws-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ws-stack .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:280px}.ws-stack .diagram-arrow{font-size:20px;align-self:center}.ws-stack code{font-size:.85em}.ws-stack .diagram-box{align-self:center;margin-top:4px}"
+<Diagram id="doc-block-pmpd5a" title="Tres alcances, un archivo efectivo" summary={"El tiempo de ejecución resuelve la misma ruta en los ámbitos del espacio de trabajo, la aplicación y el personal durante la lectura: gana el ámbito más específico."}>
+
+```html
+<div class="ws-stack">
+  <div class="diagram-card">
+    <span class="diagram-pill">Workspace</span
+    ><small class="diagram-muted"
+      >valores predeterminados de empresa desde Dispatch</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Organización / aplicación</span
+    ><small class="diagram-muted">team override for one app</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Personal</span
+    ><small class="diagram-muted">per-user override &mdash; wins</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">Effective <code>context/brand.md</code></div>
+</div>
+```
+
+```css
+.ws-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ws-stack .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  min-width: 280px;
+}
+.ws-stack .diagram-arrow {
+  font-size: 20px;
+  align-self: center;
+}
+.ws-stack code {
+  font-size: 0.85em;
+}
+.ws-stack .diagram-box {
+  align-self: center;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## Primeros pasos: un tutorial de 1 minuto {#getting-started}
 
 Cambia el comportamiento del agente en 60 segundos.

package/docs/content/locales/es-ES/writing-agent-instructions.mdx

@@ -7,13 +7,55 @@ description: "Cómo escribir excelentes instrucciones de agente para una aplicac
 
 El comportamiento del agente en una aplicación nativa del agente es tan bueno como las instrucciones que usted le dé. Tres superficies contienen esa guía: `AGENTS.md` (el mapa), skills (las inmersiones profundas) y descripciones de acciones/herramientas (cómo el agente elige la herramienta adecuada). Escribe cada uno para recuperarlo rápidamente, no para escribirlo en prosa.
 
-```an-diagram title="Tres superficies creadas + una superficie de tiempo de ejecución" summary="AGENTS.md y las descripciones de las herramientas se cargan en cada vuelta; carga de habilidades según demanda; application_state está escrito en vivo por su UI."
-{
-  "html": "<div class=\"diagram-surfaces\"><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Cada turno</span><strong>AGENTS.md</strong><small class=\"diagram-muted\">el mapa: propósito, reglas base, claves de estado, índice de acciones + skills</small></div><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Cada turno</span><strong>Descripciones de herramientas</strong><small class=\"diagram-muted\">guía la selección de herramientas — una frase precisa cada una</small></div><div class=\"diagram-card ondemand\" data-rough><span class=\"diagram-pill\">Bajo demanda</span><strong>Habilidades</strong><small class=\"diagram-muted\">guía profunda, cargada cuando coincide la descripción</small></div><div class=\"diagram-card runtime\" data-rough><span class=\"diagram-pill ok\">Live</span><strong>application_state</strong><small class=\"diagram-muted\">lo escribe tu UI: navegación, selección, foco</small></div></div>",
-  "css": ".diagram-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.diagram-surfaces .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"
+<Diagram id="doc-block-1mdys4x" title={"Tres superficies creadas + una superficie de tiempo de ejecución"} summary={"AGENTS.md y las descripciones de las herramientas se cargan en cada vuelta; carga de habilidades según demanda; application_state está escrito en vivo por su UI."}>
+
+```html
+<div class="diagram-surfaces">
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">Cada turno</span><strong>AGENTS.md</strong
+    ><small class="diagram-muted"
+      >el mapa: propósito, reglas base, claves de estado, índice de acciones +
+      skills</small
+    >
+  </div>
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">Cada turno</span
+    ><strong>Descripciones de herramientas</strong
+    ><small class="diagram-muted"
+      >guía la selección de herramientas — una frase precisa cada una</small
+    >
+  </div>
+  <div class="diagram-card ondemand" data-rough>
+    <span class="diagram-pill">Bajo demanda</span><strong>Habilidades</strong
+    ><small class="diagram-muted"
+      >guía profunda, cargada cuando coincide la descripción</small
+    >
+  </div>
+  <div class="diagram-card runtime" data-rough>
+    <span class="diagram-pill ok">Live</span><strong>application_state</strong
+    ><small class="diagram-muted"
+      >lo escribe tu UI: navegación, selección, foco</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-surfaces {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.diagram-surfaces .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## Mantenga AGENTS.md pequeño y fácil de leer {#small-agents-md}
 
 `AGENTS.md` se carga como orientación. Debería ser lo más pequeño que permita al agente actuar correctamente, con todo profundamente metido en skills. Apunta a estas secciones y poco más:

package/docs/content/locales/fr-FR/a2a-protocol.mdx

@@ -20,13 +20,53 @@ Concepts clés :
 - **Tâches** — chaque message crée une tâche avec un cycle de vie (soumis, en cours d'exécution, terminé, échoué, annulé)
 - **Authentification du porteur JWT** — la production A2A nécessite `A2A_SECRET` ou un ancien `apiKeyEnv` explicite
 
-```an-diagram title="Un agent confie le travail à un autre" summary="Un agent de messagerie découvre la carte de l'agent d'analyse, envoie un message JSON-RPC et récupère une tâche terminée."
-{
-  "html": "<div class=\"diagram-handoff\"><div class=\"diagram-card\"><strong>Agent Mail</strong><small class=\"diagram-muted\">needs analytics</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">GET /.well-known/agent-card.json</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">POST /_agent-native/a2a<br><small class=\"diagram-muted\">message/send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-pill ok\">tâche · terminée</div></div><div class=\"diagram-card\" data-rough><strong>Agent Analytics</strong><small class=\"diagram-muted\">exécute run-query, renvoie le résultat</small></div></div>",
-  "css": ".diagram-handoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-handoff .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-handoff .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-xrx4wo" title={"Un agent confie le travail à un autre"} summary={"Un agent de messagerie découvre la carte de l'agent d'analyse, envoie un message JSON-RPC et récupère une tâche terminée."}>
+
+```html
+<div class="diagram-handoff">
+  <div class="diagram-card">
+    <strong>Agent Mail</strong
+    ><small class="diagram-muted">needs analytics</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">GET /.well-known/agent-card.json</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">
+      POST /_agent-native/a2a<br /><small class="diagram-muted"
+        >message/send</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+    <div class="diagram-pill ok">tâche · terminée</div>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>Agent Analytics</strong
+    ><small class="diagram-muted">exécute run-query, renvoie le résultat</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-handoff {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-handoff .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-handoff .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Configuration du serveur {#server-setup}
 
 La plupart des modèles obtiennent A2A via le plug-in de discussion de l'agent framework. Si vous le montez vous-même, appelez `mountA2A()` dans un plugin serveur :
@@ -176,14 +216,62 @@ JSON-RPC 2.0 endpoint for `message/send`, `message/stream`, `tasks/get`, and `ta
 
 Lorsque `message/send` est appelé avec `async: true`, le gestionnaire JSON-RPC met la tâche en file d'attente et déclenche automatiquement un POST vers une route `/_agent-native/a2a/_process-task` interne afin que le gestionnaire s'exécute dans une nouvelle exécution de fonction avec son propre délai d'attente complet. Cette route est authentifiée avec un jeton HMAC lié à l'ID de tâche (durée de vie de 5 minutes, signé avec `A2A_SECRET`). Il est monté avant la route `/_agent-native/a2a` JSON-RPC afin que la correspondance du préfixe de h3 ne l'avale pas.
 
-```an-diagram title="Cycle de vie des tâches asynchrones sur sans serveur" summary="async:true revient à fonctionner en millisecondes, puis une nouvelle exécution exécute la boucle de l'agent pendant que l'appelant interroge."
-{
-  "html": "<div class=\"diagram-async\"><div class=\"diagram-box\" data-rough>message/send<br><small class=\"diagram-muted\">async: true</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">enqueue task</span><span class=\"diagram-pill warn\">return working</span><small class=\"diagram-muted\">~millisecondes</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>POST auto-déclenché /_agent-native/a2a/_process-task<br><small class=\"diagram-muted\">jeton HMAC · exécution neuve · timeout complet</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">tasks/get (poll)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">completed</div></div></div>",
-  "css": ".diagram-async{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-async .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-arrow{font-size:20px;line-height:1}",
-  "caption": "A recurring sweeper re-claims any task left in flight if the function execution dies mid-run."
+<Diagram id="doc-block-10941vd" title={"Cycle de vie des tâches asynchrones sur sans serveur"} summary={"async:true revient à fonctionner en millisecondes, puis une nouvelle exécution exécute la boucle de l'agent pendant que l'appelant interroge."} caption="A recurring sweeper re-claims any task left in flight if the function execution dies mid-run.">
+
+```html
+<div class="diagram-async">
+  <div class="diagram-box" data-rough>
+    message/send<br /><small class="diagram-muted">async: true</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill">enqueue task</span
+    ><span class="diagram-pill warn">return working</span
+    ><small class="diagram-muted">~millisecondes</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    POST auto-déclenché /_agent-native/a2a/_process-task<br /><small
+      class="diagram-muted"
+      >jeton HMAC · exécution neuve · timeout complet</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">tasks/get (poll)</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+    <div class="diagram-pill ok">completed</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-async {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-async .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!IMPORTANT]
 > **Délai d'expiration du webhook et de la passerelle sans serveur :**
 > Les passerelles d'environnement hébergées (telles que Netlify, Vercel ou Cloudflare Pages) imposent des limites d'exécution strictes (souvent de 10 à 30 secondes) sur les routes HTTP publiques. Étant donné que les boucles d'agent peuvent prendre beaucoup de temps pour exécuter des requêtes, récupérer le contexte et exécuter des outils, vous ** devez utiliser `async: true`** lorsque vous appelez des points de terminaison A2A ou gérez un webhooks externe. Cela renvoie immédiatement un statut `working` à la passerelle API, gardant la connexion ouverte pendant quelques millisecondes seulement, tandis que le `/process-task` POST auto-déclenché exécute la boucle d'agent en arrière-plan. Ne bloquez pas la requête HTTP principale en attendant la fin de la boucle de l'agent.

package/docs/content/locales/fr-FR/actions.mdx

@@ -19,13 +19,76 @@ Une définition, sept consommateurs. Il s'agit de l'échelon 3 du [ladder](/docs
 Si vous décidez d'exposer ou non une opération sans tête, dans le chat, dans un
 side-car intégré ou sous forme d'écran d'application complet, voir [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="Une définition, sept consommateurs" summary="Un seul defineAction() se déploie sur chaque surface (agent, interface utilisateur, HTTP, MCP, A2A et CLI) avec un schéma validé et un corps run()."
-{
-  "html": "<div class=\"diagram-fanout\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">defineAction()</span><small class=\"diagram-muted\">schema + run(), défini une fois</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><div class=\"diagram-node\">Outil agent<br><small class=\"diagram-muted\">JSON Schema en contexte</small></div><div class=\"diagram-node\">Hooks React<br><small class=\"diagram-muted\">useActionQuery/Mutation</small></div><div class=\"diagram-node\">callAction()<br><small class=\"diagram-muted\">client impératif</small></div><div class=\"diagram-node\">HTTP<br><small class=\"diagram-muted\">/_agent-native/actions/:name</small></div><div class=\"diagram-node\">Outil MCP<br><small class=\"diagram-muted\">hôtes externes</small></div><div class=\"diagram-node\">Outil A2A<br><small class=\"diagram-muted\">autres apps agent-native</small></div><div class=\"diagram-node\">CLI<br><small class=\"diagram-muted\">pnpm action &lt;name&gt;</small></div></div></div>",
-  "css": ".diagram-fanout{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fanout .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-fanout .diagram-arrow{font-size:22px;line-height:1}.diagram-fanout .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-1t2e0s9" title={"Une définition, sept consommateurs"} summary={"Un seul defineAction() se déploie sur chaque surface (agent, interface utilisateur, HTTP, MCP, A2A et CLI) avec un schéma validé et un corps run()."}>
+
+```html
+<div class="diagram-fanout">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">defineAction()</span
+    ><small class="diagram-muted">schema + run(), défini une fois</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <div class="diagram-node">
+      Outil agent<br /><small class="diagram-muted"
+        >JSON Schema en contexte</small
+      >
+    </div>
+    <div class="diagram-node">
+      Hooks React<br /><small class="diagram-muted"
+        >useActionQuery/Mutation</small
+      >
+    </div>
+    <div class="diagram-node">
+      callAction()<br /><small class="diagram-muted">client impératif</small>
+    </div>
+    <div class="diagram-node">
+      HTTP<br /><small class="diagram-muted"
+        >/_agent-native/actions/:name</small
+      >
+    </div>
+    <div class="diagram-node">
+      Outil MCP<br /><small class="diagram-muted">hôtes externes</small>
+    </div>
+    <div class="diagram-node">
+      Outil A2A<br /><small class="diagram-muted"
+        >autres apps agent-native</small
+      >
+    </div>
+    <div class="diagram-node">
+      CLI<br /><small class="diagram-muted">pnpm action &lt;name&gt;</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-fanout {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fanout .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-fanout .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-fanout .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 Si le UI et l'agent doivent tous deux faire quelque chose, optez pour une action, et non une action personnalisée
 itinéraire. Pour savoir quand un protocole en forme de route _est_ le bon appel, voir [Préférer Actions
 Pour les opérations d'application](/docs/server#actions-first).