# نظرة عامة على واجهة المستخدم (/ar/docs/verdent-for-vscode/getting-started/interface)

> فهم مكونات واجهة Verdent والتنقل فيها



تتميز Verdent for VS Code بواجهة نظيفة من ثلاثة أجزاء مصممة لتقليل التشتيت إلى أدنى حد. تجري جميع التفاعلات داخل الشريط الجانبي لـVisual Studio Code، مما يبقيك قريبًا من الكود الخاص بك.

***

## الوصول إلى Verdent [#الوصول-إلى-verdent]

افتح Verdent باستخدام أي من هذه الطرق:

* **أيقونة الشريط الجانبي** - انقر على أيقونة Verdent في شريط أنشطة Visual Studio Code (الشريط الجانبي الأيسر)
* **اختصار لوحة المفاتيح** - اضغط `Cmd+L` (macOS) أو `Ctrl+L` (Windows/Linux)
* **لوحة الأوامر** - اضغط `Cmd+Shift+P` / `Ctrl+Shift+P`، ثم ابحث عن "Verdent"

تُفتح اللوحة في الشريط الجانبي لـVisual Studio Code ويمكن تغيير حجمها أو نقلها أو تثبيتها حسب الحاجة.

<Tip>
  غيّر حجم لوحة Verdent عن طريق سحب حافتها لرؤية المزيد من سجل المحادثة أو لمنح المحرر مساحة أكبر.
</Tip>

***

## مكونات الواجهة [#مكونات-الواجهة]

<Tabs>
  <Tab title="الشريط العلوي">
    وصول سريع إلى الوظائف الرئيسية:

    | الزر          | الوظيفة                                                                |
    | ------------- | ---------------------------------------------------------------------- |
    | جلسة جديدة    | ابدأ محادثة جديدة بسياق نظيف                                           |
    | سجل المشروع   | تصفح الجلسات السابقة واستعادتها                                        |
    | مركز المستخدم | عرض معلومات الحساب ورصيد الأرصدة                                       |
    | التعليقات     | إرسال تعليقات والإبلاغ عن المشكلات                                     |
    | الإعدادات     | تهيئة خوادم MCP، والوكلاء الفرعيين، والقواعد، وإعدادات النموذج المسبقة |
  </Tab>

  <Tab title="عرض المحادثة">
    تعرض منطقة المحادثة الرئيسية:

    * **ردود الذكاء الاصطناعي** - نص منسّق مع كتل كود مميزة بتلوين الصياغة
    * **فروق الكود** - مقارنات تفاعلية قبل/بعد لتغييرات الملفات
    * **الخطط** - تقسيمات مهام منظمة عند استخدام Plan Mode
    * **نتائج التحقق** - مخرجات تنفيذ الاختبارات ومعلومات تصحيح الأخطاء
    * **عمليات الملفات** - تأكيد إنشاء الملفات أو تعديلها أو حذفها
    * **مخرجات الوكلاء الفرعيين** - نتائج المهام المفوَّضة

    يحتفظ عرض المحادثة بسجل المحادثة الكامل، مما يتيح لك التمرير عبر التفاعلات السابقة.
  </Tab>

  <Tab title="مربع الإدخال">
    منطقة الإدخال في الأسفل مع عناصر تحكم لصياغة الطلبات:

    **منطقة إدخال النص:** حقل النص الرئيسي لكتابة الـ prompts بلغة طبيعية

    **أزرار الإجراءات:**

    | الزر                               | الوظيفة                                                                |
    | ---------------------------------- | ---------------------------------------------------------------------- |
    | إضافة سياق                         | الإشارة إلى الملفات باستخدام @-mentions أو استدعاء الوكلاء الفرعيين    |
    | إضافة صور أو ملفات                 | تضمين لقطات شاشة أو رسوم بيانية أو مستندات للتحليل                     |
    | إضافة وكيل فرعي                    | تفويض المهام إلى وكلاء فرعيين متخصصين                                  |
    | تبديل الوضع                        | التبديل بين وضع Agent و Plan و Chat                                    |
    | تبديل/تخصيص نموذج الذكاء الاصطناعي | اختيار إعدادات Performance وBalance وEfficiency المسبقة أو نماذج محددة |
    | Think Hard Mode                    | تفعيل أقصى ميزانية تفكير للاستدلال المعقد                              |
    | تبديل الأذونات                     | تغيير وضع الأذونات (Manual Accept، Auto-Run، Plan، Skip Permissions)   |
    | إرسال                              | إرسال الـ prompt الخاص بك إلى نموذج الذكاء الاصطناعي                   |
  </Tab>
</Tabs>

***

