@agent-native/core 0.79.26 → 0.79.27

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

@@ -33,13 +33,63 @@ Lorsqu'un utilisateur envoie un message, le framework enregistre automatiquement
 
 Aucune modification de code n’est nécessaire. L'instrumentation s'accroche de manière transparente au `production-agent.ts`.
 
-```an-diagram title="Chaque course alimente la boucle" summary="Une exécution d'agent produit une trace, des scores automatisés et un feedback hook, le tout stocké dans le propre SQL de l'application et affiché sur le tableau de bord. Les expériences répartissent le trafic entre les variantes de configuration."
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">Exécution agent<br><small class=\"diagram-muted\">production-agent.ts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Capturé automatiquement</span><small class=\"diagram-muted\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
-  "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-x2jw9s" title="Chaque course alimente la boucle" summary={"Une exécution d'agent produit une trace, des scores automatisés et un feedback hook, le tout stocké dans le propre SQL de l'application et affiché sur le tableau de bord. Les expériences répartissent le trafic entre les variantes de configuration."}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    Exécution agent<br /><small class="diagram-muted"
+      >production-agent.ts</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Capturé automatiquement</span
+    ><small class="diagram-muted"
+      >tokens &middot; cost &middot; latency &middot; tool calls</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">Traces &amp; spans</div>
+    <div class="diagram-box">Evals (5 scorers + LLM judge)</div>
+    <div class="diagram-box">Feedback &amp; frustration index</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    Dashboard<br /><small class="diagram-muted"
+      >scoped to the signed-in user</small
+    >
+  </div>
+</div>
+```
+
+```css
+.obs-loop {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.obs-loop .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.obs-loop .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.obs-loop .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Le tableau de bord {#dashboard}
 
 Ajoutez le tableau de bord à n'importe quel modèle avec un seul itinéraire :
@@ -147,13 +197,59 @@ PUT /_agent-native/observability/experiments/:id
 
 Utilisez les identifiants de modèle réels acceptés par votre moteur à la place de `<your-model-id>` / `<other-model-id>` (les noms de modèles changent souvent — vérifiez votre fournisseur/moteur pour les identifiants actuels). La boucle d'agent résout automatiquement la variante de l'utilisateur et applique le remplacement de la configuration. L'affectation utilise un hachage cohérent : le même utilisateur obtient toujours la même variante.
 
-```an-diagram title="Attribution de variantes de hachage cohérentes" summary="Chaque utilisateur hache une variante stable, la boucle applique le remplacement de configuration de cette variante et les résultats sont cumulés par variante avec des intervalles de confiance."
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">ID utilisateur<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">surcharge de config A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">surcharge de config B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Résultats per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
-  "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1cfpj8h" title={"Attribution de variantes de hachage cohérentes"} summary={"Chaque utilisateur hache une variante stable, la boucle applique le remplacement de configuration de cette variante et les résultats sont cumulés par variante avec des intervalles de confiance."}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    ID utilisateur<br /><small class="diagram-muted">consistent hash</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-card">
+      <span class="diagram-pill">control &middot; 50%</span
+      ><small class="diagram-muted">surcharge de config A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">surcharge de config B</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Résultats per variant<br /><small class="diagram-muted"
+      >cost &middot; latency &middot; satisfaction</small
+    >
+  </div>
+</div>
+```
+
+```css
+.exp {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.exp .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.exp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.exp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Configuration {#config}
 
 Tous les paramètres sont stockés dans la clé `observability-config` :

package/docs/content/locales/fr-FR/observational-memory.mdx

@@ -19,13 +19,55 @@ OM représente un long fil de discussion composé de trois couches, du plus dist
 | **Observations**           | Des entrées denses et datées qui regroupent une série de messages bruts dans un enregistrement compact de ce qui s'est passé. |
 | **Messages bruts récents** | Les N derniers tours, conservés **textuellement** — jamais pliés — afin que l'agent voie toujours le dernier contexte.        |
 
-```an-diagram title="Trois niveaux, distillés au récent" summary="Le préfixe plus ancien se replie en observations datées et en une réflexion en arc long ; seuls les tours les plus récents restent textuellement."
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Réflexions</span><small class=\"diagram-muted\">synthèse longue condensée depuis le journal d’observations</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observations</span><small class=\"diagram-muted\">entrées denses et datées regroupant des séries de messages bruts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Messages bruts récents</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — jamais repliés</small></div></div>",
-  "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-1wfjv2e" title={"Trois niveaux, distillés au récent"} summary={"Le préfixe plus ancien se replie en observations datées et en une réflexion en arc long ; seuls les tours les plus récents restent textuellement."}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">Réflexions</span
+    ><small class="diagram-muted"
+      >synthèse longue condensée depuis le journal d’observations</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observations</span
+    ><small class="diagram-muted"
+      >entrées denses et datées regroupant des séries de messages bruts</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">Messages bruts récents</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — jamais repliés</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: stretch;
+  gap: 8px;
+}
+.om .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.om .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 À chaque tour, le côté lecture les assemble en un seul bloc `[Observational Memory]` auto-étiqueté qui remplace l'ancien préfixe brut, conserve la fenêtre brute récente intacte et indique au modèle de traiter l'enregistrement compacté comme faisant autorité (ne refaites pas le travail terminé, faites confiance aux décisions, noms, dates et statuts enregistrés).
 
 ## Comment se déroule le compactage {#compaction}
@@ -35,13 +77,52 @@ Deux passes s'exécutent comme une étape **de tir et d'oubli, au mieux** _apr
 1. **Observateur** — une fois que les messages _non observés_ d'un fil dépassent le seuil du jeton d'observation, les regroupe en une seule entrée d'observation dense.
 2. **Réflecteur** — une fois que le journal d'observation persistant lui-même dépasse le seuil du jeton de réflexion, condense les observations en une réflexion de niveau supérieur.
 
-```an-diagram title="Deux passes au mieux après un virage propre" summary="Chaque passage sans opération en dessous de son seuil, donc faire fonctionner le compacteur à chaque tour est bon marché. Les échecs sont avalés et n’ajoutent jamais de latence."
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">Fin de tour propre<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
-  "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1oid3qh" title={"Deux passes au mieux après un virage propre"} summary={"Chaque passage sans opération en dessous de son seuil, donc faire fonctionner le compacteur à chaque tour est bon marché. Les échecs sont avalés et n’ajoutent jamais de latence."}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    Fin de tour propre<br /><small class="diagram-muted">fire-and-forget</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observer</span
+    ><small class="diagram-muted"
+      >unobserved tokens &gt; 30k? &rarr; fold into one observation</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Reflector</span
+    ><small class="diagram-muted"
+      >observation log &gt; 40k? &rarr; condense into a reflection</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om-pass {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.om-pass .diagram-node,
+.om-pass .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.om-pass .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Les deux passent sans opération en dessous de leurs seuils, donc appeler le compacteur après chaque tour est bon marché. Étant donné que OM remplace le préfixe brut volatile par du texte compacté stable, il conserve également l'invite **stable en cache** au fil des tours d'un long thread.
 
 Les données OM résident dans la propre base de données SQL de l'application, limitée au propriétaire (et à l'organisation le cas échéant) – le même modèle de portée que le reste du framework. Il n'est jamais partagé entre les utilisateurs.

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

@@ -10,13 +10,54 @@ Lorsque vous ouvrez pour la première fois une application construite sur le fra
 au chat de l'agent : connectez un moteur d'IA, pointez éventuellement l'application vers partagé
 infrastructure et ajoutez des fournisseurs uniquement lorsque vous en avez besoin.
 
-```an-diagram title="La liste de contrôle de configuration" summary="Seule la connexion d’un moteur AI est requise. Le panneau suit l'achèvement et se cache automatiquement une fois que tout ce qui est requis est fait."
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>Connecter un moteur IA</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Livraison e-mail</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
-  "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-czfekg" title={"La liste de contrôle de configuration"} summary={"Seule la connexion d’un moteur AI est requise. Le panneau suit l'achèvement et se cache automatiquement une fois que tout ce qui est requis est fait."}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span
+    ><strong>Connecter un moteur IA</strong
+    ><small class="diagram-muted"
+      >Connect Builder (one click) or paste an LLM key</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Database</strong
+    ><small class="diagram-muted">set <code>DATABASE_URL</code></small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Authentication</strong
+    ><small class="diagram-muted">OAuth / access token</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Livraison e-mail</strong
+    ><small class="diagram-muted">Resend / SendGrid</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">all required done &rarr; panel auto-hides</div>
+</div>
+```
+
+```css
+.ob {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ob .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+}
+.ob .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## Pour les utilisateurs finaux
 
 ### Ce que vous verrez

package/docs/content/locales/fr-FR/plan-plugin.mdx

@@ -14,13 +14,70 @@ Une installation vous offre :
 - **Deux skills** — `/visual-plan` (le point d'entrée canonique) et `/visual-recap`.
 - **Le connecteur Plan MCP** — enregistré auprès de l'application hébergée sur `https://plan.agent-native.com` (point de terminaison MCP `https://plan.agent-native.com/_agent-native/mcp`, nom de serveur `plan`).
 
-```an-diagram title="Trois itinéraires, un forfait" summary="Les plugins universels CLI, Claude Code et Codex installent tous les mêmes deux compétences plus le connecteur Plan hébergé."
-{
-  "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Plugin Claude Code<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Plugin Codex<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
-  "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
+<Diagram id="doc-block-1il4uk9" title={"Trois itinéraires, un forfait"} summary={"Les plugins universels CLI, Claude Code et Codex installent tous les mêmes deux compétences plus le connecteur Plan hébergé."}>
+
+```html
+<div class="diagram-routes">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Universal CLI<br /><small class="diagram-muted"
+        >skills add visual-plan</small
+      >
+    </div>
+    <div class="diagram-node">
+      Plugin Claude Code<br /><small class="diagram-muted"
+        >/plugin install</small
+      >
+    </div>
+    <div class="diagram-node">
+      Plugin Codex<br /><small class="diagram-muted">codex plugin add</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">/visual-plan</span
+    ><span class="diagram-pill accent">/visual-recap</span
+    ><small class="diagram-muted">two skills</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Plan MCP connector<br /><small class="diagram-muted"
+      >plan.agent-native.com/_agent-native/mcp</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-routes {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-routes .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-routes .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-routes .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-routes .center .diagram-pill {
+  margin: 2px;
 }
 ```
 
+</Diagram>
+
 Par défaut, les deux skills publient sur l'application Plan hébergée : ils créent un plan via
 le connecteur MCP et vous remettra un lien ou un plan en ligne à examiner. Ils ne jettent jamais
 un plan Markdown/ASCII en ligne dans le chat comme livrable. Si un outil Planifier
@@ -82,13 +139,47 @@ Cela maintient le contenu du plan hors de la base de données du plan Agent-Nati
 les commentaires, les captures d'écran et l'historique du plan ne sont pas disponibles jusqu'à ce que vous l'ayez explicitement
 publier plus tard.
 
-```an-diagram title="Mode hébergé ou fichiers locaux" summary="Par défaut, les compétences sont publiées via le connecteur ; Le mode fichiers locaux écrit MDX sur le disque et prévisualise via un pont localhost à la place."
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Par défaut · hébergé</span><strong>Publier dans l’app Plan</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Confidentialité fichiers locaux</span><strong>Écrire le MDX sur disque</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No Écriture BDs until <code>publish-visual-plan</code>.</small></div></div>",
-  "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"
+<Diagram id="doc-block-1o9ncnx" title={"Mode hébergé ou fichiers locaux"} summary={"Par défaut, les compétences sont publiées via le connecteur ; Le mode fichiers locaux écrit MDX sur le disque et prévisualise via un pont localhost à la place."}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Par défaut · hébergé</span
+    ><strong>Publier dans l’app Plan</strong
+    ><small class="diagram-muted"
+      >MCP connector &rarr; hosted DB &rarr; share links, comments, history,
+      screenshots</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Confidentialité fichiers locaux</span
+    ><strong>Écrire le MDX sur disque</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No Écriture BDs until
+      <code>publish-visual-plan</code>.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-modes {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-modes .diagram-card {
+  flex: 1 1 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
 }
 ```
 
+</Diagram>
+
 Agent Native Desktop dispose d'un chemin de synchronisation de fichiers locaux distinct pour les forfaits hébergés : le
 L'application de bureau peut refléter un plan hébergé dans des fichiers MDX locaux et réimporter les modifications
 sans cloner l'application Plan ni exécuter un CLI. Ce workflow conserve l'hébergement

package/docs/content/locales/fr-FR/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ Le récapitulatif est **informatif et non bloquant**. Il crée une ligne de vér
 7. Insère un seul commentaire PR collant qui intègre les captures d'écran **en ligne** avec un élément `<picture>` (servi via le proxy d'image camouflage de GitHub) à côté du lien vers le récapitulatif interactif.
 8. Termine la vérification `Visual Recap` comme étant réussie, ignorée ou neutre.
 
-```an-diagram title="Que se passe-t-il à chaque poussée de relations publiques" summary="Une différence limitée alimente un véritable agent de codage, qui rédige un récapitulatif ; le flux de travail en fait une capture d'écran et insère un commentaire collant."
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">Push du PR<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Agent de code<br><small class=\"diagram-muted\">Claude Code / Codex lit le diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Chrome sans interface<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Un commentaire PR persistant<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
-  "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
+<Diagram id="doc-block-1a4ar0y" title={"Que se passe-t-il à chaque poussée de relations publiques"} summary={"Une différence limitée alimente un véritable agent de codage, qui rédige un récapitulatif ; le flux de travail en fait une capture d'écran et insère un commentaire collant."}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    Push du PR<br /><small class="diagram-muted"
+      >bounded base&hellip;head diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Agent de code<br /><small class="diagram-muted"
+      >Claude Code / Codex lit le diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-visual-recap</span
+    ><small class="diagram-muted">publishes recap plan</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Chrome sans interface<br /><small class="diagram-muted"
+      >light + dark screenshots</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Un commentaire PR persistant<br /><small class="diagram-muted"
+      >inline screenshot + plan link</small
+    >
+  </div>
+</div>
+<div class="diagram-foot diagram-muted">
+  Plus an informational <span class="diagram-pill">Visual Recap</span> check
+  &mdash; non-blocking, never required.
+</div>
+```
+
+```css
+.diagram-recap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-recap .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-recap .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-recap .diagram-foot {
+  flex-basis: 100%;
+  margin-top: 10px;
+  font-size: 13px;
 }
 ```
 
+</Diagram>
+
 Une nouvelle diffusion met à jour le même plan et le même commentaire persistant : pas de plans orphelins, pas de spam de commentaires.
 
 ## L'installer
@@ -157,13 +216,72 @@ Si vous souhaitez générer des récapitulatifs pour les fork PR, un deuxième f
 
 Pour l'installer, copiez le fichier de [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) dans le répertoire `.github/workflows/` de votre dépôt aux côtés du `pr-visual-recap.yml` existant. Les mêmes secrets (`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`) s'appliquent.
 
-```an-diagram title="Porte de consentement Fork PR" summary="Les PR de Fork n'ont aucun secret par défaut ; les auteurs de confiance s'exécutent automatiquement et les contributeurs externes nécessitent une nouvelle étiquette récapitulative du responsable."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">PR de fork ouverte<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Auteur de confiance</span><small class=\"diagram-muted\">OWNER, MEMBER ou COLLABORATOR s’exécute automatiquement</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Contributeur externe</span><small class=\"diagram-muted\">le mainteneur examine le diff, puis l’applique <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Vérifications de garde<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Exécutions de récapitulatif<br><small class=\"diagram-muted\">code du repo de base uniquement · le diff du fork est une entrée texte</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"
+<Diagram id="doc-block-sqtdd5" title="Porte de consentement Fork PR" summary={"Les PR de Fork n'ont aucun secret par défaut ; les auteurs de confiance s'exécutent automatiquement et les contributeurs externes nécessitent une nouvelle étiquette récapitulative du responsable."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    PR de fork ouverte<br /><small class="diagram-muted"
+      >main workflow has no secrets</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">Auteur de confiance</span
+    ><small class="diagram-muted"
+      >OWNER, MEMBER ou COLLABORATOR s’exécute automatiquement</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Contributeur externe</span
+    ><small class="diagram-muted"
+      >le mainteneur examine le diff, puis l’applique <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Vérifications de garde<br /><small class="diagram-muted"
+      >fork PR? &amp; trusted or fresh label?</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">
+    Exécutions de récapitulatif<br /><small class="diagram-muted"
+      >code du repo de base uniquement · le diff du fork est une entrée
+      texte</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-fork .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### Fonctionnement de la porte d'étiquettes
 
 1. Un contributeur fork ouvre un PR. Le flux de travail normal de `pull_request` est ignoré car GitHub retient les secrets des exécutions de fork.