Claude Code Dashboard

Claude Code 환경을 브라우저에서 시각적으로 관리하는 웹 대시보드

A web dashboard for visually managing your Claude Code environment in the browser

20 Pages · 77 API Endpoints · Korean / English UI

한국어

왜 만들었나

Claude Code는 ~/.claude/ 디렉토리에 수십 개의 설정 파일, 훅, 스킬, 에이전트, 플러그인을 갖고 있습니다.

문제는 이 설정들이 여러 JSON·마크다운·스크립트 파일에 흩어져 있어서, 어떤 설정이 어디에 있는지 찾는 것부터가 일이라는 점입니다. 새 장비를 셋업하거나 환경을 옮길 때마다 파일을 하나하나 복사하고, 빠뜨린 게 없는지 확인하고, 개발 머신과 서버 환경이 동일하게 설정돼 있는지 비교하는 작업은 반복적이고 실수가 나기 쉬웠습니다.

직접 겪은 불편함을 해결하기 위해 만들었습니다. 브라우저 하나로 전체 환경을 파악하고, 스냅샷으로 백업하고, 환경 간 설정을 비교·동기화할 수 있습니다.

Disclaimer: 이 프로젝트는 비공식 커뮤니티 프로젝트입니다. Claude 및 Claude Code는 Anthropic의 상표입니다. 이 프로젝트는 Anthropic과 제휴, 보증, 공식 연결되어 있지 않습니다. 이 도구는 ~/.claude/ 디렉토리의 파일을 읽고 쓰며, 이는 Claude Code의 내부 구현에 의존합니다. Claude Code 업데이트 시 호환성이 깨질 수 있습니다.

주요 기능

Overview

기능	설명
Dashboard	훅/세션/스킬/에이전트/플러그인/MCP/프로젝트 현황을 한눈에. API 사용량(5시간/주간/Sonnet) 실시간 표시, 환경 요약, 최근 세션, Quick Access 그리드
Usage Stats	일별 세션 바 차트(30일), 자주 사용한 도구 Top 15, 에이전트 Top 10, 프로젝트 활동량 순위

Configuration

기능	설명
Hooks Flow Diagram	이벤트→훅 연결을 React Flow 다이어그램으로 시각화. 노드 클릭 시 Monaco 에디터로 바로 편집. 인라인 커맨드/파일 훅 모두 지원
CLAUDE.md Editor	전역/프로젝트별 CLAUDE.md 파일 브라우저 + 마크다운 에디터. diff 미리보기 후 저장, 템플릿으로 새 파일 생성
Skills Manager	스킬 CRUD — 카드 그리드 조회, 폼 생성(템플릿 포함), 편집, 삭제
Agents Manager	에이전트 프롬프트 조회/생성/편집/삭제. 3열 그리드, 설명 자동 추출, 템플릿 제공
Permissions	Allow/Deny 규칙 관리. npm/git/python/docker 등 프리셋 퀵 추가 버튼
Settings	Model, Effort Level, Permission Mode, Agent, Auto-update 등 전체 설정 UI. 한국어/영어 UI 언어 선택

Extensions

기능	설명
Plugins	설치됨/사용가능/서드파티 3탭. 마켓플레이스 설치/제거, blocklist 토글, 커스텀 마켓플레이스 URL 추가
MCP Servers	실행 중인 MCP 서버 상태 표시(Connected/Needs Auth/Error). 플러그인별 MCP JSON 설정 편집, Setup Guide

Monitoring

기능	설명
Active Sessions	실행 중인 Claude Code 프로세스 실시간 모니터링 (10초 자동 갱신). PID, 작업 디렉토리, 세션 종류 표시. 클릭 시 메타데이터/메시지 통계/트랜스크립트 상세
History	세션 이력 + 대화 내역 열람. 세션 탭/대화 탭 전환, 역할별 색상 구분(user/assistant/tool), 메시지 전문 보기
File History	Claude가 수정한 파일의 세션별/버전별 이력 추적 + diff 비교
Projects	프로젝트 단위로 세션/대화/서브에이전트 묶어 보기. 세션 수, 최근 활동일 표시

Management

기능	설명
Context Snapshots	설정 스냅샷 생성/조회/비교/복원. CLAUDE.md, settings.json, 스킬, 훅, 에이전트, 플러그인 전체를 하나의 스냅샷으로. 두 스냅샷 간 diff 비교
Backups & Versions	모든 설정 파일의 자동 버전 관리. 원본 파일 경로 표시로 동일 파일명 구분. 버전 조회/복원/삭제. CLAUDE.md 자동 백업 + diff 비교
Export / Import	전역/프로젝트별 설정 내보내기/가져오기. Merge(미리보기+충돌 해결)/Overwrite 모드. Claude↔Codex 양방향 변환. 신규 파일 Save/Skip 선택

Tools

