@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/fr-FR/what-is-agent-native.mdx

@@ -50,13 +50,59 @@ Trois choses changent lorsque vous atteignez le barreau 3 :
 
 Il s'agit de l'échelon 3. Il s'agit d'un agent natif.
 
-```an-diagram title="Le principe de l'échelle" summary="La plupart des équipes s'arrêtent au niveau 1 ou 2. L'agent natif est le niveau 3 : une véritable application et un véritable agent sur une surface d'action partagée."
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">Échelon 3 · agent-native</span><strong>Agent + UI comme partenaires égaux</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">Échelon 2</span><strong>Un chat avec des outils</strong><small class=\"diagram-muted\">L’agent peut agir, mais ce n’est encore qu’une fenêtre de chat. Pas de tableaux de bord, listes ou raccourcis.</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">Échelon 1</span><strong>Un seul appel LLM</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-dkfzdz" title={"Le principe de l'échelle"} summary={"La plupart des équipes s'arrêtent au niveau 1 ou 2. L'agent natif est le niveau 3 : une véritable application et un véritable agent sur une surface d'action partagée."}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">Échelon 3 · agent-native</span
+    ><strong>Agent + UI comme partenaires égaux</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">Échelon 2</span
+    ><strong>Un chat avec des outils</strong
+    ><small class="diagram-muted"
+      >L’agent peut agir, mais ce n’est encore qu’une fenêtre de chat. Pas de
+      tableaux de bord, listes ou raccourcis.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">Échelon 1</span
+    ><strong>Un seul appel LLM</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 Voir [Key Concepts — Protocols](/docs/key-concepts#protocols) pour savoir comment tout cela dépend de la même définition d'action.
 
 ## Pourquoi chaque agent a besoin d'un UI {#why-every-agent-needs-a-ui}
@@ -89,13 +135,60 @@ C'est le principe déterminant.
 >
 > **De l'agent** — langage naturel, autres agents via A2A, Slack, Telegram. L'agent écrit dans la base de données ; le UI se met à jour automatiquement.
 
-```an-diagram title="Un système, deux façons d'entrer" summary="L'agent et l'interface utilisateur écrivent dans les mêmes actions et dans la même base de données. Quoi que l’un fasse, l’autre le voit."
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">clics, formulaires, raccourcis</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">langage naturel · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">base de données SQL</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">L’UI se met à jour en direct</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-qsmzjp" title={"Un système, deux façons d'entrer"} summary={"L'agent et l'interface utilisateur écrivent dans les mêmes actions et dans la même base de données. Quoi que l’un fasse, l’autre le voit."}>
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted"
+        >clics, formulaires, raccourcis</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted"
+        >langage naturel · A2A · Slack</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">base de données SQL</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">L’UI se met à jour en direct</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 Lorsque l'agent crée un brouillon d'e-mail, celui-ci apparaît dans le UI. Lorsque vous cliquez sur « Envoyer », l'agent sait que le message a été envoyé. Il n'y a pas de « monde des agents » et de « monde UI » distincts : c'est un seul système. Voir [Key Concepts](/docs/key-concepts) pour l'architecture qui fait que cela fonctionne.
 
 ## Personnalisation généralement réservée aux outils électriques {#workspace-customization}

package/docs/content/locales/fr-FR/workspace-connections.mdx

