@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/hi-IN/faq.mdx

@@ -28,13 +28,65 @@ description: "एजेंट-नेटिव के बारे में स
 
 ज्यादातर ऐप्स एआई को एक विचार के रूप में लागू करते हैं जो वास्तव में ऐप में काम नहीं कर सकता है। एजेंट-नेटिव ऐप में एजेंट एक प्रथम श्रेणी का नागरिक होता है जो actions, डेटाबेस और स्थिति को UI के समान साझा करता है, इसलिए यह बटन द्वारा किया जा सकने वाला कुछ भी कर सकता है - और ऐप के स्वयं के कोड को संशोधित कर सकता है। [What Is Agent-Native?](/docs/what-is-agent-native#the-ladder) देखें.
 
-```an-diagram title="बोल्टेड-ऑन AI बनाम agent-native" summary="बोल्ट-ऑन चैट साइडबार अपनी ही दुनिया में रहता है। एक agent-native एजेंट UI के समान क्रियाएँ, डेटाबेस और स्थिति साझा करता है।"
-{
-  "html": "<div class=\"diagram-vs\"><div class=\"diagram-col\"><span class=\"diagram-pill warn\">ऊपर से जोड़ी गई AI</span><div class=\"diagram-node\">चैट साइडबार</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>अलग AI दुनिया<br><small class=\"diagram-muted\">ऐप को छू नहीं सकता</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-1wutpuf" title={"बोल्टेड-ऑन AI बनाम agent-native"} summary={"बोल्ट-ऑन चैट साइडबार अपनी ही दुनिया में रहता है। एक agent-native एजेंट UI के समान क्रियाएँ, डेटाबेस और स्थिति साझा करता है।"}>
+
+```html
+<div class="diagram-vs">
+  <div class="diagram-col">
+    <span class="diagram-pill warn">ऊपर से जोड़ी गई AI</span>
+    <div class="diagram-node">चैट साइडबार</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+    <div class="diagram-box" data-rough>
+      अलग AI दुनिया<br /><small class="diagram-muted">ऐप को छू नहीं सकता</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>
+
 ### क्या यह खुला स्रोत है? {#is-this-open-source}
 
 हां. रूपरेखा और सभी टेम्पलेट खुले स्रोत हैं। आप सब कुछ स्थानीय रूप से चला सकते हैं, स्वयं-होस्ट कर सकते हैं, या प्रबंधित होस्टिंग, सहयोग और टीम सुविधाओं के लिए Builder.io के क्लाउड का उपयोग कर सकते हैं।
@@ -126,13 +178,49 @@ description: "एजेंट-नेटिव के बारे में स
 
 SSE समान-प्रक्रिया ब्राउज़र के लिए एक तत्काल पथ लिखता है, और एक हल्का संस्करण-काउंटर पोल फ़ॉलबैक रहता है क्योंकि यह हर परिनियोजन वातावरण में काम करता है - सर्वर रहित और किनारे सहित, जहां लगातार सॉकेट उपलब्ध नहीं हो सकते हैं। [Key Concepts — लाइव सिंक](/docs/key-concepts#polling-sync) देखें.
 
-```an-diagram title="SSE प्रथम, मतदान फ़ॉलबैक" summary="समान-प्रक्रिया तुरंत स्ट्रीम लिखती है; एक संस्करण-काउंटर पोल सर्वर रहित, एज और क्रॉस-प्रोसेस लेखन को अभिसरण रखता है।"
-{
-  "html": "<div class=\"diagram-transport\"><div class=\"diagram-box\" data-rough>DB लेखन</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\">पोल<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>ब्राउज़र फिर से fetch करता है</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-1byzv3r" title={"SSE प्रथम, मतदान फ़ॉलबैक"} summary={"समान-प्रक्रिया तुरंत स्ट्रीम लिखती है; एक संस्करण-काउंटर पोल सर्वर रहित, एज और क्रॉस-प्रोसेस लेखन को अभिसरण रखता है।"}>
+
+```html
+<div class="diagram-transport">
+  <div class="diagram-box" data-rough>DB लेखन</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">
+      पोल<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>ब्राउज़र फिर से fetch करता है</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>
+
 ### UI सीधे LLM को कॉल क्यों नहीं कर सकता? {#why-no-inline-llm-calls}
 
 एआई गैर-नियतात्मक है, इसलिए आपको फीडबैक देने और पुनरावृत्त करने के लिए वार्तालाप प्रवाह की आवश्यकता है - एक-शॉट बटन की नहीं - और एजेंट के पास पहले से ही आपका कोडबेस, निर्देश, skills और इतिहास है जो इनलाइन कॉल में नहीं है। एजेंट के माध्यम से सब कुछ रूट करने से ऐप को Slack, टेलीग्राम या किसी अन्य एजेंट से संचालित किया जा सकता है। [Key Concepts — Agent chat bridge](/docs/key-concepts#agent-chat-bridge) देखें.

package/docs/content/locales/hi-IN/file-uploads.mdx

@@ -17,13 +17,70 @@ description: "फ़ाइल अपलोड स्टोरेज कॉन्
 2. **Builder.io प्रदाता** - अंतर्निहित, Builder.io कनेक्ट होने पर स्वचालित रूप से सक्रिय हो जाता है
 3. **SQL फ़ॉलबैक** — डेटाबेस में फ़ाइलों को बेस64 के रूप में संग्रहीत करता है (डेव के लिए ठीक है, उत्पादन के लिए नहीं)
 
-```an-diagram title="प्रदाता समाधान आदेश" summary="uploadFile() क्रम में पहले कॉन्फ़िगर किए गए प्रदाता को चुनता है। SQL फ़ॉलबैक हमेशा मौजूद रहता है इसलिए अपलोड शून्य सेटअप के साथ काम करते हैं।"
-{
-  "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\">उपयोगकर्ता-पंजीकृत<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\">कनेक्ट होने पर स्वतः — CDN से सर्व</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\">DB में base64 — केवल dev</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-1j4i20h" title={"प्रदाता समाधान आदेश"} summary={"uploadFile() क्रम में पहले कॉन्फ़िगर किए गए प्रदाता को चुनता है। SQL फ़ॉलबैक हमेशा मौजूद रहता है इसलिए अपलोड शून्य सेटअप के साथ काम करते हैं।"}>
+
+```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">
+        उपयोगकर्ता-पंजीकृत<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"
+          >कनेक्ट होने पर स्वतः — CDN से सर्व</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"
+          >DB में base64 — केवल dev</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-1b993nk" title={"अपलोड समापन बिंदु"} method="POST" path="/_agent-native/file-upload" summary={"सक्रिय प्रदाता के माध्यम से एक फ़ाइल अपलोड करें और एक सार्वजनिक URL वापस प्राप्त करें।"} request={{
   "contentType": "multipart/form-data"
 }} responses={[

package/docs/content/locales/hi-IN/frames.mdx

@@ -20,13 +20,55 @@ description: "स्थानीय डेव फ़्रेम, एम्ब
 आपका ऐप कोड समान है, भले ही इसे कौन सा फ़्रेम होस्ट करता हो। एजेंट बात करता है
 प्रत्येक मामले में समान actions और एप्लिकेशन स्थिति के माध्यम से आपके ऐप पर।
 
-```an-diagram title="तीन फ़्रेम, एक रनटाइम" summary="आपका ऐप और एजेंट पैनल हर फ्रेम में समान हैं; केवल उनके चारों ओर का आवरण बदलता है।"
-{
-  "html": "<div class=\"diagram-frames\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">एम्बेडेड पैनल</span><small class=\"diagram-muted\">हर ऐप में शामिल · dev + prod</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">स्थानीय dev फ्रेम</span><small class=\"diagram-muted\">iframe में ऐप + पैनल + CLI टर्मिनल</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Builder.io क्लाउड फ्रेम</span><small class=\"diagram-muted\">होस्टेड: सहयोग · दृश्य संपादन · समानांतर रन</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>वही runtime<br><small class=\"diagram-muted\">आपका ऐप · actions · application state</small></div></div>",
-  "css": ".diagram-frames{display:flex;flex-direction:column;gap:10px;align-items:stretch}.diagram-frames .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-frames .diagram-arrow{font-size:22px;line-height:1;align-self:center}"
+<Diagram id="doc-block-1ipncy0" title={"तीन फ़्रेम, एक रनटाइम"} summary={"आपका ऐप और एजेंट पैनल हर फ्रेम में समान हैं; केवल उनके चारों ओर का आवरण बदलता है।"}>
+
+```html
+<div class="diagram-frames">
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill accent">एम्बेडेड पैनल</span
+    ><small class="diagram-muted">हर ऐप में शामिल · dev + prod</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">स्थानीय dev फ्रेम</span
+    ><small class="diagram-muted">iframe में ऐप + पैनल + CLI टर्मिनल</small>
+  </div>
+  <div class="diagram-card" data-rough>
+    <span class="diagram-pill">Builder.io क्लाउड फ्रेम</span
+    ><small class="diagram-muted"
+      >होस्टेड: सहयोग · दृश्य संपादन · समानांतर रन</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    वही runtime<br /><small class="diagram-muted"
+      >आपका ऐप · actions · application state</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-frames {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+}
+.diagram-frames .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-frames .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+  align-self: center;
 }
 ```
 
+</Diagram>
+
 ## एंबेडेड एजेंट पैनल {#embedded-agent}
 
 एम्बेडेड पैनल वह एजेंट साइडबार है जिसे आपका ऐप रेंडर करता है। यह
@@ -57,13 +99,51 @@ description: "स्थानीय डेव फ़्रेम, एम्ब
   कोडिंग-टूल सूची और साझा UI अनुबंध, देखें
   [Agent-Native Code UI](/docs/code-agents-ui).
 
-```an-diagram title="कोड-अनुरोध गेटिंग" summary="कोड-टाइप किए गए संदेश को कोड-सक्षम फ़्रेम की आवश्यकता होती है। एक कनेक्टेड के साथ, अनुरोध मार्ग वहां; बिना किसी के, पैनल बताता है कि कोड परिवर्तन के लिए Desktop या Builder की आवश्यकता होती है।"
-{
-  "html": "<div class=\"diagram-gate\"><div class=\"diagram-node\" data-rough>message<br><small class=\"diagram-muted\">type: \\\"code\\\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>code-capable frame connected?</div><div class=\"diagram-col\"><div class=\"diagram-pill ok\">yes &rarr; route to frame, show code-agent indicator</div><div class=\"diagram-pill warn\">no &rarr; dialog: needs Desktop or Builder</div></div></div>",
-  "css": ".diagram-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-gate .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-gate .diagram-arrow{font-size:22px;line-height:1}.diagram-gate .center{text-align:center}"
+<Diagram id="doc-block-k2k7s3" title={"कोड-अनुरोध गेटिंग"} summary={"कोड-टाइप किए गए संदेश को कोड-सक्षम फ़्रेम की आवश्यकता होती है। एक कनेक्टेड के साथ, अनुरोध मार्ग वहां; बिना किसी के, पैनल बताता है कि कोड परिवर्तन के लिए Desktop या Builder की आवश्यकता होती है।"}>
+
+```html
+<div class="diagram-gate">
+  <div class="diagram-node" data-rough>
+    message<br /><small class="diagram-muted">type: \"code\"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    code-capable frame connected?
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill ok">
+      yes &rarr; route to frame, show code-agent indicator
+    </div>
+    <div class="diagram-pill warn">
+      no &rarr; dialog: needs Desktop or Builder
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-gate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-gate .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-gate .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-gate .center {
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 "कोड मोड" एजेंट-क्षमता टॉगल है - पर्यावरण विकास मोड से अलग
 (`NODE_ENV` / Vite). क्लाइंट हुक `useCodeMode()` है। (देखें
 बैक-कम्पैट उपनामों के लिए [Compatibility notes](#compatibility)।)

package/docs/content/locales/hi-IN/getting-started.mdx

@@ -152,13 +152,43 @@ pnpm dev
 वह एक क्रिया अब चैट UI, CLI, HTTP, MCP, A2A, से उपलब्ध है
 अनुसूचित नौकरियां, और webhooks। एक बार परिभाषित करें, कहीं से भी कॉल करें।
 
-```an-diagram title="एक क्रिया, हर सतह" summary="एक defineAction फ़ाइल प्रत्येक उपभोक्ता को बिना किसी अतिरिक्त वायरिंग के प्रदान करती है।"
-{
-  "html": "<div class=\"diagram-fan\"><div class=\"diagram-box\" data-rough>defineAction</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-surfaces\"><span class=\"diagram-pill\">चैट UI</span><span class=\"diagram-pill\">CLI</span><span class=\"diagram-pill\">HTTP</span><span class=\"diagram-pill\">MCP</span><span class=\"diagram-pill\">A2A</span><span class=\"diagram-pill\">शेड्यूल किए गए जॉब</span><span class=\"diagram-pill\">Webhooks</span></div></div>",
-  "css": ".diagram-fan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fan .diagram-surfaces{display:flex;flex-wrap:wrap;gap:8px;max-width:420px}.diagram-fan .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1odbgvm" title={"एक क्रिया, हर सतह"} summary={"एक defineAction फ़ाइल प्रत्येक उपभोक्ता को बिना किसी अतिरिक्त वायरिंग के प्रदान करती है।"}>
+
+```html
+<div class="diagram-fan">
+  <div class="diagram-box" data-rough>defineAction</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-surfaces">
+    <span class="diagram-pill">चैट UI</span><span class="diagram-pill">CLI</span
+    ><span class="diagram-pill">HTTP</span><span class="diagram-pill">MCP</span
+    ><span class="diagram-pill">A2A</span
+    ><span class="diagram-pill">शेड्यूल किए गए जॉब</span
+    ><span class="diagram-pill">Webhooks</span>
+  </div>
+</div>
+```
+
+```css
+.diagram-fan {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fan .diagram-surfaces {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 420px;
+}
+.diagram-fan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## राज्य का निर्माण हुआ है
 
 हेडलेस का मतलब स्टेटलेस नहीं है। Actions, सत्र, एप्लिकेशन स्थिति, थ्रेड्स,

package/docs/content/locales/hi-IN/harness-agents.mdx

@@ -23,13 +23,54 @@ search: "हार्नेस एजेंट एजेंटहार्ने
 स्वयं का लूप शुरू से अंत तक होता है, इसलिए Agent-Native इसे एक सत्र के रूप में चलाता है, एकल के रूप में नहीं
 मॉडल कॉल.
 
-```an-diagram title="एक हार्नेस का अपना लूप होता है; Agent-Native सत्र चलाता है" summary="एजेंटहार्नेस सब्सट्रेट creates/resumes मूल सत्र, इसकी घटनाओं को सामान्य प्रतिलेख में स्ट्रीम करता है, और मोड़ों के बीच SQL में फिर से शुरू करता है।"
-{
-  "html": "<div class=\"diagram-harness\"><div class=\"diagram-box\" data-rough><strong>AgentHarness substrate</strong><small class=\"diagram-muted\">@agent-native/core/agent/harness</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><strong>Native harness loop</strong><small class=\"diagram-muted\">Claude Code · Codex · Pi — own tools, sandbox, compaction</small></div><div class=\"diagram-col\"><div class=\"diagram-pill accent\">events &rarr; transcript</div><div class=\"diagram-pill ok\">resumeState &rarr; SQL session</div></div></div>",
-  "css": ".diagram-harness{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-harness .diagram-col{display:flex;flex-direction:column;gap:8px}.diagram-harness .diagram-arrow{font-size:22px;line-height:1}.diagram-harness .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-19f4tip" title={"एक हार्नेस का अपना लूप होता है; Agent-Native सत्र चलाता है"} summary={"एजेंटहार्नेस सब्सट्रेट creates/resumes मूल सत्र, इसकी घटनाओं को सामान्य प्रतिलेख में स्ट्रीम करता है, और मोड़ों के बीच SQL में फिर से शुरू करता है।"}>
+
+```html
+<div class="diagram-harness">
+  <div class="diagram-box" data-rough>
+    <strong>AgentHarness substrate</strong
+    ><small class="diagram-muted">@agent-native/core/agent/harness</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <strong>Native harness loop</strong
+    ><small class="diagram-muted"
+      >Claude Code · Codex · Pi — own tools, sandbox, compaction</small
+    >
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill accent">events &rarr; transcript</div>
+    <div class="diagram-pill ok">resumeState &rarr; SQL session</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-harness {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-harness .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.diagram-harness .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-harness .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## मुझे कौन सा कोडिंग दस्तावेज़ चाहिए? {#which-doc}
 
 | आप चाहते हैं…                                                                      | उपयोग                                        |
@@ -213,13 +254,41 @@ any other agent run. Pass an already-created `session` instead of `createSession
 **अपारदर्शी** है - Agent-Native इसे संग्रहीत करता है और वापस सौंप देता है, लेकिन कभी निरीक्षण नहीं करता या
 इसकी व्याख्या करता है।
 
-```an-diagram title="मोड़ों, प्रक्रियाओं और तैनाती को फिर से शुरू करें" summary="प्रत्येक मोड़ एक अपारदर्शी बायोडेटा को SQL में अलग कर देता है; अगला चरण चैट इतिहास को दोबारा चलाने के बजाय इसे वापस createSession में फीड कर देता है।"
-{
-  "html": "<div class=\"diagram-resume\"><div class=\"diagram-node\" data-rough>टर्न N<br><small class=\"diagram-muted\">streamTurn</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>detach &rarr; resumeState<br><small class=\"diagram-muted\">अपारदर्शी · SQL harness सेशन</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\" data-rough>टर्न N+1<br><small class=\"diagram-muted\">createSession.resumeState</small></div></div>",
-  "css": ".diagram-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-resume .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-2mf2og" title={"मोड़ों, प्रक्रियाओं और तैनाती को फिर से शुरू करें"} summary={"प्रत्येक मोड़ एक अपारदर्शी बायोडेटा को SQL में अलग कर देता है; अगला चरण चैट इतिहास को दोबारा चलाने के बजाय इसे वापस createSession में फीड कर देता है।"}>
+
+```html
+<div class="diagram-resume">
+  <div class="diagram-node" data-rough>
+    टर्न N<br /><small class="diagram-muted">streamTurn</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    detach &rarr; resumeState<br /><small class="diagram-muted"
+      >अपारदर्शी · SQL harness सेशन</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node" data-rough>
+    टर्न N+1<br /><small class="diagram-muted">createSession.resumeState</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-resume {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-resume .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```ts
 import {
   getLatestAgentHarnessSessionForThread,

package/docs/content/locales/hi-IN/human-approval.mdx

@@ -80,13 +80,60 @@ description: "उच्च-परिणाम वाली कार्रवा
 
 ## एंड-टू-एंड {#flow}
 
-```an-diagram title="अनुमोदन में रुकावट" summary="एक गेटेड कॉल रन() सक्रिय होने से पहले टर्न को रोक देती है। अनुमोदन कॉल की कुंजी ले जाने वाले टर्न को फिर से जारी करता है; तभी दुष्प्रभाव होता है।"
-{
-  "html": "<div class=\"diagram-approve\"><div class=\"diagram-box\" data-rough>एजेंट send-email कॉल करता है</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel warn\" data-rough><strong>Gate truthy है, कॉल अभी approved नहीं</strong><small class=\"diagram-muted\">loop emits tool_start + approval_required { tool, input, approvalKey }</small><span class=\"diagram-pill warn\">turn pauses &mdash; run() did NOT execute</span></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>मानव चैट में Approve क्लिक करता है<br><small class=\"diagram-muted\">क्लाइंट approvedToolCalls: [approvalKey] के साथ टर्न फिर जारी करता है</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel ok\" data-rough><span class=\"diagram-pill ok\">Gate sees the key &rarr; run() executes &rarr; email sends</span></div></div>",
-  "css": ".diagram-approve{display:flex;flex-direction:column;align-items:center;gap:8px}.diagram-approve .diagram-panel{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px 16px;text-align:center}.diagram-approve .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-fxub02" title={"अनुमोदन में रुकावट"} summary={"एक गेटेड कॉल रन() सक्रिय होने से पहले टर्न को रोक देती है। अनुमोदन कॉल की कुंजी ले जाने वाले टर्न को फिर से जारी करता है; तभी दुष्प्रभाव होता है।"}>
+
+```html
+<div class="diagram-approve">
+  <div class="diagram-box" data-rough>एजेंट send-email कॉल करता है</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel warn" data-rough>
+    <strong>Gate truthy है, कॉल अभी approved नहीं</strong
+    ><small class="diagram-muted"
+      >loop emits tool_start + approval_required { tool, input, approvalKey
+      }</small
+    ><span class="diagram-pill warn"
+      >turn pauses &mdash; run() did NOT execute</span
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    मानव चैट में Approve क्लिक करता है<br /><small class="diagram-muted"
+      >क्लाइंट approvedToolCalls: [approvalKey] के साथ टर्न फिर जारी करता
+      है</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel ok" data-rough>
+    <span class="diagram-pill ok"
+      >Gate sees the key &rarr; run() executes &rarr; email sends</span
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-approve {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-approve .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+}
+.diagram-approve .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 फ्रेमवर्क में इस गेट का विहित (और जानबूझकर दुर्लभ) उपयोग मेल टेम्पलेट की `send-email` कार्रवाई है, जो `needsApproval: true` सेट करता है ताकि एजेंट स्वतंत्र रूप से ड्राफ्ट और कतारबद्ध हो सके लेकिन वास्तव में किसी मानव द्वारा विशिष्ट प्रेषण को मंजूरी दिए बिना कभी भी संदेश नहीं भेज सकता है।
 
 ## संबंधित