@agent-native/core 0.79.26 → 0.80.0

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

@@ -19,13 +19,78 @@ Die Produktoberfläche bleibt bewusst einfach: **Fragen** ist der primäre Chat
 Erfahrung, während **Quellen**, **Rezension** und **Wissen** Administrator/Support sind
 Oberflächen zum Verbinden von Daten, zum Genehmigen von Vorschlägen und zum Überprüfen des zitierten Speichers.
 
-```an-diagram title="Von der Quelle bis zur zitierten Antwort" summary="Das Gehirn verarbeitet genehmigte Quellen in Rohaufnahmen, destilliert dauerhafte Erinnerungen, überprüft sie und antwortet erst dann mit Zitaten."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Sources</span><small class=\"diagram-muted\">Slack · Granola · GitHub · Clips · webhooks</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Rohaufnahmen<br><small class=\"diagram-muted\">dedupliziert, redigiert</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Distill<br><small class=\"diagram-muted\">Fakten · Entscheidungen · Prozesse</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">Review</span><small class=\"diagram-muted\">sensitive / low-confidence queue</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill ok\">Knowledge</span><small class=\"diagram-muted\">genehmigt, atomar</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Ask</span><small class=\"diagram-muted\">cited answer</small></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-flow .diagram-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px}.diagram-flow .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-flow .diagram-arrow{font-size:20px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-h7jmp8" title="Von der Quelle bis zur zitierten Antwort" summary={"Das Gehirn verarbeitet genehmigte Quellen in Rohaufnahmen, destilliert dauerhafte Erinnerungen, überprüft sie und antwortet erst dann mit Zitaten."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-card">
+    <span class="diagram-pill">Sources</span
+    ><small class="diagram-muted"
+      >Slack · Granola · GitHub · Clips · webhooks</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Rohaufnahmen<br /><small class="diagram-muted"
+      >dedupliziert, redigiert</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Distill<br /><small class="diagram-muted"
+      >Fakten · Entscheidungen · Prozesse</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">Review</span
+    ><small class="diagram-muted">sensitive / low-confidence queue</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill ok">Knowledge</span
+    ><small class="diagram-muted">genehmigt, atomar</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Ask</span
+    ><small class="diagram-muted">cited answer</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+}
+.diagram-flow .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-9wj2l9">
   <Screen
     surface="desktop"

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

@@ -18,13 +18,71 @@ Eine von einem Agenten betriebene Kalender-App. Schließen Sie Ihr Google Calend
 
 Wenn Sie die App öffnen, ist die aktive Kalenderansicht die primäre Oberfläche. Der Agent weiß immer noch, um welchen Tag, welche Woche oder welches Ereignis es sich handelt, sodass Sie sagen können: „Vereinbaren Sie an diesem Tag ein 30-minütiges Gespräch mit Alex“, ohne alles zu buchstabieren.
 
-```an-diagram title="Wie eine Planungsanfrage abläuft" summary="Unabhängig davon, ob Sie in den Kalender klicken oder den Agenten fragen, werden dieselben Aktionen live aus Google Calendar gelesen und in dieselbe Ansicht zurückgeschrieben."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Du klickst<br><small class=\"diagram-muted\">Ziehen, Toolbar, Kurzbefehle</small></div><div class=\"diagram-node\">Sie fragen den Agenten<br><small class=\"diagram-muted\">\"find a 1-hour slot next week\"</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-events · check-availability · create-event</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Google Calendar<br><small class=\"diagram-muted\">live, mehrere Konten</small></div><div class=\"diagram-box\">SQL<br><small class=\"diagram-muted\">Buchungen · Verfügbarkeit</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">Kalenderansicht aktualisiert 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-12pr3gz" title={"Wie eine Planungsanfrage abläuft"} summary={"Unabhängig davon, ob Sie in den Kalender klicken oder den Agenten fragen, werden dieselben Aktionen live aus Google Calendar gelesen und in dieselbe Ansicht zurückgeschrieben."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Du klickst<br /><small class="diagram-muted"
+        >Ziehen, Toolbar, Kurzbefehle</small
+      >
+    </div>
+    <div class="diagram-node">
+      Sie fragen den Agenten<br /><small class="diagram-muted"
+        >"find a 1-hour slot next week"</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-events · check-availability · create-event</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Google Calendar<br /><small class="diagram-muted"
+        >live, mehrere Konten</small
+      >
+    </div>
+    <div class="diagram-box">
+      SQL<br /><small class="diagram-muted">Buchungen · Verfügbarkeit</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">Kalenderansicht aktualisiert 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
 
 - **Sehen Sie Ihr echtes Google Calendar** in der Tages-, Wochen- oder Monatsansicht mit mehreren überlagerten Konten.

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

