OpsGuard - لوحة المحاكاة 🖥️

هذه هي واجهة المستخدم الأمامية لـ OpsGuard. وهي بمثابة «عقل» بصري لتوضيح وكيل SRE المستقل أثناء العمل.

نظرًا لأن OpsGuard وكيل يعتمد على الواجهة الخلفية أولاً، فقد صُممت لوحة التحكم هذه لمحاكاة بيئة إنتاج وتصوّر سير عمل الوكيل غير المرئي (Ingest → Analyze → Fix) للعروض التوضيحية والمراقبة.

🌟 الميزات

• جمالية السايبربانك/خاصة بـ SRE: الوضع الداكن، خطوط المسح، وتأثيرات التوهج السينمائي لإحساس يشبه مركز «التحكم في المهمات».
• عناصر التحكم في المحاكاة المباشرة:
  • CRASH: تشغيل يدوي لحادث حرج (مثل تسرب الذاكرة) عبر API.
  • RESET: استعادة النظام إلى حالة نظيفة.
• سجلات فورية: موجز يشبه الطرفية يعرض «أفكار» الوكيل (تحليل الذكاء الاصطناعي، اكتشاف الأسباب الجذرية، تنفيذ الأوامر).
• مصوّر خط الأنابيب: خطوة تقدم توضح بالضبط مكان الحادث في دورة الحياة (استيعاب ← تشخيص ← انتظار ← تنفيذ ← تم الحل).
• محاكاة المقاييس: يعرض ارتفاعات CPU/الذاكرة عندما يدخل النظام في حالة «حرجة».

🛠️ الإعداد

المتطلبات الأساسية

• تأكد من أن الواجهة الخلفية لـ OpsGuard تعمل على http://localhost:3000.

1. تثبيت التبعيات

npm install

2. تكوين البيئة

أنشئ ملف .env (أو استخدم الافتراضي):

VITE_BACKEND_URL=http://localhost:3000

3. تشغيل خادم التطوير

npm run dev

افتح http://localhost:5173 في متصفحك.

🎮 كيفية تشغيل العرض التجريبي

1. شغّل الواجهة الخلفية وهذه الواجهة الأمامية.
2. افتح لوحة التحكم. يجب أن تكون حالة النظام OPERATIONAL (أخضر).
3. انقر على زر CRASH (أعلى اليمين).
4. راقب:
   • تتحول الحالة إلى CRITICAL (أحمر).
   • تظهر سجلات الذكاء الاصطناعي في الطرفية.
   • يتم تنشيط خطوة «Diagnose».
5. تصرف:
   • انتظر ظهور زر AUTHORIZE AUTO-FIX.
   • انقر عليه.
6. الحل:
   • راقب شريط التقدم أثناء «Executing Fix».
   • يعود النظام إلى OPERATIONAL.

🎨 التخصيص

• الأنماط: مبني باستخدام TailwindCSS v4.
• الأيقونات: باستخدام lucide-react.
• التأثيرات: رسوم CSS المتحركة لتوهج «التنفس» وخطوط المسح موجودة في App.tsx و index.css.

📄 الرخصة

MIT