@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/fr-FR/mcp-apps.mdx

@@ -30,14 +30,70 @@ Dans de rares occasions, la bonne cible est une route d'application ciblée qui
 
 Ne pas écrire à la main des applications HTML MCP uniques pour le produit UI ; si l'action nécessite une surface personnalisée, ajoutez ou réutilisez d'abord un véritable itinéraire/composant d'application et intégrez cet itinéraire.
 
-```an-diagram title="MCP Aller-retour intégré à l'application" summary="La cible du lien de l'action est également la cible de l'intégration. Les hôtes capables chargent la même route d'application signée en ligne ; tout le monde revient au lien profond."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-card\" data-rough><strong>Action</strong><small class=\"diagram-muted\">`link` target = MCP App embed target</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>embedApp()</strong><span class=\"diagram-pill accent\">create_embed_session</span><small class=\"diagram-muted\">mints short-lived embed session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>/_agent-native/embed/start</strong><small class=\"diagram-muted\">échange un ticket SQL à usage unique</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\" data-rough><strong>Signed app route</strong><span class=\"diagram-pill ok\">vraie route React</span><small class=\"diagram-muted\">short-lived browser session</small></div><div class=\"diagram-fallback\"><span class=\"diagram-pill warn\">pas de prise en charge MCP Apps</span><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>&quot;Open in … &rarr;&quot; deep link</div></div></div>",
-"css": ".diagram-embed{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-embed .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:140px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .diagram-fallback{display:flex;flex-direction:column;align-items:center;gap:6px;margin-inline-start:8px}"
-}
+<Diagram id="doc-block-1hyh4ia" title={"MCP Aller-retour intégré à l'application"} summary={"La cible du lien de l'action est également la cible de l'intégration. Les hôtes capables chargent la même route d'application signée en ligne ; tout le monde revient au lien profond."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-card" data-rough>
+    <strong>Action</strong
+    ><small class="diagram-muted">`link` target = MCP App embed target</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>embedApp()</strong
+    ><span class="diagram-pill accent">create_embed_session</span
+    ><small class="diagram-muted">mints short-lived embed session</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>/_agent-native/embed/start</strong
+    ><small class="diagram-muted">échange un ticket SQL à usage unique</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card" data-rough>
+    <strong>Signed app route</strong
+    ><span class="diagram-pill ok">vraie route React</span
+    ><small class="diagram-muted">short-lived browser session</small>
+  </div>
+  <div class="diagram-fallback">
+    <span class="diagram-pill warn">pas de prise en charge MCP Apps</span>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      &quot;Open in … &rarr;&quot; deep link
+    </div>
+  </div>
+</div>
+```
 
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 140px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .diagram-fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 8px;
+}
 ```
 
+</Diagram>
+
 ```ts
 import { embedApp } from "@agent-native/core";
 
@@ -93,14 +149,68 @@ Conservez le générateur `link` existant même lors de l'ajout de `mcpApp`. Les
 
 Les intégrations d'applications MCP sont des intégrations d'itinéraires, et non des mini-produits séparés. `embedApp()` démarre à partir de la cible `link` de l'action, crée une session d'intégration de courte durée et lance cette route d'application signée. Les hôtes de l'application MCP standard peuvent naviguer eux-mêmes dans le cadre de l'application MCP lorsque l'hôte peut hydrater directement l'itinéraire.
 
