Claude Code 대화 히스토리를 웹에서 브라우징하고, 가치 있는 부분을 발췌+메모해서 팀원들에게 단일 HTML / Markdown으로 공유하는 로컬 툴. 여러 세션의 메모를 모아 한 문서로 묶는 cross-session Editor도 포함.
📺 고화질 영상은
assets/메인기능.mp4(2.2MB).
Anthropic과 제휴/후원 관계가 없는 비공식 뷰어입니다. "Claude" 및 "Claude Code"는 Anthropic, PBC의 상표입니다.
~/.claude/projects/의 모든 프로젝트/세션 브라우징- 대화 전체 렌더링 — user / assistant / tool_use / tool_result / thinking / image / sidechain(subagent), Shiki 코드 하이라이팅 + GFM Markdown. 4개 surface(프로젝트 대화 뷰, Preview, Editor, Download HTML)가 공유 렌더러 1개를 사용해 시각적으로 동일
- 원격 서버 히스토리 —
~/.ssh/config의 SSH 호스트를 연결해 원격 서버의 Claude Code 세션도 로컬과 동일하게 조회 (SFTP). 상단 탭으로 Local / 서버별 전환 - 전역 검색 — 텍스트 + 툴 필터 + 날짜 범위. "서버에서도 검색" 체크 시 연결된 서버에서 SSH exec + grep으로 병렬 검색, 탭으로 결과 분리
- 메모 — 메시지 범위를 선택해 제목+Markdown 노트로 저장, 세션별 보드 구성
- 세션 메모 편집 — 사이드 패널의
Preview & Edit로 in-app 편집 화면 진입, 인라인으로 보드 타이틀 / 메모 / 순서 / 삭제 + 메인 탭과 자동 동기화 - Editor (cross-session 작성기) — 여러 세션의 메모를 두레이 "업무 참조" 방식으로 하나의 문서로 모아 편집, 로컬 드래프트 자동 저장
- 공유 — Download HTML(단일 self-contained) / Copy Markdown / Preview
- Resume 명령 복사 —
cd "<cwd>" && claude --resume <sessionId>
- 프로젝트 목록: 카드 그리드 + 검색 / 정렬(Recent·Name) / 페이지네이션(9개/페이지)
- 프로젝트 숨김 — 카드 hover 시
×버튼(localStorageprojectList.hidden.v1), 툴바의Hidden (N)버튼으로 숨김 목록 뷰 진입,↺버튼으로 복구 - 세션 숨김 — 프로젝트 뷰 좌측 세션 사이드바의 각 행 hover 시
×버튼(localStoragesessionSidebar.hidden.v1), 사이드바 헤더의Hidden (N)버튼으로 숨김 뷰 진입- 현재 열려있는 세션은 숨기더라도 사이드바에서 즉시 사라지지 않음 (뷰 깜빡임 방지)
- 숨긴 프로젝트 / 세션의 메모는
/memos탭과/editorpicker에서도 자동 제외 (공유 헬퍼src/state/hiddenProjects.js·hiddenSessions.js) - Claude Code의 lossy 경로 인코딩(
my.app_name→-my-app-name)을 세션cwd필드에서 무손실 복원
- 텍스트 드래그 복사 — 행 내에서는 네이티브 텍스트 선택, 여러 행에 걸친 드래그는 메모용 다중 행 선택으로 자동 승격
- AskUserQuestion 특수 렌더 — 질문은 Claude 메시지에
**AskUserQuestion 도구 호출**prefix와 함께 평문으로, 사용자의 선택 답변은 User 버블에답변 1: …형식으로 표시 (toolUseResult.answers구조화 필드 우선 사용) - 라이브 업데이트 — 서버가 원본 JSONL을 watch하여 새 메시지가 추가되면 SSE로 푸시, 하단 근처에 있을 경우 자동 스크롤
- Subagent task notification — Claude Code가 주입하는
<task-notification>(background task/subagent 완료 알림)을 유저 버블이 아닌 Claude의 접기 영역(thinking 블록)으로 표시. 빈 유저 버블 방지 - IDE 메타 wrapper 제거 —
<ide_selection>/<ide_opened_file>처럼 IDE가 프롬프트에 주입하는 컨텍스트 블록은 유저 버블에서 숨김 (tool_result 덤프가 사용자 텍스트로 오염되는 것 방지) - 슬래시 커맨드 — 유저 버블 안 인라인 코드 블록으로 표시 (
`/commit`형태) - 유저 버블 복사 버튼 — 버블 옆 클립보드 아이콘을 누르면 해당 메시지의 원문(슬래시 커맨드 포함, IDE wrapper 제거된 상태)만 클립보드에 복사. hover 시 등장
- Select All — 세션 헤더의
select all체크박스로 전체 메시지 일괄 선택/해제 - thinking / system event 토글로 가독성 조정
- 드래그로 순서 재배치, 카드 클릭으로 원본 메시지로 점프
- Edit Message 모드 — 메모 카드의
Edit Message버튼으로 기존 메모의 메시지 소속을 재편집(추가/제거), 하단 바의 Save/Cancel로 커밋 - 보드 타이틀 편집 (세션별 커스텀 제목, 기본값 "Claude Memos")
- Memos 탭 — 상단 네비의
Memos에서 세션을 가로지르는 메모 인덱스 조회, 클릭 시 원본 세션의 해당 메시지로 딥링크
- 메모 사이드 패널의
Preview & Edit→ 새 탭에서 in-app 편집 화면(#/sessions/:projectId/:sessionId/edit) 오픈 - 기본은 Preview 모드 (전체적인 문서 모양을 먼저 보고, 필요할 때만 Edit으로 전환)
- 상단 sticky banner: Edit ↔ Preview 토글 + Download HTML / Copy MD 아이콘
- Edit 모드: 보드 타이틀, 메모 제목, 메모 note(클릭-투-에디트) 인라인 편집 — 디바운스되어 자동 저장
- 메모 카드 우상단 toolbar로 ⋮⋮ 드래그 / ↑↓ 한 칸 이동 / ✕ 삭제, 전체-카드 drop zone + 강한 drop indicator
- 대화 원문은 메모의
messageUuids로 필터링되어 현재 세션에서 추출, 읽기 전용 렌더 - 편집 내용이 BroadcastChannel(
memo-updates)로 메인 앱 사이드 패널에 즉시 동기화
- 상단 네비의
Editor또는#/editor - 기본은 Edit 모드 (작성용 워크스페이스)
+ 메모 참조 추가→ 모달 picker에서 모든 세션의 메모를 평면 리스트로 검색(title / note / 대화 원문 가중 매칭) → 다중 선택 후Add (N)으로 한 번에 삽입- 항목 우측
대화 N개 보기 ▾로 인라인 펼쳐 실제 대화 확인 가능 - 이미 추가한 메모는 잠금(disabled)
- 숨긴 프로젝트의 메모는 picker에서 자동 제외
- 항목 우측
- 픽한 메모는 문서 블록으로 들어가며 원본 메모는 변경되지 않음(편집은 로컬 드래프트에만)
- 문서 제목 / 인트로 / 메타 DATE / 메모 블록(편집 가능 title / note + 원본 대화 + 출처) / footer — 다운로드 HTML과 시각적으로 동일
- 동일한 toolbar UX(드래그 / ↑↓ / ✕)
- 자동 동기화: 페이지 새로고침 시
api.listMemos()로 각 블록의messageUuids를 최신값으로 교체 (다른 곳에서 메모 범위가 편집된 경우 반영). 로컬 편집한 title / note는 항상 보존 - localStorage(
editor.draft.v1) 자동 저장, Banner의✕아이콘으로 초기화(Clear) - 상단 네비의
Editor클릭 시 항상 새 draft (이미 /editor에 있어도 unique hash로 remount), F5/북마크/직접 URL은 작업 유지 - Download HTML — 서버 파이프라인(
POST /api/editor/export): shiki 하이라이팅 +formatTools+ pre-rendered 정적 HTML(JS 불필요). 공유 렌더러(renderDocBody)가 프로젝트 대화 뷰와 동일한 클래스명·구조로 출력 → 긴 유저 버블은 인라인 스크립트로 "더 보기" collapsible 자동 적용 - Copy MD — 각 블록의 원본 대화 턴(
### 👤 You/### 🤖 Claude+> body) 포함 (공유renderTurns), 메모 사이드 패널 preview의 markdown export와 동일 포맷. 슬래시 커맨드는 heading이 아닌 본문 첫 줄(> /commit)로 삽입 — 원문 그대로 복구 가능 - Preview 모드 토글
아키텍처: 공유 렌더러로 4 surface 통일
대화 메시지 HTML 렌더링은
src/lib/renderMessageHtml.js하나가 담당. 이 모듈이 생산하는 HTML을:
- React 앱 (프로젝트 대화 뷰, Editor, SessionMemoEditPage) →
dangerouslySetInnerHTML로 사용- Download HTML → 서버가
renderDocBody(payload)호출 → pre-rendered 정적 HTML (JS 불필요)- viewer.js (/preview) → esbuild가 shared import를 번들 →
renderNodes()호출문서 레이아웃(h1, lede, meta, memo sections)은
MemoDoc.jsx+ **EditorMemoBlock.jsx**가 React 앱 두 surface에 공유. Markdown export는memoMarkdown.js(renderMemoSection·renderTurns)를 서버/클라이언트 공유.슬래시 커맨드 표시 방식 같은 UI 변경 →
renderMessageHtml.js1곳만 수정 → 4 surface 모두 반영.
npm install
# dev: Vite(5173) + Fastify(5174) 동시 기동
npm run dev
# 브라우저: http://localhost:5173
# prod: 단일 포트 5174 에서 정적 + API 동시 서빙
npm run build
npm start
# 브라우저: http://localhost:5174
node server/index.js는 nodemon 없이 돌아가므로, 서버 코드(server/) 수정 시Ctrl+C후 다시npm run dev.
- 세션 원본 (read-only):
~/.claude/projects/<encoded-project>/<session-id>.jsonl - 메모/타이틀 (runtime):
./data/memos/<sessionId>.json(gitignored) - 연결된 서버 목록 (runtime):
./data/servers.json(gitignored — SSH 호스트 정보 포함) - 빌드 산출물:
./dist/(viewer.min.js— /preview 전용; Download HTML은 pre-rendered 정적 HTML로 viewer.js 불포함)
모든 라우트는 Fastify(5174) 에서 제공.
| Method | Path |
|---|---|
GET |
/api/projects |
GET |
/api/projects/:id/sessions |
GET |
/api/projects/:id/sessions/:sessionId |
GET |
/api/sessions/:sessionId/watch (SSE) |
| Method | Path | 설명 |
|---|---|---|
GET |
/api/sessions/:sessionId/memos |
보드 전체 조회 (title, memos[]) |
PATCH |
/api/sessions/:sessionId/memos |
보드 타이틀 수정 ({title}) |
POST |
/api/sessions/:sessionId/memos |
메모 생성 |
PATCH |
/api/sessions/:sessionId/memos/order |
일괄 reorder ({orderedIds: [...]}) — single read+write로 atomic |
PATCH |
/api/sessions/:sessionId/memos/:memoId |
메모 수정 (title, note, order, messageUuids) |
DELETE |
/api/sessions/:sessionId/memos/:memoId |
메모 삭제 |
| Method | Path |
|---|---|
GET |
/api/memos |
| Method | Path | 설명 |
|---|---|---|
GET |
/api/sessions/:sessionId/memos/export |
세션 메모 다운로드용 self-contained HTML |
GET |
/api/sessions/:sessionId/memos/preview |
라이브 HTML (edit 가능) — 레거시. 메인 편집은 in-app #/sessions/:pid/:sid/edit 라우트로 통합됨 |
GET |
/api/sessions/:sessionId/memos/markdown |
세션 메모 Markdown |
POST |
/api/editor/export |
/editor의 cross-session doc을 pre-rendered HTML로 다운로드 (body: {docTitle, intro, blocks[]}). 위의 /memos/export와 동일 파이프라인(shiki + formatTools + 공유 렌더러) |
| Method | Path |
|---|---|
GET |
/api/search?q=<text>&tool=<name>&from=<iso>&to=<iso> |
GET |
/api/servers/:id/search?q=<text> |
| Method | Path | 설명 |
|---|---|---|
GET |
/api/ssh-hosts |
~/.ssh/config 호스트 목록 |
GET |
/api/servers |
연결된 서버 목록 |
POST |
/api/servers |
서버 추가 ({sshAlias}) |
DELETE |
/api/servers/:id |
서버 삭제 |
GET |
/api/servers/:id/projects |
원격 프로젝트 목록 |
GET |
/api/servers/:id/projects/:pid/sessions |
원격 세션 목록 |
GET |
/api/servers/:id/projects/:pid/sessions/:sid |
원격 세션 내용 |
- 세션을 연 뒤 메시지 행을 클릭하면 선택, 여러 행 위로 드래그하면 일괄 선택 (행 내 드래그는 텍스트 복사로 동작)
- Shift+클릭으로 범위 선택, 헤더의
select all체크박스로 전체 선택 - 하단 플로팅 바의 Add memo → 제목(선택) + 노트(Markdown) 작성 후 Save
- 제목 입력란에서
Enter→ 즉시 저장, 노트 textarea에서Cmd/Ctrl+Enter→ 저장
- 제목 입력란에서
- 우측 메모 패널에 카드가 추가됨 — 드래그로 순서 변경, 클릭으로 원본 메시지로 점프, Edit (제목/노트) / Edit Message (메시지 소속) / Delete
- 메모 카드의 Edit Message 버튼 클릭 → 해당 메모가 파란 accent로 강조되고 소속 메시지들이
.selected상태로 미리 채워짐 - 다른 행 클릭으로 포함 추가, 이미 속한 행 클릭으로 제거, 드래그/Shift+클릭으로 일괄 토글
- 하단 바의 Save 누르면
messageUuids교체 커밋, Cancel은 원래대로 복구 - 편집 중엔 다른 메모 카드의 Edit/Delete/Edit Message/재정렬이 잠김 (실수 방지)
메모 패널 상단의 타이틀 입력란에 제목을 쓰고(비우면 "Claude Memos"), 하단 버튼으로:
- Download HTML — 단일 self-contained 파일 다운로드 (
claude-memos-<sid>-<date>.html) - Preview & Edit — 새 탭에서 in-app 편집 화면 오픈 (
#/sessions/:pid/:sid/edit) - Copy as Markdown — 클립보드에 복사 (위키/노션/Slack 등에 붙여넣기)
- 상단 네비
Editor클릭 →#/editor - 문서 제목 / 인트로 작성
+ 메모 참조 추가→ picker에서 검색(title / note / 대화 원문) → 다중 선택 후Add (N)- 블록 순서 조정(드래그 또는 ↑↓), title / note 인라인 편집(원본 메모는 변경 없음)
- Download HTML / Copy MD / Preview 토글
- 작업 중 내용은 localStorage에 자동 저장
세션 헤더의 resume 버튼 → 클립보드에 복사되는 명령어:
cd "<원본 cwd>" && claude --resume <sessionId>터미널에 붙여넣으면 해당 세션으로 이어서 작업 시작.
server/ # Fastify 서버
projects.js / sessions.js # 로컬 세션 읽기
sshConfig.js # ~/.ssh/config 파싱
serverStore.js # data/servers.json CRUD
remoteFs.js # SSH2 SFTP 연결 풀
remoteProjects.js # 원격 프로젝트 목록 (SFTP)
remoteSessions.js # 원격 세션 읽기 (SFTP)
remoteSearch.js # 원격 검색 (SSH exec + grep)
memos, search, export, ...
src/lib/ # 서버/클라이언트 공용 ESM
renderMessageHtml.js # ★★ 공유 HTML 렌더러 — 4 surface (앱·preview·editor·download)의 단일 소스
memoMarkdown.js # ★ 메모 markdown 렌더러 (server/exportMarkdown + 클라이언트 Copy MD 공용)
editorExport.js # /editor의 Markdown 빌더 + download blob 헬퍼 (HTML은 서버 위임)
formatTools.js # tool_use 블록 포맷 (공유)
parseMessages.js, ...
src/state/ # 클라이언트 스토어
memoStore.js # 세션 메모 (useSyncExternalStore)
editorDraft.js # /editor localStorage 드래프트
sessionCache.js # /api/projects/:id/sessions/:sid promise 캐시 + 동시성 큐
hiddenProjects.js # projectList.hidden.v1 read/write (공유 헬퍼)
hiddenSessions.js # sessionSidebar.hidden.v1 read/write (공유 헬퍼)
src/components/
MemoDoc.jsx # ★ /editor와 세션 메모 편집이 공유하는 문서 렌더러
EditorMemoBlock.jsx # ★ 메모 블록 (toolbar / drag / 클릭-투-에디트 / 대화 임베드)
ReferencedConversation.jsx # 메모의 messageUuids로 세션 메시지 필터링 + 렌더
MemoReferencePicker.jsx # /editor의 두레이-스타일 메모 참조 picker
MemoPanel.jsx # 세션 사이드 패널 (DraggableMemoList + ExportBar)
...
src/pages/
EditorPage.jsx # /editor — cross-session 작성기
SessionMemoEditPage.jsx # /sessions/:pid/:sid/edit — in-app 메모 편집
SessionViewPage.jsx # /p/:pid/s/:sid — 대화 + 사이드 패널
...
export-template/ # HTML 템플릿 (CSS) + viewer.js (/preview edit-mode 전용, renderMessageHtml.js import)
scripts/ # viewer.js esbuild 번들 스크립트
data/memos/ # 메모 JSON (런타임 생성, gitignored)
/: 상단 검색창 포커스Esc: 모달 / 편집 textarea / 노트 편집 닫기- 메시지 행
Shift+클릭: 범위 선택 - Add/Edit memo 모달 — 제목 입력
Enter: 저장 / textareaCmd(Ctrl)+Enter: 저장 - 메모 참조 picker — 항목 클릭 또는
Enter/Space: 선택 토글,Esc: 닫기
MIT. 자세한 내용은 LICENSE 참고.