Code Chat Viewer v2.2.0

🚀 New Features & Security Hardening | Nuevas Funcionalidades y Seguridad Reforzada

English | Español

---

🇬🇧 English

Smart message rendering, CLI enhancements, and security improvements for professional chat visualization.

✨ Features

• Smart message rendering: Commands ([COMMAND]), compact blocks (collapsible, purple), task notifications (color by status), user responses (amber Q&A with markdown previews)
• Color-coded navigation: 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 in header: Displayed next to "Code Chat Viewer", resolved from session metadata
• Interactive mode: Normal/force selection when running manually

🔧 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 in both scripts)
• Bare except clauses replaced with specific exception types
• Duplicate CSS rules consolidated
• Unused imports and dead code removed
• Copyright updated to 2025-2026

📦 Installation

1. Download the .zip file below
2. Extract to ~/.claude/skills/code-chat-viewer (global) or .claude/skills/code-chat-viewer (per-project)
3. Ask Claude Code: "Visualize my chats"

📚 Documentation

• README
• Contributing Guidelines

---

🇪🇸 Español

Renderizado inteligente de mensajes, mejoras CLI y seguridad reforzada para visualización profesional de chats.

✨ Funcionalidades

• 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)
• Navegación por color: 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 header: Junto a "Code Chat Viewer", resuelto desde metadatos de sesión
• Modo interactivo: Selección normal/force en ejecución manual

🔧 Correcciones

• Contador de summaries ahora detecta summaries embebidos en mensajes de usuario
• 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 en ambos scripts)
• Cláusulas except genéricas reemplazadas por excepciones específicas
• Reglas CSS duplicadas consolidadas
• Imports no usados y código muerto eliminados
• Copyright actualizado a 2025-2026

📦 Instalación

1. Descarga el archivo .zip de abajo
2. Extrae en ~/.claude/skills/code-chat-viewer (global) o .claude/skills/code-chat-viewer (por proyecto)
3. Pide a Claude Code: "Visualiza mis chats"

📚 Documentación

• README
• Guía de Contribución

---

🌐 Links

• Website: https://nucleoia.es
• Repository: https://github.com/oskar-gm/code-chat-viewer
• Author: Óscar González Martín

---

© 2025-2026 Óscar González Martín | MIT License

v2.1.1 — Fix /rename custom titles in dashboard

What's fixed / Qué se corrige

[EN] The dashboard now correctly displays custom titles set via /rename for all chats, including those not indexed in sessions-index.json.

Root cause: Claude Code writes custom titles as {"type":"custom-title"} entries inside JSONL files, but doesn't always propagate them to sessions-index.json. The dashboard only read names from the index, so renamed chats showed generic filenames instead.

Changes:

• extract_jsonl_metadata() now captures custom-title entries from JSONL
• Non-indexed sessions use the JSONL custom title as display name
• Indexed sessions fall back to JSONL custom title when sessions-index.json lacks it
• Version bumped to v2.1.1 across all files

---

[ES] El dashboard ahora muestra correctamente los títulos personalizados asignados con /rename en todos los chats, incluyendo los no indexados en sessions-index.json.

Causa raíz: Claude Code escribe los títulos personalizados como entradas {"type":"custom-title"} en los archivos JSONL, pero no siempre los propaga a sessions-index.json. El dashboard solo leía nombres del índice, así que los chats renombrados mostraban nombres genéricos de archivo.

Cambios:

• extract_jsonl_metadata() ahora captura entradas custom-title del JSONL
• Las sesiones no indexadas usan el título personalizado del JSONL como nombre
• Las sesiones indexadas hacen fallback al título del JSONL cuando sessions-index.json no lo tiene
• Versión actualizada a v2.1.1 en todos los archivos

Code Chat Viewer v2.1

Code Chat Viewer v2.1

Convert Claude Code CLI chat logs (JSONL) to professional, browsable HTML visualizations with terminal aesthetics, interactive dashboard, and smart organization.

English | Español

---

🇬🇧 English

What's New in v2.1

Chat Viewer:

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

Dashboard:

