Memradar

당신의 AI 대화가 들려주는 이야기

Claude Code와 Codex 세션 로그를 로컬에서 시각화·회고하는 웹 도구. 한 줄이면 바로 대시보드가 열리고, 마지막엔 Spotify Wrapped 스타일의 Code Report로 자신의 코딩 스타일을 되돌아볼 수 있다.

• 세션 로그는 브라우저 안에서만 파싱된다. 서버 업로드, 계정, 로그인 모두 없음.
• 지원 로그: ~/.claude/projects/**/*.jsonl, ~/.codex/sessions/**/*.jsonl.
• 웹 URL: https://memradar.vercel.app

Quick Start

npx memradar@latest

로컬 세션 폴더를 자동으로 스캔하고 기본 브라우저로 대시보드가 열린다. 기기 밖으로 데이터가 나가지 않는다.

직접 파일 업로드

https://memradar.vercel.app 에서 .jsonl 파일이나 ~/.claude/projects/ 폴더를 드래그해도 된다.

설치 가이드

필수 조건

• Node.js 18 이상 (LTS 권장, 현재 24 LTS)
• npm은 Node.js 설치 시 함께 포함됨

Node.js 설치 여부 확인:

node -v   # v18.0.0 이상이면 OK
npm -v    # 8.0.0 이상이면 OK

Node.js가 없다면: https://nodejs.org 에서 LTS 버전 다운로드.

방법 1: npx (설치 없이 바로 실행)

npx memradar@latest

• 매번 최신 버전을 자동 다운로드 후 실행. 별도 설치 불필요.
• @latest를 붙여야 캐시 없이 항상 최신 버전이 실행된다.
• npx가 안 될 때:
  • npm ERR! code EACCES → 권한 문제. sudo npx memradar@latest (macOS/Linux) 또는 관리자 권한 터미널 (Windows)
  • npx: command not found → Node.js가 설치되지 않았거나 PATH에 없음. Node.js 재설치 필요.
  • ETARGET / notarget → npm 레지스트리 전파 지연. 1~2분 후 재시도하거나 npm cache clean --force 후 재시도.
  • 방화벽/프록시 환경 → 방법 2 (글로벌 설치) 또는 방법 3 (로컬 클론) 사용.

방법 2: 글로벌 설치

npm install -g memradar
memradar

• 한 번 설치하면 memradar 명령어로 바로 실행 가능.
• 업데이트: npm update -g memradar
• 삭제: npm uninstall -g memradar

방법 3: 소스에서 직접 빌드

git clone https://github.com/on1659/memradar.git
cd memradar
npm install
npm run build
node cli/index.mjs

• 네트워크 제한 환경이나 소스 수정이 필요할 때.
• 개발 서버: npm run dev (Vite HMR, 코드 수정 즉시 반영)

방법 4: 웹에서 바로 사용 (설치 불필요)

https://memradar.vercel.app 접속 후 .jsonl 파일을 드래그하면 된다. CLI 설치가 어려운 환경에서 유용.

플랫폼별 참고사항

| 플랫폼 | 참고 | |---|---| | Windows | PowerShell 또는 Git Bash에서 실행. WSL도 지원. | | macOS | 터미널에서 바로 실행. Homebrew로 Node 설치 가능: brew install node | | Linux | 배포판 패키지 매니저 또는 nvm 으로 Node 설치 권장 |

실행 모드

npx memradar@latest                          # 단일 HTML 파일 생성 후 브라우저 열기 (기본)
npx memradar@latest --server                 # 로컬 서버 모드 (localhost 만)
npx memradar@latest --server --host 0.0.0.0  # 같은 네트워크 다른 기기에서도 접근

• HTML 모드 (기본): 모든 세션을 하나의 HTML 파일로 생성 후 브라우저로 열림. 서버 불필요.
• 서버 모드: localhost:3939에서 앱을 서빙. Ctrl+C로 종료. --host 0.0.0.0 또는 --host 192.168.x.x로 LAN 노출 가능 (보안 주의 — 공용 와이파이 등에서는 금지).
• 웹사이트: 설치 없이 memradar.vercel.app에서 .jsonl 파일 드래그&드롭. 모든 분석은 브라우저 안에서만 — 세션 데이터는 외부 서버로 전송되지 않음.

Features

• 활동 히트맵 — GitHub 스타일 일별 활동
• 시간대별 차트 — 언제 가장 활발히 코딩했는지 한눈에
• 워드 클라우드 — 자주 사용한 단어·키워드
• 세션 브라우저 — 대화 내역 탐색·검색
• 토큰·모델 통계 — 사용량·비용 추이
• Code Report — 8장 슬라이드 기반 AI 코딩 회고 (공유 이미지 생성)
• 코딩 성격 분석 — 3축(읽기/실행, 깊이/넓이, 마라톤/스프린트) 기반 8유형

