@agent-native/core 0.79.26 → 0.79.27

package/corpus/core/docs/content/locales/hi-IN/durable-resume.mdx

@@ -13,13 +13,56 @@ description: "जब एक होस्ट किया गया एजें
 
 टिकाऊ बायोडाटा उस अंतर को पाट देता है। फिर से शुरू करने पर, फ्रेमवर्क को पता चलता है कि कौन सा साइड-इफेक्टिंग टूल कॉल पहले ही पूरा हो चुका है और उन्हें दो परतों पर फिर से चलाने से इंकार कर देता है।
 
-```an-diagram title="दो परतें बायोडाटा पर डुप्लिकेट साइड इफेक्ट्स को रोकती हैं" summary="जर्नल टिकाऊ खाता-बही को पढ़ता है और पूर्व कॉलों को वर्गीकृत करता है; परत 1 मॉडल को बताती है, परत 2 दोबारा भेजे गए लेख को हार्ड-ब्लॉक करती है जो पूर्ण प्रविष्टि से मेल खाता है।"
-{
-  "html": "<div class=\"diagram-durable\"><div class=\"diagram-box\" data-rough>Run-event ledger<br><small class=\"diagram-muted\">tool_start / tool_done</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Tool-call journal</strong><small class=\"diagram-ok\">completed = start+done</small><small class=\"diagram-warn\">interrupted = start, no done</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">Layer 1 · prompt note &rarr; model</div><div class=\"diagram-pill accent\">लेयर 2 · hard-block re-dispatched write</div></div></div>",
-  "css": ".diagram-durable{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-durable .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-durable .diagram-arrow{font-size:22px;line-height:1}.diagram-durable .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1nv5pfk" title={"दो परतें बायोडाटा पर डुप्लिकेट साइड इफेक्ट्स को रोकती हैं"} summary={"जर्नल टिकाऊ खाता-बही को पढ़ता है और पूर्व कॉलों को वर्गीकृत करता है; परत 1 मॉडल को बताती है, परत 2 दोबारा भेजे गए लेख को हार्ड-ब्लॉक करती है जो पूर्ण प्रविष्टि से मेल खाता है।"}>
+
+```html
+<div class="diagram-durable">
+  <div class="diagram-box" data-rough>
+    Run-event ledger<br /><small class="diagram-muted"
+      >tool_start / tool_done</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Tool-call journal</strong
+    ><small class="diagram-ok">completed = start+done</small
+    ><small class="diagram-warn">interrupted = start, no done</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">Layer 1 · prompt note &rarr; model</div>
+    <div class="diagram-pill accent">
+      लेयर 2 · hard-block re-dispatched write
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-durable {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-durable .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-durable .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-durable .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## टूल-कॉल जर्नल {#journal}
 
 जर्नल एक **टिकाऊ रन-इवेंट लेजर पर शुद्ध रूप से पढ़ा जाने वाला** है - हॉट पाथ में कोई नया रिकॉर्डिंग हुक नहीं है। यह वर्तमान मोड़ के लिए पहले से रिकॉर्ड किए गए टूल कॉल को वर्गीकृत करता है:

package/corpus/core/docs/content/locales/hi-IN/embedding-sdk.mdx

@@ -11,13 +11,56 @@ Agent-Native को मौजूदा उत्पाद में एम्ब
 एम्बेडेड साइडकार, या एक पूर्ण ऐप, से प्रारंभ करें
 [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="एम्बेडिंग झिल्ली" summary="होस्ट ऐप सर्वर-साइड ऑथ और लाइव पेज संदर्भ प्रदान करता है; Agent-Native टिकाऊ साइडकार चलाता है और क्लाइंट क्रियाओं और होस्ट कमांड के माध्यम से खुले टैब तक पहुंचता है।"
-{
-  "html": "<div class=\"diagram-embed\"><div class=\"diagram-box\" data-rough><strong>होस्ट SaaS ऐप</strong><small class=\"diagram-muted\">आपका UI, आपका auth</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">getContext &rarr;</div><div class=\"diagram-pill\">&larr; क्लाइंट actions</div><div class=\"diagram-pill\">&larr; होस्ट commands</div></div><div class=\"diagram-panel center\" data-rough><strong>Agent-Native sidecar</strong><small class=\"diagram-muted\">टिकाऊ चैट · ऐप स्थिति · एक्सटेंशन</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>SQL<br><small class=\"diagram-muted\">framework तालिकाएँ</small></div></div>",
-  "css": ".diagram-embed{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-embed .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-embed .diagram-arrow{font-size:22px;line-height:1}.diagram-embed .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-dp2jx4" title={"एम्बेडिंग झिल्ली"} summary={"होस्ट ऐप सर्वर-साइड ऑथ और लाइव पेज संदर्भ प्रदान करता है; Agent-Native टिकाऊ साइडकार चलाता है और क्लाइंट क्रियाओं और होस्ट कमांड के माध्यम से खुले टैब तक पहुंचता है।"}>
+
+```html
+<div class="diagram-embed">
+  <div class="diagram-box" data-rough>
+    <strong>होस्ट SaaS ऐप</strong
+    ><small class="diagram-muted">आपका UI, आपका auth</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">getContext &rarr;</div>
+    <div class="diagram-pill">&larr; क्लाइंट actions</div>
+    <div class="diagram-pill">&larr; होस्ट commands</div>
+  </div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Agent-Native sidecar</strong
+    ><small class="diagram-muted">टिकाऊ चैट · ऐप स्थिति · एक्सटेंशन</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    SQL<br /><small class="diagram-muted">framework तालिकाएँ</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-embed {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-embed .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-embed .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-embed .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## यहां प्रारंभ करें: बैटरी-शामिल प्लगइन {#batteries-included}
 
 अधिकांश SaaS होस्ट के लिए, **पूर्ण एम्बेडेड रनटाइम का उपयोग करें** - सर्वर प्लगइन
@@ -373,13 +416,45 @@ const hostTools = createAgentNativeHostTools({
 
 CLAW-शैली के सहकर्मी के लिए, iframe अपने लाइव ब्राउज़र टैब को साइडकार बैकएंड के साथ भी पंजीकृत कर सकता है। फिर एजेंट को सामान्य बैकएंड टूल मिलते हैं जो एक अनुरोध को सूचीबद्ध करते हैं, आईफ्रेम उस पर दावा करता है, होस्ट पेज उसे निष्पादित करता है, और बैकएंड एजेंट को परिणाम लौटाता है।
 
-```an-diagram title="सर्वर-मध्यस्थ ब्राउज़र-सत्र ब्रिज" summary="एक बैकएंड टूल काम को कतारबद्ध करता है; पंजीकृत टैब इसका दावा करता है, इसे लाइव पेज पर चलाता है, और परिणाम एजेंट को लौटाता है - इसलिए backend/Slack/A2A एजेंट अभी भी खुले टैब को छू सकता है।"
-{
-  "html": "<div class=\"diagram-bridge\"><div class=\"diagram-node\" data-rough>बैकएंड एजेंट<br><small class=\"diagram-muted\">चैट · Slack · A2A</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>enqueue request<br><small class=\"diagram-muted\">/_agent-native/browser-sessions</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>लाइव टैब इसे claim करता है<br><small class=\"diagram-muted\">registered bridge</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill ok\">result &rarr; agent</div></div>",
-  "css": ".diagram-bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-bridge .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-qxjcvj" title={"सर्वर-मध्यस्थ ब्राउज़र-सत्र ब्रिज"} summary={"एक बैकएंड टूल काम को कतारबद्ध करता है; पंजीकृत टैब इसका दावा करता है, इसे लाइव पेज पर चलाता है, और परिणाम एजेंट को लौटाता है - इसलिए backend/Slack/A2A एजेंट अभी भी खुले टैब को छू सकता है।"}>
+
+```html
+<div class="diagram-bridge">
+  <div class="diagram-node" data-rough>
+    बैकएंड एजेंट<br /><small class="diagram-muted">चैट · Slack · A2A</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    enqueue request<br /><small class="diagram-muted"
+      >/_agent-native/browser-sessions</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    लाइव टैब इसे claim करता है<br /><small class="diagram-muted"
+      >registered bridge</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill ok">result &rarr; agent</div>
+</div>
+```
+
+```css
+.diagram-bridge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-bridge .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 साइडकार ऐप में, आईफ्रेम माउंट होने पर एक बार ब्राउज़र-सत्र ब्रिज शुरू करें:
 
 ```tsx

package/corpus/core/docs/content/locales/hi-IN/evals.mdx

@@ -14,13 +14,59 @@ description: " *.eval.ts परीक्षण मामले लिखें
 
 रनर मौजूदा रजिस्ट्री से एक प्रदाता-अज्ञेयवादी इंजन/मॉडल का समाधान करता है - कोई भी मॉडल हार्डकोड नहीं होता है - इसलिए ऐप जिस भी इंजन के लिए कॉन्फ़िगर किया गया है, वही सूट उसके विरुद्ध चलता है।
 
-```an-diagram title="निश्चित इनपुट से लेकर तैनाती गेट तक" summary="रनर वास्तव में प्रत्येक मामले पर एजेंट लूप चलाता है, आउटपुट स्कोर करता है, और यदि कोई स्कोरर सीमा से नीचे आता है तो गैर-शून्य से बाहर निकल जाता है - जिससे यह ड्रॉप-इन सीआई गेट बन जाता है।"
-{
-  "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\">एजेंट लूप चलाएँ<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-bztrc8" title={"निश्चित इनपुट से लेकर तैनाती गेट तक"} summary={"रनर वास्तव में प्रत्येक मामले पर एजेंट लूप चलाता है, आउटपुट स्कोर करता है, और यदि कोई स्कोरर सीमा से नीचे आता है तो गैर-शून्य से बाहर निकल जाता है - जिससे यह ड्रॉप-इन सीआई गेट बन जाता है।"}>
+
+```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">
+    एजेंट लूप चलाएँ<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>
+
 ## एक मूल्यांकन लिखना {#writing}
 
 एक `*.eval.ts` फ़ाइल को ऐप में कहीं भी छोड़ें (या एक `evals/*.ts` फ़ाइल)। प्रत्येक फ़ाइल `export default defineEval(...)` (या उनमें से एक सरणी निर्यात करती है):
@@ -80,13 +126,59 @@ interface AgentRunOutput {
 
 `createScorer` मास्ट्रा-शैली 4-चरणीय पाइपलाइन से एक स्कोरर बनाता है। केवल `generateScore` आवश्यक है:
 
-```an-diagram title="4-चरणीय स्कोरर पाइपलाइन" summary="पहचान के लिए पूर्वप्रक्रिया और डिफ़ॉल्ट का विश्लेषण; केवल जेनरेटस्कोर आवश्यक है। विश्लेषण सादा JS चला सकता है या ctx के माध्यम से LLM जज को कॉल कर सकता है।"
-{
-  "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-xk3owf" title={"4-चरणीय स्कोरर पाइपलाइन"} summary={"पहचान के लिए पूर्वप्रक्रिया और डिफ़ॉल्ट का विश्लेषण; केवल जेनरेटस्कोर आवश्यक है। विश्लेषण सादा JS चला सकता है या ctx के माध्यम से LLM जज को कॉल कर सकता है।"}>
+
+```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/corpus/core/docs/content/locales/hi-IN/extensions.mdx

@@ -22,13 +22,77 @@ description: "आपके उपयोगकर्ता आपके टेम
 एजेंट-फेसिंग एक्सटेंशन actions और शेष को छोड़ते समय त्वरित मार्गदर्शन
 ऐप एजेंट बरकरार।
 
-```an-diagram title="सैंडबॉक्स ब्रिज" summary="एक्सटेंशन HTML एक पृथक आईफ्रेम में चलता है और केवल ब्रिज हेल्पर्स के एक निश्चित सेट के माध्यम से होस्ट तक पहुंचता है - प्रत्येक कॉल का दायरा होता है और एक्सेस-चेक किया जाता है।"
-{
-  "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\">होस्ट टेम्पलेट<br><small class=\"diagram-muted\">actions, स्वतः scoped SQL दायरा</small></div><div class=\"diagram-box\">Secret proxy<br><small class=\"diagram-muted\"><code>${keys.NAME}</code>, डोमेन-लॉक्ड</small></div><div class=\"diagram-box\">बाहरी API<br><small class=\"diagram-muted\">सिर्फ 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-as3szb" title={"सैंडबॉक्स ब्रिज"} summary={"एक्सटेंशन HTML एक पृथक आईफ्रेम में चलता है और केवल ब्रिज हेल्पर्स के एक निश्चित सेट के माध्यम से होस्ट तक पहुंचता है - प्रत्येक कॉल का दायरा होता है और एक्सेस-चेक किया जाता है।"}>
+
+```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">
+      होस्ट टेम्पलेट<br /><small class="diagram-muted"
+        >actions, स्वतः scoped SQL दायरा</small
+      >
+    </div>
+    <div class="diagram-box">
+      Secret proxy<br /><small class="diagram-muted"
+        ><code>${keys.NAME}</code>, डोमेन-लॉक्ड</small
+      >
+    </div>
+    <div class="diagram-box">
+      बाहरी API<br /><small class="diagram-muted"
+        >सिर्फ 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>
+
 एक्सटेंशन को **स्थानीय फ़ाइल मोड में रेपो-समर्थित** भी किया जा सकता है। उस वर्कफ़्लो में,
 `agent-native.json` एक `extensions` फ़ोल्डर घोषित करता है, प्रत्येक एक्सटेंशन में एक
 `extension.json` मेनिफ़ेस्ट प्लस एक HTML प्रविष्टि फ़ाइल, और ऐप उन्हें प्रस्तुत करता है
@@ -220,14 +284,54 @@ iframe सैंडबॉक्स के अंदर, प्रत्येक
 
 जब कोई एक्सटेंशन **स्लॉट में इंस्टॉल** किया जाता है, तो होस्ट संबंधित संदर्भ - संपर्क का ईमेल, डैशबोर्ड आईडी, इवेंट आईडी - को आईफ्रेम में धकेलता है। उपयोगकर्ता क्या देख रहा है यह जानने के लिए एक्सटेंशन `window.slotContext` पढ़ता है।
 
-```an-diagram title="स्लॉट्स संदर्भ को विजेट में धकेलते हैं" summary="होस्ट टेम्पलेट नामित स्लॉट का स्वामी है; किसी एक्सटेंशन को इंस्टॉल करने से उपयोगकर्ता जो भी वर्तमान में देख रहा है, उसके लिए उसे window.slotContext फीड करता है।"
-{
-"html": "<div class=\"slot\"><div class=\"diagram-card\"><span class=\"diagram-pill\">मेल थ्रेड</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\">संपर्क नोट्स</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-p5k8z9" title={"स्लॉट्स संदर्भ को विजेट में धकेलते हैं"} summary={"होस्ट टेम्पलेट नामित स्लॉट का स्वामी है; किसी एक्सटेंशन को इंस्टॉल करने से उपयोगकर्ता जो भी वर्तमान में देख रहा है, उसके लिए उसे window.slotContext फीड करता है।"}>
+
+```html
+<div class="slot">
+  <div class="diagram-card">
+    <span class="diagram-pill">मेल थ्रेड</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">संपर्क नोट्स</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>
+
 ### एक ठोस उदाहरण
 
 गैलरी से संपर्क-नोट्स एक्सटेंशन की कल्पना करें। अपने आप में, यह एक स्टैंडअलोन विजेट है। इसे मेल संपर्क साइडबार के अंदर प्रदर्शित करने के लिए:

package/corpus/core/docs/content/locales/hi-IN/external-agents.mdx

@@ -19,13 +19,68 @@ search: "Claude ChatGPT Claude कोड Codex कर्सर Claude कोव
 
 बाहरी-एजेंट ब्रिज लूप को बंद कर देता है। सबसे पहले आप अपने एजेंट को **होस्टेड** ऐप से कनेक्ट करें - या तो ऐप के रिमोट MCP URL को Claude या ChatGPT जैसे चैट होस्ट में पेस्ट करके, या स्थानीय कोडिंग एजेंटों के लिए डेवलपर CLI फ्लो चलाकर। फिर एजेंट MCP पर काम करता है और उपयोगकर्ता को संगत होस्ट में एक इनलाइन **MCP ऐप** UI या एक एकल **"Open in <app> →"** लिंक सौंपता है जो वास्तविक ऐप को खोलता है जो वास्तव में उत्पादित किया गया था। यह मौजूदा `navigate` / `application_state` अनुबंध का पुन: उपयोग करता है, UI पहले से ही हर 2 सेकंड में समाप्त हो जाता है ([Context Awareness](/docs/context-awareness) देखें) - कोई दूसरा नेविगेशन तंत्र नहीं है।
 
-```an-diagram title="बाह्य-एजेंट राउंड-ट्रिप" summary="एक बाहरी होस्ट MCP पर एक टूल को कॉल करता है; ऐप एक आर्टिफैक्ट और एक ओपन लिंक लौटाता है। इसे क्लिक करने से ब्राउज़र सत्र हल हो जाता है और चल रहे यूआई में आर्टिफैक्ट केंद्रित हो जाता है - लिंक में कोई विशेषाधिकार प्राप्त स्थिति नहीं होती है।"
-{
-  "html": "<div class=\"xa-trip\"><div class=\"diagram-box\" data-rough>बाहरी होस्ट<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 टूल 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>ऐप artifact बनाता है<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>उपयोगकर्ता लिंक क्लिक करता है</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 artifact पर फोकस करती है</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-30qxsw" title={"बाह्य-एजेंट राउंड-ट्रिप"} summary={"एक बाहरी होस्ट MCP पर एक टूल को कॉल करता है; ऐप एक आर्टिफैक्ट और एक ओपन लिंक लौटाता है। इसे क्लिक करने से ब्राउज़र सत्र हल हो जाता है और चल रहे यूआई में आर्टिफैक्ट केंद्रित हो जाता है - लिंक में कोई विशेषाधिकार प्राप्त स्थिति नहीं होती है।"}>
+
+```html
+<div class="xa-trip">
+  <div class="diagram-box" data-rough>
+    बाहरी होस्ट<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 टूल 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>
+    ऐप artifact बनाता है<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>उपयोगकर्ता लिंक क्लिक करता है</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 artifact पर फोकस करती है</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>
+
 पहचान नियम सुरक्षा काज है: लिंक केवल `view` + रिकॉर्ड आईडी + फ़िल्टर है, और रिकॉर्ड-फ़ोकस `navigate` लेखन का दायरा उस व्यक्ति तक है जो **ब्राउज़र** में लॉग इन है - कभी भी बाहरी एजेंट का MCP टोकन नहीं। यही कारण है कि लिंक को टर्मिनल या चैट ट्रांसक्रिप्ट में चिपकाना सुरक्षित है।
 
 ## आपको किस एजेंट पथ की आवश्यकता है? {#which-agent-path}
@@ -247,13 +302,69 @@ OAuth प्रवाह ताज़ा-टोकन रोटेशन के
 
 MCP सर्वर प्रत्येक कॉलर को डिफ़ॉल्ट रूप से एक **कॉम्पैक्ट कैटलॉग प्रदान करता है** - होस्ट किए गए कनेक्टर (ChatGPT, Claude), कोड क्लाइंट (Claude कोड, कर्सर, Codex), और स्थानीय CLI/stdio प्रॉक्सी समान रूप से। पूर्ण कार्रवाई सतह केवल स्पष्ट ऑप्ट-इन पर ही प्रस्तुत की जाती है। कैटलॉग का अनुमान कभी भी ग्राहक के नाम या उपयोगकर्ता-एजेंट से नहीं लगाया जाता है।
 
-```an-diagram title="दो कैटलॉग स्तर" summary="प्रत्येक कॉल करने वाले को डिफ़ॉल्ट रूप से कॉम्पैक्ट टियर मिलता है; पूर्ण ~105-टूल सतह केवल ऑप्ट-इन है। टूल-सर्च अंतर को पाटता है इसलिए कुछ भी वास्तव में छिपा नहीं है।"
-{
-  "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 टूल</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-nba1kq" title={"दो कैटलॉग स्तर"} summary={"प्रत्येक कॉल करने वाले को डिफ़ॉल्ट रूप से कॉम्पैक्ट टियर मिलता है; पूर्ण ~105-टूल सतह केवल ऑप्ट-इन है। टूल-सर्च अंतर को पाटता है इसलिए कुछ भी वास्तव में छिपा नहीं है।"}>
+
+```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 टूल</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>
+
 ### कॉम्पैक्ट / कनेक्टर टियर (डिफ़ॉल्ट) {#connector-tier}
 
 डिफ़ॉल्ट रूप से प्रत्येक कनेक्टेड एजेंट एक छोटा, क्यूरेटेड कैटलॉग देखता है (~20-30 टूल बनाम पूर्ण सतह में ~105):