기능	설명
Console	대시보드에서 `claude -p` 실행 → 결과 표시 (Ctrl+Enter). 작업 디렉토리 지정 가능, 실행 이력 표시
Global Search	모든 CLAUDE.md, 스킬, 에이전트, 훅, 설정 파일 키워드 검색. 파일 종류별 뱃지, 라인 번호, 매칭 텍스트 미리보기
Changelog	Claude Code 릴리즈 노트 마크다운 렌더링 열람

빠른 시작

사전 요구사항

Node.js 18+
Claude Code CLI (Console 기능용)

설치

git clone https://github.com/kyuminMoon/cc-dashboard.git
cd cc-dashboard

실행

Windows

start.bat

Mac / Linux

chmod +x start.sh stop.sh
./start.sh

첫 실행 시 의존성 설치 + 프론트엔드 빌드가 자동으로 진행됩니다.

브라우저에서 http://127.0.0.1:3939 접속.

중지

Windows

stop.bat

Mac / Linux

./stop.sh

보안

항목	설명
127.0.0.1 전용	외부 접근 차단, 로컬 전용 바인딩
Command Injection 방지	`execFile` 사용 (셸 해석 없음)
Path Traversal 방지	디렉토리 allowlist + `safeJoin` 검증
파라미터 검증	정규식 기반 이름/ID 검증
안전한 저장	diff 미리보기 후 저장, 모든 수정 전 `.bak` + 타임스탬프 버전 자동 백업

데이터 소스

이 대시보드는 ~/.claude/ 디렉토리의 파일들을 읽고 씁니다:

경로	용도
`settings.json`	전역 설정 (hooks, model, env, effortLevel)
`settings.local.json`	로컬 권한 설정
`CLAUDE.md`	전역 지시 파일
`hooks/*.mjs`	훅 스크립트
`skills/*/SKILL.md`	스킬 정의
`agents/*.md`	에이전트 프롬프트
`plugins/`	플러그인 + MCP 설정
`sessions/*.json`	세션 메타데이터
`projects/`	프로젝트별 대화 데이터
`file-history/`	파일 변경 이력
`cache/changelog.md`	릴리즈 노트

크로스 플랫폼

	Windows	Mac	Linux
실행	`start.bat`	`./start.sh`	`./start.sh`
중지	`stop.bat`	`./stop.sh`	`./stop.sh`
세션 감지	PowerShell	`ps aux`	`ps aux`
경로	`os.homedir()` 기반 자동 감지	동일	동일

Mac에서 첫 실행 시 chmod -R +x node_modules/.bin/ 이 필요할 수 있습니다.

English

Why I Built This

Claude Code stores dozens of configuration files, hooks, skills, agents, and plugins in the ~/.claude/ directory.

The problem is that these settings are scattered across multiple JSON, Markdown, and script files — just finding where a particular setting lives is already work. Every time I set up a new machine or migrated an environment, I had to copy files one by one, double-check nothing was missed, and compare whether my dev machine and server environments were actually configured the same way. It was repetitive and error-prone.

I built this to solve my own pain. One browser tab to see your entire environment, snapshot it for backup, and compare or sync settings across machines.

Disclaimer: This is an unofficial community project. Claude and Claude Code are trademarks of Anthropic. This project is not affiliated with, endorsed by, or officially connected to Anthropic. This tool reads and writes files in the ~/.claude/ directory, which depends on Claude Code's internal implementation. Compatibility may break with Claude Code updates.

Key Features

Overview

Feature	Description
Dashboard	At-a-glance view of hooks, sessions, skills, agents, plugins, MCP servers, and projects. Real-time API usage display (5-hour / weekly / Sonnet), environment summary, recent sessions, Quick Access grid
Usage Stats	Daily session bar chart (30 days), top 15 tools, top 10 agents, project activity ranking

Configuration

Feature	Description
Hooks Flow Diagram	Visualize event→hook connections as a React Flow diagram. Click any node to edit in Monaco editor. Supports both inline command and file-backed hooks
CLAUDE.md Editor	Global/project CLAUDE.md file browser + markdown editor. Diff preview before save, create new files from template
Skills Manager	Full CRUD for skills — card grid view, form creation with templates, edit, delete
Agents Manager	Agent prompt management — view/create/edit/delete. 3-column grid, auto-extracted descriptions, templates provided
Permissions	Allow/Deny rule management. Quick-add presets for npm, git, python, docker, etc.
Settings	Full settings UI — Model, Effort Level, Permission Mode, Agent, Auto-update. Korean/English UI language selector

Extensions

Feature	Description
Plugins	Three tabs: Installed / Available / Third-party. Marketplace install/uninstall, blocklist toggle, custom marketplace URL support
MCP Servers	Active MCP server status (Connected / Needs Auth / Error). Per-plugin MCP JSON config editor, Setup Guide

Monitoring

Feature	Description
Active Sessions	Real-time monitoring of running Claude Code processes (auto-refresh every 10s). PID, working directory, session kind. Click for metadata, message stats, and transcript details
History	Session history + conversation viewer. Session/Conversation tabs, role-colored messages (user/assistant/tool), full message expansion
File History	Track file modifications by Claude per session/version + diff comparison
Projects	Group sessions, conversations, and sub-agents by project. Session count and last active date

