SeeClaudeCode

Real-time visualization of your repository structure while Claude Code edits your codebase.

!SeeClaudeCode Screenshot

Features

- Architecture Graph - Interactive diagram showing your project's directory structure with pan/zoom
- Sunburst View - Radial visualization of your codebase hierarchy
- File Explorer - Traditional tree view with change tracking
- Real-time Git Diff - See exactly what changed in any file or directory
- Live Highlighting:
- Yellow pulse - Files with pending changes (git diff)
- Green pulse - Files currently being edited

Installation

``bash
npm install -g seeclaudecode
npx seeclaudecode
`

Claude Code Plugin

$3

`
/plugin marketplace add ninajlu/seeclaudecode
/plugin install seeclaudecode
`

$3

Once installed, start the visualization anytime with:

`
/seeclaudecode:start
`

This launches SeeClaudeCode in the background so you can watch Claude edit your codebase in real-time.

$3

Want to use /seeclaudecode instead of /seeclaudecode:start? Install the standalone skill:

`bash
npx seeclaudecode --install-skill
`

This installs the skill to ~/.claude/skills/seeclaudecode/ so you can invoke it with just /seeclaudecode.

Usage

`bash


Quick start with npx (no install needed)

npx seeclaudecode

Interactive mode - prompts for directory selection

seeclaudecode

Monitor specific directory

npx seeclaudecode ./my-project

Monitor with absolute path

npx seeclaudecode /path/to/repo

Use custom port

npx seeclaudecode . --port 4000

Don't auto-open browser

npx seeclaudecode . --no-open
`

When started without a directory argument, you'll see an interactive menu:
`
Select a directory to monitor:

1) Current directory
/Users/you/projects
2) my-app
/Users/you/projects/my-app

Or enter a custom path

📁 Directory:
`

Switching Directories

While running, you can switch to a different directory at any time:
- Type a new path and press Enter to switch
- Type quit or exit to stop

Options

| Option | Description |
|--------|-------------|
| -p, --port | Port to run server on (default: 3847) |
| -n, --no-open | Don't automatically open browser |
| --install-skill | Install standalone skill for /seeclaudecode command |
| -h, --help | Show help message |
| -v, --version | Show version number |

How It Works

1. Start SeeClaudeCode (it will prompt for a directory or use the one you specify)
2. Open the displayed URL in your browser
3. Run Claude Code in the same directory
4. Watch as files pulse and highlight when Claude makes changes
5. Click on any file or directory to see the git diff
6. Switch directories anytime by typing a new path

Views

$3

An interactive node-based diagram showing your project structure. Changed files appear below their parent directories with pulsing yellow highlights.

$3

A radial visualization where each ring represents a directory level. Click on segments to see diffs for that directory.

$3

A traditional tree view showing all files with color-coded change indicators.

Visual Indicators

| Indicator | Meaning |
|-----------|---------|
| Yellow pulsing | Pending changes (in git diff) |
| Green pulsing | Currently being edited |
| Purple nodes | Directories |
| Green nodes | Code files (.js, .ts, .py, etc.) |
| Pink nodes | Style files (.css, .scss) |
| Orange nodes | Config files (.json, .yaml) |
| Blue nodes | Documentation (.md, .txt) |

Requirements

- Node.js 18.0.0 or higher
- Git (for diff functionality)

Development

`bash


Clone and install

git clone
cd seeclaudecode
npm install

Run locally

npm start /path/to/repo

Link for global testing

npm link
seeclaudecode /path/to/repo
`

Architecture

`
seeclaudecode/
├── .claude-plugin/
│ └── plugin.json # Claude Code plugin manifest
├── skills/
│ └── start/
│ └── SKILL.md # /seeclaudecode:start skill
├── bin/
│ └── cli.js # CLI entry point
├── public/
│ ├── index.html # Main HTML structure
│ ├── styles.css # Styling and animations
│ └── app.js # Frontend visualization logic
├── server.js # Express server with WebSocket & file watching
└── package.json
``

License

MIT