Skip to content
/ cl-code-visualizer Public

Claude.ai Skill - Convert Claude Code & VS Code chat logs (JSONL) to beautiful HTML. Terminal aesthetics, collapsible tool results, search functionality. Python 3.6+, zero dependencies.

nucleoia.es

License

View license
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

oskar-gm/cl-code-visualizer

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
scripts
scripts
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SKILL.md
SKILL.md
 
 

Repository files navigation

Claude Code Visualizer

License: MIT Python 3.6+ Version Download

📥 Quick Download

Latest version: ⬇️ Download latest - Always up-to-date

Version 1.0: ⬇️ Download v1.0.zip - Stable release

Or browse all Releases

English | Español

🇬🇧 English

Description

Professional skill for converting Claude Code chat JSON files (VS Code terminal) into formatted HTML visualizations with consistent and aesthetic styling.

✨ Features

  • 🎨 Terminal-style aesthetics inspired by VS Code
  • 🔵 User messages with light blue background
  • 🟢 Assistant responses with light green background
  • 🟠 Collapsible tool results (click to expand)
  • 🔍 Real-time search integration
  • 📱 Responsive design
  • ⚫ Tool use with dark background
  • 💭 Thinking blocks with subtle styling

🚀 Quick Start

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

Example:

python3 scripts/visualizer.py %USERPROFILE%\.claude\chats\chat_12345.json conversation.html

📦 Installation

  1. Clone this repository:

    git clone https://github.com/oskar-gm/cl-code-visualizer.git
cd cl-code-visualizer

  2. No external dependencies required (Python 3.6+ only)

  3. Run the script:

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

💡 Using as a Claude Skill

This tool can be used as a Claude Skill in Claude.ai for automated conversation visualization.

Learn more:

How to use:

  1. Download the .zip file from Releases
  2. In Claude.ai, go to Settings > Capabilities > Skills and upload the .zip
  3. In any conversation, ask Claude: "Convert my Claude Code chat to HTML" or "Visualize my conversation log"
  4. Send your JSONL chat file (see Claude Code File Locations below)

📁 File Structure

cl-code-visualizer/
├── scripts/
│   └── visualizer.py     # Conversion script
├── LICENSE               # MIT License
├── README.md            # This file
├── CONTRIBUTING.md      # Contribution guidelines
├── CODE_OF_CONDUCT.md   # Code of conduct
└── SKILL.md             # Skill documentation for Claude

🎓 How It Works

The script reads JSONL (JSON Lines) files generated by Claude Code and transforms them into styled HTML with:

  1. Intelligent parsing of different message types
  2. Visual categorization by type (user, assistant, tool use, tool result)
  3. Interactive format with collapsible tool results
  4. Functional search to filter messages

📍 Claude Code File Locations

Claude Code stores chat logs in JSONL format at:

  • Windows: %USERPROFILE%\.claude\chats\ or %USERPROFILE%\.claude\projects\
  • Linux/Mac: ~/.claude/chats/ or ~/.claude/projects/

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

