🤖 Claude Code Log Viewer

A beautiful, feature-rich web interface for viewing and auditing Claude Code conversation logs. Transform your raw JSONL log files into an intuitive, searchable, and visually appealing conversation browser.

Usage

You can install this locally:

cargo install cc-log-viewer

and then use it

cc-log-viewer

✨ Features

🎨 Rich Visual Interface

• Modern Design: Clean, responsive web interface with intuitive navigation
• Smart Layout: Human messages on right, AI on left for natural conversation flow
• Message Avatars: Clear visual distinction between users and AI
• Timestamps: Detailed timing information for every interaction

🛠️ Advanced Tool Rendering

The log viewer includes specialized handlers for all major Claude Code tools:

• 📝 TodoWrite: Renders todo lists with status indicators, priorities, and progress tracking
• 💻 Bash: Shows commands with $ prefix, descriptions, and formatted output
• 📖 Read: Displays file paths with line ranges and syntax-highlighted content
• ✏️ Edit: Visual diff view with red/green highlighting for changes
• 🔄 MultiEdit: Multiple file edits in organized cards with numbered changes
• 📁 LS: Directory listings with proper formatting
• 🔍 Grep: Search patterns with highlighted results
• 🗂️ Glob: File pattern matching with smart file type icons
• 🎯 Task: Structured task display with descriptions and instructions
• 🌐 WebFetch: Clickable URLs with analysis prompts
• 🧠 Private Journal: Color-coded sections for feelings, insights, and context
• 🔐 Social Media: Login status and post creation with hashtag rendering

🖼️ Multimodal Support

• Image Rendering: Inline image display with click-to-expand functionality
• Mixed Content: Seamless handling of text and images in conversations
• Base64 Decoding: Automatic conversion of encoded images

🗂️ Project Organization

• Project Browser: Overview of all your Claude Code projects
• Session Management: Easy navigation between conversation sessions
• Activity Tracking: Last activity timestamps and session counts
• Smart URLs: Bookmarkable links to specific projects and sessions

🚀 Quick Start

Prerequisites

• Rust (latest stable version)
• Claude Code installed and configured

Installation

1. Clone the repository:

   git clone https://github.com/your-repo/cc-log-viewer.git
   cd cc-log-viewer

2. Build the project:

   cargo build --release

3. Run the viewer:

   cargo run

   Or with custom options:

   # Custom port
   cargo run -- --port 3000
   
   # Custom projects directory
   cargo run -- /path/to/your/claude/projects
   
   # Both options
   cargo run -- --port 3000 /path/to/your/claude/projects

4. Open your browser: Navigate to http://localhost:2006 (or your custom port)

📖 Usage

Basic Navigation

1. Projects View: Start by selecting a project from the main page
2. Sessions View: Browse conversation sessions within a project
3. Conversation View: Dive into detailed conversation logs

Command Line Options

cc-log-viewer [OPTIONS] [PROJECTS_DIR]

Arguments:
  [PROJECTS_DIR]  Path to projects directory containing log files
                  (defaults to ~/.claude/projects/)

Options:
  -p, --port <PORT>  Port to serve on [default: 2006]
  -h, --help         Print help information

Default Paths

The viewer automatically looks for Claude Code logs in:

• ~/.claude/projects/ (default)
• Each project should contain .jsonl files representing conversation sessions

🎯 Tool Handler System

The log viewer features a sophisticated tool handler system that provides specialized rendering for different tool types:

🏗️ Architecture

// Base handler provides common functionality
class ToolHandler {
    renderToolCall(toolCall)     // Renders tool input
    renderToolResult(result)     // Renders tool output
    renderInput(input)           // Custom input formatting
    renderOutput(result)         // Custom output formatting
}

// Specialized handlers extend base functionality
class BashHandler extends ToolHandler {
    // Custom bash command rendering with $ prefix
}

🎨 Visual Design Principles

• Consistent Icons: Each tool type has a unique emoji identifier
• Color Coding: Different tools use distinct color schemes
• Contextual Formatting: Input/output styled appropriately for tool type
• Responsive Design: All handlers work across device sizes

🔧 Supported Tools

Tool	Icon	Description	Special Features
TodoWrite	📝	Task management	Status indicators, priority colors
Bash	💻	Shell commands	Command highlighting, monospace output
Read	📖	File reading	Line numbers, syntax awareness
Edit	✏️	File editing	Diff visualization, change highlighting
MultiEdit	🔄	Multiple edits	Numbered changes, scrollable diffs
Glob	🗂️	File patterns	File type icons, smart grouping
Task	🎯	Agent tasks	Structured prompts, result formatting
WebFetch	🌐	Web requests	Clickable URLs, analysis display
Journal	🧠	Private notes	Color-coded sections, organized layout

🌟 Key Features in Detail

Smart Tool Result Attribution

The viewer properly associates tool results with their corresponding tool calls, fixing the common issue where tool outputs appear as user messages.

JSON Pretty Printing

All JSON content is automatically formatted with proper indentation and syntax highlighting.

Image Support

• Base64 image decoding and display
• Click-to-expand functionality
• Support for multiple image formats
• Inline rendering within conversation flow

Responsive Design

• Mobile-friendly interface
• Adaptive layouts for different screen sizes
• Touch-friendly navigation

🛠️ Development

Project Structure

cc-log-viewer/
├── src/
│   └── main.rs          # Rust backend server
├── static/
│   └── index.html       # Frontend web interface
├── Cargo.toml           # Rust dependencies
└── README.md           # This file

Building from Source

# Development build
cargo build

# Release build (optimized)
cargo build --release

# Run with hot reload during development
cargo run

# Run tests
cargo test

# Generate coverage report
cargo tarpaulin --out html --output-dir coverage

# Check code quality
cargo clippy

Code Quality

The project maintains high code quality standards:

• Clippy Clean: Zero warnings from Rust's linter
• Modern Rust: Uses latest stable Rust features
• Error Handling: Comprehensive error handling throughout
• Documentation: Inline code documentation

Adding New Tool Handlers

1. Create a new handler class:

   class MyToolHandler extends ToolHandler {
       constructor() {
           super('MyTool');
       }
   
       renderInput(input) {
           // Custom input rendering
       }
   
       renderOutput(result, toolCall) {
           // Custom output rendering
       }
   
       getIcon() {
           return '🔥'; // Your tool's emoji
       }
   }

2. Register the handler:

   const toolHandlers = {
       // ... existing handlers
       'MyTool': new MyToolHandler()
   };

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run quality checks:

   cargo clippy    # Check for warnings
   cargo test      # Run tests
   cargo build     # Ensure it builds

5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Open a Pull Request

Development Guidelines

• Follow Rust conventions and idioms
• Maintain clippy-clean code (zero warnings)
• Add tests for new functionality
• Update documentation for user-facing changes
• Use semantic commit messages

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built for the Claude Code community
• Inspired by the need for better log visualization tools
• Uses modern web technologies for optimal user experience

🐛 Issues & Support

Found a bug or have a feature request? Please:

1. Check existing Issues
2. Create a new issue with detailed information
3. Include your system information and steps to reproduce

🚀 Roadmap

Future improvements planned:

• Search and filtering capabilities
• Export functionality (PDF, HTML)
• Advanced analytics and insights
• Plugin system for custom tool handlers
• Dark mode support
• Real-time log monitoring

---

Made with ❤️ for the Claude Code community