OpsGuard - Painel de Simulação 🖥️

Esta é a Interface Frontend do OpsGuard. Ela serve como um "Cérebro" visual para demonstrar o agente SRE autônomo em ação.

Como o OpsGuard é um agente voltado para o backend, este painel foi projetado para simular um ambiente de produção e visualizar o fluxo de trabalho invisível do agente (Ingest → Analyze → Fix) para demonstrações e monitoramento.

🌟 Recursos

• Estética Cyberpunk/SRE: Modo escuro, scanlines e efeitos de brilho cinematográficos para parecer um centro de "Controle de Missão".
• Controles de Simulação ao Vivo:
  • CRASH: Aciona manualmente um incidente crítico (ex.: Memory Leak) via API.
  • RESET: Restaura o sistema a um estado limpo.
• Logs em Tempo Real: Um feed estilo terminal mostrando os "pensamentos" do agente (análise de IA, descoberta de causas raiz, execução de comandos).
• Visualizador de Pipeline: Um stepper de progresso mostrando exatamente em que ponto do ciclo de vida o incidente está (Ingest → Diagnose → Waiting → Executing → Resolved).
• Simulação de Métricas: Visualiza picos de CPU/memória quando o sistema entra em um estado "Crítico".

🛠️ Configuração

Pré-requisitos

• Garanta que o backend do OpsGuard esteja rodando em http://localhost:3000.

1. Instalar Dependências

npm install

2. Configurar Ambiente

Crie um arquivo .env (ou use o padrão):

VITE_BACKEND_URL=http://localhost:3000

3. Executar Servidor de Desenvolvimento

npm run dev

Abra http://localhost:5173 no seu navegador.

🎮 Como Executar a Demonstração

1. Inicie o backend e este frontend.
2. Abra o Painel. O Status do Sistema deve estar OPERATIONAL (Verde).
3. Clique no botão CRASH (canto superior direito).
4. Observe:
   • O status muda para CRITICAL (Vermelho).
   • Logs de IA aparecem no terminal.
   • A etapa "Diagnose" é ativada.
5. Aja:
   • Aguarde o botão AUTHORIZE AUTO-FIX aparecer.
   • Clique nele.
6. Resolva:
   • Observe a barra de progresso enquanto "Executing Fix".
   • O sistema retorna para OPERATIONAL.

🎨 Personalização

• Estilos: Construído com TailwindCSS v4.
• Ícones: Usando lucide-react.
• Efeitos: As animações CSS para o brilho "respirando" e as scanlines estão em App.tsx e index.css.

📄 Licença

MIT