claude-code-log 0.2.7__tar.gz → 0.2.8__tar.gz

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/.claude/settings.local.json

@@ -30,7 +30,12 @@
       "Bash(open /tmp/test_preview.html)",
       "Bash(open /tmp/test_improved_preview.html)",
       "Bash(open /tmp/test_fixed_preview.html)",
-      "Bash(git tag:*)"
+      "Bash(git tag:*)",
+      "Bash(open /tmp/test_filter.html)",
+      "Bash(open /tmp/test_toolbar.html)",
+      "Bash(open /tmp/test_sticky.html)",
+      "Bash(open /tmp/test_counts.html)",
+      "Bash(open /tmp/test_grid.html)"
     ],
     "deny": []
   }

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/CHANGELOG.md

@@ -6,6 +6,13 @@ 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.8] - 2025-06-23
+
+### Changed
+
+- **Implement filtering by message type in transcripts**
+
+
 ## [0.2.7] - 2025-06-21
 
 ### Changed

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/PKG-INFO

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

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/claude_code_log/templates/transcript.html

@@ -312,6 +312,143 @@
             transform: translateY(-2px);
         }
 
+        .filter-toolbar {
+            background-color: #f8f9fa66;
+            border-radius: 8px;
+            padding: 12px 16px;
+            margin-bottom: 16px;
+            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;
+            display: none;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            backdrop-filter: blur(8px);
+        }
+
+        .filter-toolbar.visible {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .filter-label {
+            white-space: nowrap;
+        }
+
+        .filter-toggles {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 8px;
+            justify-content: center;
+        }
+
+        .filter-messages {
+            position: fixed;
+            bottom: 140px;
+            right: 20px;
+            background-color: #e8f4fd66;
+            color: #666;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            font-size: 1.2em;
+            line-height: 1;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+            transition: background-color 0.3s, transform 0.2s;
+            z-index: 1000;
+        }
+
+        .filter-messages:hover {
+            background-color: #e8f4fdcc;
+            transform: translateY(-2px);
+        }
+
+        .filter-messages.active {
+            background-color: #fff3cd66;
+        }
+
+        .filter-toolbar h3 {
+            margin: 0;
+            font-size: 1em;
+            color: #495057;
+            font-weight: 600;
+        }
+
+        .filter-toggle {
+            padding: 6px 12px;
+            border: 1px solid #dee2e6;
+            border-radius: 20px;
+            background-color: transparent;
+            color: #495057;
+            font-size: 0.85em;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            white-space: nowrap;
+        }
+
+        .filter-toggle:hover {
+            background-color: #ffffff99;
+            transform: translateY(-1px);
+        }
+
+        .filter-toggle.active {
+            background-color: #ffffffaa;
+        }
+
+        .filter-toggle.active:hover {
+            background-color: #ffffff66;
+        }
+
+        .filter-actions {
+            display: flex;
+            gap: 6px;
+            white-space: nowrap;
+        }
+
+        .filter-action-btn {
+            padding: 4px 8px;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            background-color: #ffffff66;
+            color: #6c757d;
+            font-size: 0.75em;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        .filter-action-btn:hover {
+            background-color: #ffffff99;
+        }
+
+        .filter-toggle .count {
+            opacity: 0.7;
+            font-size: 0.9em;
+            margin-left: 2px;
+        }
+
+        .filter-toggle.active .count {
+            opacity: 1;
+        }
+
+        .message.filtered-hidden {
+            display: none;
+        }
+
         .session-summary {
             background-color: #ffffff66;
             border-left: #4caf5088 4px solid;
@@ -442,6 +579,31 @@
 <body>
     <h1 id="title">{{ title }}</h1>
 
+    <!-- Filter Toolbar -->
+    <div class="filter-toolbar">
+        <div class="filter-label">
+            <h3>Filter:</h3>
+        </div>
+        <div class="filter-toggles">
+            <button class="filter-toggle active" data-type="user">🤷 User <span class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="assistant">🤖 Assistant <span
+                    class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="system">⚙️ System <span class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="tool_use">🛠️ Tool Use <span
+                    class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="tool_result">🧰 Tool Results <span
+                    class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="thinking">💭 Thinking <span
+                    class="count">(0)</span></button>
+            <button class="filter-toggle active" data-type="image">🖼️ Images <span class="count">(0)</span></button>
+        </div>
+        <div class="filter-actions">
+            <button class="filter-action-btn" id="selectAll">All</button>
+            <button class="filter-action-btn" id="selectNone">None</button>
+            <button class="filter-action-btn" id="closeFilters" title="Close filters">✕</button>
+        </div>
+    </div>
+
     {% if sessions and sessions|length > 1 %}
     <div class='navigation'>
         <h2>Sessions</h2>
@@ -503,13 +665,21 @@
     {% endif %}
     {% endfor %}
 
+    <button class="filter-messages" id="filterMessages" title="Toggle filters">🔍</button>
     <button class="toggle-details" id="toggleDetails" title="Toggle all details">📋</button>
     <a class="scroll-top" title="Scroll to top" href="#title">🔝</a>
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const toggleButton = document.getElementById('toggleDetails');
-
+            const filterButton = document.getElementById('filterMessages');
+            const filterToolbar = document.querySelector('.filter-toolbar');
+            const selectAllButton = document.getElementById('selectAll');
+            const selectNoneButton = document.getElementById('selectNone');
+            const closeFiltersButton = document.getElementById('closeFilters');
+            const filterToggles = document.querySelectorAll('.filter-toggle');
+
+            // Toggle details functionality
             function updateToggleButton() {
                 const allDetails = document.querySelectorAll('details.collapsible-details');
                 const openCount = document.querySelectorAll('details[open].collapsible-details').length;
@@ -544,8 +714,134 @@
 
             toggleButton.addEventListener('click', toggleAllDetails);
 
-            // Initialize button state
+            // Filter toolbar toggle functionality
+            function toggleFilterToolbar() {
+                const isVisible = filterToolbar.classList.contains('visible');
+                if (isVisible) {
+                    filterToolbar.classList.remove('visible');
+                    filterButton.classList.remove('active');
+                    filterButton.title = 'Show filters';
+                } else {
+                    filterToolbar.classList.add('visible');
+                    filterButton.classList.add('active');
+                    filterButton.title = 'Hide filters';
+                }
+            }
+
+            filterButton.addEventListener('click', toggleFilterToolbar);
+            closeFiltersButton.addEventListener('click', toggleFilterToolbar);
+
+            // Count messages by type and update button labels
+            function updateMessageCounts() {
+                const messageTypes = ['user', 'assistant', 'system', 'tool_use', 'tool_result', 'thinking', 'image'];
+
+                messageTypes.forEach(type => {
+                    const messages = document.querySelectorAll(`.message.${type}:not(.session-header)`);
+                    const count = messages.length;
+                    const toggle = document.querySelector(`[data-type="${type}"]`);
+                    const countSpan = toggle.querySelector('.count');
+
+                    if (countSpan) {
+                        countSpan.textContent = `(${count})`;
+
+                        // Hide toggles for message types with 0 count
+                        if (count === 0) {
+                            toggle.style.display = 'none';
+                        } else {
+                            toggle.style.display = 'flex';
+                        }
+                    }
+                });
+            }
+
+            // Filter functionality
+            function applyFilter() {
+                const activeTypes = Array.from(filterToggles)
+                    .filter(toggle => toggle.classList.contains('active'))
+                    .map(toggle => toggle.dataset.type);
+
+                // Show/hide messages based on active toggle buttons
+                const allMessages = document.querySelectorAll('.message:not(.session-header)');
+                allMessages.forEach(message => {
+                    const shouldShow = activeTypes.some(type => message.classList.contains(type));
+                    if (shouldShow) {
+                        message.classList.remove('filtered-hidden');
+                    } else {
+                        message.classList.add('filtered-hidden');
+                    }
+                });
+
+                // Update visible counts in real-time
+                updateVisibleCounts();
+
+                // Update filter button appearance based on whether all types are selected
+                const allTypesSelected = activeTypes.length === filterToggles.length;
+                if (!allTypesSelected && filterToolbar.classList.contains('visible')) {
+                    filterButton.classList.add('active');
+                } else if (allTypesSelected && filterToolbar.classList.contains('visible')) {
+                    filterButton.classList.add('active');
+                }
+            }
+
+            function updateVisibleCounts() {
+                const messageTypes = ['user', 'assistant', 'system', 'tool_use', 'tool_result', 'thinking', 'image'];
+
+                messageTypes.forEach(type => {
+                    const visibleMessages = document.querySelectorAll(`.message.${type}:not(.session-header):not(.filtered-hidden)`);
+                    const totalMessages = document.querySelectorAll(`.message.${type}:not(.session-header)`);
+                    const visibleCount = visibleMessages.length;
+                    const totalCount = totalMessages.length;
+
+                    const toggle = document.querySelector(`[data-type="${type}"]`);
+                    const countSpan = toggle.querySelector('.count');
+
+                    if (countSpan && totalCount > 0) {
+                        // Show "visible/total" format when filtering is active
+                        const activeTypes = Array.from(filterToggles)
+                            .filter(toggle => toggle.classList.contains('active'))
+                            .map(toggle => toggle.dataset.type);
+
+                        const isFiltering = activeTypes.length < filterToggles.length;
+
+                        if (isFiltering && visibleCount !== totalCount) {
+                            countSpan.textContent = `(${visibleCount}/${totalCount})`;
+                        } else {
+                            countSpan.textContent = `(${totalCount})`;
+                        }
+                    }
+                });
+            }
+
+            function toggleFilter(button) {
+                button.classList.toggle('active');
+                applyFilter();
+            }
+
+            function selectAllTypes() {
+                filterToggles.forEach(toggle => {
+                    toggle.classList.add('active');
+                });
+                applyFilter();
+            }
+
+            function selectNoTypes() {
+                filterToggles.forEach(toggle => {
+                    toggle.classList.remove('active');
+                });
+                applyFilter();
+            }
+
+            // Event listeners for filter toggles
+            filterToggles.forEach(toggle => {
+                toggle.addEventListener('click', () => toggleFilter(toggle));
+            });
+
+            selectAllButton.addEventListener('click', selectAllTypes);
+            selectNoneButton.addEventListener('click', selectNoTypes);
+
+            // Initialize button state and message counts
             updateToggleButton();
+            updateMessageCounts();
         });
     </script>
 </body>

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/pyproject.toml

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

{claude_code_log-0.2.7 → claude_code_log-0.2.8}/uv.lock

@@ -13,7 +13,7 @@ wheels = [
 
 [[package]]
 name = "claude-code-log"
-version = "0.2.7"
+version = "0.2.8"
 source = { editable = "." }
 dependencies = [
     { name = "click" },