@agent-native/core 0.79.26 → 0.79.27

package/corpus/core/docs/content/locales/de-DE/observability.mdx

@@ -33,13 +33,61 @@ Wenn ein Benutzer eine Nachricht sendet, zeichnet das Framework automatisch Folg
 
 Keine Codeänderungen erforderlich. Die Instrumentierung wird transparent in `production-agent.ts` eingebunden.
 
-```an-diagram title="Jeder Lauf speist die Schleife" summary="Ein Agentenlauf erzeugt eine Ablaufverfolgung, automatisierte Bewertungen und einen Feedback-Hook – alles wird im eigenen SQL der App gespeichert und im Dashboard angezeigt. Experimente teilen den Datenverkehr auf verschiedene Konfigurationsvarianten auf."
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">Agentenlauf<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\">Automatisch erfasst</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-120riqf" title="Jeder Lauf speist die Schleife" summary={"Ein Agentenlauf erzeugt eine Ablaufverfolgung, automatisierte Bewertungen und einen Feedback-Hook – alles wird im eigenen SQL der App gespeichert und im Dashboard angezeigt. Experimente teilen den Datenverkehr auf verschiedene Konfigurationsvarianten auf."}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    Agentenlauf<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">Automatisch erfasst</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>
+
 ## Das Dashboard {#dashboard}
 
 Fügen Sie das Dashboard mit einer einzigen Route zu jeder Vorlage hinzu:
@@ -147,13 +195,59 @@ PUT /_agent-native/observability/experiments/:id
 
 Verwenden Sie anstelle von `<your-model-id>` / `<other-model-id>` die tatsächlichen Modellkennungen, die Ihre Engine akzeptiert (Modellnamen ändern sich häufig – überprüfen Sie Ihren Anbieter/Ihre Engine auf die aktuellen IDs). Die Agentenschleife löst automatisch die Variante des Benutzers auf und wendet die Konfigurationsüberschreibung an. Die Zuweisung verwendet konsistentes Hashing – derselbe Benutzer erhält immer die gleiche Variante.
 
-```an-diagram title="Zuweisung konsistenter Hash-Varianten" summary="Jeder Benutzer hasht eine stabile Variante, die Schleife wendet die Konfigurationsüberschreibung dieser Variante an und die Ergebnisse werden pro Variante mit Konfidenzintervallen zusammengefasst."
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">Benutzer-ID<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\">Konfigurations-Override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">Konfigurations-Override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Ergebnisse 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-5k287n" title="Zuweisung konsistenter Hash-Varianten" summary={"Jeder Benutzer hasht eine stabile Variante, die Schleife wendet die Konfigurationsüberschreibung dieser Variante an und die Ergebnisse werden pro Variante mit Konfidenzintervallen zusammengefasst."}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    Benutzer-ID<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">Konfigurations-Override A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">Konfigurations-Override B</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Ergebnisse 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>
+
 ## Konfiguration {#config}
 
 Alle Einstellungen werden im `observability-config`-Schlüssel gespeichert:

package/corpus/core/docs/content/locales/de-DE/observational-memory.mdx

@@ -19,13 +19,56 @@ OM stellt einen langen Thread mit drei Schichten dar, vom am meisten destilliert
 | **Beobachtungen**          | Dichte, datierte Einträge, die eine Reihe von Rohnachrichten zu einer kompakten Aufzeichnung dessen zusammenfassen, was passiert ist. |
 | **Neueste Rohnachrichten** | Die letzten N Runden werden **wörtlich** beibehalten – nie gefaltet –, sodass der Agent immer den neuesten Kontext sieht.             |
 
