hoangsonww/Claude-Code-Agent-Monitor

🚀 A real-time monitoring dashboard for Claude Code, built with SQLite3, Node.js, Express, React, Vite, TailwindCSS, and WebSockets. It tracks sessions, agent activity, tool usage, and subagent orchestration, providing live analytics, a Kanban status board, status notifications, a cute buddy, and an interactive web UI/MacOS/Windows native app.

해결하는 문제

표준 터미널을 통해서는 추적하기 어려운 Claude Code 에이전트 활동을 모니터링할 수 있는 전문적인 시각적 인터페이스를 제공합니다. 에이전트 세션, 도구 사용, 서브 에이전트 오케스트레이션 및 리소스 소비(토큰/비용)에 대한 가시성 문제를 해결합니다.

작동 방식

이 플랫폼은 네이티브 훅 시스템을 통해 Claude Code와 통합됩니다. Node.js 훅 핸들러가 이벤트(도구 사용 또는 세션 중지 등)를 캡처하여 HTTP POST를 통해 중앙 Express 서버로 전송합니다. 이 서버는 데이터를 SQLite에 저장하고 WebSockets를 사용하여 React 기반 프론트엔드에 업데이트를 브로드캐스트하여 실시간 시각화를 구현합니다.

대상 사용자

에이전트 워크플로우, 세션 기록 및 시스템 상태에 대한 심층적인 관측성(observability)이 필요한 Claude Code 사용자 개발자 및 팀.

주요 특징

실시간 모니터링: 활성 에이전트 카드, 도구 호출 및 세션 상태를 추적하기 위한 라이브 대시보드.
시각적 분석: 에이전트 및 세션 상태를 위한 칸반 보드, 도구 실행을 위한 Sankey 다이어그램, 워크플로우를 위한 D3.js/Mermaid 시각화.
세션 딥다이브: 라이브 트랜스크립트, 연대순 이벤트 타임라인, 에이전트 계층 트리 등을 포함한 상세 보기.
구성 관리: Claude Code 스킬, 서브 에이전트 및 메모리 파일을 검사하고 편집할 수 있는 전용 탐색기.
고급 알림: Slack, Discord, PagerDuty와 같은 14개의 webhook 제공업체를 지원하는 규칙 기반 알림 엔진.
원격 모니터링: SSH를 통해 다른 머신에서 활동 데이터를 가져오는 기능.