Add UX improvements: collapsible cells, copy buttons, syntax highlighting, and ANSI sanitization

[ShlomoStept]

Summary

This PR adds several significant UX and rendering improvements to claude-code-transcripts, developed and tested across multiple iterations.

New Features

1. ANSI Escape Code Sanitization

• Strips terminal escape codes from tool output for clean display
• Supports CSI, OSC, and C1 control sequences
• Handles edge cases like incomplete sequences

2. Content Block Array Rendering

• Properly renders [{"type": "text", ...}] arrays as markdown instead of raw JSON
• Supports text and thinking block types
• Falls back gracefully for unsupported block types

3. Syntax Highlighting

• Pygments integration for code blocks in Write and Edit tools
• Supports 500+ languages via automatic lexer detection
• Monokai-inspired color theme

4. Copy Buttons

• Per-code-block copy buttons with hover reveal
• Clipboard API with fallback for older browsers
• Visual "Copied!" feedback

5. Tool Call/Result Pairing

• Groups tool_use with corresponding tool_result by matching IDs
• Visual association between request and response

6. Collapsible Cell Structure

• Thinking cell (collapsed by default)
• Response cell (expanded by default)
• Tools cell (collapsed by default, shows count)
• Smooth toggle animations

7. Per-Cell Copy Buttons

• Copy entire cell contents (thinking, response, or tools)
• ARIA labels for accessibility
• Keyboard accessible (Enter/Space support)

8. Markdown Rendering in Tools

• Tool descriptions render as markdown (bold, italic, links, code)
• JSON string values render inline markdown
• Syntax-highlighted JSON keys and values

9. Message Metadata

• Collapsible metadata section per message
• Character count and token estimate (~chars/4)
• Tool call counts by type

10. Tool Icons

• 14 tool-specific icons (Read, Write, Edit, Bash, Glob, Grep, etc.)
• Default icon for unknown tools
• Tab-style Markdown/JSON view toggle

Bug Fixes

• Markdown/JSON View Toggle: Fixed mutual exclusivity so only one view displays at a time
• Content Block List Handling: Fixed rendering when content is a Python list vs JSON string
• Thread Safety: Refactored global _github_repo variable to use contextvars
• Duplicate Test: Fixed silently overridden duplicate test method

Test Coverage

• 141 tests passing
• 21 snapshot tests for HTML output verification
• New tests for ANSI sanitization, content block arrays, collapsible cells, copy buttons, metadata, and tool rendering

Files Changed

File	Changes
src/claude_code_transcripts/__init__.py	Core implementation (+1100 lines)
src/claude_code_transcripts/templates/macros.html	Jinja2 templates for new features
tests/test_generate_html.py	Comprehensive test coverage
pyproject.toml	Added pygments dependency
AGENTS.md	Updated development guide

Breaking Changes

None - all changes are additive and backward compatible.

Screenshots

The improvements are best seen in action. Generate HTML from a Claude Code session to see:

• Collapsible thinking/response/tools sections
• Syntax-highlighted code blocks
• Copy buttons on hover
• Tool icons and view toggles

---

Test Plan

• All 141 existing tests pass
• New tests added for all new functionality
• Manual testing with real Claude Code transcripts
• Code formatted with Black

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com

[Copilot]

Pull request overview

This PR adds comprehensive UX improvements to claude-code-transcripts, including ANSI sanitization, syntax highlighting with Pygments, collapsible cells, copy buttons, Markdown/JSON view toggles, metadata display, search functionality, and batch conversion capabilities. The changes are well-tested with 141 passing tests and 21 snapshot tests, demonstrating thorough quality assurance.

Key Changes

• Added 10 major UX features: ANSI sanitization, syntax highlighting, collapsible cells, copy buttons, tool pairing, view toggles, metadata, search, batch conversion
• Comprehensive test coverage with new test classes and snapshot tests
• Template refactoring using Jinja2 base template inheritance
• New dependencies: pygments, questionary, click-default-group, httpx, jinja2

