@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/fr-FR/agent-teams.mdx

@@ -20,13 +20,72 @@ Agent Teams s'exécute sur le gestionnaire d'exécution principal : les événe
 
 L'état du sous-agent est conservé dans la table `application_state` SQL (sous `agent-task:<taskId>`), de sorte que les tâches survivent aux démarrages à froid sans serveur et fonctionnent sur plusieurs processus.
 
-```an-diagram title="Orchestrateur et spécialistes" summary="Le chat principal délègue à des sous-agents qui s'exécutent dans leurs propres threads et rendent compte sous forme de puces en ligne."
-{
-  "html": "<div class=\"at-orc\"><div class=\"diagram-card main\"><span class=\"diagram-pill accent\">Chat principal</span><small class=\"diagram-muted\">orchestrator &mdash; reads your request, delegates</small></div><div class=\"at-fan\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"at-subs\"><div class=\"diagram-box\">Revue de code<br><small class=\"diagram-muted\">own thread &amp; prompt</small></div><div class=\"diagram-box\">Analyse BigQuery<br><small class=\"diagram-muted\">own tools</small></div><div class=\"diagram-box\">E-mail à la voix<br><small class=\"diagram-muted\">own context</small></div></div></div><div class=\"diagram-pill\">each appears inline as a live chip &#8635;</div></div>",
-  "css": ".at-orc{display:flex;flex-direction:column;align-items:center;gap:12px}.at-orc .diagram-card{padding:14px 18px;display:flex;flex-direction:column;gap:4px;align-items:center}.at-orc .at-fan{display:flex;flex-direction:column;align-items:center;gap:8px}.at-orc .diagram-arrow{font-size:22px}.at-orc .at-subs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.at-orc .diagram-box{text-align:center}"
+<Diagram id="doc-block-1pvbwrf" title={"Orchestrateur et spécialistes"} summary={"Le chat principal délègue à des sous-agents qui s'exécutent dans leurs propres threads et rendent compte sous forme de puces en ligne."}>
+
+```html
+<div class="at-orc">
+  <div class="diagram-card main">
+    <span class="diagram-pill accent">Chat principal</span
+    ><small class="diagram-muted"
+      >orchestrator &mdash; reads your request, delegates</small
+    >
+  </div>
+  <div class="at-fan">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="at-subs">
+      <div class="diagram-box">
+        Revue de code<br /><small class="diagram-muted"
+          >own thread &amp; prompt</small
+        >
+      </div>
+      <div class="diagram-box">
+        Analyse BigQuery<br /><small class="diagram-muted">own tools</small>
+      </div>
+      <div class="diagram-box">
+        E-mail à la voix<br /><small class="diagram-muted">own context</small>
+      </div>
+    </div>
+  </div>
+  <div class="diagram-pill">each appears inline as a live chip &#8635;</div>
+</div>
+```
+
+```css
+.at-orc {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.at-orc .diagram-card {
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+}
+.at-orc .at-fan {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.at-orc .diagram-arrow {
+  font-size: 22px;
+}
+.at-orc .at-subs {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.at-orc .diagram-box {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## Quand générer un sous-agent {#when-to-spawn}
 
 Apparaître lorsque la tâche :
@@ -85,13 +144,70 @@ La plupart des codes d'application n'appellent pas cela directement : le framew
 
 ## Cycle de vie des tâches {#lifecycle}
 
-```an-diagram title="Que fait spawnTask()" summary="Chaque apparition crée un thread, conserve son état dans SQL et diffuse les événements de puce jusqu'à leur achèvement."
-{
-  "html": "<div class=\"at-life\"><div class=\"diagram-box\"><code>spawnTask()</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">create thread</span><small class=\"diagram-muted\">new row in <code>chat_threads</code>, description as first message</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">persist state</span><small class=\"diagram-muted\"><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>, status=running</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">stream</span><small class=\"diagram-muted\"><code>agent_task_started</code> &rarr; chip appears; <code>agent_task_step</code> &rarr; chip updates live</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">complete</span><small class=\"diagram-muted\">status=completed, write summary + preview, emit <code>agent_task_done</code></small></div></div>",
-  "css": ".at-life{display:flex;flex-direction:column;align-items:stretch;gap:6px;max-width:560px}.at-life .diagram-card{display:flex;flex-direction:column;gap:3px;padding:10px 14px}.at-life .diagram-box{align-self:flex-start}.at-life .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-xepm95" title="Que fait spawnTask()" summary={"Chaque apparition crée un thread, conserve son état dans SQL et diffuse les événements de puce jusqu'à leur achèvement."}>
+
+```html
+<div class="at-life">
+  <div class="diagram-box"><code>spawnTask()</code></div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">create thread</span
+    ><small class="diagram-muted"
+      >new row in <code>chat_threads</code>, description as first message</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">persist state</span
+    ><small class="diagram-muted"
+      ><code>agent-task:&lt;id&gt;</code> &rarr; <code>application_state</code>,
+      status=running</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">stream</span
+    ><small class="diagram-muted"
+      ><code>agent_task_started</code> &rarr; chip appears;
+      <code>agent_task_step</code> &rarr; chip updates live</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">complete</span
+    ><small class="diagram-muted"
+      >status=completed, write summary + preview, emit
+      <code>agent_task_done</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.at-life {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  max-width: 560px;
+}
+.at-life .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 14px;
+}
+.at-life .diagram-box {
+  align-self: flex-start;
+}
+.at-life .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 À tout moment, l'agent parent peut reprendre le sous-agent avec un suivi via `sendToTask(taskId, message)`. En cas d'erreur du sous-agent, `markTaskErrored(taskId, reason)` enregistre l'échec et le signale à l'utilisateur.
 
 La messagerie bidirectionnelle est durable. Les suivis des parents pour les sous-agents en cours d'exécution sont
@@ -138,13 +254,57 @@ Les sous-agents peuvent engendrer des sous-agents, ce qui représente un risque
 
 Le chat de niveau supérieur est la profondeur `0`. Un sous-agent qu'il génère est la profondeur `1` ; ce sous-agent peut réapparaître (profondeur `2`) ; un spawn qui créerait un sous-agent de profondeur `3` est **refusé**. La limite par défaut est **2**.
 
-```an-diagram title="Garde de profondeur de délégation (capuchon par défaut 2)" summary="Chaque niveau peut en générer un plus profond jusqu'au plafond ; un spawn passé est refusé côté serveur."
-{
-  "html": "<div class=\"at-depth\"><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 0</span><strong>Chat de niveau supérieur</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card ok\"><span class=\"diagram-pill\">depth 1</span><strong>Sous-agent</strong><small class=\"diagram-muted ok\">may spawn &darr;</small></div><div class=\"diagram-card warn\"><span class=\"diagram-pill warn\">depth 2</span><strong>Sous-agent's sub-agent</strong><small class=\"diagram-muted\">at the cap &mdash; may NOT spawn</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">depth 3</span><strong>Refused</strong><small class=\"diagram-muted\">server-side error</small></div></div>",
-  "css": ".at-depth{display:flex;flex-direction:column;gap:8px}.at-depth .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.at-depth .rung-1,.at-depth .diagram-card:nth-child(2){margin-inline-start:24px}.at-depth .diagram-card:nth-child(3){margin-inline-start:48px}.at-depth .diagram-card:nth-child(4){margin-inline-start:72px}"
+<Diagram id="doc-block-gbv1tz" title={"Garde de profondeur de délégation (capuchon par défaut 2)"} summary={"Chaque niveau peut en générer un plus profond jusqu'au plafond ; un spawn passé est refusé côté serveur."}>
+
+```html
+<div class="at-depth">
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 0</span
+    ><strong>Chat de niveau supérieur</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill">depth 1</span><strong>Sous-agent</strong
+    ><small class="diagram-muted ok">may spawn &darr;</small>
+  </div>
+  <div class="diagram-card warn">
+    <span class="diagram-pill warn">depth 2</span
+    ><strong>Sous-agent's sub-agent</strong
+    ><small class="diagram-muted">at the cap &mdash; may NOT spawn</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">depth 3</span><strong>Refused</strong
+    ><small class="diagram-muted">server-side error</small>
+  </div>
+</div>
+```
+
+```css
+.at-depth {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.at-depth .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.at-depth .rung-1,
+.at-depth .diagram-card:nth-child(2) {
+  margin-inline-start: 24px;
+}
+.at-depth .diagram-card:nth-child(3) {
+  margin-inline-start: 48px;
+}
+.at-depth .diagram-card:nth-child(4) {
+  margin-inline-start: 72px;
 }
 ```
 
+</Diagram>
+
 L'application est ambiante : chaque sous-agent s'exécute à l'intérieur d'un `AsyncLocalStorage` qui enregistre sa propre profondeur, de sorte que tout `spawnTask` atteint de manière transitive à partir de cette exécution lit la profondeur de son parent et refuse une fois le plafond atteint - même si l'outil `agent-teams` a été remis à un sous-agent qui n'aurait pas dû l'avoir. La décision est exposée comme un `evaluateSubagentDepth(parentDepth)` pur et testable unitairement. Un spawn refusé renvoie une erreur claire : _"Limite de profondeur de délégation atteinte (max N) ; impossible de générer un autre sous-agent."_
 
 ### Configurer le capuchon {#depth-guard-config}

package/corpus/core/docs/content/locales/fr-FR/agent-web-surfaces.mdx

@@ -19,13 +19,60 @@ Le site de documentation est l'implémentation de référence. Aujourd'hui, il e
 
 La configuration de `publicMcp: true` expose en outre le actions activé en tant que point de terminaison public MCP, permettant aux agents externes de les appeler directement (voir [MCP Protocol](/docs/mcp-protocol)).
 
-```an-diagram title="Ce qu'une voie publique publie" summary="Un itinéraire public se déploie en représentations conviviales pour les agents. La lecture de l'itinéraire est distincte de l'appel aux outils : l'accès aux outils reste facultatif."
-{
-  "html": "<div class=\"diagram-web\"><div class=\"diagram-box\" data-rough>Route publique<br><small class=\"diagram-muted\">derived from route access settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">robots.txt</span><span class=\"diagram-pill\">sitemap.xml</span><span class=\"diagram-pill\">llms.txt</span><span class=\"diagram-pill\">.md mirror</span><span class=\"diagram-pill\">JSON-LD</span><span class=\"diagram-pill\">text/markdown</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col gate\"><span class=\"diagram-pill warn\">Les outils restent privés</span><small class=\"diagram-muted\">publicMcp + publicAgent.expose required</small></div></div>",
-  "css": ".diagram-web{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-web .diagram-arrow{font-size:22px;line-height:1}.diagram-web .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.diagram-web .gate{display:flex;flex-direction:column;gap:4px;align-items:flex-start}"
+<Diagram id="doc-block-crqo1y" title={"Ce qu'une voie publique publie"} summary={"Un itinéraire public se déploie en représentations conviviales pour les agents. La lecture de l'itinéraire est distincte de l'appel aux outils : l'accès aux outils reste facultatif."}>
+
+```html
+<div class="diagram-web">
+  <div class="diagram-box" data-rough>
+    Route publique<br /><small class="diagram-muted"
+      >derived from route access settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill">robots.txt</span
+    ><span class="diagram-pill">sitemap.xml</span
+    ><span class="diagram-pill">llms.txt</span
+    ><span class="diagram-pill">.md mirror</span
+    ><span class="diagram-pill">JSON-LD</span
+    ><span class="diagram-pill">text/markdown</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col gate">
+    <span class="diagram-pill warn">Les outils restent privés</span
+    ><small class="diagram-muted"
+      >publicMcp + publicAgent.expose required</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-web {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-web .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-web .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.diagram-web .gate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
 }
 ```
 
+</Diagram>
+
 ## Configuration {#config}
 
 Ajoutez `agentWeb` sous la configuration de l'application d'espace de travail existante (dans le `package.json` de votre application sous la clé `agent-native` – ou de manière équivalente `workspace.agentWeb`, `agentWeb` ou `root.agentWeb`). La liste des itinéraires publics est toujours dérivée des paramètres d'accès aux itinéraires de l'application ; `agentWeb` contrôle la façon dont cette surface publique est représentée aux agents.

package/corpus/core/docs/content/locales/fr-FR/authentication.mdx

@@ -15,13 +15,73 @@ L'authentification est configurée automatiquement via `autoMountAuth(app)` dans
 - **MCP OAuth à distance :** Standard OAuth 2.1 pour les hôtes MCP tels que le code Claude et les connecteurs ChatGPT.
 - **Personnalisé :** Apportez votre propre authentification via le rappel `getSession`.
 
-```an-diagram title="Trois façons d'entrer, une seule séance" summary="Les visiteurs du navigateur, les clients programmatiques MCP et les fournisseurs personnalisés résolvent tous la même AuthSession que celle lue par la portée en aval."
-{
-  "html": "<div class=\"auth-modes\"><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Default</span><strong>Better Auth</strong><small class=\"diagram-muted\">email/password &middot; Google &middot; GitHub</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Remote MCP OAuth</span><strong>OAuth 2.1 + PKCE</strong><small class=\"diagram-muted\">connecteurs Claude Code et ChatGPT</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Custom</span><strong>getSession callback</strong><small class=\"diagram-muted\">Clerk &middot; Auth0 &middot; Firebase</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">AuthSession</span><small class=\"diagram-muted\">email &middot; orgId &middot; orgRole</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Request context &amp; data scoping</div></div>",
-  "css": ".auth-modes{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.auth-modes .diagram-col{display:flex;flex-direction:column;gap:10px}.auth-modes .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.auth-modes .diagram-arrow{font-size:22px;line-height:1}.auth-modes .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-16302hf" title={"Trois façons d'entrer, une seule séance"} summary={"Les visiteurs du navigateur, les clients programmatiques MCP et les fournisseurs personnalisés résolvent tous la même AuthSession que celle lue par la portée en aval."}>
+
+```html
+<div class="auth-modes">
+  <div class="diagram-col">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Default</span
+      ><strong>Better Auth</strong
+      ><small class="diagram-muted"
+        >email/password &middot; Google &middot; GitHub</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Remote MCP OAuth</span
+      ><strong>OAuth 2.1 + PKCE</strong
+      ><small class="diagram-muted">connecteurs Claude Code et ChatGPT</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Custom</span
+      ><strong>getSession callback</strong
+      ><small class="diagram-muted"
+        >Clerk &middot; Auth0 &middot; Firebase</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">AuthSession</span
+    ><small class="diagram-muted">email &middot; orgId &middot; orgRole</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">Request context &amp; data scoping</div>
+</div>
+```
+
+```css
+.auth-modes {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.auth-modes .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.auth-modes .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.auth-modes .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.auth-modes .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 Le flux du navigateur est le même flux Better Auth partout : il n'y a **pas de contournement d'authentification de développement** et `getSession()` ne revient jamais à une sentinelle `local@localhost`. Ce qui change entre les environnements, ce sont les frictions d'inscription, pas le mur de connexion :
 
 | Environnement               | Comportement au premier chargement                                                                            | Vérification de l'e-mail                                         |
@@ -164,13 +224,67 @@ https://mail.agent-native.com/_agent-native/mcp
 
 Les requêtes MCP non authentifiées renvoient un défi `WWW-Authenticate` pointant vers `/.well-known/oauth-protected-resource`. Le client découvre ensuite les métadonnées OAuth de l'application, enregistre dynamiquement un client public, ouvre la page d'autorisation de l'application et échange un code d'autorisation avec PKCE pour les jetons d'accès et d'actualisation.
 
-```an-diagram title="Prise de contact à distance MCP OAuth" summary="Un client compatible OAuth démarre uniquement à partir du MCP URL : défi, découverte, enregistrement dynamique, puis échange de code PKCE."
-{
-  "html": "<div class=\"mcp-flow\"><div class=\"diagram-node\">1 &middot; MCP request<br><small class=\"diagram-muted\">no token</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node warn\">2 &middot; 401 challenge<br><small class=\"diagram-muted\">WWW-Authenticate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">3 &middot; Discover metadata<br><small class=\"diagram-muted\">.well-known</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">4 &middot; Register client<br><small class=\"diagram-muted\">dynamique, public</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">5 &middot; Authorize + PKCE<br><small class=\"diagram-muted\">code exchange</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">6 &middot; Access + refresh<br><small class=\"diagram-muted\">audience-bound</small></div></div>",
-  "css": ".mcp-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mcp-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.mcp-flow .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-10nnoa3" title={"Prise de contact à distance MCP OAuth"} summary={"Un client compatible OAuth démarre uniquement à partir du MCP URL : défi, découverte, enregistrement dynamique, puis échange de code PKCE."}>
+
+```html
+<div class="mcp-flow">
+  <div class="diagram-node">
+    1 &middot; MCP request<br /><small class="diagram-muted">no token</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node warn">
+    2 &middot; 401 challenge<br /><small class="diagram-muted"
+      >WWW-Authenticate</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    3 &middot; Discover metadata<br /><small class="diagram-muted"
+      >.well-known</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    4 &middot; Register client<br /><small class="diagram-muted"
+      >dynamique, public</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    5 &middot; Authorize + PKCE<br /><small class="diagram-muted"
+      >code exchange</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    6 &middot; Access + refresh<br /><small class="diagram-muted"
+      >audience-bound</small
+    >
+  </div>
+</div>
+```
+
+```css
+.mcp-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.mcp-flow .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.mcp-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Les jetons d'accès sont signés avec `A2A_SECRET` lorsqu'ils sont définis, sinon `BETTER_AUTH_SECRET`. Ils portent l'identité d'utilisateur/d'organisation signée et les étendues `mcp:read`, `mcp:write` et/ou `mcp:apps`, et sont liés à l'audience à la ressource MCP exacte, URL. Les jetons d'actualisation sont stockés uniquement sous forme de hachages et tournent à chaque actualisation. Les appels d'outils et les lectures de ressources d'applications MCP s'exécutent dans le même contexte de demande que l'utilisateur connecté ; l'iframe de l'application MCP intégrée ne reçoit jamais de jetons OAuth bruts.
 
 `npx @agent-native/core@latest connect <url> --client claude-code` écrit l’entrée MCP uniquement URL pour ce flux standard. Pour les clients qui ne peuvent pas exécuter MCP OAuth à distance, utilisez la page Connect ou la solution de secours `npx @agent-native/core@latest connect --token <token>` pour écrire une entrée explicite de jeton de porteur.

package/corpus/core/docs/content/locales/fr-FR/automations.mdx

@@ -9,13 +9,52 @@ Une **automatisation** est une règle : _quand X se produit, faites Y_ — déc
 
 Les automatisations étendent [recurring jobs](/docs/recurring-jobs) avec des **déclencheurs d'événements**, des **conditions en langage naturel** et des **HTTP sortants** via l'outil `web-request`. Ils utilisent le même format de fichier `jobs/<name>.md`, le même stockage et le même flux de travail de « création à trois voies » que les tâches récurrentes — voir [Recurring Jobs](/docs/recurring-jobs#job-file) pour le format partagé. Cette page couvre uniquement les nouveautés en matière d'automatisations basées sur des événements.
 
-```an-diagram title="Quand X se produit, faites Y" summary="Un événement se déclenche sur le bus, une condition facultative en langage naturel le contrôle et l'agent exécute le corps d'automatisation avec un accès complet aux outils."
-{
-  "html": "<div class=\"auto-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Event</span><small class=\"diagram-muted\"><code>calendar.booking.created</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Condition</span><small class=\"diagram-muted\">Haiku checks: &ldquo;email ends with @builder.io&rdquo;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">L’agent exécute le body</span><small class=\"diagram-muted\">actions &middot; web-request &middot; MCP &middot; sub-agents</small></div></div>",
-  "css": ".auto-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.auto-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.auto-flow .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-1vqdjiw" title="Quand X se produit, faites Y" summary={"Un événement se déclenche sur le bus, une condition facultative en langage naturel le contrôle et l'agent exécute le corps d'automatisation avec un accès complet aux outils."}>
+
+```html
+<div class="auto-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Event</span
+    ><small class="diagram-muted"><code>calendar.booking.created</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Condition</span
+    ><small class="diagram-muted"
+      >Haiku checks: &ldquo;email ends with @builder.io&rdquo;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">L’agent exécute le body</span
+    ><small class="diagram-muted"
+      >actions &middot; web-request &middot; MCP &middot; sub-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.auto-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.auto-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  min-width: 180px;
+}
+.auto-flow .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## Deux types de déclencheurs {#trigger-types}
 
 | Tapez      | Se déclenche quand                                                       | Champ clé         |
@@ -225,13 +264,76 @@ Confirm an automation's wiring and condition without waiting for a real provider
 
 ## Comment fonctionne l'expédition {#dispatch}
 
-```an-diagram title="Le chemin d'expédition" summary="D'un événement déclenché à une exécution d'agent terminée, en fonction de l'étendue de la propriété et de la condition du langage naturel."
-{
-  "html": "<div class=\"disp\"><div class=\"diagram-box accent\">event fired on the bus</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">match</span><small class=\"diagram-muted\">load enabled automations subscribed to this event name</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">scope</span><small class=\"diagram-muted\">keep only those owned by the event's owner (or shared)</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">condition</span><small class=\"diagram-muted\">Haiku yes/no on the payload &mdash; false &rarr; <code>skipped</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">run</span><small class=\"diagram-muted\"><code>runAgentLoop</code> avec body comme prompt, payload comme contexte, timeout de 5 min</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card ok\"><span class=\"diagram-pill ok\">record</span><small class=\"diagram-muted\">write <code>lastRun</code> / <code>lastStatus</code> / <code>lastError</code></small></div></div>",
-  "css": ".disp{display:flex;flex-direction:column;gap:6px;max-width:540px}.disp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.disp .diagram-box{align-self:flex-start}.disp .diagram-arrow{font-size:18px;align-self:center}"
+<Diagram id="doc-block-aws59c" title={"Le chemin d'expédition"} summary={"D'un événement déclenché à une exécution d'agent terminée, en fonction de l'étendue de la propriété et de la condition du langage naturel."}>
+
+```html
+<div class="disp">
+  <div class="diagram-box accent">event fired on the bus</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">match</span
+    ><small class="diagram-muted"
+      >load enabled automations subscribed to this event name</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">scope</span
+    ><small class="diagram-muted"
+      >keep only those owned by the event's owner (or shared)</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">condition</span
+    ><small class="diagram-muted"
+      >Haiku yes/no on the payload &mdash; false &rarr;
+      <code>skipped</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">run</span
+    ><small class="diagram-muted"
+      ><code>runAgentLoop</code> avec body comme prompt, payload comme contexte,
+      timeout de 5 min</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card ok">
+    <span class="diagram-pill ok">record</span
+    ><small class="diagram-muted"
+      >write <code>lastRun</code> / <code>lastStatus</code> /
+      <code>lastError</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.disp {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 540px;
+}
+.disp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.disp .diagram-box {
+  align-self: flex-start;
+}
+.disp .diagram-arrow {
+  font-size: 18px;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## Exemple {#example}
 
 **Utilisateur :** "Lorsque quelqu'un réserve avec un e-mail @builder.io, envoyez-moi un message en Slack."

package/corpus/core/docs/content/locales/fr-FR/blueprint-installer.mdx

@@ -17,13 +17,51 @@ agent-native add provider stripe | claude
 agent-native add channel discord  | codex
 ```
 
-```an-diagram title="ajouter imprime une recette ; votre agent de codage l'applique" summary="agent-native émet un plan Markdown vers stdout (diagnostics vers stderr) ; vous le dirigez vers Claude Code ou Codex, qui édite votre dépôt en direct avec un contexte complet."
-{
-  "html": "<div class=\"diagram-bp\"><div class=\"diagram-node\" data-rough>agent-native add<br><small class=\"diagram-muted\">&lt;kind&gt; &lt;name|URL&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Blueprint Markdown<br><small class=\"diagram-muted\">stdout · fichiers à toucher · règles · vérifier</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>Agent de code<br><small class=\"diagram-muted\">claude · codex</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">edits your live repo</div></div>",
-  "css": ".diagram-bp{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bp .diagram-arrow{font-size:22px;line-height:1}.diagram-bp .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-hndzn" title={"ajouter imprime une recette ; votre agent de codage l'applique"} summary={"agent-native émet un plan Markdown vers stdout (diagnostics vers stderr) ; vous le dirigez vers Claude Code ou Codex, qui édite votre dépôt en direct avec un contexte complet."}>
+
+```html
+<div class="diagram-bp">
+  <div class="diagram-node" data-rough>
+    agent-native add<br /><small class="diagram-muted"
+      >&lt;kind&gt; &lt;name|URL&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Blueprint Markdown<br /><small class="diagram-muted"
+      >stdout · fichiers à toucher · règles · vérifier</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    Agent de code<br /><small class="diagram-muted">claude · codex</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">edits your live repo</div>
+</div>
+```
+
+```css
+.diagram-bp {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-bp .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Usage {#usage}
 
 ```bash