@agent-native/core 0.79.26 → 0.80.0

package/docs/content/key-concepts.mdx

@@ -17,13 +17,67 @@ Every agent-native app is three things working together:
 >
 > **Computer** — Database, browser, code execution. Agents work directly with SQL and built-in tools; MCP servers are optional add-ons, not the foundation.
 
-```an-diagram title="Agent, application, and computer" summary="Three layers working together over one shared SQL store. The agent and the application both read and write the same data."
-{
-  "html": "<div class=\"diagram-arch\"><div class=\"diagram-row\"><div class=\"diagram-card\"><span class=\"diagram-pill accent\">Agent</span><small class=\"diagram-muted\">reads + writes data, runs actions, modifies code</small></div><div class=\"diagram-card\"><span class=\"diagram-pill\">Application</span><small class=\"diagram-muted\">action-only, chat, control plane, or full React UI</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;&nbsp;&uarr;</div><div class=\"diagram-box\" data-rough>Computer<br><small class=\"diagram-muted\">SQL database · browser · code execution</small></div></div>",
-  "css": ".diagram-arch{display:flex;flex-direction:column;align-items:center;gap:10px}.diagram-arch .diagram-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.diagram-arch .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:220px}.diagram-arch .diagram-arrow{font-size:20px;line-height:1}.diagram-arch .diagram-box{text-align:center;padding:12px 18px}"
+<Diagram id="doc-block-t1f7pj" title="Agent, application, and computer" summary="Three layers working together over one shared SQL store. The agent and the application both read and write the same data.">
+
+```html
+<div class="diagram-arch">
+  <div class="diagram-row">
+    <div class="diagram-card">
+      <span class="diagram-pill accent">Agent</span
+      ><small class="diagram-muted"
+        >reads + writes data, runs actions, modifies code</small
+      >
+    </div>
+    <div class="diagram-card">
+      <span class="diagram-pill">Application</span
+      ><small class="diagram-muted"
+        >action-only, chat, control plane, or full React UI</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">
+    &darr;&nbsp;&uarr;
+  </div>
+  <div class="diagram-box" data-rough>
+    Computer<br /><small class="diagram-muted"
+      >SQL database · browser · code execution</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-arch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+.diagram-arch .diagram-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.diagram-arch .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 220px;
+}
+.diagram-arch .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
+}
+.diagram-arch .diagram-box {
+  text-align: center;
+  padding: 12px 18px;
 }
 ```
 
+</Diagram>
+
 Headless apps can run the same production app-agent loop from the folder with `pnpm agent`, while UI apps mount the embedded agent panel and run locally with `pnpm dev`. In the cloud, Builder.io provides a managed frame — the environment that hosts the agent next to your app — with collaboration, visual editing, and managed infrastructure for teams.
 
 ## Agent building blocks {#agent-building-blocks}
@@ -273,13 +327,53 @@ The flow is:
 4. `useActionQuery` hooks and source-versioned `useQuery` hooks refetch
 5. Components render the new data without a page reload
 
-```an-diagram title="Live sync flow" summary="An agent write becomes a UI render with no manual refresh — SSE first, polling as the universal fallback."
-{
-  "html": "<div class=\"diagram-sync\"><div class=\"diagram-node\">Agent action<br><small class=\"diagram-muted\">writes to DB</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Change event<br><small class=\"diagram-muted\">source: action / settings</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel center\"><span class=\"diagram-pill accent\">useDbSync</span><small class=\"diagram-muted\">SSE &middot; poll fallback</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-node\">Query refetch<br><small class=\"diagram-muted\">render, no reload</small></div></div>",
-  "css": ".diagram-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-sync .diagram-arrow{font-size:22px;line-height:1}.diagram-sync .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px}"
+<Diagram id="doc-block-87e1c3" title="Live sync flow" summary={"An agent write becomes a UI render with no manual refresh — SSE first, polling as the universal fallback."}>
+
+```html
+<div class="diagram-sync">
+  <div class="diagram-node">
+    Agent action<br /><small class="diagram-muted">writes to DB</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Change event<br /><small class="diagram-muted"
+      >source: action / settings</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel center">
+    <span class="diagram-pill accent">useDbSync</span
+    ><small class="diagram-muted">SSE &middot; poll fallback</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-node">
+    Query refetch<br /><small class="diagram-muted">render, no reload</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-sync {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-sync .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-sync .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
 }
 ```
 
+</Diagram>
+
 This works in all deployment environments — including serverless and edge — because it uses the database, not in-memory state or file system watchers.
 
 ## Frames {#frames}

package/docs/content/local-file-mode.mdx

@@ -46,13 +46,67 @@ The UI and agent actions should stay the same shape in both modes. A Content
 editor still edits documents; the difference is whether those documents resolve
 to SQL rows or local files.
 
-```an-diagram title="Same actions, two sources of truth" summary="The UI and agent call identical actions in both modes. The action layer decides whether each call resolves to SQL rows or repo files."
-{
-  "html": "<div class=\"diagram-mode\"><div class=\"diagram-col entry\"><div class=\"diagram-node\">Content UI</div><div class=\"diagram-node\">Agent + actions<br><small class=\"diagram-muted\">list/get/update-document</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-row resolve\"><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill accent\">Database mode</span><small class=\"diagram-muted\">SQL rows via Drizzle</small><small class=\"diagram-muted\">hosted · sharing · comments · history</small></div><div class=\"diagram-panel\" data-rough><span class=\"diagram-pill ok\">Local File Mode</span><small class=\"diagram-muted\">repo files via agent-native.json</small><small class=\"diagram-muted\">Git review · coding-agent edits</small></div></div></div>",
-  "css": ".diagram-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-mode .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mode .diagram-arrow{font-size:22px;line-height:1}.diagram-mode .resolve{display:flex;gap:12px;flex-wrap:wrap}.diagram-mode .diagram-panel{display:flex;flex-direction:column;gap:4px;padding:12px 14px}"
+<Diagram id="doc-block-1bxzygx" title="Same actions, two sources of truth" summary="The UI and agent call identical actions in both modes. The action layer decides whether each call resolves to SQL rows or repo files.">
+
+```html
+<div class="diagram-mode">
+  <div class="diagram-col entry">
+    <div class="diagram-node">Content UI</div>
+    <div class="diagram-node">
+      Agent + actions<br /><small class="diagram-muted"
+        >list/get/update-document</small
+      >
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-row resolve">
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill accent">Database mode</span
+      ><small class="diagram-muted">SQL rows via Drizzle</small
+      ><small class="diagram-muted"
+        >hosted · sharing · comments · history</small
+      >
+    </div>
+    <div class="diagram-panel" data-rough>
+      <span class="diagram-pill ok">Local File Mode</span
+      ><small class="diagram-muted">repo files via agent-native.json</small
+      ><small class="diagram-muted">Git review · coding-agent edits</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-mode {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mode .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-mode .resolve {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mode .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
 }
 ```
 
+</Diagram>
+
 ## Example Repo
 
 A Content workspace can be as small as this:

package/docs/content/locales/ar-SA/a2a-protocol.mdx

@@ -20,13 +20,53 @@ A2A هو الركيزة الأساسية للتفويض عبر التطبيقا
 - **المهام** — تنشئ كل رسالة مهمة ذات دورة حياة (تم الإرسال، والعمل، والإكمال، والفشل، والإلغاء)
 - **مصادقة حامل JWT** — إنتاج A2A يتطلب `A2A_SECRET` أو `apiKeyEnv` قديم صريح
 
-```an-diagram title="وكيل يد واحد يعمل لآخر" summary="يكتشف وكيل البريد بطاقة وكيل التحليلات، ويرسل رسالة JSON-RPC، ويستعيد مهمة مكتملة."
-{
-  "html": "<div class=\"diagram-handoff\"><div class=\"diagram-card\"><strong>وكيل البريد</strong><small class=\"diagram-muted\">يحتاج إلى تحليلات</small></div><div class=\"diagram-col\"><div class=\"diagram-pill\">GET /.well-known/agent-card.json</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-pill accent\">GET /_agent-native/a2a<br><small class=\"diagram-muted\">message/send</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div><div class=\"diagram-pill ok\">المهمة · اكتملت</div></div><div class=\"diagram-card\" data-rough><strong>وكيل التحليلات</strong><small class=\"diagram-muted\">تشغيل استعلام التشغيل، وإرجاع النتيجة</small></div></div>",
-  "css": ".diagram-handoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diagram-handoff .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-handoff .diagram-arrow{font-size:20px;line-height:1}"
+<Diagram id="doc-block-1wlus8t" title={"وكيل يد واحد يعمل لآخر"} summary={"يكتشف وكيل البريد بطاقة وكيل التحليلات، ويرسل رسالة JSON-RPC، ويستعيد مهمة مكتملة."}>
+
+```html
+<div class="diagram-handoff">
+  <div class="diagram-card">
+    <strong>وكيل البريد</strong
+    ><small class="diagram-muted">يحتاج إلى تحليلات</small>
+  </div>
+  <div class="diagram-col">
+    <div class="diagram-pill">GET /.well-known/agent-card.json</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-pill accent">
+      GET /_agent-native/a2a<br /><small class="diagram-muted"
+        >message/send</small
+      >
+    </div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+    <div class="diagram-pill ok">المهمة · اكتملت</div>
+  </div>
+  <div class="diagram-card" data-rough>
+    <strong>وكيل التحليلات</strong
+    ><small class="diagram-muted">تشغيل استعلام التشغيل، وإرجاع النتيجة</small>
+  </div>
+</div>
+```
+
+```css
+.diagram-handoff {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.diagram-handoff .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-handoff .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## إعداد الخادم {#server-setup}
 
 تحصل معظم القوالب على A2A من خلال البرنامج الإضافي للدردشة مع وكيل إطار العمل. إذا كنت تقوم بتثبيته بنفسك، فاتصل بـ `mountA2A()` في مكون إضافي للخادم:
@@ -176,14 +216,62 @@ JSON-RPC 2.0 endpoint for `message/send`, `message/stream`, `tasks/get`, and `ta
 
 عندما يتم استدعاء `message/send` باستخدام `async: true`، يقوم معالج JSON-RPC بإدراج المهمة في قائمة الانتظار وإطلاق POST ذاتيًا إلى مسار `/_agent-native/a2a/_process-task` داخلي بحيث يعمل المعالج في تنفيذ وظيفة جديدة مع مهلة كاملة خاصة به. تمت مصادقة هذا المسار باستخدام رمز HMAC المرتبط بمعرف المهمة (عمر 5 دقائق، موقع بـ `A2A_SECRET`). يتم تثبيته قبل المسار `/_agent-native/a2a` JSON-RPC، لذا لا تبتلعه مطابقة بادئة h3.
 
-```an-diagram title="دورة حياة مهمة غير متزامنة على خادم" summary="async:true يُرجع العمل بالمللي ثانية، ثم يقوم تنفيذ جديد بتشغيل حلقة الوكيل أثناء استقصاء المتصل."
-{
-  "html": "<div class=\"diagram-async\"><div class=\"diagram-box\" data-rough>message/send<br><small class=\"diagram-muted\">غير متزامن: صحيح</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-panel\"><span class=\"diagram-pill\">مهمة سرد</span><span class=\"diagram-pill warn\">عودة العمل</span><small class=\"diagram-muted\">~ ميلي ثانية</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&darr;</div><div class=\"diagram-box\" data-rough>إطلاق نار ذاتي POST /_agent-native/a2a/_process-task<br><small class=\"diagram-muted\">رمز POST المميز · تنفيذ جديد · مهلة كاملة</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-col\"><div class=\"diagram-pill\">tasks/get (استطلاع)</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">مكتمل</div></div></div>",
-  "css": ".diagram-async{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-async .diagram-panel{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-col{display:flex;flex-direction:column;align-items:center;gap:6px}.diagram-async .diagram-arrow{font-size:20px;line-height:1}",
-  "caption": "A recurring sweeper re-claims any task left in flight if the function execution dies mid-run."
+<Diagram id="doc-block-k36czs" title={"دورة حياة مهمة غير متزامنة على خادم"} summary={"async:true يُرجع العمل بالمللي ثانية، ثم يقوم تنفيذ جديد بتشغيل حلقة الوكيل أثناء استقصاء المتصل."} caption="A recurring sweeper re-claims any task left in flight if the function execution dies mid-run.">
+
+```html
+<div class="diagram-async">
+  <div class="diagram-box" data-rough>
+    message/send<br /><small class="diagram-muted">غير متزامن: صحيح</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-panel">
+    <span class="diagram-pill">مهمة سرد</span
+    ><span class="diagram-pill warn">عودة العمل</span
+    ><small class="diagram-muted">~ ميلي ثانية</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&darr;</div>
+  <div class="diagram-box" data-rough>
+    إطلاق نار ذاتي POST /_agent-native/a2a/_process-task<br /><small
+      class="diagram-muted"
+      >رمز POST المميز · تنفيذ جديد · مهلة كاملة</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-col">
+    <div class="diagram-pill">tasks/get (استطلاع)</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
+    <div class="diagram-pill ok">مكتمل</div>
+  </div>
+</div>
+```
+
+```css
+.diagram-async {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-async .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.diagram-async .diagram-arrow {
+  font-size: 20px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 > [!IMPORTANT]
 > **مهلات الخطاف والبوابة بدون خادم:**
 > تفرض بوابات البيئة المستضافة (مثل Netlify أو Vercel أو Cloudflare Pages) حدود تنفيذ صارمة (غالبًا من 10 إلى 30 ثانية) على مسارات HTTP العامة. نظرًا لأن حلقات الوكيل يمكن أن تستغرق وقتًا طويلاً لتشغيل الاستعلامات وجلب السياق وتنفيذ الأدوات، **يجب عليك استخدام `async: true`** عند استدعاء نقاط نهاية A2A أو التعامل مع webhooks الخارجية. يؤدي هذا على الفور إلى إرجاع حالة `working` إلى بوابة API، مع إبقاء الاتصال مفتوحًا لبضعة ميلي ثانية فقط، بينما يقوم `/process-task` POST الذي يتم تشغيله ذاتيًا بتنفيذ حلقة الوكيل في الخلفية. لا تقم بحظر طلب HTTP الأساسي في انتظار انتهاء حلقة الوكيل.

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

@@ -19,13 +19,74 @@ Actions هي المصدر الوحيد للحقيقة لأي شيء يفعله
 إذا كنت تقرر ما إذا كنت ستكشف عن عملية بدون رأس، في الدردشة، في
 السيارة الجانبية المضمنة، أو كشاشة تطبيق كاملة، راجع [Agent Surfaces](/docs/agent-surfaces).
 
-```an-diagram title="تعريف واحد، سبعة مستهلكين" summary="ينتشر defineAction() واحد على كل سطح - الوكيل، وUI، وHTTP، وMCP، وA2A, وCLI - مع مخطط واحد تم التحقق منه ونص run() واحد."
-{
-  "html": "<div class=\"diagram-fanout\"><div class=\"diagram-panel center\" data-rough><span class=\"diagram-pill accent\">defineAction()</span><small class=\"diagram-muted\">مخطط + تشغيل (), تم تعريفه مرة واحدة</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-grid\"><div class=\"diagram-node\">أداة الوكيل<br><small class=\"diagram-muted\">JSON المخطط في السياق</small></div><div class=\"diagram-node\">React خطافات<br><small class=\"diagram-muted\">useActionQuery/Mutation</small></div><div class=\"diagram-node\">كولأكشن ()<br><small class=\"diagram-muted\">العميل الحتمي</small></div><div class=\"diagram-node\">HTTP<br><small class=\"diagram-muted\">/_agent-native/actions/:اسم</small></div><div class=\"diagram-node\">أداة JSON<br><small class=\"diagram-muted\">المضيفين الخارجيين</small></div><div class=\"diagram-node\">أداة JSON<br><small class=\"diagram-muted\">تطبيقات agent-native الأخرى</small></div><div class=\"diagram-node\">CLI<br><small class=\"diagram-muted\">عمل pnpm &lt;اسم&gt;</small></div></div></div>",
-  "css": ".diagram-fanout{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-fanout .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px}.diagram-fanout .diagram-arrow{font-size:22px;line-height:1}.diagram-fanout .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}"
+<Diagram id="doc-block-gug5w4" title={"تعريف واحد، سبعة مستهلكين"} summary={"ينتشر defineAction() واحد على كل سطح - الوكيل، وUI، وHTTP، وMCP، وA2A, وCLI - مع مخطط واحد تم التحقق منه ونص run() واحد."}>
+
+```html
+<div class="diagram-fanout">
+  <div class="diagram-panel center" data-rough>
+    <span class="diagram-pill accent">defineAction()</span
+    ><small class="diagram-muted">مخطط + تشغيل (), تم تعريفه مرة واحدة</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-grid">
+    <div class="diagram-node">
+      أداة الوكيل<br /><small class="diagram-muted"
+        >JSON المخطط في السياق</small
+      >
+    </div>
+    <div class="diagram-node">
+      React خطافات<br /><small class="diagram-muted"
+        >useActionQuery/Mutation</small
+      >
+    </div>
+    <div class="diagram-node">
+      كولأكشن ()<br /><small class="diagram-muted">العميل الحتمي</small>
+    </div>
+    <div class="diagram-node">
+      HTTP<br /><small class="diagram-muted">/_agent-native/actions/:اسم</small>
+    </div>
+    <div class="diagram-node">
+      أداة JSON<br /><small class="diagram-muted">المضيفين الخارجيين</small>
+    </div>
+    <div class="diagram-node">
+      أداة JSON<br /><small class="diagram-muted"
+        >تطبيقات agent-native الأخرى</small
+      >
+    </div>
+    <div class="diagram-node">
+      CLI<br /><small class="diagram-muted">عمل pnpm &lt;اسم&gt;</small>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-fanout {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-fanout .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px 16px;
+}
+.diagram-fanout .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-fanout .diagram-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 ```
 
+</Diagram>
+
 إذا كان كل من UI والوكيل بحاجة إلى القيام بشيء ما، فاتصل إلى إجراء - وليس مخصصًا
 المسار. لمعرفة متى يكون البروتوكول على شكل مسار هو المكالمة الصحيحة، راجع [تفضيل Actions
 لعمليات التطبيقات](/docs/server#actions-first).

package/docs/content/locales/ar-SA/agent-mentions.mdx

@@ -29,13 +29,77 @@ description: "ضع علامة على الوكلاء المخصصين والوك
 
 في كلتا الحالتين، يرى وكيلك الرئيسي الاستجابة ويمكنه الرجوع إليها أو البناء عليها.
 
-```an-diagram title="حيث @-طرق الإشارة" summary="يقوم الخادم بتقسيم كل إشارة حسب النوع: يتم تشغيل الوكلاء المخصصين محليًا، وينتقل الوكلاء المتصلون عبر A2A - يتم طي كلا الاستجابتين مرة أخرى في سياق الوكيل الرئيسي."
-{
-  "html": "<div class=\"diagram-mention\"><div class=\"diagram-node\">@-يذكر<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><span class=\"diagram-pill accent\">الخادم يحل</span><small class=\"diagram-muted\">استخراج المراجع حسب النوع</small></div><div class=\"diagram-col\"><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">وكيل مخصص<br><small class=\"diagram-muted\">وكلاء/*.md &middot; يدير المحلية</small></div></div><div class=\"row\"><span class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</span><div class=\"diagram-box\">وكيل متصل<br><small class=\"diagram-muted\">A2A نظير &middot; مكالمة عن بعد</small></div></div></div><div class=\"diagram-arrow diagram-accent\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-box diagram-accent\">&lt;agent-response&gt;<br><small class=\"diagram-muted\">حقنها في العامل الرئيسي</small></div></div>",
-  "css": ".diagram-mention{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-mention .center{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px}.diagram-mention .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-mention .row{display:flex;align-items:center;gap:8px}.diagram-mention .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-1j39yqy" title={"حيث @-طرق الإشارة"} summary={"يقوم الخادم بتقسيم كل إشارة حسب النوع: يتم تشغيل الوكلاء المخصصين محليًا، وينتقل الوكلاء المتصلون عبر A2A - يتم طي كلا الاستجابتين مرة أخرى في سياق الوكيل الرئيسي."}>
+
+```html
+<div class="diagram-mention">
+  <div class="diagram-node">
+    @-يذكر<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>
+    <span class="diagram-pill accent">الخادم يحل</span
+    ><small class="diagram-muted">استخراج المراجع حسب النوع</small>
+  </div>
+  <div class="diagram-col">
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        وكيل مخصص<br /><small class="diagram-muted"
+          >وكلاء/*.md &middot; يدير المحلية</small
+        >
+      </div>
+    </div>
+    <div class="row">
+      <span class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</span>
+      <div class="diagram-box">
+        وكيل متصل<br /><small class="diagram-muted"
+          >A2A نظير &middot; مكالمة عن بعد</small
+        >
+      </div>
+    </div>
+  </div>
+  <div class="diagram-arrow diagram-accent" aria-hidden="true">&rarr;</div>
+  <div class="diagram-box diagram-accent">
+    &lt;agent-response&gt;<br /><small class="diagram-muted"
+      >حقنها في العامل الرئيسي</small
+    >
+  </div>
+</div>
+```
+
+```css
+.diagram-mention {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.diagram-mention .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 14px;
+}
+.diagram-mention .diagram-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.diagram-mention .row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.diagram-mention .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 ## كيفية العمل {#how-it-works}
 
 عند إرسال رسالة تحتوي على إشارة `@`، يحدث ما يلي على الخادم:

package/docs/content/locales/ar-SA/agent-surfaces.mdx

@@ -25,13 +25,67 @@ Agent-Native قابل للتأليف بشكل متعمد. يمكنك استخد
 وكيل بإجراء واحد، يظهر في الدردشة كجدول أو مخطط، ويصبح فيما بعد
 ملء الشاشة في التطبيق دون تغيير العملية التي يستدعيها الوكيل.
 
-```an-diagram title="الطيف السطحي" summary="سطح عمل واحد، وأربعة أشكال للمنتج - كل منها يضيف واجهة مستخدم دون تغيير العملية الموجودة أسفله."
-{
-  "html": "<div class=\"diagram-spectrum\"><div class=\"diagram-card\"><strong>مقطوعة الرأس</strong><small class=\"diagram-muted\">الإجراءات والوظائف والبرامج النصية والوكلاء الآخرين</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>دردشة غنية</strong><small class=\"diagram-muted\">الملحن، النص، بطاقات الأدوات</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><strong>عربة جانبية مدمجة</strong><small class=\"diagram-muted\">الوكيل بجانب تطبيق موجود</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><strong>التطبيق الكامل</strong><small class=\"diagram-muted\">شاشات متينة، بيانات، تعاون</small></div></div><div class=\"diagram-base\" data-rough><span class=\"diagram-muted\">نفس الإجراءات · نفس SQL · نفس حلقة الوكيل</span></div>",
-  "css": ".diagram-spectrum{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.diagram-spectrum .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:150px;flex:1}.diagram-spectrum .diagram-arrow{align-self:center;font-size:22px;line-height:1}.diagram-base{margin-top:12px;padding:10px 14px;text-align:center}"
+<Diagram id="doc-block-143z1bg" title={"الطيف السطحي"} summary={"سطح عمل واحد، وأربعة أشكال للمنتج - كل منها يضيف واجهة مستخدم دون تغيير العملية الموجودة أسفله."}>
+
+```html
+<div class="diagram-spectrum">
+  <div class="diagram-card">
+    <strong>مقطوعة الرأس</strong
+    ><small class="diagram-muted"
+      >الإجراءات والوظائف والبرامج النصية والوكلاء الآخرين</small
+    >
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>دردشة غنية</strong
+    ><small class="diagram-muted">الملحن، النص، بطاقات الأدوات</small>
+  </div>
+  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+  <div class="diagram-card">
+    <strong>عربة جانبية مدمجة</strong
+    ><small class="diagram-muted">الوكيل بجانب تطبيق موجود</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
+    ><strong>التطبيق الكامل</strong
+    ><small class="diagram-muted">شاشات متينة، بيانات، تعاون</small>
+  </div>
+</div>
+<div class="diagram-base" data-rough>
+  <span class="diagram-muted">نفس الإجراءات · نفس SQL · نفس حلقة الوكيل</span>
+</div>
+```
+
+```css
+.diagram-spectrum {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.diagram-spectrum .diagram-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  min-width: 150px;
+  flex: 1;
+}
+.diagram-spectrum .diagram-arrow {
+  align-self: center;
+  font-size: 22px;
+  line-height: 1;
+}
+.diagram-base {
+  margin-top: 12px;
+  padding: 10px 14px;
+  text-align: center;
 }
 ```
 
+</Diagram>
+
 ## عميل بلا رأس {#headless}
 
 استخدم المسار بدون رأس عندما لا يحتاج أحد إلى التحديق في شاشة التطبيق المخصصة أثناء
@@ -347,13 +401,65 @@ export function AppShell({ children }) {
 }
 ```
 
-```an-diagram title="كيف يتم ربط السيارة الجانبية بتطبيق مضيف" summary="يقوم البرنامج المساعد بتثبيت مسارات Agent-Native من جانب الخادم؛ يقوم React بتدفق سياق الصفحة الجانبية وأوامر المضيف للخارج."
-{
-  "html": "<div class=\"diagram-sidecar\"><div class=\"diagram-panel\"><strong>التطبيق المضيف</strong><small class=\"diagram-muted\">SaaS الموجودة لديك</small><div class=\"diagram-node\">getContext()<br><small class=\"diagram-muted\">الطريق · الاختيار</small></div><div class=\"diagram-node\">على التنقل / على التحديث<br><small class=\"diagram-muted\">أوامر المضيف</small></div></div><div class=\"diagram-col-arrows\"><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&larr;</div></div><div class=\"diagram-panel accent-panel\"><span class=\"diagram-pill accent\">AgentNativeEmbedded</span><small class=\"diagram-muted\">وكيل + مساحة عمل</small><div class=\"diagram-box\" data-rough>Agent-Native الطرق<br><small class=\"diagram-muted\">التي تم تركيبها بواسطة البرنامج المساعد للخادم</small></div></div></div>",
-  "css": ".diagram-sidecar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-sidecar .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:200px}.diagram-sidecar .diagram-col-arrows{display:flex;flex-direction:column;gap:6px}.diagram-sidecar .diagram-arrow{font-size:22px;line-height:1}"
+<Diagram id="doc-block-x4te10" title={"كيف يتم ربط السيارة الجانبية بتطبيق مضيف"} summary={"يقوم البرنامج المساعد بتثبيت مسارات Agent-Native من جانب الخادم؛ يقوم React بتدفق سياق الصفحة الجانبية وأوامر المضيف للخارج."}>
+
+```html
+<div class="diagram-sidecar">
+  <div class="diagram-panel">
+    <strong>التطبيق المضيف</strong
+    ><small class="diagram-muted">SaaS الموجودة لديك</small>
+    <div class="diagram-node">
+      getContext()<br /><small class="diagram-muted">الطريق · الاختيار</small>
+    </div>
+    <div class="diagram-node">
+      على التنقل / على التحديث<br /><small class="diagram-muted"
+        >أوامر المضيف</small
+      >
+    </div>
+  </div>
+  <div class="diagram-col-arrows">
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
+    <div class="diagram-arrow diagram-muted" aria-hidden="true">&larr;</div>
+  </div>
+  <div class="diagram-panel accent-panel">
+    <span class="diagram-pill accent">AgentNativeEmbedded</span
+    ><small class="diagram-muted">وكيل + مساحة عمل</small>
+    <div class="diagram-box" data-rough>
+      Agent-Native الطرق<br /><small class="diagram-muted"
+        >التي تم تركيبها بواسطة البرنامج المساعد للخادم</small
+      >
+    </div>
+  </div>
+</div>
+```
+
+```css
+.diagram-sidecar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.diagram-sidecar .diagram-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px;
+  min-width: 200px;
+}
+.diagram-sidecar .diagram-col-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.diagram-sidecar .diagram-arrow {
+  font-size: 22px;
+  line-height: 1;
 }
 ```
 
+</Diagram>
+
 راجع [Embedding SDK](/docs/embedding-sdk) للتعرف على مصادقة المضيف وعزل قاعدة البيانات
 وضع iframe/المنتقي وجسر المستوى الأدنى API.