RepoHistoryGraph

GitHub 레포 전체 히스토리를 Obsidian식 그래프로 시각화하는 로컬 웹앱

브랜치 분기, 머지, 태그, 스쿼시 머지의 원본 체인, 삭제된 브랜치의 PR 커밋까지 커밋 DAG 하나로 보여줌.

실행

npm install
npm start          # http://localhost:3000

입력란에 owner/repo 또는 GitHub URL 입력 후 불러오기.

환경 변수	기본값	용도
PORT	3000	서버 포트
GITHUB_TOKEN	없음	PR 조회 확장(무인증 200개 → 5,000개)
CACHE_DIR	./cache	mirror clone 캐시 위치

화면

• 통계 스트립: 레포, 시작일·경과 연수, 마지막 커밋, 커밋/머지/브랜치/태그/PR/스쿼시/기여자
• Force 모드: Obsidian식 force-directed 그래프. 스크롤 줌, 드래그 팬
• 시간축 모드: topo 순서 x축 + gitk식 레인 y축, 루트가 왼쪽. 최신 커밋 근처에서 시작
• PR 체인 체크박스: 스쿼시 원본·미머지 체인(ghost 커밋) 표시 전환
• 호버: sha, 커밋 메시지, 작성자, 시각, 머지 여부, PR 번호·제목·상태 툴팁
• 클릭: 우측 패널에 상세 + 부모 커밋 점프 + GitHub PR 링크
• 노드: 색=레인, 큰 원=머지 커밋, 흰 링=루트, 반투명=PR 전용 커밋, 점선=스쿼시 매핑

시간축 모드와 호버 툴팁:

PR 체인이 많은 레포(octocat/Hello-World)의 Force 모드:

동작 방식

1. git clone --mirror --filter=tree:0 — 커밋 오브젝트만 받아 1만 커밋급 레포도 수 초 내 확보
2. mirror가 refs/pull/*/head까지 가져오므로 스쿼시 원본·삭제 브랜치 커밋이 clone만으로 보임
3. git log --exclude=refs/pull/*/merge --all --topo-order 파싱 — GitHub 합성 테스트 머지 제외
4. 브랜치·태그에서 도달 불가한 커밋을 ghost(PR 전용)로 마킹
5. GitHub API로 PR 메타 조회, 스쿼시/리베이스 머지는 원본 tip → 결과 커밋 점선 링크 생성
6. 재방문 시 git fetch --prune 증분 갱신

구조

파일	책임
server.js	clone/fetch 캐시, git log 파싱, GitHub API 보강, 정적 서빙. 의존성 없음(stdlib)
public/app.js	force-graph 렌더, 모드 전환, 필터, 통계, 패널
public/layout.js	레인 배정 순수 함수(node/브라우저 공용)
test.js	파싱·레인·스쿼시 링크 불변식 체크 (npm test)

런타임 의존성은 force-graph 하나.

한계

• GitHub 전용(PR ref 구조와 API에 의존)
• 무인증 API는 PR 200개·시간당 60요청 캡. 초과분은 통계에 +로 표시
• PR 체인 필터 후에도 레인 번호를 유지해 세로 여백이 남을 수 있음
• diff·파일 목록 없음(tree:0 필터로 커밋 메타만 clone)

검증

• octocat/Hello-World: 2,622 커밋(PR 체인 2,617 포함), 합성 머지 1,517개 제외 확인
• expressjs/express: 10,548 커밋 응답 6초(첫 clone 포함), 레인 계산 7ms, 스쿼시 링크 26개 검출