Better Claude Code - Visual Studio Marketplace

Better Claude Code - VS Code Extension

Overview • Features • Installation • Usage • Development

:trumpet: Overview

VS Code extension to browse and compact Claude Code sessions directly in your editor with real-time updates.

:star: Features

Session Browser - Tree view with grouping and filtering
Real-time Updates - File system watching detects new sessions instantly
Session Compaction - One-click AI summarization via Claude Code CLI
Rich Viewing - Full conversation display with images and metadata
Custom Labels - Tag sessions for organization
Status Bar - Quick session stats at a glance
Filtering - Filter by date, tokens, labels, and content type
Grouping - Group by date, token percentage, or custom labels

:rocket: Installation

From VS Code Marketplace:

Open VS Code
Go to Extensions (Ctrl/Cmd + Shift + X)
Search for "Better Claude Code"
Click Install

From Command Line:

code --install-extension lucasvtiradentes.better-claude-code-vscode

:bulb: Usage

Getting Started

Open a folder/workspace in VS Code
Click the BCC icon in the activity bar
Browse sessions for the current project
Right-click on a session for actions

Session Browser

Browse all Claude Code sessions from the activity bar:

Tree View: Hierarchical display grouped by your preference
Auto-Discovery: Automatically detects sessions from ~/.claude/sessions/
Auto Expansion: Opens "Today" and "Last Hour" groups by default

Each session displays:

Token usage percentage (color-coded)
Message count (user + assistant)
Image count, file references
Custom commands, URLs
Compaction status (✓ badge)
Custom labels

Session Grouping

Organize sessions using multiple grouping modes:

By Date: Last Hour, Today, Yesterday, This Week, This Month, Older
By Token Usage: 0-25%, 25-50%, 50-75%, 75-90%, 90-100%
By Custom Labels: User-defined project labels

Change grouping via "Filter Sessions" command.

Session Actions

Right-click context menu provides:

View Conversation: Open full session in webview panel
Compact Session: Generate AI summary
Add Label: Tag with custom labels
Open Session File: View raw JSONL in editor
Copy Session Path: Copy file path to clipboard
Delete Session: Remove session with confirmation

Conversation Viewer

Full-screen webview panel with:

Message Filtering: Toggle user messages, assistant messages, tool calls
Image Preview: Click to open images in modal
Metadata Display: Session stats, badges, properties
Actions Menu: Quick access to operations

Session Compaction

One-click AI summarization:

Right-click session → "Compact Session"
BCC parses JSONL to markdown
Claude Code CLI generates summary
Output saved to .bcc-compaction/{sessionId}/
Summary opens automatically

Output files:

parsed.md - Full conversation markdown
summary.md - AI-generated summary
metadata.json - Compaction metadata

Commands

Access via Command Palette (Ctrl/Cmd + Shift + P):

BCC: Refresh Sessions - Reload all sessions (F5)
BCC: Filter Sessions - Change grouping mode
BCC: Compact Session - Summarize session
BCC: Add Label - Toggle session labels
BCC: Show Logs - Open extension logs
BCC: Toggle Collapse/Expand - Toggle all groups
BCC: View Compaction - Open summary file

:wrench: Development

Build and install locally:

cd apps/vscode-extension
pnpm install                     # Install dependencies
pnpm run dev                     # Watch mode with hot reload
pnpm run build                   # Build for production
pnpm run typecheck               # Type checking
pnpm run vscode:package          # Package as .vsix

Local Installation:

pnpm run build

This installs a development version with "-dev" suffix, keeping your marketplace version intact.

Extension locations:

Official: ~/.vscode/extensions/lucasvtiradentes.better-claude-code-vscode-0.1.6
Development: ~/.vscode/extensions/lucasvtiradentes.better-claude-code-vscode-dev

Requirements:

VS Code 1.100.0+
Claude Code CLI installed
Node.js 18+

:scroll: License

MIT License - see LICENSE file for details.