CLI

npx memradar@latest                          # 단일 HTML 파일 생성 후 브라우저 열기 (기본)
npx memradar@latest --server                 # 로컬 서버 모드 (localhost 만)
npx memradar@latest --server --host 0.0.0.0  # 같은 네트워크의 다른 기기에서도 접근

⚠️ --host 0.0.0.0 또는 LAN IP 지정 시 같은 네트워크의 다른 기기가 세션 로그를 볼 수 있습니다. 공용 와이파이 등 신뢰하지 않는 네트워크에서는 사용을 피하세요. 안전한 우회 경로는 SSH 포트 포워딩(ssh -L 3939:localhost:3939 ...) 또는 Tailscale 같은 VPN 권장.

환경 변수:

| 변수 | 기본값 | 설명 | |---|---|---| | MEMRADAR_PROJECTS_DIR | ~/.claude/projects | Claude 세션 루트 경로 | | MEMRADAR_CODEX_DIR | ~/.codex/sessions | Codex 세션 루트 경로 | | MEMRADAR_PORT | 3939 | 서버 모드 포트 번호 | | MEMRADAR_HOST | 127.0.0.1 | 서버 바인딩 인터페이스 (--host 와 동일) | | MEMRADAR_OUTPUT_HTML | OS 임시 디렉터리 | --static 모드 HTML 저장 경로 | | MEMRADAR_NO_OPEN | 0 | 1로 설정 시 브라우저 자동 열기 비활성화 |

지원 Provider

| Provider | 자동 감지 경로 | 상태 | |---|---|---| | Claude Code | ~/.claude/projects/**/*.jsonl | ✅ | | Codex | ~/.codex/sessions/**/*.jsonl | ✅ | | Gemini CLI / Cursor / Copilot / Aider | — | ⬜ (로드맵 Phase 3) |

개발

npm install
npm run dev

테스트

npm run test:harness

하네스는 다음 순서를 한 번에 실행한다: lint → 프로덕션 빌드 → CLI 결정론적 스모크 → vite preview 대상 Playwright 브라우저 스모크.

개별 실행:

npm run lint
npm run build
npm run test:cli
npm run test:e2e

Tech Stack

React 19 · TypeScript · Vite 8 · Tailwind CSS v4 · Framer Motion · Lucide Icons · date-fns · html-to-image

번들 예산은 ~250KB gzipped. 자세한 아키텍처는 docs/ARCHITECTURE.md 참고.

문서

| 문서 | 내용 | |---|---| | docs/ARCHITECTURE.md | 기술 결정·디렉터리 구조·데이터 흐름 | | docs/ROADMAP.md | Phase 1~3 개발 로드맵 | | docs/DESIGN-GUIDE.md | 디자인 토큰·테마·컴포넌트 패턴 | | docs/UI-UX-PRINCIPLES.md | UI/UX 운영 원칙 | | docs/WRAPPED-SPEC.md | Code Report 슬라이드 상세 기획 | | docs/SEARCH-SPEC.md | 검색 MVP 기획 | | docs/SESSION-REPLAY-SPEC.md | 세션 리플레이 기획 (Phase 2) | | docs/ACHIEVEMENTS.md | 업적·뱃지 시스템 기획 (Phase 2) | | docs/COMPETITIVE-ANALYSIS.md | 경쟁 제품 분석 | | docs/DEPLOYMENT.md | 배포 가이드 | | docs/harness.md | 테스트 하네스 |

기여

이슈·PR 환영. 기여 전에 다음을 확인:

1. npm run test:harness가 통과하는지
2. 새 UI 변경은 docs/DESIGN-GUIDE.md 규칙을 따르는지
3. 새 Provider 추가는 docs/ARCHITECTURE.md Provider 인터페이스를 따르는지

버그 리포트 시 가능하면 Provider·OS·Node 버전을 함께 적어주면 재현이 빠르다.

Privacy

Memradar는 어떤 데이터도 외부로 전송하지 않는다.

• 세션 로그는 로컬 머신에서만 읽히고, localhost 서버 또는 브라우저 안에서만 처리된다.
• 외부 API 호출, 서버 업로드, 텔레메트리, 분석 수집 일체 없음.
• 네트워크 연결이 없어도 동작한다 (--static 모드의 Google Fonts 제외).
• 소스 코드를 직접 확인: cli/index.mjs

License

MIT. LICENSE 참고.