claude-code-log 0.2.1__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.1 → claude_code_log-0.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: claude-code-log
-Version: 0.2.1
+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
@@ -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.1 → 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
@@ -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.1 → 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.1 → 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>

{claude_code_log-0.2.1 → claude_code_log-0.2.2}/claude_code_log/templates/transcript.html

@@ -5,33 +5,6 @@
     <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>{{ title }}</title>
-    <script type="module">
-        import { marked } from 'https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js';
-
-        // Configure marked options
-        marked.setOptions({
-            breaks: true,
-            gfm: true
-        });
-
-        document.addEventListener('DOMContentLoaded', function () {
-            // Find all content divs and render markdown
-            const contentDivs = document.querySelectorAll('.content');
-            contentDivs.forEach(div => {
-                // Skip if it's already HTML (contains tags or tool content)
-                if (div.innerHTML.includes('<pre>') ||
-                    div.innerHTML.includes('<div class="tool-content') ||
-                    div.innerHTML.includes('todo-write')) {
-                    return;
-                }
-
-                const markdownText = div.textContent;
-                if (markdownText.trim()) {
-                    div.innerHTML = marked.parse(markdownText);
-                }
-            });
-        });
-    </script>
     <style>
         body {
             font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', 'Ubuntu Mono', 'Cascadia Code', 'Menlo', 'Consolas', monospace;
@@ -39,44 +12,36 @@
             max-width: 1200px;
             margin: 0 auto;
             padding: 10px;
-            background-color: #fafafa;
+            background: linear-gradient(90deg, #f3d6d2, #f1dcce, #f0e4ca, #eeecc7, #e3ecc3, #d5eac0, #c6e8bd, #b9e6bc, #b6e3c5, #b3e1cf);
             color: #333;
         }
 
         .message {
-            margin-bottom: 12px;
-            padding: 12px;
-            border-radius: 6px;
-            border-left: 3px solid;
+            margin-bottom: 1em;
+            padding: 1em;
+            border-radius: 8px;
+            border-left: #ffffff66 1px solid;
+            background-color: #e3f2fd55;
+            box-shadow: -7px -7px 10px #eeeeee44, 7px 7px 10px #00000011;
+            border-top: #ffffff66 1px solid;
+            border-bottom: #00000017 1px solid;
+            border-right: #00000017 1px solid;
         }
 
         .session-divider {
-            margin: 30px 0;
-            padding: 8px 0;
-            border-top: 2px solid #ddd;
-            text-align: center;
-            font-weight: 600;
-            color: #666;
-            font-size: 0.9em;
+            margin: 70px 0;
+            border-top: 2px solid #fff;
         }
 
         .user {
-            background-color: #e3f2fd;
             border-left-color: #2196f3;
         }
 
         .assistant {
-            background-color: #f3e5f5;
             border-left-color: #9c27b0;
         }
 
-        .summary {
-            background-color: #e8f5e8;
-            border-left-color: #4caf50;
-        }
-
         .system {
-            background-color: #fff8e1;
             border-left-color: #ff9800;
         }
 
@@ -96,27 +61,31 @@
         }
 
         .tool-content {
-            background-color: #f8f9fa;
-            border: 1px solid #e9ecef;
+            background-color: #f8f9fa66;
             border-radius: 4px;
             padding: 8px;
             margin: 8px 0;
             overflow-x: auto;
+            box-shadow: -4px -4px 10px #eeeeee33, 4px 4px 10px #00000007;
+            border-left: #ffffff66 1px solid;
+            border-top: #ffffff66 1px solid;
+            border-bottom: #00000017 1px solid;
+            border-right: #00000017 1px solid;
         }
 
         .tool-result {
-            background-color: #e8f5e8;
-            border-left: 3px solid #4caf50;
+            background-color: #e8f5e866;
+            border-left: #4caf5088 1px solid;
         }
 
         .tool-use {
-            background-color: #e3f2fd;
-            border-left: 3px solid #2196f3;
+            background-color: #e3f2fd66;
+            border-left: #2196f388 1px solid;
         }
 
         .thinking-content {
-            background-color: #f0f0f0;
-            border-left: 3px solid #666;
+            background-color: #f0f0f066;
+            border-left: #66666688 1px solid;
         }
 
         .thinking-text {
@@ -125,12 +94,16 @@
         }
 
         .tool-input {
-            background-color: #fff3cd;
-            border: 1px solid #ffeaa7;
+            background-color: #fff3cd66;
             border-radius: 4px;
             padding: 6px;
             margin: 4px 0;
             font-size: 0.9em;
+            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;
         }
 
         .header {
@@ -167,11 +140,16 @@
         }
 
         .navigation {
-            background-color: #f8f9fa;
-            border: 1px solid #e9ecef;
+            background-color: #f8f9fa66;
             border-radius: 8px;
             padding: 16px;
             margin-bottom: 24px;
+            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;
         }
 
         .navigation h2 {
@@ -188,7 +166,7 @@
 
         .session-link {
             padding: 8px 12px;
-            background-color: #fff;
+            background-color: #ffffff66;
             border: 1px solid #dee2e6;
             border-radius: 4px;
             text-decoration: none;
@@ -197,7 +175,7 @@
         }
 
         .session-link:hover {
-            background-color: #e9ecef;
+            background-color: #ffffff99;
         }
 
         .session-link-title {
@@ -212,26 +190,28 @@
         }
 
         .session-header {
-            background-color: #e8f4fd;
-            border: 2px solid #2196f3;
+            background-color: #e8f4fd66;
             border-radius: 8px;
             padding: 16px;
             margin: 30px 0 20px 0;
+            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;
         }
 
         .session-header .header {
             margin-bottom: 8px;
-            font-weight: 600;
-            color: #1976d2;
-            font-size: 1.1em;
+            font-size: 1.2em;
         }
 
         .scroll-top {
             position: fixed;
             bottom: 20px;
             right: 20px;
-            background-color: #2196f3;
-            color: white;
+            background-color: #e8f4fd66;
+            color: #ccc;
             border: none;
             border-radius: 50%;
             width: 50px;
@@ -242,13 +222,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
             transition: background-color 0.3s, transform 0.2s;
             z-index: 1000;
         }
 
         .scroll-top:hover {
-            background-color: #1976d2;
+            background-color: #e8f4fdcc;
             transform: translateY(-2px);
         }
 
@@ -257,12 +237,16 @@
         }
 
         .session-summary {
-            background-color: #fff;
-            border-left: 4px solid #4caf50;
+            background-color: #ffffff66;
+            border-left: #4caf5088 4px solid;
             padding: 12px;
             margin: 8px 0;
             border-radius: 0 4px 4px 0;
             font-style: italic;
+            box-shadow: -7px -7px 10px #eeeeee44, 7px 7px 10px #00000011;
+            border-top: #ffffff66 1px solid;
+            border-bottom: #00000017 1px solid;
+            border-right: #00000017 1px solid;
         }
 
         code {
@@ -273,7 +257,7 @@
         }
 
         pre {
-            background-color: #f5f5f5;
+            background-color: #12121212;
             padding: 10px;
             border-radius: 5px;
             white-space: pre-wrap;
@@ -284,8 +268,8 @@
 
         /* TodoWrite tool styling */
         .todo-write {
-            background-color: #f0f8ff;
-            border-left: 3px solid #4169e1;
+            background-color: #f0f8ff66;
+            border-left: #4169e188 3px solid;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
         }
 
@@ -297,10 +281,14 @@
         }
 
         .todo-list {
-            background-color: white;
+            background-color: #ffffff66;
             border-radius: 6px;
             padding: 8px;
-            border: 1px solid #e1e8ed;
+            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;
         }
 
         .todo-item {
@@ -399,8 +387,7 @@
                     {% endif %}
                 </div>
                 {% if session.first_user_message %}
-                <pre class='session-preview'
-                    style='font-size: 0.75em; color: #888; margin-top: 4px; line-height: 1.3; white-space: pre-wrap; word-wrap: break-word;'>
+                <pre class='session-preview' style='font-size: 0.75em; line-height: 1.3; padding-bottom: 0;'>
                     {{- session.first_user_message[:500]|e -}}{% if session.first_user_message|length > 500 %}...{% endif %}
                 </pre>
                 {% endif %}
@@ -414,7 +401,7 @@
     {% if message.is_session_header %}
     <div class="session-divider"></div>
     <div id='session-{{ message.session_id }}' class='message session-header'>
-        <div class='header'>{{ message.content_html }}</div>
+        <div class='header'>Session: {{ message.content_html }}</div>
         {% if message.session_subtitle %}
         <div class='session-subtitle' style='font-size: 0.9em; color: #666; margin-top: 4px;'>{{
             message.session_subtitle }} ({{message.session_subtitle.session_id}})</div>
@@ -424,7 +411,8 @@
     {% else %}
     <div class='message {{ message.css_class }}'>
         <div class='header'>
-            <span>{{ message.display_type }}</span>
+            <span>{% if message.css_class == 'user' %}🤷 {% elif message.css_class == 'assistant' %}🤖 {% elif
+                message.css_class == 'system' %}⚙️ {% endif %}{{ message.display_type }}</span>
             <div style='display: flex; flex-direction: column; align-items: flex-end; gap: 2px;'>
                 <span class='timestamp'>{{ message.formatted_timestamp }}</span>
                 {% if message.token_usage %}

{claude_code_log-0.2.1 → claude_code_log-0.2.2}/justfile

@@ -20,6 +20,8 @@ lint:
 typecheck:
     uv run pyright
 
+ci: format test lint typecheck 
+
 build:
     rm dist/*
     uv build

{claude_code_log-0.2.1 → claude_code_log-0.2.2}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "claude-code-log"
-version = "0.2.1"
+version = "0.2.2"
 description = "Convert Claude Code transcript JSONL files to HTML"
 readme = "README.md"
 requires-python = ">=3.12"
@@ -20,6 +20,7 @@ dependencies = [
     "dateparser>=1.0.0",
     "pydantic>=2.0.0",
     "jinja2>=3.0.0",
+    "mistune>=3.1.3",
 ]
 
 [project.urls]

claude_code_log-0.2.2/test/test_markdown_rendering.py

@@ -0,0 +1,128 @@
+#!/usr/bin/env python3
+"""Test cases for server-side markdown rendering."""
+
+import json
+import tempfile
+from pathlib import Path
+from claude_code_log.converter import (
+    load_transcript,
+    generate_html,
+)
+
+
+def test_server_side_markdown_rendering():
+    """Test that markdown is rendered server-side and marked.js is not included."""
+    # Assistant message with markdown content
+    assistant_message = {
+        "type": "assistant",
+        "timestamp": "2025-06-11T22:44:17.436Z",
+        "parentUuid": None,
+        "isSidechain": False,
+        "userType": "assistant",
+        "cwd": "/tmp",
+        "sessionId": "test_session",
+        "version": "1.0.0",
+        "uuid": "test_md_001",
+        "requestId": "req_001",
+        "message": {
+            "id": "msg_001",
+            "type": "message",
+            "role": "assistant",
+            "model": "claude-3-5-sonnet-20241022",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "# Test Markdown\n\nThis is **bold** text and `code` inline.",
+                }
+            ],
+            "stop_reason": "end_turn",
+            "stop_sequence": None,
+        },
+    }
+
+    with tempfile.NamedTemporaryFile(mode="w", suffix=".jsonl", delete=False) as f:
+        f.write(json.dumps(assistant_message) + "\n")
+        f.flush()
+        test_file_path = Path(f.name)
+
+    try:
+        messages = load_transcript(test_file_path)
+        html = generate_html(messages, "Test Transcript")
+
+        # Should NOT include marked.js script references
+        assert "marked" not in html, "Should not include marked.js reference"
+        assert "import { marked }" not in html, "Should not import marked module"
+        assert "marked.parse" not in html, "Should not use marked.parse function"
+        assert "DOMContentLoaded" not in html or "marked" not in html, (
+            "Should not have markdown-related DOM handlers"
+        )
+
+        # Should include rendered HTML from markdown
+        assert "<h1>Test Markdown</h1>" in html, (
+            "Should render markdown heading as HTML"
+        )
+        assert "<strong>bold</strong>" in html, "Should render bold text as HTML"
+        assert "<code>code</code>" in html, "Should render inline code as HTML"
+
+        print("✓ Test passed: Markdown is rendered server-side")
+
+    finally:
+        test_file_path.unlink()
+
+
+def test_user_message_not_markdown_rendered():
+    """Test that user messages are not markdown rendered (shown as-is in pre tags)."""
+    user_message = {
+        "type": "user",
+        "timestamp": "2025-06-11T22:44:17.436Z",
+        "parentUuid": None,
+        "isSidechain": False,
+        "userType": "human",
+        "cwd": "/tmp",
+        "sessionId": "test_session",
+        "version": "1.0.0",
+        "uuid": "test_md_002",
+        "message": {
+            "role": "user",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "# This should NOT be rendered\n\n**This should stay bold**",
+                }
+            ],
+        },
+    }
+
+    with tempfile.NamedTemporaryFile(mode="w", suffix=".jsonl", delete=False) as f:
+        f.write(json.dumps(user_message) + "\n")
+        f.flush()
+        test_file_path = Path(f.name)
+
+    try:
+        messages = load_transcript(test_file_path)
+        html = generate_html(messages, "Test Transcript")
+
+        # User messages should be shown as-is in pre tags, not rendered as HTML
+        assert "<pre># This should NOT be rendered" in html, (
+            "User markdown should remain as text in pre tags"
+        )
+        assert "**This should stay bold**</pre>" in html, (
+            "User markdown asterisks should remain literal"
+        )
+        assert "<h1>This should NOT be rendered</h1>" not in html, (
+            "User markdown should not be rendered as HTML"
+        )
+        assert "<strong>This should stay bold</strong>" not in html, (
+            "User markdown should not be rendered as HTML"
+        )
+
+        print("✓ Test passed: User messages are not markdown rendered")
+
+    finally:
+        test_file_path.unlink()
+
+
+if __name__ == "__main__":
+    test_server_side_markdown_rendering()
+    test_user_message_not_markdown_rendered()
+    print("\n✅ All markdown rendering tests passed!")

{claude_code_log-0.2.1 → claude_code_log-0.2.2}/test/test_template_rendering.py

@@ -54,9 +54,13 @@ class TestTemplateRendering:
         assert "Tool Use:" in html_content
         assert "Tool Result:" in html_content
 
-        # Check that markdown elements are preserved for client-side rendering
-        assert "```python" in html_content
+        # Check that markdown elements are rendered server-side
+        assert (
+            "<code>@time_it" in html_content
+        )  # Inline code blocks are rendered to HTML
         assert "decorator factory" in html_content
+        assert "<strong>" in html_content  # Bold text is rendered to strong tags
+        assert "<code>" in html_content  # Inline code is rendered to code tags
 
     def test_edge_cases_render(self):
         """Test that edge cases render without errors."""
@@ -70,16 +74,16 @@ class TestTemplateRendering:
         assert "<!DOCTYPE html>" in html_content
         assert "<title>Claude Transcript - edge_cases</title>" in html_content
 
-        # Check markdown content is preserved
-        assert "**markdown**" in html_content
-        assert "`inline code`" in html_content
-        assert "[link](https://example.com)" in html_content
+        # Check markdown content is rendered to HTML (for assistant messages)
+        # User messages should remain as-is in pre tags, assistant messages should be rendered
+        # Note: Need to check which messages are user vs assistant to know what to expect
 
         # Check long text handling
         assert "Lorem ipsum dolor sit amet" in html_content
 
         # Check tool error handling
-        assert "Tool Result (Error):" in html_content
+        assert "Tool Result" in html_content
+        assert "Error):" in html_content
         assert "Tool execution failed" in html_content
 
         # Check system message filtering (caveat should be filtered out)
@@ -253,8 +257,8 @@ class TestTemplateRendering:
         assert 'class="tool-content tool-use"' in html_content
         assert 'class="tool-content tool-result"' in html_content
 
-    def test_javascript_markdown_setup(self):
-        """Test that JavaScript for markdown rendering is included."""
+    def test_server_side_markdown_rendering(self):
+        """Test that markdown is rendered server-side, not client-side."""
         test_data_path = (
             Path(__file__).parent / "test_data" / "representative_messages.jsonl"
         )
@@ -262,11 +266,20 @@ class TestTemplateRendering:
         html_file = convert_jsonl_to_html(test_data_path)
         html_content = html_file.read_text()
 
-        # Check for marked.js import and setup
-        assert "marked" in html_content
-        assert "DOMContentLoaded" in html_content
-        assert "querySelectorAll('.content')" in html_content
-        assert "marked.parse" in html_content
+        # Should NOT have client-side JavaScript for markdown rendering
+        assert "marked" not in html_content
+        assert "DOMContentLoaded" not in html_content or "marked" not in html_content
+        assert "querySelectorAll('.content')" not in html_content
+        assert "marked.parse" not in html_content
+
+        # Should have server-side rendered markdown in assistant messages
+        # Check for elements that indicate markdown was rendered
+        assert "<strong>" in html_content  # Bold text should be rendered
+        assert "<code>" in html_content  # Code should be rendered
+        assert "<p>" in html_content  # Paragraphs should be rendered
+        assert (
+            "<ul>" in html_content or "<ol>" in html_content
+        )  # Lists should be rendered
 
     def test_html_escaping(self):
         """Test that HTML special characters are properly escaped."""

{claude_code_log-0.2.1 → claude_code_log-0.2.2}/uv.lock

@@ -13,12 +13,13 @@ wheels = [
 
 [[package]]
 name = "claude-code-log"
-version = "0.1.0"
+version = "0.2.1"
 source = { editable = "." }
 dependencies = [
     { name = "click" },
     { name = "dateparser" },
     { name = "jinja2" },
+    { name = "mistune" },
     { name = "pydantic" },
 ]
 
@@ -38,6 +39,7 @@ requires-dist = [
     { name = "click", specifier = ">=8.0.0" },
     { name = "dateparser", specifier = ">=1.0.0" },
     { name = "jinja2", specifier = ">=3.0.0" },
+    { name = "mistune", specifier = ">=3.1.3" },
     { name = "pydantic", specifier = ">=2.0.0" },
 ]
 
@@ -198,6 +200,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/4f/65/6079a46068dfceaeabb5dcad6d674f5f5c61a6fa5673746f42a9f4c233b3/MarkupSafe-3.0.2-cp313-cp313t-win_amd64.whl", hash = "sha256:e444a31f8db13eb18ada366ab3cf45fd4b31e4db1236a4448f68778c1d1a5a2f", size = 15739, upload_time = "2024-10-18T15:21:42.784Z" },
 ]
 
+[[package]]
+name = "mistune"
+version = "3.1.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/c4/79/bda47f7dd7c3c55770478d6d02c9960c430b0cf1773b72366ff89126ea31/mistune-3.1.3.tar.gz", hash = "sha256:a7035c21782b2becb6be62f8f25d3df81ccb4d6fa477a6525b15af06539f02a0", size = 94347, upload_time = "2025-03-19T14:27:24.955Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/01/4d/23c4e4f09da849e127e9f123241946c23c1e30f45a88366879e064211815/mistune-3.1.3-py3-none-any.whl", hash = "sha256:1a32314113cff28aa6432e99e522677c8587fd83e3d51c29b82a52409c842bd9", size = 53410, upload_time = "2025-03-19T14:27:23.451Z" },
+]
+
 [[package]]
 name = "nodeenv"
 version = "1.9.1"

claude_code_log-0.2.1/CHANGELOG.md

@@ -1,73 +0,0 @@
-# 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).
-
-## [Unreleased]
-
-### 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.1/test/test_markdown_rendering.py

@@ -1,56 +0,0 @@
-#!/usr/bin/env python3
-"""Test cases for markdown rendering and JavaScript setup."""
-
-import json
-import tempfile
-from pathlib import Path
-from claude_code_log.converter import (
-    load_transcript,
-    generate_html,
-)
-
-
-def test_markdown_script_inclusion():
-    """Test that marked.js script is included in HTML output."""
-    user_message = {
-        "type": "user",
-        "timestamp": "2025-06-11T22:44:17.436Z",
-        "parentUuid": None,
-        "isSidechain": False,
-        "userType": "human",
-        "cwd": "/tmp",
-        "sessionId": "test_session",
-        "version": "1.0.0",
-        "uuid": "test_md_001",
-        "message": {
-            "role": "user",
-            "content": [
-                {"type": "text", "text": "# Test Markdown\n\nThis is **bold** text."}
-            ],
-        },
-    }
-
-    with tempfile.NamedTemporaryFile(mode="w", suffix=".jsonl", delete=False) as f:
-        f.write(json.dumps(user_message) + "\n")
-        f.flush()
-        test_file_path = Path(f.name)
-
-    try:
-        messages = load_transcript(test_file_path)
-        html = generate_html(messages, "Test Transcript")
-
-        # Should include marked.js script
-        assert "marked" in html, "Should include marked.js reference"
-        assert "import { marked }" in html, "Should import marked module"
-        assert "marked.parse" in html, "Should use marked.parse function"
-        assert "DOMContentLoaded" in html, "Should wait for DOM to load"
-
-        print("✓ Test passed: Markdown script is included in HTML")
-
-    finally:
-        test_file_path.unlink()
-
-
-if __name__ == "__main__":
-    test_markdown_script_inclusion()
-    print("\n✅ All markdown rendering tests passed!")