Code Chat Viewer

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.

Chat View

Dashboard

Quick Download

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

Version 2.4.0: Download v2.4.0.zip - Stable release

Or browse all Releases

English | Español

English

Direct Claude Code CLI Compatibility

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:

# From your project root
mkdir -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:

# Global installation
mkdir -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

1. First time: Claude Code reads SKILL.md, detects your chat files, asks your preferences, creates config.json
2. Next times: Claude Code reads config.json and runs the manager — no questions asked
3. To update settings: Ask Claude Code "Update visualizer config"

Configuration

The skill uses two files:

Configurable options:

Environment variables (take precedence over config.json):

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)
• Configurable chat organization (active, shorts, archived)
• 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)
• CLI flags: --current (auto-detect session), --name (search by name), --force (regenerate all)
• Chat title displayed in HTML header (resolved from session metadata)
• Interactive mode selection (normal/force) for manual execution

Fixes:

• Summary counter now correctly detects summaries embedded in user messages
• Windows \r\n line endings no longer cause extra spacing in HTML output
• All HTML variables properly escaped (XSS hardening)
• Bare except clauses replaced with specific exception types
• Duplicate CSS rules consolidated
• Unused imports and dead code removed

What's New in v2.1

Chat viewer:

• Collapsible thinking blocks with first-line preview (collapsed by default)
• Collapsible tool-use blocks with full content (no more 100-char truncation)
• Multi-mode message navigation: All (gradient icon), User (blue), Assistant (green)
• Keyboard shortcuts: N (next) and P (previous) for message navigation
• Color-coded highlight animation: blue for user, green for assistant messages
• Smart scroll: centers short messages, pins long messages to top
• Compact layout: reduced padding, margins, line-height throughout
• Compact empty lines for denser content display
• Messages that only contain thinking/tool blocks are skipped during navigation

Dashboard:

• State persistence via localStorage (5h TTL): remembers sort order, filters, search, visible columns
• Accurate timestamps: always checks JSONL file modification time (sessions-index.json can be stale)
• Real message counts extracted directly from JSONL files
• JSONL enrichment for non-indexed chats (project, branch, first prompt, message count)
• Automatic filtering of file-history-snapshot entries (Claude Code's undo system)
• Orphan HTML cleanup when snapshot-only chats are detected

Fixes:

• Dashboard filter state now correctly persists (selector bug fixed)
• Message content vertically centered in containers (removed leading whitespace)
• Dashboard now displays custom titles set via /rename for all chats, including those not indexed in sessions-index.json

What's New in v2.0

Features:

• Fullscreen edge-to-edge layout (no borders or shadows)
• User message navigation with prev/next buttons and position counter
• Scroll synchronization for navigation counter
• Highlight animation when navigating to a message
• Local timezone conversion for timestamps
• Smart output filename generation (Chat YYYY-MM-DD HH-MM hash.html)
• Stats bar shows chat date instead of generation time
• Chat Manager: batch generation, organization, and interactive dashboard
• Full interactive setup: all options configurable with sensible defaults
• Organized output: Chats/ subfolder with Shorts/ and Archived/ subfolders
• Embedded favicon (dark, visible on browser tabs) and header icon (light)
• Auto-opens dashboard in browser after generation
• Scan progress indicator with file count summary
• Dashboard navigation: every chat includes a "Back to Dashboard" link
• Built-in feedback button in header and footer
• Conversation filter (replaces generic search)
• Windows double-click support: scripts pause before closing
• Rebranded from "Claude Code Visualizer" to "Code Chat Viewer"

Fixes:

• Security: HTML-escaped tool_use parameters to prevent DOM injection
• Filtered out "(no content)" ghost messages from Claude Code internals
• CSS specificity: User messages correctly display with blue styling
• Unknown type elements styled correctly within user messages
• Instant scroll navigation (replaced smooth scrolling)
• Reduced IntersectionObserver reactivation delay to 100ms
• Consistent header sizing between chat pages and dashboard

Manual Usage (without Claude Code)

You do not need Claude Code to use this tool. Both scripts work standalone with Python 3.6+.

Convert a single chat:

python scripts/visualizer.py path/to/chat.jsonl output.html

Batch generation with dashboard (requires config.json):

# 1. Create your config from the template
cp 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:

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

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

~/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
• Compact blocks: Purple (#8B5CF6) collapsible blocks grouping summary + pre-compact output
• Task notifications: Color-coded by status — green (completed), blue (in progress), gray (other)
• 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)

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:

• Keep the LICENSE file intact
• Credit the original author: Óscar González Martín
• Link to the original repository: https://github.com/oskar-gm/code-chat-viewer
• State any modifications made

Author

Óscar González Martín

• Website: nucleoia.es
• Email: oscar@nucleoia.es
• GitHub: @oskar-gm
• LinkedIn: oscar-gonz

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:

• Email: oscar@nucleoia.es
• GitHub Issues: Report here

Español

Compatibilidad directa con Claude Code CLI

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:

# Desde la raíz de tu proyecto
mkdir -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:

# Instalación global
mkdir -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

1. Primera vez: Claude Code lee SKILL.md, detecta tus archivos de chat, pregunta tus preferencias, crea config.json
2. Siguientes veces: Claude Code lee config.json y ejecuta el manager — sin preguntas
3. Para cambiar ajustes: Pide a Claude Code "Actualiza la configuración del visualizador"

Configuración

La skill usa dos archivos:

Opciones configurables:

Variables de entorno (tienen precedencia sobre config.json):

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)
• Flags CLI: --current (auto-detectar sesión), --name (buscar por nombre), --force (regenerar todo)
• Título del chat en el header del HTML (resuelto desde metadatos de sesión)
• Selección de modo interactiva (normal/force) en ejecución manual

