A VS Code / Cursor extension for managing Claude Code sessions with an integrated multi-panel layout.
- Session Browser — Browse all Claude Code sessions grouped by project in the Activity Bar sidebar
- One-Click Resume — Click any session to resume it with
claude --resumein an editor-area terminal - Quick Session Creation — Native folder picker to start a new Claude session in any directory
- New Session in Project — Right-click a project to start a new session in the same folder
- Session Deletion — Delete individual sessions or entire project groups via right-click context menu
- Active Session Protection — Running sessions are highlighted with a pulse icon and protected from accidental deletion
- Project File Tree — Automatically shows the project's file structure for the active session, with live auto-refresh as Claude creates/modifies files
- Change Detection — Files modified or created by Claude are marked with colored badges: M (modified, orange) and N (new, green)
- Inline Diff View — Click any changed file to see a side-by-side diff of what Claude changed (before vs after)
- Works without Git — Change detection uses file snapshots taken at session start, so it works for any project regardless of version control
- Color-Coded Status — Sessions are visually coded by recency: green (today), yellow (this week), gray (older)
- Rich Tooltips — Hover any session for details: git branch, message count, token usage, timestamps, CLI version
- Editor State Persistence — Open files are saved per session and restored when switching back
- Auto-Refresh — Session list updates automatically via file watchers and configurable polling interval
┌──────────────┬──────────────────┬──────────────────┐
│ Sessions │ Claude Code │ Editor / Diff │
│ (sidebar) │ Terminal │ │
│ │ │ │
│ > project1 │ > claude │ file.ts │
│ M session1 │ running... │ (before | after)│
│ N session2 │ │ │
│ > project2 │ │ │
│ session3 │ │ │
├──────────────┤ │ │
│ Session Files│ │ │
│ M file1.ts │ │ │
│ N file2.ts │ │ │
│ file3.ts │ │ │
└──────────────┴──────────────────┴──────────────────┘
The Session Files tree view can be dragged to the secondary sidebar (right side) for a 4-panel layout.
# Build the extension
npm install
npm run package
# Package as VSIX
npx @vscode/vsce package --allow-missing-repository
# Install in VS Code
code --install-extension claude-code-sessions-0.1.0.vsix
# Or install in Cursor
cursor --install-extension claude-code-sessions-0.1.0.vsixnpm install
npm run watch # Compile in watch mode
# Press F5 in VS Code to launch Extension Development Host- VS Code 1.68+ or Cursor
- Claude Code CLI installed and authenticated
| Setting | Default | Description |
|---|---|---|
claudeSessions.claudePath |
"claude" |
Path to the claude CLI binary |
claudeSessions.showAllProjects |
true |
Show sessions from all projects or only current workspace |
claudeSessions.autoRefreshInterval |
30 |
Auto-refresh interval in seconds (0 to disable) |
claudeSessions.maxSessionsPerProject |
50 |
Maximum sessions to show per project group |
| Command | Keybinding | Description |
|---|---|---|
| New Claude Session | Cmd+Shift+C |
Open folder picker and start a new Claude session |
| Refresh Sessions | — | Re-scan all sessions from ~/.claude/projects/ |
| Resume Session | Click session | Resume a session in an editor-area terminal |
| New Session in Project | Right-click project | Start a new session in the same project folder |
| Copy Session ID | Right-click session | Copy session UUID to clipboard |
| Delete Session | Right-click session | Delete a session's data (blocked for active sessions) |
| Delete All Sessions in Project | Right-click project | Delete all sessions in a project group |
| Setup 4-Panel Layout | Command Palette | Open the Claude Sessions sidebar and file tree |
Claude Code stores session data at ~/.claude/projects/{encoded-path}/{session-id}.jsonl. This extension:
- Discovers sessions by scanning the projects directory and parsing JSONL metadata (slug, timestamps, git branch, token usage)
- Detects active sessions by reading PID files from
~/.claude/sessions/and checking process liveness - Watches for changes using VS Code FileSystemWatchers on both the projects and sessions directories
- Manages terminals by spawning
claude --resume <id>directly as the shell process - Snapshots files at session start to detect changes made by Claude, regardless of git
- Shows diffs by comparing current files against their snapshots when opened from the file tree
- Decorates files with M/N badges using VS Code's FileDecorationProvider to highlight changes in the tree
- Persists editor state in VS Code's globalState, keyed by session ID
src/
├── extension.ts # Entry point, command registration
├── constants.ts # Paths, command IDs, config keys
├── types.ts # TypeScript interfaces
├── providers/
│ ├── SessionsTreeProvider.ts # Sessions sidebar tree view
│ ├── FileTreeProvider.ts # Project file tree with gitignore support
│ └── ChangeDecorationProvider.ts # M/N badges on changed files
├── managers/
│ ├── TerminalManager.ts # Terminal lifecycle management
│ ├── LayoutManager.ts # Diff view and layout orchestration
│ └── EditorStateManager.ts # Per-session editor tab persistence
└── services/
├── SessionDiscovery.ts # Session scanning and grouping
├── SessionParser.ts # JSONL file parsing
├── SessionWatcher.ts # File system change detection
└── SnapshotService.ts # File snapshots for change detection
MIT