-```an-diagram title="Dreistufig, destilliert bis aktuell" summary="Das ältere Präfix gliedert sich in datierte Beobachtungen und eine Langbogenreflexion; nur die letzten Wendungen bleiben wörtlich."
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Reflexionen</span><small class=\"diagram-muted\">Langfristige Zusammenfassung aus dem Beobachtungsprotokoll</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Beobachtungen</span><small class=\"diagram-muted\">dichte, datierte Einträge, die Rohmeldungen zusammenfassen</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">Aktuelle Rohmeldungen</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — nie zusammengefaltet</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-6g5ff8" title="Dreistufig, destilliert bis aktuell" summary={"Das ältere Präfix gliedert sich in datierte Beobachtungen und eine Langbogenreflexion; nur die letzten Wendungen bleiben wörtlich."}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">Reflexionen</span
+    ><small class="diagram-muted"
+      >Langfristige Zusammenfassung aus dem Beobachtungsprotokoll</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Beobachtungen</span
+    ><small class="diagram-muted"
+      >dichte, datierte Einträge, die Rohmeldungen zusammenfassen</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">Aktuelle Rohmeldungen</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — nie
+      zusammengefaltet</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>
+
 Bei jeder Runde fügt die Leseseite diese in einem einzigen selbstbeschrifteten `[Observational Memory]`-Block zusammen, der das rohe ältere Präfix ersetzt, das aktuelle Rohfenster intakt hält und das Modell anweist, den komprimierten Datensatz als maßgeblich zu behandeln (fertige Arbeiten nicht wiederholen, den aufgezeichneten Entscheidungen, Namen, Daten und Status vertrauen).
 
 ## Wie die Komprimierung ausgeführt wird {#compaction}
@@ -35,13 +78,54 @@ Zwei Durchgänge werden als **Fire-and-Forget-Best-Effort-Schritt** _nach_ einer
 1. **Beobachter** – sobald die _unbeobachteten_ Nachrichten eines Threads den Beobachtungstoken-Schwellenwert überschreiten, werden sie zu einem einzigen dichten Beobachtungseintrag zusammengefasst.
 2. **Reflektor** – sobald das persistente Beobachtungsprotokoll selbst den Reflexions-Token-Schwellenwert überschreitet, werden die Beobachtungen in einer Reflexion höherer Ebene zusammengefasst.
 
-```an-diagram title="Zwei beste Pässe nach einer sauberen Drehung" summary="Unterhalb der Schwelle erfolgt bei jedem Durchgang ein No-Ops-Vorgang, daher ist es günstig, den Verdichter in jeder Runde laufen zu lassen. Fehler werden verschluckt und verursachen keine zusätzliche Latenz."
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">Sauberer Turn endet<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-1ug0x0j" title={"Zwei beste Pässe nach einer sauberen Drehung"} summary={"Unterhalb der Schwelle erfolgt bei jedem Durchgang ein No-Ops-Vorgang, daher ist es günstig, den Verdichter in jeder Runde laufen zu lassen. Fehler werden verschluckt und verursachen keine zusätzliche Latenz."}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    Sauberer Turn endet<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>
+
 Beide passieren unter ihren Schwellenwerten keinen Betrieb, daher ist es günstig, den Verdichter nach jeder Runde anzurufen. Da OM das flüchtige Rohpräfix durch stabilen komprimierten Text ersetzt, bleibt die Eingabeaufforderung auch über die Windungen eines langen Threads hinweg **cachestabil**.
 
 OM-Daten befinden sich in der eigenen SQL-Datenbank der App und sind auf den Besitzer (und die Organisation, falls vorhanden) beschränkt – das gleiche Scoping-Modell wie der Rest des Frameworks. Es wird niemals von mehreren Benutzern geteilt.

package/corpus/core/docs/content/locales/de-DE/onboarding.mdx

@@ -10,13 +10,54 @@ Wenn Sie zum ersten Mal eine App öffnen, die auf dem agentennativen Framework b
 zum Agenten-Chat: Verbinden Sie eine KI-Engine, verweisen Sie die App optional auf „Freigegeben“
 Infrastruktur und fügen Sie Anbieter nur dann hinzu, wenn Sie sie benötigen.
 
