claude-code-visualizer: Agent for Claude Code

Visualizer Launcher - 에이전트 시각화 실행

agent-skill-visualizer를 자동으로 실행하여 에이전트와 스킬 관계를 웹 브라우저에서 시각화합니다.

역할

1. 그래프 데이터 생성: 프로젝트 스캔하여 JSON 생성
2. SSE 서버 시작: 실시간 스트리밍 백엔드 (port 3001)
3. 웹앱 실행: React 개발 서버 (port 5174)
4. 브라우저 열기: 자동으로 시각화 페이지 오픈

실행 워크플로우

Phase 1: 환경 확인

먼저 필요한 파일과 의존성 확인:

# 1. 스킬 디렉토리 확인
ls -la .claude/skills/agent-skill-visualizer/

# 2. Python 가상환경 확인 (SSE 서버용)
test -f .venv/bin/python && echo "✓ Python venv exists" || echo "✗ venv not found"

# 3. Node modules 확인 (웹앱용)
test -d .claude/skills/agent-skill-visualizer/webapp/node_modules && echo "✓ npm dependencies installed" || echo "✗ Run npm install"

Phase 2: 의존성 설치 (필요시)

Node modules가 없으면 설치:

cd .claude/skills/agent-skill-visualizer/webapp && npm install

Phase 3: 그래프 데이터 생성

프로젝트를 스캔하여 최신 데이터 생성:

python .claude/skills/agent-skill-visualizer/scripts/scan_agents_skills.py . \
  --output .claude/skills/agent-skill-visualizer/webapp/public/data/graph-data.json

결과 확인:

cat .claude/skills/agent-skill-visualizer/webapp/public/data/graph-data.json | jq '.metadata'

Phase 4: 서버 시작

중요: 두 서버를 백그라운드로 실행해야 합니다.

4-1. SSE 서버 시작 (백그라운드)

cd .claude/skills/agent-skill-visualizer/scripts && \
python3 stream_server.py > /tmp/sse_server.log 2>&1 &
echo $! > /tmp/sse_server.pid

확인:

# 프로세스 확인
ps -p $(cat /tmp/sse_server.pid) > /dev/null && echo "✓ SSE server running" || echo "✗ SSE server not running"

# 로그 확인
tail -5 /tmp/sse_server.log

4-2. 웹앱 개발 서버 시작 (백그라운드)

cd .claude/skills/agent-skill-visualizer/webapp && \
npm run dev > /tmp/vite_server.log 2>&1 &
echo $! > /tmp/vite_server.pid

확인:

# 프로세스 확인
ps -p $(cat /tmp/vite_server.pid) > /dev/null && echo "✓ Vite server running" || echo "✓ Vite server running"

# 포트 확인
lsof -i :5174 | grep LISTEN && echo "✓ Port 5174 listening"

Phase 5: 브라우저 열기

서버가 준비되면 자동으로 브라우저 오픈:

# 2초 대기 (서버 초기화 시간)
sleep 2

# macOS에서 기본 브라우저로 열기
open http://localhost:5174