Cl Code Visualizer

Transforms raw Claude Code conversation logs (JSONL format) into readable, styled HTML documents with:

• Terminal aesthetics: Professional monospace styling with VS Code-inspired colors
• Message categorization: User messages (blue), Assistant responses (green), Tool results (orange)
• Collapsible tool results: Click to expand/collapse detailed tool outputs
• Syntax highlighting: Code blocks with proper formatting
• Thinking blocks: Italicized, subtle styling for internal reasoning
• Tool use blocks: Dark-themed blocks for function calls
• Search functionality: Built-in search bar to filter messages
• Responsive layout: Adapts to different screen sizes

File Locations

Claude Code stores chat logs in JSONL format at:

Windows:

• %USERPROFILE%\.claude\chats\
• %USERPROFILE%\.claude\projects\

Linux/Mac:

• ~/.claude/chats/
• ~/.claude/projects/

Each chat file is named with a UUID (e.g., c5f2a3e1-1234-5678-9abc-def012345678.json)

Input Format

The script expects JSONL (JSON Lines) format where each line is a valid JSON object representing a message or event in the conversation. This is the standard format for Claude Code chat logs.

Example JSONL structure:

{"role":"user","content":"Hello","created_at":"2025-11-08T10:00:00Z","uuid":"abc123"}
{"role":"assistant","content":"Hi!","created_at":"2025-11-08T10:00:01Z","uuid":"def456"}

Output Format

The generated HTML includes:

1. Header section: Chat title, timestamp, and metadata
2. Search bar: Real-time message filtering
3. Message stream: Chronologically ordered conversation
4. Statistics footer: Message counts and processing info
5. Author signature: Attribution comment in HTML source

Message Types Handled

• User messages: Questions and commands from the user
• Assistant messages: AI responses with formatting
• Tool uses: Function calls with parameters
• Tool results: Command outputs (collapsible by default)
• Thinking blocks: Internal reasoning process
• Summaries: Conversation context summaries
• Snapshots: Conversation state markers

Usage Patterns

Basic Conversion

python3 scripts/visualizer.py chat.json output.html

With Full Paths (Windows)

python3 scripts/visualizer.py %USERPROFILE%\.claude\chats\c5f2a3e1-1234-5678.json %USERPROFILE%\Documents\chat.html

With Full Paths (Linux/Mac)

python3 scripts/visualizer.py ~/.claude/chats/c5f2a3e1-1234-5678.json ~/Documents/chat.html

Batch Processing Multiple Chats (Windows PowerShell)

Get-ChildItem "$env:USERPROFILE\.claude\chats\*.json" | ForEach-Object {
    python3 scripts/visualizer.py $_.FullName "$($_.BaseName).html"
}

Batch Processing Multiple Chats (Linux/Mac)

for chat in ~/.claude/chats/*.json; do
    python3 scripts/visualizer.py "$chat" "$(basename "$chat" .json).html"
done

Visual Styling Details

Color Scheme

• User messages: Blue (#0066CC) with light blue background (#F8FBFF)
• Assistant messages: Green (#10893E) with light green background (#FAFFF8)
• Tool results: Orange (#FF6B00) with gray background (#F8F8F8)
• Thinking blocks: White background with subtle gray border and shadow (#B8C8B8)
• Tool use blocks: Dark gray (#48484A) with light text (#E8E8E8)

Interactive Features

• Collapsible tool results: Click the header to expand/collapse
• Search highlighting: Matching messages shown, others hidden
• Responsive bullets: Size 20px with color-coded by message type
• Smooth scrolling: Auto-scroll to top on page load

Typography

• Font family: Cascadia Code, Consolas, Monaco, monospace
• Bullet size: 20px
• Label size: 17px (user/assistant), 15px (general)
• Content size: 14px with line-height 1.7

Technical Notes

Processing Statistics

After conversion, the script displays:

• Total lines processed
• Count by message type (user, assistant, tool results, etc.)
• HTML elements generated
• Output file location

Error Handling

• Invalid JSON lines: Logged with line number, processing continues
• Missing fields: Uses sensible defaults (e.g., "N/A" for missing IDs)
• Empty content: Displays "(empty)" placeholder

Attribution in Output

All generated HTML files include an invisible comment with:

• Author information (Óscar González Martín)
• Repository link (https://github.com/oskar-gm/cl-code-visualizer)
• License information (MIT License)
• Generation timestamp

This ensures proper attribution while not affecting the visual output.

When to Use This Skill

Trigger this skill when users want to:

• Visualize Claude Code conversations as HTML
• Convert chat.json or JSONL files to HTML format
• Export Claude Code conversation logs for sharing or archiving
• View chat history from VS Code Claude Code in a readable format
• Transform .claude/chats/ or .claude/projects/ files into HTML visualizations

Example user requests:

• "Convert my Claude Code chat to HTML"
• "Visualize this chat.json file"
• "Export my VS Code Claude conversation"
• "Make this JSONL conversation readable"

Script Output

Upon successful conversion, the script prints:

📖 Reading <input-file>...
✅ X lines parsed
🔄 Generating HTML in terminal style...
✅ HTML generated successfully: <output-file>
📊 Statistics:
   - Total lines processed: X
   - User messages: X
   - Assistant messages: X
   - Tool Results: X
   - Summaries: X
   - Snapshots: X
   - HTML elements generated: X

🎉 Conversion completed!
📁 Open file: <output-file>

Requirements

• Python: 3.6 or higher
• Dependencies: None (uses only Python standard library)
• Operating System: Windows, Linux, macOS
• Browser: Any modern browser (Chrome, Firefox, Safari, Edge)

Best Practices

1. Keep original JSON: Always maintain the source .json file
2. Descriptive names: Use meaningful output filenames (e.g., project_x_chat_2025-11-08.html)
3. Regular exports: Convert important conversations for archival
4. Browser viewing: Open HTML files in any modern browser for best experience
5. Sharing conversations: HTML format is ideal for sharing with non-technical stakeholders

Limitations

• Processes one chat file at a time
• Output is static HTML (no server-side processing)
• Requires local file access (cannot process remote URLs directly)
• Large conversations (1000+ messages) may take a few seconds to render

Troubleshooting

Issue: "File not found"

Solution: Check the path to your JSON file. Use full paths with %USERPROFILE% (Windows) or ~ (Linux/Mac).

Issue: "Invalid JSON"

Solution: Ensure the file is in JSONL format (one JSON object per line). Check for corrupted lines.

Issue: "Tool results not collapsing"

Solution: Ensure JavaScript is enabled in your browser. Try opening in a different browser.

Issue: "Search not working"

Solution: The search function requires JavaScript. Make sure it's not blocked by browser extensions.

Support

For questions, issues, or contributions:

• Repository: https://github.com/oskar-gm/cl-code-visualizer
• Issues: https://github.com/oskar-gm/cl-code-visualizer/issues
• Email: [email protected]
• Website: https://nucleoia.es

License

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

Author: Óscar González Martín Version: 1.0 Last Updated: November 2025