Fix Phase 2 UI regressions and complete remaining items#6
Merged
ShlomoStept merged 20 commits intomainfrom Jan 6, 2026
Merged
Conversation
- Add render_json_with_markdown() function that recursively renders JSON with Markdown formatting for string values - Update render_bash_tool() to render descriptions as Markdown HTML - Update generic tool_use handler to render descriptions and JSON with Markdown - Update bash_tool and tool_use macros to use |safe for pre-rendered HTML - Add CSS classes for styled JSON output (json-key, json-string-value, etc.) - Add 4 new tests for markdown rendering functionality - Update snapshots for changed output format This implements Phase 2 Task 1: tool call text rendered as Markdown. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add group_blocks_by_type() function to categorize content blocks - Refactor render_assistant_message*() to group blocks into cells - Add cell macro with <details> wrapper for collapsible sections - Three cell types: thinking (closed), response (open), tools (closed with count) - Add CSS for cell styling with expand/collapse animation - Add 5 new tests for cell structure functionality - Update snapshots for new HTML structure Thinking cells are closed by default to reduce noise. Response cells are open by default for immediate visibility. Tools cells show count and are closed by default. This implements Phase 2 Task 2: collapsible cells for subcomponents. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add copy button to cell header in cell macro
- Add CSS for cell copy button with hover and focus states
- Add JavaScript handler for cell copy with clipboard API
- Include keyboard accessibility (Enter/Space support)
- Add ARIA labels for screen reader accessibility
- Add 2 new tests for cell copy button functionality
- Update snapshots for new button and CSS
Each collapsible cell (Thinking, Response, Tool Calls) now has
a copy button that copies the cell content to clipboard with
visual feedback ("Copied!" for 2 seconds).
This implements Phase 2 Task 3: per-cell copy buttons.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Mark A.3 Cell Subsections as completed (9.0/10) - Add B.6 Tool Markdown Rendering as completed (8.5/10) - Add Phase 2 task grading summary table - Document implementation details and test coverage - Remove duplicate task entries Phase 2 is now partially completed with collapsible cells and tool markdown rendering implemented. A.2 Metadata and B.3 Tool Headers remain pending. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add A.4 entry to task grading summary (7.5/10) - Document implementation details, features, and test coverage - List known limitations (no user-facing error notification, no fallback) - Include suggestions for improving the score 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix sticky headers by removing overflow:hidden from .message - Add JSON/Markdown toggle for tool calls and tool results - Improve syntax highlighting with Dracula-inspired color scheme - Add clear labels for tool calls (→ Call) and results (← Result) - Improve copy functionality with data-copy-content attribute - Add hover states for better clickability feedback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Current state includes: - Collapsible cells for assistant messages (Thinking/Response/Tool Calls) - JSON/Markdown toggle for tool calls and results - Sticky headers (partially working) - Per-cell copy buttons - Improved syntax highlighting (Dracula theme) - Tool call/result labels (→ Call, ← Result) Known issues to address: - User message overflow and non-collapsible - Markdown/JSON toggle needs better UX (tab-style) - Inconsistent collapsibility (show more/less vs collapsible) - Some tool calls missing toggle - Duplicate copy buttons in some results - Copy format unclear - Sticky header behavior incomplete 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Consolidated analysis from 11 sub-agents covering: - 5 screenshot analyses identifying visual issues - 6 issue investigations with root cause analysis Plan covers 6 implementation phases: 1. Foundation - Craft.do style CSS variables 2. User Messages - Collapsible cells, text wrapping 3. Toggle System - shadcn-style tabs 4. Collapsibility Unification - Sticky cascade, <details> everywhere 5. Copy System - Format indicators, view mode respect 6. Specialized Tools - Toggles for Write/Edit/Bash/TodoWrite Includes parallel execution matrix, test plan, and known risks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
## Phase 1: Foundation (Craft.do Style) - Add 50+ CSS custom properties for colors, spacing, shadows - Implement warm cream/off-white color palette - Add paper texture background effect - Define frosted glass variables for sticky headers ## Phase 2: User Messages - Make user messages collapsible with cell wrapper - Add text wrapping (overflow-wrap, word-break) to prevent overflow - Add .user-cell CSS styling matching other cell types ## Phase 3: Toggle System - Replace small toggle buttons with shadcn-inspired tab controls - Add Markdown | JSON tabs with clear active states - Include ARIA attributes for accessibility - Update JavaScript for tab-based toggle behavior ## Phase 4: Collapsibility Unification - Make message headers sticky (z-index: 30) - Create cascading sticky headers: message → cell → subcell - Add frosted glass backdrop-filter effects - Ensure no overflow:hidden breaks sticky positioning ## Phase 5: Copy System - Remove duplicate copy buttons (skip inside .cell-content) - Add cell-level master toggle for tools cells - Propagate view mode to all child elements ## Phase 6: Specialized Tools - Add Markdown/JSON toggles to Write, Edit, Bash, TodoWrite - Pass input_json_html to all specialized tool macros - Preserve existing specialized displays in Markdown view All 133 tests pass. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Document identified issues (JSON display, tabs alignment) - Outline 5-phase approach: Analysis, Fixes, Remaining Items, QA, Delivery - Define grading criteria with weights 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
JSON Display Fix: - Remove inline `style="display: none;"` from .view-json divs in macros.html - CSS class-based toggle (.show-json) now properly controls visibility - Affected: todo_list, write_tool, edit_tool, bash_tool macros Tabs Alignment Fix: - Update .cell summary to use flex: 1 on .cell-label instead of justify-content: space-between - Add flex-wrap: wrap to .tool-header, .file-tool-header, .todo-header for better responsiveness - Add gap: var(--spacing-sm) to .cell summary for consistent spacing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
A.2 Metadata Subsection: - Add calculate_message_metadata() function for char count, token estimate, tool counts - Add collapsible metadata section with info icon to each message - CSS styles: .message-metadata, .metadata-item, .metadata-label, .metadata-value - 7 new tests for metadata functionality B.3 Tool Call Headers with Type: - Add TOOL_ICONS constant with 14 tool-specific icons - Read (📖), Write (📝), Edit (✏️), Bash ($), Glob (🔍), Grep (🔎), etc. - Add get_tool_icon() helper function - Update tool_use macro to accept and display tool icon - Default icon (⚙) for unmapped tools 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Overall Score: 81.28/100 Component Scores: - macros.html: 85.20/100 - __init__.py: 77.70/100 - Test Files: 84.35/100 Key findings documented with actionable improvements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Documents the investigation plan and approach used - Captures subagent analysis results for JSON display and tabs alignment issues - Records the fix implementation process and verification steps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR completes the Phase 2 UI improvements for the Claude Code transcript HTML generator, focusing on adding collapsible cell structure, metadata display, and improved tool rendering with Markdown support.
Key Changes
- Collapsible Cell Structure: Assistant messages now use
<details>elements to create thinking/response/tools cells - Metadata Subsection: Added collapsible metadata showing character count, token estimate, and tool counts per message
- Tool Markdown Rendering: Tool descriptions and JSON string values now render Markdown (bold, italic, code, links)
- Per-Cell Copy Buttons: Each cell has a copy button with keyboard accessibility and ARIA labels
Reviewed changes
Copilot reviewed 22 out of 29 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| tests/test_generate_html.py | Added 24 new test functions covering cell structure, metadata calculation, and Markdown rendering |
| tests/snapshots/*.html | Updated 11 snapshot files to reflect new HTML structure with cells, metadata, and view toggles |
| TASKS.md | Updated documentation with Phase 2 completion status and implementation details |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The test file had two methods named `test_tool_result_with_ansi_codes` at lines 512 and 545 in TestRenderContentBlock class. The second one was silently overriding the first. - Renamed second test to `test_tool_result_with_ansi_codes_snapshot` - Updated docstring to clarify the test's purpose - Renamed snapshot file to match new test name - Both tests now run correctly (5 ANSI-related tests pass) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The module-level _github_repo variable posed a thread-safety risk when processing multiple sessions concurrently. This refactors to use Python's contextvars module which provides thread-local storage. Changes: - Add contextvars import - Create _github_repo_var ContextVar with None default - Add get_github_repo() accessor function (thread-safe) - Add set_github_repo() setter function (thread-safe) - Keep _github_repo module variable for backward compatibility - Update all internal usages to use new functions - Update test to use new API The backward-compatible design ensures existing code that reads _github_repo directly continues to work. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added a copyToClipboard() helper function that:
1. Uses the modern Clipboard API (navigator.clipboard.writeText)
when available
2. Falls back to document.execCommand('copy') for older browsers
3. Returns a Promise for consistent handling
Also added user-facing error feedback:
- Button now shows "Failed" for 2 seconds on copy failure
- Improves UX by informing users when copy doesn't work
Updated both copy button implementations:
- Dynamically added copy buttons on pre/tool-result elements
- Cell header copy buttons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
B.3 Tool Call Headers with Type was already fully implemented: - TOOL_ICONS dict with 14 tool-specific icons - get_tool_icon() function for icon lookup - View toggles (Markdown/JSON) in all tool macros - Cell-level bulk toggle for tools cell Updated TASKS.md: - Changed Phase 2 status from PARTIALLY COMPLETED to COMPLETED - Added B.3 score (8.5/10) to grading summary - Documented B.3 implementation details and features 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Documentation: - walkthrough.md: Detailed summary of all changes with verification - task.md: Updated with final completion status - PLAN.md: Updated grading report after fixes Score Improvements: - Overall: 81.28 -> 83.24 (+1.96 points) - __init__.py: 77.70 -> 80.50 (thread-safety, clipboard fallback) - Test Files: 84.35 -> 87.15 (duplicate test fixed) All tests pass, code formatted. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This was referenced Jan 6, 2026
Closed
ShlomoStept
pushed a commit
that referenced
this pull request
Jan 9, 2026
* Fix Windows Unicode encoding errors when writing HTML files On Windows, the default file encoding is cp1252, which cannot encode Unicode characters like emojis. This caused UnicodeEncodeError when writing HTML files containing emoji characters. Fixed by explicitly specifying encoding="utf-8" for all read_text() and write_text() calls on HTML files. * Fix Windows test encoding issues Add encoding="utf-8" to all read_text() and write_text() calls in tests to ensure proper handling of UTF-8 encoded HTML files on Windows. * Set PYTHONUTF8 environment variable for tests For windows, refs: - #6 --------- Co-authored-by: Claude <noreply@anthropic.com>
ShlomoStept
pushed a commit
that referenced
this pull request
Jan 9, 2026
ShlomoStept
added a commit
that referenced
this pull request
Jan 9, 2026
Fix Phase 2 UI regressions and complete remaining items
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR delivers comprehensive Phase 2 UI improvements for claude-code-transcripts, including new features, bug fixes, enhanced accessibility, and technical debt cleanup.
Phase 2 Features Completed
Collapsible Cell System (A.3)
Markdown/JSON View Toggle (B.6)
Per-Cell Copy Buttons (A.4)
Message Metadata Subsection (A.2)
Tool Type Icons (B.3)
Bug Fixes
Technical Debt Fixes (Merged from fix/technical-debt)
Technical Details
Test plan
uv run pytest- all tests passuv run black . --check- code formattedCode Grading Summary
🤖 Generated with Claude Code