Claude Monitor

Claude Code 에이전트 세션을 실시간으로 모니터링하는 웹 대시보드.

기능

• 에이전트 목록 — 실행 중인 Claude Code 에이전트 상태 실시간 표시
• 세션 추적 — 세션별 작업(Task) 진행 현황
• 훅 이벤트 — ~/.claude 디렉터리의 변경 사항 실시간 감지
• 트랜스크립트 뷰어 — 세션별 대화 타임라인, 툴 사용 내역, 토큰 통계
• 히스토리 — history.jsonl 기반 최근 명령 이력
• WebSocket으로 브라우저에 변경 사항 즉시 반영

설치 및 실행

방법 1: npx로 바로 실행 (설치 불필요)

npx @yanglet/claude-monitor

방법 2: 전역 설치 후 사용

npm install -g @yanglet/claude-monitor
claude-monitor

설치 후에는 어디서든 claude-monitor 명령어로 실행할 수 있어요.

포트 변경

기본 포트는 3000이에요. 변경하려면:

PORT=4000 npx @yanglet/claude-monitor
PORT=4000 claude-monitor

실행 시 자동으로 처리되는 것들

• ~/.claude/monitor-hook.sh 설치
• ~/.claude/settings.json에 PreToolUse / PostToolUse 훅 등록 (기존 설정 유지)
• 브라우저에서 http://localhost:4242 자동 오픈

요구 사항

• Node.js 18+
• Claude Code CLI (claude 명령어)

구조

claude-monitor/
├── cli.js           # npx 진입점
├── server.js        # Express + WebSocket 서버
├── public/
│   └── index.html   # React 단일 페이지 앱
└── monitor-hook.sh  # Claude Code 훅 스크립트

API

| 엔드포인트 | 설명 | |---|---| | GET /api/state | 현재 전체 상태 스냅샷 | | GET /api/transcript/:sessionId | 세션 트랜스크립트 파싱 결과 | | GET /api/stats | 전체 세션 토큰 통계 | | POST /hook | Claude Code 훅 이벤트 수신 |