リアルタイムSSE更新
Server-Sent Eventsで進捗変更を即座にブラウザへ配信。自動再接続とハートビート監視を実装。
リアルタイム監視ダッシュボード
AI Orchestrator
Dashboard
複数のAIエージェントの作業進捗を一元管理し、リアルタイムで可視化するWebダッシュボード。ファイル監視とSSEにより、ページリロード不要で最新状態を把握できます。
概要
AI Orchestrator Dashboardは、AI開発環境で並行稼働する複数のエージェントを統合的に監視するためのツールです。Webアプリ開発、学習コンテンツ生成、GCPベースの学習コンテンツ、スキル公開、動画生成という5種類のエージェントに対応しています。
各エージェントが書き出すPROGRESS.yamlファイルをchokidarで監視し、変更を検知するとEventBusを経由してServer-Sent Events（SSE）でブラウザにリアルタイム配信します。手動リロードは一切不要です。
主要機能
5種類のエージェント対応
Web開発(7フェーズ)、学習コンテンツ(9フェーズ)、GCP学習(9フェーズ)、スキル公開(6フェーズ)、動画生成(5フェーズ)をカバー。
chokidarファイル監視
awaitWriteFinishオプションで書き込みの安定性を確保。PROGRESS.yamlの変更をアトミックに読み取り。
キーボードショートカット
1-5でタブ切替、Sで設定、Nでプロジェクト登録、Rでリロード、/で検索。パワーユーザー向けの効率的操作。
WCAG 2.1 AA準拠
スキップリンク、ARIA属性、フォーカスインジケータ、スクリーンリーダー対応、動きの軽減設定に対応。
アーキテクチャ
イベント駆動リアクティブアーキテクチャを採用。全モジュール間通信はEventBusで疎結合化されています。
PROGRESS.yaml ──> chokidar ──> Watcher ──> EventBus ──┬──> SSE Router ──> Browser
│ │
Progress Parser ├──> REST API ──> HTTP Client
│
Project Store
│
projects.json
chokidar
ファイル変更検知
EventBus
疎結合イベント配信
SSE
リアルタイム配信
技術スタック
| レイヤー | 技術 |
|---|---|
| バックエンド | Node.js + Express |
| フロントエンド | HTML + Vanilla JS + Tailwind CSS (CDN) + Lucide Icons |
| ファイル監視 | chokidar (awaitWriteFinish) |
| リアルタイム通信 | Server-Sent Events (SSE) + Heartbeat |
| YAML解析 | js-yaml |
| データ永続化 | JSONファイル（アトミック書き込み） |
| アーキテクチャ | EventBusパターン（疎結合） |
| テスト | Jest + supertest |
開発プロセス
Phase別worktreeシステムによる自律開発ワークフローで構築されました。各フェーズで複数アプローチを並列開発し、自律評価で最良を選択する手法を採用しています。
Phase 0: 初期化
Git worktree作成、プロジェクト設定
Phase 1: 計画
2案並列生成、自律評価・選択、仕様設計、WBS作成、テスト設計
Phase 2: 実装
3プロトタイプ並列開発（Frontend / Backend / DB）、統合テスト
Phase 3: テスト
全テスト100%合格、カバレッジ70%以上達成
Phase 4: 品質改善
カバレッジ100%達成、パフォーマンス最適化、2最適化アプローチ並列
Phase 5: 完成処理
README生成、ドキュメント、音声解説、公開準備
Phase 6: 公開
GitHubポートフォリオ公開、セキュリティ検証、GitHub Pages有効化
品質メトリクス
190
テストケース
100%
カバレッジ
5
エージェント種別
9
APIエンドポイント
REST API
| メソッド | エンドポイント |
|---|---|
| GET | /api/projects |
| POST | /api/projects |
| PATCH | /api/projects/:id |
| DELETE | /api/projects/:id |
| GET | /api/projects/:id/progress |
| GET | /api/events |
| GET | /api/stats |
| POST | /api/scan |
| GET | /api/health |
音声解説
プロジェクトの概要を音声で聴くことができます。
0:00
0:00