claude-code-log 0.2.0__tar.gz → 0.2.2__tar.gz

claude_code_log-0.2.2/CHANGELOG.md

@@ -0,0 +1,165 @@
+# Changelog
+
+All notable changes to claude-code-log will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.2] - 2025-06-16
+
+### Changed
+
+- **Static Markdown**: Render Markdown in Python to make it easier to test and not require Javascipt
+- **Visual Design**: Make it nicer to look at
+
+## [0.2.1] - 2025-06-15
+
+### Added
+
+- **Table of Contents & Session Navigation**: Added comprehensive session navigation system
+  - Interactive table of contents with session summaries and quick navigation
+  - Timestamp ranges showing first-to-last timestamp for each session
+  - Session-based organization with clickable navigation links
+  - Floating "back to top" button for easy navigation
+
+- **Token Usage Tracking**: Complete token consumption display and tracking
+  - Individual assistant messages show token usage in headers
+  - Session-level token aggregation in table of contents
+  - Detailed breakdown: Input, Output, Cache Creation, Cache Read tokens
+  - Data extracted from AssistantMessage.usage field in JSONL files
+
+- **Enhanced Content Support**: Expanded message type and content handling
+  - **Tool Use Rendering**: Proper display of tool invocations and results
+  - **Thinking Content**: Support for Claude's internal thinking processes
+  - **Image Handling**: Display of pasted images in transcript conversations
+  - **Todo List Rendering**: Support for structured todo lists in messages
+
+- **Project Hierarchy Processing**: Complete project management system
+  - Process entire `~/.claude/projects/` directory by default
+  - Master index page with project cards and statistics
+  - Linked navigation between index and individual project pages
+  - Project statistics including file counts and recent activity
+
+- **Improved User Experience**: Enhanced interface and navigation
+  - Chronological ordering of all messages across sessions
+  - Session demarcation with clear visual separators
+  - Always-visible scroll-to-top button
+  - Space-efficient, content-dense layout design
+
+### Changed
+
+- **Default Behavior**: Changed default mode to process all projects instead of requiring explicit input
+  - `claude-code-log` now processes `~/.claude/projects/` by default
+  - Added `--all-projects` flag for explicit project processing
+  - Maintained backward compatibility for single file/directory processing
+
+- **Output Structure**: Restructured HTML output for better organization
+  - Session-based navigation replaces simple chronological listing
+  - Enhanced template system with comprehensive session metadata
+  - Improved visual hierarchy with table of contents integration
+
+- **Data Models**: Expanded Pydantic models for richer data representation
+  - Enhanced TranscriptEntry with proper content type handling
+  - Added UsageInfo model for token usage tracking
+  - Improved ContentItem unions for diverse content types
+
+### Technical
+
+- **Template System**: Major improvements to Jinja2 template architecture
+  - New session navigation template components
+  - Token usage display templates
+  - Enhanced message rendering with rich content support
+  - Responsive design improvements
+
+- **Testing Infrastructure**: Comprehensive test coverage expansion
+  - Increased test coverage to 78%+ across all modules
+  - Added visual style guide generation
+  - Representative test data based on real transcript files
+  - Extensive test documentation in test/README.md
+
+- **Code Quality**: Significant refactoring and quality improvements
+  - Complete Pydantic migration with proper error handling
+  - Improved type hints and function documentation
+  - Enhanced CLI interface with better argument parsing
+  - Comprehensive linting and formatting standards
+
+### Fixed
+
+- **Data Processing**: Improved robustness of transcript processing
+  - Better handling of malformed or incomplete JSONL entries
+  - More reliable session detection and grouping
+  - Enhanced error handling for edge cases in data parsing
+  - Fixed HTML escaping issues in message content
+
+- **Template Rendering**: Resolved template and rendering issues
+  - Fixed session summary attachment logic
+  - Improved timestamp handling and formatting
+  - Better handling of mixed content types in templates
+  - Resolved CSS and styling inconsistencies
+
+## [0.1.0]
+
+### Added
+
+- **Summary Message Support**: Added support for `summary` type messages in JSONL transcripts
+  - Summary messages are displayed with green styling and "Summary:" prefix
+  - Includes special CSS class `.summary` for custom styling
+  
+- **System Command Visibility**: System commands (like `init`) are now shown instead of being filtered out
+  - Commands appear in expandable `<details>` elements
+  - Shows command name in the summary (e.g., "Command: init")
+  - Full command content is revealed when expanded
+  - Uses orange styling with `.system` CSS class
+  
+- **Markdown Rendering Support**: Automatic client-side markdown rendering
+  - Uses marked.js ESM module loaded from CDN
+  - Supports GitHub Flavored Markdown (GFM)
+  - Renders headers, emphasis, code blocks, lists, links, and images
+  - Preserves existing HTML content when present
+  
+- **Enhanced CSS Styling**: New styles for better visual organization
+  - Added styles for `.summary` messages (green theme)
+  - Added styles for `.system` messages (orange theme)  
+  - Added styles for `<details>` elements with proper spacing and cursor behavior
+  - Improved overall visual hierarchy
+
+### Changed
+
+- **System Message Filtering**: Modified system message handling logic
+  - System messages with `<command-name>` tags are no longer filtered out
+  - Added `extract_command_name()` function to parse command names
+  - Updated `is_system_message()` function to handle command messages differently
+  - Other system messages (stdout, caveats) are still filtered as before
+
+- **Message Type Support**: Extended message type handling in `load_transcript()`
+  - Now accepts `"summary"` type in addition to `"user"` and `"assistant"`
+  - Updated message processing logic to handle different content structures
+
+### Technical
+
+- **Dependencies**: No new Python dependencies added
+  - marked.js is loaded via CDN for client-side rendering
+  - Maintains existing minimal dependency approach
+  
+- **Testing**: Added comprehensive test coverage
+  - New test file `test_new_features.py` with tests for:
+    - Summary message type support
+    - System command message handling  
+    - Markdown script inclusion
+    - System message filtering behavior
+  - Tests use anonymized fixtures based on real transcript data
+
+- **Code Quality**: Improved type hints and function documentation
+  - Added proper docstrings for new functions
+  - Enhanced error handling for edge cases
+  - Maintained backward compatibility with existing functionality
+
+### Fixed
+
+- **Message Processing**: Improved robustness of message content extraction
+  - Better handling of mixed content types in transcript files
+  - More reliable text extraction from complex message structures
+
+## Previous Versions
+
+Earlier versions focused on basic JSONL to HTML conversion with session demarcation and date filtering capabilities.

