@agent-native/core 0.79.26 → 0.79.27

package/docs/content/locales/de-DE/frames.mdx

@@ -20,13 +20,55 @@ Chatten, ausführen und (im Entwickler) Code bearbeiten. Es gibt drei Frames, di
 Ihr App-Code ist identisch, unabhängig davon, welcher Frame ihn hostet. Der Agent spricht
 zu Ihrer App in jedem Fall über denselben actions und Anwendungsstatus.
 
-```an-diagram title="Drei Frames, eine Laufzeit" summary="Ihre App und das Agent-Panel sind in jedem Frame gleich; nur die Hülle um sie herum ändert sich."
-{
-  "html": "<div class=\"diagram-frames\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Eingebettetes Panel</span><small class=\"diagram-muted\">in jeder App enthalten · Dev + Prod</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Lokaler Dev-Frame</span><small class=\"diagram-muted\">App in iframe + Panel + CLI-Terminal</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Builder.io-Cloud-Frame</span><small class=\"diagram-muted\">gehostet: Zusammenarbeit · visuelle Bearbeitung · parallele Läufe</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Gleiche Runtime<br><small class=\"diagram-muted\">deine App · Aktionen · Anwendungszustand</small></div></div>",
-  "css": ".diagram-frames{display:flex;flex-direction:column;gap:10px;align-items:stretch}.diagram-frames .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-frames .diagram-arrow{font-size:22px;line-height:1;align-self:center}"
+<Diagram id="doc-block-1vh9gr5" title="Drei Frames, eine Laufzeit" summary={"Ihre App und das Agent-Panel sind in jedem Frame gleich; nur die Hülle um sie herum ändert sich."}>
+
+```html
+<div class="diagram-frames">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Eingebettetes Panel</span
+    ><small class="diagram-muted">in jeder App enthalten · Dev + Prod</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Lokaler Dev-Frame</span
+    ><small class="diagram-muted">App in iframe + Panel + CLI-Terminal</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Builder.io-Cloud-Frame</span
+    ><small class="diagram-muted"
+      >gehostet: Zusammenarbeit · visuelle Bearbeitung · parallele Läufe</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    Gleiche Runtime<br /><small class="diagram-muted"
+      >deine App · Aktionen · Anwendungszustand</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-frames {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+}
+.diagram-frames .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-frames .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## Eingebettetes Agentenfeld {#embedded-agent}
 
 Das eingebettete Panel ist die Agent-Seitenleiste, die Ihre App rendert. Im Lieferumfang ist
@@ -57,13 +99,51 @@ Das Panel läuft in einem von zwei Werkzeugmodi:
   Coding-Tool-Liste und gemeinsame UI-Verträge, siehe
   [Agent-Native Code UI](/docs/code-agents-ui).
 