🎨 Visual Styling

  • 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
  • Tool use blocks: Dark gray (#48484A) with light text (#E8E8E8)

📊 Example Output

📖 Reading chat.json...
✅ 73 lines parsed
🔄 Generating HTML in terminal style...
✅ HTML generated successfully: output.html
📊 Statistics:
   - Total lines processed: 73
   - User messages: 5
   - Assistant messages: 38
   - Tool Results: 14

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

📄 License

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

Attribution Requirements:

👤 Author

Óscar González Martín

🌟 Support

If you find this project useful, please:

  • ⭐ Star the repository
  • 🐛 Report bugs via Issues
  • 💡 Suggest improvements
  • 🔄 Share with others

📞 Contact

For questions, suggestions, or bug reports:

🇪🇸 Español

📥 Descarga Rápida

Última versión: ⬇️ Descargar última - Siempre actualizada

Versión 1.0: ⬇️ Descargar v1.0.zip - Release estable

O navega por todos los Releases

Descripción

Skill profesional para convertir archivos JSON de chats de Claude Code (terminal de VS Code) en visualizaciones HTML con formato consistente y estético.

✨ Características

  • 🎨 Estética estilo terminal inspirada en VS Code
  • 🔵 Mensajes de usuario con fondo azul claro
  • 🟢 Respuestas del asistente con fondo verde claro
  • 🟠 Resultados de herramientas colapsables (click para expandir)
  • 🔍 Búsqueda en tiempo real integrada
  • 📱 Diseño responsive
  • ⚫ Tool use con fondo oscuro
  • 💭 Bloques de pensamiento con estilo sutil

🚀 Inicio Rápido

python3 scripts/visualizer.py entrada.json salida.html

Ejemplo:

python3 scripts/visualizer.py %USERPROFILE%\.claude\chats\chat_12345.json conversacion.html

📦 Instalación

  1. Clona este repositorio:

    git clone https://github.com/oskar-gm/cl-code-visualizer.git
cd cl-code-visualizer

  2. No requiere dependencias externas (solo Python 3.6+)

  3. Ejecuta el script:

    python3 scripts/visualizer.py tu_chat.json salida.html

💡 Usar como Skill de Claude

Esta herramienta puede usarse como Skill de Claude en Claude.ai para visualización automática de conversaciones.

Aprende más:

Cómo usar:

  1. Descarga el archivo .zip desde Releases
  2. En Claude.ai, ve a Ajustes > Capacidades > Skills y sube el .zip
  3. En cualquier conversación, pídele a Claude: "Convierte mi chat de Claude Code a HTML" o "Visualiza mi registro de conversación"
  4. Envía tu archivo JSONL del chat (ver Ubicación de Archivos de Claude Code más abajo)

📁 Estructura de Archivos

cl-code-visualizer/
├── scripts/
│   └── visualizer.py     # Script de conversión
├── LICENSE               # Licencia MIT
├── README.md            # Este archivo
├── CONTRIBUTING.md      # Guía de contribución
├── CODE_OF_CONDUCT.md   # Código de conducta
└── SKILL.md             # Documentación del skill para Claude

🎓 Cómo Funciona

El script lee archivos JSONL (JSON Lines) generados por Claude Code y los transforma en HTML estilizado con:

  1. Parsing inteligente de diferentes tipos de mensajes
  2. Categorización visual por tipo (usuario, asistente, tool use, tool result)
  3. Formato interactivo con resultados de herramientas colapsables
  4. Búsqueda funcional para filtrar mensajes

📍 Ubicación de Archivos de Claude Code

Claude Code almacena los logs de chat en formato JSONL en:

  • Windows: %USERPROFILE%\.claude\chats\ o %USERPROFILE%\.claude\projects\
  • Linux/Mac: ~/.claude/chats/ o ~/.claude/projects/

Cada archivo de chat tiene un nombre UUID (ej: c5f2a3e1-1234-5678-9abc-def012345678.json)

🎨 Estilo Visual

  • Mensajes de usuario: Azul (#0066CC) con fondo azul claro (#F8FBFF)
  • Mensajes del asistente: Verde (#10893E) con fondo verde claro (#FAFFF8)
  • Resultados de herramientas: Naranja (#FF6B00) con fondo gris (#F8F8F8)
  • Bloques de pensamiento: Fondo blanco con borde gris sutil y sombra
  • Bloques tool use: Gris oscuro (#48484A) con texto claro (#E8E8E8)

📊 Ejemplo de Salida

📖 Leyendo chat.json...
✅ 73 líneas parseadas
🔄 Generando HTML en estilo terminal...
✅ HTML generado exitosamente: salida.html
📊 Estadísticas:
   - Total líneas procesadas: 73
   - Mensajes de usuario: 5
   - Mensajes del asistente: 38
   - Resultados de herramientas: 14

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor lee CONTRIBUTING.md para detalles sobre nuestro código de conducta y el proceso para enviar pull requests.

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

Requisitos de Atribución:

👤 Autor

Óscar González Martín

🌟 Apoyo

Si este proyecto te resulta útil, por favor:

  • ⭐ Dale una estrella al repositorio
  • 🐛 Reporta bugs via Issues
  • 💡 Sugiere mejoras
  • 🔄 Compártelo con otros

📞 Contacto

Para preguntas, sugerencias o reportar bugs:

© 2025 Óscar González Martín. All rights reserved under MIT License.

About

Claude.ai Skill - Convert Claude Code & VS Code chat logs (JSONL) to beautiful HTML. Terminal aesthetics, collapsible tool results, search functionality. Python 3.6+, zero dependencies.

nucleoia.es

Topics

html export converter json visual-studio terminal skills logs vs-code chats claude jsonl claude-code terminal-logs-visualizer

Resources

Readme

License

View license

Code of conduct

Code of conduct

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

Claude Code Visualizer v1.0 Latest
Nov 8, 2025

Packages

No packages published

Languages