{claude_code_log-0.2.0 → claude_code_log-0.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: claude-code-log
-Version: 0.2.0
+Version: 0.2.2
 Summary: Convert Claude Code transcript JSONL files to HTML
 Project-URL: Homepage, https://github.com/daaain/claude-code-log
 Project-URL: Issues, https://github.com/daaain/claude-code-log/issues
@@ -13,6 +13,7 @@ Requires-Python: >=3.12
 Requires-Dist: click>=8.0.0
 Requires-Dist: dateparser>=1.0.0
 Requires-Dist: jinja2>=3.0.0
+Requires-Dist: mistune>=3.1.3
 Requires-Dist: pydantic>=2.0.0
 Description-Content-Type: text/markdown
 
@@ -22,6 +23,8 @@ A Python CLI tool that converts Claude Code transcript JSONL files into readable
 
 ## Project Overview
 
+📋 **[View Changelog](CHANGELOG.md)** - See what's new in each release
+
 This tool generates clean, minimalist HTML pages showing user prompts and assistant responses chronologically. It's designed to create a readable log of your Claude Code interactions with support for both individual files and entire project hierarchies.
 
 ## Quickstart
@@ -212,7 +215,7 @@ When processing all projects, the tool generates:
 
 ## Installation
 
-Install using pip (coming soon to PyPI):
+Install using pip:
 
 ```bash
 pip install claude-code-log
@@ -229,6 +232,6 @@ uv run claude-code-log
 
 ## TODO
 
-- **Enhanced UI**: Make it look even nicer with improved styling
+- Show top level stats on index page – token usage added up + time of last interaction
 - **Tool Use Preview**: Show first few lines of tool use and other collapsed details
 - **In-page Filtering**: Client-side filtering and search

{claude_code_log-0.2.0 → claude_code_log-0.2.2}/README.md

@@ -4,6 +4,8 @@ A Python CLI tool that converts Claude Code transcript JSONL files into readable
 
 ## Project Overview
 
+📋 **[View Changelog](CHANGELOG.md)** - See what's new in each release
+
 This tool generates clean, minimalist HTML pages showing user prompts and assistant responses chronologically. It's designed to create a readable log of your Claude Code interactions with support for both individual files and entire project hierarchies.
 
 ## Quickstart
@@ -194,7 +196,7 @@ When processing all projects, the tool generates:
 
 ## Installation
 
-Install using pip (coming soon to PyPI):
+Install using pip:
 
 ```bash
 pip install claude-code-log
@@ -211,6 +213,6 @@ uv run claude-code-log
 
 ## TODO
 
-- **Enhanced UI**: Make it look even nicer with improved styling
+- Show top level stats on index page – token usage added up + time of last interaction
 - **Tool Use Preview**: Show first few lines of tool use and other collapsed details
 - **In-page Filtering**: Client-side filtering and search

{claude_code_log-0.2.0 → claude_code_log-0.2.2}/claude_code_log/renderer.py

@@ -6,6 +6,7 @@ from pathlib import Path
 from typing import List, Optional, Union, Dict, Any, cast
 from datetime import datetime
 import html
+import mistune
 from jinja2 import Environment, FileSystemLoader
 
 from .models import (
@@ -36,6 +37,23 @@ def escape_html(text: str) -> str:
     return html.escape(text)
 
 
+def render_markdown(text: str) -> str:
+    """Convert markdown text to HTML using mistune."""
+    # Configure mistune with GitHub-flavored markdown features
+    renderer = mistune.create_markdown(
+        plugins=[
+            "strikethrough",
+            "footnotes",
+            "table",
+            "url",
+            "task_lists",
+            "def_list",
+        ],
+        escape=False,  # Don't escape HTML since we want to render markdown properly
+    )
+    return str(renderer(text))
+
+
 def extract_command_info(text_content: str) -> tuple[str, str, str]:
     """Extract command info from system message with command tags."""
     import re
@@ -157,7 +175,7 @@ def format_tool_use_content(tool_use: ToolUseContent) -> str:
     return f"""
     <div class="tool-content tool-use">
         <details>
-            <summary><strong>Tool Use:</strong> {escaped_name} (ID: {escaped_id})</summary>
+            <summary><strong>🛠️ Tool Use:</strong> {escaped_name} (ID: {escaped_id})</summary>
             <div class="tool-input">
                 <strong>Input:</strong>
                 <pre>{escaped_input}</pre>
@@ -182,12 +200,12 @@ def format_tool_result_content(tool_result: ToolResultContent) -> str:
                 content_parts.append(item.get("text", ""))
         escaped_content = escape_html("\n".join(content_parts))
 
-    error_indicator = " (Error)" if tool_result.is_error else ""
+    error_indicator = " (🚨 Error)" if tool_result.is_error else ""
 
     return f"""
     <div class="tool-content tool-result">
         <details>
-            <summary><strong>Tool Result{error_indicator}:</strong> {escaped_id}</summary>
+            <summary><strong>🧰 Tool Result{error_indicator}:</strong> {escaped_id}</summary>
             <div class="tool-input">
                 <pre>{escaped_content}</pre>
             </div>
@@ -203,7 +221,7 @@ def format_thinking_content(thinking: ThinkingContent) -> str:
     return f"""
     <div class="tool-content thinking-content">
         <details>
-            <summary><strong>Thinking</strong></summary>
+            <summary><strong>💭 Thinking</strong></summary>
             <div class="thinking-text">
                 <pre>{escaped_thinking}</pre>
             </div>
@@ -229,24 +247,26 @@ def render_message_content(
 ) -> str:
     """Render message content with proper tool use and tool result formatting."""
     if isinstance(content, str):
-        escaped_text = escape_html(content)
-        return (
-            "<pre>" + escaped_text + "</pre>"
-            if message_type == "user"
-            else escaped_text
-        )
+        if message_type == "user":
+            # User messages are shown as-is in preformatted blocks
+            escaped_text = escape_html(content)
+            return "<pre>" + escaped_text + "</pre>"
+        else:
+            # Assistant messages get markdown rendering
+            return render_markdown(content)
 
     # content is a list of ContentItem objects
     rendered_parts: List[str] = []
 
     for item in content:
         if type(item) is TextContent:
-            escaped_text = escape_html(item.text)
-            rendered_parts.append(
-                "<pre>" + escaped_text + "</pre>"
-                if message_type == "user"
-                else escaped_text
-            )
+            if message_type == "user":
+                # User messages are shown as-is in preformatted blocks
+                escaped_text = escape_html(item.text)
+                rendered_parts.append("<pre>" + escaped_text + "</pre>")
+            else:
+                # Assistant messages get markdown rendering
+                rendered_parts.append(render_markdown(item.text))
         elif type(item) is ToolUseContent:
             rendered_parts.append(format_tool_use_content(item))  # type: ignore
         elif type(item) is ToolResultContent:

{claude_code_log-0.2.0 → claude_code_log-0.2.2}/claude_code_log/templates/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang='en'>
+
 <head>
     <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
@@ -11,43 +12,54 @@
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
-            background-color: #fafafa;
+            background: linear-gradient(90deg, #f3d6d2, #f1dcce, #f0e4ca, #eeecc7, #e3ecc3, #d5eac0, #c6e8bd, #b9e6bc, #b6e3c5, #b3e1cf);
             color: #333;
         }
+
         h1 {
             text-align: center;
             color: #2c3e50;
             margin-bottom: 30px;
             font-size: 2em;
         }
+
         .project-list {
             display: grid;
             gap: 15px;
         }
+
         .project-card {
-            background: white;
+            background-color: #ffffff66;
             border-radius: 8px;
             padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            border-left: 4px solid #2196f3;
+            box-shadow: -7px -7px 10px #eeeeee44, 7px 7px 10px #00000011;
+            border-left: #ffffff66 1px solid;
+            border-top: #ffffff66 1px solid;
+            border-bottom: #00000017 1px solid;
+            border-right: #00000017 1px solid;
         }
+
         .project-card:hover {
-            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+            box-shadow: -10px -10px 15px #eeeeee66, 10px 10px 15px #00000022;
             transform: translateY(-1px);
             transition: all 0.2s ease;
         }
+
         .project-name {
             font-size: 1.2em;
             font-weight: 600;
             margin-bottom: 10px;
         }
+
         .project-name a {
             text-decoration: none;
             color: #2196f3;
         }
+
         .project-name a:hover {
             text-decoration: underline;
         }
+
         .project-stats {
             color: #666;
             font-size: 0.9em;
@@ -55,42 +67,53 @@
             gap: 20px;
             flex-wrap: wrap;
         }
+
         .stat {
             display: flex;
             align-items: center;
             gap: 5px;
         }
+
         .summary {
             text-align: center;
             margin-bottom: 30px;
             padding: 15px;
-            background: white;
+            background-color: #ffffff66;
             border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            box-shadow: -7px -7px 10px #eeeeee44, 7px 7px 10px #00000011;
+            border-left: #ffffff66 1px solid;
+            border-top: #ffffff66 1px solid;
+            border-bottom: #00000017 1px solid;
+            border-right: #00000017 1px solid;
         }
+
         .summary-stats {
             display: flex;
             justify-content: center;
             gap: 30px;
             flex-wrap: wrap;
         }
+
         .summary-stat {
             text-align: center;
         }
+
         .summary-stat .number {
             font-size: 1.5em;
             font-weight: 600;
             color: #2196f3;
         }
+
         .summary-stat .label {
             color: #666;
             font-size: 0.9em;
         }
     </style>
 </head>
+
 <body>
     <h1>{{ title }}</h1>
-    
+
     <div class='summary'>
         <div class='summary-stats'>
             <div class='summary-stat'>
@@ -107,20 +130,21 @@
             </div>
         </div>
     </div>
-    
+
     <div class='project-list'>
         {% for project in projects %}
-            <div class='project-card'>
-                <div class='project-name'>
-                    <a href='{{ project.html_file }}'>{{ project.display_name }}</a>
-                </div>
-                <div class='project-stats'>
-                    <div class='stat'>📁 {{ project.jsonl_count }} transcript files</div>
-                    <div class='stat'>💬 {{ project.message_count }} messages</div>
-                    <div class='stat'>🕒 {{ project.formatted_date }}</div>
-                </div>
+        <div class='project-card'>
+            <div class='project-name'>
+                <a href='{{ project.html_file }}'>{{ project.display_name }}</a>
             </div>
+            <div class='project-stats'>
+                <div class='stat'>📁 {{ project.jsonl_count }} transcript files</div>
+                <div class='stat'>💬 {{ project.message_count }} messages</div>
+                <div class='stat'>🕒 {{ project.formatted_date }}</div>
+            </div>
+        </div>
         {% endfor %}
     </div>
 </body>
+
 </html>