• State persistence via localStorage (5h TTL): sort order, filters, search text, visible columns
• Accurate timestamps from JSONL file mtime (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 for snapshot-only chats
• Filter selector bug fixed

Requirements

• Python 3.6+ (standard library only, zero dependencies)
• Works on Windows, Linux, and macOS
• Compatible with Claude Code CLI or standalone

Installation

As Claude Code skill:

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"

Standalone:

python scripts/manager.py

---

🇪🇸 Español

Novedades en v2.1

Visor de chats:

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

Dashboard:

• Persistencia de estado vía localStorage (5h TTL): orden, filtros, búsqueda, columnas visibles
• Timestamps precisos desde mtime del JSONL (sessions-index.json puede estar desactualizado)
• Conteos de mensajes reales extraídos directamente de archivos JSONL
• Enriquecimiento JSONL para chats no indexados (proyecto, rama, primer prompt, conteo)
• Filtrado automático de entradas file-history-snapshot (sistema de deshacer de Claude Code)
• Limpieza de HTMLs huérfanos de chats snapshot-only
• Corregido bug del selector de filtros

Requisitos

• Python 3.6+ (solo biblioteca estándar, sin dependencias)
• Funciona en Windows, Linux y macOS
• Compatible con Claude Code CLI o de forma independiente

Instalación

Como skill de Claude Code:

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"

Independiente:

python scripts/manager.py

---

Author / Autor: Óscar González Martín — nucleoia.es — GitHub

Code Chat Viewer v2.0

Code Chat Viewer v2.0

Convert Claude Code CLI chat logs (JSONL) to professional, browsable HTML visualizations with terminal aesthetics, interactive dashboard, and smart organization.

English | Español

---

Screenshots

Chat View

Assistant Response

Interactive Dashboard

---

🇬🇧 English

What's New

Features:

• Fullscreen edge-to-edge layout with VS Code terminal aesthetics
• User message navigation with prev/next buttons and position counter
• Chat Manager: batch generation, organization, and interactive dashboard
• Full interactive setup with all options configurable and sensible defaults
• Organized output: Chats/ subfolder with Shorts/ and Archived/ subfolders
• Embedded favicon (dark, visible on browser tabs) and header icon (light, self-contained)
• Auto-opens dashboard in browser after generation
• Scan progress indicator with file count summary
• Configurable chat organization (active, shorts, archived)
• Conversation filter, feedback button, dashboard navigation link
• Windows double-click support: scripts pause before closing
• Local timezone conversion for timestamps
• Smart output filename generation (Chat YYYY-MM-DD HH-MM hash.html)
• 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
• Consistent header sizing between chat pages and dashboard
• Instant scroll navigation, reduced IntersectionObserver delay

Requirements

• Python 3.6+ (standard library only, zero dependencies)
• Works on Windows, Linux, and macOS
• Compatible with Claude Code CLI or standalone

Installation

As Claude Code skill:

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"

Standalone:

python scripts/manager.py

---

🇪🇸 Español

Novedades

Funcionalidades:

• Layout fullscreen edge-to-edge con estética terminal VS Code
• Navegación por mensajes de usuario con botones prev/next y contador de posición
• Chat Manager: generación por lotes, organización y panel interactivo
• Setup interactivo completo con todas las opciones configurables y 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, autocontenido)
• Apertura automática del panel en el navegador tras la generación
• Indicador de progreso del escaneo con resumen de archivos
• Organización configurable de chats (activos, cortos, archivados)
• Filtro de conversación, botón de feedback, enlace de navegación al panel
• Soporte para doble clic en Windows: los scripts se pausan antes de cerrarse
• Conversión a zona horaria local para timestamps
• Generación inteligente de nombres de archivo (Chat YYYY-MM-DD HH-MM hash.html)
• 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
• Tamaño de cabecera consistente entre las páginas de chat y el panel
• Navegación instantánea, delay de IntersectionObserver reducido

Requisitos

• Python 3.6+ (solo biblioteca estándar, sin dependencias)
• Funciona en Windows, Linux y macOS
• Compatible con Claude Code CLI o de forma independiente

Instalación

Como skill de Claude Code:

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"

Independiente:

python scripts/manager.py

---

Author / Autor: Óscar González Martín — nucleoia.es — GitHub

Claude Code Visualizer v1.0

🎉 First Stable Release | Primera Versión Estable

English | Español

---

🇬🇧 English

Professional skill for converting Claude Code chat JSON files into formatted HTML visualizations.

✨ Features

• 🎨 Terminal-style aesthetics inspired by VS Code
• 🟠 Collapsible tool results (click to expand)
• 🔍 Real-time search functionality
• 📱 Responsive design
• 🌍 Bilingual documentation (English/Spanish)
• 🔧 SEO optimized HTML output
• ⚡ Zero external dependencies (Python 3.6+ only)
• 🚀 Zero configuration required

📦 Installation

Download the .zip file below and:

1. In Claude.ai, go to Settings > Capabilities > Skills
2. Upload the .zip file
3. In any conversation, ask Claude: "Convert my Claude Code chat to HTML"

See README.md for detailed instructions.

📚 Documentation

• README
• SKILL Documentation
• Contributing Guidelines

---

🇪🇸 Español

Skill profesional para convertir archivos JSON de chats de Claude Code en visualizaciones HTML formateadas.

✨ Características

• 🎨 Estética estilo terminal inspirada en VS Code
• 🟠 Resultados de herramientas colapsables (click para expandir)
• 🔍 Funcionalidad de búsqueda en tiempo real
• 📱 Diseño responsive
• 🌍 Documentación bilingüe (Inglés/Español)
• 🔧 Salida HTML optimizada para SEO
• ⚡ Sin dependencias externas (solo Python 3.6+)
• 🚀 Sin configuración requerida

📦 Instalación

Descarga el archivo .zip de abajo y:

1. En Claude.ai, ve a Ajustes > Capacidades > Skills
2. Sube el archivo .zip
3. En cualquier conversación, pídele a Claude: "Convierte mi chat de Claude Code a HTML"

Ver README.md para instrucciones detalladas.

📚 Documentación

• README
• Documentación SKILL
• Guía de Contribución

---

🌐 Links

• Website: https://nucleoia.es
• Repository: https://github.com/oskar-gm/cl-code-visualizer
• Author: Óscar González Martín

---

© 2025 Óscar González Martín | MIT License