-```an-diagram title="Die Setup-Checkliste" summary="Es ist lediglich das Anschließen einer KI-Engine erforderlich. Das Panel verfolgt den Abschluss und wird automatisch ausgeblendet, sobald alles Erforderliche erledigt ist."
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>AI-Engine verbinden</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>E-Mail-Zustellung</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-jraeqk" title="Die Setup-Checkliste" summary={"Es ist lediglich das Anschließen einer KI-Engine erforderlich. Das Panel verfolgt den Abschluss und wird automatisch ausgeblendet, sobald alles Erforderliche erledigt ist."}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span
+    ><strong>AI-Engine verbinden</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>E-Mail-Zustellung</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>
+
 ## Für Endbenutzer
 
 ### Was Sie sehen werden

package/corpus/core/docs/content/locales/de-DE/plan-plugin.mdx

@@ -14,13 +14,70 @@ Eine Installation bietet Ihnen:
 - **Zwei skills** – `/visual-plan` (der kanonische Einstiegspunkt) und `/visual-recap`.
 - **Der Plan MCP-Connector** – registriert für die gehostete App unter `https://plan.agent-native.com` (MCP-Endpunkt `https://plan.agent-native.com/_agent-native/mcp`, Servername `plan`).
 
-```an-diagram title="Drei Routen, ein Paket" summary="Die universellen Plugins CLI, Claude Code und Codex installieren alle dieselben zwei Skills sowie den gehosteten Plan-Connector."
-{
-  "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\">Claude Code-Plugin<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex-Plugin<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-zzy087" title="Drei Routen, ein Paket" summary="Die universellen Plugins CLI, Claude Code und Codex installieren alle dieselben zwei Skills sowie den gehosteten Plan-Connector.">
+
+```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">
+      Claude Code-Plugin<br /><small class="diagram-muted"
+        >/plugin install</small
+      >
+    </div>
+    <div class="diagram-node">
+      Codex-Plugin<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>
+
 Standardmäßig veröffentlichen beide skills in der gehosteten Plan-App – sie erstellen einen Plan über
 den MCP-Anschluss und überreichen Ihnen einen Link oder einen Inline-Plan zur Überprüfung. Sie entleeren nie
 ein Inline-Plan Markdown/ASCII im Chat als Ergebnis. Wenn ein Plan-Tool
@@ -82,13 +139,47 @@ Dadurch werden Planinhalte aus der Agent-Native-Plandatenbank ferngehalten. Geho
 Kommentare, Screenshots und der Planverlauf sind erst verfügbar, wenn Sie dies ausdrücklich tun
 später veröffentlichen.
 