Correcciones:

• Contador de summaries ahora detecta correctamente los summaries embebidos en mensajes de usuario
• Los saltos de línea \r\n de Windows ya no causan espaciado extra en el HTML
• Todas las variables HTML correctamente escapadas (protección XSS)
• Cláusulas except genéricas reemplazadas por excepciones específicas
• Reglas CSS duplicadas consolidadas
• Imports no usados y código muerto eliminados

Novedades en v2.1

Visor de chats:

• Bloques de thinking colapsables con vista previa de la primera línea (plegados por defecto)
• Bloques de tool-use colapsables con contenido completo (sin truncar a 100 caracteres)
• Navegación multi-modo: Todos (icono degradado), Usuario (azul), Asistente (verde)
• Atajos de teclado: N (siguiente) y P (anterior) para navegar mensajes
• Animación de resaltado por color: azul para usuario, verde para asistente
• Scroll inteligente: centra mensajes cortos, fija al inicio los largos
• Layout compacto: reducidos padding, márgenes y line-height en todo el visor
• Líneas vacías compactas para una visualización más densa
• Los mensajes que solo contienen thinking/tools se saltan en la navegación

Dashboard:

• Persistencia de estado vía localStorage (5h TTL): recuerda orden, filtros, búsqueda y columnas visibles
• Timestamps precisos: siempre verifica el mtime del JSONL (sessions-index.json puede estar obsoleto)
• Conteos de mensajes reales extraídos directamente de archivos JSONL
• Enriquecimiento JSONL para chats no indexados (proyecto, rama, primer prompt, conteo de mensajes)
• Filtrado automático de entradas file-history-snapshot (sistema de undo de Claude Code)
• Limpieza de HTMLs huérfanos al detectar chats solo de snapshots

Correcciones:

• El estado de los filtros del dashboard ahora se guarda correctamente (bug de selector corregido)
• Contenido de mensajes centrado verticalmente en contenedores (eliminado espacio blanco inicial)
• El dashboard ahora muestra los títulos personalizados asignados con /rename en todos los chats, incluyendo los no indexados en sessions-index.json

Novedades en v2.0

Funcionalidades:

