@agent-native/core 0.79.26 → 0.80.0

package/docs/content/locales/ar-SA/cli-adapters.mdx

@@ -12,13 +12,49 @@ description: "امنح الوكيل وصولاً منظمًا إلى أي أدا
 
 يحتوي محول CLI على أداة سطر أوامر واحدة (`gh`، `ffmpeg`، `stripe`، `aws`) حتى يتمكن الوكيل من اكتشافها والتحقق من تثبيتها وتشغيلها باستخدام نتيجة كود stdout/stderr/exit متسقة. بدون هذا التماس، يعيد كل نص برمجي اختراع كيفية استدعاء CLI وتحليل مخرجاته.
 
-```an-diagram title="CLI محول → التسجيل → سطح العمل" summary="ShellCliAdapter يلتف ثنائي؛ يقوم CliRegistry بجمع المحولات لاكتشافها؛ يكشف defineAction عن مكالمة واحدة على سطح عمل الوكيل + واجهة المستخدم."
-{
-  "html": "<div class=\"diagram-cli\"><div class=\"diagram-node\" data-rough>gh · ffmpeg · الشريط<br><small class=\"diagram-muted\">أدوات سطر الأوامر</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>ShellCliAdapter<br><small class=\"diagram-muted\">متاح · تنفيذ</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough>كليريجستري<br><small class=\"diagram-muted\">وصف () للاكتشاف</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">defineAction</div></div>",
-  "css": ".diagram-cli{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-cli .diagram-arrow{font-size:22px;line-height:1}.diagram-cli .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1tpkll1" title={"CLI محول → التسجيل → سطح العمل"} summary={"ShellCliAdapter يلتف ثنائي؛ يقوم CliRegistry بجمع المحولات لاكتشافها؛ يكشف defineAction عن مكالمة واحدة على سطح عمل الوكيل + واجهة المستخدم."}>
+
+```html
+<div class="diagram-cli">
+  <div class="diagram-node" data-rough>
+    gh · ffmpeg · الشريط<br /><small class="diagram-muted"
+      >أدوات سطر الأوامر</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    ShellCliAdapter<br /><small class="diagram-muted">متاح · تنفيذ</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    كليريجستري<br /><small class="diagram-muted">وصف () للاكتشاف</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-pill accent">defineAction</div>
+</div>
+```
+
+```css
+.diagram-cli {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-cli .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-cli .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 ## الواجهة {#the-interface}
 
 ينفذ كل محول CLI `CliAdapter`:

package/docs/content/locales/ar-SA/client.mdx

@@ -15,13 +15,51 @@ description: "الخطافات والأدوات المساعدة React لتطب
 
 الطريقة الأساسية لقراءة بيانات التطبيق وكتابتها من المتصفح هي من خلال خطافات الإجراء. لا تكتب أبدًا مكالمات `fetch` يدويًا إلى مسارات `/_agent-native/*` - استخدم المساعدين المحددين بدلاً من ذلك (راجع [Actions](/docs/actions)).
 
-```an-diagram title="حلقة بيانات المتصفح" summary="خطافات القراءة والكتابة من خلال الإجراءات؛ يراقب useDbSync قاعدة البيانات حتى يقوم الوكيل والخلفية بإعادة جلب نفس ذاكرات التخزين المؤقت تلقائيًا."
-{
-  "html": "<div class=\"diagram-client\"><div class=\"diagram-col\"><div class=\"diagram-node\">useActionQuery<br><small class=\"diagram-muted\">قراءة مخبأة</small></div><div class=\"diagram-node\">useActionMutation<br><small class=\"diagram-muted\">كتابة + إبطال</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-box\" data-rough>Actions<br><small class=\"diagram-muted\">/_agent-native/actions/*</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL قاعدة البيانات</strong></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">useDbSync &rarr; الإعادة على التغيير</div></div>",
-  "css": ".diagram-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-client .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-client .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-12sq7bk" title={"حلقة بيانات المتصفح"} summary={"خطافات القراءة والكتابة من خلال الإجراءات؛ يراقب useDbSync قاعدة البيانات حتى يقوم الوكيل والخلفية بإعادة جلب نفس ذاكرات التخزين المؤقت تلقائيًا."}>
+
+```html
+<div class="diagram-client">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      useActionQuery<br /><small class="diagram-muted">قراءة مخبأة</small>
+    </div>
+    <div class="diagram-node">
+      useActionMutation<br /><small class="diagram-muted">كتابة + إبطال</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-box" data-rough>
+    Actions<br /><small class="diagram-muted">/_agent-native/actions/*</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>SQL قاعدة البيانات</strong>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+  <div class="diagram-pill ok">useDbSync &rarr; الإعادة على التغيير</div>
+</div>
+```
+
+```css
+.diagram-client {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-client .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-client .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ```tsx
 import {
   useActionQuery,
@@ -376,13 +414,47 @@ function DashboardView({ id }) {
 - ** الطفرات التي بدأتها UI:** عند تنفيذ إجراء من UI باستخدام `useActionMutation`، تقوم الطفرة على الفور بإطلاق حدث محلي مع `source: "action"` عند النجاح. يؤدي هذا إلى تشغيل **إعادة جلب فورية ومتفائلة** لجميع مفاتيح الاستعلام اعتمادًا على هذا الإجراء، مع تجنب التأخير البصري.
 - **طفرات الخلفية أو الوكيل:** عندما يقوم وكيل الذكاء الاصطناعي أو خطاف الويب أو عامل الخلفية بتغيير البيانات، يتم بث التحديث إلى العميل. يلتقط `useDbSync` الخاص بالعميل هذا إما على الفور عبر SSE (الأحداث المرسلة من الخادم) أو يعود إلى **علامة الاستقصاء التي تبلغ ثانيتين**. ثم يبرز إصدار مفتاح الاستعلام، مما يؤدي إلى إعادة جلب الخلفية.
 
-```an-diagram title="طريقان للإعادة" summary="تؤدي الطفرة المحلية إلى إبطال ذاكرة التخزين المؤقت الخاصة بها على الفور؛ تصل الكتابة عن بعد إلى علامة التبويب هذه عبر SSE، أو علامة الاستقصاء كإجراء احتياطي."
-{
-  "html": "<div class=\"diagram-latency\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">علامة التبويب هذه</span><strong>useActionMutation</strong><small class=\"diagram-muted\">مصدر الحرائق: \"العمل\" على النجاح &rarr; الاسترداد المحلي الفوري</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">الوكيل · خطاف الويب · علامة تبويب أخرى</span><strong>الكتابة عن بعد</strong><small class=\"diagram-muted\">دفع SSE، أو علامة الاستقصاء ~2s كبديل &rarr; المطبات الإصدار &rarr; إعادة الخلفية</small></div></div></div>",
-  "css": ".diagram-latency .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-latency .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px}"
+<Diagram id="doc-block-ymmrn1" title={"طريقان للإعادة"} summary={"تؤدي الطفرة المحلية إلى إبطال ذاكرة التخزين المؤقت الخاصة بها على الفور؛ تصل الكتابة عن بعد إلى علامة التبويب هذه عبر SSE، أو علامة الاستقصاء كإجراء احتياطي."}>
+
+```html
+<div class="diagram-latency">
+  <div class="diagram-col">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill ok">علامة التبويب هذه</span
+      ><strong>useActionMutation</strong
+      ><small class="diagram-muted"
+        >مصدر الحرائق: "العمل" على النجاح &rarr; الاسترداد المحلي الفوري</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent"
+        >الوكيل · خطاف الويب · علامة تبويب أخرى</span
+      ><strong>الكتابة عن بعد</strong
+      ><small class="diagram-muted"
+        >دفع SSE، أو علامة الاستقصاء ~2s كبديل &rarr; المطبات الإصدار &rarr;
+        إعادة الخلفية</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-latency .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.diagram-latency .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
 }
 ```
 
+</Diagram>
+
 ## cn(...المدخلات) {#cn}
 
 أداة مساعدة لدمج أسماء الفئات (clsx + tailwind-merge):

package/docs/content/locales/ar-SA/cloneable-saas.mdx

@@ -51,13 +51,54 @@ description: "ابتكر منتج SaaS فعالاً واجعله ملكك - بم
 
 المسار من "أريد SaaS الخاص بي" إلى "لدي SaaS الخاص بي" قصير:
 
-```an-diagram title="شوكة وتخصيص" summary="اختر منتجًا نهائيًا، وقم بوضع علامة تجارية عليه، وقم بتطويره بلغة إنجليزية بسيطة، ثم اشحنه إلى النطاق الخاص بك."
-{
-  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>يختار</strong><small class=\"diagram-muted\">قالب كامل</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>ماركة</strong><small class=\"diagram-muted\">الاسم والألوان والشعار والنسخة</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>تخصيص</strong><small class=\"diagram-muted\">اسأل الوكيل &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>سفينة</strong><small class=\"diagram-muted\">المجال الخاص بك</small></div></div>",
-  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1crom0h" title={"شوكة وتخصيص"} summary={"اختر منتجًا نهائيًا، وقم بوضع علامة تجارية عليه، وقم بتطويره بلغة إنجليزية بسيطة، ثم اشحنه إلى النطاق الخاص بك."}>
+
+```html
+<div class="diagram-fork">
+  <div class="diagram-card">
+    <span class="diagram-pill">1</span><strong>يختار</strong
+    ><small class="diagram-muted">قالب كامل</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill">2</span><strong>ماركة</strong
+    ><small class="diagram-muted">الاسم والألوان والشعار والنسخة</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill accent">3</span><strong>تخصيص</strong
+    ><small class="diagram-muted">اسأل الوكيل &#8635;</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <span class="diagram-pill ok">4</span><strong>سفينة</strong
+    ><small class="diagram-muted">المجال الخاص بك</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-fork {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-fork .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 130px;
+}
+.diagram-fork .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 1. **اختر نموذجًا.** استخدم منتقي CLI، أو تصفح المستندات واختر واحدًا للبدء منه.
 2. **العلامة التجارية.** قم بتغيير الاسم والألوان والشعار والنسخة. تعرض معظم النماذج ذلك في ملف تكوين واحد.
 3. **قم بتخصيصه.** اطلب من الوكيل إضافة العمود الذي تحتاجه، وتغيير كيفية اتصال مجموعات البريد الوارد بـ API الداخلي، وإضافة طريقة عرض جديدة. يقوم الوكيل بتحرير الكود؛ قمت بمراجعة الفرق.
@@ -74,13 +115,49 @@ description: "ابتكر منتج SaaS فعالاً واجعله ملكك - بم
 
 النتيجة: مرونة على مستوى الكود Claude لكل مستخدم، مع اقتصاديات نشر SaaS العادية.
 
-```an-diagram title="لماذا مقياس الشوكات لكل مستخدم" summary="هناك فكرتان تجعلان نموذج الشوكة والتخصيص عمليًا: يقوم الوكيل بالصيانة، ويعيش التخصيص لكل مستخدم في SQL - وليس في التعليمات البرمجية لكل مستخدم."
-{
-  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>قاعدة التعليمات البرمجية المشتركة</strong><small class=\"diagram-muted\">تطبيق واحد، تم نشره مرة واحدة</small><div class=\"diagram-pill accent\">الوكيل يقوم بالصيانة</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>طبقة لكل مستخدم في SQL</strong><small class=\"diagram-muted\">المهارات · الذاكرة · التعليمات · SQL · الوكلاء الفرعيون</small><div class=\"diagram-pill ok\">لا يوجد رمز لكل مستخدم</div></div></div>",
-  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+<Diagram id="doc-block-1sp9g9z" title={"لماذا مقياس الشوكات لكل مستخدم"} summary={"هناك فكرتان تجعلان نموذج الشوكة والتخصيص عمليًا: يقوم الوكيل بالصيانة، ويعيش التخصيص لكل مستخدم في SQL - وليس في التعليمات البرمجية لكل مستخدم."}>
+
+```html
+<div class="diagram-why">
+  <div class="diagram-panel" data-rough>
+    <strong>قاعدة التعليمات البرمجية المشتركة</strong
+    ><small class="diagram-muted">تطبيق واحد، تم نشره مرة واحدة</small>
+    <div class="diagram-pill accent">الوكيل يقوم بالصيانة</div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&harr;</div>
+  <div class="diagram-panel" data-rough>
+    <strong>طبقة لكل مستخدم في SQL</strong
+    ><small class="diagram-muted"
+      >المهارات · الذاكرة · التعليمات · SQL · الوكلاء الفرعيون</small
+    >
+    <div class="diagram-pill ok">لا يوجد رمز لكل مستخدم</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-why {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-why .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 18px;
+  min-width: 240px;
+  flex: 1;
+}
+.diagram-why .diagram-arrow {
+  font-size: 24px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## لا تريد الشوكة؟ {#hosted}
 
 ليس عليك القيام بذلك. كل قالب متاح أيضًا كتطبيق مستضاف على `agent-native.com` — `mail.agent-native.com`، `calendar.agent-native.com`، وما إلى ذلك. استخدم الإصدار المستضاف مجانًا أو مدفوع؛ fork فقط عندما تريد تغيير شيء لا يكشفه الإصدار المستضاف.

package/docs/content/locales/ar-SA/code-agents-ui.mdx

@@ -25,13 +25,73 @@ description: "قم بإنشاء وتخصيص أسطح التعليمات الب
 - **سطح المكتب**: تضيف علامة التبويب Code في الشريط الجانبي الأيسر تشغيل الوحدة الطرفية الأصلي، وعروض الويب للتطبيق، والروابط العميقة لسطح المكتب أثناء استخدام نفس نموذج التشغيل.
 - **UI المشتركة**: يعرض `@agent-native/code-agents-ui` سطح React القابل لإعادة الاستخدام.
 
-```an-diagram title="ثلاث طبقات فوق مخزن تشغيل واحد" summary="CLI، Desktop، وواجهة المستخدم المشتركة هي أسطح مختلفة على نفس مخزن التشغيل والمنفذ المدعوم بالملف؛ يقوم المضيفون بتكييفه عبر عقد CodeAgentsHost."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-row\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">CLI</span><small class=\"diagram-muted\">البدء · الاستئناف · الحالة · التوقف</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill\">Desktop</span><small class=\"diagram-muted\">المحطة الأصلية · مشاهدات الويب · الروابط العميقة</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">واجهة المستخدم المشتركة</span><small class=\"diagram-muted\">@agent-native/code-agents-ui</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill\">CodeAgentsHost</span><small class=\"diagram-muted\">عقد المضيف</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>مخزن تشغيل مدعوم بالملفات + منفذ تنفيذي<br><small class=\"diagram-muted\">@agent-native/core/code-agents</small></div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px;align-items:center}.diagram-layers .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-layers .diagram-card{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.diagram-layers .diagram-arrow{font-size:22px;line-height:1}.diagram-layers .center{display:flex;flex-direction:column;align-items:center;gap:4px}"
+<Diagram id="doc-block-1tz9c3f" title={"ثلاث طبقات فوق مخزن تشغيل واحد"} summary={"CLI، Desktop، وواجهة المستخدم المشتركة هي أسطح مختلفة على نفس مخزن التشغيل والمنفذ المدعوم بالملف؛ يقوم المضيفون بتكييفه عبر عقد CodeAgentsHost."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-row">
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">CLI</span
+      ><small class="diagram-muted">البدء · الاستئناف · الحالة · التوقف</small>
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill">Desktop</span
+      ><small class="diagram-muted"
+        >المحطة الأصلية · مشاهدات الويب · الروابط العميقة</small
+      >
+    </div>
+    <div class="diagram-card" data-rough>
+      <span class="diagram-pill accent">واجهة المستخدم المشتركة</span
+      ><small class="diagram-muted">@agent-native/code-agents-ui</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill">CodeAgentsHost</span
+    ><small class="diagram-muted">عقد المضيف</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    مخزن تشغيل مدعوم بالملفات + منفذ تنفيذي<br /><small class="diagram-muted"
+      >@agent-native/core/code-agents</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.diagram-layers .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-layers .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.diagram-layers .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-layers .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 ```
 
+</Diagram>
+
 يتقارب الانقسام الحالي عن عمد: يعمل الشريط الجانبي للوكيل القياسي وفرق الوكلاء على دورة حياة `run-manager` الأساسية، بينما يستخدم Agent-Native جلسات محلية طويلة التشغيل مدعومة بمخزن تشغيل التعليمات البرمجية القائم على الملفات ومفردات وحدة التحكم المشتركة التي يتم تشغيلها في الخلفية.
 
 إن UI المشترك يعتمد على المضيف. ولا يعرف ما إذا كان يعمل في Electron أو قالب متصفح أو غلاف مستضاف في المستقبل. يوفر المضيفون تطبيق `CodeAgentsHost`.
@@ -373,13 +433,44 @@ npx @agent-native/core@latest migrate ./my-next-app --out ../migrated-app   # sh
 5. يقرأ الهاتف المحمول `hosts` و`runs` و`transcript` من Dispatch؛ لا يتحدث أبدًا
    مباشرة إلى سطح المكتب.
 
-```an-diagram title="البعيد Dispatch للخارج فقط" summary="لا يتحدث الهاتف المحمول مطلقًا مع سطح المكتب مباشرة. Desktop الاستقصاءات الطويلة Dispatch، يطالب بالأوامر، ويحرك مخزن التشغيل المحلي، ويعكس النتائج مرة أخرى."
-{
-  "html": "<div class=\"diagram-remote\"><div class=\"diagram-node\" data-rough>موبايل / تليجرام<br><small class=\"diagram-muted\">/الكود · الجلسات</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\" data-rough>Dispatch التتابع<br><small class=\"diagram-muted\">المضيفين · يدير · نسخة</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-node\" data-rough>Desktop<br><small class=\"diagram-muted\">استطلاعات الرأي الطويلة · المطالبات · محركات الأقراص التي تدير المتجر</small></div></div>",
-  "css": ".diagram-remote{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-remote .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1qu1t9i" title={"البعيد Dispatch للخارج فقط"} summary={"لا يتحدث الهاتف المحمول مطلقًا مع سطح المكتب مباشرة. Desktop الاستقصاءات الطويلة Dispatch، يطالب بالأوامر، ويحرك مخزن التشغيل المحلي، ويعكس النتائج مرة أخرى."}>
+
+```html
+<div class="diagram-remote">
+  <div class="diagram-node" data-rough>
+    موبايل / تليجرام<br /><small class="diagram-muted">/الكود · الجلسات</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box" data-rough>
+    Dispatch التتابع<br /><small class="diagram-muted"
+      >المضيفين · يدير · نسخة</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  <div class="diagram-node" data-rough>
+    Desktop<br /><small class="diagram-muted"
+      >استطلاعات الرأي الطويلة · المطالبات · محركات الأقراص التي تدير
+      المتجر</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-remote {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-remote .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 نقاط نهاية الترحيل عن بعد الأساسية هي:
 
 <Endpoint id="doc-block-1dqhs2o" title={"يطالب سطح المكتب بالعمل في قائمة الانتظار"} method="POST" path="/_agent-native/integrations/remote/poll" summary={"يقوم سطح المكتب باستقصاء طويل للمرحل للمطالبة بالأوامر الموضوعة في قائمة الانتظار"} auth="Desktop device token" responses={[

package/docs/content/locales/ar-SA/components.mdx

@@ -25,13 +25,70 @@ import { ResourcesPanel } from "@agent-native/core/client/resources";
 `@agent-native/core/client` أو مسار فرعي `@agent-native/core/client/*` مركّز
 لذلك يختار القائمون على التجميع الإدخال الآمن للمتصفح.
 
-```an-diagram title="المنسدلة طبقة، وليس خارج الإطار" summary="تحتفظ كل طبقة بنفس وقت التشغيل — الإجراءات، وحالة مؤشر الترابط، ومزامنة SQL-backed — بينما تمنحك مزيدًا من التحكم في Chrome."
-{
-  "html": "<div class=\"diagram-layers\"><div class=\"diagram-card layer\"><span class=\"diagram-pill accent\">&lt;AgentSidebar&gt;</span><small class=\"diagram-muted\">الشريط الجانبي بأكمله حول تطبيقك. حالة 80%.</small></div><div class=\"diagram-card layer l2\"><span class=\"diagram-pill\">&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span><small class=\"diagram-muted\">اللوحة أو صفحة الدردشة في التخطيط الخاص بك.</small></div><div class=\"diagram-card layer l3\"><span class=\"diagram-pill\">&lt;AssistantChat&gt; + وقت التشغيل</span><small class=\"diagram-muted\">امتلك الكروم؛ قم بتمرير BYO AgentChatRuntime بشكل اختياري.</small></div><div class=\"diagram-card layer l4\"><span class=\"diagram-pill\">&lt;PromptComposer&gt; &middot; &lt;محادثة الوكيل&gt;</span><small class=\"diagram-muted\">الملحن والنسخة الأولية فقط.</small></div><div class=\"diagram-rail\" data-rough>نفس وقت التشغيل: الإجراءات &middot; حالة الخيط &middot; BYO-backed مزامنة</div></div>",
-  "css": ".diagram-layers{display:flex;flex-direction:column;gap:10px}.diagram-layers .layer{display:flex;flex-direction:column;gap:4px;padding:12px 14px}.diagram-layers .l2{margin-inline-start:24px}.diagram-layers .l3{margin-inline-start:48px}.diagram-layers .l4{margin-inline-start:72px}.diagram-layers .diagram-rail{margin-top:6px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-1vw6fvr" title={"المنسدلة طبقة، وليس خارج الإطار"} summary={"تحتفظ كل طبقة بنفس وقت التشغيل — الإجراءات، وحالة مؤشر الترابط، ومزامنة SQL-backed — بينما تمنحك مزيدًا من التحكم في Chrome."}>
+
+```html
+<div class="diagram-layers">
+  <div class="diagram-card layer">
+    <span class="diagram-pill accent">&lt;AgentSidebar&gt;</span
+    ><small class="diagram-muted"
+      >الشريط الجانبي بأكمله حول تطبيقك. حالة 80%.</small
+    >
+  </div>
+  <div class="diagram-card layer l2">
+    <span class="diagram-pill"
+      >&lt;AgentPanel&gt; &middot; &lt;AgentChatSurface&gt;</span
+    ><small class="diagram-muted"
+      >اللوحة أو صفحة الدردشة في التخطيط الخاص بك.</small
+    >
+  </div>
+  <div class="diagram-card layer l3">
+    <span class="diagram-pill">&lt;AssistantChat&gt; + وقت التشغيل</span
+    ><small class="diagram-muted"
+      >امتلك الكروم؛ قم بتمرير BYO AgentChatRuntime بشكل اختياري.</small
+    >
+  </div>
+  <div class="diagram-card layer l4">
+    <span class="diagram-pill"
+      >&lt;PromptComposer&gt; &middot; &lt;محادثة الوكيل&gt;</span
+    ><small class="diagram-muted">الملحن والنسخة الأولية فقط.</small>
+  </div>
+  <div class="diagram-rail" data-rough>
+    نفس وقت التشغيل: الإجراءات &middot; حالة الخيط &middot; BYO-backed مزامنة
+  </div>
+</div>
+```
+
+```css
+.diagram-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-layers .layer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+.diagram-layers .l2 {
+  margin-inline-start: 24px;
+}
+.diagram-layers .l3 {
+  margin-inline-start: 48px;
+}
+.diagram-layers .l4 {
+  margin-inline-start: 72px;
+}
+.diagram-layers .diagram-rail {
+  margin-top: 6px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## الوكيل والدردشة UI {#agent-chat-ui}
 
 | API                                  | مسار الاستيراد                                | استخدم عندما                                                                             |
@@ -178,13 +235,62 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 | `useCollaborativeMap()` / `useCollaborativeArray()` | جرّب حالة Y.Map/Y.Array المنظمة عندما يكون تعاون نص النص المنسق غير مناسب. |
 | `dedupeCollabUsersByEmail()`                        | إنشاء مجموعة صور رمزية مخصصة بدون علامات تبويب مكررة لنفس المستخدم.        |
 
-```an-diagram title="الحضور: يتشارك البشر والوكيل في طبقة وعي واحدة" summary="useCollaborativeDoc يمتلك مثيل الوعي؛ تقوم خطافات العميل بنشر المؤشرات والتحديدات؛ يسمح مساعدو الخادم بإجراء الوكيل بالظهور كمشارك مباشر."
-{
-  "html": "<div class=\"diagram-presence\"><div class=\"diagram-col\"><div class=\"diagram-node\">البشر<br><small class=\"diagram-muted\">usePresence &middot; المؤشرات، الاختيار</small></div><div class=\"diagram-node diagram-accent\">عمل الوكيل<br><small class=\"diagram-muted\">وكيلUpdateSelection()</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">useCollaborativeDoc</span><small class=\"diagram-muted\">طبقة الوعي</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box\">&lt;شريط الوجود&gt; &middot; &lt;LiveCursorOverlay&gt;<br><small class=\"diagram-muted\">تقديم الجميع، بما في ذلك الوكيل</small></div></div>",
-  "css": ".diagram-presence{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-presence .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-presence .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-presence .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-dhg14q" title={"الحضور: يتشارك البشر والوكيل في طبقة وعي واحدة"} summary={"useCollaborativeDoc يمتلك مثيل الوعي؛ تقوم خطافات العميل بنشر المؤشرات والتحديدات؛ يسمح مساعدو الخادم بإجراء الوكيل بالظهور كمشارك مباشر."}>
+
+```html
+<div class="diagram-presence">
+  <div class="diagram-col">
+    <div class="diagram-node">
+      البشر<br /><small class="diagram-muted"
+        >usePresence &middot; المؤشرات، الاختيار</small
+      >
+    </div>
+    <div class="diagram-node diagram-accent">
+      عمل الوكيل<br /><small class="diagram-muted">وكيلUpdateSelection()</small>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">useCollaborativeDoc</span
+    ><small class="diagram-muted">طبقة الوعي</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box">
+    &lt;شريط الوجود&gt; &middot; &lt;LiveCursorOverlay&gt;<br /><small
+      class="diagram-muted"
+      >تقديم الجميع، بما في ذلك الوكيل</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-presence {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-presence .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-presence .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-presence .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 يستخدم الوكيل من جانب الخادم actions الذي يريد الظهور كمشارك مباشر
 مساعدو حضور الوكيل `@agent-native/core/collab` ذو المستوى الأدنى: