docs/pro-agent-system.md

Pro Agent System - نظام الوكيل المحترف 🚀

📋 نظرة عامة

نظام Pro Agent هو تطوير ثوري لـ DeepSite يستخدم 4 مودلات ذكية تعمل بشكل متسلسل لإنتاج مواقع ويب استثنائية. بدلاً من مودل واحد، يتم توزيع المهام على 4 خبراء متخصصين.

🔄 سير العمل (Workflow)

المستخدم → المودل 1 (خبير التصميم) → المودل 2 (خبير الأنيميشن) → المودل 3 (خبير التكامل) → المودل 4 (المطور) → النتيجة النهائية

🎯 المودلات الأربعة

1️⃣ Design Expert - خبير التصميم

الدور: تحويل طلب المستخدم إلى مواصفات تصميم احترافية

البرومبت:

أنت مصمم ويب محترف بخبرة 40 سنة في تصميم المواقع الحديثة والمبتكرة. 
تخصصك في UX/UI Design، وقد عملت مع أكبر الشركات العالمية.

مهمتك: تحليل طلب المستخدم وتحويله إلى مواصفات تصميم تفصيلية ومحترفة.

يجب أن تشمل إجابتك:
- نمط التصميم المناسب (Modern, Minimalist, Corporate, Creative, etc.)
- نظام الألوان المقترح (Primary, Secondary, Accent colors)
- التايبوغرافي (خطوط العناوين والنصوص)
- التخطيط العام (Layout structure)
- العناصر البصرية المطلوبة
- تجربة المستخدم (User Experience considerations)
- التصميم المتجاوب (Responsive design requirements)

طلب المستخدم: {USER_PROMPT}

قدم مواصفات تصميم شاملة ومحترفة:

2️⃣ Animation Specialist - خبير الأنيميشن

الدور: إنشاء مواصفات الأنيميشنات والتفاعلات

البرومبت:

أنت خبير في أنيميشنات الويب والتفاعلات الحديثة. تتقن CSS Animations, JavaScript interactions, 
وأحدث تقنيات الحركة في الويب.

مهمتك: تحليل طلب المستخدم ومواصفات التصميم لإنشاء أنيميشنات مناسبة ومذهلة.

طلب المستخدم الأصلي: {USER_PROMPT}
مواصفات التصميم: {DESIGN_SPECS}

يجب أن تشمل إجابتك:
- أنيميشنات التحميل (Loading animations)
- تأثيرات الدخول (Entry animations)
- تفاعلات الأزرار والعناصر (Hover effects)
- انتقالات الصفحات (Page transitions)
- أنيميشنات التمرير (Scroll animations)
- تأثيرات الخلفية (Background effects)
- الحركات الدقيقة (Micro-interactions)

قدم مواصفات أنيميشن تفصيلية ومبتكرة:

3️⃣ Integration & Optimization Expert - خبير التكامل والتحسين

الدور: دمج وتحسين جميع المواصفات في برومبت شامل

البرومبت:

أنت خبير في تكامل وتحسين مشاريع الويب. مهمتك دمج جميع المواصفات السابقة 
في برومبت شامل ومحترف للحصول على أفضل نتيجة ممكنة.

المدخلات:
- طلب المستخدم الأصلي: {USER_PROMPT}
- مواصفات التصميم: {DESIGN_SPECS}
- مواصفات الأنيميشن: {ANIMATION_SPECS}

مهمتك:
1. تحليل وتقييم جميع المواصفات
2. حل أي تضارب أو تداخل
3. ترتيب الأولويات
4. إنشاء برومبت شامل ومحترف
5. إضافة أي تحسينات ضرورية

يجب أن يكون البرومبت النهائي:
- واضح ومفصل
- قابل للتنفيذ تقنياً
- محترف ومبتكر
- شامل لجميع الجوانب

أنشئ البرومبت النهائي المحسن:

4️⃣ Developer - المطور

الدور: تنفيذ البرمجة (النظام الحالي)

يستخدم النظام الحالي الموجود في DeepSite مع البرومبت المحسن من المودل الثالث.

⚙️ التطبيق في النظام

1. إضافة خيار Pro Agent في الإعدادات

الملف: components/space/ask-ai.tsx أو components/ai/settings.tsx

// إضافة state للوضع
const [isProMode, setIsProMode] = useState(false);

// في قسم الإعدادات
<div className="flex items-center justify-between">
  <label className="text-sm font-medium">Pro Agent Mode</label>
  <Switch 
    checked={isProMode} 
    onCheckedChange={setIsProMode}
  />
</div>

2. تعديل منطق إرسال الطلبات

const handleSubmit = async () => {
  if (isProMode) {
    // تشغيل نظام Pro Agent
    await runProAgentWorkflow(userPrompt);
  } else {
    // النظام العادي الحالي
    await runNormalWorkflow(userPrompt);
  }
};

3. تنفيذ Pro Agent Workflow

const runProAgentWorkflow = async (userPrompt: string) => {
  try {
    // المودل 1: خبير التصميم
    const designSpecs = await callAI(DESIGN_EXPERT_PROMPT, userPrompt);
    
    // المودل 2: خبير الأنيميشن
    const animationSpecs = await callAI(ANIMATION_EXPERT_PROMPT, {
      userPrompt,
      designSpecs
    });
    
    // المودل 3: خبير التكامل
    const finalPrompt = await callAI(INTEGRATION_EXPERT_PROMPT, {
      userPrompt,
      designSpecs,
      animationSpecs
    });
    
    // المودل 4: المطور (النظام الحالي)
    const result = await generateWithCurrentSystem(finalPrompt);
    
    return result;
  } catch (error) {
    console.error('Pro Agent workflow failed:', error);
    // Fallback للنظام العادي
    return runNormalWorkflow(userPrompt);
  }
};

🎨 واجهة المستخدم

مؤشر التقدم

const ProAgentProgress = ({ currentStep, steps }) => (
  <div className="space-y-2">
    {steps.map((step, index) => (
      <div key={index} className={`flex items-center gap-2 ${
        index === currentStep ? 'text-blue-500' : 
        index < currentStep ? 'text-green-500' : 'text-gray-500'
      }`}>
        <div className="w-2 h-2 rounded-full bg-current" />
        <span className="text-sm">{step}</span>
      </div>
    ))}
  </div>
);

📁 الملفات المطلوب تعديلها

1. components/space/ask-ai.tsx - إضافة خيار Pro Mode
2. lib/ai-provider-handler.ts - إضافة Pro Agent workflow
3. lib/prompts.ts - إضافة البرومبتات الجديدة
4. types/index.ts - إضافة types للـ Pro Agent

🚀 المزايا المتوقعة

• جودة أعلى: تخصص كل مودل في مجاله
• إبداع أكثر: تفكير متعدد المراحل
• نتائج احترافية: خبرة 40 سنة في التصميم
• تفاصيل دقيقة: اهتمام بكل جانب من جوانب الموقع
• تكامل مثالي: دمج محترف لجميع العناصر

🔧 ملاحظات التطوير

• يمكن استخدام نفس المودل للمراحل الأربع
• إضافة timeout لكل مرحلة
• إمكانية إيقاف العملية والعودة للوضع العادي
• حفظ النتائج الوسطية للمراجعة
• إضافة إعدادات متقدمة لكل مودل

---

تاريخ الإنشاء: 2025-08-23
الحالة: مقترح للتطوير
الأولوية: عالية 🔥