@agent-native/core 0.79.26 → 0.80.0

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

@@ -11,13 +11,66 @@ Dispatch est l'application centrale qui se trouve devant toutes les autres appli
 
 Sans Dispatch, chaque application dans un espace de travail multi-applications finit par réimplémenter la même plomberie : son propre robot Slack, son propre magasin secret, ses propres tâches planifiées, sa propre copie des instructions de l'espace de travail. La rotation d’une clé API se transforme en dix redéploiements. L’ajout d’une nouvelle politique se transforme en dix copier-coller. Dispatch centralise tout cela dans une seule application afin que les autres restent concentrés sur leur domaine.
 
-```an-diagram title="Dispatch comme plan de contrôle de l'espace de travail" summary="Une boîte de réception, un coffre-fort, une passerelle MCP et des ressources partagées se trouvent devant les applications de domaine, que Dispatch atteint en tant que pairs A2A."
-{
-  "html": "<div class=\"dsp-hub\"><div class=\"diagram-node\">Users &amp; external agents<br><small class=\"diagram-muted\">Slack · e-mail · Telegram · WhatsApp · MCP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel dsp-control\" data-rough><span class=\"diagram-pill accent\">Dispatch &mdash; control plane</span><div class=\"dsp-caps\"><span class=\"diagram-pill\">Boîte de réception centrale</span><span class=\"diagram-pill\">Coffre des secrets</span><span class=\"diagram-pill\">Délégation inter-apps</span><span class=\"diagram-pill\">MCP gateway</span><span class=\"diagram-pill\">Ressources d’espace de travail</span></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"dsp-peers\"><div class=\"diagram-box\" data-rough>Mail</div><div class=\"diagram-box\" data-rough>Calendar</div><div class=\"diagram-box\" data-rough>Analytics</div></div><small class=\"diagram-muted\">domain apps &mdash; A2A peers</small></div>",
-  "css": ".dsp-hub{display:flex;flex-direction:column;align-items:center;gap:10px}.dsp-hub .dsp-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dsp-hub .dsp-caps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.dsp-hub .dsp-peers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}"
+<Diagram id="doc-block-1hl6pkw" title={"Dispatch comme plan de contrôle de l'espace de travail"} summary={"Une boîte de réception, un coffre-fort, une passerelle MCP et des ressources partagées se trouvent devant les applications de domaine, que Dispatch atteint en tant que pairs A2A."}>
+
+```html
+<div class="dsp-hub">
+  <div class="diagram-node">
+    Users &amp; external agents<br /><small class="diagram-muted"
+      >Slack · e-mail · Telegram · WhatsApp · MCP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel dsp-control" data-rough>
+    <span class="diagram-pill accent">Dispatch &mdash; control plane</span>
+    <div class="dsp-caps">
+      <span class="diagram-pill">Boîte de réception centrale</span
+      ><span class="diagram-pill">Coffre des secrets</span
+      ><span class="diagram-pill">Délégation inter-apps</span
+      ><span class="diagram-pill">MCP gateway</span
+      ><span class="diagram-pill">Ressources d’espace de travail</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="dsp-peers">
+    <div class="diagram-box" data-rough>Mail</div>
+    <div class="diagram-box" data-rough>Calendar</div>
+    <div class="diagram-box" data-rough>Analytics</div>
+  </div>
+  <small class="diagram-muted">domain apps &mdash; A2A peers</small>
+</div>
+```
+
+```css
+.dsp-hub {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.dsp-hub .dsp-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.dsp-hub .dsp-caps {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dsp-hub .dsp-peers {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 ```
 
+</Diagram>
+
 ## Quand vous souhaitez envoyer {#when}
 
 Contactez le répartiteur lorsque l'une de ces conditions est vraie :
@@ -108,13 +161,86 @@ Parcourez un exemple de bout en bout. Un utilisateur envoie un message privé au
 4. **Réponse publiée dans le fil de discussion.** L'agent d'analyse renvoie un résultat. Dispatch le formate et le publie dans le même fil de discussion Slack dans lequel l'utilisateur a écrit, en utilisant l'identité liée s'il en existe une (de sorte que l'agent agit avec les autorisations du demandeur, et non celles du propriétaire de l'espace de travail).
 5. **Récupération en cas de panne.** Si le processeur plante en plein vol (délai d'expiration A2A, erreur de l'agent en aval, gel des fonctions), une nouvelle tentative balaie les tâches bloquées toutes les 60 secondes et relance le processeur. Jusqu'à trois tentatives avant que la tâche ne soit marquée `failed`.
 
-```an-diagram title="Un message Slack via Dispatch" summary="Slack est mis en file d'attente dans SQL, une nouvelle exécution le draine, l'agent Dispatch délègue le travail de domaine sur A2A et la réponse revient dans le thread d'origine. Une nouvelle tentative de 60 s récupère tout ce qui meurt en plein vol."
-{
-  "html": "<div class=\"dsp-flow\"><div class=\"dsp-row\"><div class=\"diagram-node\">DM Slack<br><small class=\"diagram-muted\">\"summarize last week's signups\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/slack/webhook</strong><br><small class=\"diagram-muted\">vérifie + INSERT tâche en attente</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">200</div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough><strong>fresh processor</strong><br><small class=\"diagram-muted\">revendique la tâche · démarre la boucle agent</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\">L’agent Dispatch décide</span><small class=\"diagram-muted\">analytics intent &rarr; call-agent</small></div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough>App d’analyse<br><small class=\"diagram-muted\">pair A2A · exécute le travail SQL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">reply posted in thread</div></div><div class=\"diagram-panel dsp-retry\" data-rough><span class=\"diagram-pill warn\">recovery</span> <span class=\"diagram-muted\">if the processor crashes &mdash; A2A timeout, downstream error, freeze &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply still arrives</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</span></div></div>",
-  "css": ".dsp-flow{display:flex;flex-direction:column;gap:12px}.dsp-flow .dsp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dsp-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.dsp-flow .dsp-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-1g3642t" title="Un message Slack via Dispatch" summary={"Slack est mis en file d'attente dans SQL, une nouvelle exécution le draine, l'agent Dispatch délègue le travail de domaine sur A2A et la réponse revient dans le thread d'origine. Une nouvelle tentative de 60 s récupère tout ce qui meurt en plein vol."}>
+
+```html
+<div class="dsp-flow">
+  <div class="dsp-row">
+    <div class="diagram-node">
+      DM Slack<br /><small class="diagram-muted"
+        >"summarize last week's signups"</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>
+      <strong>/slack/webhook</strong><br /><small class="diagram-muted"
+        >vérifie + INSERT tâche en attente</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">200</div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      <strong>fresh processor</strong><br /><small class="diagram-muted"
+        >revendique la tâche · démarre la boucle agent</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">L’agent Dispatch décide</span
+      ><small class="diagram-muted">analytics intent &rarr; call-agent</small>
+    </div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      App d’analyse<br /><small class="diagram-muted"
+        >pair A2A · exécute le travail SQL</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">reply posted in thread</div>
+  </div>
+  <div class="diagram-panel dsp-retry" data-rough>
+    <span class="diagram-pill warn">recovery</span>
+    <span class="diagram-muted"
+      >if the processor crashes &mdash; A2A timeout, downstream error, freeze
+      &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply
+      still arrives</span
+    >
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</span>
+  </div>
+</div>
+```
+
+```css
+.dsp-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dsp-flow .dsp-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dsp-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.dsp-flow .dsp-retry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 Le même flux s'applique aux e-mails, Telegram et WhatsApp : seul l'adaptateur change.
 
 ## Histoire de fiabilité {#reliability}

package/docs/content/locales/fr-FR/drop-in-agent.mdx

@@ -27,13 +27,72 @@ Vous n'avez pas besoin de créer un agent natif à partir de zéro. Le chat de l
 
 Tous ces éléments sont exportés depuis `@agent-native/core/client`.
 
-```an-diagram title="Le modèle de monture" summary="<AgentSidebar> enveloppe votre mise en page existante. Vos itinéraires s'affichent dans la zone principale ; le panneau d'agent se monte à côté d'eux. <AgentPanel> est le même panneau sans le wrapper."
-{
-  "html": "<div class=\"diagram-mount\"><div class=\"diagram-box sidebar\" data-rough><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><div class=\"inner\"><div class=\"diagram-node main\">Votre application<br><small class=\"diagram-muted\">children: header + &lt;Outlet/&gt;</small></div><div class=\"diagram-node panel\">Panneau de l’agent<br><small class=\"diagram-muted\">chat &middot; CLI &middot; workspace</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card alt\"><span class=\"diagram-pill\">&lt;AgentPanel&gt;</span><small class=\"diagram-muted\">same panel, no wrapper &mdash; you own the layout</small></div></div>",
-  "css": ".diagram-mount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mount .sidebar{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-mount .inner{display:flex;gap:10px}.diagram-mount .main{flex:2}.diagram-mount .panel{flex:1}.diagram-mount .alt{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-mount .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-11zxhl1" title={"Le modèle de monture"} summary={"<AgentSidebar> enveloppe votre mise en page existante. Vos itinéraires s'affichent dans la zone principale ; le panneau d'agent se monte à côté d'eux. <AgentPanel> est le même panneau sans le wrapper."}>
+
+```html
+<div class="diagram-mount">
+  <div class="diagram-box sidebar" data-rough>
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span>
+    <div class="inner">
+      <div class="diagram-node main">
+        Votre application<br /><small class="diagram-muted"
+          >children: header + &lt;Outlet/&gt;</small
+        >
+      </div>
+      <div class="diagram-node panel">
+        Panneau de l’agent<br /><small class="diagram-muted"
+          >chat &middot; CLI &middot; workspace</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card alt">
+    <span class="diagram-pill">&lt;AgentPanel&gt;</span
+    ><small class="diagram-muted"
+      >same panel, no wrapper &mdash; you own the layout</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mount {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mount .sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-mount .inner {
+  display: flex;
+  gap: 10px;
+}
+.diagram-mount .main {
+  flex: 2;
+}
+.diagram-mount .panel {
+  flex: 1;
+}
+.diagram-mount .alt {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-mount .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Le cas 80 % : `<AgentSidebar>` {#sidebar}
 
 La configuration la plus courante est une barre latérale qui s'ouvre depuis la droite sur n'importe quel écran.

package/docs/content/locales/fr-FR/durable-resume.mdx

@@ -13,13 +13,56 @@ L'exécution d'un agent hébergé est interrompue : une fonction sans serveur a
 
 Un CV durable comble cet écart. À la reprise, le framework sait quels appels d'outils à effets secondaires ont déjà été effectués et refuse de les réexécuter - sur deux couches.
 
-```an-diagram title="Deux couches bloquent les effets secondaires en double lors de la reprise" summary="Le journal lit le grand livre durable et classe les appels antérieurs ; la couche 1 indique au modèle, la couche 2 bloque en dur une écriture redistribuée qui correspond à une entrée terminée."
-{
-  "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">Couche 2 · écriture re-dispatchée avec blocage dur</div></div></div>",
-  "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1m0f26j" title="Deux couches bloquent les effets secondaires en double lors de la reprise" summary={"Le journal lit le grand livre durable et classe les appels antérieurs ; la couche 1 indique au modèle, la couche 2 bloque en dur une écriture redistribuée qui correspond à une entrée terminée."}>
+
+```html
+<div class="diagram-durable">
+  <div class="diagram-box" data-rough>
+    Run-event ledger<br /><small class="diagram-muted"
+      >tool_start / tool_done</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Tool-call journal</strong
+    ><small class="diagram-ok">completed = start+done</small
+    ><small class="diagram-warn">interrupted = start, no done</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Layer 1 · prompt note &rarr; model</div>
+    <div class="diagram-pill accent">
+      Couche 2 · écriture re-dispatchée avec blocage dur
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-durable {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-durable .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-durable .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-durable .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Le journal des appels d'outils {#journal}
 
 Le journal est une **lecture pure sur le grand livre durable des événements d'exécution** : il n'y a pas de nouveau point d'enregistrement dans le chemin actif. Il classe les appels d'outils déjà enregistrés pour le tour en cours :

package/docs/content/locales/fr-FR/embedding-sdk.mdx

@@ -11,13 +11,58 @@ utilise déjà. Si vous hésitez encore entre des agents sans tête, un chat enr
 side-car intégré ou application complète, commencez par
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="La membrane d'encastrement" summary="L'application hôte fournit l'authentification côté serveur et le contexte de la page en direct ; Agent-Native exécute le side-car durable et atteint l'onglet ouvert via les actions du client et les commandes de l'hôte."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>App SaaS hôte</strong><small class=\"diagram-muted\">votre UI, votre auth</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; actions client</div><div class=\"diagram-pill\">&larr; commandes hôte</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">chat durable · état de l’app · extensions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">tables du framework</small></div></div>",
-  "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1rfpu7j" title={"La membrane d'encastrement"} summary={"L'application hôte fournit l'authentification côté serveur et le contexte de la page en direct ; Agent-Native exécute le side-car durable et atteint l'onglet ouvert via les actions du client et les commandes de l'hôte."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-box" data-rough>
+    <strong>App SaaS hôte</strong
+    ><small class="diagram-muted">votre UI, votre auth</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">getContext &rarr;</div>
+    <div class="diagram-pill">&larr; actions client</div>
+    <div class="diagram-pill">&larr; commandes hôte</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Agent-Native sidecar</strong
+    ><small class="diagram-muted"
+      >chat durable · état de l’app · extensions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL<br /><small class="diagram-muted">tables du framework</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Commencez ici : le plugin avec piles incluses {#batteries-included}
 
 Pour la plupart des hôtes SaaS, **utilisez le runtime intégré complet** : le plug-in du serveur
@@ -373,13 +418,47 @@ const hostTools = createAgentNativeHostTools({
 
 Pour un collègue de style CLAW, l'iframe peut également enregistrer son onglet de navigateur en direct auprès du backend side-car. L'agent obtient ensuite les outils backend normaux qui mettent une requête en file d'attente, l'iframe la revendique, la page hôte l'exécute et le backend renvoie le résultat à l'agent.
 
-```an-diagram title="Pont de session de navigateur géré par le serveur" summary="Un outil backend met le travail en file d'attente ; l'onglet enregistré le revendique, l'exécute sur la page en direct et le résultat est renvoyé à l'agent — afin qu'un agent backend/Slack/A2A puisse toujours toucher l'onglet ouvert."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>Agent backend<br><small class=\"diagram-muted\">discussion · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>L’onglet actif le réclame<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
-  "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-niue6e" title={"Pont de session de navigateur géré par le serveur"} summary={"Un outil backend met le travail en file d'attente ; l'onglet enregistré le revendique, l'exécute sur la page en direct et le résultat est renvoyé à l'agent — afin qu'un agent backend/Slack/A2A puisse toujours toucher l'onglet ouvert."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-node" data-rough>
+    Agent backend<br /><small class="diagram-muted"
+      >discussion · Slack · A2A</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    enqueue request<br /><small class="diagram-muted"
+      >/_agent-native/browser-sessions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    L’onglet actif le réclame<br /><small class="diagram-muted"
+      >registered bridge</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">result &rarr; agent</div>
+</div>
+```
+
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Dans l'application side-car, démarrez le pont de session de navigateur une fois lorsque l'iframe est monté :
 
 ```tsx

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

@@ -14,13 +14,61 @@ Ceci est complémentaire à la notation post-hoc dans [Observability](/docs/obse
 
 Le programme d'exécution résout un moteur/modèle indépendant du fournisseur à partir du registre existant (aucun modèle n'est codé en dur) de sorte que la même suite s'exécute sur le moteur pour lequel l'application est configurée.
 
-```an-diagram title="De l'entrée fixe à la porte déployée" summary="Le coureur exécute en fait la boucle d'agent sur chaque cas, note la sortie et sort non nul si un marqueur tombe en dessous du seuil, ce qui en fait une porte CI directe."
-{
-  "html": "<div class=\"eval-flow\"><div class=\"diagram-node\">*.eval.ts<br><small class=\"diagram-muted\">prompt + expected behavior</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Exécuter la boucle de l’agent<br><small class=\"diagram-muted\">real engine/model</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Scorers<br><small class=\"diagram-muted\">every one must pass threshold</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box ok\">exit 0 &rarr; deploy</div><div class=\"diagram-box warn\">exit 1 &rarr; block</div></div></div>",
-  "css": ".eval-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eval-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.eval-flow .diagram-col{display:flex;flex-direction:column;gap:8px}.eval-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1wn8g9m" title={"De l'entrée fixe à la porte déployée"} summary={"Le coureur exécute en fait la boucle d'agent sur chaque cas, note la sortie et sort non nul si un marqueur tombe en dessous du seuil, ce qui en fait une porte CI directe."}>
+
+```html
+<div class="eval-flow">
+  <div class="diagram-node">
+    *.eval.ts<br /><small class="diagram-muted"
+      >prompt + expected behavior</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Exécuter la boucle de l’agent<br /><small class="diagram-muted"
+      >real engine/model</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Scorers<br /><small class="diagram-muted"
+      >every one must pass threshold</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box ok">exit 0 &rarr; deploy</div>
+    <div class="diagram-box warn">exit 1 &rarr; block</div>
+  </div>
+</div>
+```
+
+```css
+.eval-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.eval-flow .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.eval-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.eval-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Écrire une évaluation {#writing}
 
 Déposez un fichier `*.eval.ts` n'importe où dans l'application (ou un fichier `evals/*.ts`). Chaque fichier `export default defineEval(...)` (ou en exporte un tableau) :
@@ -80,13 +128,59 @@ Les `exactMatch` et `contains` acceptent un `{ caseSensitive }` en option. `llmJ
 
 `createScorer` crée un marqueur à partir d'un pipeline en 4 étapes de style Mastra. Seul `generateScore` est requis :
 
-```an-diagram title="Le pipeline des marqueurs en 4 étapes" summary="prétraiter et analyser l'identité par défaut ; seul generateScore est requis. analyser peut exécuter du JS simple ou appeler un juge LLM via ctx."
-{
-  "html": "<div class=\"scorer\"><div class=\"diagram-card\"><span class=\"diagram-pill\">preprocess(run)</span><small class=\"diagram-muted\">transform the run/output &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">analyze(x, ctx)</span><small class=\"diagram-muted\">plain JS or LLM judge &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">generateScore(a)</span><small class=\"diagram-muted\">&rarr; 0..1 normalized &middot; <strong>required</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">generateReason</span><small class=\"diagram-muted\">human-readable why &middot; optional</small></div></div>",
-  "css": ".scorer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scorer .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.scorer .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-mwhavx" title={"Le pipeline des marqueurs en 4 étapes"} summary={"prétraiter et analyser l'identité par défaut ; seul generateScore est requis. analyser peut exécuter du JS simple ou appeler un juge LLM via ctx."}>
+
+```html
+<div class="scorer">
+  <div class="diagram-card">
+    <span class="diagram-pill">preprocess(run)</span
+    ><small class="diagram-muted"
+      >transform the run/output &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">analyze(x, ctx)</span
+    ><small class="diagram-muted"
+      >plain JS or LLM judge &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">generateScore(a)</span
+    ><small class="diagram-muted"
+      >&rarr; 0..1 normalized &middot; <strong>required</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">generateReason</span
+    ><small class="diagram-muted">human-readable why &middot; optional</small>
+  </div>
+</div>
+```
+
+```css
+.scorer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.scorer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.scorer .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```text
 preprocess(run)     → x          transform the run/output (optional)
 analyze(x, ctx)     → analysis   plain JS OR an LLM judge (optional)