@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/de-DE/template-mail.mdx

@@ -18,13 +18,69 @@ Ein agentengesteuerter E-Mail-Client. Verknüpfen Sie Ihr Gmail-Konto und der Ag
 
 Wenn Sie die App öffnen, bleiben der Posteingang und die Thread-Ansicht mit der Tastatureingabe auf die E-Mail selbst fokussiert. Der Agent weiß immer, in welcher Ansicht Sie sich befinden und welchen Thread Sie geöffnet haben, sodass Sie „Archivieren“ oder „Einvernehmliche Ablehnung verfassen“ sagen können, ohne zu erklären, was „Das“ ist.
 
-```an-diagram title="Wie eine E-Mail-Anfrage abläuft" summary="Tastaturkürzel und Agentenaufforderungen führen dieselben Aktionen aus. E-Mail lebt in Gmail; Entwürfe, Automatisierungen und Nachverfolgung live in SQL und application_state."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Sie steuern<br><small class=\"diagram-muted\">J/K/E/R-Tastenkürzel</small></div><div class=\"diagram-node\">Sie fragen den Agenten<br><small class=\"diagram-muted\">\"eine freundliche Absage entwerfen\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">mehrere Konten, über OAuth</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">Entwürfe · Automatisierungen · Tracking</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Posteingang aktualisiert sich live</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-o2xbcu" title={"Wie eine E-Mail-Anfrage abläuft"} summary={"Tastaturkürzel und Agentenaufforderungen führen dieselben Aktionen aus. E-Mail lebt in Gmail; Entwürfe, Automatisierungen und Nachverfolgung live in SQL und application_state."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Sie steuern<br /><small class="diagram-muted">J/K/E/R-Tastenkürzel</small>
+    </div>
+    <div class="diagram-node">
+      Sie fragen den Agenten<br /><small class="diagram-muted"
+        >"eine freundliche Absage entwerfen"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">mehrere Konten, über OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >Entwürfe · Automatisierungen · Tracking</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">Posteingang aktualisiert sich live</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Was Sie damit machen können
 
 - **E-Mails lesen und sortieren** mit Tastenkombinationen (`J`/`K` zum Verschieben, `E` zum Archivieren, `R` zum Antworten, `C` zum Verfassen).

package/docs/content/locales/de-DE/template-plan.mdx

@@ -23,13 +23,72 @@ commit, branch oder git diff – in eine visuelle Codeüberprüfung aus großer
 die gleiche Überprüfungsoberfläche, sodass Sie Anmerkungen machen, Kommentare abgeben und Feedback an die
 Agent auf die gleiche Weise.
 
-```an-diagram title="Zwei Befehle, eine Überprüfungsoberfläche" summary="Beide Befehle veröffentlichen über den gehosteten Plan MCP-Connector in derselben Anmerkungs- und Kommentaroberfläche."
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">vor dem Code: Architektur, UI, Refactor</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">nach dem Code: PR, Commit, Branch, Diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">Plan MCP-Connector<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Review-Oberflaeche<br><small class=\"diagram-muted\">Diagramme · Wireframes · annotierter Code · Kommentare</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">Coding Agent<br><small class=\"diagram-muted\">Feedback zurueckgegeben</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-176dlsp" title={"Zwei Befehle, eine Überprüfungsoberfläche"} summary={"Beide Befehle veröffentlichen über den gehosteten Plan MCP-Connector in derselben Anmerkungs- und Kommentaroberfläche."}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted"
+        >vor dem Code: Architektur, UI, Refactor</small
+      >
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted"
+        >nach dem Code: PR, Commit, Branch, Diff</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    Plan MCP-Connector<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Review-Oberflaeche<br /><small class="diagram-muted"
+      >Diagramme · Wireframes · annotierter Code · Kommentare</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    Coding Agent<br /><small class="diagram-muted"
+      >Feedback zurueckgegeben</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-13e4f0r">
   <Screen
     surface="desktop"

package/docs/content/locales/de-DE/template-slides.mdx

@@ -18,13 +18,58 @@ Generieren Sie vollständige Präsentationsdecks aus einer Eingabeaufforderung,
 
 Wenn Sie ein Deck öffnen, bleiben die Folienleinwand, die Gliederung, die Notizen und der Filmstreifen auf einer Editoroberfläche, während der Agent weiterhin Folien erstellen, überarbeiten und durch actions navigieren kann.
 