## مؤشرات الحالة [#مؤشرات-الحالة]

تعبّر Verdent عن حالة النظام من خلال مؤشرات بصرية:

<Tabs>
  <Tab title="حالة عرض المحادثة">
    يعبّر عرض المحادثة عن الحالة من خلال إشارات بصرية بدلًا من تسميات صريحة:

    * **مؤشر المعالجة** - يظهر مؤشر بصري عندما تعمل Verdent بنشاط. يظهر هذا عندما يقرأ الذكاء الاصطناعي الملفات، أو يحلل الكود، أو يستعد للرد.
    * **نص قيد التوليد** - سترى رد Verdent يظهر في الوقت الفعلي أثناء قيام الذكاء الاصطناعي بصياغة التفسيرات أو اقتراحات الكود أو الخطط. يشير النص المتدفق إلى أن النموذج يقوم بتوليد المخرجات بنشاط.
    * **لا شيء يحدث** - عندما يكون عرض المحادثة ثابتًا دون أي نشاط، تكون Verdent في حالة انتظار. هذا يعني أنك بحاجة إلى الموافقة على تغييرات الملفات، أو الإجابة عن أسئلة توضيحية، أو تقديم طلبك التالي.
  </Tab>

  <Tab title="مؤشر النص">
    يشير مؤشر النص في مربع الإدخال إلى ما إذا كانت Verdent جاهزة لقبول طلبات جديدة:

    * **مؤشر وامض** - مربع الإدخال نشط وجاهز لإدخال النص. يمكنك كتابة طلبك والضغط على إرسال. يظهر هذا عندما تنتهي Verdent من المعالجة وتنتظر طلبك التالي.
    * **بلا مؤشر/معطّل** - يكون مربع الإدخال معطّلًا أثناء معالجة Verdent لطلب ما. يمنع هذا مقاطعة المهمة الحالية ويضمن اكتمال كل طلب قبل بدء طلب آخر.

    **نمط سير العمل:** عند إرسال طلب، يختفي المؤشر (يصبح الإدخال معطّلًا). بمجرد أن تُكمل Verdent المهمة، يظهر المؤشر مجددًا، مما يشير إلى أنه يمكنك كتابة طلبك التالي.
  </Tab>

  <Tab title="مؤشرات الوضع">
    يعرض مربع الإدخال مؤشرات توضح إعداداتك الحالية:

    * **زر تبديل الأذونات** - يعرض وضع الأذونات الحالي كتسمية على الزر نفسه. سترى "Manual" أو "Auto" أو "Plan" أو "Skip" معروضة. يتيح لك ذلك تأكيد وضع التنفيذ النشط قبل إرسال طلبك. انقر على الزر للتنقل بين الأوضاع المتاحة.
    * **زر تبديل/تخصيص نموذج الذكاء الاصطناعي** - يعرض النموذج أو الإعداد المسبق المحدد حاليًا. سترى "Performance" أو "Balance" أو "Efficiency" للإعدادات المسبقة، أو أسماء نماذج محددة مثل "Claude 4.5 Sonnet" إذا اخترت نموذجًا فرديًا. يؤكد هذا النموذج الذي سيعالج طلبك التالي.

    توفر هذه المؤشرات تأكيدًا سريعًا لإعداداتك الحالية، مما يساعدك على التأكد من التهيئة الصحيحة قبل إرسال الـ prompts.
  </Tab>
</Tabs>

<Note>
  تُحدَّث مؤشرات الحالة في الوقت الفعلي لتوضح بالضبط ما تقوم به Verdent، مما يساعدك على فهم نشاط الوكيل.
</Note>

***

## أنماط التنقل [#أنماط-التنقل]

