@agent-native/core 0.79.25 → 0.79.27

package/docs/content/locales/hi-IN/native-chat-ui.mdx

@@ -17,13 +17,65 @@ description: "एक्शन-घोषित देशी चैट रें
 जब किसी बाहरी होस्ट जैसे Claude, ChatGPT, Copilot, या कर्सर को रेंडर करना चाहिए
 आपके ऐप से एक इनलाइन रूट।
 
-```an-diagram title="मूल रेंडर पथ" summary="एक क्रिया रिटर्न JSON; रनटाइम एक स्पष्ट विजेट विवेचक या चैटयूआई.रेंडरर से मेल खाता है; AssistantChat एक वास्तविक React घटक स्थापित करता है। कोई आईफ्रेम नहीं, कोई HTML निष्पादन नहीं।"
-{
-  "html": "<div class=\"diagram-render\"><div class=\"diagram-node\">Action चलता है<br><small class=\"diagram-muted\">संरचित JSON लौटाता है</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\">Match</span><small class=\"diagram-muted\">explicit widget &middot; chatUI.renderer</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;AssistantChat&gt;<br><small class=\"diagram-muted\">React widget माउंट करता है</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill ok\">DataTable</div><div class=\"diagram-pill ok\">DataChart</div><div class=\"diagram-pill ok\">DataInsights</div></div></div>",
-  "css": ".diagram-render{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-render .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-render .col{display:flex;flex-direction:column;gap:6px;padding:12px}.diagram-render .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1ji33rr" title={"मूल रेंडर पथ"} summary={"एक क्रिया रिटर्न JSON; रनटाइम एक स्पष्ट विजेट विवेचक या चैटयूआई.रेंडरर से मेल खाता है; AssistantChat एक वास्तविक React घटक स्थापित करता है। कोई आईफ्रेम नहीं, कोई HTML निष्पादन नहीं।"}>
+
+```html
+<div class="diagram-render">
+  <div class="diagram-node">
+    Action चलता है<br /><small class="diagram-muted"
+      >संरचित JSON लौटाता है</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">Match</span
+    ><small class="diagram-muted"
+      >explicit widget &middot; chatUI.renderer</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;AssistantChat&gt;<br /><small class="diagram-muted"
+      >React widget माउंट करता है</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill ok">DataTable</div>
+    <div class="diagram-pill ok">DataChart</div>
+    <div class="diagram-pill ok">DataInsights</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-render {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-render .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-render .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+}
+.diagram-render .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## कार्रवाई-घोषित विजेट {#action-declared-widgets}
 
 मूल पथ के दो स्पष्ट भाग हैं:
