OpsGuard - Panel de Simulación 🖥️

Esta es la Interfaz de Usuario Frontend de OpsGuard. Sirve como un "Cerebro" visual para demostrar el agente SRE autónomo en acción.

Dado que OpsGuard es un agente centrado en el backend, este panel está diseñado para simular un entorno de producción y visualizar el flujo de trabajo invisible del agente (Ingesta → Análisis → Corrección) para demostraciones y monitoreo.

🌟 Características

• Estética Cyberpunk/SRE: Modo oscuro, líneas de barrido y efectos de brillo cinematográficos para sentirse como un centro de "Control de Misión".
• Controles de Simulación en Vivo:
  • CRASH: Desencadena manualmente un incidente crítico (ej., Fuga de Memoria) vía API.
  • RESET: Restaura el sistema a un estado limpio.
• Registros en Tiempo Real: Un feed similar a una terminal que muestra los "pensamientos" del agente (análisis de IA, encontrar causas raíz, ejecutar comandos).
• Visualizador de Pipeline: Un indicador de progreso que muestra exactamente dónde se encuentra el incidente en el ciclo de vida (Ingesta → Diagnosticar → Esperando → Ejecutando → Resuelto).
• Simulación de Métricas: Visualiza picos de CPU/Memoria cuando el sistema entra en estado "Crítico".

🛠️ Configuración

Requisitos previos

• Asegúrate de que el Backend de OpsGuard esté ejecutándose en http://localhost:3000.

1. Instalar Dependencias

npm install

2. Configurar el Entorno

Crea un archivo .env (o usa el predeterminado):

VITE_BACKEND_URL=http://localhost:3000

3. Ejecutar el Servidor de Desarrollo

npm run dev

Abre http://localhost:5173 en tu navegador.

🎮 Cómo Ejecutar la Demo

1. Inicia el backend y este frontend.
2. Abre el Panel. El Estado del Sistema debería ser OPERACIONAL (Verde).
3. Haz clic en el botón CRASH (Arriba a la derecha).
4. Observa:
   • El estado se vuelve CRÍTICO (Rojo).
   • Los registros de IA aparecen en la terminal.
   • El paso "Diagnosticar" se activa.
5. Actúa:
   • Espera a que aparezca el botón AUTORIZAR AUTO-CORRECCIÓN.
   • Haz clic en él.
6. Resuelve:
   • Observa la barra de progreso mientras "Ejecutando Corrección".
   • El sistema vuelve a OPERACIONAL.

🎨 Personalización

• Estilos: Construido con TailwindCSS v4.
• Iconos: Usando lucide-react.
• Efectos: Las animaciones CSS para el brillo "respirante" y las líneas de barrido están en App.tsx e index.css.

📄 Licencia

MIT