@agent-native/core 0.79.25 → 0.79.27

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

@@ -7,13 +7,61 @@ description: "Verbinden Sie eine portable SQL-Datenbank mit Ihrer agentennativen
 
 Agent-native Apps verwenden [Drizzle ORM](https://orm.drizzle.team) und unterstützen portable SQL-Backends. Für alles, was über die lokale Entwicklung hinausgeht, verbinden Sie eine persistente SQL-Datenbank – Postgres, libSQL/Turso oder ein anderes Drizzle-kompatibles Backend – indem Sie `DATABASE_URL` festlegen. Wenn diese Variable nicht gesetzt ist, greift die App auf eine lokale SQLite-Datei ohne Konfiguration zurück, sodass Sie sofort mit der Entwicklung beginnen können.
 
-```an-diagram title="Ein Schema, viele Backends" summary="App-Code verwendet die dialektunabhängigen Helfer des Frameworks. Der Dialekt wird zur Laufzeit automatisch von DATABASE_URL erkannt; unset bedeutet eine lokale SQLite-Datei."
-{
-  "html": "<div class=\"diagram-db\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">@agent-native/core/db/schema</span><small class=\"diagram-muted\">table · text · integer · real · now</small><small class=\"diagram-muted\">+ Drizzle query DSL</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>DATABASE_URL<br><small class=\"diagram-muted\">dialect auto-detected</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Postgres<br><small class=\"diagram-muted\">Neon · Supabase</small></span><span class=\"diagram-pill\">libSQL / Turso</span><span class=\"diagram-pill\">Cloudflare D1</span><span class=\"diagram-pill warn\">SQLite file<br><small class=\"diagram-muted\">unset = local dev only</small></span></div></div>",
-  "css": ".diagram-db{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-db .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-db .diagram-arrow{font-size:22px;line-height:1}.diagram-db .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-192eiee" title="Ein Schema, viele Backends" summary={"App-Code verwendet die dialektunabhängigen Helfer des Frameworks. Der Dialekt wird zur Laufzeit automatisch von DATABASE_URL erkannt; unset bedeutet eine lokale SQLite-Datei."}>
+
+```html
+<div class="diagram-db">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">@agent-native/core/db/schema</span
+    ><small class="diagram-muted">table · text · integer · real · now</small
+    ><small class="diagram-muted">+ Drizzle query DSL</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    DATABASE_URL<br /><small class="diagram-muted">dialect auto-detected</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill"
+      >Postgres<br /><small class="diagram-muted">Neon · Supabase</small></span
+    ><span class="diagram-pill">libSQL / Turso</span
+    ><span class="diagram-pill">Cloudflare D1</span
+    ><span class="diagram-pill warn"
+      >SQLite file<br /><small class="diagram-muted"
+        >unset = local dev only</small
+      ></span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-db {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-db .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-db .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-db .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 ## Lokaler Standard: SQLite-Datei {#default-sqlite}
 
 Wenn `DATABASE_URL` nicht festgelegt ist, erstellt die App eine SQLite-Datenbank unter `data/app.db`. Dies ist die Zero-Config-Standardeinstellung für die lokale Entwicklung – keine Einrichtung erforderlich. Es ist nur für die Entwicklung gedacht; Legen Sie für die Produktion `DATABASE_URL` auf eine persistente SQL-Datenbank fest.

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

@@ -28,13 +28,60 @@ npx @agent-native/core@latest deploy
 
 Jede App wird mit `APP_BASE_PATH=/<name>` und `VITE_APP_BASE_PATH=/<name>` erstellt und dann für die Zielvoreinstellung Nitro gepackt. Cloudflare Pages ist die Standardvoreinstellung und verwendet einen generierten Dispatcher-Worker unter `dist/_worker.js`; Netlify verwendet eine Funktion pro App in `.netlify/functions-internal/<app>-server` plus generierte Weiterleitungen; Vercel schreibt mithilfe der Build-Ausgabe API einen `.vercel/output` auf Arbeitsbereichsebene.
 
-```an-diagram title="Ein Ursprung, viele Apps" summary="Jede Workspace-App wird mit einem eigenen Basispfad erstellt und unter einem Pfadpräfix auf einem einzigen Ursprung bereitgestellt – Anmeldung und anwendungsübergreifendes A2A sind also vom gleichen Ursprung und kostenlos."
-{
-  "html": "<div class=\"diagram-ws\"><div class=\"diagram-panel\" data-rough><strong>https://your-agents.com</strong><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/mail/*</span><small class=\"diagram-muted\">apps/mail</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/calendar/*</span><small class=\"diagram-muted\">apps/calendar</small></div><div class=\"diagram-row\"><span class=\"diagram-pill accent\">/forms/*</span><small class=\"diagram-muted\">apps/forms</small></div></div><div class=\"diagram-col wins\"><span class=\"diagram-pill ok\">shared login session</span><span class=\"diagram-pill ok\">Zero-Config-A2A zwischen Apps</span></div></div>",
-  "css": ".diagram-ws{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-ws .diagram-panel{display:flex;flex-direction:column;gap:6px;padding:14px 16px}.diagram-ws .diagram-row{display:flex;align-items:center;gap:8px}.diagram-ws .wins{display:flex;flex-direction:column;gap:8px;align-items:flex-start}"
+<Diagram id="doc-block-wpj2ad" title="Ein Ursprung, viele Apps" summary={"Jede Workspace-App wird mit einem eigenen Basispfad erstellt und unter einem Pfadpräfix auf einem einzigen Ursprung bereitgestellt – Anmeldung und anwendungsübergreifendes A2A sind also vom gleichen Ursprung und kostenlos."}>
+
+```html
+<div class="diagram-ws">
+  <div class="diagram-panel" data-rough>
+    <strong>https://your-agents.com</strong>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/mail/*</span
+      ><small class="diagram-muted">apps/mail</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/calendar/*</span
+      ><small class="diagram-muted">apps/calendar</small>
+    </div>
+    <div class="diagram-row">
+      <span class="diagram-pill accent">/forms/*</span
+      ><small class="diagram-muted">apps/forms</small>
+    </div>
+  </div>
+  <div class="diagram-col wins">
+    <span class="diagram-pill ok">shared login session</span
+    ><span class="diagram-pill ok">Zero-Config-A2A zwischen Apps</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-ws {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-ws .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+}
+.diagram-ws .diagram-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-ws .wins {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
 }
 ```
 
+</Diagram>
+
 Mit der Same-Origin-Bereitstellung erhalten Sie zwei große Gewinne kostenlos:
 
 - **Gemeinsame Anmeldesitzung** – Melden Sie sich bei jeder App an, jede App ist angemeldet.
@@ -95,13 +142,61 @@ Wenn Sie `npx @agent-native/core@latest build` ausführen, erstellt Nitro sowohl
 
 Die Ausgabe ist in sich geschlossen – kopieren Sie `.output/` in eine beliebige Umgebung und führen Sie sie aus.
 
-```an-diagram title="Zum Bereitstellen erstellen" summary="Ein Quellbaum wird nach einer Nitro-Voreinstellung erstellt; Dieselbe eigenständige Ausgabe läuft auf Node, Vercel, Netlify, Cloudflare, AWS oder Deno. Jede Instanz zeigt auf denselben persistenten DATABASE_URL."
-{
-  "html": "<div class=\"diagram-deploy\"><div class=\"diagram-box\" data-rough>App-Quelle</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">build</span><small class=\"diagram-muted\">Nitro preset</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><span class=\"diagram-pill\">Node.js</span><span class=\"diagram-pill\">Vercel</span><span class=\"diagram-pill\">Netlify</span><span class=\"diagram-pill\">Cloudflare</span><span class=\"diagram-pill\">AWS Lambda</span><span class=\"diagram-pill\">Deno</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Persistente DATABASE_URL<br><small class=\"diagram-muted\">shared by every instance</small></div></div>",
-  "css": ".diagram-deploy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-deploy .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-deploy .diagram-arrow{font-size:22px;line-height:1}.diagram-deploy .diagram-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-1roxbh9" title="Zum Bereitstellen erstellen" summary={"Ein Quellbaum wird nach einer Nitro-Voreinstellung erstellt; Dieselbe eigenständige Ausgabe läuft auf Node, Vercel, Netlify, Cloudflare, AWS oder Deno. Jede Instanz zeigt auf denselben persistenten DATABASE_URL."}>
+
+```html
+<div class="diagram-deploy">
+  <div class="diagram-box" data-rough>App-Quelle</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">build</span
+    ><small class="diagram-muted">Nitro preset</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <span class="diagram-pill">Node.js</span
+    ><span class="diagram-pill">Vercel</span
+    ><span class="diagram-pill">Netlify</span
+    ><span class="diagram-pill">Cloudflare</span
+    ><span class="diagram-pill">AWS Lambda</span
+    ><span class="diagram-pill">Deno</span>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Persistente DATABASE_URL<br /><small class="diagram-muted"
+      >shared by every instance</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-deploy {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-deploy .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-deploy .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-deploy .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 ## Voreinstellung festlegen {#setting-the-preset}
 
 Standardmäßig erstellt Nitro für Node.js. Um eine andere Plattform anzusprechen, legen Sie die Voreinstellung in Ihrem `vite.config.ts` fest:

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

@@ -11,13 +11,66 @@ Dispatch ist die zentrale App, die sich vor jeder anderen App in Ihrem Arbeitsbe
 
 Ohne Dispatch implementiert jede App in einem Multi-App-Arbeitsbereich letztendlich die gleichen Installationen neu: ihren eigenen Slack-Bot, ihren eigenen Geheimspeicher, ihre eigenen geplanten Jobs, ihre eigene Kopie der Anweisungen des Arbeitsbereichs. Das Drehen eines API-Schlüssels führt zu zehn Neubereitstellungen. Das Hinzufügen einer neuen Richtlinie erfordert zehn Kopier- und Einfügevorgänge. Dispatch zentralisiert all das in einer App, sodass sich die anderen auf ihre Domain konzentrieren können.
 
-```an-diagram title="Dispatch als Arbeitsbereichssteuerungsebene" summary="Ein Posteingang, ein Tresor, ein MCP-Gateway und gemeinsam genutzte Ressourcen befinden sich vor den Domänen-Apps, die Dispatch als A2A-Peers erreichen."
-{
-  "html": "<div class=\"dsp-hub\"><div class=\"diagram-node\">Users &amp; external agents<br><small class=\"diagram-muted\">Slack · E-Mail · Telegram · WhatsApp · MCP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel dsp-control\" data-rough><span class=\"diagram-pill accent\">Dispatch &mdash; control plane</span><div class=\"dsp-caps\"><span class=\"diagram-pill\">Zentraler Posteingang</span><span class=\"diagram-pill\">Secret-Tresor</span><span class=\"diagram-pill\">App-übergreifende Delegation</span><span class=\"diagram-pill\">MCP gateway</span><span class=\"diagram-pill\">Workspace-Ressourcen</span></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"dsp-peers\"><div class=\"diagram-box\" data-rough>Mail</div><div class=\"diagram-box\" data-rough>Calendar</div><div class=\"diagram-box\" data-rough>Analytics</div></div><small class=\"diagram-muted\">domain apps &mdash; A2A peers</small></div>",
-  "css": ".dsp-hub{display:flex;flex-direction:column;align-items:center;gap:10px}.dsp-hub .dsp-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dsp-hub .dsp-caps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.dsp-hub .dsp-peers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}"
+<Diagram id="doc-block-10yxq2x" title="Dispatch als Arbeitsbereichssteuerungsebene" summary={"Ein Posteingang, ein Tresor, ein MCP-Gateway und gemeinsam genutzte Ressourcen befinden sich vor den Domänen-Apps, die Dispatch als A2A-Peers erreichen."}>
+
+```html
+<div class="dsp-hub">
+  <div class="diagram-node">
+    Users &amp; external agents<br /><small class="diagram-muted"
+      >Slack · E-Mail · Telegram · WhatsApp · MCP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel dsp-control" data-rough>
+    <span class="diagram-pill accent">Dispatch &mdash; control plane</span>
+    <div class="dsp-caps">
+      <span class="diagram-pill">Zentraler Posteingang</span
+      ><span class="diagram-pill">Secret-Tresor</span
+      ><span class="diagram-pill">App-übergreifende Delegation</span
+      ><span class="diagram-pill">MCP gateway</span
+      ><span class="diagram-pill">Workspace-Ressourcen</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="dsp-peers">
+    <div class="diagram-box" data-rough>Mail</div>
+    <div class="diagram-box" data-rough>Calendar</div>
+    <div class="diagram-box" data-rough>Analytics</div>
+  </div>
+  <small class="diagram-muted">domain apps &mdash; A2A peers</small>
+</div>
+```
+
+```css
+.dsp-hub {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.dsp-hub .dsp-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+.dsp-hub .dsp-caps {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dsp-hub .dsp-peers {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 ```
 
+</Diagram>
+
 ## Wenn Sie den Versand wünschen {#when}
 
 Reach for Dispatch, wenn einer dieser Punkte zutrifft:
@@ -108,13 +161,86 @@ Gehen Sie ein Beispiel Ende-zu-Ende durch. Ein Benutzer schickt dem Bot eine DM:
 4. **Antwort im Thread gepostet.** Der Analyseagent gibt ein Ergebnis zurück. Dispatch formatiert es und sendet es zurück in denselben Slack-Thread, in den der Benutzer geschrieben hat, und verwendet dabei die verknüpfte Identität, falls vorhanden (der Agent handelt also mit den Berechtigungen des Anforderers, nicht mit denen des Arbeitsbereichsbesitzers).
 5. **Wiederherstellung, wenn etwas ausfällt.** Wenn der Prozessor mitten im Flug abstürzt – A2A-Timeout, Downstream-Agent-Fehler, Funktionseinfrierung – durchsucht ein Wiederholungsjob alle 60 Sekunden festsitzende Aufgaben und startet den Prozessor erneut. Bis zu drei Versuche, bevor die Aufgabe mit `failed` markiert wird.
 
-```an-diagram title="Eine Slack-Nachricht über Dispatch" summary="Slack wird in SQL eingereiht, eine neue Ausführung entleert es, der Dispatch-Agent delegiert die Domänenarbeit über A2A und die Antwort landet wieder im ursprünglichen Thread. Ein 60-sekündiger Wiederholungsjob stellt alles wieder her, was während des Flugs abstürzt."
-{
-  "html": "<div class=\"dsp-flow\"><div class=\"dsp-row\"><div class=\"diagram-node\">Slack-DM<br><small class=\"diagram-muted\">\"summarize last week's signups\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><strong>/slack/webhook</strong><br><small class=\"diagram-muted\">prüfen + ausstehenden Task INSERTen</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">200</div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough><strong>fresh processor</strong><br><small class=\"diagram-muted\">Task übernehmen · Agent-Schleife starten</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">Dispatch-Agent entscheidet</span><small class=\"diagram-muted\">analytics intent &rarr; call-agent</small></div></div><div class=\"dsp-row\"><div class=\"diagram-box\" data-rough>Analytics-App<br><small class=\"diagram-muted\">A2A-Peer · führt SQL-Arbeit aus</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">reply posted in thread</div></div><div class=\"diagram-panel dsp-retry\" data-rough><span class=\"diagram-pill warn\">recovery</span> <span class=\"diagram-muted\">if the processor crashes &mdash; A2A timeout, downstream error, freeze &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply still arrives</span> <span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</span></div></div>",
-  "css": ".dsp-flow{display:flex;flex-direction:column;gap:12px}.dsp-flow .dsp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dsp-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.dsp-flow .dsp-retry{display:flex;align-items:center;gap:8px;flex-wrap:wrap}"
+<Diagram id="doc-block-1b84or3" title={"Eine Slack-Nachricht über Dispatch"} summary={"Slack wird in SQL eingereiht, eine neue Ausführung entleert es, der Dispatch-Agent delegiert die Domänenarbeit über A2A und die Antwort landet wieder im ursprünglichen Thread. Ein 60-sekündiger Wiederholungsjob stellt alles wieder her, was während des Flugs abstürzt."}>
+
+```html
+<div class="dsp-flow">
+  <div class="dsp-row">
+    <div class="diagram-node">
+      Slack-DM<br /><small class="diagram-muted"
+        >"summarize last week's signups"</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>
+      <strong>/slack/webhook</strong><br /><small class="diagram-muted"
+        >prüfen + ausstehenden Task INSERTen</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">200</div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      <strong>fresh processor</strong><br /><small class="diagram-muted"
+        >Task übernehmen · Agent-Schleife starten</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-panel center" data-rough>
+      <span class="diagram-pill accent">Dispatch-Agent entscheidet</span
+      ><small class="diagram-muted">analytics intent &rarr; call-agent</small>
+    </div>
+  </div>
+  <div class="dsp-row">
+    <div class="diagram-box" data-rough>
+      Analytics-App<br /><small class="diagram-muted"
+        >A2A-Peer · führt SQL-Arbeit aus</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill ok">reply posted in thread</div>
+  </div>
+  <div class="diagram-panel dsp-retry" data-rough>
+    <span class="diagram-pill warn">recovery</span>
+    <span class="diagram-muted"
+      >if the processor crashes &mdash; A2A timeout, downstream error, freeze
+      &mdash; the 60s retry job re-fires it (&le;3 attempts) so the Slack reply
+      still arrives</span
+    >
+    <span class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</span>
+  </div>
+</div>
+```
+
+```css
+.dsp-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.dsp-flow .dsp-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.dsp-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.dsp-flow .dsp-retry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 ```
 
+</Diagram>
+
 Der gleiche Ablauf gilt für E-Mail, Telegram und WhatsApp – nur der Adapter ändert sich.
 
 ## Zuverlässigkeitsgeschichte {#reliability}

package/corpus/core/docs/content/locales/de-DE/drop-in-agent.mdx

@@ -27,13 +27,72 @@ Sie müssen den Agent-nativen Ansatz nicht von Grund auf neu erstellen. Der Agen
 
 Alle diese werden aus `@agent-native/core/client` exportiert.
 
-```an-diagram title="Das Montierungsmodell" summary="<AgentSidebar> umschließt Ihr vorhandenes Layout. Ihre Routen werden im Hauptbereich gerendert; Das Agentenpanel wird daneben montiert. <AgentPanel> ist das gleiche Panel ohne den Verpackung."
-{
-  "html": "<div class=\"diagram-mount\"><div class=\"diagram-box sidebar\" data-rough><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><div class=\"inner\"><div class=\"diagram-node main\">Ihre App<br><small class=\"diagram-muted\">children: header + &lt;Outlet/&gt;</small></div><div class=\"diagram-node panel\">Agentenbereich<br><small class=\"diagram-muted\">chat &middot; CLI &middot; workspace</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card alt\"><span class=\"diagram-pill\">&lt;AgentPanel&gt;</span><small class=\"diagram-muted\">same panel, no wrapper &mdash; you own the layout</small></div></div>",
-  "css": ".diagram-mount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mount .sidebar{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-mount .inner{display:flex;gap:10px}.diagram-mount .main{flex:2}.diagram-mount .panel{flex:1}.diagram-mount .alt{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-mount .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-rnajys" title="Das Montierungsmodell" summary={"<AgentSidebar> umschließt Ihr vorhandenes Layout. Ihre Routen werden im Hauptbereich gerendert; Das Agentenpanel wird daneben montiert. <AgentPanel> ist das gleiche Panel ohne den Verpackung."}>
+
+```html
+<div class="diagram-mount">
+  <div class="diagram-box sidebar" data-rough>
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span>
+    <div class="inner">
+      <div class="diagram-node main">
+        Ihre App<br /><small class="diagram-muted"
+          >children: header + &lt;Outlet/&gt;</small
+        >
+      </div>
+      <div class="diagram-node panel">
+        Agentenbereich<br /><small class="diagram-muted"
+          >chat &middot; CLI &middot; workspace</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card alt">
+    <span class="diagram-pill">&lt;AgentPanel&gt;</span
+    ><small class="diagram-muted"
+      >same panel, no wrapper &mdash; you own the layout</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mount {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mount .sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-mount .inner {
+  display: flex;
+  gap: 10px;
+}
+.diagram-mount .main {
+  flex: 2;
+}
+.diagram-mount .panel {
+  flex: 1;
+}
+.diagram-mount .alt {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-mount .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Der 80 %-Fall: `<AgentSidebar>` {#sidebar}
 
 Das häufigste Setup ist eine Seitenleiste, die auf jedem Bildschirm von rechts geöffnet wird.

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

@@ -13,13 +13,56 @@ Gehostete Agentenausführungen werden unterbrochen: Eine serverlose Funktion err
 
 Dauerhafter Lebenslauf schließt diese Lücke. Beim Fortsetzen weiß das Framework, welche Toolaufrufe mit Nebeneffekten bereits abgeschlossen sind, und weigert sich, sie erneut auszuführen – und zwar auf zwei Ebenen.
 
-```an-diagram title="Zwei Ebenen blockieren doppelte Nebenwirkungen im Lebenslauf" summary="Das Journal liest das dauerhafte Hauptbuch und klassifiziert frühere Anrufe; Schicht 1 teilt dem Modell mit, Schicht 2 blockiert einen erneut gesendeten Schreibvorgang, der mit einem abgeschlossenen Eintrag übereinstimmt, hart."
-{
-  "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">Schicht 2 · hart blockierter erneut ausgelöster Schreibvorgang</div></div></div>",
-  "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1fcax1u" title="Zwei Ebenen blockieren doppelte Nebenwirkungen im Lebenslauf" summary={"Das Journal liest das dauerhafte Hauptbuch und klassifiziert frühere Anrufe; Schicht 1 teilt dem Modell mit, Schicht 2 blockiert einen erneut gesendeten Schreibvorgang, der mit einem abgeschlossenen Eintrag übereinstimmt, hart."}>
+
+```html
+<div class="diagram-durable">
+  <div class="diagram-box" data-rough>
+    Run-event ledger<br /><small class="diagram-muted"
+      >tool_start / tool_done</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Tool-call journal</strong
+    ><small class="diagram-ok">completed = start+done</small
+    ><small class="diagram-warn">interrupted = start, no done</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Layer 1 · prompt note &rarr; model</div>
+    <div class="diagram-pill accent">
+      Schicht 2 · hart blockierter erneut ausgelöster Schreibvorgang
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-durable {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-durable .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-durable .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-durable .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Das Tool-Call-Journal {#journal}
 
 Das Journal ist ein **reiner Lesevorgang über das dauerhafte Run-Event-Ledger** – es gibt keinen neuen Aufzeichnungs-Hook im Hot-Pfad. Es klassifiziert die bereits für die aktuelle Runde aufgezeichneten Werkzeugaufrufe:

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

@@ -11,13 +11,58 @@ wird bereits verwendet. Wenn Sie sich immer noch zwischen Headless-Agenten, Rich
 Eingebetteter Sidecar oder eine vollständige App, beginnen Sie mit
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="Die Einbettungsmembran" summary="Die Host-App stellt serverseitige Authentifizierung und Live-Seitenkontext bereit; Agent-Native führt den dauerhaften Sidecar aus und erreicht die geöffnete Registerkarte über Client-Aktionen und Host-Befehle."
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>Host-SaaS-App</strong><small class=\"diagram-muted\">deine UI, deine Authentifizierung</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; Client-Aktionen</div><div class=\"diagram-pill\">&larr; Host-Befehle</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">dauerhafter Chat · App-Zustand · Erweiterungen</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">Framework-Tabellen</small></div></div>",
-  "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-yc9g1s" title="Die Einbettungsmembran" summary={"Die Host-App stellt serverseitige Authentifizierung und Live-Seitenkontext bereit; Agent-Native führt den dauerhaften Sidecar aus und erreicht die geöffnete Registerkarte über Client-Aktionen und Host-Befehle."}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-box" data-rough>
+    <strong>Host-SaaS-App</strong
+    ><small class="diagram-muted">deine UI, deine Authentifizierung</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">getContext &rarr;</div>
+    <div class="diagram-pill">&larr; Client-Aktionen</div>
+    <div class="diagram-pill">&larr; Host-Befehle</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Agent-Native sidecar</strong
+    ><small class="diagram-muted"
+      >dauerhafter Chat · App-Zustand · Erweiterungen</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL<br /><small class="diagram-muted">Framework-Tabellen</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Hier beginnen: das im Lieferumfang enthaltene Plugin {#batteries-included}
 
 Für die meisten SaaS-Hosts **verwenden Sie die vollständige eingebettete Laufzeit** – das Server-Plugin
@@ -373,13 +418,45 @@ const hostTools = createAgentNativeHostTools({
 
 Für einen Kollegen im CLAW-Stil kann der Iframe auch seinen Live-Browser-Tab beim Sidecar-Backend registrieren. Der Agent erhält dann normale Backend-Tools, die eine Anfrage in die Warteschlange stellen, der Iframe beansprucht sie, die Hostseite führt sie aus und das Backend gibt das Ergebnis an den Agenten zurück.
 
-```an-diagram title="Serververmittelte Browser-Sitzungsbrücke" summary="Ein Backend-Tool stellt Arbeit in die Warteschlange. Der registrierte Tab beansprucht es, führt es auf der Live-Seite aus und das Ergebnis wird an den Agenten zurückgegeben – sodass ein backend/Slack/A2A-Agent weiterhin auf den geöffneten Tab zugreifen kann."
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>Backend-Agent<br><small class=\"diagram-muted\">Chat · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>Live-Tab beansprucht es<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
-  "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-jhv307" title={"Serververmittelte Browser-Sitzungsbrücke"} summary={"Ein Backend-Tool stellt Arbeit in die Warteschlange. Der registrierte Tab beansprucht es, führt es auf der Live-Seite aus und das Ergebnis wird an den Agenten zurückgegeben – sodass ein backend/Slack/A2A-Agent weiterhin auf den geöffneten Tab zugreifen kann."}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-node" data-rough>
+    Backend-Agent<br /><small class="diagram-muted">Chat · Slack · A2A</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    enqueue request<br /><small class="diagram-muted"
+      >/_agent-native/browser-sessions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    Live-Tab beansprucht es<br /><small class="diagram-muted"
+      >registered bridge</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">result &rarr; agent</div>
+</div>
+```
+
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Starten Sie in der Sidecar-App die Browser-Session-Bridge einmal, wenn der Iframe gemountet wird:
 
 ```tsx