Conversation Viewer

A Node.js transformer that converts conversation session logs into beautiful, interactive web UIs.

Why I Built This

I created this application for two key reasons:

1. Easy Conversation Search - To quickly search through Claude Code conversations in an intuitive way, making it simple to find specific exchanges, code changes, or tool usage

2. Teaching & Demonstrations - To show students, customers, and clients what Claude Code was doing during a session and what prompts I was using, making it easy to explain AI-assisted development workflows

Features

• Intelligent Parsing - Extracts user messages, assistant responses, tool usage, code blocks, and file changes
• Interactive UI - Collapsible sections, real-time search, message filtering
• Dark Theme - GitHub-inspired design with gradient accents
• Fully Responsive - Works on desktop, tablet, and mobile
• Accessible - Keyboard navigation, screen reader support, reduced motion support
• Print-Ready - Clean print styles for documentation

Installation

npm install

Exporting from Claude Code

To get your conversation log from Claude Code:

1. During or after your Claude Code session, type /export
2. Claude Code will save the conversation to a .txt file
3. The file will be saved in your current working directory with a timestamped filename

# In Claude Code, simply type:
/export

The exported file contains the full conversation including your prompts, Claude's responses, tool usage, and file operations - everything this transformer needs to generate the interactive HTML view.

Usage

npx ts-node src/transformer.ts <input-file> <output-file>

Arguments

Argument	Description	Required
input-file	Path to the conversation log file (.txt)	Yes
output-file	Path for the generated HTML file (.html)	Yes

Example

npx ts-node src/transformer.ts conversation.txt output.html

Output Features

Statistics Dashboard

• Total messages count
• Number of conversation sections
• Files touched during the session
• Code blocks extracted

Interactive Controls

• Search - Press / to focus, Escape to clear. Matching terms are highlighted in yellow.
• Filter - View only User, Claude, Tool, or Git messages
• Emoji Filter - Click any emoji to filter messages containing it (shows count)
• Expand/Collapse - Navigate large conversations easily
• Copy Code - One-click code block copying

Message Types

• User (blue) - Your prompts and questions
• Claude (green) - Claude's responses
• Tool (orange) - File operations, searches, commands
• Git (red) - Git operations (commit, push, pull, etc.)
• System (purple) - System messages and notifications

Development

Build TypeScript

npm run build

Project Structure

conversation-viewer/
├── src/
│   └── transformer.ts    # Main transformer script
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

Requirements

• Node.js 18+
• npm or yarn

Screenshot

License

MIT

---

v1.0.17