@@ -16,13 +16,75 @@ Les connexions à l'espace de travail constituent la primitive de structure pour
 - **credentialRef** — un pointeur vers un secret de coffre-fort (`{ key: "SLACK_BOT_TOKEN", scope: "org" }`). La connexion indique où se trouve le jeton ; le coffre-fort contient la valeur.
 - **Préparation** : état combiné affiché par une application : `connected` (accordé + informations d'identification présentes), `needs_grant`, `needs_credentials`, `needs_attention` ou `not_configured`.
 
-```an-diagram title="Connectez-vous une fois, accordez des applications, réutilisez les informations d'identification" summary="Une connexion contient des métadonnées de fournisseur (jamais de secrets) et des informations d'identification qui pointent vers le coffre-fort. Les subventions par application le débloquent. Les applications lisent un seul état de préparation."
-{
-  "html": "<div class=\"diagram-conn\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Connection</span><div class=\"diagram-box\" data-rough>named provider account<br><small class=\"diagram-muted\">provider, label, statut, périmètres, configuration &middot; never stores secret values</small></div><div class=\"diagram-muted\">credentialRef &rarr; pointer to a vault secret</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill\">Grant</span><div class=\"diagram-box\" data-rough>per-app permission<br><small class=\"diagram-muted\">no grant = no credential access</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Readiness</span><small class=\"diagram-muted\">what the app sees</small><div class=\"sev-row\"><span class=\"diagram-pill ok\">connected</span><span class=\"diagram-pill warn\">needs_grant</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">needs_credentials</span><span class=\"diagram-pill warn\">needs_attention</span></div><div class=\"sev-row\"><span class=\"diagram-pill\">not_configured</span></div></div></div>",
-  "css": ".diagram-conn{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-conn .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-conn .diagram-arrow{font-size:22px;line-height:1}.diagram-conn .sev-row{display:flex;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-gmodnw" title={"Connectez-vous une fois, accordez des applications, réutilisez les informations d'identification"} summary={"Une connexion contient des métadonnées de fournisseur (jamais de secrets) et des informations d'identification qui pointent vers le coffre-fort. Les subventions par application le débloquent. Les applications lisent un seul état de préparation."}>
+
+```html
+<div class="diagram-conn">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Connection</span>
+    <div class="diagram-box" data-rough>
+      named provider account<br /><small class="diagram-muted"
+        >provider, label, statut, périmètres, configuration &middot; never
+        stores secret values</small
+      >
+    </div>
+    <div class="diagram-muted">
+      credentialRef &rarr; pointer to a vault secret
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill">Grant</span>
+    <div class="diagram-box" data-rough>
+      per-app permission<br /><small class="diagram-muted"
+        >no grant = no credential access</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Readiness</span
+    ><small class="diagram-muted">what the app sees</small>
+    <div class="sev-row">
+      <span class="diagram-pill ok">connected</span
+      ><span class="diagram-pill warn">needs_grant</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">needs_credentials</span
+      ><span class="diagram-pill warn">needs_attention</span>
+    </div>
+    <div class="sev-row"><span class="diagram-pill">not_configured</span></div>
+  </div>
+</div>
+```
+
+```css
+.diagram-conn {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-conn .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-conn .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-conn .sev-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 ### Exemple concret : Slack
 
 Connectez Slack une fois et accordez-le à Brain and Analytics :
@@ -260,13 +322,71 @@ Le coffre-fort des informations d'identification répond : « Où le secret e
 
 Réponses des métadonnées du fournisseur de connexion Workspace : "De quel fournisseur s'agit-il, que peut-il faire, de quelles clés d'identification pourrait-il avoir besoin et quels modèles devraient le proposer ?"
 
-```an-diagram title="Magasin de connexions et coffre-fort" summary="Le coffre-fort possède la valeur secrète. La connexion possède les métadonnées du fournisseur ainsi que les credentialRefs (pointeurs). Au moment de l'exécution, l'application résout la référence via une connexion accordée et lit la valeur dans le coffre-fort."
-{
-  "html": "<div class=\"diagram-vault\"><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill accent\">Store de connexions</span><div class=\"diagram-box\" data-rough>provider account + metadata<br><small class=\"diagram-muted\">statut, périmètres, configuration</small></div><div class=\"diagram-box\" data-rough>credentialRef<br><small class=\"diagram-muted\">{ key: SLACK_BOT_TOKEN, scope: org }</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Action d’app</span><small class=\"diagram-muted\">resolves at execution time through a granted ref</small><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel col\" data-rough><span class=\"diagram-pill ok\">Vault</span><div class=\"diagram-box\" data-rough>secret value<br><small class=\"diagram-muted\">jamais renvoyé à l’agent ou à l’UI</small></div></div></div>",
-  "css": ".diagram-vault{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-vault .col{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:220px}.diagram-vault .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-vault .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-157j6bd" title="Magasin de connexions et coffre-fort" summary={"Le coffre-fort possède la valeur secrète. La connexion possède les métadonnées du fournisseur ainsi que les credentialRefs (pointeurs). Au moment de l'exécution, l'application résout la référence via une connexion accordée et lit la valeur dans le coffre-fort."}>
+
+```html
+<div class="diagram-vault">
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill accent">Store de connexions</span>
+    <div class="diagram-box" data-rough>
+      provider account + metadata<br /><small class="diagram-muted"
+        >statut, périmètres, configuration</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      credentialRef<br /><small class="diagram-muted"
+        >{ key: SLACK_BOT_TOKEN, scope: org }</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Action d’app</span
+    ><small class="diagram-muted"
+      >resolves at execution time through a granted ref</small
+    >
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel col" data-rough>
+    <span class="diagram-pill ok">Vault</span>
+    <div class="diagram-box" data-rough>
+      secret value<br /><small class="diagram-muted"
+        >jamais renvoyé à l’agent ou à l’UI</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vault {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-vault .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  min-width: 220px;
+}
+.diagram-vault .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-vault .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Utilisez les deux ensemble :
 
 1. Dispatch (ou un autre flux de configuration de l'espace de travail) crée le secret du coffre-fort sous-jacent ou la référence d'identifiant OAuth.

package/docs/content/locales/fr-FR/workspace-management.mdx

@@ -9,13 +9,59 @@ description: "Branching, CODEOWNERS, examen des relations publiques et comment D
 
 Ce guide couvre l'aspect opérationnel de l'exécution d'un espace de travail natif d'agent : comment créer des branches, qui examine quoi, comment configurer la propriété du code et comment le plan de contrôle Dispatch s'intègre dans votre modèle de gouvernance.
 
-```an-diagram title="Deux plans de gouvernance" summary="Git régit le code ; Dispatch régit l'exécution. Ils sont complémentaires : ne se reproduisent pas l’un dans l’autre."
-{
-  "html": "<div class=\"gov\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Git et GitHub</span><strong>Gouvernance du code</strong><div class=\"gov-list\"><span class=\"diagram-pill\">CODEOWNERS</span><span class=\"diagram-pill\">branch protection</span><span class=\"diagram-pill\">Revue de PR</span><span class=\"diagram-pill\">git log / blame</span></div></div><div class=\"diagram-pill diagram-muted\">+</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Dispatch</span><strong>Runtime governance</strong><div class=\"gov-list\"><span class=\"diagram-pill\">vault secrets &amp; grants</span><span class=\"diagram-pill\">workspace resources</span><span class=\"diagram-pill\">agent profiles</span><span class=\"diagram-pill\">approvals &amp; audit</span></div></div></div>",
-  "css": ".gov{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gov .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.gov .gov-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}"
+<Diagram id="doc-block-15sx5hn" title="Deux plans de gouvernance" summary={"Git régit le code ; Dispatch régit l'exécution. Ils sont complémentaires : ne se reproduisent pas l’un dans l’autre."}>
+
+```html
+<div class="gov">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Git et GitHub</span
+    ><strong>Gouvernance du code</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">CODEOWNERS</span
+      ><span class="diagram-pill">branch protection</span
+      ><span class="diagram-pill">Revue de PR</span
+      ><span class="diagram-pill">git log / blame</span>
+    </div>
+  </div>
+  <div class="diagram-pill diagram-muted">+</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Dispatch</span
+    ><strong>Runtime governance</strong>
+    <div class="gov-list">
+      <span class="diagram-pill">vault secrets &amp; grants</span
+      ><span class="diagram-pill">workspace resources</span
+      ><span class="diagram-pill">agent profiles</span
+      ><span class="diagram-pill">approvals &amp; audit</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.gov {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.gov .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.gov .gov-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## Branchement
 
 ### Branches de fonctionnalités

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

@@ -11,13 +11,68 @@ Chaque application native d'agent est livrée avec un **espace de travail** : l
 
 Le twist : **il s'agit de lignes SQL, pas de fichiers du système de fichiers.** Chaque utilisateur obtient son propre espace de travail stocké dans la base de données. Il n'y a pas de boîte de développement à démarrer, pas de conteneur par utilisateur, pas de fichiers à monter. Un SaaS multi-locataires peut offrir à chaque utilisateur un agent entièrement personnalisable et essentiellement gratuit, car il s'agit uniquement de lignes (mémoire personnelle, serveurs MCP personnels, skills personnels, sous-agents personnels) et la base de code partagée les héberge toutes en même temps.
 
-```an-diagram title="Un espace de travail Claude-Code, mais stocké dans SQL" summary="La même couche de personnalisation (instructions, compétences, mémoire, agents, tâches, MCP) sauf que chaque fichier est une ligne dans une base de données mutualisée partagée."
-{
-  "html": "<div class=\"ws-map\"><div class=\"diagram-card cc\"><span class=\"diagram-pill warn\">Claude Code / Codex</span><small class=\"diagram-muted\">~/.claude/ on a local disk</small><div class=\"ws-files\"><span class=\"diagram-box\">CLAUDE.md</span><span class=\"diagram-box\">skills/</span><span class=\"diagram-box\">memory</span><span class=\"diagram-box\">mcp.json</span></div><small class=\"diagram-muted\">one codebase per developer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card an\"><span class=\"diagram-pill accent\">Espace de travail agent-native</span><small class=\"diagram-muted\">rows in one base de données SQL</small><div class=\"ws-rows\"><span class=\"diagram-pill\">AGENTS.md</span><span class=\"diagram-pill\">skills/&hellip;</span><span class=\"diagram-pill\">memory/&hellip;</span><span class=\"diagram-pill\">mcp-servers/&hellip;</span></div><small class=\"diagram-muted\">une base de code, plusieurs utilisateurs, avec périmètres <code>u:&lt;email&gt;:&hellip;</code></small></div></div>",
-  "css": ".ws-map{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ws-map .diagram-card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:220px}.ws-map .ws-files,.ws-map .ws-rows{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}.ws-map .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-bkcqdw" title={"Un espace de travail Claude-Code, mais stocké dans SQL"} summary={"La même couche de personnalisation (instructions, compétences, mémoire, agents, tâches, MCP) sauf que chaque fichier est une ligne dans une base de données mutualisée partagée."}>
+
+```html
+<div class="ws-map">
+  <div class="diagram-card cc">
+    <span class="diagram-pill warn">Claude Code / Codex</span
+    ><small class="diagram-muted">~/.claude/ on a local disk</small>
+    <div class="ws-files">
+      <span class="diagram-box">CLAUDE.md</span
+      ><span class="diagram-box">skills/</span
+      ><span class="diagram-box">memory</span
+      ><span class="diagram-box">mcp.json</span>
+    </div>
+    <small class="diagram-muted">one codebase per developer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card an">
+    <span class="diagram-pill accent">Espace de travail agent-native</span
+    ><small class="diagram-muted">rows in one base de données SQL</small>
+    <div class="ws-rows">
+      <span class="diagram-pill">AGENTS.md</span
+      ><span class="diagram-pill">skills/&hellip;</span
+      ><span class="diagram-pill">memory/&hellip;</span
+      ><span class="diagram-pill">mcp-servers/&hellip;</span>
+    </div>
+    <small class="diagram-muted"
+      >une base de code, plusieurs utilisateurs, avec périmètres
+      <code>u:&lt;email&gt;:&hellip;</code></small
+    >
+  </div>
+</div>
+```
+
+```css
+.ws-map {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ws-map .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 220px;
+}
+.ws-map .ws-files,
+.ws-map .ws-rows {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0;
+}
+.ws-map .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 | Code Claude / Codex                                  | Espace de travail natif de l'agent                                         |
 | ---------------------------------------------------- | -------------------------------------------------------------------------- |
 | Fichiers sur votre disque local                      | Lignes dans une base de données SQL partagée                               |
@@ -51,13 +106,62 @@ Les chemins canoniques qui contrôlent la manière dont l'agent utilise chaque r
 
 Ces chemins s'appliquent aux trois étendues : espace de travail, organisation/application et personnel. La dernière portée l'emporte lorsque le même chemin existe à plusieurs niveaux.
 
-```an-diagram title="Trois scopes, un fichier efficace" summary="Le runtime résout le même chemin dans l’espace de travail, l’application et les étendues personnelles en lecture : l’étendue la plus spécifique l’emporte."
-{
-  "html": "<div class=\"ws-stack\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Workspace</span><small class=\"diagram-muted\">valeurs par défaut d’entreprise depuis Dispatch</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Organisation / application</span><small class=\"diagram-muted\">team override for one app</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Personal</span><small class=\"diagram-muted\">per-user override &mdash; wins</small><code>context/brand.md</code></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">Effective <code>context/brand.md</code></div></div>",
-  "css": ".ws-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ws-stack .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:280px}.ws-stack .diagram-arrow{font-size:20px;align-self:center}.ws-stack code{font-size:.85em}.ws-stack .diagram-box{align-self:center;margin-top:4px}"
+<Diagram id="doc-block-zk5bz1" title="Trois scopes, un fichier efficace" summary={"Le runtime résout le même chemin dans l’espace de travail, l’application et les étendues personnelles en lecture : l’étendue la plus spécifique l’emporte."}>
+
+```html
+<div class="ws-stack">
+  <div class="diagram-card">
+    <span class="diagram-pill">Workspace</span
+    ><small class="diagram-muted"
+      >valeurs par défaut d’entreprise depuis Dispatch</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Organisation / application</span
+    ><small class="diagram-muted">team override for one app</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Personal</span
+    ><small class="diagram-muted">per-user override &mdash; wins</small
+    ><code>context/brand.md</code>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">Effective <code>context/brand.md</code></div>
+</div>
+```
+
+```css
+.ws-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ws-stack .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  min-width: 280px;
+}
+.ws-stack .diagram-arrow {
+  font-size: 20px;
+  align-self: center;
+}
+.ws-stack code {
+  font-size: 0.85em;
+}
+.ws-stack .diagram-box {
+  align-self: center;
+  margin-top: 4px;
 }
 ```
 
+</Diagram>
+
 ## Mise en route : présentation pas à pas d'une minute {#getting-started}
 
 Modifiez le comportement de l'agent en 60 secondes.

package/docs/content/locales/fr-FR/writing-agent-instructions.mdx

@@ -7,13 +7,56 @@ description: "Comment rédiger des instructions d'agent efficaces pour une appli
 
 Le comportement de l'agent dans une application native d'agent dépend des instructions que vous lui donnez. Trois surfaces portent ces conseils : `AGENTS.md` (la carte), skills (les analyses approfondies) et les descriptions d'actions/d'outils (comment l'agent choisit le bon outil). Écrivez chacun pour une récupération rapide, pas pour de la prose.
 
-```an-diagram title="Trois surfaces créées + une surface d'exécution" summary="AGENTS.md et les descriptions d'outils se chargent à chaque tour ; charge de compétences sur demande ; application_state est écrit en direct par votre interface utilisateur."
-{
-  "html": "<div class=\"diagram-surfaces\"><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Chaque tour</span><strong>AGENTS.md</strong><small class=\"diagram-muted\">la carte : objectif, règles clés, clés d’état, index actions + compétences</small></div><div class=\"diagram-card always\" data-rough><span class=\"diagram-pill accent\">Chaque tour</span><strong>Descriptions d’outils</strong><small class=\"diagram-muted\">guide le choix des outils — une phrase précise chacun</small></div><div class=\"diagram-card ondemand\" data-rough><span class=\"diagram-pill\">À la demande</span><strong>Compétences</strong><small class=\"diagram-muted\">guide approfondi, chargé quand la description correspond</small></div><div class=\"diagram-card runtime\" data-rough><span class=\"diagram-pill ok\">Live</span><strong>application_state</strong><small class=\"diagram-muted\">écrit par votre UI : navigation, sélection, focus</small></div></div>",
-  "css": ".diagram-surfaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.diagram-surfaces .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}"
+<Diagram id="doc-block-1ec0xdy" title={"Trois surfaces créées + une surface d'exécution"} summary={"AGENTS.md et les descriptions d'outils se chargent à chaque tour ; charge de compétences sur demande ; application_state est écrit en direct par votre interface utilisateur."}>
+
+```html
+<div class="diagram-surfaces">
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">Chaque tour</span
+    ><strong>AGENTS.md</strong
+    ><small class="diagram-muted"
+      >la carte : objectif, règles clés, clés d’état, index actions +
+      compétences</small
+    >
+  </div>
+  <div class="diagram-card always" data-rough>
+    <span class="diagram-pill accent">Chaque tour</span
+    ><strong>Descriptions d’outils</strong
+    ><small class="diagram-muted"
+      >guide le choix des outils — une phrase précise chacun</small
+    >
+  </div>
+  <div class="diagram-card ondemand" data-rough>
+    <span class="diagram-pill">À la demande</span><strong>Compétences</strong
+    ><small class="diagram-muted"
+      >guide approfondi, chargé quand la description correspond</small
+    >
+  </div>
+  <div class="diagram-card runtime" data-rough>
+    <span class="diagram-pill ok">Live</span><strong>application_state</strong
+    ><small class="diagram-muted"
+      >écrit par votre UI : navigation, sélection, focus</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-surfaces {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+.diagram-surfaces .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## Gardez AGENTS.md petit et écrémé {#small-agents-md}
 
 `AGENTS.md` est chargé comme orientation. Cela devrait être la plus petite chose qui permette à l'agent d'agir correctement, avec tout ce qui est profondément intégré à skills. Visez ces sections et rien d'autre :