A modern, high-performance Next.js web application to view and edit Claude Code CLI conversation history. Features beautiful glass-morphism UI, pagination, search, image support, and comprehensive message management tools. At times, you want to keep the conversation going without hitting the compaction. This tool helps you selectively delete messages from the context to free up more space.
- Expandable Tools: Click to expand/collapse detailed tool_use and tool_result content
- Tool Compaction: Replace verbose tool outputs with success messages (only for successful tools)
- Smart Pairing: Tool pairs are automatically selected/deselected together
- Error Detection: Prevents compacting tools that failed
- Selective Deletion: Choose specific messages to delete with comprehensive validation
- Thinking Block Protection: Messages with thinking blocks cannot be deleted
- Parent Chain Integrity: Maintains message relationships when deleting
- Batch Operations: Select All/Deselect All for efficient management
- Pagination: Load more messages progressively (50 per page)
- Compacted Conversation Support: Handle Claude CLI summary lines and compaction points
- Export Options: Download as JSONL with or without summaries
- Statistics Panel: Shows message counts, compaction info, and conversation health
- Automatic Backups: Timestamped backups before any modification
- Validation: Comprehensive checks prevent data corruption
- Error Handling: Graceful fallbacks and user-friendly error messages
- Glass-morphism Design: Beautiful animated gradients and blur effects
- Responsive Layout: Works perfectly on desktop, tablet, and mobile
- High Performance: Pagination loads only 50 messages at a time for instant loading
- Auto-scroll: Automatically focuses on conversation content when selected
- Real-time Search: Search across message content, tool names, and image descriptions
- Smart Filters: Filter by User, Assistant, Tools, Images, or view All messages
- Text Highlighting: Search terms are highlighted with beautiful gradients
- Cross-page Search: Search works across all loaded message pages
- Base64 Images: Full support for Claude conversation screenshots and images
- Visual Indicators: 🖼️ icon shows messages containing images
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open the application: Visit http://localhost:3000
- Select a Project: Choose from your Claude Code projects (shows conversation count)
- Select a Conversation: Pick a conversation (shows message count and timestamp)
- Auto-scroll: App automatically scrolls to conversation viewer for better screen usage
- Search Messages: Use the search bar to find specific content across all loaded pages
- Filter Messages: Use quick filter buttons (All/User/Assistant/Tools/Images)
- Load More: Click "Load More Messages" at the bottom to progressively load content
- Toggle Images: Use 🖼️ button to show/hide images for performance
- View Message Details: See visual indicators for different message types:
- 🧠 Thinking blocks (cannot be deleted)
- 🔧 Tool use messages
- ⚙️ Tool result messages
- 🖼️ Image messages
- 🔗 Paired tool messages
- 📋 Summary lines from compaction
- ✅ Compacted tools
- Expand Tools: Click ▶ button or message content to view detailed tool information
- Compact Tools: Click 📦 button to replace verbose output with success messages (permanent)
- Select Messages: Check boxes next to messages (smart pairing for tools)
- Batch Operations: Use Select All/Deselect All for efficiency
- Delete: Click "Delete Selected" to remove messages (automatic backups)
- Export: Download conversations as JSONL (with/without summaries option)
IMP: Restart of claude code cli is required for edits to be loaded.
app/
├── api/
│ ├── projects/route.ts # API to list projects
│ ├── conversations/route.ts # API to list conversations
│ ├── messages/route.ts # API to load messages
│ ├── delete-messages/route.ts # API to delete messages
│ ├── compact-tools/route.ts # API to compact tool messages
│ └── export/route.ts # API to export conversations
├── globals.css # Global styles
├── layout.tsx # Root layout
└── page.tsx # Main application (TypeScript)
types.ts # TypeScript interfaces
GET /api/projects- List all available projectsGET /api/conversations?project={project}- List conversations in a projectGET /api/messages?project={project}&conversation={id}&page={page}&limit={limit}&skipImages={bool}- Load paginated messagesPOST /api/delete-messages- Delete selected messages with comprehensive validationPOST /api/compact-tools- Compact tool messages (replace content with success messages)GET /api/export?project={project}&conversation={id}&excludeSummaries={bool}- Export conversation
- Pagination: Loads only 50 messages per page for instant startup
- Lazy Image Loading: Images load only when needed with performance toggle
- Smart Caching: Previous pages remain loaded for seamless browsing
- Efficient Search: Real-time search across loaded content without lag
- Background Processing: Non-blocking operations for smooth UX
- Automatic Backups: Timestamped backups before any modification
- Smart Validation: Prevents operations that would corrupt conversation integrity
- Message Constraints:
- Cannot delete thinking blocks 🧠 (would break Claude's reasoning chain)
- Cannot delete summary lines 📋 (would break compaction structure)
- Tool pairs must be deleted together 🔧↔⚙️ (prevents orphaned references)
- Tool Compaction Safety: Only successful tools can be compacted (error detection)
- Parent Chain Integrity: Maintains message relationships and conversation flow
The application reads from your Claude Code CLI data directory:
~/.claude/projects/
Each project contains JSONL files where each line is a JSON message object.
Created by Gaurav - Follow for more awesome projects:
- LinkedIn: linkedin.com/in/gauravvgat
- X (Twitter): @Bull_lion_aire
- 100% Local: Runs entirely on your machine, no data leaves your computer
- No Telemetry: No analytics, tracking, or data collection
- Open Source: Full source code available for inspection
- Secure: Only accesses your local
~/.claude/projects/directory