<Tabs>
  <Tab title="التنقل في الشريط العلوي">
    يستخدم الشريط العلوي أنماط تنقل مختلفة حسب الوظيفة:

    **الأزرار:**

    * **جلسة جديدة** - يؤدي النقر على هذا الزر إلى مسح محادثتك الحالية فورًا وإعادتك إلى عرض محادثة جديد بسياق نظيف. لا توجد صفحة أو نافذة منبثقة منفصلة؛ يحدث ذلك فورًا في نفس العرض.

    **الصفحات:**

    * **سجل المشروع** - يفتح عرض صفحة كاملة مخصصة حيث يمكنك تصفح جميع جلساتك ومحادثاتك السابقة. ينتقل هذا بعيدًا عن عرض المحادثة لإظهار سجل جلساتك. انقر على زر **X** للعودة إلى عرض المحادثة.

    **النوافذ المنبثقة (نوافذ التراكب):**

    * **مركز المستخدم** - يفتح نافذة تراكب منبثقة تعرض معلومات حسابك ورصيد الأرصدة وتفاصيل الاستخدام. يبقى عرض المحادثة مرئيًا خلف النافذة المنبثقة.
    * **التعليقات** - يفتح نافذة تراكب منبثقة تحتوي على نموذج لإرسال التعليقات والإبلاغ عن المشكلات. يبقى عرض المحادثة في الخلفية.

    لإغلاق النوافذ المنبثقة، انقر خارج منطقة النافذة المنبثقة أو استخدم زر **X** في زاوية النافذة.

    **القوائم المنسدلة:**

    * **الإعدادات** - يفتح قائمة منسدلة مضمّنة مع خيارات لخوادم MCP، والوكلاء الفرعيين، والقواعد، وإعدادات النموذج المسبقة. عند اختيار خيار من القائمة (مثل "MCP Servers")، يفتح عرض صفحة كاملة مخصصة لتلك التهيئة. انقر على زر **X** للعودة إلى عرض المحادثة.
  </Tab>

  <Tab title="التنقل في مربع الإدخال">
    تفتح جميع أزرار مربع الإدخال قوائم منسدلة للتهيئة السريعة المضمّنة:

    **نمط القائمة المنسدلة:** كل زر في مربع الإدخال (إضافة سياق، إضافة صور أو ملفات، إضافة وكيل فرعي، تبديل الوضع، تبديل/تخصيص نموذج الذكاء الاصطناعي، Think Hard Mode، تبديل الأذونات) يفتح قائمة منسدلة أسفل الزر مباشرة. تتيح هذه القوائم تهيئة طلبك دون مغادرة عرض المحادثة.

    **سبب استخدام القوائم المنسدلة:** يبقيك هذا التصميم مرتبطًا بعرض المحادثة لجميع العمليات الشائعة. يمكنك ضبط الإعدادات واختيار النماذج وتغيير الأوضاع وإضافة السياق دون فقدان رؤية محادثتك أو مقاطعة سير عملك.

    **إغلاق القوائم المنسدلة:** تُغلق القوائم المنسدلة تلقائيًا عند إجراء اختيار أو النقر في أي مكان خارج القائمة. يتيح لك ذلك تهيئة الإعدادات بسرعة والعودة إلى صياغة طلبك.
  </Tab>

  <Tab title="العودة إلى عرض المحادثة">
    تستخدم عناصر التنقل المختلفة طرقًا مختلفة للعودة إلى عرض المحادثة الرئيسي:

    **من الصفحات (سجل المشروع، الإعدادات):**

    * انقر على زر **X** في الزاوية العلوية للصفحة
    * يعيدك ذلك إلى عرض المحادثة حيث توقفت

    **من النوافذ المنبثقة (مركز المستخدم، التعليقات):**

    * انقر على زر **X** في زاوية النافذة المنبثقة، أو
    * انقر في أي مكان خارج نافذة التراكب المنبثقة
    * كان عرض المحادثة مرئيًا دائمًا خلف النافذة المنبثقة، لذا يعيد إغلاق النافذة المنبثقة التركيز فورًا

    **من القوائم المنسدلة:**

    * تُغلق القوائم تلقائيًا عند إجراء اختيار
    * انقر في أي مكان خارج القائمة للإغلاق دون اختيار
    * أنت لا تغادر عرض المحادثة أبدًا، لذا لا يوجد شيء "للعودة" منه

    **فلسفة التنقل:** تحدث معظم التفاعلات من خلال قوائم منسدلة تبقيك في عرض المحادثة. تنتقل **سجل المشروع** و**خيارات الإعدادات** إلى صفحات منفصلة، بينما تستخدم **مركز المستخدم** و**التعليقات** نوافذ تراكب منبثقة لا تخفي محادثتك.
  </Tab>
</Tabs>

<Tip>
  استخدم @-mentions والأوامر بالشرطة المائلة (slash commands) لتوجيه التنقل. يساعد هذا Verdent على فهم نيتك واختيار الأدوات المناسبة.
</Tip>

***

## التخصيص باستخدام القواعد [#التخصيص-باستخدام-القواعد]

انتقل إلى **الإعدادات** ← **القواعد** لتخصيص سلوك Verdent باستخدام ملفات Markdown:

