@agent-native/core 0.79.26 → 0.80.0

package/corpus/core/docs/content/locales/ar-SA/template-forms.mdx

@@ -18,13 +18,71 @@ Forms عبارة عن أداة إنشاء نماذج أصلية للوكيل. ق
 
 عند فتح التطبيق، ترى النماذج والمحرر الحالي والمعاينة المباشرة. يمكن للوكيل إنشاء نموذج من موجه، وتحديث تسميات الحقول وخياراتها، وتغيير التحقق من الصحة، وتوصيل وجهات الإرسال باستخدام نفس actions الذي يستخدمه UI.
 
-```an-diagram title="بناء ونشر وجمع" summary="يقوم الوكيل والمحرر المرئي بتحرير تعريف نموذج SQL-backed واحد. لم تتم مصادقة صفحة التعبئة العامة، ويتم توجيه عمليات الإرسال من جانب الخادم إلى وجهاتك."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">موجه الوكيل<br><small class=\"diagram-muted\">\"add an NPS question\"</small></div><div class=\"diagram-node\">محرر مرئي<br><small class=\"diagram-muted\">التسميات والتحقق والترتيب</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">create-form · update-form</span><small class=\"diagram-muted\">JSON للحقول وJSON للإعدادات</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">forms table<br><small class=\"diagram-muted\">SQL عبر Drizzle</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">صفحة تعبئة عامة<br><small class=\"diagram-muted\">unauthenticated</small></div><div class=\"diagram-box\">responses<br><small class=\"diagram-muted\">+ Slack / webhook / جداول</small></div></div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-15vs9gk" title={"بناء ونشر وجمع"} summary={"يقوم الوكيل والمحرر المرئي بتحرير تعريف نموذج SQL-backed واحد. لم تتم مصادقة صفحة التعبئة العامة، ويتم توجيه عمليات الإرسال من جانب الخادم إلى وجهاتك."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      موجه الوكيل<br /><small class="diagram-muted"
+        >"add an NPS question"</small
+      >
+    </div>
+    <div class="diagram-node">
+      محرر مرئي<br /><small class="diagram-muted"
+        >التسميات والتحقق والترتيب</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">create-form · update-form</span
+    ><small class="diagram-muted">JSON للحقول وJSON للإعدادات</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    forms table<br /><small class="diagram-muted">SQL عبر Drizzle</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      صفحة تعبئة عامة<br /><small class="diagram-muted">unauthenticated</small>
+    </div>
+    <div class="diagram-box">
+      responses<br /><small class="diagram-muted"
+        >+ Slack / webhook / جداول</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## ما يمكنك فعله به
 
 - **إنشاء النماذج بشكل تحادثي.** "إنشاء نموذج اتصال"، "أضف سؤال نتيجة NPS"، "اجعل حقل البريد الإلكتروني مطلوبًا." يقوم الوكيل بتحديث مخطط النموذج وتحديثات المعاينة من الحالة المدعومة SQL.

package/corpus/core/docs/content/locales/ar-SA/template-mail.mdx

@@ -18,13 +18,69 @@ description: "عميل بريد إلكتروني مدعوم من الوكيل.
 
 عند فتح التطبيق، يظل صندوق الوارد الذي يحتوي على لوحة المفاتيح وعرض سلسلة الرسائل يركزان على البريد نفسه. يعرف الوكيل دائمًا العرض الذي أنت فيه والموضوع الذي قمت بفتحه، لذلك يمكنك أن تقول "أرشفة هذا" أو "صياغة رفض ودي" دون توضيح معنى "هذا".
 
-```an-diagram title="كيف يتدفق طلب البريد" summary="تعمل اختصارات لوحة المفاتيح ومطالبات الوكيل على تشغيل نفس الإجراءات. البريد الإلكتروني موجود في Gmail؛ المسودات والأتمتة والتتبع مباشرة في SQL وapplication_state."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">أنت تقود<br><small class=\"diagram-muted\">J/K/E/R اختصارات</small></div><div class=\"diagram-node\">أنت تسأل الوكيل<br><small class=\"diagram-muted\">\"صياغة تراجع ودي\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Actions</span><small class=\"diagram-muted\">list-emails · get-thread · manage-draft · send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">Gmail<br><small class=\"diagram-muted\">حسابات متعددة، عبر OAuth</small></div><div class=\"diagram-box\">SQL + application_state<br><small class=\"diagram-muted\">مسودات · أتمتة · تتبع</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">يتم تحديث البريد الوارد مباشرة</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1l5dwfu" title={"كيف يتدفق طلب البريد"} summary={"تعمل اختصارات لوحة المفاتيح ومطالبات الوكيل على تشغيل نفس الإجراءات. البريد الإلكتروني موجود في Gmail؛ المسودات والأتمتة والتتبع مباشرة في SQL وapplication_state."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      أنت تقود<br /><small class="diagram-muted">J/K/E/R اختصارات</small>
+    </div>
+    <div class="diagram-node">
+      أنت تسأل الوكيل<br /><small class="diagram-muted"
+        >"صياغة تراجع ودي"</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Actions</span
+    ><small class="diagram-muted"
+      >list-emails · get-thread · manage-draft · send</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">
+      Gmail<br /><small class="diagram-muted">حسابات متعددة، عبر OAuth</small>
+    </div>
+    <div class="diagram-box">
+      SQL + application_state<br /><small class="diagram-muted"
+        >مسودات · أتمتة · تتبع</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">يتم تحديث البريد الوارد مباشرة</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## ما يمكنك فعله به
 
 - **قراءة البريد الإلكتروني وفرزه** باستخدام اختصارات لوحة المفاتيح (`J`/`K` للتنقل، `E` للأرشفة، `R` للرد، `C` للإنشاء).