• Layout fullscreen edge-to-edge sin bordes ni sombras
• Navegación por mensajes de usuario con botones prev/next y contador de posición
• Sincronización de scroll para el contador de navegación
• Animación de resaltado al navegar a un mensaje
• Conversión a zona horaria local para timestamps
• Generación inteligente de nombres de archivo (Chat YYYY-MM-DD HH-MM hash.html)
• La barra de estadísticas muestra fecha del chat en lugar de la de generación
• Chat Manager: generación por lotes, organización y panel interactivo
• Setup interactivo completo: todas las opciones configurables con defaults razonables
• Salida organizada: subcarpeta Chats/ con subcarpetas Shorts/ y Archived/
• Favicon embebido (oscuro, visible en pestañas del navegador) e icono de cabecera (claro)
• Apertura automática del panel en el navegador tras la generación
• Indicador de progreso del escaneo con resumen de archivos
• Navegación al panel: cada chat incluye un enlace "Volver al Dashboard"
• Botón de feedback integrado en encabezado y pie de página
• Filtro de conversación (reemplaza búsqueda genérica)
• Soporte para doble clic en Windows: los scripts se pausan antes de cerrarse
• Renombrado de "Claude Code Visualizer" a "Code Chat Viewer"

Correcciones:

• Seguridad: parámetros de tool_use escapados en HTML para prevenir inyección DOM
• Filtrado de mensajes fantasma "(no content)" de los internos de Claude Code
• Especificidad CSS: los mensajes de usuario se muestran correctamente en azul
• Estilos de tipos desconocidos corregidos dentro de mensajes de usuario
• Navegación instantánea (reemplazado smooth scrolling)
• Delay de reactivación de IntersectionObserver reducido a 100ms
• Tamaño de encabezado consistente entre las páginas de chat y el panel

Uso manual (sin Claude Code)

No necesitas Claude Code para usar esta herramienta. Ambos scripts funcionan de forma independiente con Python 3.6+.

Convertir un chat individual:

python scripts/visualizer.py ruta/al/chat.jsonl salida.html

Generación por lotes con panel (requiere config.json):

# 1. Crear tu configuración desde la plantilla
cp 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:

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

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

Estructura de salida

~/Code Chat Viewer/              # Raíz de salida (configurable)
├── CCV-Dashboard.html           # Panel interactivo
└── Chats/                       # Archivos HTML generados
    ├── Chat 2026-01-30 ...html  # Chats activos
    ├── Shorts/                  # Chats pequeños inactivos (si está activado)
    └── Archived/                # Chats inactivos antiguos (si está activado)

Ubicación de archivos de Claude Code

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

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

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

Estilo visual

• Mensajes de usuario: Azul (#0066CC) con fondo azul claro (#F8FBFF)
• Mensajes del asistente: Verde (#10893E) con fondo verde claro (#FAFFF8)
• Comandos: Azul (#0066CC) con etiqueta [COMMAND] y fondo azul más marcado (#EBF2FF)
• Respuestas del usuario: Ámbar (#D97706) con layout Q&A, previews de markdown y etiqueta [USER RESPONSE]
• Rechazos del usuario: Coral/rojo (#DC2626) con etiqueta [REJECTED] y feedback del usuario cuando se proporciona (fondo #FFF1F2)
• Comentarios del usuario: Ámbar (#D97706) con etiqueta [USER COMMENT] para comentarios inline en acciones aceptadas
• Bloques compact: Morado (#8B5CF6) colapsables agrupando summary + salida pre-compact
• 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
• Enlazar al repositorio original: https://github.com/oskar-gm/code-chat-viewer
• Indicar cualquier modificación realizada

Autor

Óscar González Martín

• Sitio web: nucleoia.es
• Email: oscar@nucleoia.es
• GitHub: @oskar-gm
• LinkedIn: oscar-gonz

Apoyo

Si este proyecto te resulta útil, por favor:

• Dale una estrella al repositorio
• Reporta bugs vía Issues
• Sugiere mejoras
• Compártelo con otros

Contacto

Para preguntas, sugerencias o reportar bugs:

• Email: oscar@nucleoia.es
• GitHub Issues: Reportar aquí

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