claude-code-log 0.3.2__tar.gz → 0.3.3__tar.gz

claude_code_log-0.3.2/.claude/settings.json.bak → claude_code_log-0.3.3/.claude/settings.json

@@ -17,19 +17,19 @@
         "hooks": [
           {
             "type": "command",
-            "command": "uv run ruff check --fix"
+            "command": "uv run ruff check --fix 2>&1"
           },
           {
             "type": "command",
-            "command": "uv run ty check"
+            "command": "uv run ty check 2>&1"
           },
           {
             "type": "command",
-            "command": "uv run pyright"
+            "command": "uv run pyright 2>&1"
           },
           {
             "type": "command",
-            "command": "uv run pytest"
+            "command": "uv run pytest 2>&1"
           }
         ]
       }

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/.gitignore

@@ -178,3 +178,4 @@ test_output
 .DS_Store
 test/test_data/*.html
 .claude-trace
+.specstory

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/CHANGELOG.md

@@ -6,6 +6,14 @@ 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.3.3] - 2025-07-05
+
+### Changed
+
+- **Hide groups in the timeline instead of items + bug fixes**
+- **Get tooltip config working + improve rendering and styling**
+
+
 ## [0.3.2] - 2025-07-03
 
 ### Changed

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: claude-code-log
-Version: 0.3.2
+Version: 0.3.3
 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
@@ -273,6 +273,32 @@ uv run claude-code-log
 
 ## TODO
 
+- handle new(?) message format
+
+```sh
+9 validation errors for UserTranscriptEntry
+toolUseResult.str
+  Input should be a valid string [type=string_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.list[TodoItem].0.id
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.content
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.status
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.priority
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.FileReadResult
+  Input should be a valid dictionary or instance of FileReadResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.CommandResult
+  Input should be a valid dictionary or instance of CommandResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.TodoResult
+  Input should be a valid dictionary or instance of TodoResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.EditResult
+  Input should be a valid dictionary or instance of EditResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+```
+
+- add a bit of padding to the last message time so the timeline doesn't look empty when opening
+- tutorial overlay
 - integrate `claude-trace` request logs if present?
 - Shortcut / command to resume a specific conversation by session ID $ claude --resume 550e8400-e29b-41d4-a716-446655440000?
 - Localised number formatting and timezone adjustment runtime? For this we'd need to make Jinja template variables more granular
@@ -285,3 +311,6 @@ uv run claude-code-log
 - system blocks like `init` also don't render perfectly, losing new lines
 - add `ccusage` like daily summary and maybe some textual summary too based on Claude generate session summaries?
 – import logs from @claude Github Actions
+- stream logs from @claude Github Actions, see [octotail](https://github.com/getbettr/octotail)
+- extend into a VS Code extension that reads the JSONL real-time and displays stats like current context usage and implements a UI to see messages, todos, permissions, config, MCP status, etc
+- feed the filtered user messages to headless claude CLI to distill the user intent from the session

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/README.md

@@ -253,6 +253,32 @@ uv run claude-code-log
 
 ## TODO
 
+- handle new(?) message format
+
+```sh
+9 validation errors for UserTranscriptEntry
+toolUseResult.str
+  Input should be a valid string [type=string_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.list[TodoItem].0.id
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.content
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.status
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.list[TodoItem].0.priority
+  Field required [type=missing, input_value={'type': 'text', 'text': ... it could be acquired.'}, input_type=dict]
+toolUseResult.FileReadResult
+  Input should be a valid dictionary or instance of FileReadResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.CommandResult
+  Input should be a valid dictionary or instance of CommandResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.TodoResult
+  Input should be a valid dictionary or instance of TodoResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+toolUseResult.EditResult
+  Input should be a valid dictionary or instance of EditResult [type=model_type, input_value=[{'type': 'text', 'text':...it could be acquired.'}], input_type=list]
+```
+
+- add a bit of padding to the last message time so the timeline doesn't look empty when opening
+- tutorial overlay
 - integrate `claude-trace` request logs if present?
 - Shortcut / command to resume a specific conversation by session ID $ claude --resume 550e8400-e29b-41d4-a716-446655440000?
 - Localised number formatting and timezone adjustment runtime? For this we'd need to make Jinja template variables more granular
@@ -265,3 +291,6 @@ uv run claude-code-log
 - system blocks like `init` also don't render perfectly, losing new lines
 - add `ccusage` like daily summary and maybe some textual summary too based on Claude generate session summaries?
 – import logs from @claude Github Actions
+- stream logs from @claude Github Actions, see [octotail](https://github.com/getbettr/octotail)
+- extend into a VS Code extension that reads the JSONL real-time and displays stats like current context usage and implements a UI to see messages, todos, permissions, config, MCP status, etc
+- feed the filtered user messages to headless claude CLI to distill the user intent from the session

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/claude_code_log/templates/components/timeline.html

@@ -27,9 +27,9 @@
             'tool_use': { id: 'tool_use', content: '🛠️ Tool Use', style: 'background-color: #fff3e0;' },
             'tool_result': { id: 'tool_result', content: '🧰 Tool Result', style: 'background-color: #e8f5e8;' },
             'thinking': { id: 'thinking', content: '💭 Thinking', style: 'background-color: #fce4ec;' },
-            'system': { id: 'system', content: '⚙️ System', style: 'background-color: #f5f5f5;' },
+            'system': { id: 'system', content: '⚙️ System', style: 'background-color: #ffeee1;' },
             'image': { id: 'image', content: '🖼️ Image', style: 'background-color: #e1f5fe;' },
-            'sidechain': { id: 'sidechain', content: '🔗 Sub-assistant', style: 'background-color: #e8f5e8;' }
+            'sidechain': { id: 'sidechain', content: '🔗 Sub-assistant', style: 'background-color: #f5f5f5;' }
         };
 
         // Build timeline data from messages
@@ -42,7 +42,7 @@
             // Clear existing mapping
             timelineIdToElement.clear();
 
-            // Get all messages from the page
+            // Get all messages from the page (including filtered ones - we'll hide them with CSS)
             const messages = document.querySelectorAll('.message:not(.session-header)');
 
             messages.forEach((messageEl, index) => {
@@ -114,13 +114,17 @@
                 // Store mapping for click handling
                 timelineIdToElement.set(index, messageEl);
 
-                // Strip content to make tooltip formatting more uniform
-                // TODO: this is very basic and TodoWrites have weird spacing so will need some more work
-                let title = contentEl.innerHTML.includes("<pre") ? contentEl.innerHTML : `<pre>${contentEl.innerHTML}</pre>`
+                // Format tooltip content with proper containment and styling
+                let title = contentEl.innerHTML;
+                title = title.includes("<pre") ? title : `<pre>${title}</pre>`;
+
+                // Clean up collapsible details for tooltip display
                 if (title.includes("<details")) {
                     title = title.replace(/(<summary>.*<\/summary>)/gs, '').replace(/<details class="collapsible-details">(.*?)<\/details>/gs, (m, p) => p)
                 }
-                title = title.replace(/<pre>[\s\r\n]+(.*?)[\s\r\n]+<\/pre>/gs, (m, p) => `<pre>${p}</pre>`)
+
+                // Clean up excessive whitespace in pre tags
+                title = title.replace(/<pre([^>]*)>[\s\r\n]+(.*?)[\s\r\n]+<\/pre>/gs, (m, attrs, content) => `<pre${attrs}>${content}</pre>`)
 
                 // Adjust content display based on message type
                 let displayContent = content || messageTypeGroups[messageType].content;
@@ -150,11 +154,6 @@
                     content: displayContent,
                     start: timestamp,
                     group: messageType,
-                    tooltip: {
-                        // FIXME: This followMouse doesn't work for some reason and the tooltip box gets cut off for the bottom timeline boxes
-                        followMouse: true,
-                        overflowMethod: 'cap'
-                    },
                     title,
                     className: `timeline-item-${messageType}`
                 };
@@ -166,37 +165,25 @@
             const timelineEnd = new Date(latestTimeString);
             const timelineStart = new Date(timelineEnd.getTime() - 60 * 60 * 1000); // 1 hour before latest
 
-            return { items: timelineItems, groups: timelineGroups, timelineEnd, timelineStart };
+            return { timelineItems, timelineGroups, timelineEnd, timelineStart };
         }
 
         // Filter timeline items based on current message filters
         function applyFilters() {
-            if (!timeline || !items) return;
+            if (!timeline || !groups) return;
 
-            // Get active filter types
-            const filterToggles = document.querySelectorAll('.filter-toggle');
-            const activeTypes = [];
-            let hasActiveFilters = false;
+            // Get active filter types from filter toggles
+            const activeTypes = Array.from(document.querySelectorAll('.filter-toggle.active'))
+                .map(toggle => toggle.dataset.type);
 
-            filterToggles.forEach(toggle => {
-                if (toggle.classList.contains('active')) {
-                    activeTypes.push(toggle.dataset.type);
-                    hasActiveFilters = true;
-                }
-            });
+            // Update groups visibility based on filter states
+            const updatedGroups = groups.map(group => ({
+                ...group,
+                visible: activeTypes.includes(group.id)
+            }));
 
-            // If no filters are active, show all items
-            if (!hasActiveFilters) {
-                timeline.setItems(items);
-                return;
-            }
-
-            // Filter items based on active types
-            const filteredItems = items.get().filter(item => {
-                return activeTypes.includes(item.group);
-            });
-
-            timeline.setItems(new vis.DataSet(filteredItems));
+            // Update timeline groups
+            timeline.setGroups(updatedGroups);
         }
 
         // Handle timeline item click - scroll to corresponding message
@@ -241,7 +228,9 @@
             }
 
             // Build timeline data
-            const { items, groups, timelineEnd, timelineStart } = buildTimelineData();
+            const { timelineItems, timelineGroups, timelineEnd, timelineStart } = buildTimelineData();
+            items = timelineItems
+            groups = timelineGroups
             if (items.length === 0) {
                 console.warn('No timeline items found');
                 return;
@@ -258,6 +247,11 @@
                 end: timelineEnd,
                 orientation: 'top',
                 align: 'left',
+                tooltip: {
+                    // FIXME: This followMouse doesn't work for some reason and the tooltip box gets cut off for the bottom timeline boxes
+                    followMouse: true,
+                    overflowMethod: 'cap'
+                },
                 margin: {
                     item: 2,
                     axis: 2
@@ -271,6 +265,9 @@
             // Create timeline
             timeline = new vis.Timeline(container, new vis.DataSet(items), new vis.DataSet(groups), options);
 
+            // Make timeline available globally for debugging
+            window.timeline = timeline;
+
             // Add event listeners
             timeline.on('select', onTimelineSelect);
 

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/claude_code_log/templates/components/timeline_styles.css

@@ -75,8 +75,8 @@
 }
 
 .vis-item.timeline-item-tool_use {
-    background-color: #fff3e0 !important;
-    border-color: #ff9800 !important;
+    background-color: #fff8e1 !important;
+    border-color: #ffc107 !important;
 }
 
 .vis-item.timeline-item-tool_result {
@@ -90,8 +90,8 @@
 }
 
 .vis-item.timeline-item-system {
-    background-color: #f5f5f5 !important;
-    border-color: #9e9e9e !important;
+    background-color: #ffeee1 !important;
+    border-color: #ff8707 !important;
 }
 
 .vis-item.timeline-item-image {
@@ -99,6 +99,16 @@
     border-color: #00bcd4 !important;
 }
 
+.vis-item.timeline-item-sidechain {
+    background-color: #f5f5f5 !important;
+    border-color: #9e9e9e !important;
+}
+
+/* Hide filtered timeline items */
+.vis-item.timeline-filtered-hidden {
+    display: none !important;
+}
+
 /* Timeline axis styling */
 .vis-time-axis {
     border-top: 1px solid #ddd !important;
@@ -121,13 +131,21 @@
 
 .vis-tooltip {
     max-width: 700px;
-    padding: 0 !important;
+    padding: 1em !important;
+    white-space: normal !important;
+    font-family: inherit !important;
 }
 
 .vis-tooltip pre {
     margin: 0;
+    padding: 0;
+    background-color: transparent;
 }
 
 .vis-tooltip img {
     max-width: 700px;
+}
+
+.vis-tooltip div {
+    white-space: normal;
 }

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/claude_code_log/templates/transcript.html

@@ -196,8 +196,12 @@
                     
                     // Special handling for sidechain messages
                     if (message.classList.contains('sidechain')) {
-                        // For sidechain messages, only show if sidechain filter is active
-                        shouldShow = activeTypes.includes('sidechain');
+                        // For sidechain messages, show if both sidechain filter is active AND their message type filter is active
+                        const sidechainActive = activeTypes.includes('sidechain');
+                        const messageTypeActive = activeTypes.some(type => 
+                            type !== 'sidechain' && message.classList.contains(type)
+                        );
+                        shouldShow = sidechainActive && messageTypeActive;
                     } else {
                         // For non-sidechain messages, show if any of their types are active
                         shouldShow = activeTypes.some(type => message.classList.contains(type));

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "claude-code-log"
-version = "0.3.2"
+version = "0.3.3"
 description = "Convert Claude Code transcript JSONL files to HTML"
 readme = "README.md"
 requires-python = ">=3.12"

{claude_code_log-0.3.2 → claude_code_log-0.3.3}/uv.lock

@@ -89,7 +89,7 @@ wheels = [
 
 [[package]]
 name = "claude-code-log"
-version = "0.3.2"
+version = "0.3.3"
 source = { editable = "." }
 dependencies = [
     { name = "anthropic" },