프로젝트 소개
cc-grass는 로컬 Claude Code 활동을 GitHub 스타일의 기여 그래프로 변환하여 독립형 SVG로 렌더링하는 소형 Node.js 명령줄 도구입니다. 셀 색상은 녹색 대신 주황색으로 표시됩니다. 이 도구는 ~/.claude/projects 아래에 JSONL 파일로 저장된 세션 전사본을 읽으며, ~/.codex가 존재하는 경우 OpenAI Codex CLI가 생성한 ~/.codex/sessions의 세션 롤아웃 데이터도 읽어옵니다.
README에 명시된 개발 동기는 명확합니다. Claude Code는 이미 터미널 내 /usage Stats에서 사용량 그래프를 그리지만, 해당 뷰는 로컬에만 머뭅니다. cc-grass는 동일한 기본 데이터를 파일로 다시 렌더링하여 GitHub 프로필 README, 포트폴리오 페이지 또는 기타 위치에 커밋하고 임베드할 수 있게 합니다.
README에서 발췌한 구현 및 설계 노트는 다음과 같습니다:
- 런타임 의존성 제로: Node의 fs, path, os 모듈만 사용합니다. ccusage나 API 호출이 필요 없으며, macOS, Linux, Windows의 Node 18 이상 버전에서 작동합니다.
- 증분 캐시: 반복 실행 시 새롭거나 변경된 세션 파일만 다시 파싱합니다. --no-cache로 비활성화할 수 있으며, 캐시 디렉토리 기본값은 ~/.cache/cc-grass입니다.
- SVG 레이아웃: GitHub의 레이아웃을 반영하여 10x10 셀, 3px 간격, 둥근 모서리, 월/수/금 행 레이블, 월별 헤더 및 Less/More 범례를 갖춥니다.
- 출력: 단일 SVG 파일 또는 --html 플래그를 통한 최소한의 HTML 페이지로 출력됩니다. 이 프로젝트는 의도적으로 데몬, 스케줄러 또는 번들된 GitHub Actions 워크플로우를 제공하지 않습니다. 스케줄링은 사용자의 몫이며, README에는 파일이 실제로 변경되었을 때만 재생성하고 커밋하는 crontab 예시가 포함되어 있습니다.
옵션으로는 측정 기준(프롬프트, 세션 또는 토큰, 기본값은 토큰), --since 및 --until을 통한 날짜 범위, 다크 또는 라이트 테마, 헤더 문자열 재정의, 대체 Claude 및 Codex 데이터 디렉토리, Codex 데이터 제외, 서브에이전트 전사본 제외, 캐시 위치 재정의 등이 있습니다.
토큰 계산: 일일 토큰 수는 항목당 입력, 출력, 캐시 생성 및 캐시 읽기 토큰을 합산하며, 이는 API에서 과금되는 모든 항목을 의미합니다. 서브에이전트 파일은 기본적으로 포함되며, 이를 제외하면 Claude Code의 /usage에 표시되는 수치와 일치합니다. Codex 세션은 token_count 이벤트의 누적 total_token_usage 값에서 델타를 사용하여 계산하므로 중복 이벤트가 이중으로 계산되지 않습니다. HTML 출력에는 저장된 가격 기간별 100만 토큰당 공개 요율을 기반으로 모델별 예상 API 비용이 표시됩니다. 요율을 알 수 없는 모델은 가격 이용 불가 마커가 표시되며, README에는 구독 사용자의 경우 실제로 이 금액을 지불하지 않는다고 명시되어 있습니다.
두 가지 주의 사항이 정직하게 기록되어 있습니다. 첫째, 셀별 호버 툴팁은 SVG title 요소를 사용합니다. 이는 독립형 SVG 뷰어와 HTML 출력에서는 작동하지만, GitHub README에 임베드된 경우에는 GitHub가 이를 이미지로 제공하고 브라우저가 title을 무시하기 때문에 작동하지 않습니다. 둘째, 샘플 SVG와 연결된 인터랙티브 페이지는 저자의 실제 활동을 보여주므로, README는 자신의 그래프를 게시할 위치를 신중하게 결정할 것을 권장합니다.
프로그래밍 방식의 API도 제공됩니다. parseClaudeProjects와 renderSvg를 임포트하여 자신의 코드에서 동일한 차트를 구축할 수 있습니다. 이 프로젝트는 MIT 라이선스로 제공됩니다.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.