Management

Feature	Description
Context Snapshots	Create/view/compare/restore configuration snapshots. Captures CLAUDE.md, settings.json, skills, hooks, agents, plugins in one snapshot. Side-by-side diff between two snapshots
Backups & Versions	Automatic version tracking for all config files. Original file path displayed to distinguish same-named files. View/restore/delete versions. CLAUDE.md auto-backups with diff comparison
Export / Import	Global and project-level config export/import. Merge (preview + conflict resolution) / Overwrite modes. Bidirectional Claude↔Codex conversion. Save/Skip selection for new files

Tools

Feature	Description
Console	Run `claude -p` from the dashboard — view results (Ctrl+Enter). Optional working directory, execution history
Global Search	Search across all CLAUDE.md files, skills, agents, hooks, and settings. Type badges, line numbers, matched text preview
Changelog	Rendered markdown view of Claude Code release notes

Quick Start

Prerequisites

Node.js 18+
Claude Code CLI (for Console feature)

Installation

git clone https://github.com/kyuminMoon/cc-dashboard.git
cd cc-dashboard

Run

Windows

start.bat

Mac / Linux

chmod +x start.sh stop.sh
./start.sh

On first run, dependencies are installed and the frontend is built automatically.

Open http://127.0.0.1:3939 in your browser.

Stop

Windows

stop.bat

Mac / Linux

./stop.sh

Security

Item	Description
127.0.0.1 only	No external access, local-only binding
Command Injection prevention	Uses `execFile` (no shell interpretation)
Path Traversal prevention	Directory allowlist + `safeJoin` validation
Parameter validation	Regex-based name/ID validation
Safe saves	Diff preview before write, automatic `.bak` + timestamped version backup before every modification

Data Sources

This dashboard reads from and writes to files in the ~/.claude/ directory:

Path	Usage
`settings.json`	Global settings (hooks, model, env, effortLevel)
`settings.local.json`	Local permission settings
`CLAUDE.md`	Global instruction file
`hooks/*.mjs`	Hook scripts
`skills/*/SKILL.md`	Skill definitions
`agents/*.md`	Agent prompts
`plugins/`	Plugins + MCP configs
`sessions/*.json`	Session metadata
`projects/`	Per-project conversation data
`file-history/`	File change history
`cache/changelog.md`	Release notes

Cross-Platform

	Windows	Mac	Linux
Start	`start.bat`	`./start.sh`	`./start.sh`
Stop	`stop.bat`	`./stop.sh`	`./stop.sh`
Session detection	PowerShell	`ps aux`	`ps aux`
Paths	Auto-detected via `os.homedir()`	Same	Same

On Mac, you may need chmod -R +x node_modules/.bin/ on first run.

Tech Stack

Layer	Stack
Backend	Node.js, Express 5, TypeScript 6
Frontend	React 19, Vite 8, TypeScript 6, Tailwind CSS 4
Visualization	@xyflow/react (React Flow)
Code Editor	@monaco-editor/react
Markdown	react-markdown
Icons	lucide-react

Project Structure

cc-dashboard/
├── start.bat / start.sh        # Start scripts
├── stop.bat / stop.sh          # Stop scripts
├── server/
│   ├── src/index.ts            # Express API (77 endpoints)
│   └── data/
│       ├── snapshots/          # Context snapshots
│       └── versions/           # File version history + .meta.json
└── client/
    └── src/
        ├── App.tsx             # Routing (20 pages)
        ├── lib/
        │   ├── api.ts          # API client (typed)
        │   └── i18n.tsx        # Korean/English translations
        ├── components/
        │   ├── Layout/         # Sidebar + layout
        │   ├── ui/             # Card, Button, Badge
        │   ├── ClaudeMdEditor/ # File browser, editor, diff
        │   ├── SkillsManager/  # Skills list, form, delete
        │   └── ContextManager/ # Snapshot management
        └── pages/              # 20 page components

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/my-feature)
Commit your changes (git commit -m 'Add my feature')
Push to the branch (git push origin feature/my-feature)
Open a Pull Request

Name		Name	Last commit message	Last commit date
Latest commit History 59 Commits
client		client
server		server
.gitignore		.gitignore
.omx_ack.json		.omx_ack.json
LICENSE		LICENSE
PROMPT.md		PROMPT.md
README.md		README.md
package.json		package.json
start.bat		start.bat
start.sh		start.sh
stop.bat		stop.bat
stop.sh		stop.sh

Folders and files

Latest commit

History

Repository files navigation

Claude Code Dashboard

한국어

왜 만들었나

주요 기능

Overview

Configuration

Extensions

Monitoring

Management

Tools

빠른 시작

사전 요구사항

설치

실행

중지

보안

데이터 소스

크로스 플랫폼

English

Why I Built This

Key Features

Overview

Configuration

Extensions

Monitoring

Management

Tools

Quick Start

Prerequisites

Installation

Run

Stop

Security

Data Sources

Cross-Platform

Tech Stack

Project Structure

Contributing

Related

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages