@kimuson/claude-code-viewer

Claude Code Viewer

A full-featured web-based Claude Code client that provides complete interactive functionality for managing Claude Code projects. Start new conversations, resume existing sessions, monitor running tasks in real-time, and browse your conversation history - all through a modern web interface.

Overview

Claude Code Viewer has evolved from a simple conversation viewer into a comprehensive web-based Claude Code client. It provides all essential Claude Code functionality through an intuitive web interface, including creating new sessions, resuming conversations, real-time task management, and live synchronization with your local Claude Code projects.

The application leverages Server-Sent Events (SSE) for real-time bidirectional communication, automatically syncing with JSONL conversation files in ~/.claude/projects/ and providing instant updates as conversations progress.

Features

Interactive Claude Code Client

• New Chat Creation - Start new Claude sessions directly from the web interface
• Session Resumption - Continue paused Claude conversations with full context
• Real-time Task Management - Monitor, control, and abort running Claude tasks
• Command Autocompletion - Smart completion for both global and project-specific Claude commands
• Live Status Indicators - Visual feedback for running, paused, and completed tasks

Real-time Synchronization

• Server-Sent Events (SSE) - Instant bidirectional communication and updates
• File System Monitoring - Automatic detection of conversation file changes
• Live Task Updates - Real-time progress tracking for active Claude sessions
• Auto-refresh UI - Instant updates when conversations are modified externally

Advanced Conversation Management

• Project Browser - View all Claude Code projects with metadata and session counts
• Smart Session Filtering - Hide empty sessions, unify duplicates, filter by status
• Multi-tab Interface - Sessions, Tasks, and Settings in an organized sidebar
• Conversation Display - Human-readable format with syntax highlighting and tool usage
• Command Detection - Enhanced display of XML-like command structures
• Task Controller - Full lifecycle management of Claude processes

Installation & Usage

Quick Start (CLI)

Run directly from npm without installation:

PORT=3400 npx @kimuson/claude-code-viewer@latest

Alternatively, install globally:

npm install -g @kimuson/claude-code-viewer
claude-code-viewer

The application uses pnpm as the package manager (v10.8.1) and is published as version 0.1.0.

The server will start on port 3400 (or the specified PORT). Open http://localhost:3400 in your browser.

Alternative Installation

Clone and run locally:

git clone https://github.com/d-kimuson/claude-code-viewer.git
cd claude-code-viewer
pnpm i
pnpm build
pnpm start

Data Source

The application reads Claude Code conversation files from:

• Location: ~/.claude/projects/<project>/<session-id>.jsonl
• Format: JSONL files containing conversation entries
• Auto-detection: Automatically discovers new projects and sessions

Usage Guide

1. Project List

• Browse all Claude Code projects
• View project metadata (name, path, session count, last modified)
• Click any project to view its sessions

2. Session Browser

• View all conversation sessions within a project
• Filter to hide empty sessions
• Sessions show message counts and timestamps
• Click to view detailed conversation

3. Conversation Viewer

• Full conversation history with proper formatting
• Syntax highlighting for code blocks
• Tool usage and results clearly displayed
• Navigation sidebar for jumping between sessions
• Support for different message types (user, assistant, system, tools)

Configuration

Port Configuration

Set a custom port using the PORT environment variable:

PORT=8080 npx @kimuson/claude-code-viewer@latest

Data Directory

The application automatically detects the standard Claude Code directory at ~/.claude/projects/. No additional configuration is required.

License

This project is available under the MIT License.

Contributing

See docs/dev.md for detailed development setup and contribution guidelines.

Changelog

0.3.0

   Features

• Set timeout for new-chat & resume-chat  -  by d-kimsuon <samp>(d0fda)</samp>
• Add @ file completion  -  by d-kimsuon <samp>(60aaa)</samp>
• Inline completion for command and files  -  by d-kimsuon <samp>(e90dc)</samp>
• Fix out of style  -  by d-kimsuon <samp>(7fafb)</samp>
• Add simple git diff preview modal  -  by d-kimsuon <samp>(c5688)</samp>
• Add comprehensive CI workflow for quality checks  -  by d-kimsuon and Claude <samp>(580e5)</samp>
• Add notification when task paused  -  by d-kimsuon <samp>(8b6b0)</samp>
• Add sonner message on task completed  -  by d-kimsuon <samp>(a3e6f)</samp>
• diff-view: Display untacked added file  -  by d-kimsuon <samp>(e7c3c)</samp>

   Bug Fixes

• Bug fix session list doesn't updated after filter config changed  -  by d-kimsuon <samp>(52a23)</samp>
• Fix header text content overflow  -  by d-kimsuon <samp>(a618e)</samp>
• Bug fix that input message gone out though new chat is not sent yet  -  by d-kimsuon <samp>(ca316)</samp>
• Add unsupported container property to schema  -  by d-kimsuon <samp>(c7a1e)</samp>