تفاصيل مشروع واجهة مستخدم كود كلود (Claude Code UI)

نظرة عامة على المشروع

Claude Code UI هي واجهة مستخدم مفتوحة المصدر ومتوافقة مع الويب والجوال، مصممة خصيصًا لواجهة سطر الأوامر الرسمية (CLI) لـ Claude Code من Anthropic. يتيح هذا المشروع للمستخدمين عرض وإدارة جميع جلسات ومشاريع Claude Code محليًا أو عن بُعد، بنفس الطريقة التي تتم بها عبر واجهة سطر الأوامر. يوفر هذا للمستخدمين واجهة كاملة تعمل في أي مكان.

مميزات المشروع

🎨 تصميم متجاوب

• توافق عبر الأنظمة الأساسية: دعم سلس لأجهزة سطح المكتب والأجهزة اللوحية والهواتف المحمولة.
• تخطيط متكيف: شريط جانبي قابل للطي وأولوية محتوى ذكية.
• سهولة اللمس: إيماءات السحب والتنقل باللمس.
• التنقل عبر الجوال: شريط علامات تبويب سفلي لسهولة الاستخدام بالإبهام.

💬 واجهة دردشة تفاعلية

• دردشة مدمجة: واجهة دردشة مدمجة للتواصل السلس مع Claude Code.
• اتصال في الوقت الفعلي: بث استجابات Claude عبر اتصال WebSocket.
• إدارة الجلسات: استئناف المحادثات السابقة أو بدء جلسات جديدة.
• سجل الرسائل: سجل محادثات كامل يتضمن الطوابع الزمنية والبيانات الوصفية (metadata).
• دعم صيغ متعددة: نصوص، كتل برمجية، ومراجع ملفات.

🖥️ وظائف طرفية مدمجة

• وصول مباشر إلى CLI: وصول مباشر إلى Claude Code CLI عبر وظيفة shell المدمجة.
• إدارة العمليات: إنشاء وإدارة العمليات المدمجة مع Claude CLI.
• تنفيذ الأوامر: يدعم جميع أوامر Claude Code CLI.

📁 مستكشف الملفات

• شجرة ملفات تفاعلية: شجرة ملفات تفاعلية مع تمييز بناء الجملة (syntax highlighting) والتحرير في الوقت الفعلي.
• تحرير الملفات في الوقت الفعلي: قراءة وتعديل وحفظ الملفات مباشرة داخل الواجهة.
• تمييز بناء الجملة: يدعم لغات برمجة متعددة.
• عمليات الملفات: إنشاء، إعادة تسمية، حذف الملفات والدلائل.

💾 استمرارية الجلسات

• حفظ تلقائي: يتم حفظ جميع المحادثات تلقائيًا.
• تنظيم الجلسات: تجميع الجلسات حسب المشروع والطابع الزمني.
• عمليات الجلسات: إعادة تسمية، حذف، وتصدير سجل المحادثات.
• مزامنة عبر الأجهزة: الوصول إلى الجلسات من أي جهاز.

البنية التقنية

مخطط بنية النظام

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ الواجهة الأمامية │ │ الواجهة الخلفية │ │ تكامل Claude CLI │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ │
└─────────────────┘ └─────────────────┘ └─────────────────┘

مكدس التقنيات الخلفية (Backend Tech Stack)

• خادم Express: يوفر واجهات برمجة تطبيقات RESTful وخدمة الملفات الثابتة.
• خادم WebSocket: يستخدم للدردشة وتحديثات المشروع.
• تكامل Claude CLI: إنشاء وإدارة العمليات.
• إدارة الجلسات: تحليل JSONL واستمرارية المحادثات.
• واجهة برمجة تطبيقات نظام الملفات (File System API): توفر مستكشف الملفات للمشاريع.

مكدس التقنيات الأمامية (Frontend Tech Stack)

• React 18: بنية مكونات حديثة، تستخدم Hooks.
• CodeMirror: محرر أكواد متقدم، مع تمييز بناء الجملة.
• Vite: أداة بناء سريعة وخادم تطوير.
• Tailwind CSS: إطار عمل CSS يعتمد على الأدوات المساعدة (utility-first).

التثبيت والتكوين

متطلبات النظام

• Node.js الإصدار 16 أو أحدث.
• Claude Code CLI مثبت ومكون.

خطوات التثبيت

1. استنساخ المستودع (Clone Repository):

   git clone https://github.com/siteboon/claudecodeui.git
   cd claudecodeui
   

2. تثبيت التبعيات (Install Dependencies):

   npm install
   

3. تكوين البيئة (Configure Environment):

   cp .env.example .env
   # قم بتحرير ملف .env حسب الحاجة
   

4. تشغيل التطبيق (Start Application):

   # وضع التطوير (مع إعادة التحميل السريع)
   npm run dev
   

5. فتح المتصفح (Open Browser):

   • بيئة التطوير: http://localhost:3001

إعدادات الأمان

🔒 تنبيه أمان هام

جميع أدوات Claude Code معطلة افتراضيًا. هذا يمنع العمليات الضارة المحتملة من التشغيل تلقائيًا.

لاستخدام الوظائف الكاملة لـ Claude Code، تحتاج إلى تمكين الأدوات يدويًا:

1. افتح إعدادات الأدوات: انقر على أيقونة الترس في الشريط الجانبي.
2. التمكين الانتقائي: قم بتشغيل الأدوات التي تحتاجها فقط.
3. تطبيق الإعدادات: سيتم حفظ تفضيلاتك محليًا.

الطريقة الموصى بها: ابدأ بتمكين الأدوات الأساسية، ثم أضف المزيد من الوظائف تدريجيًا حسب الحاجة.

الوظائف الرئيسية

إدارة المشاريع

• اكتشاف المشاريع تلقائيًا: تكتشف واجهة المستخدم مشاريع Claude Code تلقائيًا من ~/.claude/projects/.
• متصفح المشاريع المرئي: يعرض جميع المشاريع المتاحة وبياناتها الوصفية وعدد الجلسات.
• عمليات المشروع: إعادة تسمية، حذف، وتنظيم المشاريع.
• تنقل ذكي: وصول سريع إلى المشاريع والجلسات الأخيرة.

إدارة الملفات

• تصفح هيكل المشروع: مع وظيفة التنقل القابلة للتوسيع/الطي.
• تحرير في الوقت الفعلي: تعديل الملفات مباشرة داخل الواجهة.
• عمليات الملفات: وظائف كاملة لإدارة الملفات والدلائل.

إدارة الجلسات

• تخزين مستمر: يتم حفظ جميع الجلسات تلقائيًا.
• سجل التاريخ: تتبع كامل لسجل المحادثات.
• دعم الجلسات المتعددة: إدارة جلسات مشاريع متعددة في وقت واحد.

استكشاف الأخطاء وإصلاحها

مشكلة شائعة 1: واجهة المستخدم لا تعرض أي مشاريع أو قائمة مشاريع فارغة

الحل:

• تأكد من تثبيت Claude CLI بشكل صحيح.
• قم بتشغيل أمر claude في دليل مشروع واحد على الأقل للتهيئة.
• تحقق من وجود دليل ~/.claude/projects/ وأن لديه الأذونات المناسبة.

مشكلة شائعة 2: الملفات لم يتم تحميلها، أخطاء في الأذونات، دليل فارغ

الحل:

• تحقق من أذونات دليل المشروع (استخدم ls -la في الطرفية).
• تحقق من وجود مسار المشروع وإمكانية الوصول إليه.
• راجع سجلات وحدة تحكم الخادم للحصول على معلومات مفصلة عن الأخطاء.
• تأكد من عدم محاولة الوصول إلى أدلة النظام خارج نطاق المشروع.