OpsGuard - Dashboard di Simulazione 🖥️

Questa è la Frontend UI di OpsGuard. Serve come "cervello" visivo per dimostrare l'agente SRE autonomo in azione.

Poiché OpsGuard è un agente backend-first, questa dashboard è progettata per simulare un ambiente di produzione e visualizzare il flusso di lavoro invisibile dell'agente (Ingest → Analyze → Fix) per demo e monitoraggio.

🌟 Caratteristiche

• Estetica Cyberpunk/SRE: Modalità scura, scanline ed effetti luminosi cinematografici per sentirsi in un centro di "Mission Control".
• Controlli di Simulazione Live:
  • CRASH: Attiva manualmente un incidente critico (es. Memory Leak) tramite API.
  • RESET: Riporta il sistema a uno stato pulito.
• Log in Tempo Reale: Un feed simile a un terminale che mostra i "pensieri" dell'agente (analisi AI, individuazione delle cause principali, esecuzione di comandi).
• Visualizzatore di Pipeline: Uno stepper di avanzamento che mostra esattamente dove si trova l'incidente nel ciclo di vita (Ingest → Diagnose → Waiting → Executing → Resolved).
• Simulazione delle Metriche: Visualizza i picchi di CPU/Memoria quando il sistema entra in uno stato "Critico".

🛠️ Configurazione

Prerequisiti

• Assicurati che il Backend OpsGuard sia in esecuzione su http://localhost:3000.

1. Installa le Dipendenze

npm install

2. Configura l'Ambiente

Crea un file .env (o usa quello predefinito):

VITE_BACKEND_URL=http://localhost:3000

3. Avvia il Server di Sviluppo

npm run dev

Apri http://localhost:5173 nel tuo browser.

🎮 Come Eseguire la Demo

1. Avvia il backend e questo frontend.
2. Apri la Dashboard. Lo stato del sistema dovrebbe essere OPERATIONAL (Verde).
3. Fai clic sul pulsante CRASH (in alto a destra).
4. Osserva:
   • Lo stato diventa CRITICAL (Rosso).
   • I log AI appaiono nel terminale.
   • Lo step "Diagnose" si attiva.
5. Agisci:
   • Attendi che appaia il pulsante AUTHORIZE AUTO-FIX.
   • Fai clic su di esso.
6. Risolvi:
   • Osserva la barra di avanzamento mentre è in corso "Executing Fix".
   • Il sistema torna a OPERATIONAL.

🎨 Personalizzazione

• Stili: Realizzato con TailwindCSS v4.
• Icone: Utilizza lucide-react.
• Effetti: Le animazioni CSS per l'alone "respirante" e le scanline si trovano in App.tsx e index.css.

📄 Licenza

MIT