Visual dashboard for inspecting and mapping Claude Code project configurations.
See your global settings, commands, skills, hooks, permissions, MCP servers, rules, and agents at a glance — visualize how any project connects to your global Claude config, edit files, run a terminal, and manage git — all in one place.

npm install -g claude-map

Or run without installing:

npx claude-map

Then open http://localhost:8888 in your browser.

Note: node-pty requires a native build. If the terminal doesn't work after install, run:

cd $(npm root -g)/claude-map && npm run postinstall

claude-map                # Start on default port 3131
claude-map -p 8080        # Start on custom port
claude-map --help         # Show help
claude-map --version      # Show version

• Connection Map — interactive 3-layer diagram showing how a project relates to global Claude settings
• Permission Settings Manager — interactive editor for allow/deny/ask lists, Dangerous Mode toggle, and additional directories. Project-local permissions shown first, global defaults below — both editable on one page
• Git Tab — GitHub Desktop-style interface: file changes, staging, diffs, commit, pull/push, branch switching, PR links, and git worktree management
• Rules — view and share path-scoped rules from .claude/rules/ across projects
• Hooks — full view of all configured hooks (command/http/prompt/agent types) from global and project settings, with copy-JSON sharing
• Agents — view and share custom agent definitions from .claude/agents/
• Enhanced Skills — allowed-tools, argument-hint, agent delegation; compare global vs project skills; share between projects
• Team Sharing — share skills, commands, rules, and agents from any project to any other with checkbox selection or per-card button
• Built-in Editor — Monaco-powered file editor with a file tree for any project folder
• Integrated Terminal — xterm.js terminal in a resizable bottom tray, scoped to the Editor tab
• Session History — browse past conversations with tool call timelines, conversation replay, and per-session cost estimates
• Cost Report — estimated API spend per session and over time, broken down by model with daily chart and cache savings
• Command History — every prompt you've typed, grouped by day
• Analytics — model usage breakdown, hourly activity heatmap, tool frequency chart
• Dark / Light theme — toggle with one click, persisted across sessions
• Live updates — file changes in ~/.claude/ auto-refresh the dashboard via SSE
• Directory browser — add projects by browsing your filesystem or pasting a path
• Raw file viewer — browse and read any file in the .claude/ tree with syntax highlighting
• JSON export — download the full scan result for any project

When the app loads, it automatically scans your ~/.claude/ directory. Click the logo or Global Config in the sidebar to return to this view at any time.

Click + in the sidebar to open the directory browser, or paste a path directly into the path input. Each project shows a status icon:

Selecting a project opens the Map tab — a visual connection diagram:

• Solid teal lines = inherited from global config
• Dashed blue lines = project-specific configuration
• Dashed gray lines = absent (node not configured)
• Click any node to expand a detail panel

Available on project views only. Shows the current branch, ahead/behind counts, and all file changes:

• Branch dropdown — switch branches directly; warns if you have uncommitted changes
• Unstaged / Staged sections — checkbox to stage or unstage each file; click a filename to view its diff on the right
• Discard — hover a file row to reveal the ✕ button (with confirmation)
• Commit form — summary input + Commit button (enabled only when files are staged)
• Pull / Push — inline result shown below the header
• Open PR ↗ — opens the GitHub/GitLab compare URL for the current branch
• History — collapsible list of the last 30 commits
• Worktrees — list all worktrees; Open (loads it as a project), Remove, or Add a new one with a branch name and path. Check existing to check out a pre-existing branch instead of creating a new one.

The Skills tab shows YAML frontmatter metadata:

• allowed-tools — which tools the skill can use
• argument-hint — expected arguments when invoking the skill
• agent — if the skill delegates to a separate agent
• Global vs Project comparison — see which skills exist where

Use Share mode (⇥ button) to select multiple skills/commands and copy them to another project. Each card also has a per-card share (⇥) and delete (✕) button.

