tuo-lei/vibe-replay

Claude Code 및 Cursor 세션을 공유 가능하고 대화형인 리플레이(replays)로 변환하세요.

AI 에이전트(AI agents)는 수십 번의 도구 호출(tool calls), 수백 번의 파일 수정, 수천 줄의 추론(reasoning)이 포함된 길고 복잡한 세션에서 코드를 작성합니다. 세션이 종료되면 그 모든 컨텍스트(context)가 사라집니다. 여러분의 PR diff는 무엇이 바뀌었는지는 보여주지만, 리뷰어는 왜 바뀌었는지는 볼 수 없습니다. 팀원들은 여러분의 프롬프팅(prompting)으로부터 배울 수 없습니다. 심지어 다음 주에 여러분 자신의 세션을 다시 재생(replay)할 수도 없습니다.

단 하나의 명령. 단 하나의 독립형 HTML 파일. 모든 프롬프트, 모든 생각, 모든 도구 호출이 애니메이션화되어 대화형으로 제공됩니다.

npx vibe-replay

Claude Code 플러그인(plugin)으로도 사용할 수 있습니다. 에이전트가 PR 생성 중에 자동으로 리플레이를 생성합니다.

npx vibe-replay -d로 실행하여

모든 프로젝트에 걸친 모든 Claude Code 및 Cursor 세션을 활동 히트맵(activity heatmaps), 총 비용, 프로젝트 분석과 함께 확인하세요.

세션을 선택하고 애니메이션 재생을 통해 모든 프롬프트, 사고 블록(thinking block), 도구 호출, 코드 diff를 단계별로 살펴보세요. 세 가지 보기 모드 — 전체(All), 압축(Compact), 사용자 정의(Custom)를 지원합니다.

자동 생성된 분석: 시간에 따른 토큰 소모 및 비용, 컨텍스트 윈도우(context window) 사용량, 캐시 히트율(cache hit rates), 도구 호출 분포, 모델별 분류, 턴(turn)별 상세 내역.

GitHub 스타일의 활동 히트맵, 스트릭(streaks), 주간 트렌드, 상위 프로젝트, 모델 사용량, 그리고 모든 세션에 걸친 비용 추적. 여러분의 코딩 패턴이 시간이 지남에 따라 어떻게 진화하는지 확인하세요.

vibe-replay는 Claude Code 플러그인으로도 사용할 수 있습니다. 설치하고 나면, 에이전트가 자율적으로 리플레이를 생성하는 방법을 학습합니다. 여러분이 CLI 명령을 실행하지 않아도 에이전트가 현재 세션을 찾고, GitHub에 바로 사용할 수 있는 아티팩트(artifacts)를 생성하며, 이를 PR에 포함할 수 있습니다.

세션 자동 검색— $CLAUDE_SESSION_ID를 통해 현재 세션의 JSONL 파일을 찾습니다.

PR 아티팩트 생성— PR 설명에 바로 사용할 수 있는 마크다운(markdown) 요약 + 애니메이션 GIF + SVG를 생성합니다.

HTML 리플레이 생성— 독립형 대화형 리플레이 파일을 생성합니다.

PR 워크플로우 통합— PR을 생성할 때 에이전트가 자동으로 리플레이 컨텍스트를 포함합니다.

Claude Code를 열고 /plugin을 실행하세요.

, 그런 다음 Discover 탭에서 vibe-replay를 검색하여 설치하세요.

또는 CLI를 통해 설치할 수 있습니다:

/plugin marketplace add tuo-lei/vibe-replay
/plugin install vibe-replay@vibe-replay

전체 플러그인을 설치하고 싶지 않은 경우:

mkdir -p ~/.claude/skills/replay
curl -o ~/.claude/skills/replay/SKILL.md \

# 슬래시 명령어 (Slash command) — 현재 세션의 리플레이 생성
/vibe-replay:replay
# 자연어 (Natural language) — PR 생성 시 에이전트가 자동으로 트리거
...

설정 제로 (Zero config)— 명령어 하나로 설정이나 계정 없이 즉시 작동합니다.
단일 HTML 파일 (Single HTML file)— 독립적이며 오프라인에서도 작동하고 외부 요청이 전혀 없습니다. Slack에 올리거나, 이메일로 보내거나, 어디서든 열 수 있습니다.
Claude Code + Cursor— 멀티 파일 및 재개된 세션을 포함하여 두 제공자(provider)를 자동으로 감지합니다.
공유 및 내보내기 (Share & export)— GitHub Gist, 애니메이션 SVG, GIF, 마크다운(markdown) 요약 또는 클라우드 업로드를 지원합니다. 비밀 정보 삭제(Secret redaction) 기능이 내장되어 있습니다.
서브 에이전트 시각화 (Sub-agent visualization)— 위임된 도구 호출(tool calls)과 서브 에이전트 트리(sub-agent trees)가 인라인으로 렌더링되는 것을 볼 수 있습니다.
댓글 (Comments)— 모든 장면에 메모를 남길 수 있습니다. 댓글은 HTML에 유지되며 리플레이와 함께 전달됩니다.
라이브 모드 (Live mode)— vibe-replay live는 실행 중인 Claude Code 또는 Codex 세션을 뷰어로 스트리밍하며, 디스크에 저장되는 최신 턴(turn)에 고정됩니다.

