AI Agents Dashboard スキル

AIエージェント群のリアルタイム監視機能を備えた、美しく自動更新されるウェブUI。

機能

• リアルタイム更新: 2秒ごとに自動更新
• スマート完了検出: エージェントの終了を自動検出
• 最終アクティビティ追跡: 各エージェントについて「Xs/Xm/Xh前」を表示
• アイドル状態検出: 60秒以上アイドル状態のエージェントは「IDLE」として表示
• 美しいUI: カピバラにインスパイアされたカラーパレットとライト/ダークテーマ対応
• クリック可能なエージェント詳細: 任意のエージェントをクリックしてライブアクティビティフィードを表示
• ゼロ依存: Python標準ライブラリ + バニラHTML/CSS/JSのみを使用
• 単一ファイル: HTML埋め込みによる自己完結型

クイックスタート

1. スワーム設定ファイルを作成

プロジェクトディレクトリに swarm-config.json を作成します:

{
  "swarm_name": "My Project Swarm",
  "start_time": "2026-02-05T14:00:00Z",
  "agents": {
    "agent-1": {
      "role": "Core Architect",
      "wave": 1,
      "task_id": "abc123",
      "mission": "Set up project structure"
    },
    "agent-2": {
      "role": "Backend Developer",
      "wave": 2,
      "task_id": "def456",
      "mission": "Build API endpoints"
    }
  }
}

2. ダッシュボードを起動

# サーバーをワークスペースにコピー
cp ~/.claude/skills/ai-agents-dashboard/ai-agents-dashboard-server.py /workspace/my-project/

# 環境変数を設定
export SWARM_DIR="/workspace/my-project"
export SWARM_NAME="My Project Swarm"
export DASHBOARD_PORT=8080

# サーバーを起動
python3 /workspace/my-project/ai-agents-dashboard-server.py &

# ウェブアクセス用にポートをエクスポート
/app/export-port.sh 8080

3. ダッシュボードを表示

エクスポートされたURLをブラウザで開きます。ダッシュボードは2秒ごとに自動更新されます。

設定

環境変数

変数	デフォルト値	説明
SWARM_DIR	カレントディレクトリ	swarm-config.jsonを含むディレクトリ
TASK_DIR	/tmp/claude-1000	タスク出力ファイルを含むディレクトリ
DASHBOARD_PORT	8080	HTTPサーバーポート
SWARM_NAME	設定から取得	スワームの表示名

APIエンドポイント

GET /

ダッシュボードHTMLページを返します。

GET /api/status

スワームの完全なステータスをJSON形式で返します。

GET /api/agent/{agent-id}

特定のエージェントの詳細情報を返します。

GET /health

ヘルスチェック用に {"status": "ok", "version": "v6"} を返します。

ステータス状態

ステータス	色	条件
pending	グレー	出力ファイルが存在しない
running	オレンジ(パルス)	アクティブな出力、最後のイベントから60秒未満
idle	ティール	最後のイベントから60〜120秒
completed	緑	120秒以上のアイドル状態またはマーカー検出
failed	赤	status.jsonに "status": "failed" が設定されている

このスキルに含まれるファイル

~/.claude/skills/ai-agents-dashboard/
├── SKILL.md                         # このファイル
├── ai-agents-dashboard-server.py    # メインサーバー(自己完結型)
└── launch-dashboard.py              # ランチャーユーティリティスクリプト

ランチャーユーティリティの使用方法

from launch_dashboard import launch_dashboard, update_agent_task_id

# ダッシュボードを起動
url = launch_dashboard(
    swarm_name="my-project",
    swarm_dir="/workspace/my-project",
    agents={
        "agent-1-core": {"role": "Core", "wave": 1, "mission": "Setup"},
        "agent-2-api": {"role": "API", "wave": 2, "mission": "Build API"},
    }
)

# 起動後、エージェントタスクIDを更新
update_agent_task_id(
    swarm_dir="/workspace/my-project",
    agent_id="agent-1-core",
    task_id="abc123def456"
)

トラブルシューティング

ポートがすでに使用中の場合

lsof -i :8080
export DASHBOARD_PORT=8081

ライブアクティビティフィードが表示されない場合

各エージェント起動後に update_agent_task_id() を呼び出して、シンボリックリンクを作成してください。

クレジット

AIエージェント群をリアルタイムで監視するために構築されました。