-```an-diagram title="Deux sentiers de pont hôte, un itinéraire balisé" summary="Claude transplante la voie hydratée et utilise le ui/_bridge direct ; ChatGPT obtient une iframe contrôlée via window.openai et relaie les actions de l'hôte via postMessage. Les deux pointent vers la même route d’application signée."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><strong>Claude web</strong><span class=\"diagram-pill accent\">single-frame transplant</span><small class=\"diagram-muted\">hydrate le HTML signé de l’app dans l’iframe de Claude, puis pont hôte direct `ui/_`</small></div><div class=\"diagram-card\" data-rough><strong>ChatGPT web</strong><span class=\"diagram-pill accent\">controlled route iframe</span><small class=\"diagram-muted\">`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage relay</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Same signed app route<br><small class=\"diagram-muted\">route normale + composants React</small></div></div>",
-"css": ".diagram-bridge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-bridge .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-bridge .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;max-width:300px}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}.diagram-bridge .diagram-box{padding:16px 18px;text-align:center}"
-}
+<Diagram id="doc-block-1kz2cey" title={"Deux sentiers de pont hôte, un itinéraire balisé"} summary={"Claude transplante la voie hydratée et utilise le ui/_bridge direct ; ChatGPT obtient une iframe contrôlée via window.openai et relaie les actions de l'hôte via postMessage. Les deux pointent vers la même route d’application signée."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <strong>Claude web</strong
+      ><span class="diagram-pill accent">single-frame transplant</span
+      ><small class="diagram-muted"
+        >hydrate le HTML signé de l’app dans l’iframe de Claude, puis pont hôte
+        direct `ui/_`</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <strong>ChatGPT web</strong
+      ><span class="diagram-pill accent">controlled route iframe</span
+      ><small class="diagram-muted"
+        >`window.openai`host APIs ·`agentNative.mcpHost.*` postMessage
+        relay</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Same signed app route<br /><small class="diagram-muted"
+      >route normale + composants React</small
+    >
+  </div>
+</div>
+```
 
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-bridge .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  max-width: 300px;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-bridge .diagram-box {
+  padding: 16px 18px;
+  text-align: center;
+}
 ```
 
+</Diagram>
+
 Le Web Claude utilise un chemin de transplantation à image unique : le document de ressource récupère l'application signée HTML et l'hydrate dans l'iframe de l'application MCP de Claude, car Claude n'autorise pas de manière fiable les iframes enfants appartenant à l'application ou la navigation dans des images externes. Le Web ChatGPT obtient une iframe d'itinéraire contrôlé car son pont d'applications nous offre des hôtes `window.openai` stables API et un contrôle de hauteur limité. Tous les chemins pointent vers la même route d'application signée et restituent la route normale et les composants React. Concevez des itinéraires intégrés afin qu'un rechargement avec le même URL signé reconstruise la même vue.
 
 Pour `open_app({ embed: true })` de la même application, le framework génère le ticket de démarrage d'intégration lors de l'appel de l'outil d'origine et stocke le URL de démarrage signé dans les métadonnées cachées de l'outil. Le actions personnalisé peut renvoyer le `embedStartUrl` pour le même chemin rapide ; la couche MCP supprime le URL porteur du ticket du `structuredContent` visible par le modèle et des métadonnées normales de lien ouvert. Lorsqu’aucun démarrage d’intégration URL n’est présent, la ressource revient à l’assistant `create_embed_session` réservé aux applications. Cela permet aux hôtes de production de restreindre les appels d'outils lancés par iframe sur la route directe sans divulguer les URL de session d'application unique dans la transcription. Si un utilisateur rouvre une ancienne discussion après l'expiration d'un ticket de démarrage unique, la route de démarrage renvoie une petite page d'actualisation et publie `agentNative.embedSessionExpired` dans le wrapper ; `embedApp()` efface le démarrage obsolète URL et crée un nouveau ticket via `create_embed_session` alors qu'il a toujours l'itinéraire d'origine de l'application.

package/docs/content/locales/fr-FR/mcp-clients.mdx

@@ -20,13 +20,82 @@ Vous pouvez également utiliser [connect remote (HTTP) MCP servers at runtime](#
 
 Chaque source se résout en un seul **gestionnaire MCP** d'exécution, et chaque outil qu'il apprend atterrit dans le registre d'outils de l'agent sous un préfixe `mcp__<server-id>__<tool>` anti-collision — consultable intentionnellement via `tool-search`.
 
-```an-diagram title="Orientation client : plusieurs sources, un seul registre d'outils" summary="Les fichiers de configuration, l'environnement et l'interface utilisateur d'exécution sont tous fusionnés dans le gestionnaire MCP ; ses outils apparaissent préfixés et peuvent être recherchés à côté des actions de votre application. C'est le miroir de la direction serveur."
-{
-  "html": "<div class=\"mcp-merge\"><div class=\"diagram-col sources\"><div class=\"diagram-box\" data-rough>Workspace <code>mcp.config.json</code><br><small class=\"diagram-muted\">partagé entre apps</small></div><div class=\"diagram-box\" data-rough>Racine app <code>mcp.config.json</code><br><small class=\"diagram-muted\">remplacement par app</small></div><div class=\"diagram-box\" data-rough><code>MCP_SERVERS</code> env<br><small class=\"diagram-muted\">CI / environnement de production</small></div><div class=\"diagram-box\" data-rough>Distant via l’UI des paramètres<br><small class=\"diagram-muted\">personal &amp; org scope</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Gestionnaire MCP</span><small class=\"diagram-muted\">merge &middot; hot-reload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col out\"><div class=\"diagram-node\">Outil agent registry<br><small class=\"diagram-muted\"><code>mcp__&lt;server-id&gt;__&lt;tool&gt;</code></small></div><div class=\"diagram-node\"><code>tool-search</code><br><small class=\"diagram-muted\">découvrir par intention</small></div></div></div>",
-  "css": ".mcp-merge{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-merge .diagram-col{display:flex;flex-direction:column;gap:8px}.mcp-merge .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-merge .diagram-arrow{font-size:22px;line-height:1}.mcp-merge code{font-size:.85em}"
+<Diagram id="doc-block-eam9ib" title={"Orientation client : plusieurs sources, un seul registre d'outils"} summary={"Les fichiers de configuration, l'environnement et l'interface utilisateur d'exécution sont tous fusionnés dans le gestionnaire MCP ; ses outils apparaissent préfixés et peuvent être recherchés à côté des actions de votre application. C'est le miroir de la direction serveur."}>
+
+```html
+<div class="mcp-merge">
+  <div class="diagram-col sources">
+    <div class="diagram-box" data-rough>
+      Workspace <code>mcp.config.json</code><br /><small class="diagram-muted"
+        >partagé entre apps</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      Racine app <code>mcp.config.json</code><br /><small class="diagram-muted"
+        >remplacement par app</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      <code>MCP_SERVERS</code> env<br /><small class="diagram-muted"
+        >CI / environnement de production</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      Distant via l’UI des paramètres<br /><small class="diagram-muted"
+        >personal &amp; org scope</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">Gestionnaire MCP</span
+    ><small class="diagram-muted">merge &middot; hot-reload</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col out">
+    <div class="diagram-node">
+      Outil agent registry<br /><small class="diagram-muted"
+        ><code>mcp__&lt;server-id&gt;__&lt;tool&gt;</code></small
+      >
+    </div>
+    <div class="diagram-node">
+      <code>tool-search</code><br /><small class="diagram-muted"
+        >découvrir par intention</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.mcp-merge {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mcp-merge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mcp-merge .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.mcp-merge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.mcp-merge code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 > La direction opposée : faire de _votre_ application un serveur MCP que d'autres hôtes consomment - se trouve dans [MCP Protocol](/docs/mcp-protocol) et [External Agents](/docs/external-agents).
 
 ## Navigateur intégré et fonctionnalités d'utilisation de l'ordinateur {#built-in-capabilities}
@@ -216,13 +285,71 @@ Si votre espace de travail exécute plusieurs applications natives d'agent (par
 
 Dispatch est le hub conventionnel : il assure déjà la coordination entre les applications.
 
-```an-diagram title="Modèle Hub : une application dessert les serveurs MCP de portée organisationnelle" summary="Dispatch contient les serveurs MCP de portée organisationnelle ; les applications grand public les extraient et les fusionnent sous le nom mcp__hub_<orgId>_<name>__*. Seules les lignes de portée de l'organisation sont partagées : les informations d'identification personnelles restent en place."
-{
-  "html": "<div class=\"mcp-hub\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Dispatch hub</span><small class=\"diagram-muted\">serveurs MCP au périmètre organisation</small><small class=\"diagram-muted\"><code>GET /mcp/hub/servers</code></small></div><div class=\"diagram-col arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div></div><div class=\"diagram-col consumers\"><div class=\"diagram-box\" data-rough>Mail<br><small class=\"diagram-muted\"><code>mcp__hub_&lt;orgId&gt;_&lt;name&gt;__*</code></small></div><div class=\"diagram-box\" data-rough>Clips<br><small class=\"diagram-muted\">pull + merge toutes les ~60 s</small></div></div></div><p class=\"diagram-muted note\">Bearer-gated by <code>AGENT_NATIVE_MCP_HUB_TOKEN</code>. Personal (user-scope) servers are never re-exposed.</p>",
-  "css": ".mcp-hub{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mcp-hub .center{display:flex;flex-direction:column;align-items:center;gap:4px}.mcp-hub .diagram-col{display:flex;flex-direction:column;gap:10px}.mcp-hub .arrows .diagram-arrow{font-size:22px;line-height:1}.mcp-hub .note{margin:8px 0 0;font-size:.85em}.mcp-hub code{font-size:.85em}"
+<Diagram id="doc-block-13f14dr" title={"Modèle Hub : une application dessert les serveurs MCP de portée organisationnelle"} summary={"Dispatch contient les serveurs MCP de portée organisationnelle ; les applications grand public les extraient et les fusionnent sous le nom mcp__hub_<orgId>_<name>__*. Seules les lignes de portée de l'organisation sont partagées : les informations d'identification personnelles restent en place."}>
+
+```html
+<div class="mcp-hub">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">Dispatch hub</span
+    ><small class="diagram-muted">serveurs MCP au périmètre organisation</small
+    ><small class="diagram-muted"><code>GET /mcp/hub/servers</code></small>
+  </div>
+  <div class="diagram-col arrows">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  </div>
+  <div class="diagram-col consumers">
+    <div class="diagram-box" data-rough>
+      Mail<br /><small class="diagram-muted"
+        ><code>mcp__hub_&lt;orgId&gt;_&lt;name&gt;__*</code></small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      Clips<br /><small class="diagram-muted"
+        >pull + merge toutes les ~60 s</small
+      >
+    </div>
+  </div>
+</div>
+<p class="diagram-muted note">
+  Bearer-gated by <code>AGENT_NATIVE_MCP_HUB_TOKEN</code>. Personal (user-scope)
+  servers are never re-exposed.
+</p>
+```
+
+```css
+.mcp-hub {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mcp-hub .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.mcp-hub .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.mcp-hub .arrows .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.mcp-hub .note {
+  margin: 8px 0 0;
+  font-size: 0.85em;
+}
+.mcp-hub code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 Pour les nouvelles configurations d'espace de travail, préférez **Répartir les ressources MCP de l'espace de travail** lorsque vous
 vous souhaitez le même modèle d'attribution pour toutes les applications et celles sélectionnées que celui utilisé par l'espace de travail skills,
 instructions et ressources de référence. Ajoutez une ressource d'espace de travail avec :

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

@@ -30,13 +30,61 @@ Concepts clés :
 - **MCP à distance standard OAuth** — Découverte OAuth 2.1, enregistrement client dynamique, code d'autorisation + PKCE, rotation du jeton d'actualisation
 - **Bearer auth fallback** : utilise `ACCESS_TOKEN`, `ACCESS_TOKENS` ou des JWT créés par connexion pour les clients qui ne peuvent pas exécuter OAuth
 
-```an-diagram title="Votre application en tant que serveur MCP" summary="Les hôtes externes se connectent via Streamable HTTP. Chaque action est un outil ; Ask-agent délègue à la boucle complète de l'agent."
-{
-  "html": "<div class=\"diagram-mcp\"><div class=\"diagram-col\"><div class=\"diagram-node\">Claude</div><div class=\"diagram-node\">ChatGPT</div><div class=\"diagram-node\">Cursor · Codex</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill accent\">POST /_agent-native/mcp</span><small class=\"diagram-muted\">Streamable HTTP</small><small class=\"diagram-muted\">initialize &rarr; tools/list &rarr; tools/call</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>each action<br><small class=\"diagram-muted\">= one tool</small></div><div class=\"diagram-box\" data-rough>ask-agent<br><small class=\"diagram-muted\">&rarr; full agent loop</small></div></div></div>",
-  "css": ".diagram-mcp{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-mcp .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-mcp .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-mcp .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-ut4q1s" title="Votre application en tant que serveur MCP" summary={"Les hôtes externes se connectent via Streamable HTTP. Chaque action est un outil ; Ask-agent délègue à la boucle complète de l'agent."}>
+
+```html
+<div class="diagram-mcp">
+  <div class="diagram-col">
+    <div class="diagram-node">Claude</div>
+    <div class="diagram-node">ChatGPT</div>
+    <div class="diagram-node">Cursor · Codex</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill accent">POST /_agent-native/mcp</span
+    ><small class="diagram-muted">Streamable HTTP</small
+    ><small class="diagram-muted"
+      >initialize &rarr; tools/list &rarr; tools/call</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box" data-rough>
+      each action<br /><small class="diagram-muted">= one tool</small>
+    </div>
+    <div class="diagram-box" data-rough>
+      ask-agent<br /><small class="diagram-muted">&rarr; full agent loop</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mcp {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-mcp .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-mcp .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-mcp .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## MCP contre A2A {#mcp-vs-a2a}
 
 Les deux protocoles sont montés automatiquement. Utilisez celui qui correspond à votre cas d'utilisation :
@@ -205,13 +253,62 @@ Points de terminaison de découverte :
 | `/_agent-native/mcp/oauth/authorize`      | Autorisation du navigateur + consentement                  |
 | `/_agent-native/mcp/oauth/token`          | Accords de code d'autorisation et de jeton d'actualisation |
 
-```an-diagram title="Flux de découverte OAuth" summary="Un 401 lance la découverte, l'enregistrement et un PKCE autorisation → échange de jetons. Le jeton Bearer est limité au public et limité."
-{
-  "html": "<div class=\"diagram-oauth\"><div class=\"diagram-box\" data-rough>first request<br><small class=\"diagram-muted\">no token</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill warn\">401 · WWW-Authenticate</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">/.well-known/oauth-protected-resource</span><span class=\"diagram-pill\">/.well-known/oauth-authorization-server</span><small class=\"diagram-muted\">discover</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">register</div><div class=\"diagram-pill\">authorize (PKCE)</div><div class=\"diagram-pill\">token</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Bearer access token<br><small class=\"diagram-muted\">lié à l’audience · mcp:read / write / apps</small></div></div>",
-  "css": ".diagram-oauth{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-oauth .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-oauth .diagram-col{display:flex;flex-direction:column;gap:6px}.diagram-oauth .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-l7acbd" title={"Flux de découverte OAuth"} summary={"Un 401 lance la découverte, l'enregistrement et un PKCE autorisation → échange de jetons. Le jeton Bearer est limité au public et limité."}>
+
+```html
+<div class="diagram-oauth">
+  <div class="diagram-box" data-rough>
+    first request<br /><small class="diagram-muted">no token</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill warn">401 · WWW-Authenticate</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill">/.well-known/oauth-protected-resource</span
+    ><span class="diagram-pill">/.well-known/oauth-authorization-server</span
+    ><small class="diagram-muted">discover</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">register</div>
+    <div class="diagram-pill">authorize (PKCE)</div>
+    <div class="diagram-pill">token</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Bearer access token<br /><small class="diagram-muted"
+      >lié à l’audience · mcp:read / write / apps</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-oauth {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-oauth .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-oauth .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.diagram-oauth .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Les jetons d'accès sont des JWT signés dont l'audience est exactement la ressource MCP URL. Le serveur n'accepte que les jetons émis pour lui-même et applique les étendues avant de lister/appeler les outils :
 
 | Portée      | Autorise                                                |

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

@@ -18,13 +18,52 @@ Connectez votre agent à Slack, à la messagerie électronique, à Telegram ou
 - **Même agent, même mémoire.** Tout ce que vous lui dites sur Slack est mémorisé lorsque vous l'enverrez par e-mail plus tard. Le chat Web et les messages externes partagent un historique de fil de discussion.
 - Pour les alertes unidirectionnelles dans l'application (icône en forme de cloche, webhooks), voir [Notifications](/docs/notifications).
 
-```an-diagram title="Plusieurs canaux, un seul agent" summary="Chaque plate-forme s'intègre dans la même boucle d'agent et dans le même historique de thread SQL — donc un DM Slack et un e-mail poursuivent la même conversation."
-{
-  "html": "<div class=\"msg-fanin\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">Telegram</div><div class=\"diagram-node\">WhatsApp</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Une boucle d’agent</span><small class=\"diagram-muted\">même mémoire · mêmes outils</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Un historique de fil SQL<br><small class=\"diagram-muted\">web chat + external messages share it</small></div></div>",
-  "css": ".msg-fanin{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.msg-fanin .diagram-col{display:flex;flex-direction:column;gap:8px}.msg-fanin .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-afepyv" title="Plusieurs canaux, un seul agent" summary={"Chaque plate-forme s'intègre dans la même boucle d'agent et dans le même historique de thread SQL — donc un DM Slack et un e-mail poursuivent la même conversation."}>
+
+```html
+<div class="msg-fanin">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">Telegram</div>
+    <div class="diagram-node">WhatsApp</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">Une boucle d’agent</span
+    ><small class="diagram-muted">même mémoire · mêmes outils</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Un historique de fil SQL<br /><small class="diagram-muted"
+      >web chat + external messages share it</small
+    >
+  </div>
+</div>
+```
+
+```css
+.msg-fanin {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.msg-fanin .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.msg-fanin .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Configurer Slack {#slack}
 
 ### Ce dont vous aurez besoin
@@ -231,13 +270,81 @@ La plate-forme entrante webhooks utilise un modèle de file d'attente SQL multip
 3. Le point de terminaison du processeur s'exécute dans une **nouvelle exécution de fonction** avec son propre budget d'expiration complet. Il revendique atomiquement la tâche (`pending` → `processing` via `claimPendingTask`), exécute la boucle d'agent, publie la réponse via l'adaptateur et marque la tâche `completed`.
 4. Une nouvelle tentative récurrente (`startPendingTasksRetryJob`, toutes les 60 s) balaie les tâches bloquées dans `pending` > 90 s ou `processing` > 5 min et relance le processeur. Plafonné à 3 tentatives, puis marqué `failed`.
 
-```an-diagram title="Cycle de vie des webhooks entrants" summary="Le webhook vérifie, met en file d'attente et renvoie uniquement 200. Une nouvelle exécution de fonction draine la file d'attente et exécute la boucle de l'agent, avec une nouvelle tentative de 60 secondes comme filet de sécurité."
-{
-  "html": "<div class=\"msg-flow\"><div class=\"msg-row\"><div class=\"diagram-node\">Platform<br><small class=\"diagram-muted\">Slack · e-mail · etc.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/webhook</strong><br><small class=\"diagram-muted\">verify signature + parse</small><br><span class=\"diagram-pill\">INSERT tâche en attente</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">return 200</div></div><div class=\"msg-fire\"><span class=\"diagram-muted\">fire-and-forget</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</span></div><div class=\"msg-row\"><div class=\"diagram-box\" data-rough><strong>/process-task</strong><br><small class=\"diagram-muted\">nouvelle exécution · délai propre</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">claim</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">agent loop</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">adapter.sendResponse</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">completed</div></div><div class=\"diagram-panel msg-retry\" data-rough><span class=\"diagram-pill warn\">every 60s</span> <span class=\"diagram-muted\">retry job sweeps stuck tasks (pending &gt;90s · processing &gt;5min) and re-fires /process-task &mdash; capped at 3 attempts, then <strong>failed</strong></span></div></div>",
-  "css": ".msg-flow{display:flex;flex-direction:column;gap:12px}.msg-flow .msg-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.msg-flow .msg-fire{display:flex;align-items:center;gap:8px;padding-inline-start:12px}.msg-flow .msg-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-e0apde" title="Cycle de vie des webhooks entrants" summary={"Le webhook vérifie, met en file d'attente et renvoie uniquement 200. Une nouvelle exécution de fonction draine la file d'attente et exécute la boucle de l'agent, avec une nouvelle tentative de 60 secondes comme filet de sécurité."}>
+
+```html
+<div class="msg-flow">
+  <div class="msg-row">
+    <div class="diagram-node">
+      Platform<br /><small class="diagram-muted">Slack · e-mail · etc.</small>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>
+      <strong>/webhook</strong><br /><small class="diagram-muted"
+        >verify signature + parse</small
+      ><br /><span class="diagram-pill">INSERT tâche en attente</span>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">return 200</div>
+  </div>
+  <div class="msg-fire">
+    <span class="diagram-muted">fire-and-forget</span>
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</span>
+  </div>
+  <div class="msg-row">
+    <div class="diagram-box" data-rough>
+      <strong>/process-task</strong><br /><small class="diagram-muted"
+        >nouvelle exécution · délai propre</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">claim</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">agent loop</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">adapter.sendResponse</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">completed</div>
+  </div>
+  <div class="diagram-panel msg-retry" data-rough>
+    <span class="diagram-pill warn">every 60s</span>
+    <span class="diagram-muted"
+      >retry job sweeps stuck tasks (pending &gt;90s · processing &gt;5min) and
+      re-fires /process-task &mdash; capped at 3 attempts, then
+      <strong>failed</strong></span
+    >
+  </div>
+</div>
+```
+
+```css
+.msg-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.msg-flow .msg-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.msg-flow .msg-fire {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-inline-start: 12px;
+}
+.msg-flow .msg-retry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 Les conversations entrantes et sortantes vivent dans le même fil de discussion SQL, vous pouvez donc continuer un DM Slack depuis le Web UI ou vice versa.
 
 <Endpoint id="doc-block-10kar98" method="POST" path="/_agent-native/integrations/slack/webhook" summary={"Webhook entrant de l'API Slack Events"} auth={"HMAC-SHA256 of the raw body using `SLACK_SIGNING_SECRET`, checked against the `X-Slack-Signature` header. In production also gated by `SLACK_ALLOWED_TEAM_IDS` / `SLACK_ALLOWED_API_APP_IDS`."} params={[