-```an-diagram title="Gehosteter vs. lokaler Dateimodus" summary="Standardmäßig werden Fertigkeiten über den Connector veröffentlicht. Der lokale Dateimodus schreibt stattdessen MDX auf die Festplatte und zeigt eine Vorschau über eine Localhost-Bridge an."
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Standard · gehostet</span><strong>In die Plan-App veröffentlichen</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\">Datenschutz für lokale Dateien</span><strong>MDX auf die Festplatte schreiben</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No DB-Schreibvorgangs 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-1y136sc" title="Gehosteter vs. lokaler Dateimodus" summary={"Standardmäßig werden Fertigkeiten über den Connector veröffentlicht. Der lokale Dateimodus schreibt stattdessen MDX auf die Festplatte und zeigt eine Vorschau über eine Localhost-Bridge an."}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Standard · gehostet</span
+    ><strong>In die Plan-App veröffentlichen</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">Datenschutz für lokale Dateien</span
+    ><strong>MDX auf die Festplatte schreiben</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No DB-Schreibvorgangs 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 verfügt über einen separaten Synchronisierungspfad für lokale Dateien für gehostete Pläne: den
 Desktop-App kann einen gehosteten Plan in lokale MDX-Dateien spiegeln und Änderungen wieder importieren
 ohne die Plan-App zu klonen oder ein CLI auszuführen. Dieser Workflow behält das gehostete

package/corpus/core/docs/content/locales/de-DE/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ Bei jedem PR-Push der Workflow:
 7. Fügt einen einzelnen PR-Kommentar ein, der die Screenshots **inline** mit einem `<picture>`-Element (bereitgestellt über den Camo-Image-Proxy von GitHub) neben dem Link zur interaktiven Zusammenfassung einbettet.
 8. Schließt die `Visual Recap`-Prüfung als erfolgreich, übersprungen oder neutral ab.
 
-```an-diagram title="Was passiert bei jedem PR-Push?" summary="Ein begrenztes Diff speist einen echten Codierungsagenten, der eine Zusammenfassung erstellt; Der Workflow macht einen Screenshot davon und fügt einen Sticky-Kommentar ein."
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR-Push<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\">Coding-Agent<br><small class=\"diagram-muted\">Claude Code / Codex liest 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\">Headless Chrome<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\">Ein angehefteter PR-Kommentar<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-xf7qil" title={"Was passiert bei jedem PR-Push?"} summary={"Ein begrenztes Diff speist einen echten Codierungsagenten, der eine Zusammenfassung erstellt; Der Workflow macht einen Screenshot davon und fügt einen Sticky-Kommentar ein."}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    PR-Push<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">
+    Coding-Agent<br /><small class="diagram-muted"
+      >Claude Code / Codex liest 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">
+    Headless Chrome<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">
+    Ein angehefteter PR-Kommentar<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>
+
 Bei einem erneuten Push werden derselbe Plan und derselbe Sticky-Kommentar aktualisiert – keine verwaisten Pläne, kein Kommentar-Spam.
 
 ## Installieren
@@ -157,13 +216,71 @@ Wenn Sie Zusammenfassungen für Fork-PRs generieren möchten, steht eine zweite
 
 Um es zu installieren, kopieren Sie die Datei von [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) in das `.github/workflows/`-Verzeichnis Ihres Repos neben dem vorhandenen `pr-visual-recap.yml`. Es gelten die gleichen Geheimnisse (`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`).
 
-```an-diagram title="Fork PR-Zustimmungstor" summary="Fork-PRs erhalten standardmäßig keine Geheimnisse; Vertrauenswürdige Autoren werden automatisch ausgeführt und externe Mitwirkende benötigen ein neues Betreuer-Recap-Label."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">Fork-PR geöffnet<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\">Vertrauenswürdiger Autor</span><small class=\"diagram-muted\">OWNER, MEMBER oder COLLABORATOR läuft automatisch</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Externer Mitwirkender</span><small class=\"diagram-muted\">Maintainer prüft Diff und wendet ihn dann an <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Gate-Checks<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\">Recap-Läufe<br><small class=\"diagram-muted\">nur Code aus Basis-Repo · Fork-Diff ist Texteingabe</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-cd4zy4" title="Fork PR-Zustimmungstor" summary={"Fork-PRs erhalten standardmäßig keine Geheimnisse; Vertrauenswürdige Autoren werden automatisch ausgeführt und externe Mitwirkende benötigen ein neues Betreuer-Recap-Label."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    Fork-PR geöffnet<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">Vertrauenswürdiger Autor</span
+    ><small class="diagram-muted"
+      >OWNER, MEMBER oder COLLABORATOR läuft automatisch</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Externer Mitwirkender</span
+    ><small class="diagram-muted"
+      >Maintainer prüft Diff und wendet ihn dann an <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Gate-Checks<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">
+    Recap-Läufe<br /><small class="diagram-muted"
+      >nur Code aus Basis-Repo · Fork-Diff ist Texteingabe</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>
+
 ### So funktioniert das Label-Gate
 
 1. Ein Fork-Mitwirkender öffnet eine PR. Der normale `pull_request`-Workflow wird übersprungen, da GitHub Geheimnisse aus Fork-Läufen zurückhält.