<Tabs>
  <Tab title="قواعد المستخدم">
    **الملف:** `VERDENT.md`

    **النطاق:** تفضيلات عامة تُطبَّق عبر جميع المشاريع

    **الغرض:** حدد تفضيلات الاستخدام الشخصية التي ستطبقها Verdent أثناء المحادثات عبر جميع مساحات العمل. هذه إعدادات عامة تستمر عبر جميع الجلسات بغض النظر عن المشروع الذي تعمل عليه.

    **حالات الاستخدام الشائعة:**

    * لغة الإخراج الافتراضية (مثل: "الرد دائمًا بالإسبانية")
    * تفضيلات تعليقات الكود (مثل: "تضمين تعليقات مفصلة في الكود المُولَّد")
    * تنسيق الردود (مثل: "استخدام TypeScript في جميع أمثلة JavaScript")
    * تفضيلات أسلوب الترميز الشخصي

    **كيفية التعديل:**

    <Steps>
      <Step title="افتح الإعدادات">
        انقر على **الإعدادات** في الشريط العلوي
      </Step>

      <Step title="حدد القواعد">
        اختر **القواعد** من القائمة المنسدلة
      </Step>

      <Step title="عدّل قواعد المستخدم">
        حدد **قواعد المستخدم** لإنشاء أو تعديل `VERDENT.md` بتنسيق Markdown
      </Step>
    </Steps>
  </Tab>

  <Tab title="قواعد المشروع">
    **الملف:** `AGENTS.md`

    **النطاق:** قواعد خاصة بالمشروع لمساحة العمل الحالية فقط

    **الغرض:** حدد معايير الترميز، والأنماط المعمارية، وسير العمل التطويري التي تنطبق تحديدًا على المشروع الحالي. تتجاوز هذه القواعد قواعد المستخدم عند العمل في مساحة العمل هذه، وتساعد Verdent على فهم المتطلبات الفريدة لمشروعك.

    **حالات الاستخدام الشائعة:**

    * معايير ترميز خاصة بالمشروع (مثل: "استخدام kebab-case لجميع أسماء الملفات")
    * الأنماط المعمارية (مثل: "اتباع نمط المستودع (repository pattern) للوصول إلى البيانات")
    * متطلبات مكدس التقنيات (مثل: "استخدام React Hooks، وليس مكونات الفئات (class components)")
    * اصطلاحات الفريق (مثل: "يجب أن تتضمن جميع ردود API رموز الأخطاء")

    **كيفية التعديل:**

    <Steps>
      <Step title="افتح الإعدادات">
        انقر على **الإعدادات** في الشريط العلوي
      </Step>

      <Step title="حدد القواعد">
        اختر **القواعد** من القائمة المنسدلة
      </Step>

      <Step title="عدّل قواعد المشروع">
        حدد **قواعد المشروع** لإنشاء أو تعديل `AGENTS.md` في جذر مساحة العمل
      </Step>
    </Steps>

    هذا الملف خاص بالمشروع ويُودَع عادةً في نظام التحكم بالإصدارات.
  </Tab>

  <Tab title="قواعد الخطة">
    **الملف:** `Plan.md`

    **النطاق:** يتحكم في تنسيق ومحتوى مخرجات Plan Mode

    **الغرض:** خصّص المعلومات التي تظهر في الخطط، ومدى تفصيلها، والتنسيق الذي تتبعه عند استخدام Plan Mode. تحدد هذه القواعد بنية ومحتوى الخطط التي تُولّدها Verdent قبل تنفيذ المهام المعقدة.

    **حالات الاستخدام الشائعة:**

    * مستوى تفصيل الخطة (مثل: "تضمين تقديرات زمنية لكل خطوة")
    * بنية الخطة (مثل: "تضمين قسم 'المخاطر' دائمًا")
    * متطلبات المحتوى (مثل: "سرد جميع الملفات التي سيتم تعديلها")
    * تنسيق الإخراج (مثل: "استخدام قوائم مرقّمة للخطوات المتسلسلة")

    **كيفية التعديل:**

    <Steps>
      <Step title="افتح الإعدادات">
        انقر على **الإعدادات** في الشريط العلوي
      </Step>

      <Step title="حدد القواعد">
        اختر **القواعد** من القائمة المنسدلة
      </Step>

      <Step title="عدّل قواعد الخطة">
        حدد **قواعد الخطة** لإنشاء أو تعديل `plan_rules.md` بتنسيق Markdown
      </Step>
    </Steps>
  </Tab>
</Tabs>

***

## اطّلع أيضًا على [#اطّلع-أيضًا-على]

<CardGroup cols="2">
  <Card title="البدء السريع" icon="rocket" href="/docs/verdent-for-vscode/getting-started/quick-start">
    ابدأ استخدام الواجهة مع مهمتك الأولى
  </Card>

  <Card title="إعدادات التهيئة" icon="gear" href="/docs/verdent-for-vscode/configuration/settings">
    خصّص سلوك الواجهة والتفضيلات
  </Card>
</CardGroup>