@agent-native/core 0.79.26 → 0.80.0

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>
+
 ## अंतिम उपयोगकर्ताओं के लिए
 
 ### आप क्या देखेंगे

package/docs/content/locales/hi-IN/plan-plugin.mdx

@@ -14,13 +14,70 @@ Agent-Native **प्लान** ऐप एक इंस्टॉल करन
 - **दो skills** - `/visual-plan` (विहित प्रवेश बिंदु) और `/visual-recap`।
 - **प्लान MCP कनेक्टर** - `https://plan.agent-native.com` (MCP एंडपॉइंट `https://plan.agent-native.com/_agent-native/mcp`, सर्वर नाम `plan`) पर होस्ट किए गए ऐप के खिलाफ पंजीकृत है।
 
-```an-diagram title="तीन मार्ग, एक बंडल" summary="यूनिवर्सल CLI, Claude Code प्लगइन, और Codex प्लगइन सभी समान दो कौशल और होस्टेड प्लान कनेक्टर स्थापित करते हैं।"
-{
-  "html": "<div class=\"diagram-routes\"><div class=\"diagram-col\"><div class=\"diagram-node\">Universal CLI<br><small class=\"diagram-muted\">skills add visual-plan</small></div><div class=\"diagram-node\">Claude Code प्लगइन<br><small class=\"diagram-muted\">/plugin install</small></div><div class=\"diagram-node\">Codex प्लगइन<br><small class=\"diagram-muted\">codex plugin add</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">/visual-plan</span><span class=\"diagram-pill accent\">/visual-recap</span><small class=\"diagram-muted\">two skills</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">Plan MCP connector<br><small class=\"diagram-muted\">plan.agent-native.com/_agent-native/mcp</small></div></div>",
-  "css": ".diagram-routes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-routes .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-routes .diagram-arrow{font-size:22px;line-height:1}.diagram-routes .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-routes .center .diagram-pill{margin:2px}"
+<Diagram id="doc-block-gdfyxv" title={"तीन मार्ग, एक बंडल"} summary={"यूनिवर्सल CLI, Claude Code प्लगइन, और Codex प्लगइन सभी समान दो कौशल और होस्टेड प्लान कनेक्टर स्थापित करते हैं।"}>
+
+```html
+<div class="diagram-routes">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Universal CLI<br /><small class="diagram-muted"
+        >skills add visual-plan</small
+      >
+    </div>
+    <div class="diagram-node">
+      Claude Code प्लगइन<br /><small class="diagram-muted"
+        >/plugin install</small
+      >
+    </div>
+    <div class="diagram-node">
+      Codex प्लगइन<br /><small class="diagram-muted">codex plugin add</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">/visual-plan</span
+    ><span class="diagram-pill accent">/visual-recap</span
+    ><small class="diagram-muted">two skills</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    Plan MCP connector<br /><small class="diagram-muted"
+      >plan.agent-native.com/_agent-native/mcp</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-routes {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-routes .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-routes .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-routes .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-routes .center .diagram-pill {
+  margin: 2px;
 }
 ```
 
+</Diagram>
+
 डिफ़ॉल्ट रूप से, दोनों skills होस्ट किए गए प्लान ऐप पर प्रकाशित होते हैं - वे इसके माध्यम से एक प्लान बनाते हैं
 MCP कनेक्टर और समीक्षा के लिए आपको एक लिंक या इनलाइन योजना सौंपें। वे कभी डंप नहीं करते
 एक इनलाइन Markdown/ASCII योजना को चैट में डिलिवरेबल के रूप में पेश किया जाएगा। यदि एक योजना उपकरण
@@ -82,13 +139,47 @@ npx @agent-native/core@latest plan local serve --dir plans/<slug> --kind plan --
 टिप्पणियाँ, स्क्रीनशॉट और योजना इतिहास तब तक अनुपलब्ध हैं जब तक आप स्पष्ट रूप से नहीं बता देते
 बाद में प्रकाशित करें।
 
-```an-diagram title="होस्टेड बनाम स्थानीय-फ़ाइलें मोड" summary="डिफ़ॉल्ट रूप से कौशल कनेक्टर के माध्यम से प्रकाशित होते हैं; लोकल-फ़ाइलें मोड डिस्क पर MDX लिखता है और इसके बजाय लोकलहोस्ट ब्रिज के माध्यम से पूर्वावलोकन करता है।"
-{
-  "html": "<div class=\"diagram-modes\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">डिफॉल्ट · होस्टेड</span><strong>Plan ऐप में प्रकाशित करें</strong><small class=\"diagram-muted\">MCP connector &rarr; hosted DB &rarr; share links, comments, history, screenshots</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">स्थानीय फाइलों की गोपनीयता</span><strong>MDX को डिस्क पर लिखें</strong><small class=\"diagram-muted\">plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr; hosted Plan UI reads local source. No DB लेखनs until <code>publish-visual-plan</code>.</small></div></div>",
-  "css": ".diagram-modes{display:flex;gap:14px;flex-wrap:wrap}.diagram-modes .diagram-card{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:16px 18px}"
+<Diagram id="doc-block-ah49lf" title={"होस्टेड बनाम स्थानीय-फ़ाइलें मोड"} summary={"डिफ़ॉल्ट रूप से कौशल कनेक्टर के माध्यम से प्रकाशित होते हैं; लोकल-फ़ाइलें मोड डिस्क पर MDX लिखता है और इसके बजाय लोकलहोस्ट ब्रिज के माध्यम से पूर्वावलोकन करता है।"}>
+
+```html
+<div class="diagram-modes">
+  <div class="diagram-card">
+    <span class="diagram-pill accent">डिफॉल्ट · होस्टेड</span
+    ><strong>Plan ऐप में प्रकाशित करें</strong
+    ><small class="diagram-muted"
+      >MCP connector &rarr; hosted DB &rarr; share links, comments, history,
+      screenshots</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">स्थानीय फाइलों की गोपनीयता</span
+    ><strong>MDX को डिस्क पर लिखें</strong
+    ><small class="diagram-muted"
+      >plan.mdx + canvas.mdx + prototype.mdx &rarr; localhost bridge &rarr;
+      hosted Plan UI reads local source. No DB लेखनs until
+      <code>publish-visual-plan</code>.</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-modes {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-modes .diagram-card {
+  flex: 1 1 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
 }
 ```
 
+</Diagram>
+
 Agent Native डेस्कटॉप में होस्ट की गई योजनाओं के लिए एक अलग स्थानीय-फ़ाइल सिंक पथ है:
 डेस्कटॉप ऐप होस्ट किए गए प्लान को स्थानीय MDX फ़ाइलों में मिरर कर सकता है और संपादनों को वापस आयात कर सकता है
 प्लान ऐप को क्लोन किए बिना या CLI चलाए बिना। वह वर्कफ़्लो होस्ट

package/docs/content/locales/hi-IN/pr-visual-recap.mdx

@@ -24,13 +24,72 @@ description: "एक GitHub एक्शन जो प्रत्येक प
 7. एक एकल चिपचिपा पीआर टिप्पणी डालता है जो इंटरैक्टिव रीकैप के लिंक के बगल में एक `<picture>` तत्व (GitHub के कैमो इमेज प्रॉक्सी के माध्यम से परोसा गया) के साथ स्क्रीनशॉट **इनलाइन** को एम्बेड करता है।
 8. `Visual Recap` चेक को सफल, छोड़े गए या तटस्थ के रूप में पूरा करता है।
 
-```an-diagram title="प्रत्येक पीआर पुश पर क्या होता है" summary="एक सीमित अंतर एक वास्तविक कोडिंग एजेंट को फीड करता है, जो एक पुनर्कथन लिखता है; वर्कफ़्लो इसका स्क्रीनशॉट लेता है और एक तीखी टिप्पणी डालता है।"
-{
-  "html": "<div class=\"diagram-recap\"><div class=\"diagram-node\">PR push<br><small class=\"diagram-muted\">bounded base&hellip;head diff</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">कोडिंग एजेंट<br><small class=\"diagram-muted\">Claude Code / Codex diff पढ़ता है</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-visual-recap</span><small class=\"diagram-muted\">publishes recap plan</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Headless Chrome<br><small class=\"diagram-muted\">light + dark screenshots</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">एक स्थायी PR टिप्पणी<br><small class=\"diagram-muted\">inline screenshot + plan link</small></div></div><div class=\"diagram-foot diagram-muted\">Plus an informational <span class=\"diagram-pill\">Visual Recap</span> check &mdash; non-blocking, never required.</div>",
-  "css": ".diagram-recap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-recap .diagram-arrow{font-size:20px;line-height:1}.diagram-recap .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-recap .diagram-foot{flex-basis:100%;margin-top:10px;font-size:13px}"
+<Diagram id="doc-block-1o1ogbi" title={"प्रत्येक पीआर पुश पर क्या होता है"} summary={"एक सीमित अंतर एक वास्तविक कोडिंग एजेंट को फीड करता है, जो एक पुनर्कथन लिखता है; वर्कफ़्लो इसका स्क्रीनशॉट लेता है और एक तीखी टिप्पणी डालता है।"}>
+
+```html
+<div class="diagram-recap">
+  <div class="diagram-node">
+    PR push<br /><small class="diagram-muted"
+      >bounded base&hellip;head diff</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    कोडिंग एजेंट<br /><small class="diagram-muted"
+      >Claude Code / Codex diff पढ़ता है</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-visual-recap</span
+    ><small class="diagram-muted">publishes recap plan</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Headless Chrome<br /><small class="diagram-muted"
+      >light + dark screenshots</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    एक स्थायी PR टिप्पणी<br /><small class="diagram-muted"
+      >inline screenshot + plan link</small
+    >
+  </div>
+</div>
+<div class="diagram-foot diagram-muted">
+  Plus an informational <span class="diagram-pill">Visual Recap</span> check
+  &mdash; non-blocking, never required.
+</div>
+```
+
+```css
+.diagram-recap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-recap .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-recap .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-recap .diagram-foot {
+  flex-basis: 100%;
+  margin-top: 10px;
+  font-size: 13px;
 }
 ```
 
+</Diagram>
+
 एक री-पुश उसी योजना को अपडेट करता है और उसी स्थान पर वही चिपचिपी टिप्पणी करता है - कोई अनाथ योजना नहीं, कोई टिप्पणी स्पैम नहीं।
 
 ## इसे स्थापित करना
@@ -157,13 +216,72 @@ npx @agent-native/core@latest recap setup
 
 इसे स्थापित करने के लिए, फ़ाइल को [BuilderIO/agent-native](https://github.com/BuilderIO/agent-native/blob/main/.github/workflows/pr-visual-recap-fork.yml) से मौजूदा `pr-visual-recap.yml` के साथ अपने रेपो की `.github/workflows/` निर्देशिका में कॉपी करें। वही रहस्य (`PLAN_RECAP_TOKEN`, `ANTHROPIC_API_KEY`) लागू होते हैं।
 
-```an-diagram title="कांटा पीआर सहमति गेट" summary="फ़ोर्क पीआर को डिफ़ॉल्ट रूप से कोई रहस्य नहीं मिलता; विश्वसनीय लेखक स्वचालित रूप से चलते हैं, और बाहरी योगदानकर्ताओं को एक नए अनुरक्षक पुनर्कथन लेबल की आवश्यकता होती है।"
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-node\">फोर्क PR खुला<br><small class=\"diagram-muted\">main workflow has no secrets</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">trusted author</span><small class=\"diagram-muted\">OWNER, MEMBER, या COLLABORATOR अपने आप चलता है</small></div><div class=\"diagram-card\"><span class=\"diagram-pill warn\">outside contributor</span><small class=\"diagram-muted\">maintainer diff review करता है, फिर apply करता है <code>recap</code></small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">गेट जांचें<br><small class=\"diagram-muted\">fork PR? &amp; trusted or fresh label?</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box ok\">रीकैप रन<br><small class=\"diagram-muted\">सिर्फ base-repo code · fork diff text input है</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-arrow{font-size:20px;line-height:1}.diagram-fork .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px}"
+<Diagram id="doc-block-1ot51uz" title={"कांटा पीआर सहमति गेट"} summary={"फ़ोर्क पीआर को डिफ़ॉल्ट रूप से कोई रहस्य नहीं मिलता; विश्वसनीय लेखक स्वचालित रूप से चलते हैं, और बाहरी योगदानकर्ताओं को एक नए अनुरक्षक पुनर्कथन लेबल की आवश्यकता होती है।"}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-node">
+    फोर्क PR खुला<br /><small class="diagram-muted"
+      >main workflow has no secrets</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">trusted author</span
+    ><small class="diagram-muted"
+      >OWNER, MEMBER, या COLLABORATOR अपने आप चलता है</small
+    >
+  </div>
+  <div class="diagram-card">
+    <span class="diagram-pill warn">outside contributor</span
+    ><small class="diagram-muted"
+      >maintainer diff review करता है, फिर apply करता है
+      <code>recap</code></small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    गेट जांचें<br /><small class="diagram-muted"
+      >fork PR? &amp; trusted or fresh label?</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box ok">
+    रीकैप रन<br /><small class="diagram-muted"
+      >सिर्फ base-repo code · fork diff text input है</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-fork .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ### लेबल गेट कैसे काम करता है
 
 1. एक कांटा योगदानकर्ता एक पीआर खोलता है। सामान्य `pull_request` वर्कफ़्लो रुक जाता है क्योंकि GitHub फोर्क रन से रहस्य छुपाता है।