@@ -208,13 +260,59 @@ export default defineAction({
 प्रत्येक कनेक्टर और एडाप्टर को उसके आयात पथ के साथ सूचीबद्ध करता है; अनुबंध स्वयं
 नीचे वर्णित है।
 
-```an-diagram title="BYO रनटाइम Agent-Native चैट शेल रखता है" summary="आपका बाहरी एजेंट एक कनेक्टर के माध्यम से सामान्यीकृत घटनाओं को स्ट्रीम करता है; Agent-Native कंपोज़र, ट्रांसक्रिप्ट, टूल कार्ड, अनुमोदन और मूल विजेट रखता है।"
-{
-  "html": "<div class=\"diagram-byo\"><div class=\"diagram-box\" data-rough>आपका एजेंट<br><small class=\"diagram-muted\">OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot; HTTP</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">connector</span><small class=\"diagram-muted\">सामान्यीकृत message-* / tool-* इवेंट</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill\">&lt;AssistantChat runtime=&hellip; /&gt;</div><small class=\"diagram-muted\">composer &middot; transcript &middot; tool cards</small><small class=\"diagram-muted\">approvals &middot; native widgets</small></div></div>",
-  "css": ".diagram-byo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-byo .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-byo .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-byo .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1kaurl9" title={"BYO रनटाइम Agent-Native चैट शेल रखता है"} summary={"आपका बाहरी एजेंट एक कनेक्टर के माध्यम से सामान्यीकृत घटनाओं को स्ट्रीम करता है; Agent-Native कंपोज़र, ट्रांसक्रिप्ट, टूल कार्ड, अनुमोदन और मूल विजेट रखता है।"}>
+
+```html
+<div class="diagram-byo">
+  <div class="diagram-box" data-rough>
+    आपका एजेंट<br /><small class="diagram-muted"
+      >OpenAI &middot; Claude &middot; Vercel AI &middot; AG-UI &middot;
+      HTTP</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">connector</span
+    ><small class="diagram-muted">सामान्यीकृत message-* / tool-* इवेंट</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill">&lt;AssistantChat runtime=&hellip; /&gt;</div>
+    <small class="diagram-muted"
+      >composer &middot; transcript &middot; tool cards</small
+    ><small class="diagram-muted">approvals &middot; native widgets</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-byo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-byo .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-byo .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-byo .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 सभी कनेक्टर `@agent-native/core/client/chat` (और रूट
 `@agent-native/core/client` प्रविष्टि)। जब आपका एजेंट
 एक POST एंडपॉइंट को उजागर कर सकता है जो SSE या NDJSON रनटाइम इवेंट लौटाता है:

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

@@ -18,13 +18,84 @@ await notify(
 );
 ```
 
-```an-diagram title="एक कॉल, अनेक मंजिलें" summary="सूचित करें() हमेशा मालिक-स्कोप वाली इनबॉक्स पंक्ति लिखता है, प्रत्येक पंजीकृत चैनल को समानांतर (सर्वोत्तम प्रयास) में प्रशंसक बनाता है, फिर इवेंट बस पर अधिसूचना भेजता है।"
-{
-  "html": "<div class=\"diagram-notify\"><div class=\"diagram-node\">notify(input, { owner })<br><small class=\"diagram-muted\">any server code &middot; action, automation, plugin</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel fan\" data-rough><div class=\"fan-row\"><span class=\"diagram-pill accent\">inbox</span><div class=\"diagram-box\" data-rough>notifications table &rarr; bell UI<br><small class=\"diagram-muted\">always on &middot; owner-scoped</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">webhook</span><div class=\"diagram-box\" data-rough>POST JSON to NOTIFICATIONS_WEBHOOK_URL<br><small class=\"diagram-muted\">best-effort</small></div></div><div class=\"fan-row\"><span class=\"diagram-pill\">custom</span><div class=\"diagram-box\" data-rough>registerNotificationChannel(...)<br><small class=\"diagram-muted\">best-effort &middot; runs in parallel</small></div></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">notification.sent</span><small class=\"diagram-muted\">event bus &middot; automations can chain</small></div></div>",
-  "css": ".diagram-notify{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-notify .fan{display:flex;flex-direction:column;gap:10px;padding:14px}.diagram-notify .fan-row{display:flex;align-items:center;gap:10px}.diagram-notify .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}.diagram-notify .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-169a9i7" title={"एक कॉल, अनेक मंजिलें"} summary={"सूचित करें() हमेशा मालिक-स्कोप वाली इनबॉक्स पंक्ति लिखता है, प्रत्येक पंजीकृत चैनल को समानांतर (सर्वोत्तम प्रयास) में प्रशंसक बनाता है, फिर इवेंट बस पर अधिसूचना भेजता है।"}>
+
+```html
+<div class="diagram-notify">
+  <div class="diagram-node">
+    notify(input, { owner })<br /><small class="diagram-muted"
+      >any server code &middot; action, automation, plugin</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel fan" data-rough>
+    <div class="fan-row">
+      <span class="diagram-pill accent">inbox</span>
+      <div class="diagram-box" data-rough>
+        notifications table &rarr; bell UI<br /><small class="diagram-muted"
+          >always on &middot; owner-scoped</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">webhook</span>
+      <div class="diagram-box" data-rough>
+        POST JSON to NOTIFICATIONS_WEBHOOK_URL<br /><small class="diagram-muted"
+          >best-effort</small
+        >
+      </div>
+    </div>
+    <div class="fan-row">
+      <span class="diagram-pill">custom</span>
+      <div class="diagram-box" data-rough>
+        registerNotificationChannel(...)<br /><small class="diagram-muted"
+          >best-effort &middot; runs in parallel</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">notification.sent</span
+    ><small class="diagram-muted"
+      >event bus &middot; automations can chain</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-notify {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-notify .fan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+.diagram-notify .fan-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-notify .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+}
+.diagram-notify .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## गंभीरताएं {#severities}
 
 | गंभीरता    | के लिए उपयोग करें                              |
@@ -44,13 +115,69 @@ await notify(
 
 वेबहुक चैनल मालिक के तदर्थ [secrets](/docs/security) के विरुद्ध URL और `NOTIFICATIONS_WEBHOOK_AUTH` दोनों में `${keys.NAME}` संदर्भों का समाधान करता है, इसलिए कच्चा मान कभी भी एजेंट के संदर्भ में प्रवेश नहीं करता है। प्रति-कुंजी URL अनुमति सूचियाँ लागू की जाती हैं - वही नियम जो ऑटोमेशन `web-request` टूल उपयोग करता है।
 
-```an-diagram title="चैनल और गंभीरता" summary="इनबॉक्स हमेशा चालू रहता है; वेबहुक को एक env var की आवश्यकता है; कस्टम चैनल स्टार्टअप पर पंजीकृत होते हैं। गंभीरता बैज स्टाइलिंग को संचालित करती है और इसे हर चैनल तक पहुंचाया जाता है।"
-{
-  "html": "<div class=\"diagram-channels\"><div class=\"diagram-panel col\" data-rough><strong>Channels</strong><div class=\"diagram-box\" data-rough>inbox<br><small class=\"diagram-muted\">always on &mdash; part of the primitive</small></div><div class=\"diagram-box\" data-rough>webhook<br><small class=\"diagram-muted\">needs NOTIFICATIONS_WEBHOOK_URL</small></div><div class=\"diagram-box\" data-rough>custom<br><small class=\"diagram-muted\">registerNotificationChannel()</small></div></div><div class=\"diagram-panel col\" data-rough><strong>गंभीरता badge चलाती है</strong><div class=\"sev-row\"><span class=\"diagram-pill\">info</span><span class=\"diagram-muted\">पुष्टियां, FYI</span></div><div class=\"sev-row\"><span class=\"diagram-pill warn\">warning</span><span class=\"diagram-muted\">look at soon</span></div><div class=\"sev-row\"><span class=\"diagram-pill accent\">critical</span><span class=\"diagram-muted\">needs immediate attention</span></div></div></div>",
-  "css": ".diagram-channels{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}.diagram-channels .col{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:240px}.diagram-channels .sev-row{display:flex;align-items:center;gap:10px}"
+<Diagram id="doc-block-1qzciak" title={"चैनल और गंभीरता"} summary={"इनबॉक्स हमेशा चालू रहता है; वेबहुक को एक env var की आवश्यकता है; कस्टम चैनल स्टार्टअप पर पंजीकृत होते हैं। गंभीरता बैज स्टाइलिंग को संचालित करती है और इसे हर चैनल तक पहुंचाया जाता है।"}>
+
+```html
+<div class="diagram-channels">
+  <div class="diagram-panel col" data-rough>
+    <strong>Channels</strong>
+    <div class="diagram-box" data-rough>
+      inbox<br /><small class="diagram-muted"
+        >always on &mdash; part of the primitive</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      webhook<br /><small class="diagram-muted"
+        >needs NOTIFICATIONS_WEBHOOK_URL</small
+      >
+    </div>
+    <div class="diagram-box" data-rough>
+      custom<br /><small class="diagram-muted"
+        >registerNotificationChannel()</small
+      >
+    </div>
+  </div>
+  <div class="diagram-panel col" data-rough>
+    <strong>गंभीरता badge चलाती है</strong>
+    <div class="sev-row">
+      <span class="diagram-pill">info</span
+      ><span class="diagram-muted">पुष्टियां, FYI</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill warn">warning</span
+      ><span class="diagram-muted">look at soon</span>
+    </div>
+    <div class="sev-row">
+      <span class="diagram-pill accent">critical</span
+      ><span class="diagram-muted">needs immediate attention</span>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-channels {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.diagram-channels .col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  min-width: 240px;
+}
+.diagram-channels .sev-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 ```
 
+</Diagram>
+
 ## API {#api}
 
 ### `notify(input, meta)` {#notify}

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

@@ -33,13 +33,61 @@ description: "एजेंट ट्रेस, मूल्यांकन, फ
 
 कोई कोड परिवर्तन की आवश्यकता नहीं है। उपकरण पारदर्शी रूप से `production-agent.ts` से जुड़ जाता है।
 
-```an-diagram title="प्रत्येक रन लूप को फीड करता है" summary="एक एजेंट रन एक ट्रेस, स्वचालित स्कोर और एक फीडबैक हुक उत्पन्न करता है - सभी ऐप के अपने SQL में संग्रहीत होते हैं और डैशबोर्ड पर सामने आते हैं। प्रयोगों ने ट्रैफ़िक को कॉन्फ़िग वेरिएंट में विभाजित कर दिया।"
-{
-  "html": "<div class=\"obs-loop\"><div class=\"diagram-node\">एजेंट रन<br><small class=\"diagram-muted\">production-agent.ts</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">स्वचालित रूप से कैप्चर</span><small class=\"diagram-muted\">tokens &middot; cost &middot; latency &middot; tool calls</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Traces &amp; spans</div><div class=\"diagram-box\">Evals (5 scorers + LLM judge)</div><div class=\"diagram-box\">Feedback &amp; frustration index</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node ok\">Dashboard<br><small class=\"diagram-muted\">scoped to the signed-in user</small></div></div>",
-  "css": ".obs-loop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.obs-loop .diagram-col{display:flex;flex-direction:column;gap:8px}.obs-loop .diagram-arrow{font-size:22px;line-height:1}.obs-loop .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-w0wj2q" title={"प्रत्येक रन लूप को फीड करता है"} summary={"एक एजेंट रन एक ट्रेस, स्वचालित स्कोर और एक फीडबैक हुक उत्पन्न करता है - सभी ऐप के अपने SQL में संग्रहीत होते हैं और डैशबोर्ड पर सामने आते हैं। प्रयोगों ने ट्रैफ़िक को कॉन्फ़िग वेरिएंट में विभाजित कर दिया।"}>
+
+```html
+<div class="obs-loop">
+  <div class="diagram-node">
+    एजेंट रन<br /><small class="diagram-muted">production-agent.ts</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">स्वचालित रूप से कैप्चर</span
+    ><small class="diagram-muted"
+      >tokens &middot; cost &middot; latency &middot; tool calls</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">Traces &amp; spans</div>
+    <div class="diagram-box">Evals (5 scorers + LLM judge)</div>
+    <div class="diagram-box">Feedback &amp; frustration index</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node ok">
+    Dashboard<br /><small class="diagram-muted"
+      >scoped to the signed-in user</small
+    >
+  </div>
+</div>
+```
+
+```css
+.obs-loop {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.obs-loop .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.obs-loop .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.obs-loop .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## डैशबोर्ड {#dashboard}
 
 एकल रूट वाले किसी भी टेम्पलेट में डैशबोर्ड जोड़ें:
@@ -147,13 +195,59 @@ PUT /_agent-native/observability/experiments/:id
 
 `<your-model-id>` / `<other-model-id>` के स्थान पर आपके इंजन द्वारा स्वीकार किए जाने वाले वास्तविक मॉडल पहचानकर्ताओं का उपयोग करें (मॉडल नाम अक्सर बदलते रहते हैं - वर्तमान आईडी के लिए अपने प्रदाता/इंजन की जांच करें)। एजेंट लूप स्वचालित रूप से उपयोगकर्ता के वेरिएंट का समाधान करता है और कॉन्फ़िगरेशन ओवरराइड लागू करता है। असाइनमेंट लगातार हैशिंग का उपयोग करता है - एक ही उपयोगकर्ता को हमेशा एक ही प्रकार मिलता है।
 
-```an-diagram title="सुसंगत-हैश वैरिएंट असाइनमेंट" summary="प्रत्येक उपयोगकर्ता एक स्थिर वैरिएंट के लिए हैश करता है, लूप उस वैरिएंट की कॉन्फ़िगरेशन ओवरराइड को लागू करता है, और परिणाम विश्वास अंतराल के साथ प्रति वैरिएंट रोल अप करते हैं।"
-{
-  "html": "<div class=\"exp\"><div class=\"diagram-node\">यूजर ID<br><small class=\"diagram-muted\">consistent hash</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-card\"><span class=\"diagram-pill\">control &middot; 50%</span><small class=\"diagram-muted\">कॉन्फिग override A</small></div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">treatment &middot; 50%</span><small class=\"diagram-muted\">कॉन्फिग override B</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">परिणाम per variant<br><small class=\"diagram-muted\">cost &middot; latency &middot; satisfaction</small></div></div>",
-  "css": ".exp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.exp .diagram-col{display:flex;flex-direction:column;gap:8px}.exp .diagram-card{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.exp .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-102vtgy" title={"सुसंगत-हैश वैरिएंट असाइनमेंट"} summary={"प्रत्येक उपयोगकर्ता एक स्थिर वैरिएंट के लिए हैश करता है, लूप उस वैरिएंट की कॉन्फ़िगरेशन ओवरराइड को लागू करता है, और परिणाम विश्वास अंतराल के साथ प्रति वैरिएंट रोल अप करते हैं।"}>
+
+```html
+<div class="exp">
+  <div class="diagram-node">
+    यूजर ID<br /><small class="diagram-muted">consistent hash</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-card">
+      <span class="diagram-pill">control &middot; 50%</span
+      ><small class="diagram-muted">कॉन्फिग override A</small>
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill accent">treatment &middot; 50%</span
+      ><small class="diagram-muted">कॉन्फिग override B</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    परिणाम per variant<br /><small class="diagram-muted"
+      >cost &middot; latency &middot; satisfaction</small
+    >
+  </div>
+</div>
+```
+
+```css
+.exp {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.exp .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.exp .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+}
+.exp .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## कॉन्फ़िगरेशन {#config}
 
 सभी सेटिंग्स `observability-config` कुंजी में संग्रहीत हैं:

package/docs/content/locales/hi-IN/observational-memory.mdx

@@ -19,13 +19,55 @@ description: "पृष्ठभूमि त्रि-स्तरीय सं
 | **टिप्पणियाँ**         | सघन, दिनांकित प्रविष्टियाँ जो कच्चे संदेशों के एक खंड को घटित होने वाले एक संक्षिप्त रिकॉर्ड में बदल देती हैं। |
 | **हाल के कच्चे संदेश** | अंतिम एन मोड़, **शब्दशः** रखा गया - कभी मुड़ा नहीं - इसलिए एजेंट हमेशा नवीनतम संदर्भ देखता है।                 |
 
-```an-diagram title="तीन स्तरीय, हाल तक आसवित" summary="पुराना उपसर्ग दिनांकित अवलोकनों और एक लंबे-चाप प्रतिबिंब में बदल जाता है; केवल नवीनतम मोड़ ही शब्दशः रहते हैं।"
-{
-  "html": "<div class=\"om\"><div class=\"diagram-card\"><span class=\"diagram-pill\">चिंतन</span><small class=\"diagram-muted\">अवलोकन लॉग से संक्षिप्त दीर्घ-कालिक सारांश</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">अवलोकन</span><small class=\"diagram-muted\">कच्चे संदेशों के हिस्सों को समेटती सघन, दिनांकित प्रविष्टियाँ</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&uarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">हाल के कच्चे संदेश</span><small class=\"diagram-muted\">last N turns, kept <strong>verbatim</strong> — कभी fold नहीं</small></div></div>",
-  "css": ".om{display:flex;flex-direction:column-reverse;align-items:stretch;gap:8px}.om .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.om .diagram-arrow{text-align:center;font-size:20px;line-height:1}"
+<Diagram id="doc-block-fuurz9" title={"तीन स्तरीय, हाल तक आसवित"} summary={"पुराना उपसर्ग दिनांकित अवलोकनों और एक लंबे-चाप प्रतिबिंब में बदल जाता है; केवल नवीनतम मोड़ ही शब्दशः रहते हैं।"}>
+
+```html
+<div class="om">
+  <div class="diagram-card">
+    <span class="diagram-pill">चिंतन</span
+    ><small class="diagram-muted"
+      >अवलोकन लॉग से संक्षिप्त दीर्घ-कालिक सारांश</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">अवलोकन</span
+    ><small class="diagram-muted"
+      >कच्चे संदेशों के हिस्सों को समेटती सघन, दिनांकित प्रविष्टियाँ</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&uarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">हाल के कच्चे संदेश</span
+    ><small class="diagram-muted"
+      >last N turns, kept <strong>verbatim</strong> — कभी fold नहीं</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: stretch;
+  gap: 8px;
+}
+.om .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.om .diagram-arrow {
+  text-align: center;
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 प्रत्येक मोड़ पर, रीड साइड इन्हें एक स्व-लेबल वाले `[Observational Memory]` ब्लॉक में इकट्ठा करता है जो कच्चे पुराने उपसर्ग को प्रतिस्थापित करता है, हाल ही में कच्ची विंडो को बरकरार रखता है, और मॉडल को कॉम्पैक्ट रिकॉर्ड को आधिकारिक मानने के लिए कहता है (पूरे काम को दोबारा न करें, रिकॉर्ड किए गए निर्णयों, नामों, तिथियों और स्थिति पर भरोसा करें)।
 
 ## संघनन कैसे चलता है {#compaction}
@@ -35,13 +77,52 @@ description: "पृष्ठभूमि त्रि-स्तरीय सं
 1. **ऑब्जर्वर** - एक बार जब थ्रेड के _unobserved_ संदेश अवलोकन टोकन सीमा से अधिक हो जाते हैं, तो उन्हें एक सघन अवलोकन प्रविष्टि में बदल देता है।
 2. **परावर्तक** - एक बार जब निरंतर अवलोकन लॉग स्वयं प्रतिबिंब टोकन सीमा से अधिक हो जाता है, तो अवलोकनों को उच्च-स्तरीय प्रतिबिंब में संघनित कर देता है।
 
-```an-diagram title="एक साफ़ मोड़ के बाद दो सर्वोत्तम प्रयास पास" summary="प्रत्येक अपनी सीमा से नीचे नो-ऑप्स पास करता है, इसलिए कॉम्पेक्टर को हर मोड़ पर चलाना सस्ता है। विफलताओं को निगल लिया जाता है और कभी विलंबता नहीं बढ़ती।"
-{
-  "html": "<div class=\"om-pass\"><div class=\"diagram-node\">साफ टर्न समाप्त<br><small class=\"diagram-muted\">fire-and-forget</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Observer</span><small class=\"diagram-muted\">unobserved tokens &gt; 30k? &rarr; fold into one observation</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Reflector</span><small class=\"diagram-muted\">observation log &gt; 40k? &rarr; condense into a reflection</small></div></div>",
-  "css": ".om-pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.om-pass .diagram-node,.om-pass .diagram-card{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.om-pass .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1i3ycx6" title={"एक साफ़ मोड़ के बाद दो सर्वोत्तम प्रयास पास"} summary={"प्रत्येक अपनी सीमा से नीचे नो-ऑप्स पास करता है, इसलिए कॉम्पेक्टर को हर मोड़ पर चलाना सस्ता है। विफलताओं को निगल लिया जाता है और कभी विलंबता नहीं बढ़ती।"}>
+
+```html
+<div class="om-pass">
+  <div class="diagram-node">
+    साफ टर्न समाप्त<br /><small class="diagram-muted">fire-and-forget</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Observer</span
+    ><small class="diagram-muted"
+      >unobserved tokens &gt; 30k? &rarr; fold into one observation</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">Reflector</span
+    ><small class="diagram-muted"
+      >observation log &gt; 40k? &rarr; condense into a reflection</small
+    >
+  </div>
+</div>
+```
+
+```css
+.om-pass {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.om-pass .diagram-node,
+.om-pass .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 14px;
+}
+.om-pass .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 दोनों अपनी सीमा से नीचे नो-ऑप पास करते हैं, इसलिए प्रत्येक मोड़ के बाद कॉम्पेक्टर को कॉल करना सस्ता है। चूँकि OM अस्थिर कच्चे उपसर्ग को स्थिर संकुचित पाठ से बदल देता है, यह एक लंबे धागे के घुमावों पर **कैश-स्थिर** संकेत भी रखता है।
 
 ओएम डेटा ऐप के अपने SQL डेटाबेस में रहता है, जिसका दायरा मालिक (और मौजूद होने पर संगठन) तक होता है - बाकी फ्रेमवर्क के समान स्कोपिंग मॉडल। इसे कभी भी उपयोगकर्ताओं के बीच साझा नहीं किया जाता है।

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

@@ -10,13 +10,54 @@ description: "प्रथम-रन कॉन्फ़िगरेशन के
 एजेंट चैट के लिए: एक एआई इंजन कनेक्ट करें, वैकल्पिक रूप से ऐप को साझा पर इंगित करें
 बुनियादी ढांचे, और प्रदाताओं को केवल तभी जोड़ें जब आपको उनकी आवश्यकता हो।
 
-```an-diagram title="सेटअप चेकलिस्ट" summary="केवल AI इंजन कनेक्ट करना आवश्यक है। पैनल पूर्णता को ट्रैक करता है और सभी आवश्यक चीजें पूरी हो जाने पर स्वतः छिप जाता है।"
-{
-  "html": "<div class=\"ob\"><div class=\"diagram-card\"><span class=\"diagram-pill warn\">required</span><strong>AI इंजन कनेक्ट करें</strong><small class=\"diagram-muted\">Connect Builder (one click) or paste an LLM key</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Database</strong><small class=\"diagram-muted\">set <code>DATABASE_URL</code></small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>Authentication</strong><small class=\"diagram-muted\">OAuth / access token</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">optional</span><strong>ईमेल डिलीवरी</strong><small class=\"diagram-muted\">Resend / SendGrid</small></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">all required done &rarr; panel auto-hides</div></div>",
-  "css": ".ob{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ob .diagram-card{display:flex;flex-direction:column;gap:3px;padding:12px 14px}.ob .diagram-arrow{font-size:22px}"
+<Diagram id="doc-block-achnga" title={"सेटअप चेकलिस्ट"} summary={"केवल AI इंजन कनेक्ट करना आवश्यक है। पैनल पूर्णता को ट्रैक करता है और सभी आवश्यक चीजें पूरी हो जाने पर स्वतः छिप जाता है।"}>
+
+```html
+<div class="ob">
+  <div class="diagram-card">
+    <span class="diagram-pill warn">required</span
+    ><strong>AI इंजन कनेक्ट करें</strong
+    ><small class="diagram-muted"
+      >Connect Builder (one click) or paste an LLM key</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Database</strong
+    ><small class="diagram-muted">set <code>DATABASE_URL</code></small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>Authentication</strong
+    ><small class="diagram-muted">OAuth / access token</small>
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill">optional</span><strong>ईमेल डिलीवरी</strong
+    ><small class="diagram-muted">Resend / SendGrid</small>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">all required done &rarr; panel auto-hides</div>
+</div>
+```
+
+```css
+.ob {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ob .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 14px;
+}
+.ob .diagram-arrow {
+  font-size: 22px;
 }
 ```
 
+</Diagram>
+
 ## अंतिम उपयोगकर्ताओं के लिए
 
 ### आप क्या देखेंगे