package/corpus/core/docs/content/locales/ar-SA/template-plan.mdx

@@ -23,13 +23,70 @@ Codex، أو رمز Claude، أو Markdown، أو خطة التنفيذ المل
 سطح المراجعة نفسه، بحيث يمكنك التعليق والتعليق وإرسال التعليقات مرة أخرى إلى
 الوكيل بنفس الطريقة.
 
-```an-diagram title="أمرين، وسطح مراجعة واحد" summary="يتم نشر كلا الأمرين من خلال موصل Plan MCP المستضاف في نفس سطح التعليق التوضيحي والتعليق."
-{
-  "html": "<div class=\"diagram-plan\"><div class=\"diagram-col\"><div class=\"diagram-node\"><span class=\"diagram-pill accent\">/visual-plan</span><small class=\"diagram-muted\">قبل الكود - البنية وواجهة UI وإعادة التنظيم</small></div><div class=\"diagram-node\"><span class=\"diagram-pill\">/visual-recap</span><small class=\"diagram-muted\">بعد الكود - PR و commit و branch و diff</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\">موصل Plan MCP<br><small class=\"diagram-muted\">plan.agent-native.com</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">سطح المراجعة<br><small class=\"diagram-muted\">مخططات · إطارات سلكية · كود مشروح · تعليقات</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-node\">وكيل البرمجة<br><small class=\"diagram-muted\">تمت إعادة الملاحظات</small></div></div>",
-  "css": ".diagram-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-plan .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-plan .diagram-arrow{font-size:22px;line-height:1}.diagram-plan .center{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}"
+<Diagram id="doc-block-kp1ha1" title={"أمرين، وسطح مراجعة واحد"} summary={"يتم نشر كلا الأمرين من خلال موصل Plan MCP المستضاف في نفس سطح التعليق التوضيحي والتعليق."}>
+
+```html
+<div class="diagram-plan">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      <span class="diagram-pill accent">/visual-plan</span
+      ><small class="diagram-muted"
+        >قبل الكود - البنية وواجهة UI وإعادة التنظيم</small
+      >
+    </div>
+    <div class="diagram-node">
+      <span class="diagram-pill">/visual-recap</span
+      ><small class="diagram-muted"
+        >بعد الكود - PR و commit و branch و diff</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    موصل Plan MCP<br /><small class="diagram-muted"
+      >plan.agent-native.com</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    سطح المراجعة<br /><small class="diagram-muted"
+      >مخططات · إطارات سلكية · كود مشروح · تعليقات</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-node">
+    وكيل البرمجة<br /><small class="diagram-muted">تمت إعادة الملاحظات</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-plan {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-plan .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-plan .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-plan .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 <WireframeBlock id="doc-block-pdhou">
   <Screen
     surface="desktop"

package/corpus/core/docs/content/locales/ar-SA/template-slides.mdx

@@ -18,13 +18,58 @@ description: "قم بإنشاء تشكيلات من الموجه، وتحرير
 
 عند فتح مجموعة، تظل لوحة الشرائح والمخطط التفصيلي والملاحظات وشريط الأفلام في سطح محرر واحد بينما يظل بإمكان الوكيل إنشاء الشرائح ومراجعتها والتنقل فيها من خلال actions.
 
-```an-diagram title="موجه إلى سطح السفينة" summary="اطلب مجموعة وسيقوم الوكيل بتدفق الشرائح واحدة تلو الأخرى من خلال نفس الإجراءات التي يمكنك استدعاؤها من CLI."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-node\">موجه<br><small class=\"diagram-muted\">\"10-slide pitch deck\"</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">يختار التخطيطات</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">create-deck</div><div class=\"diagram-pill\">add-slide &#215; n</div><small class=\"diagram-muted\">متوازي، متدفق</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>decks (SQL)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-box\">المحرر يعرض مباشرة</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:6px;align-items:center}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1314eim" title={"موجه إلى سطح السفينة"} summary={"اطلب مجموعة وسيقوم الوكيل بتدفق الشرائح واحدة تلو الأخرى من خلال نفس الإجراءات التي يمكنك استدعاؤها من CLI."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-node">
+    موجه<br /><small class="diagram-muted">"10-slide pitch deck"</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Agent</span
+    ><small class="diagram-muted">يختار التخطيطات</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">create-deck</div>
+    <div class="diagram-pill">add-slide &#215; n</div>
+    <small class="diagram-muted">متوازي، متدفق</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>decks (SQL)</div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-box">المحرر يعرض مباشرة</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## ما يمكنك فعله به
 
 - **إنشاء مجموعات من الموجهات.** "إنشاء مجموعة عروض تقديمية مكونة من 10 شرائح لخدمة الاشتراك في القهوة، الجمهور هو المستثمرون."

package/corpus/core/docs/content/locales/ar-SA/template-videos.mdx

@@ -18,13 +18,62 @@ description: "استديو فيديو برمجي للرسومات المتحرك
 
 عند فتح الاستوديو، سترى قائمة من المقطوعات الموسيقية على الشاشة الرئيسية. انقر فوق أحدها وستحصل على لاعب في الأعلى، ومخطط زمني في الأسفل، ولوحة خصائص على اليمين. يعرف الوكيل دائمًا التركيبة التي قمت بفتحها.
 
-```an-diagram title="الرسوم المتحركة كبيانات" summary="التكوين هو مكون React؛ تتم قراءة كل رسم متحرك من المسار، لذا يقوم الوكيل والمخطط الزمني بتحرير نفس البيانات."
-{
-  "html": "<div class=\"diagram-flow\"><div class=\"diagram-col\"><div class=\"diagram-node\">Timeline<br><small class=\"diagram-muted\">سحب، تغيير حجم، تنقل زمني</small></div><div class=\"diagram-node\">Agent<br><small class=\"diagram-muted\">\"fade in at 2s\"</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">AnimationTrack</span><small class=\"diagram-muted\">startFrame / easing / animatedProps</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>تركيب React<br><small class=\"diagram-muted\">Remotion &lt;Player&gt;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">MP4 / WebM</div></div>",
-  "css": ".diagram-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-flow .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-flow .center{display:flex;flex-direction:column;align-items:center;gap:4px}.diagram-flow .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-14toan4" title={"الرسوم المتحركة كبيانات"} summary={"التكوين هو مكون React؛ تتم قراءة كل رسم متحرك من المسار، لذا يقوم الوكيل والمخطط الزمني بتحرير نفس البيانات."}>
+
+```html
+<div class="diagram-flow">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      Timeline<br /><small class="diagram-muted"
+        >سحب، تغيير حجم، تنقل زمني</small
+      >
+    </div>
+    <div class="diagram-node">
+      Agent<br /><small class="diagram-muted">"fade in at 2s"</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">AnimationTrack</span
+    ><small class="diagram-muted">startFrame / easing / animatedProps</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    تركيب React<br /><small class="diagram-muted"
+      >Remotion &lt;Player&gt;</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">MP4 / WebM</div>
+</div>
+```
+
+```css
+.diagram-flow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-flow .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-flow .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.diagram-flow .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## ما يمكنك فعله به
 
 - **إنشاء رسوم متحركة من المطالبة.** "أضف بطاقة عنوان تتلاشى خلال ثانيتين وتستمر حتى 5." يقوم الوكيل بتحرير التركيبة.

package/corpus/core/docs/content/locales/ar-SA/tracking.mdx

@@ -19,13 +19,63 @@ track(
 );
 ```
 
-```an-diagram title="استدعاء مسار واحد () لكل مزود" summary="يصل المتصلون بالخادم والعميل إلى نفس السجل، مما يؤدي إلى إرسال كل حدث إلى جميع مقدمي الخدمة النشطين بالتوازي."
-{
-  "html": "<div class=\"trk\"><div class=\"diagram-col\"><div class=\"diagram-node\">كود الخادم<br><small class=\"diagram-muted\">actions &middot; plugins &middot; routes</small></div><div class=\"diagram-node\">كود المتصفح<br><small class=\"diagram-muted\">POST /_agent-native/track</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">Provider registry</span><small class=\"diagram-muted\">تشعيب، إرسال بلا انتظار</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-box\">PostHog</div><div class=\"diagram-box\">Mixpanel</div><div class=\"diagram-box\">Amplitude</div><div class=\"diagram-box\">Webhook</div></div></div>",
-  "css": ".trk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.trk .diagram-col{display:flex;flex-direction:column;gap:8px}.trk .diagram-arrow{font-size:22px;line-height:1}.trk .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-ypgzg0" title={"استدعاء مسار واحد () لكل مزود"} summary={"يصل المتصلون بالخادم والعميل إلى نفس السجل، مما يؤدي إلى إرسال كل حدث إلى جميع مقدمي الخدمة النشطين بالتوازي."}>
+
+```html
+<div class="trk">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      كود الخادم<br /><small class="diagram-muted"
+        >actions &middot; plugins &middot; routes</small
+      >
+    </div>
+    <div class="diagram-node">
+      كود المتصفح<br /><small class="diagram-muted"
+        >POST /_agent-native/track</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">Provider registry</span
+    ><small class="diagram-muted">تشعيب، إرسال بلا انتظار</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-box">PostHog</div>
+    <div class="diagram-box">Mixpanel</div>
+    <div class="diagram-box">Amplitude</div>
+    <div class="diagram-box">Webhook</div>
+  </div>
+</div>
+```
+
+```css
+.trk {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trk .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.trk .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.trk .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## الموفرون المضمنون {#built-in}
 
 قم بتعيين env var ويقوم الموفر بالتسجيل التلقائي عند بدء تشغيل الخادم. لا توجد تغييرات مطلوبة في التعليمات البرمجية.

package/corpus/core/docs/content/locales/ar-SA/using-your-agent.mdx

@@ -9,13 +9,60 @@ description: "الحلقة اليومية للعمل مع الوكيل: فهو
 
 هناك خط اتصال بسيط. يرى الوكيل ما تنظر إليه، وتوجهه نحو ما تريد، ويمكنك **تضمينه** في أي مكان، ويمكنك الانتقال بالكامل **واجهة خفيفة** عندما يكون ذلك مناسبًا بشكل أفضل، ويمكنك **المشاركة في تحرير** نفس المستندات في نفس الوقت. كل منها عبارة عن صفحة في هذا القسم.
 
-```an-diagram title="الحلقة اليومية" summary="خمس طرق للعمل مع وكيل مُرسى — كل منها عبارة عن صفحة في هذا القسم."
-{
-  "html": "<div class=\"diagram-loop\"><div class=\"diagram-card\"><strong>Sees</strong><small class=\"diagram-muted\">your view &amp; selection</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Direct</strong><small class=\"diagram-muted\">@-mentions &amp; voice</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>Embed</strong><small class=\"diagram-muted\">drop into any app</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>واجهة خفيفة</strong><small class=\"diagram-muted\">chat is the product</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card accent-card\"><span class=\"diagram-pill accent\">تحرير مشترك</span><small class=\"diagram-muted\">مباشر، جنبا إلى جنب</small></div></div>",
-  "css": ".diagram-loop{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-loop .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px;flex:1}.diagram-loop .diagram-arrow{align-self:center;font-size:22px;line-height:1}"
+<Diagram id="doc-block-cbe31r" title={"الحلقة اليومية"} summary={"خمس طرق للعمل مع وكيل مُرسى — كل منها عبارة عن صفحة في هذا القسم."}>
+
+```html
+<div class="diagram-loop">
+  <div class="diagram-card">
+    <strong>Sees</strong
+    ><small class="diagram-muted">your view &amp; selection</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Direct</strong
+    ><small class="diagram-muted">@-mentions &amp; voice</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>Embed</strong><small class="diagram-muted">drop into any app</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>واجهة خفيفة</strong
+    ><small class="diagram-muted">chat is the product</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card accent-card">
+    <span class="diagram-pill accent">تحرير مشترك</span
+    ><small class="diagram-muted">مباشر، جنبا إلى جنب</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-loop {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-loop .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+  flex: 1;
+}
+.diagram-loop .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## يرى ما تنظر إليه {#it-sees}
 
 الوكيل ليس غافلًا عن شاشتك. افتح بريدًا إلكترونيًا ويعرف أي موضوع. حدد مخططًا ويعرف أي مخطط. قم بتمييز فقرة ويمكنها العمل على هذا النطاق فقط. وهذا الوعي المشترك هو ما يتيح لك قول "الرد على هذا" أو "تلخيص التحديد" دون توضيح السياق في كل مرة.

package/corpus/core/docs/content/locales/ar-SA/voice-input.mdx

@@ -19,13 +19,52 @@ description: "الإملاء الصوتي في مؤلف دردشة الوكيل
 
 يتم تخزين اختيار الموفر في حالة التطبيق ضمن `voice-transcription-prefs` بحيث يمكن للمستخدم فرض `"auto"` (افتراضي - يختار أفضل موفر متاح)، `"builder-gemini"`، `"builder"`، `"gemini"`، `"groq"`، `"openai"`، أو `"browser"` في إعدادات الشريط الجانبي.
 
-```an-diagram title="احتياطي مزود النسخ الصوتي" summary="يسجل الملحن الصوت، ثم يرشد موفري الخادم بالترتيب، وينتقل إلى Web Speech API في المتصفح فقط في حالة عدم توفر موفر خادم."
-{
-  "html": "<div class=\"diagram-voice\"><div class=\"diagram-node\">زر الميكروفون<br><small class=\"diagram-muted\">يسجل webm/opus</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card col\"><div class=\"diagram-pill accent\">1 &middot; Builder Gemini</div><small class=\"diagram-muted\">الافتراضي عند اتصال Builder</small><div class=\"diagram-pill\">2 &middot; BYOK cloud</div><small class=\"diagram-muted\">Gemini &middot; Groq &middot; OpenAI Whisper</small></div><div class=\"diagram-arrow diagram-warn\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box diagram-warn\" data-rough>3 &middot; Browser Web Speech<br><small class=\"diagram-muted\">fallback on 400 &middot; streams live</small></div></div>",
-  "css": ".diagram-voice{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-voice .col{display:flex;flex-direction:column;gap:6px;padding:14px}.diagram-voice .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1fqsycs" title={"احتياطي مزود النسخ الصوتي"} summary={"يسجل الملحن الصوت، ثم يرشد موفري الخادم بالترتيب، وينتقل إلى Web Speech API في المتصفح فقط في حالة عدم توفر موفر خادم."}>
+
+```html
+<div class="diagram-voice">
+  <div class="diagram-node">
+    زر الميكروفون<br /><small class="diagram-muted">يسجل webm/opus</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card col">
+    <div class="diagram-pill accent">1 &middot; Builder Gemini</div>
+    <small class="diagram-muted">الافتراضي عند اتصال Builder</small>
+    <div class="diagram-pill">2 &middot; BYOK cloud</div>
+    <small class="diagram-muted"
+      >Gemini &middot; Groq &middot; OpenAI Whisper</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-warn" aria-hidden="true">&darr;</div>
+  <div class="diagram-box diagram-warn" data-rough>
+    3 &middot; Browser Web Speech<br /><small class="diagram-muted"
+      >fallback on 400 &middot; streams live</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-voice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-voice .col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+}
+.diagram-voice .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 المسار **من نفس المصدر فقط** — يتم رفض المشاركات عبر المواقع، لذا لا يتمكن المهاجم من نسخ أرصدة النسخ من صفحة خارجية.
 
 ## تمكين الموفرين {#enabling-providers}