Convert Claude Code chat logs (JSONL) to professional, browsable HTML visualizations. Export AI conversations, build interactive dashboards, and organize your coding assistant history — with or without Claude Code.
Claude Code does everything for you. This skill is designed to work directly with Claude Code CLI (Anthropic's command-line tool for developers, not the web interface). Once installed, Claude Code will:
Detect your Claude Code chat files automatically
Ask your preferences through interactive setup
Create the configuration file for you
Generate HTML visualizations for all your chats
Build an interactive dashboard to browse them
Organize chats by activity (active, short, archived) — if you want
No manual configuration needed. Just install the skill and ask Claude Code to visualize your chats.
Installation in Claude Code
Option A: Per-project (affects only one project)
Copy the skill folder into your project's .claude/skills/ directory:
hljs language-bash
# From your project rootmkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/oskar-gm/code-chat-viewer.git
Option B: Global (affects all your Claude Code projects)
Copy the skill folder into your user-level .claude/skills/ directory:
hljs language-bash
# Global installationmkdir -p ~/.claude/skills
cd ~/.claude/skills
git clone https://github.com/oskar-gm/code-chat-viewer.git
Then ask Claude Code: "Visualize my Claude Code chats" or "Set up the chat visualizer".
How It Works
First time: Claude Code reads SKILL.md, detects your chat files, asks your preferences, creates config.json
Next times: Claude Code reads config.json and runs the manager — no questions asked
To update settings: Ask Claude Code "Update visualizer config"
Configuration
The skill uses two files:
File
Purpose
config.example.json
Template with defaults (always present, shareable)
config.json
Your personalized settings (gitignored, created by Claude Code)
Configurable options:
Setting
Default
Description
Source path
~/.claude/projects
Where your JSONL chat files are
Output folder
~/Code Chat Viewer
Where HTML files and dashboard are saved
Dashboard filename
CCV-Dashboard.html
Name of the interactive index
Time format
12h
Message/timestamp clock: 12h (AM/PM) or 24h
Agent chats
Included (>3KB)
Include sub-agent conversations
Agent min size
3 KB
Minimum agent file size to include
Shorts
Enabled
Separate small inactive chats into subfolder
Shorts max size
40 KB
Maximum HTML size to classify as short
Archive
Enabled
Separate old inactive chats into subfolder
Inactive days
5
Days without activity before organizing
Environment variables (take precedence over config.json):
Variable
Overrides
Description
CODE_CHAT_VIEWER_DIR
Output folder
Alternative output directory for the dashboard and HTML files
Features
Terminal-style aesthetics inspired by VS Code
User messages with light blue background
Assistant responses with light green background
Collapsible thinking and tool blocks (collapsed by default, full content on expand)
Real-time conversation filter
Responsive fullscreen layout with compact spacing
Multi-mode message navigation: All, User, or Assistant messages with color-coded highlights
Keyboard shortcuts: N (next) / P (previous) for fast navigation
Smart scroll: centers short messages, pins long messages to top
Dashboard state persistence (sort, filters, search, columns) via localStorage
Security-safe HTML rendering (escaped tool parameters)
Interactive dashboard with sortable table, full-text search, exclude filter, and category filters
Full chat names visible on hover; complete names and UUIDs searchable even when truncated
UUID copy button in dashboard for quick session ID access
Recap and First prompt collapsible sub-rows in the dashboard (optional, searchable, sort-aware)
Select mode to delete chats from the dashboard: generates a ready-to-copy trash/permanent command for your OS
Output folder override via the CODE_CHAT_VIEWER_DIR environment variable
Batch generation with incremental updates (only regenerates changed chats)
Accurate timestamps and message counts read directly from JSONL files
Automatic filtering of snapshot-only entries (Claude Code's undo system)
Dashboard link in every chat for easy navigation back
Embedded favicon and header icon (self-contained, no external files needed)
Auto-opens dashboard in browser after generation
Smart message rendering: commands, compact blocks, task notifications, user responses with Q&A and markdown previews, user rejections with feedback, inline user comments
Edit / MultiEdit diff view: old_string vs new_string side-by-side inside the tool-use box (dark/light theme toggle)
Write tool view: full-width collapsible block with blue accent, visually consistent with Edit's new_string side. Shared collapsible structure: the Edits/Writes toggle expands/collapses both at once
/btw queries injected inline in each chat (from ~/.claude/history.jsonl): user-style messages with Claude cream styling and a subtle English disclaimer next to [USER] noting that Claude doesn't persist the answer. Counter in the stats bar
Full date in message timestamps (YYYY-MM-DD), with configurable 12h (AM/PM, default) or 24h time
Dashboard: BTW column (optional, off by default, sortable) and UUID column now permanent (was optional)
BTW Queries view ([3] in interactive menu or --btw flag): aggregates every /btw query you've issued from ~/.claude/history.jsonl into a standalone btw.html next to the dashboard. Queries grouped by chat (collapsed by default), single Expand all / Collapse all toggle, real-time filter that auto-expands matching sessions
One-click expand/collapse for all Edit and Write blocks in the chat
Color-coded navigation highlights per message type (blue/green/purple/amber/red)
CLI flags: --name, --current, --force for targeted operations
Chat title displayed in HTML header (resolved from session metadata)
Chat UUID displayed on the right side of the header, with selectable text and a one-click SVG copy button
Interactive mode selection (normal/force) for manual execution
Full interactive setup with all options configurable
Scan progress indicator with summary
Header buttons: Feedback (opens GitHub Issues) and Latest release (check for updates)
App version shown in the header
Windows-friendly: scripts pause on double-click (no instant close)
What's New in v2.4
Dashboard:
Recap + First prompt as collapsible sub-rows under each chat (off by default, toggles in Columns): the chat's last obtainable summary and the full first user message; searchable, glued to their row when sorting, persisted in localStorage — inspired by @marccane (#2)
Select & delete: a Select mode with per-row checkboxes and a select-all-visible master; the Delete modal lists the affected chats and generates a ready-to-copy command (PowerShell / macOS / Linux tabs) that removes each chat's HTML and original .jsonl — to trash by default, permanent via toggle — inspired by @marccane (#2)
Universal column sorting: every column is sortable except the link icon (Size by real byte size, UUID alphabetical)
General:
CODE_CHAT_VIEWER_DIR environment variable: alternative output folder, takes precedence over config.json — co-authored with @marccane (#2)
What's New in v2.3
Chat viewer:
Edit / MultiEdit diff view: old_string and new_string rendered side-by-side inside the tool-use box, with red/green color coding. Dark theme by default, Light theme toggle in the search bar
Write tool view: full-width collapsible block with blue accent, visually consistent with Edit's new_string side. The shared Edits/Writes toggle expands/collapses both at once
One-click expand/collapse for all Edit and Write blocks
Chat UUID in header: full session UUID on the right side of the terminal header, with selectable text and a one-click SVG copy button (visual confirmation on copy)
/btw queries injected inline in each chat (from ~/.claude/history.jsonl): user-style messages with Claude cream styling and a subtle disclaimer noting Claude doesn't persist the answer. Counter in the stats bar
User rejections ([REJECTED] with feedback, coral/red) and inline user comments ([USER COMMENT], amber)
Color-coded navigation highlight for rejections (red), alongside user/assistant/compact/response
Full date in message timestamps (YYYY-MM-DD), with configurable 12h (AM/PM, default) or 24h time
More compact chat view: reduced padding, margins and font sizes throughout, with a refactored tool-result wrapper (same look, less vertical space)
Header buttons reworked (chat and dashboard): Feedback now opens GitHub Issues, and a new Latest release button links to the newest release to check for updates
App version shown in the header (chat and dashboard)
Dashboard:
Full-text search across complete chat names and UUIDs (not just the visible truncated text); full names visible on hover
UUID copy button for quick session ID access, and UUID promoted to a permanent column
BTW column (optional, off by default, sortable): per-chat /btw count
BTW Queries view ([3] in the interactive menu or --btw flag): aggregates every /btw query from ~/.claude/history.jsonl into a standalone btw.html, grouped by chat, with an Expand/Collapse all toggle and a real-time filter
Table layout rework: fixed column widths, flexible Name column with a sane minimum, horizontal scroll only when the visible columns don't fit, and overflow-proof cells (no more phantom blank space)
Fixes:
Snapshot entries ([Snapshot saved: ...]) now honor the search filter — previously they stayed visible regardless of the query
Special user blocks (responses, rejections, comments) correctly filter as user messages in navigation
What's New in v2.2
Chat viewer:
Smart rendering: commands ([COMMAND]), compact blocks (collapsible, purple), task notifications (color by status), user responses (amber Q&A with markdown previews)
Color-coded navigation highlights per message type: blue (user), green (assistant), purple (compact), amber (user response)
Dashboard exclude filter: hide rows by text (complementary to search)
Batch generation with dashboard (requires config.json):
hljs language-bash
# 1. Create your config from the templatecp config.example.json config.json
# 2. Edit config.json — set projects_path to your Claude Code projects folder# 3. Run the manager
python scripts/manager.py
CLI flags:
hljs language-bash
python scripts/manager.py --name "search terms"# Open a specific chat by name
python scripts/manager.py --current # Open the current session (auto-detect from CWD)
python scripts/manager.py --force # Regenerate ALL chats
python scripts/manager.py --force --name "my chat"# Combine flags
On Windows, you can also double-click the .py files directly. The console prompts for mode selection (normal or force) and stays open until you press Enter.
File Structure
hljs language-graphql
code-chat-viewer/
├── scripts/
│ ├── visualizer.py # Core: JSONL to HTML converter
│ └── manager.py # Orchestrator: batch generation + dashboard
├── icon.png # Project icon (embedded as base64 in output)
├── config.example.json # Configuration template
├── config.json # Your settings (gitignored, created by setup)
├── SKILL.md # Claude Code skill instructions
├── README.md # This file
├── CONTRIBUTING.md # Contribution guidelines
├── CODE_OF_CONDUCT.md # Code of conduct
└── LICENSE # MIT License
Output Structure
hljs language-perl
~/Code Chat Viewer/# Output root (configurable)
├── CCV-Dashboard.html # Interactive dashboard
└── Chats/ # Generated HTML files
├── Chat 2026-01-30 ...html # Active chats
├── Shorts/ # Small inactive chats (if enabled)
└── Archived/ # Old inactive chats (if enabled)
Claude Code File Locations
Claude Code stores chat logs in JSONL format at:
Windows:%USERPROFILE%\.claude\projects\ or %USERPROFILE%\.claude\chats\
Linux/Mac:~/.claude/projects/ or ~/.claude/chats/
Each chat file is named with a UUID (e.g., c5f2a3e1-1234-5678-9abc-def012345678.jsonl)
Visual Styling
User messages: Blue (#0066CC) with light blue background (#F8FBFF)
Assistant messages: Green (#10893E) with light green background (#FAFFF8)
Commands: Blue (#0066CC) with [COMMAND] label and deeper blue background (#EBF2FF)
User responses: Amber (#D97706) with Q&A layout, markdown previews, and [USER RESPONSE] label
User rejections: Coral/red (#DC2626) with [REJECTED] label and user feedback when provided (#FFF1F2 background)
User comments: Amber (#D97706) with [USER COMMENT] label for inline comments on accepted actions
Claude Code lo hace todo por ti. Esta skill está diseñada para funcionar directamente con Claude Code CLI (la herramienta de línea de comandos de Anthropic para desarrolladores, no la interfaz web). Una vez instalada, Claude Code:
Detecta tus archivos de chat de Claude Code automáticamente
Pregunta tus preferencias mediante un setup interactivo
Crea el archivo de configuración por ti
Genera visualizaciones HTML de todos tus chats
Construye un panel interactivo para navegarlos
Organiza los chats por actividad (activos, cortos, archivados) — si quieres
Sin configuración manual. Solo instala la skill y pide a Claude Code que visualice tus chats.
Instalación en Claude Code
Opción A: Por proyecto (afecta solo a un proyecto)
Copia la carpeta de la skill en el directorio .claude/skills/ de tu proyecto:
hljs language-bash
# Desde la raíz de tu proyectomkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/oskar-gm/code-chat-viewer.git
Opción B: Global (afecta a todos tus proyectos de Claude Code)
Copia la carpeta de la skill en tu directorio .claude/skills/ a nivel de usuario:
hljs language-bash
# Instalación globalmkdir -p ~/.claude/skills
cd ~/.claude/skills
git clone https://github.com/oskar-gm/code-chat-viewer.git
Luego pide a Claude Code: "Visualiza mis chats de Claude Code" o "Configura el visualizador de chats".
Cómo funciona
Primera vez: Claude Code lee SKILL.md, detecta tus archivos de chat, pregunta tus preferencias, crea config.json
Siguientes veces: Claude Code lee config.json y ejecuta el manager — sin preguntas
Para cambiar ajustes: Pide a Claude Code "Actualiza la configuración del visualizador"
Configuración
La skill usa dos archivos:
Archivo
Propósito
config.example.json
Plantilla con valores por defecto (siempre presente, compartible)
config.json
Tu configuración personalizada (en gitignore, creada por Claude Code)
Opciones configurables:
Ajuste
Por defecto
Descripción
Ruta origen
~/.claude/projects
Dónde están tus archivos JSONL
Carpeta de salida
~/Code Chat Viewer
Dónde se guardan los HTML y el panel
Nombre del panel
CCV-Dashboard.html
Nombre del archivo índice interactivo
Formato de hora
12h
Reloj de los timestamps: 12h (AM/PM) o 24h
Chats de agentes
Incluidos (>3KB)
Incluir conversaciones de sub-agentes
Tamaño mín. agente
3 KB
Tamaño mínimo de agente para incluir
Shorts
Activado
Separar chats pequeños inactivos en subcarpeta
Tamaño máx. short
40 KB
Tamaño máximo de HTML para clasificar como short
Archivo
Activado
Separar chats inactivos antiguos en subcarpeta
Días de inactividad
5
Días sin actividad antes de organizar
Variables de entorno (tienen precedencia sobre config.json):
Variable
Sobrescribe
Descripción
CODE_CHAT_VIEWER_DIR
Carpeta de salida
Directorio de salida alternativo para el panel y los HTML
Características
Estética estilo terminal inspirada en VS Code
Mensajes de usuario con fondo azul claro
Respuestas del asistente con fondo verde claro
Bloques de thinking y tool colapsables (plegados por defecto, contenido completo al expandir)
Filtro de conversación en tiempo real
Layout fullscreen responsive con espaciado compacto
Navegación multi-modo: mensajes de Todos, Usuario o Asistente con resaltado por color
Atajos de teclado: N (siguiente) / P (anterior) para navegación rápida
Scroll inteligente: centra mensajes cortos, fija al inicio los largos
Persistencia de estado del dashboard (orden, filtros, búsqueda, columnas) vía localStorage
Renderizado HTML seguro (parámetros de herramientas escapados)
Panel interactivo con tabla ordenable, búsqueda de texto completo, filtro de exclusión y filtros por categoría
Nombres de chats completos visibles en hover; nombres y UUIDs completos buscables aunque estén truncados
Botón de copiar UUID en el dashboard para acceso rápido al ID de sesión
Sub-filas desplegables Recap y First prompt en el dashboard (opcionales, con búsqueda y orden integrados)
Modo selección para borrar chats desde el dashboard: genera un comando listo para copiar (papelera/permanente) según tu sistema
Carpeta de salida configurable con la variable de entorno CODE_CHAT_VIEWER_DIR
Generación por lotes con actualizaciones incrementales (solo regenera chats modificados)
Timestamps y conteos de mensajes precisos leídos directamente de archivos JSONL
Filtrado automático de entradas snapshot-only (sistema de undo de Claude Code)
Organización configurable de chats (activos, cortos, archivados)
Enlace al panel en cada chat para volver fácilmente
Favicon e icono de cabecera embebidos (autocontenido, sin archivos externos)
Apertura automática del panel en el navegador tras la generación
Renderizado inteligente de mensajes: comandos, bloques compact, notificaciones de tareas, respuestas de usuario con Q&A y previews de markdown, rechazos de usuario con feedback, comentarios inline del usuario
Vista diff para Edit / MultiEdit: old_string vs new_string en dos columnas dentro del recuadro tool-use (toggle de tema claro/oscuro)
Vista del tool Write: bloque colapsable full-width con acento azul, visualmente coherente con el new_string de Edit. Estructura compartida: el toggle Edits/Writes expande/colapsa ambos a la vez
Consultas /btw inyectadas inline en cada chat (desde ~/.claude/history.jsonl): pseudo-mensajes de usuario con estética crema Claude y disclaimer sutil en inglés junto a [USER] indicando que Claude no persiste la respuesta. Contador en la barra de estadísticas
Fecha completa en los timestamps de mensajes (YYYY-MM-DD), con hora configurable 12h (AM/PM, por defecto) o 24h
Dashboard: columna BTW (opcional, desmarcada por defecto, ordenable) y columna UUID ahora permanente (antes opcional)
Vista BTW Queries ([3] en el menú interactivo o flag --btw): agrega todas las consultas /btw que has hecho desde ~/.claude/history.jsonl en un btw.html standalone junto al dashboard. Consultas agrupadas por chat (colapsadas por defecto), botón único Expand all / Collapse all, filtro en tiempo real que auto-expande sesiones con matches
Expandir/contraer todos los bloques Edit y Write con un clic
Resaltado de navegación por color según tipo de mensaje (azul/verde/morado/ámbar/rojo)
Flags CLI: --name, --current, --force para operaciones dirigidas
Título del chat en el header del HTML (resuelto desde metadatos de sesión)
UUID del chat en el lado derecho del header, con texto seleccionable y botón SVG de copia con un clic
Selección de modo interactiva (normal/force) en ejecución manual
Setup interactivo completo con todas las opciones configurables
Indicador de progreso del escaneo con resumen
Botones del header: Feedback (abre los Issues de GitHub) y Latest release (comprobar actualizaciones)
Versión de la app visible en el header
Compatible con Windows: los scripts se pausan al hacer doble clic (sin cierre instantáneo)
Novedades en v2.4
Dashboard:
Recap + First prompt como sub-filas desplegables bajo cada chat (desactivadas por defecto, toggles en Columns): el último resumen obtenible del chat y el primer mensaje íntegro; con búsqueda, pegadas a su fila al ordenar y persistidas en localStorage — inspirado en @marccane (#2)
Selección y borrado: modo Select con checkboxes por fila y maestro marcar/desmarcar visibles; el modal Delete lista los chats afectados y genera un comando listo para copiar (pestañas PowerShell / macOS / Linux) que elimina el HTML y el .jsonl original de cada chat — a papelera por defecto, permanente con el toggle — inspirado en @marccane (#2)
Ordenación universal de columnas: todas ordenables salvo el icono de enlace (Size por tamaño real en bytes, UUID alfabética)
General:
Variable de entorno CODE_CHAT_VIEWER_DIR: carpeta de salida alternativa, con precedencia sobre config.json — coautoría con @marccane (#2)
Novedades en v2.3
Visor de chats:
Vista diff para Edit / MultiEdit: old_string y new_string en dos columnas dentro del recuadro tool-use, con codificación de color rojo/verde. Tema oscuro por defecto y toggle de tema claro en la barra de búsqueda
Vista del tool Write: bloque colapsable full-width con acento azul, coherente con el new_string de Edit. El toggle compartido Edits/Writes expande/colapsa ambos a la vez
Expandir/contraer todos los bloques Edit y Write con un clic
UUID del chat en el header: UUID completo de la sesión a la derecha del header del terminal, con texto seleccionable y botón SVG de copia con un clic (confirmación visual al copiar)
Consultas /btw inyectadas inline en cada chat (desde ~/.claude/history.jsonl): pseudo-mensajes de usuario con estética crema Claude y un disclaimer sutil indicando que Claude no persiste la respuesta. Contador en la barra de estadísticas
Rechazos de usuario ([REJECTED] con feedback, coral/rojo) y comentarios inline ([USER COMMENT], ámbar)
Resaltado de navegación por color para rechazos (rojo), junto a usuario/asistente/compact/respuesta
Fecha completa en los timestamps de mensajes (YYYY-MM-DD), con hora configurable 12h (AM/PM, por defecto) o 24h
Vista de chat más compacta: paddings, márgenes y tamaños de fuente reducidos en todo el visor, con el wrapper de tool-result refactorizado (mismo aspecto, menos espacio vertical)
Botones del header rehechos (chat y dashboard): Feedback ahora abre los Issues de GitHub, y un nuevo botón Latest release lleva a la última versión para comprobar actualizaciones
Versión de la app visible en el header (chat y dashboard)
Dashboard:
Búsqueda de texto completo en nombres y UUIDs completos (no solo el texto truncado visible); nombres completos visibles en hover
Botón de copiar UUID para acceso rápido al ID de sesión, y columna UUID ahora permanente
Columna BTW (opcional, desmarcada por defecto, ordenable): conteo de /btw por chat
Vista BTW Queries ([3] en el menú interactivo o flag --btw): agrega todas las consultas /btw desde ~/.claude/history.jsonl en un btw.html standalone, agrupadas por chat, con botón Expand/Collapse all y filtro en tiempo real
Layout de la tabla rehecho: anchos de columna fijos, columna Name flexible con mínimo razonable, scroll horizontal solo cuando las columnas visibles no caben y celdas a prueba de desbordes (adiós al espacio en blanco fantasma)
Correcciones:
Las entradas snapshot ([Snapshot saved: ...]) ahora respetan el filtro de búsqueda — antes permanecían visibles independientemente de lo buscado
Bloques especiales de usuario (respuestas, rechazos, comentarios) se filtran correctamente como mensajes de usuario en navegación
Novedades en v2.2
Visor de chats:
Renderizado inteligente: comandos ([COMMAND]), bloques compact (colapsables, morado), notificaciones de tareas (color por estado), respuestas de usuario (ámbar con Q&A y previews de markdown)
Resaltado de navegación por color según tipo: azul (usuario), verde (asistente), morado (compact), ámbar (respuesta)
Filtro de exclusión en dashboard: ocultar filas por texto (complementario a la búsqueda)
Generación por lotes con panel (requiere config.json):
hljs language-bash
# 1. Crear tu configuración desde la plantillacp config.example.json config.json
# 2. Editar config.json — configurar projects_path con la carpeta de proyectos de Claude Code# 3. Ejecutar el manager
python scripts/manager.py
Flags CLI:
hljs language-bash
python scripts/manager.py --name "términos"# Abrir un chat específico por nombre
python scripts/manager.py --current # Abrir la sesión actual (auto-detecta desde CWD)
python scripts/manager.py --force # Regenerar TODOS los chats
python scripts/manager.py --force --name "mi chat"# Combinar flags
En Windows, también puedes hacer doble clic en los archivos .py directamente. La consola permite elegir modo (normal o force) y permanece abierta hasta que pulses Enter.
Estructura de archivos
hljs language-graphql
code-chat-viewer/
├── scripts/
│ ├── visualizer.py # Core: conversor JSONL a HTML
│ └── manager.py # Orquestador: generación por lotes + panel
├── icon.png # Icono del proyecto (embebido como base64 en la salida)
├── config.example.json # Plantilla de configuración
├── config.json # Tu configuración (en gitignore, creada por setup)
├── SKILL.md # Instrucciones de la skill para Claude Code
├── README.md # Este archivo
├── CONTRIBUTING.md # Guía de contribución
├── CODE_OF_CONDUCT.md # Código de conducta
└── LICENSE # Licencia MIT
Notificaciones de tareas: Color por estado — verde (completada), azul (en progreso), gris (otro)
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)
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:
Mantener el archivo LICENSE intacto
Acreditar al autor original: Óscar González Martín