-```an-diagram title="Code-Anfrage-Gating" summary="Eine codetypisierte Nachricht benötigt einen codefähigen Rahmen. Wenn einer verbunden ist, wird die Anfrage dorthin weitergeleitet. Ohne eins erklärt das Panel, dass Codeänderungen Desktop oder Builder erfordern."
-{
-  "html": "<div class=\"diagram-gate\"><div class=\"diagram-node\" data-rough>message<br><small class=\"diagram-muted\">type: \\\"code\\\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>code-capable frame connected?</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">yes &rarr; route to frame, show code-agent indicator</div><div class=\"diagram-pill warn\">no &rarr; dialog: needs Desktop or Builder</div></div></div>",
-  "css": ".diagram-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-gate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-gate .diagram-arrow{font-size:22px;line-height:1}.diagram-gate .center{text-align:center}"
+<Diagram id="doc-block-he07jv" title="Code-Anfrage-Gating" summary={"Eine codetypisierte Nachricht benötigt einen codefähigen Rahmen. Wenn einer verbunden ist, wird die Anfrage dorthin weitergeleitet. Ohne eins erklärt das Panel, dass Codeänderungen Desktop oder Builder erfordern."}>
+
+```html
+<div class="diagram-gate">
+  <div class="diagram-node" data-rough>
+    message<br /><small class="diagram-muted">type: \"code\"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    code-capable frame connected?
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">
+      yes &rarr; route to frame, show code-agent indicator
+    </div>
+    <div class="diagram-pill warn">
+      no &rarr; dialog: needs Desktop or Builder
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-gate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-gate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-gate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-gate .center {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 „Code-Modus“ ist der Umschalter der Agent-Fähigkeit – anders als der Umgebungsentwicklungsmodus
 (`NODE_ENV` / Vite). Der Client-Hook ist `useCodeMode()`. (Siehe
 [Compatibility notes](#compatibility) für die abwärtskompatiblen Aliase.)

package/docs/content/locales/de-DE/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 Diese eine Aktion ist jetzt über den Chat-Oberfläche, CLI, HTTP, MCP, A2A, erreichbar.
 geplante Jobs und webhooks. Einmal festlegen, von überall aus anrufen.
 
-```an-diagram title="Eine Aktion, jede Oberfläche" summary="Eine einzelne defineAction-Datei wird ohne zusätzliche Verkabelung an jeden Verbraucher verteilt."
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">Chat-Oberfläche</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">Geplante Jobs</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-lkqelv" title={"Eine Aktion, jede Oberfläche"} summary={"Eine einzelne defineAction-Datei wird ohne zusätzliche Verkabelung an jeden Verbraucher verteilt."}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">Chat-Oberfläche</span
+    ><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
+    ><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">Geplante Jobs</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Status ist integriert
 
 Kopflos bedeutet nicht staatenlos. Actions, Sitzungen, Anwendungsstatus, Threads,

package/docs/content/locales/de-DE/harness-agents.mdx

@@ -23,13 +23,54 @@ unter `runAgentLoop`. Ein Kabelbaum ist kein `AgentEngine`-Anbieter – er betre
 Eigene End-to-End-Schleife, daher fährt Agent-Native sie als Sitzung und nicht als einzelne
 Modellaufruf.
 
-```an-diagram title="Ein Geschirr besitzt seine Schlaufe; Agent-Native steuert die Sitzung" summary="Das AgentHarness-Substrat creates/resumes der nativen Sitzung, streamt seine Ereignisse in das normale Transkript und behält zwischen den Runden den resumeState in SQL bei."
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-q2hd5a" title={"Ein Geschirr besitzt seine Schlaufe; Agent-Native steuert die Sitzung"} summary={"Das AgentHarness-Substrat creates/resumes der nativen Sitzung, streamt seine Ereignisse in das normale Transkript und behält zwischen den Runden den resumeState in SQL bei."}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Welches Codierungsdokument möchte ich? {#which-doc}
 
 | Sie möchten…                                                                       | Verwenden                                    |
@@ -213,13 +254,43 @@ damit ein Thread über Runden, Prozesse und Bereitstellungen hinweg überleben k
 ist **undurchsichtig** – Agent-Native speichert es und gibt es zurück, inspiziert es jedoch nie oder
 interpretiert es.
 
-```an-diagram title="Fortsetzen über Runden, Prozesse und Bereitstellungen hinweg" summary="Bei jeder Runde wird ein undurchsichtiger „resumeState“ in SQL abgetrennt; In der nächsten Runde wird es wieder in createSession eingespeist, anstatt den Chatverlauf erneut abzuspielen."
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>Runde N<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">opak · SQL-Harness-Sitzung</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>Runde N+1<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-u53lmj" title={"Fortsetzen über Runden, Prozesse und Bereitstellungen hinweg"} summary={"Bei jeder Runde wird ein undurchsichtiger „resumeState“ in SQL abgetrennt; In der nächsten Runde wird es wieder in createSession eingespeist, anstatt den Chatverlauf erneut abzuspielen."}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    Runde N<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >opak · SQL-Harness-Sitzung</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    Runde N+1<br /><small class="diagram-muted"
+      >createSession.resumeState</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/docs/content/locales/de-DE/human-approval.mdx

@@ -80,13 +80,59 @@ Auf `approval_required` rendert der Chat-Oberfläche ein **Genehmigen/Verweigern
 
 ## End-to-End {#flow}
 
-```an-diagram title="Die Genehmigungsunterbrechung" summary="Ein Gated-Aufruf unterbricht die Runde, bevor run() ausgelöst wird. Die Genehmigung erteilt demjenigen, der den Schlüssel des Anrufs trägt, erneut eine Genehmigung. Erst dann tritt die Nebenwirkung ein."
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>Agent ruft send-email auf</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gate ist truthy, Aufruf noch nicht genehmigt</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Mensch klickt im Chat auf Genehmigen<br><small class=\"diagram-muted\">Client sendet den Turn erneut mit approvedToolCalls: [approvalKey]</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-mq9lv" title="Die Genehmigungsunterbrechung" summary={"Ein Gated-Aufruf unterbricht die Runde, bevor run() ausgelöst wird. Die Genehmigung erteilt demjenigen, der den Schlüssel des Anrufs trägt, erneut eine Genehmigung. Erst dann tritt die Nebenwirkung ein."}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>Agent ruft send-email auf</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gate ist truthy, Aufruf noch nicht genehmigt</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    Mensch klickt im Chat auf Genehmigen<br /><small class="diagram-muted"
+      >Client sendet den Turn erneut mit approvedToolCalls: [approvalKey]</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Die kanonische (und absichtlich seltene) Verwendung dieses Gates im Framework ist die Aktion `send-email` der Mail-Vorlage, die `needsApproval: true` so festlegt, dass der Agent frei verfassen und in die Warteschlange stellen kann, aber niemals tatsächlich eine Nachricht senden kann, ohne dass ein Mensch den spezifischen Versand genehmigt.
 
 ## Verwandt

package/docs/content/locales/de-DE/key-concepts.mdx

@@ -17,13 +17,67 @@ Bei jeder agentennativen App arbeiten drei Dinge zusammen:
 >
 > **Computer** – Datenbank, Browser, Codeausführung. Agenten arbeiten direkt mit SQL und integrierten Tools; MCP-Server sind optionale Add-Ons, nicht die Grundlage.
 
-```an-diagram title="Agent, Anwendung und Computer" summary="Drei Ebenen arbeiten über einen gemeinsamen SQL-Speicher zusammen. Der Agent und die Anwendung lesen und schreiben dieselben Daten."
-{
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">liest und schreibt Daten, führt Actions aus, ändert Code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React-UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQL-Datenbank · browser · code execution</small></div></div>",
-  "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
+<Diagram id="doc-block-1lep3dk" title="Agent, Anwendung und Computer" summary={"Drei Ebenen arbeiten über einen gemeinsamen SQL-Speicher zusammen. Der Agent und die Anwendung lesen und schreiben dieselben Daten."}>
+
+```html
+<div class="diagram-arch">
+  <div class="diagram-row">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Agent</span
+      ><small class="diagram-muted"
+        >liest und schreibt Daten, führt Actions aus, ändert Code</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >action-only, chat, control plane, or full React-UI</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">
+    &darr;&nbsp;&uarr;
+  </div>
+  <div class="diagram-box" data-rough>
+    Computer<br /><small class="diagram-muted"
+      >SQL-Datenbank · browser · code execution</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-arch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-arch .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-arch .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 220px;
+}
+.diagram-arch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-arch .diagram-box {
+  text-align: center;
+  padding: 12px 18px;
 }
 ```
 
+</Diagram>
+
 Headless-Apps können mit `pnpm agent` dieselbe Produktions-App-Agent-Schleife aus dem Ordner ausführen, während UI-Apps das eingebettete Agent-Panel bereitstellen und lokal mit `pnpm dev` ausführen. In der Cloud bietet Builder.io einen verwalteten Rahmen – die Umgebung, die den Agenten neben Ihrer App hostet – mit Zusammenarbeit, visueller Bearbeitung und verwalteter Infrastruktur für Teams.
 
 ## Agent-Bausteine {#agent-building-blocks}
@@ -273,13 +327,55 @@ Der Ablauf ist:
 4. `useActionQuery`-Hooks und quellversionierte `useQuery`-Hooks werden erneut abgerufen
 5. Komponenten rendern die neuen Daten, ohne dass die Seite neu geladen werden muss
 
-```an-diagram title="Live-Synchronisierungsfluss" summary="Ein Agent-Schreibvorgang wird zu einem UI-Rendering ohne manuelle Aktualisierung – zuerst SSE, Polling als universeller Fallback."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Agentenaktion<br><small class=\"diagram-muted\">schreibt in die DB</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Änderungsereignis<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Query erneut laden<br><small class=\"diagram-muted\">rendern, kein Neuladen</small></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"
+<Diagram id="doc-block-1xjrmye" title="Live-Synchronisierungsfluss" summary={"Ein Agent-Schreibvorgang wird zu einem UI-Rendering ohne manuelle Aktualisierung – zuerst SSE, Polling als universeller Fallback."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    Agentenaktion<br /><small class="diagram-muted">schreibt in die DB</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Änderungsereignis<br /><small class="diagram-muted"
+      >source: action / settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">useDbSync</span
+    ><small class="diagram-muted">SSE &middot; poll fallback</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Query erneut laden<br /><small class="diagram-muted"
+      >rendern, kein Neuladen</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-sync .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
 }
 ```
 
+</Diagram>
+
 Dies funktioniert in allen Bereitstellungsumgebungen – einschließlich serverloser und Edge-Umgebungen –, da die Datenbank und nicht In-Memory-Status- oder Dateisystem-Watcher verwendet werden.
 
 ## Frames {#frames}

package/docs/content/locales/de-DE/local-file-mode.mdx

@@ -46,13 +46,67 @@ UI und Agentenaktionen sollten in beiden Modi die gleiche Form behalten. Ein Inh
 Editor bearbeitet weiterhin Dokumente; Der Unterschied besteht darin, ob diese Dokumente aufgelöst werden
 in SQL Zeilen oder lokale Dateien.
 
-```an-diagram title="Gleiche Handlungen, zwei Quellen der Wahrheit" summary="Die Benutzeroberfläche und der Agent rufen in beiden Modi identische Aktionen auf. Die Aktionsschicht entscheidet, ob jeder Aufruf in SQL-Zeilen oder Repo-Dateien aufgelöst wird."
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">Content-UI</div><div class=\"diagram-node\">Agent + Actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">Datenbankmodus</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">gehostet · Teilen · Kommentare · Verlauf</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Git-Review · Coding-Agent-Edits</small></div></div></div>",
-  "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-hrf5ek" title="Gleiche Handlungen, zwei Quellen der Wahrheit" summary={"Die Benutzeroberfläche und der Agent rufen in beiden Modi identische Aktionen auf. Die Aktionsschicht entscheidet, ob jeder Aufruf in SQL-Zeilen oder Repo-Dateien aufgelöst wird."}>
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">Content-UI</div>
+    <div class="diagram-node">
+      Agent + Actions<br /><small class="diagram-muted"
+        >list/get/update-document</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-row resolve">
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill accent">Datenbankmodus</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted"
+        >gehostet · Teilen · Kommentare · Verlauf</small
+      >
+    </div>
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill ok">Local File Mode</span
+      ><small class="diagram-muted">repo files via agent-native.json</small
+      ><small class="diagram-muted">Git-Review · Coding-Agent-Edits</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mode .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-mode .resolve {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ## Beispiel-Repo
 
 Ein Inhaltsarbeitsbereich kann so klein sein: