@agent-native/core 0.79.25 → 0.79.27

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

@@ -9,13 +9,56 @@ La migration n'est **pas un produit ou un modèle distinct** : il s'agit du pro
 Objectif `/migrate` dans l'espace de travail [Agent-Native Code](/docs/code-agents-ui).
 Il s'exécute comme une session de code normale que vous pouvez reprendre, attacher, inspecter et arrêter.
 
-```an-diagram title="/migrate est une session de code, pas une application distincte" summary="Un chemin, URL, ou une description entre ; l'exécution partage le même magasin, la même transcription et les mêmes contrôles que toutes les autres sessions de code et peut émettre un dossier portable."
-{
-  "html": "<div class=\"diagram-migrate\"><div class=\"diagram-col\"><div class=\"diagram-pill\">./local-app</div><div class=\"diagram-pill\">https://example.com</div><div class=\"diagram-pill\">--describe \\\"...\\\"</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\">/migrate goal</span><small class=\"diagram-muted\">même store · transcription · contrôles d’exécution</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\" data-rough>App migrée</div><div class=\"diagram-pill ok\">--emit dossier</div></div></div>",
-  "css": ".diagram-migrate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-migrate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-migrate .diagram-arrow{font-size:22px;line-height:1}.diagram-migrate .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-pw3ptd" title="/migrate est une session de code, pas une application distincte" summary={"Un chemin, URL, ou une description entre ; l'exécution partage le même magasin, la même transcription et les mêmes contrôles que toutes les autres sessions de code et peut émettre un dossier portable."}>
+
+```html
+<div class="diagram-migrate">
+  <div class="diagram-col">
+    <div class="diagram-pill">./local-app</div>
+    <div class="diagram-pill">https://example.com</div>
+    <div class="diagram-pill">--describe \"...\"</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">/migrate goal</span
+    ><small class="diagram-muted"
+      >même store · transcription · contrôles d’exécution</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box" data-rough>App migrée</div>
+    <div class="diagram-pill ok">--emit dossier</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-migrate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-migrate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-migrate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-migrate .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ```bash
 npx @agent-native/core@latest code /migrate ./my-next-app --out ../migrated-app
 npx @agent-native/core@latest code /migrate https://example.com --describe "marketing site plus dashboard"

package/corpus/core/docs/content/locales/fr-FR/multi-app-workspace.mdx

@@ -142,13 +142,60 @@ Les applications natives d'agent au sein d'un espace de travail résolvent les c
 
 La fusion s'effectue par nom de fichier. Si une application fournit un fichier local qui existe également en amont, le fichier local l'emporte. Si ce n’est pas le cas, la version partagée de l’espace de travail s’applique. Si shared n'en fournit pas non plus, la valeur par défaut du framework entre en jeu. Cela s'applique aux plugins skills, actions et `AGENTS.md`.
 
-```an-diagram title="Trois calques, fusionnés par nom de fichier" summary="Chaque application résout d'abord les plugins, les compétences, les actions et AGENTS.md à partir de l'application locale, puis du package partagé, puis de la valeur par défaut du framework."
-{
-  "html": "<div class=\"layer\"><div class=\"diagram-card accent\"><span class=\"diagram-pill accent\">1 &middot; App local</span><small class=\"diagram-muted\"><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2 &middot; Workspace shared</span><small class=\"diagram-muted\"><code>packages/shared/</code> &mdash; the mid-layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">3 &middot; Framework default</span><small class=\"diagram-muted\"><code>@agent-native/core</code> &mdash; lowest</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box ok\">first match wins</div></div>",
-  "css": ".layer{display:flex;flex-direction:column;align-items:center;gap:6px}.layer .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 16px;width:320px}.layer .diagram-arrow{font-size:18px;line-height:1}.layer .diagram-box{margin-top:2px}"
+<Diagram id="doc-block-siffjs" title={"Trois calques, fusionnés par nom de fichier"} summary={"Chaque application résout d'abord les plugins, les compétences, les actions et AGENTS.md à partir de l'application locale, puis du package partagé, puis de la valeur par défaut du framework."}>
+
+```html
+<div class="layer">
+  <div class="diagram-card accent">
+    <span class="diagram-pill accent">1 &middot; App local</span
+    ><small class="diagram-muted"
+      ><code>apps/&lt;name&gt;/</code> &mdash; highest priority</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2 &middot; Workspace shared</span
+    ><small class="diagram-muted"
+      ><code>packages/shared/</code> &mdash; the mid-layer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">3 &middot; Framework default</span
+    ><small class="diagram-muted"
+      ><code>@agent-native/core</code> &mdash; lowest</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&darr;</div>
+  <div class="diagram-box ok">first match wins</div>
+</div>
+```
+
+```css
+.layer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.layer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 16px;
+  width: 320px;
+}
+.layer .diagram-arrow {
+  font-size: 18px;
+  line-height: 1;
+}
+.layer .diagram-box {
+  margin-top: 2px;
 }
 ```
 
+</Diagram>
+
 Lorsqu'une application a besoin de quelque chose de différent, déposez un fichier local :
 
 | Élément à remplacer                          | Fichier à créer dans l'application                            |
@@ -252,13 +299,49 @@ npx @agent-native/core@latest deploy
 
 Chaque application est construite avec `APP_BASE_PATH=/<name>` et `VITE_APP_BASE_PATH=/<name>` et émise via le préréglage Nitro sélectionné. Cloudflare Pages est le préréglage par défaut et utilise un répartiteur chez `dist/_worker.js` plus `_routes.json`. Netlify est pris en charge avec `npx @agent-native/core@latest deploy --preset netlify` ; il émet des fonctions d'application sous `.netlify/functions-internal/<app>-server` et génère des redirections qui laissent les actifs statiques non forcés afin que le CDN serve les fichiers en premier. Vercel est pris en charge avec `npx @agent-native/core@latest deploy --preset vercel` ; il écrit un bundle `.vercel/output` racine à l'aide du Build Output API de Vercel.
 
-```an-diagram title="Déploiement unifié : une origine, un chemin par application" summary="Chaque application est livrée derrière une seule origine, donc les sessions de connexion et les A2A inter-applications sont gratuites."
-{
-  "html": "<div class=\"deploy\"><div class=\"diagram-box accent\">your-agents.com<br><small class=\"diagram-muted\">one DNS record &middot; one cert &middot; one CDN</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"deploy-apps\"><div class=\"diagram-box\">/mail/*</div><div class=\"diagram-box\">/calendar/*</div><div class=\"diagram-box\">/forms/*</div></div><div class=\"diagram-pill ok\">shared login cookie on the apex &bull; same-origin A2A, no CORS</div></div>",
-  "css": ".deploy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.deploy .deploy-apps{display:flex;flex-direction:column;gap:8px}.deploy .diagram-arrow{font-size:24px}.deploy .diagram-pill{flex-basis:100%}"
+<Diagram id="doc-block-10xvh45" title={"Déploiement unifié : une origine, un chemin par application"} summary={"Chaque application est livrée derrière une seule origine, donc les sessions de connexion et les A2A inter-applications sont gratuites."}>
+
+```html
+<div class="deploy">
+  <div class="diagram-box accent">
+    your-agents.com<br /><small class="diagram-muted"
+      >one DNS record &middot; one cert &middot; one CDN</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="deploy-apps">
+    <div class="diagram-box">/mail/*</div>
+    <div class="diagram-box">/calendar/*</div>
+    <div class="diagram-box">/forms/*</div>
+  </div>
+  <div class="diagram-pill ok">
+    shared login cookie on the apex &bull; same-origin A2A, no CORS
+  </div>
+</div>
+```
+
+```css
+.deploy {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.deploy .deploy-apps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.deploy .diagram-arrow {
+  font-size: 24px;
+}
+.deploy .diagram-pill {
+  flex-basis: 100%;
 }
 ```
 
+</Diagram>
+
 C'est en étant sur la **même origine** que se trouve le véritable gain :
 
 - **Session de connexion partagée.** Better Auth définit son cookie sur le domaine apex, donc la connexion à n'importe quelle application vous connecte à chaque application. Pas de danse SSO inter-domaines.

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

@@ -19,13 +19,49 @@ Un nouvel échafaudage `npx @agent-native/core@latest create` est déjà livré
 
 Si vous évaluez un agent natif pour un CRM, un outil de suivi de projet, une boîte de réception d'assistance ou tout autre outil d'équipe, la base multi-tenant est déjà là. Tous les modèles propriétaires sont multi-tenants – voir [Cloneable SaaS templates](/docs/cloneable-saas) pour la liste.
 
-```an-diagram title="Appartenance à une organisation et isolement" summary="Les utilisateurs rejoignent les organisations en tant que owner/admin/member. Chaque ligne propriétaire porte le org_id du locataire qui en est propriétaire, et aucune ligne ne traverse la limite."
-{
-  "html": "<div class=\"mt-grid\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org. A</span><small class=\"diagram-muted\">members: alice (owner), bob (member)</small><div class=\"diagram-box\">rows where org_id = A</div></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Org. B</span><small class=\"diagram-muted\">members: carol (owner)</small><div class=\"diagram-box\">rows where org_id = B</div></div></div><div class=\"mt-wall\" aria-hidden=\"true\"><span class=\"diagram-pill warn\">no cross-org reads</span></div>",
-  "css": ".mt-grid{display:flex;gap:16px;flex-wrap:wrap}.mt-grid .diagram-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;flex:1;min-width:200px}.mt-wall{display:flex;justify-content:center;margin-top:12px}"
+<Diagram id="doc-block-1dto6fl" title={"Appartenance à une organisation et isolement"} summary={"Les utilisateurs rejoignent les organisations en tant que owner/admin/member. Chaque ligne propriétaire porte le org_id du locataire qui en est propriétaire, et aucune ligne ne traverse la limite."}>
+
+```html
+<div class="mt-grid">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Org. A</span
+    ><small class="diagram-muted">members: alice (owner), bob (member)</small>
+    <div class="diagram-box">rows where org_id = A</div>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Org. B</span
+    ><small class="diagram-muted">members: carol (owner)</small>
+    <div class="diagram-box">rows where org_id = B</div>
+  </div>
+</div>
+<div class="mt-wall" aria-hidden="true">
+  <span class="diagram-pill warn">no cross-org reads</span>
+</div>
+```
+
+```css
+.mt-grid {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.mt-grid .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 200px;
+}
+.mt-wall {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## Le sélecteur d'organisation UI {#org-switcher}
 
 Le commutateur d'organisation et les membres UI s'affichent dans chaque modèle sans code supplémentaire. Ils pilotent les itinéraires REST de l'organisation principale sous `/_agent-native/org/*` (créer une organisation, changer d'organisation, lister/inviter/supprimer des membres, modifier les rôles, définir le domaine de messagerie autorisé). Les utilisateurs sélectionnent l'organisation active dans le sélecteur ; le panneau des membres gère les invitations et les changements de rôle.
@@ -36,13 +72,49 @@ Il s'agit du module `org/` propre au framework, et non du plugin d'organisation
 
 Les données des locataires sont isolées par une colonne `org_id` (ajoutée par `ownableColumns()`) et le framework étend automatiquement chaque requête à l'organisation active : `session.orgId → AGENT_ORG_ID → SQL`. Lorsqu'un utilisateur change d'organisation, le UI, le actions et l'agent voient tous uniquement les données de cette organisation : l'agent ne peut pas accéder aux données d'une organisation dont l'utilisateur n'est pas membre.
 
-```an-diagram title="De la session à la portée SQL" summary="L'organisation active sur la session devient AGENT_ORG_ID, que le framework intègre dans la clause WHERE de chaque requête."
-{
-  "html": "<div class=\"mt-pipe\"><div class=\"diagram-node\">session.orgId<br><small class=\"diagram-muted\">active org on session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">AGENT_ORG_ID<br><small class=\"diagram-muted\">request context</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL row scoping<br><small class=\"diagram-muted\">WHERE owner_email = ? AND org_id = ?</small></div></div>",
-  "css": ".mt-pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-pipe .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.mt-pipe .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1bfayqu" title={"De la session à la portée SQL"} summary={"L'organisation active sur la session devient AGENT_ORG_ID, que le framework intègre dans la clause WHERE de chaque requête."}>
+
+```html
+<div class="mt-pipe">
+  <div class="diagram-node">
+    session.orgId<br /><small class="diagram-muted"
+      >active org on session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    AGENT_ORG_ID<br /><small class="diagram-muted">request context</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    SQL row scoping<br /><small class="diagram-muted"
+      >WHERE owner_email = ? AND org_id = ?</small
+    >
+  </div>
+</div>
+```
+
+```css
+.mt-pipe {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mt-pipe .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.mt-pipe .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Il s'agit du même pipeline que celui utilisé pour la portée par utilisateur. Pour les mécanismes de niveau SQL, le contrat `ownableColumns()` et les gardes `accessFilter` / `resolveAccess` / `assertAccess`, voir [Security → Data Scoping](/docs/security#data-scoping) — la source unique de vérité pour le pipeline de cadrage.
 
 ## Documents associés {#related}

package/corpus/core/docs/content/locales/fr-FR/native-chat-ui.mdx

@@ -17,13 +17,65 @@ contrôles d'approbation/refus ou liens vers des vues d'application. Utilisez [M
 quand un hôte externe tel que Claude, ChatGPT, Copilot ou Cursor doit effectuer le rendu
 un itinéraire en ligne depuis votre application.
 
-```an-diagram title="Le chemin de rendu natif" summary="Une action renvoie JSON ; le runtime correspond à un discriminant de widget explicite ou chatUI.renderer ; AssistantChat monte un véritable composant React. Pas d'iframe, pas d'exécution HTML."
-{
-  "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">L’action s’exécute<br><small class=\"diagram-muted\">renvoie du JSON structuré</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">monte un widget React</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
-  "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-8ofslt" title="Le chemin de rendu natif" summary={"Une action renvoie JSON ; le runtime correspond à un discriminant de widget explicite ou chatUI.renderer ; AssistantChat monte un véritable composant React. Pas d'iframe, pas d'exécution HTML."}>
+
+```html
+<div class="diagram-render">
+  <div class="diagram-node">
+    L’action s’exécute<br /><small class="diagram-muted"
+      >renvoie du JSON structuré</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">Match</span
+    ><small class="diagram-muted"
+      >explicit widget &middot; chatUI.renderer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;AssistantChat&gt;<br /><small class="diagram-muted"
+      >monte un widget React</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill ok">DataTable</div>
+    <div class="diagram-pill ok">DataChart</div>
+    <div class="diagram-pill ok">DataInsights</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-render {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-render .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-render .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+}
+.diagram-render .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Widgets déclarés par action {#action-declared-widgets}
 
 Le chemin natif comporte deux parties explicites :
@@ -208,13 +260,61 @@ points du didacticiel ici pour l'histoire d'exécution et [Component API](/docs/
 répertorie chaque connecteur et adaptateur avec son chemin d'importation ; le contrat lui-même est
 décrit ci-dessous.
 
-```an-diagram title="Le runtime BYO conserve le shell de discussion Agent-Native" summary="Votre agent externe diffuse des événements normalisés via un connecteur ; Agent-Native conserve le compositeur, la transcription, les fiches outils, les approbations et les widgets natifs."
-{
-  "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>Votre agent<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">événements message-* / tool-* normalisés</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
-  "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-5i7siq" title="Le runtime BYO conserve le shell de discussion Agent-Native" summary={"Votre agent externe diffuse des événements normalisés via un connecteur ; Agent-Native conserve le compositeur, la transcription, les fiches outils, les approbations et les widgets natifs."}>
+
+```html
+<div class="diagram-byo">
+  <div class="diagram-box" data-rough>
+    Votre agent<br /><small class="diagram-muted"
+      >OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot;
+      HTTP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">connector</span
+    ><small class="diagram-muted"
+      >événements message-* / tool-* normalisés</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill">&lt;AssistantChat runtime=&hellip; /&gt;</div>
+    <small class="diagram-muted"
+      >composer &middot; transcript &middot; tool cards</small
+    ><small class="diagram-muted">approvals &middot; native widgets</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-byo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-byo .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-byo .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-byo .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Tous les connecteurs sont exportés depuis `@agent-native/core/client/chat` (et la racine
 Entrée `@agent-native/core/client`). Utilisez le runtime générique HTTP lorsque votre agent
 peut exposer un point de terminaison POST qui renvoie des événements d'exécution SSE ou NDJSON :

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

@@ -18,13 +18,84 @@ await notify(
 );
 ```
 
-```an-diagram title="Un appel, plusieurs destinations" summary="notify() écrit toujours la ligne de la boîte de réception réservée au propriétaire, est diffusée en parallèle sur chaque canal enregistré (au mieux), puis émet notification.sent sur le bus d'événements."
-{
-  "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
-  "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-188vju" title="Un appel, plusieurs destinations" summary={"notify() écrit toujours la ligne de la boîte de réception réservée au propriétaire, est diffusée en parallèle sur chaque canal enregistré (au mieux), puis émet notification.sent sur le bus d'événements."}>
+
+```html
+<div class="diagram-notify">
+  <div class="diagram-node">
+    notify(input, { owner })<br /><small class="diagram-muted"
+      >any server code &middot; action, automation, plugin</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel fan" data-rough>
+    <div class="fan-row">
+      <span class="diagram-pill accent">inbox</span>
+      <div class="diagram-box" data-rough>
+        notifications table &rarr; bell UI<br /><small class="diagram-muted"
+          >always on &middot; owner-scoped</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">webhook</span>
+      <div class="diagram-box" data-rough>
+        POST JSON to NOTIFICATIONS_WEBHOOK_URL<br /><small class="diagram-muted"
+          >best-effort</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">custom</span>
+      <div class="diagram-box" data-rough>
+        registerNotificationChannel(...)<br /><small class="diagram-muted"
+          >best-effort &middot; runs in parallel</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">notification.sent</span
+    ><small class="diagram-muted"
+      >event bus &middot; automations can chain</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-notify {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-notify .fan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+.diagram-notify .fan-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-notify .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-notify .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Gravités {#severities}
 
 | Gravité    | Utiliser pour                                             |
@@ -44,13 +115,69 @@ La gravité détermine le style du badge dans la liste déroulante et est transm
 
 Le canal webhook résout les références `${keys.NAME}` dans les URL et `NOTIFICATIONS_WEBHOOK_AUTH` par rapport au [secrets](/docs/security) ad hoc du propriétaire, de sorte que la valeur brute n'entre jamais dans le contexte de l'agent. Les listes d'autorisation URL par clé sont appliquées – même règle que celle utilisée par l'outil d'automatisation `web-request`.
 
-```an-diagram title="Canaux et gravité" summary="la boîte de réception est toujours activée ; le webhook a besoin d'une variable d'environnement ; les canaux personnalisés s'enregistrent au démarrage. La gravité détermine le style du badge et est transmise à tous les canaux."
-{
-  "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>La gravité détermine le badge</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">confirmations, infos</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
-  "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"
+<Diagram id="doc-block-1c0wbur" title={"Canaux et gravité"} summary={"la boîte de réception est toujours activée ; le webhook a besoin d'une variable d'environnement ; les canaux personnalisés s'enregistrent au démarrage. La gravité détermine le style du badge et est transmise à tous les canaux."}>
+
+```html
+<div class="diagram-channels">
+  <div class="diagram-panel col" data-rough>
+    <strong>Channels</strong>
+    <div class="diagram-box" data-rough>
+      inbox<br /><small class="diagram-muted"
+        >always on &mdash; part of the primitive</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      webhook<br /><small class="diagram-muted"
+        >needs NOTIFICATIONS_WEBHOOK_URL</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      custom<br /><small class="diagram-muted"
+        >registerNotificationChannel()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-panel col" data-rough>
+    <strong>La gravité détermine le badge</strong>
+    <div class="sev-row">
+      <span class="diagram-pill">info</span
+      ><span class="diagram-muted">confirmations, infos</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">warning</span
+      ><span class="diagram-muted">look at soon</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill accent">critical</span
+      ><span class="diagram-muted">needs immediate attention</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-channels {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.diagram-channels .col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  min-width: 240px;
+}
+.diagram-channels .sev-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 ```
 
+</Diagram>
+
 ## API {#api}
 
 ### `notify(input, meta)` {#notify}