OpsGuard - Simulation Dashboard 🖥️

This is the Frontend UI for OpsGuard. It serves as a visual "Brain" to demonstrate the autonomous SRE agent in action.

Since OpsGuard is a backend-first agent, this dashboard is designed to simulate a production environment and visualize the agent's invisible workflow (Ingest → Analyze → Fix) for demos and monitoring.

🌟 Features

• Cyberpunk/SRE Aesthetic: Dark mode, scanlines, and cinematic glow effects to feel like a "Mission Control" center.
• Live Simulation Controls:
  • CRASH: Manually triggers a critical incident (e.g., Memory Leak) via API.
  • RESET: Restores the system to a clean state.
• Real-Time Logs: A terminal-like feed showing the agent's "thoughts" (AI analysis, finding root causes, executing commands).
• Pipeline Visualizer: A progress stepper showing exactly where the incident is in the lifecycle (Ingest → Diagnose → Waiting → Executing → Resolved).
• Metric Simulation: Visualizes CPU/Memory spikes when the system enters a "Critical" state.

🛠️ Setup

Prerequisites

• Ensure the OpsGuard Backend is running on http://localhost:3000.

1. Install Dependencies

npm install

2. Configure Environment

Create a .env file (or use default):

VITE_BACKEND_URL=http://localhost:3000

3. Run Development Server

npm run dev

Open http://localhost:5173 in your browser.

🎮 How to Run the Demo

1. Start the backend and this frontend.
2. Open the Dashboard. System Status should be OPERATIONAL (Green).
3. Click the CRASH button (Top Right).
4. Watch:
   • Status turns CRITICAL (Red).
   • AI Logs appear in the terminal.
   • The "Diagnose" step activates.
5. Act:
   • Wait for the AUTHORIZE AUTO-FIX button to appear.
   • Click it.
6. Resolve:
   • Watch the progress bar as it "Executing Fix".
   • System returns to OPERATIONAL.

🎨 Customization

• Styles: Built with TailwindCSS v4.
• Icons: Using lucide-react.
• Effects: CSS animations for the "breathing" glow and scanlines are in App.tsx and index.css.

📄 License

MIT