@agent-native/core 0.79.26 → 0.79.27

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

@@ -14,13 +14,61 @@ Dies ist eine Ergänzung zur Post-hoc-Bewertung in [Observability](/docs/observa
 
 Der Runner löst eine anbieterunabhängige Engine/ein anbieterunabhängiges Modell aus der vorhandenen Registrierung auf – kein Modell ist fest codiert – sodass dieselbe Suite für jede Engine ausgeführt wird, für die die App konfiguriert ist.
 
-```an-diagram title="Vom festen Eingang bis zum Bereitstellungstor" summary="Der Läufer führt tatsächlich die Agentenschleife für jeden Fall aus, bewertet die Ausgabe und verlässt sie mit einem Wert ungleich Null, wenn einer der Punktezähler unter den Schwellenwert fällt – was ihn zu einem Drop-in-CI-Gate macht."
-{
-  "html": "<div class=\"eval-flow\"><div class=\"diagram-node\">*.eval.ts<br><small class=\"diagram-muted\">prompt + expected behavior</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Agentenschleife ausführen<br><small class=\"diagram-muted\">real engine/model</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Scorers<br><small class=\"diagram-muted\">every one must pass threshold</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box ok\">exit 0 &rarr; deploy</div><div class=\"diagram-box warn\">exit 1 &rarr; block</div></div></div>",
-  "css": ".eval-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eval-flow .diagram-node{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.eval-flow .diagram-col{display:flex;flex-direction:column;gap:8px}.eval-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-v07e0k" title="Vom festen Eingang bis zum Bereitstellungstor" summary={"Der Läufer führt tatsächlich die Agentenschleife für jeden Fall aus, bewertet die Ausgabe und verlässt sie mit einem Wert ungleich Null, wenn einer der Punktezähler unter den Schwellenwert fällt – was ihn zu einem Drop-in-CI-Gate macht."}>
+
+```html
+<div class="eval-flow">
+  <div class="diagram-node">
+    *.eval.ts<br /><small class="diagram-muted"
+      >prompt + expected behavior</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Agentenschleife ausführen<br /><small class="diagram-muted"
+      >real engine/model</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Scorers<br /><small class="diagram-muted"
+      >every one must pass threshold</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box ok">exit 0 &rarr; deploy</div>
+    <div class="diagram-box warn">exit 1 &rarr; block</div>
+  </div>
+</div>
+```
+
+```css
+.eval-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.eval-flow .diagram-node {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.eval-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.eval-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## Eine Bewertung schreiben {#writing}
 
 Legen Sie eine `*.eval.ts`-Datei an einer beliebigen Stelle in der App ab (oder eine `evals/*.ts`-Datei). Jede Datei `export default defineEval(...)` (oder exportiert ein Array davon):
@@ -80,13 +128,59 @@ Importiert von `@agent-native/core/eval`:
 
 `createScorer` erstellt einen Scorer aus einer 4-stufigen Pipeline im Mastra-Stil. Es ist nur `generateScore` erforderlich:
 
-```an-diagram title="Die 4-stufige Scorer-Pipeline" summary="Identitätsvorgaben vorverarbeiten und analysieren; Es ist nur „generateScore“ erforderlich. „analysieren“ kann einfaches JS ausführen oder über ctx einen LLM-Richter aufrufen."
-{
-  "html": "<div class=\"scorer\"><div class=\"diagram-card\"><span class=\"diagram-pill\">preprocess(run)</span><small class=\"diagram-muted\">transform the run/output &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">analyze(x, ctx)</span><small class=\"diagram-muted\">plain JS or LLM judge &middot; optional</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">generateScore(a)</span><small class=\"diagram-muted\">&rarr; 0..1 normalized &middot; <strong>required</strong></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">generateReason</span><small class=\"diagram-muted\">human-readable why &middot; optional</small></div></div>",
-  "css": ".scorer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scorer .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.scorer .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-q3uriz" title="Die 4-stufige Scorer-Pipeline" summary={"Identitätsvorgaben vorverarbeiten und analysieren; Es ist nur „generateScore“ erforderlich. „analysieren“ kann einfaches JS ausführen oder über ctx einen LLM-Richter aufrufen."}>
+
+```html
+<div class="scorer">
+  <div class="diagram-card">
+    <span class="diagram-pill">preprocess(run)</span
+    ><small class="diagram-muted"
+      >transform the run/output &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">analyze(x, ctx)</span
+    ><small class="diagram-muted"
+      >plain JS or LLM judge &middot; optional</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">generateScore(a)</span
+    ><small class="diagram-muted"
+      >&rarr; 0..1 normalized &middot; <strong>required</strong></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">generateReason</span
+    ><small class="diagram-muted">human-readable why &middot; optional</small>
+  </div>
+</div>
+```
+
+```css
+.scorer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.scorer .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.scorer .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```text
 preprocess(run)     → x          transform the run/output (optional)
 analyze(x, ctx)     → analysis   plain JS OR an LLM judge (optional)

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

@@ -22,13 +22,77 @@ Wenn eine Vorlage keine vom Benutzer erstellten Erweiterungen verfügbar machen
 agentenseitige Erweiterung actions und schnelle Anleitung beim Verlassen des Rests
 App-Agent intakt.
 
-```an-diagram title="Die Sandkastenbrücke" summary="Die Erweiterung HTML wird in einem isolierten Iframe ausgeführt und erreicht den Host nur über einen festen Satz von Bridge-Helfern – jeder Aufruf ist umfangreich und zugriffsüberprüft."
-{
-  "html": "<div class=\"ext-bridge\"><div class=\"diagram-card sandbox\" data-rough><span class=\"diagram-pill warn\">Sandboxed iframe</span><small class=\"diagram-muted\">Alpine.js HTML &middot; no host cookies, session, or DOM</small><div class=\"ext-helpers\"><span class=\"diagram-pill\">appAction</span><span class=\"diagram-pill\">appFetch</span><span class=\"diagram-pill\">dbQuery / dbExec</span><span class=\"diagram-pill\">extensionData</span><span class=\"diagram-pill\">extensionFetch</span></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Host-Template<br><small class=\"diagram-muted\">Actions, automatisch gescopes SQL</small></div><div class=\"diagram-box\">Secret proxy<br><small class=\"diagram-muted\"><code>${keys.NAME}</code>, domaingebunden</small></div><div class=\"diagram-box\">Externe APIs<br><small class=\"diagram-muted\">nur über extensionFetch</small></div></div></div>",
-  "css": ".ext-bridge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ext-bridge .sandbox{display:flex;flex-direction:column;gap:8px;padding:16px 18px;flex:1;min-width:240px}.ext-bridge .ext-helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.ext-bridge .diagram-col{display:flex;flex-direction:column;gap:8px}.ext-bridge .diagram-arrow{font-size:24px}"
+<Diagram id="doc-block-1yn00sz" title={"Die Sandkastenbrücke"} summary={"Die Erweiterung HTML wird in einem isolierten Iframe ausgeführt und erreicht den Host nur über einen festen Satz von Bridge-Helfern – jeder Aufruf ist umfangreich und zugriffsüberprüft."}>
+
+```html
+<div class="ext-bridge">
+  <div class="diagram-card sandbox" data-rough>
+    <span class="diagram-pill warn">Sandboxed iframe</span
+    ><small class="diagram-muted"
+      >Alpine.js HTML &middot; no host cookies, session, or DOM</small
+    >
+    <div class="ext-helpers">
+      <span class="diagram-pill">appAction</span
+      ><span class="diagram-pill">appFetch</span
+      ><span class="diagram-pill">dbQuery / dbExec</span
+      ><span class="diagram-pill">extensionData</span
+      ><span class="diagram-pill">extensionFetch</span>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&harr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Host-Template<br /><small class="diagram-muted"
+        >Actions, automatisch gescopes SQL</small
+      >
+    </div>
+    <div class="diagram-box">
+      Secret proxy<br /><small class="diagram-muted"
+        ><code>${keys.NAME}</code>, domaingebunden</small
+      >
+    </div>
+    <div class="diagram-box">
+      Externe APIs<br /><small class="diagram-muted"
+        >nur über extensionFetch</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.ext-bridge {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.ext-bridge .sandbox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 18px;
+  flex: 1;
+  min-width: 240px;
+}
+.ext-bridge .ext-helpers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.ext-bridge .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ext-bridge .diagram-arrow {
+  font-size: 24px;
 }
 ```
 
+</Diagram>
+
 Erweiterungen können auch **im lokalen Dateimodus** per Repo gesichert werden. In diesem Workflow
 `agent-native.json` deklariert einen `extensions`-Ordner, jede Erweiterung hat eine
 `extension.json`-Manifest plus eine HTML-Eintragsdatei, und die App rendert diese
@@ -220,14 +284,54 @@ Ein Slot ist ein benannter Widget-Bereich, den eine Vorlage enthält:
 
 Wenn eine Erweiterung **in einem Steckplatz installiert** wird, schiebt der Host den relevanten Kontext – die E-Mail-Adresse des Kontakts, die Dashboard-ID, die Ereignis-ID – in den Iframe. Die Erweiterung lautet `window.slotContext`, um zu wissen, was der Benutzer sieht.
 
-```an-diagram title="Slots übertragen Kontext in das Widget" summary="Die Host-Vorlage besitzt benannte Slots; Durch die Installation einer Erweiterung in einem wird window.slotContext für alles eingespeist, was der Benutzer gerade ansieht."
-{
-"html": "<div class=\"slot\"><div class=\"diagram-card\"><span class=\"diagram-pill\">Mail-Thread</span><small class=\"diagram-muted\">slot <code>mail.contact-sidebar.bottom</code></small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box accent\"><code>window.slotContext</code><br><small class=\"diagram-muted\">{ contactEmail }</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">Kontaktnotizen</span><small class=\"diagram-muted\">loads notes for that contact &mdash; same widget, different context</small></div></div>",
-"css": ".slot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.slot .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;min-width:180px}.slot .diagram-arrow{font-size:22px}"
-}
+<Diagram id="doc-block-4kt9b8" title={"Slots übertragen Kontext in das Widget"} summary={"Die Host-Vorlage besitzt benannte Slots; Durch die Installation einer Erweiterung in einem wird window.slotContext für alles eingespeist, was der Benutzer gerade ansieht."}>
+
+```html
+<div class="slot">
+  <div class="diagram-card">
+    <span class="diagram-pill">Mail-Thread</span
+    ><small class="diagram-muted"
+      >slot <code>mail.contact-sidebar.bottom</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box accent">
+    <code>window.slotContext</code><br /><small class="diagram-muted"
+      >{ contactEmail }</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">Kontaktnotizen</span
+    ><small class="diagram-muted"
+      >loads notes for that contact &mdash; same widget, different
+      context</small
+    >
+  </div>
+</div>
+```
 
+```css
+.slot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.slot .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  min-width: 180px;
+}
+.slot .diagram-arrow {
+  font-size: 22px;
+}
 ```
 
+</Diagram>
+
 ### Ein konkretes Beispiel
 
 Stellen Sie sich die Erweiterung „Kontaktnotizen“ aus der Galerie vor. Für sich genommen handelt es sich um ein eigenständiges Widget. Damit es in der Seitenleiste des E-Mail-Kontakts angezeigt wird:

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

@@ -19,13 +19,68 @@ Eine agentennative App ist von jedem MCP-kompatiblen Host erreichbar – Claude,
 
 Die externe Agentenbrücke schließt den Kreis. Zuerst verbinden Sie Ihren eigenen Agenten mit einer **gehosteten** App – entweder indem Sie den Remote-MCP URL der App in einen Chat-Host wie Claude oder ChatGPT einfügen oder indem Sie den Entwickler-Flow CLI für lokale Codierungsagenten ausführen. Dann erledigt der Agent die Arbeit über MCP und übergibt dem Benutzer entweder eine Inline-**MCP-App** UI in kompatiblen Hosts oder einen einzelnen **„Öffnen in <App> →“**-Link, der die echte App öffnet, die sich genau auf das konzentriert, was produziert wurde. Es verwendet den vorhandenen `navigate`/`application_state`-Vertrag, den der UI bereits alle 2 Sekunden entlädt (siehe [Context Awareness](/docs/context-awareness)) – es gibt keinen zweiten Navigationsmechanismus.
 
-```an-diagram title="Der Roundtrip des externen Agenten" summary="Ein externer Host ruft ein Tool über MCP auf; Die App gibt ein Artefakt und einen Link zum Öffnen zurück. Wenn Sie darauf klicken, wird die Browsersitzung aufgelöst und das Artefakt in der laufenden Benutzeroberfläche fokussiert – der Link trägt keinen privilegierten Status."
-{
-  "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>Externer Host<br><small class=\"diagram-muted\">Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">MCP-Werkzeug call</span><small class=\"diagram-muted\">e.g. <code>manage-draft</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>App erzeugt Artefakt<br><small class=\"diagram-muted\">+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>Benutzer klickt den Link</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill ok\"><code>/_agent-native/open</code></span><small class=\"diagram-muted\">resolves the <strong>browser</strong> session</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Writes <code>navigate</code> app-state<br><small class=\"diagram-muted\">UI fokussiert das Artefakt</small></div></div>",
-  "css": ".xa-trip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.xa-trip .center{display:flex;flex-direction:column;align-items:center;gap:4px}.xa-trip .diagram-arrow{font-size:22px;line-height:1}.xa-trip code{font-size:.85em}"
+<Diagram id="doc-block-1flceju" title="Der Roundtrip des externen Agenten" summary={"Ein externer Host ruft ein Tool über MCP auf; Die App gibt ein Artefakt und einen Link zum Öffnen zurück. Wenn Sie darauf klicken, wird die Browsersitzung aufgelöst und das Artefakt in der laufenden Benutzeroberfläche fokussiert – der Link trägt keinen privilegierten Status."}>
+
+```html
+<div class="xa-trip">
+  <div class="diagram-box" data-rough>
+    Externer Host<br /><small class="diagram-muted"
+      >Claude &middot; ChatGPT &middot; Codex &middot; Cursor</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">MCP-Werkzeug call</span
+    ><small class="diagram-muted">e.g. <code>manage-draft</code></small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    App erzeugt Artefakt<br /><small class="diagram-muted"
+      >+ <code>Open in &lt;app&gt; &rarr;</code> deep link / MCP App</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>Benutzer klickt den Link</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill ok"><code>/_agent-native/open</code></span
+    ><small class="diagram-muted"
+      >resolves the <strong>browser</strong> session</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Writes <code>navigate</code> app-state<br /><small class="diagram-muted"
+      >UI fokussiert das Artefakt</small
+    >
+  </div>
+</div>
+```
+
+```css
+.xa-trip {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.xa-trip .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.xa-trip .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.xa-trip code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 Die Identitätsregel ist das Sicherheitsscharnier: Der Link besteht nur aus `view` + Datensatz-IDs + Filter, und der auf den Datensatz fokussierte `navigate`-Schreibvorgang ist auf denjenigen beschränkt, der im **Browser** angemeldet ist – niemals auf das MCP-Token des externen Agenten. Aus diesem Grund kann der Link sicher in ein Terminal- oder Chat-Protokoll eingefügt werden.
 
 ## Welchen Agentenpfad benötigen Sie? {#which-agent-path}
@@ -247,13 +302,69 @@ Dies ist die kanonische Erklärung der MCP-Katalogebenen – andere Seiten verli
 
 Der MCP-Server stellt jedem Aufrufer standardmäßig einen kompakten Katalog bereit\*\* – gehostete Connectors (ChatGPT, Claude), Code-Clients (Claude Code, Cursor, Codex) und den lokalen CLI/stdio-Proxy gleichermaßen. Die vollständige Aktionsoberfläche wird nur bei ausdrücklicher Einwilligung bereitgestellt. Der Katalog wird niemals aus dem Clientnamen oder dem Benutzeragenten abgeleitet.
 
-```an-diagram title="Zwei Katalogebenen" summary="Jeder Anrufer erhält standardmäßig die Kompaktstufe; Die vollständige ~105-Tool-Oberfläche ist nur optional. Die Werkzeugsuche schließt die Lücke, sodass nichts wirklich verborgen bleibt."
-{
-  "html": "<div class=\"xa-tiers\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">Compact / connector tier &middot; default</span><strong>~20&ndash;30 tools</strong><small class=\"diagram-muted\">Template-declared app actions + cross-app builtins (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>, <code>create_embed_session</code>) + always-present <code>tool-search</code>.</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Full tier &middot; opt-in</span><strong>~105 Tools</strong><small class=\"diagram-muted\">Explicit opt-in only: <code>--full-catalog</code> token or <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small></div></div><p class=\"diagram-muted note\"><code>tool-search</code> reaches any full-tier tool on demand &mdash; so the compact default keeps context small without hiding capability.</p>",
-  "css": ".xa-tiers{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}.xa-tiers .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1;min-width:240px}.xa-tiers .diagram-arrow{align-self:center;font-size:24px;line-height:1}.xa-tiers .note{flex-basis:100%;margin:4px 0 0;font-size:.85em}.xa-tiers code{font-size:.85em}"
+<Diagram id="doc-block-1kyg3i1" title="Zwei Katalogebenen" summary={"Jeder Anrufer erhält standardmäßig die Kompaktstufe; Die vollständige ~105-Tool-Oberfläche ist nur optional. Die Werkzeugsuche schließt die Lücke, sodass nichts wirklich verborgen bleibt."}>
+
+```html
+<div class="xa-tiers">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill ok"
+      >Compact / connector tier &middot; default</span
+    ><strong>~20&ndash;30 tools</strong
+    ><small class="diagram-muted"
+      >Template-declared app actions + cross-app builtins
+      (<code>list_apps</code>, <code>open_app</code>, <code>ask_app</code>,
+      <code>create_embed_session</code>) + always-present
+      <code>tool-search</code>.</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">Full tier &middot; opt-in</span
+    ><strong>~105 Tools</strong
+    ><small class="diagram-muted"
+      >Explicit opt-in only: <code>--full-catalog</code> token or
+      <code>AGENT_NATIVE_MCP_FULL_CATALOG=1</code>.</small
+    >
+  </div>
+</div>
+<p class="diagram-muted note">
+  <code>tool-search</code> reaches any full-tier tool on demand &mdash; so the
+  compact default keeps context small without hiding capability.
+</p>
+```
+
+```css
+.xa-tiers {
+  display: flex;
+  align-items: stretch;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.xa-tiers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  flex: 1;
+  min-width: 240px;
+}
+.xa-tiers .diagram-arrow {
+  align-self: center;
+  font-size: 24px;
+  line-height: 1;
+}
+.xa-tiers .note {
+  flex-basis: 100%;
+  margin: 4px 0 0;
+  font-size: 0.85em;
+}
+.xa-tiers code {
+  font-size: 0.85em;
 }
 ```
 
+</Diagram>
+
 ### Kompakt-/Connector-Stufe (Standard) {#connector-tier}
 
 Standardmäßig sieht jeder verbundene Agent einen kleinen, kuratierten Katalog (ca. 20–30 Tools gegenüber ca. 105 in der gesamten Oberfläche):

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

@@ -28,13 +28,67 @@ Agent-native ist für Leute gedacht, die möchten, dass eine echte App und ein K
 
 Bei den meisten Apps wird die KI nachträglich eingebaut, sodass sie in der App eigentlich keine Aufgaben erledigen kann. In einer agentennativen App ist der Agent ein erstklassiger Bürger, der dasselbe actions, dieselbe Datenbank und denselben Status wie UI verwendet, sodass er alles tun kann, was die Schaltflächen können – und den eigenen Code der App ändern kann. Siehe [What Is Agent-Native?](/docs/what-is-agent-native#the-ladder).
 
-```an-diagram title="Angeschraubte KI vs. agent-native" summary="Eine angeschraubte Chat-Seitenleiste lebt in einer eigenen Welt. Ein agent-native-Agent nutzt dieselben Aktionen, dieselben Datenbanken und denselben Status wie die Benutzeroberfläche."
-{
-  "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">nachträglich angebaute KI</span><div class=\"diagram-node\">Chat-Seitenleiste</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>separate KI-Welt<br><small class=\"diagram-muted\">kann die App nicht steuern</small></div><div class=\"diagram-box diagram-muted\">App UI &amp; data</div></div><div class=\"diagram-divider\" aria-hidden=\"true\"></div><div class=\"diagram-col\"><span class=\"diagram-pill ok\">Agent-native</span><div class=\"diagram-row2\"><div class=\"diagram-node\">UI</div><div class=\"diagram-node\">Agent</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>shared actions, DB &amp; state</div></div></div>",
-  "css": ".diagram-vs{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap}.diagram-vs .diagram-col{display:flex;flex-direction:column;gap:8px;align-items:center;flex:1;min-width:200px}.diagram-vs .diagram-row2{display:flex;gap:8px}.diagram-vs .diagram-arrow{font-size:20px;line-height:1}.diagram-vs .diagram-divider{width:1px;align-self:stretch;background:currentColor;opacity:.15}"
+<Diagram id="doc-block-bhe28x" title="Angeschraubte KI vs. agent-native" summary={"Eine angeschraubte Chat-Seitenleiste lebt in einer eigenen Welt. Ein agent-native-Agent nutzt dieselben Aktionen, dieselben Datenbanken und denselben Status wie die Benutzeroberfläche."}>
+
+```html
+<div class="diagram-vs">
+  <div class="diagram-col">
+    <span class="diagram-pill warn">nachträglich angebaute KI</span>
+    <div class="diagram-node">Chat-Seitenleiste</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      separate KI-Welt<br /><small class="diagram-muted"
+        >kann die App nicht steuern</small
+      >
+    </div>
+    <div class="diagram-box diagram-muted">App UI &amp; data</div>
+  </div>
+  <div class="diagram-divider" aria-hidden="true"></div>
+  <div class="diagram-col">
+    <span class="diagram-pill ok">Agent-native</span>
+    <div class="diagram-row2">
+      <div class="diagram-node">UI</div>
+      <div class="diagram-node">Agent</div>
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>shared actions, DB &amp; state</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-vs {
+  display: flex;
+  align-items: stretch;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+.diagram-vs .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+.diagram-vs .diagram-row2 {
+  display: flex;
+  gap: 8px;
+}
+.diagram-vs .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-vs .diagram-divider {
+  width: 1px;
+  align-self: stretch;
+  background: currentColor;
+  opacity: 0.15;
 }
 ```
 
+</Diagram>
+
 ### Ist es Open Source? {#is-this-open-source}
 
 Ja. Das Framework und alle Vorlagen sind Open Source. Sie können alles lokal ausführen, selbst hosten oder die Cloud von Builder.io für verwaltetes Hosting, Zusammenarbeit und Teamfunktionen nutzen.
@@ -126,13 +180,49 @@ Ja. Legen Sie `DATABASE_URL` fest und das Framework erkennt es automatisch. Zu d
 
 SSE gibt Schreibvorgängen im selben Prozess einen sofortigen Pfad zum Browser, und eine einfache Abfrage des Versionszählers bleibt der Fallback, da sie in jeder Bereitstellungsumgebung funktioniert – einschließlich serverloser und Edge-Umgebungen, in denen dauerhafte Sockets möglicherweise nicht verfügbar sind. Siehe [Key Concepts — Live-Synchronisierung](/docs/key-concepts#polling-sync).
 
-```an-diagram title="SSE zuerst, Polling-Fallback" summary="Gleicher Prozess schreibt Stream sofort; Eine Abfrage des Versionszählers sorgt dafür, dass serverlose, Edge- und prozessübergreifende Schreibvorgänge konvergent bleiben."
-{
-  "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>DB-Schreibvorgang</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-node\">SSE<br><small class=\"diagram-muted\">/_agent-native/events &middot; instant</small></div><div class=\"diagram-node\">Polling<br><small class=\"diagram-muted\">/_agent-native/poll &middot; universal fallback</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Browser lädt neu</div></div>",
-  "css": ".diagram-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-transport .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-transport .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-pt97em" title="SSE zuerst, Polling-Fallback" summary={"Gleicher Prozess schreibt Stream sofort; Eine Abfrage des Versionszählers sorgt dafür, dass serverlose, Edge- und prozessübergreifende Schreibvorgänge konvergent bleiben."}>
+
+```html
+<div class="diagram-transport">
+  <div class="diagram-box" data-rough>DB-Schreibvorgang</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-node">
+      SSE<br /><small class="diagram-muted"
+        >/_agent-native/events &middot; instant</small
+      >
+    </div>
+    <div class="diagram-node">
+      Polling<br /><small class="diagram-muted"
+        >/_agent-native/poll &middot; universal fallback</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>Browser lädt neu</div>
+</div>
+```
+
+```css
+.diagram-transport {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-transport .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-transport .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ### Warum kann der UI einen LLM nicht direkt aufrufen? {#why-no-inline-llm-calls}
 
 KI ist nicht deterministisch, daher benötigen Sie einen Konversationsfluss, um Feedback zu geben und zu iterieren – keine One-Shot-Schaltflächen – und der Agent verfügt bereits über Ihre Codebasis, Anweisungen, skills und den Verlauf, der einem Inline-Anruf fehlt. Durch die Weiterleitung aller Daten über den Agenten kann die App auch von Slack, Telegram oder einem anderen Agenten gesteuert werden. Siehe [Key Concepts — Agent chat bridge](/docs/key-concepts#agent-chat-bridge).

package/docs/content/locales/de-DE/file-uploads.mdx

@@ -17,13 +17,70 @@ Die Reihenfolge der Anbieterauflösung lautet:
 2. **Builder.io-Anbieter** – integriert, wird automatisch aktiviert, wenn Builder.io verbunden ist
 3. **SQL Fallback** – speichert Dateien als Base64 in der Datenbank (gut für Entwickler, nicht für Produktion)
 
-```an-diagram title="Anordnung zur Lösung des Anbieters" summary="uploadFile() wählt den ersten konfigurierten Anbieter der Reihe nach aus. Der SQL-Fallback ist immer vorhanden, sodass Uploads ohne Setup funktionieren."
-{
-  "html": "<div class=\"diagram-upload\"><div class=\"diagram-box\" data-rough>uploadFile()<br><small class=\"diagram-muted\">POST /_agent-native/file-upload</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-step\"><span class=\"diagram-pill accent\">1</span><div class=\"diagram-node\">Vom Benutzer registriert<br><small class=\"diagram-muted\">registerFileUploadProvider() — S3, R2, GCS…</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill\">2</span><div class=\"diagram-node\">Builder.io<br><small class=\"diagram-muted\">automatisch nach Verbindung — per CDN bereitgestellt</small></div></div><div class=\"diagram-step\"><span class=\"diagram-pill warn\">3</span><div class=\"diagram-node\">SQL-Fallback<br><small class=\"diagram-muted\">base64 in DB — nur Entwicklung</small></div></div></div></div>",
-  "css": ".diagram-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-upload .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-upload .diagram-step{display:flex;align-items:center;gap:8px}.diagram-upload .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1f4e9e3" title={"Anordnung zur Lösung des Anbieters"} summary={"uploadFile() wählt den ersten konfigurierten Anbieter der Reihe nach aus. Der SQL-Fallback ist immer vorhanden, sodass Uploads ohne Setup funktionieren."}>
+
+```html
+<div class="diagram-upload">
+  <div class="diagram-box" data-rough>
+    uploadFile()<br /><small class="diagram-muted"
+      >POST /_agent-native/file-upload</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-step">
+      <span class="diagram-pill accent">1</span>
+      <div class="diagram-node">
+        Vom Benutzer registriert<br /><small class="diagram-muted"
+          >registerFileUploadProvider() — S3, R2, GCS…</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill">2</span>
+      <div class="diagram-node">
+        Builder.io<br /><small class="diagram-muted"
+          >automatisch nach Verbindung — per CDN bereitgestellt</small
+        >
+      </div>
+    </div>
+    <div class="diagram-step">
+      <span class="diagram-pill warn">3</span>
+      <div class="diagram-node">
+        SQL-Fallback<br /><small class="diagram-muted"
+          >base64 in DB — nur Entwicklung</small
+        >
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-upload {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-upload .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-upload .diagram-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-upload .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 <Endpoint id="doc-block-1xajgtg" title="Der Upload-Endpunkt" method="POST" path="/_agent-native/file-upload" summary={"Laden Sie eine Datei über den aktiven Anbieter hoch und erhalten Sie eine öffentliche URL zurück."} request={{
   "contentType": "multipart/form-data"
 }} responses={[