OpsGuard - सिमुलेशन डैशबोर्ड 🖥️

यह OpsGuard का फ्रंटएंड UI है। यह स्वायत्त SRE एजेंट को क्रिया में प्रदर्शित करने के लिए एक दृश्य "मस्तिष्क" के रूप में कार्य करता है।

चूँकि OpsGuard एक बैकएंड-प्रथम एजेंट है, यह डैशबोर्ड डेमो और मॉनिटरिंग के लिए एक उत्पादन वातावरण को अनुकरण करने और एजेंट के अदृश्य वर्कफ़्लो (Ingest → Analyze → Fix) को विज़ुअलाइज़ करने के लिए डिज़ाइन किया गया है।

🌟 विशेषताएँ

• साइबरपंक/SRE सौंदर्यशास्त्र: गहरे रंग मोड, स्कैनलाइनें, और सिनेमाई चमक प्रभाव जो 'मिशन कंट्रोल' केंद्र जैसा अनुभव देते हैं।
• लाइव सिमुलेशन नियंत्रण:
  • CRASH: मैन्युअल रूप से API के माध्यम से एक गंभीर घटना (जैसे, मेमोरी लीक) ट्रिगर करता है।
  • RESET: सिस्टम को साफ स्थिति में पुनर्स्थापित करता है।
• रीयल-टाइम लॉग्स: एक टर्मिनल-जैसी फीड जो एजेंट के 'विचारों' (AI विश्लेषण, मूल कारण ढूंढना, कमांड निष्पादित करना) को दिखाती है।
• पाइपलाइन विज़ुअलाइज़र: एक प्रगति स्टेपर जो बताता है कि घटना जीवनचक्र में कहां है (Ingest → Diagnose → Waiting → Executing → Resolved)।
• मीट्रिक सिमुलेशन: जब सिस्टम 'क्रिटिकल' स्थिति में प्रवेश करता है तो 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 (लाल) हो जाती है।
   • AI लॉग्स टर्मिनल में दिखाई देते हैं।
   • 'Diagnose' चरण सक्रिय होता है।
5. कार्य करें:
   • AUTHORIZE AUTO-FIX बटन प्रकट होने की प्रतीक्षा करें।
   • उस पर क्लिक करें।
6. समाधान करें:
   • प्रगति बार देखें जब यह 'Executing Fix' कर रहा हो।
   • सिस्टम OPERATIONAL पर वापस आ जाता है।

🎨 अनुकूलन

• शैलियाँ: TailwindCSS v4 के साथ बनाया गया।
• आइकन: lucide-react का उपयोग कर रहे हैं।
• प्रभाव: 'श्वास' चमक और स्कैनलाइन के लिए CSS एनिमेशन App.tsx और index.css में हैं।

📄 लाइसेंस

MIT