-```an-diagram title="Aufforderung zum Deck" summary="Fragen Sie nach einem Deck, und der Agent streamt Folien nacheinander durch die gleichen Aktionen, die Sie vom CLI aus aufrufen könnten."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">wählt Layouts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">parallel, streamend</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Editor rendert live</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1jzmhxo" title="Aufforderung zum Deck" summary={"Fragen Sie nach einem Deck, und der Agent streamt Folien nacheinander durch die gleichen Aktionen, die Sie vom CLI aus aufrufen könnten."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    Prompt<br /><small class="diagram-muted">"10-slide pitch deck"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">wählt Layouts</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">parallel, streamend</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">Editor rendert live</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Was Sie damit machen können
 
 - **Decks aus einer Eingabeaufforderung generieren.** „Erstellen Sie ein 10-Folien-Pitch-Deck für einen Kaffeeabonnementdienst. Zielgruppe sind Investoren.“

package/docs/content/locales/de-DE/template-videos.mdx

@@ -18,13 +18,62 @@ Ein programmatisches Videostudio für die Art von Bewegungsgrafiken, Produktdemo
 
 Wenn Sie das Studio öffnen, wird auf dem Startbildschirm eine Liste der Kompositionen angezeigt. Klicken Sie darauf und Sie erhalten oben einen Player, unten eine Zeitleiste und rechts ein Eigenschaftenfenster. Der Agent weiß immer, welche Komposition Sie geöffnet haben.
 
-```an-diagram title="Animation als Daten" summary="Eine Komposition ist eine React-Komponente; Jede Animation liest von einer Spur, sodass der Agent und die Zeitleiste dieselben Daten bearbeiten."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">ziehen, Größe ändern, scrubben</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>React-Komposition<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-jrff69" title="Animation als Daten" summary={"Eine Komposition ist eine React-Komponente; Jede Animation liest von einer Spur, sodass der Agent und die Zeitleiste dieselben Daten bearbeiten."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >ziehen, Größe ändern, scrubben</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    React-Komposition<br /><small class="diagram-muted"
+      >Remotion &lt;Player&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Was Sie damit machen können
 
 - **Generieren Sie Animationen aus einer Eingabeaufforderung.** „Fügen Sie eine Titelkarte hinzu, die nach 2 Sekunden eingeblendet wird und bis 5 Sekunden anhält.“ Der Agent bearbeitet die Komposition.

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

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="Ein track()-Aufruf, jeder Anbieter" summary="Server- und Client-Anrufer treffen auf dasselbe Register, wodurch jedes Ereignis parallel an alle aktiven Anbieter weitergeleitet wird."
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">Servercode<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">Browsercode<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</span><small class=\"diagram-muted\">Fan-out, Fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-6r36bg" title="Ein track()-Aufruf, jeder Anbieter" summary="Server- und Client-Anrufer treffen auf dasselbe Register, wodurch jedes Ereignis parallel an alle aktiven Anbieter weitergeleitet wird.">
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Servercode<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      Browsercode<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</span
+    ><small class="diagram-muted">Fan-out, Fire-and-forget</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Eingebaute Anbieter {#built-in}
 
 Legen Sie eine Umgebungsvariable fest und der Anbieter registriert sich automatisch beim Serverstart. Keine Codeänderungen erforderlich.

package/docs/content/locales/de-DE/using-your-agent.mdx

@@ -9,13 +9,60 @@ Die entscheidende Idee hinter agent-native ist, dass der Agent und der UI **glei
 
 Es gibt eine einfache Durchgangslinie. Der Agent **sieht**, was Sie gerade sehen, Sie **lenken** es auf das, was Sie möchten, Sie können es überall **einbetten**, Sie können vollständig **UI-arm** verwenden, wenn das besser passt, und Sie können dieselben Dokumente gleichzeitig **mitbearbeiten**. Jede davon ist eine Seite in diesem Abschnitt.
 
-```an-diagram title="Die alltägliche Schleife" summary="Fünf Möglichkeiten, mit einem angedockten Agenten zu arbeiten – jede davon ist eine Seite in diesem Abschnitt."
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>UI-arm</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">Gemeinsam bearbeiten</span><small class=\"diagram-muted\">live, nebeneinander</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-1iso8n0" title={"Die alltägliche Schleife"} summary={"Fünf Möglichkeiten, mit einem angedockten Agenten zu arbeiten – jede davon ist eine Seite in diesem Abschnitt."}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>UI-arm</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">Gemeinsam bearbeiten</span
+    ><small class="diagram-muted">live, nebeneinander</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Es sieht, was Sie sehen {#it-sees}
 
 Der Agent ist für Ihren Bildschirm nicht blind. Öffnen Sie eine E-Mail und es weiß, um welchen Thread es sich handelt. Wählen Sie ein Diagramm aus und es weiß, welches Diagramm. Markieren Sie einen Absatz und die Aktion kann genau auf diesen Bereich angewendet werden. Dieses gemeinsame Bewusstsein ermöglicht es Ihnen, „Antworten“ oder „Auswahl zusammenfassen“ zu sagen, ohne jedes Mal den Kontext buchstabieren zu müssen.

package/docs/content/locales/de-DE/voice-input.mdx

@@ -19,13 +19,54 @@ Die Sprachtaste des Komponisten zeichnet Audio im Browser auf und wählt dann ei
 
 Die Anbieterauswahl wird im Anwendungsstatus unter `voice-transcription-prefs` gespeichert, sodass der Benutzer `"auto"` (Standard – wählt den besten verfügbaren Anbieter), `"builder-gemini"`, `"builder"`, `"gemini"`, `"groq"`, `"openai"` oder `"browser"` in den Seitenleisteneinstellungen erzwingen kann.
 
-```an-diagram title="Fallback für Sprachtranskriptionsanbieter" summary="Der Verfassenr zeichnet Audio auf, durchläuft dann die Serveranbieter der Reihe nach und wechselt nur dann zum Web Speech API des Browsers, wenn kein Serveranbieter verfügbar ist."
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">Mikrofontaste<br><small class=\"diagram-muted\">zeichnet webm/opus auf</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">Standard, wenn Builder verbunden ist</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1uja1uu" title={"Fallback für Sprachtranskriptionsanbieter"} summary={"Der Verfassenr zeichnet Audio auf, durchläuft dann die Serveranbieter der Reihe nach und wechselt nur dann zum Web Speech API des Browsers, wenn kein Serveranbieter verfügbar ist."}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    Mikrofontaste<br /><small class="diagram-muted"
+      >zeichnet webm/opus auf</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted">Standard, wenn Builder verbunden ist</small>
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Die Route ist **nur Same-Origin** – Site-übergreifende POSTs werden abgelehnt, sodass ein Angreifer keine Transkriptions-Credits von einer externen Seite brennen kann.
 
 ## Anbieter aktivieren {#enabling-providers}

package/docs/content/locales/de-DE/what-is-agent-native.mdx

@@ -50,13 +50,58 @@ Drei Dinge ändern sich, wenn Sie Stufe 3 erreichen:
 
 Das ist Rang 3. Das ist Agent-nativ.
 
-```an-diagram title="Das Leiterprinzip" summary="Die meisten Teams bleiben bei Stufe 1 oder 2 stehen. Agent-nativ ist Stufe 3 – eine echte App und ein echter Agent über eine gemeinsame Aktionsoberfläche."
-{
-  "html": "<div class=\"diagram-ladder\"><div class=\"diagram-card rung rung-3\"><span class=\"diagram-pill accent\">Stufe 3 · agent-native</span><strong>Agent + UI als gleichberechtigte Partner</strong><small class=\"diagram-muted\">One action surface. Every agent tool is also a button; every button runs the same logic the agent uses.</small></div><div class=\"diagram-card rung rung-2\"><span class=\"diagram-pill\">Stufe 2</span><strong>Ein Chat mit Tools</strong><small class=\"diagram-muted\">Der Agent kann handeln, ist aber weiter nur ein Chatfenster. Keine Dashboards, Listen oder Shortcuts.</small></div><div class=\"diagram-card rung rung-1\"><span class=\"diagram-pill warn\">Stufe 1</span><strong>Ein einzelner LLM-Aufruf</strong><small class=\"diagram-muted\">Prompt in, string out. Impressive in a demo; breaks the moment reality gets messy.</small></div></div>",
-  "css": ".diagram-ladder{display:flex;flex-direction:column;gap:14px}.diagram-ladder .rung{display:flex;flex-direction:column;gap:6px;padding:16px 18px}.diagram-ladder .rung-2{margin-inline-end:48px}.diagram-ladder .rung-1{margin-inline-end:96px}"
+<Diagram id="doc-block-g9ou1e" title="Das Leiterprinzip" summary={"Die meisten Teams bleiben bei Stufe 1 oder 2 stehen. Agent-nativ ist Stufe 3 – eine echte App und ein echter Agent über eine gemeinsame Aktionsoberfläche."}>
+
+```html
+<div class="diagram-ladder">
+  <div class="diagram-card rung rung-3">
+    <span class="diagram-pill accent">Stufe 3 · agent-native</span
+    ><strong>Agent + UI als gleichberechtigte Partner</strong
+    ><small class="diagram-muted"
+      >One action surface. Every agent tool is also a button; every button runs
+      the same logic the agent uses.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-2">
+    <span class="diagram-pill">Stufe 2</span><strong>Ein Chat mit Tools</strong
+    ><small class="diagram-muted"
+      >Der Agent kann handeln, ist aber weiter nur ein Chatfenster. Keine
+      Dashboards, Listen oder Shortcuts.</small
+    >
+  </div>
+  <div class="diagram-card rung rung-1">
+    <span class="diagram-pill warn">Stufe 1</span
+    ><strong>Ein einzelner LLM-Aufruf</strong
+    ><small class="diagram-muted"
+      >Prompt in, string out. Impressive in a demo; breaks the moment reality
+      gets messy.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-ladder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.diagram-ladder .rung {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+.diagram-ladder .rung-2 {
+  margin-inline-end: 48px;
+}
+.diagram-ladder .rung-1 {
+  margin-inline-end: 96px;
 }
 ```
 
+</Diagram>
+
 Siehe [Key Concepts — Protocols](/docs/key-concepts#protocols), um zu erfahren, wie dies alles von derselben Aktionsdefinition abhängt.
 
 ## Warum jeder Agent einen UI braucht {#why-every-agent-needs-a-ui}
@@ -89,13 +134,60 @@ Dies ist das bestimmende Prinzip.
 >
 > **Vom Agent** – natürliche Sprache, andere Agenten über A2A, Slack, Telegram. Der Agent schreibt in die Datenbank; Der UI wird automatisch aktualisiert.
 
-```an-diagram title="Ein System, zwei Wege hinein" summary="Der Agent und die Benutzeroberfläche schreiben in dieselben Aktionen und dieselbe Datenbank. Was der eine tut, der andere sieht es."
-{
-  "html": "<div class=\"diagram-parity\"><div class=\"diagram-col\"><div class=\"diagram-node\">Human<br><small class=\"diagram-muted\">Klicks, Formulare, Shortcuts</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">natürliche Sprache · A2A · Slack</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">defined once</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">SQL-Datenbank</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">UI aktualisiert live</div></div>",
-  "css": ".diagram-parity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-parity .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-parity .diagram-arrow{font-size:22px;line-height:1}.diagram-parity .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1wrsf1e" title="Ein System, zwei Wege hinein" summary={"Der Agent und die Benutzeroberfläche schreiben in dieselben Aktionen und dieselbe Datenbank. Was der eine tut, der andere sieht es."}>
+
+```html
+<div class="diagram-parity">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Human<br /><small class="diagram-muted"
+        >Klicks, Formulare, Shortcuts</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted"
+        >natürliche Sprache · A2A · Slack</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted">defined once</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">SQL-Datenbank</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">UI aktualisiert live</div>
+</div>
+```
+
+```css
+.diagram-parity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-parity .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-parity .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-parity .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 Wenn der Agent einen E-Mail-Entwurf erstellt, wird dieser im UI angezeigt. Wenn Sie auf „Senden“ klicken, weiß der Agent, dass die Nachricht gesendet wurde. Es gibt keine getrennte „Agentenwelt“ und „UI-Welt“ – es ist ein einziges System. Siehe [Key Concepts](/docs/key-concepts) für die Architektur, die dies ermöglicht.
 
 ## Anpassungen sind normalerweise Elektrowerkzeugen vorbehalten {#workspace-customization}