Reviewed changes

Copilot reviewed 36 out of 39 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/test_generate_html.py	Added 1000+ lines of comprehensive tests for all new features
tests/test_all.py	New 532-line test file for batch conversion functionality
tests/conftest.py	New fixture file with webbrowser mocking
tests/sample_session.jsonl	New JSONL format test fixture
tests/snapshots/*	Updated/new snapshot files for HTML output verification
src/claude_code_transcripts/templates/*	New Jinja2 templates for modular HTML generation
pyproject.toml	Updated dependencies and project metadata
CLAUDE.md	New file referencing AGENTS.md
.gitignore	Added uv.lock and .playwright-mcp/

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Module 'claude_code_transcripts' is imported with both 'import' and 'import from'.

[Copilot]

'except' clause does nothing but pass and there is no explanatory comment.

Suggested change

	except Exception:
	except Exception:
	# Best-effort summary extraction: on any unexpected error, fall back to the
	# default "(no summary)" value returned below.

[Copilot]

Pull request overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The per-<pre> copy button logic appends a <button> inside the element, but then copies el.textContent and tries to remove the label with replace(/^Copy$/, ''). That regex only matches when the entire text is exactly "Copy", so the copied text will typically include the trailing "Copy"/"Copied!" label. Consider extracting text from the pre/code node excluding the button (e.g., clone and remove the button, or read from a dedicated child node).

Suggested change

	const textToCopy = el.textContent.replace(/^Copy$/, '').trim();
	const clone = el.cloneNode(true);
	clone.querySelectorAll('.copy-btn').forEach(function(btn) { btn.remove(); });
	const textToCopy = clone.textContent.trim();

[Copilot]

Several view-toggle tablists (e.g. Todo/Write/Edit/Bash) use role="tablist"/role="tab" but the initial markup doesn’t set aria-selected on tabs (unlike tool_use/tool_result, which do). This makes the initial state ambiguous for assistive tech until a click occurs. Please add consistent aria-selected values for the default active/inactive tabs (and keep JS updates aligned).

Suggested change

	<button class="view-toggle-tab active" role="tab" data-view="markdown">Markdown</button>
	<button class="view-toggle-tab" role="tab" data-view="json">JSON</button>
	<button class="view-toggle-tab active" role="tab" data-view="markdown" aria-selected="true">Markdown</button>
	<button class="view-toggle-tab" role="tab" data-view="json" aria-selected="false">JSON</button>

[Copilot]

cell() stores full cell text in a data-copy-content attribute. For large tool calls/results or long messages this duplicates content that’s already in the DOM, significantly increasing HTML size and memory usage. Consider omitting data-copy-content for large payloads (fallback to DOM extraction), or storing the raw text in a single hidden element referenced by id instead of duplicating it in attributes.

Suggested change

	<button class="cell-copy-btn" aria-label="Copy {{ label }}" tabindex="0"{% if raw_content %} data-copy-content="{{ raw_content | e }}"{% endif %}>Copy</button>
	<button class="cell-copy-btn" aria-label="Copy {{ label }}" tabindex="0"{% if raw_content and raw_content|length <= 2000 %} data-copy-content="{{ raw_content | e }}"{% endif %}>Copy</button>

[Copilot]

render_json_with_markdown() renders string values through markdown.markdown() and returns the resulting HTML marked safe in templates. Python-Markdown allows raw HTML by default, so untrusted transcript/tool input can inject arbitrary HTML/JS (XSS) via tool inputs/descriptions. Please sanitize/escape Markdown output (e.g., disable raw HTML or run the output through an allowlist sanitizer) before returning it.

[Copilot]

render_json_with_markdown() wraps Markdown-rendered values in a <span>, but multi-paragraph/complex Markdown will generate block elements like <p>, <ul>, etc., which is invalid inside a span and can break layout/DOM structure. Consider using a block container (e.g., a <div> for markdown output) or ensuring the Markdown renderer returns inline-only markup for these JSON string values.