Shows .claude/rules/**/*.md files — path-scoped instructions that Claude applies only when working in matching file paths. Path patterns from frontmatter are shown as badges. Shareable across projects the same way as skills.

Shows all hooks defined in settings.json (global and project), grouped by source. Displays event type, matcher, command/URL, timeout, and hook type (command / http / prompt / agent) with color coding. Each hook has a ⧉ Copy JSON button to copy the hook definition for pasting into another project's settings.json.

Shows .claude/agents/ custom agent definitions. Same view and share/delete UX as Skills.

Click Permissions (🔐) in the top navigation to open the Permission Settings Manager:

• Dangerous Mode — toggle defaultMode: bypassPermissions on/off. An animated red banner appears when active as a reminder that most confirmation prompts are bypassed.
• Allow / Deny / Ask lists — add rules with a tool-type selector and an argument or glob pattern (e.g. Bash(git *), Read(/tmp/*)). Hover any row to reveal the delete button.
• Additional Directories — grant Claude Code access to extra filesystem paths beyond the project root.
• Scope — when a project is active the page shows Project-local (.claude/settings.local.json) at the top and Global (~/.claude/settings.json) below, each independently editable. Saves preserve all other settings (hooks, model, etc.).

Browse all past Claude Code conversations per project. Three sub-views toggled by a pill:

• Sessions — list with title, git branch, model, message count, duration, and estimated cost badge. Click to view full conversation timeline with tool call badges, a 5-card cost summary, and a per-model cost breakdown table.
• Command History — every prompt grouped by day
• Cost Report — total spend summary cards, daily cost chart, per-model cost bar chart, and top 10 most expensive sessions. Costs are estimates based on public Anthropic pricing computed client-side.

Monaco-powered editor with a collapsible file tree on the left. The terminal tray at the bottom shows all open terminal sessions as chips — click a chip to expand the terminal panel, drag the resize handle to adjust height. Press Ctrl+** / **Cmd+ to toggle the terminal from anywhere. New terminals open in the project directory.

• Share mode (Skills, Commands, Rules, Agents tabs) — enable with the ⇥ button to multi-select items, then pick a target project in the share modal
• Per-card share — hover any card and click ⇥ to share that single item immediately
• Export Bundle — download Skills + Commands + CLAUDE.md as JSON
• Import Bundle — paste or drag-drop a .json bundle
• Single Skill/Rule export — download as .md from the card

• Model usage breakdown — token counts per model
• Hourly activity heatmap — when you're most active
• Tool frequency chart — most-used tools across all sessions
• Daily activity chart and detail table

claude-map/
├── bin/
│   └── cli.js             # CLI entry point (npx claude-map)
├── public/
│   ├── index.html          # HTML shell — sidebar, modals, xterm/Monaco CDN scripts
│   ├── app.js              # Frontend SPA — all state, renderers, event handlers
│   ├── style.css           # Dual-theme CSS
│   └── logo.png
├── server.js               # Express backend — all API routes, git helper, file watchers
├── package.json
└── LICENSE

Pinned projects are stored in ~/.claude/inspector-projects.json.

• Runtime: Node.js 18+
• Server: Express 4, ws (WebSocket for terminal), node-pty (terminal PTY)
• Git: native git binary via child_process.execFile — no extra packages
• File watching: chokidar 3
• Frontmatter parsing: gray-matter 4
• Markdown rendering: marked 9 (CDN)
• Syntax highlighting: highlight.js 11 (CDN)
• Code editor: Monaco Editor 0.52 (CDN)
• Terminal: xterm.js 5.5 + addon-fit + addon-web-links (CDN)
• Frontend: Vanilla JavaScript, CSS custom properties, no build step

This project uses a GitHub Actions workflow that automatically publishes to npm when a commit message starts with release:.

npm version patch   # or minor / major
git add -A
git commit -m "release: v1.2.2"
git push

Setup required: Add NPM_TOKEN as a repository secret in GitHub Settings > Secrets.

MIT