OpsGuard - Панель симуляции 🖥️

Это интерфейс Frontend для OpsGuard. Он служит визуальным «мозгом», демонстрирующим работу автономного SRE-агента.

Поскольку OpsGuard — это агент, ориентированный на бэкенд, данная панель предназначена для симуляции производственной среды и визуализации невидимого рабочего процесса агента (Ingest → Analyze → Fix) для демонстраций и мониторинга.

🌟 Возможности

• Киберпанк/SRE-эстетика: Тёмная тема, линии развертки и кинематографические эффекты свечения, создающие атмосферу «Центра управления миссией».
• Элементы управления живой симуляцией:
  • CRASH: Вручную запускает критический инцидент (например, утечку памяти) через API.
  • RESET: Возвращает систему в чистое состояние.
• Логи в реальном времени: Лента, напоминающая терминал, с «мыслями» агента (анализ AI, поиск первопричин, выполнение команд).
• Визуализатор конвейера: Пошаговый индикатор прогресса, показывающий точную стадию инцидента в жизненном цикле (Ingest → Diagnose → Waiting → Executing → Resolved).
• Симуляция метрик: Визуализирует скачки CPU/Памяти при переходе системы в состояние «Critical».

🛠️ Настройка

Предварительные требования

• Убедитесь, что бэкенд 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