Claude Code & Codex History Viewer

A Next.js web application for browsing, searching, and managing your Claude Code and Codex conversation history. This tool provides a clean, intuitive interface to explore all your past conversations stored in ~/.claude/ and ~/.codex/ directories.

Features

Dual History Support

🔵 Claude Code History: Browse conversations from ~/.claude/ (supports WSL paths) 🟣 Codex History: Browse sessions from ~/.codex/ (supports WSL paths) 🔄 Easy Navigation: Switch between Claude Code and Codex with top navigation bar 🔗 Multi-Source: Automatically combines conversations from both local and WSL installations

Core Features

✨ History Browser: View all your conversation entries with fuzzy search 🔍 Advanced Search: Real-time fuzzy search with match highlighting across conversation titles and content 🗂️ Project Filter: Filter Claude Code conversations by project directory 💬 Session Viewer: Full conversation/session history with pagination for large conversations 📝 Markdown Rendering: Beautiful markdown rendering with GitHub Flavored Markdown support 📋 Copy Functionality: Copy any message content to clipboard with one click 🛠️ Tool Visualization: Special display for bash commands, tool uses, and code blocks 📊 Statistics: View message counts and conversation insights 🌙 Dark Mode: Automatic dark mode support ⚡ Performance: Optimized pagination for large conversations (50 messages per page)

Getting Started

Prerequisites

• Node.js 18+ and pnpm
• Claude Code CLI with existing conversation history in ~/.claude/ (optional, supports WSL paths)
• Codex CLI with existing session history in ~/.codex/ (optional, supports WSL paths)
• At least one of the above CLIs with conversation history

Installation

# Install dependencies
pnpm install

# Run the development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

Open http://localhost:24678 in your browser.

Architecture

Technology Stack

• Framework: Next.js 15.5.4 with App Router
• UI: React 19, Tailwind CSS 4.x
• Build Tool: Turbopack
• Markdown: react-markdown with remark-gfm
• Icons: lucide-react

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── codex/
│   │   │   ├── history/      # Get all codex history entries
│   │   │   └── session/      # Fetch specific codex sessions
│   │   ├── conversation/     # Fetch specific Claude conversations
│   │   ├── history/          # Get all Claude history entries
│   │   └── projects/         # List all Claude projects
│   ├── codex/
│   │   └── page.tsx          # Codex history browser page
│   ├── page.tsx              # Claude Code history browser page
│   ├── layout.tsx            # Root layout with navigation
│   └── globals.css           # Global styles and markdown prose
├── components/
│   ├── navigation.tsx           # Top navigation bar
│   ├── conversation-viewer.tsx  # Modal for viewing Claude conversations
│   ├── codex-session-viewer.tsx # Modal for viewing Codex sessions
│   ├── message-card.tsx         # Claude message display
│   ├── codex-message-card.tsx   # Codex message display
│   ├── markdown-content.tsx     # Markdown renderer
│   └── copy-button.tsx          # Copy to clipboard button
└── lib/
    ├── history-reader.ts  # Claude file system utilities
    ├── codex-reader.ts    # Codex file system utilities
    ├── types.ts           # TypeScript type definitions
    └── utils.ts           # Utility functions

How It Works

Claude Code History

1. Multi-Source: Reads from both local and WSL ~/.claude/ directories
2. History Index: Reads ~/.claude/history.jsonl for conversation metadata from all sources
3. Deduplication: Automatically deduplicates conversations by timestamp + project
4. Project Files: Loads conversation details from ~/.claude/projects/{project}/ (tries all sources)
5. Message Parsing: Intelligently parses and displays:
   • User messages
   • Assistant responses with thinking blocks
   • Tool uses (Read, Write, Edit, Bash, etc.)
   • Bash commands with output and errors
   • System messages

Codex History

1. History Index: Reads ~/.codex/history.jsonl for session metadata
2. Session Files: Loads session details from ~/.codex/sessions/YYYY/MM/DD/*.jsonl
3. Message Filtering: Filters out non-displayable messages:
   • Includes: User/Assistant messages (type: "message")
   • Excludes: Function calls, reasoning blocks, tool outputs, event messages
4. WSL Support: Automatically detects and reads from WSL home directories (enumerates //wsl.localhost/{Distro}/home/{username}/...)

Cross-Platform Support

The app automatically detects your home directory on any platform:

Claude Code

• Windows: C:\Users\{username}\.claude
• macOS: /Users/{username}/.claude
• Linux: /home/{username}/.claude
• WSL on Windows: //wsl.localhost/{Distro}/home/{username}/.claude (auto-detected)

Codex

• Windows: C:\Users\{username}\.codex
• macOS: /Users/{username}/.codex
• Linux: /home/{username}/.codex
• WSL on Windows: //wsl.localhost/{Distro}/home/{username}/.codex (auto-detected)

Security Notes (Read Before Deploying)

This app reads your local conversation history from ~/.claude/ and ~/.codex/. Treat it like a personal dashboard.

• Do not deploy publicly unless you understand the implications.
• In production, API routes are allowed on localhost only; for non-localhost hosts they require HISTORY_VIEWER_AUTH_TOKEN (via Authorization: Bearer ... or ?token=...).
• You can override history locations with CLAUDE_DIR / CLAUDE_DIRS and CODEX_DIR / CODEX_DIRS (use your OS path delimiter: ; on Windows, : on macOS/Linux).

Development

# Development server (with hot reload)
pnpm dev

# Linting
pnpm lint

# Type checking
pnpm build

License

MIT