제공자 (Provider)	상태 (Status)
Claude Code	지원됨 (Supported)
...

AI 세션 파일 → vibe-replay → 독립형 HTML
(Claude Code, (감지(discover), (애니메이션 뷰어,
Cursor) 파싱(parse), 인사이트 패널,
...

CLI는 사용자의 기기에서 세션을 자동으로 감지하고, 모든 소스로부터 대화 데이터를 파싱하며, 모든 것을 사전 빌드된 React 뷰어—어디서나 작동하는 단일 HTML 파일—로 패키징합니다.

생성 후:

에디터에서 열기 (Open in Editor)— 장면에 주석을 달고, AI 피드백을 받으며, 다양한 형식으로 내보낼 수 있습니다.
빠른 미리보기 (Quick preview)— 브라우저에서 즉시 엽니다.
Gist로 게시 (Publish to Gist)— vibe-replay.com에서 공유 가능한 링크를 생성합니다.
GitHub용 내보내기 (Export for GitHub)— PR을 위한 마크다운(markdown) + 애니메이션 SVG를 제공합니다.

Vibe coding 리뷰 (Vibe coding review)— AI 지원 코딩 세션을 다시 재생하여 프롬프팅 (prompting) 패턴을 파악하고 워크플로 (workflow)를 개선합니다.

팀 지식 공유 (Team knowledge sharing)— 팀원들에게 단순히 최종적인 차이점 (diff)뿐만 아니라, 무언가를 어떻게 구축했는지 보여줍니다.

PR 컨텍스트 (PR context)— PR에 재생 링크를 첨부하여 리뷰어가 변경 사항 뒤에 숨겨진 논리적 근거를 이해할 수 있도록 합니다.

교육 및 온보딩 (Teaching & onboarding)— 문서화 또는 교육을 위해 실제 코딩 세션의 재생 가능한 워크스루 (walkthrough)를 생성합니다.

비용 추적 (Cost tracking)— 각 세션에서 정확히 얼마나 많은 토큰 (tokens)을 소모하는지 확인하고, 프로젝트 전반의 비용을 추적합니다.

독립형 HTML (Self-contained HTML)— 생성된 재생 파일은 모든 에셋 (assets)을 인라인 (inline)으로 포함합니다. 디스크에서 파일을 열면 외부 요청을 전혀 보내지 않으므로 오프라인, 방화벽 내부, 비행기 안에서도 작동합니다. (Gist/클라우드 기반 재생 파일은 로드 시 GitHub 또는 vibe-replay API에서 데이터를 가져옵니다.)

비밀 정보 삭제 (Secret redaction)— API 키, 토큰, PEM 키 및 민감한 경로가 생성 전에 자동으로 감지되어 삭제됩니다.

기본적으로 로컬 중심 (Local by default)— vibe-replay는 사용자의 기기에서 세션 파일을 읽어 로컬 HTML 파일을 생성합니다. 데이터는 사용자가 명시적으로 게시(Gist 또는 클라우드 업로드)하거나 로그인할 때만 기기를 벗어납니다. 로그인하는 경우, 집계된 세션 인사이트(횟수, 지속 시간, 비용 — 대화 내용은 포함되지 않음)가 매일 클라우드로 동기화됩니다.

래퍼나 프록시 없음 (No wrappers, no proxies)— vibe-replay는 Claude Code나 Cursor를 수정, 가로채기 또는 래핑 (wrap)하지 않습니다. 사후에 기존 세션 로그를 읽기만 합니다.

git clone https://github.com/tuo-lei/vibe-replay.git
cd vibe-replay
pnpm install
...

CLI 사용에는 Node.js >= 20이 필요합니다. website 패키지는 Astro 6를 사용하며 Node.js >= 22.12.0이 필요합니다. nvm을 사용할 수 있는 경우, website 스크립트는 website/.nvmrc로부터 자동으로 nvm use를 시도합니다.

아키텍처 세부 사항 및 개발 워크플로는 CONTRIBUTING.md를 참조하세요.