@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/de-DE/code-agents-ui.mdx

@@ -25,13 +25,75 @@ Es gibt drei Ebenen:
 - **Desktop**: Die Registerkarte „Code“ in der linken Seitenleiste fügt nativen Terminalstart, App-Webansichten und Desktop-Deep-Links hinzu, während dasselbe Ausführungsmodell verwendet wird.
 - **Gemeinsame UI**: `@agent-native/code-agents-ui` rendert die wiederverwendbare React-Oberfläche.
 
-```an-diagram title="Drei Schichten über einem Run Store" summary="CLI, Desktop und die gemeinsame Benutzeroberfläche sind unterschiedliche Oberflächen über denselben dateigestützten Ausführungsspeicher und Executor; Hosts passen es über den CodeAgentsHost-Vertrag an."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">starten · fortsetzen · Status · stoppen</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">natives Terminal · Webviews · Deep Links</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Teilend UI</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">host contract</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Dateibasierter Run-Store + Executor<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1bfhuim" title={"Drei Schichten über einem Run Store"} summary={"CLI, Desktop und die gemeinsame Benutzeroberfläche sind unterschiedliche Oberflächen über denselben dateigestützten Ausführungsspeicher und Executor; Hosts passen es über den CodeAgentsHost-Vertrag an."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted"
+        >starten · fortsetzen · Status · stoppen</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted"
+        >natives Terminal · Webviews · Deep Links</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">Teilend UI</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">host contract</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    Dateibasierter Run-Store + Executor<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 Die aktuelle Aufteilung ist absichtlich konvergierend: Die Standard-Agenten-Seitenleiste und die Agenten-Teams werden im zentralen `run-manager`-Lebenszyklus ausgeführt, während Agent-Native-Code lokale, lang laufende Sitzungen verwendet, die durch den dateibasierten Code-Ausführungsspeicher und das gemeinsame Controller-Vokabular für die Hintergrundausführung unterstützt werden.
 
 Das gemeinsam genutzte UI ist hostgesteuert. Es weiß nicht, ob es in Electron, einer Browservorlage oder einer künftig gehosteten Shell ausgeführt wird. Hosts stellen eine `CodeAgentsHost`-Implementierung bereit.
@@ -373,13 +435,43 @@ Die Verbindung ist nur ausgehend vom Desktop:
 5. Mobile liest `hosts`, `runs` und `transcript` aus Dispatch; es redet nie
    direkt auf den Desktop.
 
-```an-diagram title="Remote Dispatch ist nur ausgehend" summary="Mobile kommuniziert nie direkt mit dem Desktop. Desktop fragt Dispatch lange ab, beansprucht Befehle, steuert den lokalen Ausführungsspeicher und spiegelt die Ergebnisse zurück."
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>Mobil / Telegram<br><small class=\"diagram-muted\">/code · Sitzungen</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch-Relay<br><small class=\"diagram-muted\">Hosts · Läufe · Transkript</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">Long-Polls · Claims · steuert Run-Store</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1ms2z8t" title="Remote Dispatch ist nur ausgehend" summary={"Mobile kommuniziert nie direkt mit dem Desktop. Desktop fragt Dispatch lange ab, beansprucht Befehle, steuert den lokalen Ausführungsspeicher und spiegelt die Ergebnisse zurück."}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    Mobil / Telegram<br /><small class="diagram-muted">/code · Sitzungen</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatch-Relay<br /><small class="diagram-muted"
+      >Hosts · Läufe · Transkript</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >Long-Polls · Claims · steuert Run-Store</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Die kanonischen Remote-Relay-Endpunkte sind:
 
 <Endpoint id="doc-block-o6r9wa" title="Desktop beansprucht Arbeit in der Warteschlange" method="POST" path="/_agent-native/integrations/remote/poll" summary="Der Desktop fragt das Relay lange ab, um in der Warteschlange befindliche Befehle abzurufen" auth="Desktop device token" responses={[

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

@@ -25,13 +25,72 @@ Vermeiden Sie den Import von UI-Komponenten aus dem bloßen `@agent-native/core`
 `@agent-native/core/client` oder ein fokussierter `@agent-native/core/client/*`-Unterpfad
 daher wählen Bundler den browsersicheren Eintrag.
 
-```an-diagram title="Lassen Sie eine Ebene nach unten fallen, nicht aus dem Framework heraus" summary="Jede Ebene behält die gleiche Laufzeit bei – Aktionen, Thread-Status und SQL-backed-Synchronisierung – und gibt Ihnen gleichzeitig mehr Kontrolle über Chrome."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">Ganze Seitenleiste um deine App. Der 80%-Fall.</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">Das Panel oder eine Chat-Seite in deinem eigenen Layout.</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + runtime</span><small class=\"diagram-muted\">Own the chrome; optionally pass a BYO AgentChatRuntime.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span><small class=\"diagram-muted\">Verfassenr and transcript primitives only.</small></div><div class=\"diagram-rail\" data-rough>Gleiche Runtime: actions &middot; thread state &middot; SQL-backed sync</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-6bst90" title="Lassen Sie eine Ebene nach unten fallen, nicht aus dem Framework heraus" summary={"Jede Ebene behält die gleiche Laufzeit bei – Aktionen, Thread-Status und SQL-backed-Synchronisierung – und gibt Ihnen gleichzeitig mehr Kontrolle über Chrome."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted"
+      >Ganze Seitenleiste um deine App. Der 80%-Fall.</small
+    >
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted"
+      >Das Panel oder eine Chat-Seite in deinem eigenen Layout.</small
+    >
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + runtime</span
+    ><small class="diagram-muted"
+      >Own the chrome; optionally pass a BYO AgentChatRuntime.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;AgentConversation&gt;</span
+    ><small class="diagram-muted"
+      >Verfassenr and transcript primitives only.</small
+    >
+  </div>
+  <div class="diagram-rail" data-rough>
+    Gleiche Runtime: actions &middot; thread state &middot; SQL-backed sync
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## Agent und Chat-Oberfläche {#agent-chat-ui}
 
 | API                                  | Importpfad                                      | Verwenden, wenn                                                                                                                        |
@@ -178,13 +237,64 @@ Hooks für kollaborative Dokumente.
 | `useCollaborativeMap()` / `useCollaborativeArray()` | Experimentieren Sie mit dem strukturierten Y.Map/Y.Array-Status, wenn die Zusammenführung von Rich-Text-Körpern nicht passt. |
 | `dedupeCollabUsersByEmail()`                        | Erstellen Sie einen benutzerdefinierten Avatar-Stapel ohne doppelte Registerkarten für denselben Benutzer.                   |
 
-```an-diagram title="Präsenz: Menschen und der Agent teilen eine Bewusstseinsebene" summary="useCollaborativeDoc ist Eigentümer der Awareness-Instanz. Client-Hooks veröffentlichen Cursor und Auswahlen; Serverhelfer lassen eine Agentenaktion als Live-Teilnehmer erscheinen."
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">Humans<br><small class=\"diagram-muted\">usePresence &middot; cursors, selection</small></div><div class=\"diagram-node diagram-accent\">Agentenaktion<br><small class=\"diagram-muted\">agentUpdateSelection()</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">useCollaborativeDoc</span><small class=\"diagram-muted\">awareness layer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">alle rendern, Agent eingeschlossen</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1x6f51b" title={"Präsenz: Menschen und der Agent teilen eine Bewusstseinsebene"} summary={"useCollaborativeDoc ist Eigentümer der Awareness-Instanz. Client-Hooks veröffentlichen Cursor und Auswahlen; Serverhelfer lassen eine Agentenaktion als Live-Teilnehmer erscheinen."}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Humans<br /><small class="diagram-muted"
+        >usePresence &middot; cursors, selection</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      Agentenaktion<br /><small class="diagram-muted"
+        >agentUpdateSelection()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">useCollaborativeDoc</span
+    ><small class="diagram-muted">awareness layer</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;PresenceBar&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >alle rendern, Agent eingeschlossen</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 Serverseitige Agenten actions, die als Live-Teilnehmer auftreten möchten, verwenden die
 `@agent-native/core/collab` Agent Presence-Helfer auf niedrigerer Ebene:
 

package/docs/content/locales/de-DE/context-awareness.mdx

@@ -24,13 +24,66 @@ Sechs Muster lösen dieses Problem:
 5. **Prompte Übergabe** – UI steuert den Anruf `sendToAgentChat()`, wenn ein Klick zum Agentenwechsel werden soll
 6. **`navigate`** – ein einmaliger Befehl vom Agenten, der dem UI mitteilt, wohin er gehen soll
 
-```an-diagram title="Wie der Agent sieht, was Sie sehen" summary="Die Benutzeroberfläche schreibt leichtgewichtige Statusschlüssel. view-screen verwandelt sie in echte Aufzeichnungen; Der Agent kann zurücknavigieren, um die Benutzeroberfläche zu verschieben."
-{
-  "html": "<div class=\"diagram-ctx\"><div class=\"diagram-card col\"><span class=\"diagram-pill\">UI schreibt</span><div class=\"diagram-node\">navigation<br><small class=\"diagram-muted\">Ansicht, offene IDs</small></div><div class=\"diagram-node\">__url__<br><small class=\"diagram-muted\">shareable filters</small></div><div class=\"diagram-node\">selection<br><small class=\"diagram-muted\">Zeilen, Blöcke, Formen</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">view-screen</span><small class=\"diagram-muted\">reads state &middot; fetches records</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Agent handelt<br><small class=\"diagram-muted\">on the real object</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box diagram-accent\">navigate<br><small class=\"diagram-muted\">Agent bewegt die UI</small></div></div>",
-  "css": ".diagram-ctx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-ctx .col{display:flex;flex-direction:column;gap:8px;padding:14px}.diagram-ctx .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-ctx .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-13x29d9" title="Wie der Agent sieht, was Sie sehen" summary={"Die Benutzeroberfläche schreibt leichtgewichtige Statusschlüssel. view-screen verwandelt sie in echte Aufzeichnungen; Der Agent kann zurücknavigieren, um die Benutzeroberfläche zu verschieben."}>
+
+```html
+<div class="diagram-ctx">
+  <div class="diagram-card col">
+    <span class="diagram-pill">UI schreibt</span>
+    <div class="diagram-node">
+      navigation<br /><small class="diagram-muted">Ansicht, offene IDs</small>
+    </div>
+    <div class="diagram-node">
+      __url__<br /><small class="diagram-muted">shareable filters</small>
+    </div>
+    <div class="diagram-node">
+      selection<br /><small class="diagram-muted">Zeilen, Blöcke, Formen</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">view-screen</span
+    ><small class="diagram-muted">reads state &middot; fetches records</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Agent handelt<br /><small class="diagram-muted">on the real object</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box diagram-accent">
+    navigate<br /><small class="diagram-muted">Agent bewegt die UI</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-ctx {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-ctx .col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+}
+.diagram-ctx .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-ctx .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Kontextebenen {#context-layers}
 
 Verwenden Sie unterschiedliche Kontextkanäle für unterschiedliche Aufgaben:
@@ -382,9 +435,46 @@ So funktioniert es:
 - Bei der Verarbeitung von Synchronisierungsereignissen filtert der UI Ereignisse heraus, die seinem eigenen `ignoreSource`-Wert entsprechen – sodass er die Daten, die er gerade geschrieben hat, nicht erneut abruft.
 - Ereignisse von Agenten, anderen Registerkarten und actions kommen weiterhin normal durch
 
-```an-diagram title="Durch die Quellenmarkierung wird der Jitter beim Selbst-Refetch gestoppt" summary="Ein Tab ignoriert Synchronisierungsereignisse, die mit seinem eigenen TAB_ID gestempelt sind, reagiert aber weiterhin auf Agent- und andere Tab-Schreibvorgänge."
-{
-  "html": "<div class=\"diagram-jitter\"><div class=\"diagram-node\">Dieser Tab schreibt<br><small class=\"diagram-muted\">X-Request-Source: TAB_ID</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Server speichert Quelle<br>on the event</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill warn\">source == TAB_ID &rarr; ignored</div><small class=\"diagram-muted\">kein Refetch, kein Flackern</small><div class=\"diagram-pill ok\">agent / other tab &rarr; applied</div><small class=\"diagram-muted\">UI aktualisiert live</small></div></div>",
-  "css": ".diagram-jitter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jitter .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-jitter .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-ndlf5o" title="Durch die Quellenmarkierung wird der Jitter beim Selbst-Refetch gestoppt" summary={"Ein Tab ignoriert Synchronisierungsereignisse, die mit seinem eigenen TAB_ID gestempelt sind, reagiert aber weiterhin auf Agent- und andere Tab-Schreibvorgänge."}>
+
+```html
+<div class="diagram-jitter">
+  <div class="diagram-node">
+    Dieser Tab schreibt<br /><small class="diagram-muted"
+      >X-Request-Source: TAB_ID</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Server speichert Quelle<br />on the event
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill warn">source == TAB_ID &rarr; ignored</div>
+    <small class="diagram-muted">kein Refetch, kein Flackern</small>
+    <div class="diagram-pill ok">agent / other tab &rarr; applied</div>
+    <small class="diagram-muted">UI aktualisiert live</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-jitter {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jitter .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-jitter .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
+
+</Diagram>

package/docs/content/locales/de-DE/creating-templates.mdx

@@ -112,13 +112,60 @@ Fügen Sie kein `data/`-Verzeichnis für den Anwendungsstatus hinzu. Dauerhafte
 
 Die vier Bereiche jeder Vorlage sind über eine gemeinsame Aktionsoberfläche und eine SQL-Datenbank miteinander verbunden – der Agent und der UI sind gleichberechtigte Partner bei denselben Vorgängen:
 
-```an-diagram title="Wie die vier Bereiche einer Vorlage miteinander verbunden sind" summary="Die Benutzeroberfläche und der Agent erreichen SQL beide über dieselben Aktionen; Anwendungsstatus und Abfragesynchronisierung sorgen dafür, dass sie aufeinander abgestimmt sind."
-{
-  "html": "<div class=\"diagram-tmpl\"><div class=\"diagram-col\"><div class=\"diagram-node\">React-UI<br><small class=\"diagram-muted\">app/routes · Komponenten</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">AGENTS.md · skills</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Aktionen</span><small class=\"diagram-muted\">defineAction()</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL über Drizzle<br><small class=\"diagram-muted\">additive schema</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">Polling-Sync</div></div>",
-  "css": ".diagram-tmpl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-tmpl .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-tmpl .diagram-arrow{font-size:22px;line-height:1}.diagram-tmpl .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1pikucf" title="Wie die vier Bereiche einer Vorlage miteinander verbunden sind" summary={"Die Benutzeroberfläche und der Agent erreichen SQL beide über dieselben Aktionen; Anwendungsstatus und Abfragesynchronisierung sorgen dafür, dass sie aufeinander abgestimmt sind."}>
+
+```html
+<div class="diagram-tmpl">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      React-UI<br /><small class="diagram-muted"
+        >app/routes · Komponenten</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">AGENTS.md · skills</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Aktionen</span
+    ><small class="diagram-muted">defineAction()</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL über Drizzle<br /><small class="diagram-muted">additive schema</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">Polling-Sync</div>
+</div>
+```
+
+```css
+.diagram-tmpl {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-tmpl .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-tmpl .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-tmpl .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## Modelldaten in SQL {#data-models}
 
 Definieren Sie Domänentabellen mit den Framework-Drizzle-Helfern, damit Schemata über SQLite, Postgres, D1, Turso, Supabase, Neon und andere unterstützte Backends hinweg portierbar bleiben:

package/docs/content/locales/de-DE/cross-app-sso.mdx

@@ -26,13 +26,66 @@ Dies macht den Rollout sicher, auch wenn dabei Personen abgemeldet werden. **Abm
 
 Der Ablauf ist eine standardmäßige Autorisierung → Signiertes Token → Rückrufumleitung, wobei E-Mail das einzige ist, was die Vertrauensgrenze überschreitet.
 
-```an-diagram title="Ablauf der Identitätsföderation" summary="Dispatch authentifiziert den Benutzer und gibt eine kurzlebige signierte Bestätigung von etwas zurück – der verifizierten E-Mail. Die App wird per E-Mail verknüpft und erstellt eine eigene lokale Sitzung."
-{
-  "html": "<div class=\"diagram-sso\"><div class=\"diagram-card\" data-rough><strong>Client-App</strong><small class=\"diagram-muted\">own user store</small></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill\">authorize</span></div><div class=\"diagram-card\" data-rough><strong>Dispatch</strong><small class=\"diagram-muted\">identity authority</small><span class=\"diagram-pill accent\">authenticates human</span></div><div class=\"diagram-step\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><span class=\"diagram-pill accent\">302 + signed JWT</span></div><div class=\"diagram-card\" data-rough><strong>App-Callback</strong><small class=\"diagram-muted\">verify signature · scope:identity · exp &le; 2 min</small><span class=\"diagram-pill ok\">JIT-Verknüpfung per E-Mail</span><span class=\"diagram-pill ok\">mint local session</span></div></div>",
-  "css": ".diagram-sso{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}.diagram-sso .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px}.diagram-sso .diagram-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.diagram-sso .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-yntn6c" title={"Ablauf der Identitätsföderation"} summary={"Dispatch authentifiziert den Benutzer und gibt eine kurzlebige signierte Bestätigung von etwas zurück – der verifizierten E-Mail. Die App wird per E-Mail verknüpft und erstellt eine eigene lokale Sitzung."}>
+
+```html
+<div class="diagram-sso">
+  <div class="diagram-card" data-rough>
+    <strong>Client-App</strong
+    ><small class="diagram-muted">own user store</small>
+  </div>
+  <div class="diagram-step">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <span class="diagram-pill">authorize</span>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>Dispatch</strong
+    ><small class="diagram-muted">identity authority</small
+    ><span class="diagram-pill accent">authenticates human</span>
+  </div>
+  <div class="diagram-step">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <span class="diagram-pill accent">302 + signed JWT</span>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>App-Callback</strong
+    ><small class="diagram-muted"
+      >verify signature · scope:identity · exp &le; 2 min</small
+    ><span class="diagram-pill ok">JIT-Verknüpfung per E-Mail</span
+    ><span class="diagram-pill ok">mint local session</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-sso {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-sso .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 150px;
+}
+.diagram-sso .diagram-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.diagram-sso .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **App → Versenden (autorisieren).** Die App sendet den Benutzer an die Identitätsbehörde:
 
    ```
@@ -125,13 +178,61 @@ Das gesamte Modell basiert auf ein paar bewusst kleinen Garantien:
 
 Der Just-in-Time-Link ist eine einzelne Entscheidung, die vollständig auf der verifizierten E-Mail basiert:
 
-```an-diagram title="JIT-link Entscheidung" summary="Die Verknüpfung basiert auf der verifizierten E-Mail und ist nur additiv – vorhandene Konten werden unverändert wiederverwendet, neue E-Mails erstellen einen neuen lokalen Benutzer."
-{
-  "html": "<div class=\"diagram-jit\"><div class=\"diagram-node\" data-rough>Verifizierte E-Mail<br><small class=\"diagram-muted\">aus signiertem Identitäts-JWT</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-branch\"><div class=\"diagram-box\" data-rough>Local user exists?<span class=\"diagram-pill ok\">yes &rarr; reuse unchanged</span><span class=\"diagram-pill accent\">no &rarr; create local user</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Normale lokale Sitzung ausstellen</div></div></div>",
-  "css": ".diagram-jit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-node{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-jit .diagram-branch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-jit .diagram-box{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-jit .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1u8o7kt" title="JIT-link Entscheidung" summary={"Die Verknüpfung basiert auf der verifizierten E-Mail und ist nur additiv – vorhandene Konten werden unverändert wiederverwendet, neue E-Mails erstellen einen neuen lokalen Benutzer."}>
+
+```html
+<div class="diagram-jit">
+  <div class="diagram-node" data-rough>
+    Verifizierte E-Mail<br /><small class="diagram-muted"
+      >aus signiertem Identitäts-JWT</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-branch">
+    <div class="diagram-box" data-rough>
+      Local user exists?<span class="diagram-pill ok"
+        >yes &rarr; reuse unchanged</span
+      ><span class="diagram-pill accent">no &rarr; create local user</span>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-box" data-rough>Normale lokale Sitzung ausstellen</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-jit {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jit .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-jit .diagram-branch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-jit .diagram-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-jit .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Selbsthosting {#self-hosting}
 
 Jede Dispatch-Bereitstellung kann als Identitäts-Hub dienen – Sie sind nicht auf `dispatch.agent-native.com` beschränkt. Legen Sie `AGENT_NATIVE_IDENTITY_HUB_URL` in jeder Client-App so fest, dass es auf Ihre Dispatch-Instanz verweist: