OpsGuard - シミュレーションダッシュボード 🖥️

これはOpsGuardのフロントエンドUIです。自律型SREエージェントの動作をデモするためのビジュアルな「頭脳」として機能します。

OpsGuardはバックエンドファーストのエージェントなので、このダッシュボードは本番環境をシミュレートし、エージェントの目に見えないワークフロー（取り込み → 分析 → 修正）をデモや監視用に可視化するように設計されています。

🌟 機能

• サイバーパンク/SRE美学: ダークモード、スキャンライン、映画のようなグローエフェクトで「ミッションコントロール」センターのような雰囲気。
• ライブシミュレーションコントロール:
  • CRASH: API経由で重大インシデント（例：メモリリーク）を手動でトリガーします。
  • RESET: システムをクリーンな状態に復元します。
• リアルタイムログ: エージェントの「思考」（AI分析、根本原因の特定、コマンド実行）を表示するターミナル風フィード。
• パイプラインビジュアライザー: インシデントがライフサイクルのどこにあるかを正確に示す進行ステッパー（取り込み → 診断 → 待機 → 実行 → 解決）。
• メトリクスシミュレーション: システムが「クリティカル」状態になるとCPU/メモリのスパイクを可視化します。

🛠️ セットアップ

前提条件

• 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ログが表示されます。
   • 「診断」ステップがアクティブになります。
5. 操作:
   • AUTHORIZE AUTO-FIXボタンが表示されるのを待ちます。
   • クリックします。
6. 解決:
   • 進行状況バーが「修正を実行中」と表示するのを確認します。
   • システムがOPERATIONALに戻ります。

🎨 カスタマイズ

• スタイル: TailwindCSS v4で構築。
• アイコン: lucide-reactを使用。
• エフェクト: 「呼吸する」グローとスキャンラインのCSSアニメーションは App.tsx と index.css にあります。

📄 ライセンス

MIT