@@ -37,13 +37,70 @@ Wenn Sie die kleinste reine Aktionslaufzeit ohne Browser UI wünschen, beginnen
 
 Das ist der Punkt. Chat ist eine schlanke, nützliche Standard-Shell für Ihren eigenen Agenten und kein Domänenprodukt, das vorgibt, generisch zu sein.
 
-```an-diagram title="Was in der Chat-Shell enthalten ist" summary="Eine schlanke Chat-Oberfläche über die Standardlaufzeit des Frameworks – Aktionen, dauerhafte Threads, Live-Synchronisierung und Authentifizierung – mit Platz zum Hinzufügen Ihrer eigenen Benutzeroberfläche."
-{
-  "html": "<div class=\"diagram-chat\"><div class=\"diagram-col left\"><div class=\"diagram-node\">Thread-Liste<br><small class=\"diagram-muted\">erstellen · erneut öffnen · anheften · archivieren</small></div><div class=\"diagram-node\">Ganzseitiger Chat<br><small class=\"diagram-muted\">Framework-Chat-Oberfläche auf /</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\">hello.ts · view-screen · navigate</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col right\"><div class=\"diagram-box\">Kern-SQL-Tabellen<br><small class=\"diagram-muted\">threads · application_state · settings · sessions · runs</small></div><div class=\"diagram-pill ok\">Live-Synchronisierung &#8635;</div><div class=\"diagram-box\">Better Auth<br><small class=\"diagram-muted\">Login · Organisationen · Sitzungen</small></div></div></div>",
-  "css": ".diagram-chat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-chat .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-chat .diagram-arrow{font-size:22px;line-height:1}.diagram-chat .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-xonty3" title="Was in der Chat-Shell enthalten ist" summary={"Eine schlanke Chat-Oberfläche über die Standardlaufzeit des Frameworks – Aktionen, dauerhafte Threads, Live-Synchronisierung und Authentifizierung – mit Platz zum Hinzufügen Ihrer eigenen Benutzeroberfläche."}>
+
+```html
+<div class="diagram-chat">
+  <div class="diagram-col left">
+    <div class="diagram-node">
+      Thread-Liste<br /><small class="diagram-muted"
+        >erstellen · erneut öffnen · anheften · archivieren</small
+      >
+    </div>
+    <div class="diagram-node">
+      Ganzseitiger Chat<br /><small class="diagram-muted"
+        >Framework-Chat-Oberfläche auf /</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">hello.ts · view-screen · navigate</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col right">
+    <div class="diagram-box">
+      Kern-SQL-Tabellen<br /><small class="diagram-muted"
+        >threads · application_state · settings · sessions · runs</small
+      >
+    </div>
+    <div class="diagram-pill ok">Live-Synchronisierung &#8635;</div>
+    <div class="diagram-box">
+      Better Auth<br /><small class="diagram-muted"
+        >Login · Organisationen · Sitzungen</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-chat {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-chat .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-chat .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-chat .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Wann soll es ausgewählt werden? {#when-to-pick}
 
 - **Sie möchten eine einfache App, mit der Benutzer sofort sprechen können** und die Sie dann mit actions und UI erweitern können.

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

@@ -19,13 +19,61 @@ Eine App, die alles festhält: Bildschirmaufzeichnungen, Besprechungsnotizen aus
 
 Denken Sie an Loom + Granola + Wispr Flow in einer App – aber der Agent ist ein erstklassiger Redakteur auf allen Oberflächen, und die Aufzeichnungen, Besprechungen und Diktate gehören Ihnen und nicht denen eines SaaS-Anbieters. Clips macht freigegebene Aufzeichnungen auch für Agenten lesbar: Fügen Sie einen normalen Clips-Freigabelink in einen Agenten ein, und dieser kann das Transkript als Text „hören“ und zeitgestempelte Bildschirmbilder als Bilder „sehen“ – es ist kein Rohvideo erforderlich. Frame-Viewing funktioniert in jedem bildfähigen Agenten (ChatGPT, Claude Code, Cursor, Codex); Nur-Text-Webchats erhalten weiterhin das vollständige Transkript und können einen von Ihnen hochgeladenen Frame übernehmen.
 
-```an-diagram title="Erfassen, transkribieren, wiederverwenden" summary="Drei Eroberungsarten landen in einer Bibliothek; Der Agent transkribiert, betitelt und fasst zusammen, dann ist jedes Transkript durchsuchbar und kann geteilt werden."
-{
-  "html": "<div class=\"diagram-clips\"><div class=\"diagram-col\"><div class=\"diagram-node\">Bildschirmaufnahme</div><div class=\"diagram-node\">Kalendermeeting</div><div class=\"diagram-node\">Fn-halten-Diktat</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Eine Bibliothek<br><small class=\"diagram-muted\">recordings + transcripts (SQL)</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\">Titel · Zusammenfassung · Kapitel</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">Suchen</div><div class=\"diagram-pill\">Teilen</div><div class=\"diagram-pill\">Agentenlesbar links</div></div></div>",
-  "css": ".diagram-clips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-clips .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-clips .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-clips .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1j41dwq" title="Erfassen, transkribieren, wiederverwenden" summary={"Drei Eroberungsarten landen in einer Bibliothek; Der Agent transkribiert, betitelt und fasst zusammen, dann ist jedes Transkript durchsuchbar und kann geteilt werden."}>
+
+```html
+<div class="diagram-clips">
+  <div class="diagram-col">
+    <div class="diagram-node">Bildschirmaufnahme</div>
+    <div class="diagram-node">Kalendermeeting</div>
+    <div class="diagram-node">Fn-halten-Diktat</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Eine Bibliothek<br /><small class="diagram-muted"
+      >recordings + transcripts (SQL)</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">Titel · Zusammenfassung · Kapitel</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Suchen</div>
+    <div class="diagram-pill">Teilen</div>
+    <div class="diagram-pill">Agentenlesbar links</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-clips {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-clips .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-clips .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-clips .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Was Sie damit machen können
 
 - **Nehmen Sie Ihren Bildschirm auf** mit integriertem Rekorder, Webcam-Overlay, Audioaufnahme und Pause/Zuschneiden.

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

@@ -22,13 +22,69 @@ Ergebnis, egal ob Sie es selbst machen oder fragen.
 
 Wenn Sie die App öffnen, sehen Sie neben dem Editor einen Seitenbaum. Der Agent weiß immer, welche Seite Sie gerade anzeigen und welchen Text Sie ausgewählt haben, sodass Dokumentänderungen auf der aktuellen Seite verankert bleiben können.
 
-```an-diagram title="Ein Dokument, viele Redakteure" summary="Sie und der Agent schreiben beide über dieselbe Yjs-Pipeline. SQL ist der kanonische Speicher; Lokale Dateien und Notion sind optionale Synchronisierungsoberflächen."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Du tippst<br><small class=\"diagram-muted\">Slash-Menü, Toolbar</small></div><div class=\"diagram-node\">Agenten-Bearbeitungen<br><small class=\"diagram-muted\">edit-document find/replace</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Yjs CRDT</span><small class=\"diagram-muted\">live, konfliktfreie Zusammenführung</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">documents (markdown)<br><small class=\"diagram-muted\">kanonischer SQL-Speicher</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Lokale .md / .mdx<br><small class=\"diagram-muted\">/local-files</small></div><div class=\"diagram-box\">Notion-Seiten<br><small class=\"diagram-muted\">pull · push</small></div></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-1naojwp" title="Ein Dokument, viele Redakteure" summary={"Sie und der Agent schreiben beide über dieselbe Yjs-Pipeline. SQL ist der kanonische Speicher; Lokale Dateien und Notion sind optionale Synchronisierungsoberflächen."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Du tippst<br /><small class="diagram-muted">Slash-Menü, Toolbar</small>
+    </div>
+    <div class="diagram-node">
+      Agenten-Bearbeitungen<br /><small class="diagram-muted"
+        >edit-document find/replace</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Yjs CRDT</span
+    ><small class="diagram-muted">live, konfliktfreie Zusammenführung</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    documents (markdown)<br /><small class="diagram-muted"
+      >kanonischer SQL-Speicher</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Lokale .md / .mdx<br /><small class="diagram-muted">/local-files</small>
+    </div>
+    <div class="diagram-box">
+      Notion-Seiten<br /><small class="diagram-muted">pull · push</small>
+    </div>
+  </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
 
 - **Schreiben Sie Rich-Text** mit Überschriften, Listen, Tabellen, Codeblöcken, Bildern und Links. Schrägstrichbefehle (`/`) fügen Blöcke ein; Wenn Sie Text auswählen, wird eine Formatierungssymbolleiste angezeigt.

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

@@ -18,13 +18,67 @@ Design ist ein agentennatives Prototyping-Studio. Anstelle einer geschichteten Z
 
 Wenn Sie die App öffnen, befindet sich der generierte Prototyp im Mittelpunkt des Arbeitsbereichs, mit Vorschaumodi, Eingabeaufforderungen für Überarbeitungen und Exportsteuerelementen in unmittelbarer Nähe. Alles, was der Agent produziert, ist echtes HTML, das Sie verfeinern, exportieren oder weitergeben können.
 
-```an-diagram title="Ein Artefakt, keine Übersetzung" summary="Der Agent generiert eigenständige Alpine/Tailwind HTML; Der Iframe, die bearbeitbare Quelle und jeder Export lesen alle dieselben Dateien. Ein verknüpftes Designsystem führt jedem Durchgang Token zu."
-{
-  "html": "<div class=\"diagram-design\"><div class=\"diagram-col\"><div class=\"diagram-node\">Prompt<br><small class=\"diagram-muted\">describe screen / page</small></div><div class=\"diagram-pill\">Designsystem</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Agent generieren</span><small class=\"diagram-muted\">eigenständige HTML- / JSX-Dateien</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>iframe preview<br><small class=\"diagram-muted\">Regler anpassen · Cmd+I verfeinern</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill ok\">Export</span><small class=\"diagram-muted\">HTML · ZIP · PDF · Übergabe</small></div></div>",
-  "css": ".diagram-design{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-design .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.diagram-design .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-design .diagram-arrow{font-size:20px;line-height:1}.diagram-design .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1764u6n" title={"Ein Artefakt, keine Übersetzung"} summary={"Der Agent generiert eigenständige Alpine/Tailwind HTML; Der Iframe, die bearbeitbare Quelle und jeder Export lesen alle dieselben Dateien. Ein verknüpftes Designsystem führt jedem Durchgang Token zu."}>
+
+```html
+<div class="diagram-design">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Prompt<br /><small class="diagram-muted">describe screen / page</small>
+    </div>
+    <div class="diagram-pill">Designsystem</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Agent generieren</span
+    ><small class="diagram-muted">eigenständige HTML- / JSX-Dateien</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    iframe preview<br /><small class="diagram-muted"
+      >Regler anpassen · Cmd+I verfeinern</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill ok">Export</span
+    ><small class="diagram-muted">HTML · ZIP · PDF · Übergabe</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-design {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-design .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.diagram-design .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-design .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-design .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Wann soll es ausgewählt werden?
 
 - **Sie möchten ein ausgefeiltes Landingpage-Konzept, eine Produktausrichtung oder eine Markenerkundung**, die das Tool als echtes HTML zurücklassen können – und nicht als mehrschichtige Zeichenfläche.
@@ -294,6 +348,57 @@ Der Agent weiß immer, was Sie offen haben. Das aktuelle Design, die geöffnete
 
 Da es sich bei einem Design lediglich um eigenständige HTML/JSX-Dateien handelt, bearbeitet der Agent dieselbe Quelle, die der Iframe rendert, und jeder Export stammt aus – es gibt kein separates „AI-Mockup“-Format zum Übersetzen. Ein verknüpftes Designsystem liefert Token und `custom_instructions`, die der Agent bei jedem Generationsdurchlauf ehrt. Wählen Sie in der Vorschau Text oder einen Bereich aus und drücken Sie Befehl+I, um den Agenten genau auf diesen Teil zu konzentrieren.
 
+### Editor-Modell
+
+Design ist bei Arbeit mit mehreren Bildschirmen übersichtsorientiert. Nach der
+Generierung oder größeren Aktualisierungen öffnet der Editor die
+Bildschirmübersicht: eine unendliche Arbeitsfläche, auf der jeder Bildschirm ein
+statischer Rahmen ist, den Sie auswählen, verschieben, skalieren, ablegen oder
+duplizieren können. Verwenden Sie die Vollansicht-Schaltfläche des Rahmens, wenn ein Bildschirm
+fokussiertes Scrollen oder Prototypinteraktion benötigt.
+
+Der Einzelbildschirmmodus ist für Scrollen, Interaktion mit Prototypverhalten
+und Bearbeitung der DOM-/Code-Ebenen in einer gerenderten Datei gedacht. Das
+Ebenenfenster spiegelt diese Trennung wider: Bildschirme sind Rahmen der
+obersten Ebene, darunter liegen die DOM-/Code-Ebenen des aktiven Bildschirms.
+
+Für stabile Ebenennamen fügen Sie wichtigen Elementen
+`data-agent-native-layer-name` hinzu. Design verwendet dies vor
+semantischen/textbasierten Fallbacks und kann Umbenennungen durch Bearbeiten
+dieses Attributs speichern. Inline-HTML unterstützt lokale Code-Ebenen-Edits
+für Text, Klassen, Stile, Attribute, Quellreihenfolge und kleine strukturelle
+Änderungen; visuelle Code-Ebenen-Edits sind heute HTML-only. Der
+localhost-Quellmodus kann lokale Routen-Artboards registrieren und auflösen,
+aber lokale Datei-Lese-/Schreibvorgänge bleiben ein Bridge-Vertrag, bis
+explizite Berechtigungskontrollen gehärtet sind.
+
+### Erweiterungen im Design-Editor
+
+Der Editor enthält nach **Tweaks** eine **Extensions**-Inspektorregisterkarte.
+Sie funktioniert wie eine Design-spezifische Plugin-Spur: Benutzer können auf
+**+ Extension** klicken, um den Agenten eine Erweiterung erstellen zu lassen,
+oder eine Erweiterung installieren, die den Slot `design.editor.inspector`
+deklariert.
+
+Design-Erweiterungen werden über die Standard-Erweiterungssandbox inline neben
+der Arbeitsfläche gerendert. Der Host übergibt `window.slotContext` und
+`window.onSlotContext(...)`-Updates mit der aktuellen `designId`, der aktiven
+Datei, der Bildschirmliste, ausgewählten Bildschirm-IDs, Metadaten des
+ausgewählten Elements, Ansichtsmodus, Zoom, aktivem Werkzeug und Tweak-Werten.
+So kann eine Erweiterung Informationen zur aktuellen Auswahl anzeigen,
+Stilsteuerungen anbieten oder kompakte Workflows rund um das geöffnete Design
+erstellen.
+
+Für deterministische Arbeit können Erweiterungen App-Aktionen über die
+Erweiterungsbrücke aufrufen. Für KI-gesteuerte Änderungen sollte die Erweiterung
+`agentNative.chat.send(...)` mit dem Selektor/Quell-ID des ausgewählten Elements
+und der gewünschten Änderung aufrufen. Der Agent sollte zuerst `view-screen`
+aufrufen und dann `apply-visual-edit` für Stil-, Klassen-, Text- oder
+Verschiebungsänderungen an Elementen verwenden, oder `update-design` /
+`generate-design` mit `canvasFrames` für Änderungen an der Platzierung der
+Arbeitsfläche. Siehe [Extensions](/docs/extensions#what-an-extension-can-do)
+für Sandbox, persistente Daten und Bridge-APIs.
+
 ### Anpassen
 
 Design ist eine vollständige, klonbare Vorlage. Einige praktische Erweiterungsideen:

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

@@ -20,13 +20,66 @@ Dispatch ist die **Arbeitsbereich-Steuerungsebene**. Wo andere Vorlagen Domänen
 
 Wenn Sie einen [multi-app workspace](/docs/multi-app-workspace) mit vielen Apps betreiben, ist Dispatch der Kleber.
 
-```an-diagram title="Orchestrieren, nicht spezialisieren" summary="Nachrichten von jedem Kanal landen in einem Posteingang; Der Orchestrator selektiert und delegiert die Domänenarbeit über A2A an die richtige Spezial-App – Geheimnisse, Ressourcen und Genehmigungen bleiben im Mittelpunkt."
-{
-  "html": "<div class=\"diagram-dispatch\"><div class=\"diagram-col\"><div class=\"diagram-node\">Slack · Telegram</div><div class=\"diagram-node\">Email</div><div class=\"diagram-node\">A2A-Anfragen</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough><span class=\"diagram-pill accent\">Orchestrator</span><small class=\"diagram-muted\">zentraler Eingang · Triage · Routing</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">Mail-Agent</div><div class=\"diagram-node\">Analytics-Agent</div><div class=\"diagram-node\">Brain · Slides &hellip;</div></div></div><div class=\"diagram-shared\"><span class=\"diagram-pill\">Secret-Tresor</span><span class=\"diagram-pill\">Workspace-Ressourcen</span><span class=\"diagram-pill warn\">Approvals</span><span class=\"diagram-pill\">Geplante Jobs</span></div>",
-  "css": ".diagram-dispatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-dispatch .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-dispatch .diagram-box{display:flex;flex-direction:column;gap:4px}.diagram-dispatch .diagram-arrow{font-size:20px;line-height:1}.diagram-shared{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}"
+<Diagram id="doc-block-kqodhq" title="Orchestrieren, nicht spezialisieren" summary={"Nachrichten von jedem Kanal landen in einem Posteingang; Der Orchestrator selektiert und delegiert die Domänenarbeit über A2A an die richtige Spezial-App – Geheimnisse, Ressourcen und Genehmigungen bleiben im Mittelpunkt."}>
+
+```html
+<div class="diagram-dispatch">
+  <div class="diagram-col">
+    <div class="diagram-node">Slack · Telegram</div>
+    <div class="diagram-node">Email</div>
+    <div class="diagram-node">A2A-Anfragen</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    <span class="diagram-pill accent">Orchestrator</span
+    ><small class="diagram-muted">zentraler Eingang · Triage · Routing</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">Mail-Agent</div>
+    <div class="diagram-node">Analytics-Agent</div>
+    <div class="diagram-node">Brain · Slides &hellip;</div>
+  </div>
+</div>
+<div class="diagram-shared">
+  <span class="diagram-pill">Secret-Tresor</span
+  ><span class="diagram-pill">Workspace-Ressourcen</span
+  ><span class="diagram-pill warn">Approvals</span
+  ><span class="diagram-pill">Geplante Jobs</span>
+</div>
+```
+
+```css
+.diagram-dispatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-dispatch .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-dispatch .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.diagram-dispatch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-shared {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
 }
 ```
 
+</Diagram>
+
 ## Was es tut {#what-it-does}
 
 - **Zentraler Posteingang.** Slack-DMs, Telegram-Nachrichten, E-Mail-Benachrichtigungen, A2A Anfragen von anderen Agenten – alles landet an einem Ort. Der Dispatch-Agent führt eine Triage durch und erledigt sie entweder selbst oder delegiert sie. Unter [Messaging](/docs/messaging) erfahren Sie, wie Sie Slack, E-Mail und Telegram in Ihren Arbeitsbereich integrieren.