From bcf8af26476273bed964c34752c36d55b34e509a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 29 Dec 2025 16:13:06 +0000
Subject: [PATCH 1/4] Add copy buttons to all message boxes and index items

Add a <copy-button> WebComponent that copies content to clipboard:
- Uses data-content attribute for markdown content (stored at render time)
- Uses data-content-from attribute with CSS selector for JSON/text content
- Button shows "Copied!" for 2 seconds after successful copy
- Different button labels: "Copy Markdown", "Copy JSON", "Copy text"

Copy buttons added to:
- Messages in page-X.html (left of timestamp)
- Index items in index.html (left of timestamp)
- Index commits in index.html (left of timestamp)
- Search results in search modal

Includes CSS styling, WebComponent JavaScript, and test coverage.
---
 src/claude_code_transcripts/__init__.py       | 105 +++++++++++++++-
 .../templates/macros.html                     |  12 +-
 .../templates/search.js                       |   7 +-
 ...enerateHtml.test_generates_index_html.html |  67 ++++++++--
 ...rateHtml.test_generates_page_001_html.html | 114 +++++++++++++-----
 ...rateHtml.test_generates_page_002_html.html |  54 ++++++++-
 ...SessionFile.test_jsonl_generates_html.html |  59 ++++++++-
 tests/test_generate_html.py                   |  57 +++++++++
 8 files changed, 412 insertions(+), 63 deletions(-)

diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index 6318120..af2247c 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -852,6 +852,37 @@ def is_tool_result_message(message_data):
     )
 
 
+def extract_markdown_content(message_data, log_type):
+    """Extract markdown/text content from a message for copying."""
+    content = message_data.get("content", "")
+    if log_type == "user":
+        if isinstance(content, str):
+            if not is_json_like(content):
+                return content, "Copy Markdown", None
+            return None, "Copy JSON", ".message-content pre"
+        elif isinstance(content, list):
+            # Check for tool results (use selector) or text (use content)
+            for block in content:
+                if isinstance(block, dict):
+                    if block.get("type") == "tool_result":
+                        return None, "Copy text", ".message-content"
+                    if block.get("type") == "text":
+                        text = block.get("text", "")
+                        if text and not is_json_like(text):
+                            return text, "Copy Markdown", None
+            return None, "Copy text", ".message-content"
+    elif log_type == "assistant":
+        # For assistant messages, extract text blocks
+        if isinstance(content, list):
+            texts = []
+            for block in content:
+                if isinstance(block, dict) and block.get("type") == "text":
+                    texts.append(block.get("text", ""))
+            if texts:
+                return "\n\n".join(texts), "Copy Markdown", None
+    return None, "Copy text", ".message-content"
+
+
 def render_message(log_type, message_json, timestamp):
     if not message_json:
         return ""
@@ -874,7 +905,19 @@ def render_message(log_type, message_json, timestamp):
     if not content_html.strip():
         return ""
     msg_id = make_msg_id(timestamp)
-    return _macros.message(role_class, role_label, msg_id, timestamp, content_html)
+    copy_content, copy_label, copy_from = extract_markdown_content(
+        message_data, log_type
+    )
+    return _macros.message(
+        role_class,
+        role_label,
+        msg_id,
+        timestamp,
+        content_html,
+        copy_label=copy_label,
+        copy_content=copy_content,
+        copy_from=copy_from,
+    )
 
 
 CSS = """
@@ -893,6 +936,7 @@ def render_message(log_type, message_json, timestamp):
 .tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
 .tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
 .message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .user .role-label { color: var(--user-border); }
 time { color: var(--text-muted); font-size: 0.8rem; }
@@ -977,6 +1021,7 @@ def render_message(log_type, message_json, timestamp):
 .index-item a { display: block; text-decoration: none; color: inherit; }
 .index-item a:hover { background: rgba(25, 118, 210, 0.1); }
 .index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
 .index-item-number { font-weight: 600; color: var(--user-border); }
 .index-item-content { padding: 16px; }
 .index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
@@ -1010,13 +1055,55 @@ def render_message(log_type, message_json, timestamp):
 .search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 .search-result a { display: block; text-decoration: none; color: inherit; }
 .search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-page { padding: 6px 12px; background: rgba(0,0,0,0.03); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
 .search-result-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
 @media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
 """
 
 JS = """
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
 document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
     const timestamp = el.getAttribute('data-timestamp');
     const date = new Date(timestamp);
@@ -1293,7 +1380,12 @@ def generate_html(json_path, output_dir, github_repo=None):
         stats_html = _macros.index_stats(tool_stats_str, long_texts_html)
 
         item_html = _macros.index_item(
-            prompt_num, link, conv["timestamp"], rendered_content, stats_html
+            prompt_num,
+            link,
+            conv["timestamp"],
+            rendered_content,
+            stats_html,
+            copy_content=conv["user_text"],
         )
         timeline_items.append((conv["timestamp"], "prompt", item_html))
 
@@ -1708,7 +1800,12 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
         stats_html = _macros.index_stats(tool_stats_str, long_texts_html)
 
         item_html = _macros.index_item(
-            prompt_num, link, conv["timestamp"], rendered_content, stats_html
+            prompt_num,
+            link,
+            conv["timestamp"],
+            rendered_content,
+            stats_html,
+            copy_content=conv["user_text"],
         )
         timeline_items.append((conv["timestamp"], "prompt", item_html))
 
diff --git a/src/claude_code_transcripts/templates/macros.html b/src/claude_code_transcripts/templates/macros.html
index 66866e5..c3289fe 100644
--- a/src/claude_code_transcripts/templates/macros.html
+++ b/src/claude_code_transcripts/templates/macros.html
@@ -147,8 +147,8 @@
 {%- endmacro %}
 
 {# Message wrapper - content_html is pre-rendered so needs |safe #}
-{% macro message(role_class, role_label, msg_id, timestamp, content_html) %}
-<div class="message {{ role_class }}" id="{{ msg_id }}"><div class="message-header"><span class="role-label">{{ role_label }}</span><a href="#{{ msg_id }}" class="timestamp-link"><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></a></div><div class="message-content">{{ content_html|safe }}</div></div>
+{% macro message(role_class, role_label, msg_id, timestamp, content_html, copy_label='Copy Markdown', copy_content=None, copy_from=None) %}
+<div class="message {{ role_class }}" id="{{ msg_id }}"><div class="message-header"><span class="role-label">{{ role_label }}</span><span class="header-actions">{% if copy_content %}<copy-button label="{{ copy_label }}" data-content="{{ copy_content|e }}"></copy-button>{% elif copy_from %}<copy-button label="{{ copy_label }}" data-content-from="{{ copy_from }}"></copy-button>{% endif %}<a href="#{{ msg_id }}" class="timestamp-link"><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></a></span></div><div class="message-content">{{ content_html|safe }}</div></div>
 {%- endmacro %}
 
 {# Continuation wrapper - content_html is pre-rendered so needs |safe #}
@@ -157,17 +157,17 @@
 {%- endmacro %}
 
 {# Index item (prompt) - rendered_content and stats_html are pre-rendered so need |safe #}
-{% macro index_item(prompt_num, link, timestamp, rendered_content, stats_html) %}
-<div class="index-item"><a href="{{ link }}"><div class="index-item-header"><span class="index-item-number">#{{ prompt_num }}</span><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></div><div class="index-item-content">{{ rendered_content|safe }}</div></a>{{ stats_html|safe }}</div>
+{% macro index_item(prompt_num, link, timestamp, rendered_content, stats_html, copy_content=None) %}
+<div class="index-item"><a href="{{ link }}"><div class="index-item-header"><span class="index-item-number">#{{ prompt_num }}</span><span class="header-actions">{% if copy_content %}<copy-button label="Copy Markdown" data-content="{{ copy_content|e }}"></copy-button>{% endif %}<time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></span></div><div class="index-item-content">{{ rendered_content|safe }}</div></a>{{ stats_html|safe }}</div>
 {%- endmacro %}
 
 {# Index commit #}
 {% macro index_commit(commit_hash, commit_msg, timestamp, github_repo) %}
 {%- if github_repo -%}
 {%- set github_link = 'https://github.com/' ~ github_repo ~ '/commit/' ~ commit_hash -%}
-<div class="index-commit"><a href="{{ github_link }}"><div class="index-commit-header"><span class="index-commit-hash">{{ commit_hash[:7] }}</span><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></div><div class="index-commit-msg">{{ commit_msg }}</div></a></div>
+<div class="index-commit"><a href="{{ github_link }}"><div class="index-commit-header"><span class="index-commit-hash">{{ commit_hash[:7] }}</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".index-commit-msg"></copy-button><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></span></div><div class="index-commit-msg">{{ commit_msg }}</div></a></div>
 {%- else -%}
-<div class="index-commit"><div class="index-commit-header"><span class="index-commit-hash">{{ commit_hash[:7] }}</span><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></div><div class="index-commit-msg">{{ commit_msg }}</div></div>
+<div class="index-commit"><div class="index-commit-header"><span class="index-commit-hash">{{ commit_hash[:7] }}</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".index-commit-msg"></copy-button><time datetime="{{ timestamp }}" data-timestamp="{{ timestamp }}">{{ timestamp }}</time></span></div><div class="index-commit-msg">{{ commit_msg }}</div></div>
 {%- endif %}
 {%- endmacro %}
 
diff --git a/src/claude_code_transcripts/templates/search.js b/src/claude_code_transcripts/templates/search.js
index 48a6e1d..eedc83e 100644
--- a/src/claude_code_transcripts/templates/search.js
+++ b/src/claude_code_transcripts/templates/search.js
@@ -163,8 +163,11 @@
 
                 var resultDiv = document.createElement('div');
                 resultDiv.className = 'search-result';
-                resultDiv.innerHTML = '<a href="' + link + '">' +
-                    '<div class="search-result-page">' + escapeHtml(pageFile) + '</div>' +
+                resultDiv.innerHTML = '<div class="search-result-header">' +
+                    '<copy-button label="Copy text" data-content-from=".search-result-content"></copy-button>' +
+                    '<a href="' + link + '" class="search-result-page">' + escapeHtml(pageFile) + '</a>' +
+                    '</div>' +
+                    '<a href="' + link + '">' +
                     '<div class="search-result-content">' + clone.innerHTML + '</div>' +
                     '</a>';
                 searchResults.appendChild(resultDiv);
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index c2b6116..af14ae7 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -20,6 +20,7 @@
 .tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
 .tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
 .message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .user .role-label { color: var(--user-border); }
 time { color: var(--text-muted); font-size: 0.8rem; }
@@ -104,6 +105,7 @@
 .index-item a { display: block; text-decoration: none; color: inherit; }
 .index-item a:hover { background: rgba(25, 118, 210, 0.1); }
 .index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
 .index-item-number { font-weight: 600; color: var(--user-border); }
 .index-item-content { padding: 16px; }
 .index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
@@ -137,9 +139,15 @@
 .search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 .search-result a { display: block; text-decoration: none; color: inherit; }
 .search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-page { padding: 6px 12px; background: rgba(0,0,0,0.03); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
 .search-result-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
 @media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
 </style>
 </head>
@@ -166,15 +174,15 @@ <h1>Claude Code transcript</h1>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
         
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-00-00-000Z"><div class="index-item-header"><span class="index-item-number">#1</span><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></div><div class="index-item-content"><p>Create a simple Python function to add two numbers</p></div></a><div class="index-item-stats"><span>3 bash · 1 write · 1 todo</span>
-</div></div><div class="index-commit"><a href="https://github.com/example/project/commit/abc1234"><div class="index-commit-header"><span class="index-commit-hash">abc1234</span><time datetime="2025-12-24T10:00:40.000Z" data-timestamp="2025-12-24T10:00:40.000Z">2025-12-24T10:00:40.000Z</time></div><div class="index-commit-msg">Add math_utils with add function</div></a></div>
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-01-00-000Z"><div class="index-item-header"><span class="index-item-number">#2</span><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></div><div class="index-item-content"><p>Now edit the file to add a subtract function</p></div></a><div class="index-item-stats"><span>1 glob · 1 edit · 1 grep</span>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-00-00-000Z"><div class="index-item-header"><span class="index-item-number">#1</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Create a simple Python function to add two numbers"></copy-button><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></span></div><div class="index-item-content"><p>Create a simple Python function to add two numbers</p></div></a><div class="index-item-stats"><span>3 bash · 1 write · 1 todo</span>
+</div></div><div class="index-commit"><a href="https://github.com/example/project/commit/abc1234"><div class="index-commit-header"><span class="index-commit-hash">abc1234</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".index-commit-msg"></copy-button><time datetime="2025-12-24T10:00:40.000Z" data-timestamp="2025-12-24T10:00:40.000Z">2025-12-24T10:00:40.000Z</time></span></div><div class="index-commit-msg">Add math_utils with add function</div></a></div>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-01-00-000Z"><div class="index-item-header"><span class="index-item-number">#2</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Now edit the file to add a subtract function"></copy-button><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></span></div><div class="index-item-content"><p>Now edit the file to add a subtract function</p></div></a><div class="index-item-stats"><span>1 glob · 1 edit · 1 grep</span>
 </div></div>
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-02-00-000Z"><div class="index-item-header"><span class="index-item-number">#3</span><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></div><div class="index-item-content"><p>Run the tests again</p></div></a><div class="index-item-stats"><span>1 bash</span>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-02-00-000Z"><div class="index-item-header"><span class="index-item-number">#3</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Run the tests again"></copy-button><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></span></div><div class="index-item-content"><p>Run the tests again</p></div></a><div class="index-item-stats"><span>1 bash</span>
 </div></div>
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-03-00-000Z"><div class="index-item-header"><span class="index-item-number">#4</span><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></div><div class="index-item-content"><p>Fix the issue and commit</p></div></a><div class="index-item-stats"><span>1 edit · 1 bash</span>
-</div></div><div class="index-commit"><a href="https://github.com/example/project/commit/def5678"><div class="index-commit-header"><span class="index-commit-hash">def5678</span><time datetime="2025-12-24T10:03:20.000Z" data-timestamp="2025-12-24T10:03:20.000Z">2025-12-24T10:03:20.000Z</time></div><div class="index-commit-msg">Add subtract function and fix tests</div></a></div>
-<div class="index-item"><a href="page-002.html#msg-2025-12-24T10-05-00-000Z"><div class="index-item-header"><span class="index-item-number">#5</span><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></div><div class="index-item-content"><p>Add a multiply function too</p></div></a><div class="index-item-stats"><span>1 edit</span>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-03-00-000Z"><div class="index-item-header"><span class="index-item-number">#4</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Fix the issue and commit"></copy-button><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></span></div><div class="index-item-content"><p>Fix the issue and commit</p></div></a><div class="index-item-stats"><span>1 edit · 1 bash</span>
+</div></div><div class="index-commit"><a href="https://github.com/example/project/commit/def5678"><div class="index-commit-header"><span class="index-commit-hash">def5678</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".index-commit-msg"></copy-button><time datetime="2025-12-24T10:03:20.000Z" data-timestamp="2025-12-24T10:03:20.000Z">2025-12-24T10:03:20.000Z</time></span></div><div class="index-commit-msg">Add subtract function and fix tests</div></a></div>
+<div class="index-item"><a href="page-002.html#msg-2025-12-24T10-05-00-000Z"><div class="index-item-header"><span class="index-item-number">#5</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Add a multiply function too"></copy-button><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></span></div><div class="index-item-content"><p>Add a multiply function too</p></div></a><div class="index-item-stats"><span>1 edit</span>
 </div></div>
         
 
@@ -366,8 +374,11 @@ <h1>Claude Code transcript</h1>
 
                 var resultDiv = document.createElement('div');
                 resultDiv.className = 'search-result';
-                resultDiv.innerHTML = '<a href="' + link + '">' +
-                    '<div class="search-result-page">' + escapeHtml(pageFile) + '</div>' +
+                resultDiv.innerHTML = '<div class="search-result-header">' +
+                    '<copy-button label="Copy text" data-content-from=".search-result-content"></copy-button>' +
+                    '<a href="' + link + '" class="search-result-page">' + escapeHtml(pageFile) + '</a>' +
+                    '</div>' +
+                    '<a href="' + link + '">' +
                     '<div class="search-result-content">' + clone.innerHTML + '</div>' +
                     '</a>';
                 searchResults.appendChild(resultDiv);
@@ -481,6 +492,42 @@ <h1>Claude Code transcript</h1>
         </script>
     </div>
     <script>
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
 document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
     const timestamp = el.getAttribute('data-timestamp');
     const date = new Date(timestamp);
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index cdc794b..06edd6b 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -20,6 +20,7 @@
 .tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
 .tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
 .message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .user .role-label { color: var(--user-border); }
 time { color: var(--text-muted); font-size: 0.8rem; }
@@ -104,6 +105,7 @@
 .index-item a { display: block; text-decoration: none; color: inherit; }
 .index-item a:hover { background: rgba(25, 118, 210, 0.1); }
 .index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
 .index-item-number { font-weight: 600; color: var(--user-border); }
 .index-item-content { padding: 16px; }
 .index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
@@ -137,9 +139,15 @@
 .search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 .search-result a { display: block; text-decoration: none; color: inherit; }
 .search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-page { padding: 6px 12px; background: rgba(0,0,0,0.03); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
 .search-result-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
 @media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
 </style>
 </head>
@@ -157,9 +165,9 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </div>
 
         
-<div class="message user" id="msg-2025-12-24T10-00-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-00-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-00-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Create a simple Python function to add two numbers"></copy-button><a href="#msg-2025-12-24T10-00-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>Create a simple Python function to add two numbers</p></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-00-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:05.000Z" data-timestamp="2025-12-24T10:00:05.000Z">2025-12-24T10:00:05.000Z</time></a></div><div class="message-content">
+<div class="message assistant" id="msg-2025-12-24T10-00-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="I&#39;ll create a simple Python function for you. Let me write it now."></copy-button><a href="#msg-2025-12-24T10-00-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:05.000Z" data-timestamp="2025-12-24T10:00:05.000Z">2025-12-24T10:00:05.000Z</time></a></span></div><div class="message-content">
 <div class="thinking"><div class="thinking-label">Thinking</div><p>The user wants a simple addition function. I should:
 1. Create the function
 2. Add a basic test</p>
@@ -172,51 +180,51 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
     return a + b
 </pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-00-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-00-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:10.000Z" data-timestamp="2025-12-24T10:00:10.000Z">2025-12-24T10:00:10.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File written successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-00-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:15.000Z" data-timestamp="2025-12-24T10:00:15.000Z">2025-12-24T10:00:15.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-00-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:10.000Z" data-timestamp="2025-12-24T10:00:10.000Z">2025-12-24T10:00:10.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File written successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-00-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="I&#39;ve created the `add` function. Now let me run the tests."></copy-button><a href="#msg-2025-12-24T10-00-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:15.000Z" data-timestamp="2025-12-24T10:00:15.000Z">2025-12-24T10:00:15.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>I've created the <code>add</code> function. Now let me run the tests.</p></div>
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_001">
 <div class="tool-header"><span class="tool-icon">$</span> Bash</div>
 <div class="tool-description">Run pytest on tests directory</div><div class="truncatable"><div class="truncatable-content"><pre class="bash-command">python -m pytest tests/</pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-00-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-00-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:20.000Z" data-timestamp="2025-12-24T10:00:20.000Z">2025-12-24T10:00:20.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>===== test session starts =====
+<div class="message tool-reply" id="msg-2025-12-24T10-00-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:20.000Z" data-timestamp="2025-12-24T10:00:20.000Z">2025-12-24T10:00:20.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>===== test session starts =====
 collected 2 items
 
 tests/test_math.py ..  [100%]
 
 ===== 2 passed in 0.05s =====</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-00-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:25.000Z" data-timestamp="2025-12-24T10:00:25.000Z">2025-12-24T10:00:25.000Z</time></a></div><div class="message-content">
+<div class="message assistant" id="msg-2025-12-24T10-00-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="All tests pass. Let me update the todo list and make a commit."></copy-button><a href="#msg-2025-12-24T10-00-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:25.000Z" data-timestamp="2025-12-24T10:00:25.000Z">2025-12-24T10:00:25.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>All tests pass. Let me update the todo list and make a commit.</p></div>
 <div class="todo-list" data-tool-id="toolu_todo_001"><div class="todo-header"><span class="todo-header-icon">☰</span> Task List</div><ul class="todo-items"><li class="todo-item todo-completed"><span class="todo-icon">✓</span><span class="todo-content">Create add function</span></li><li class="todo-item todo-completed"><span class="todo-icon">✓</span><span class="todo-content">Write tests</span></li><li class="todo-item todo-completed"><span class="todo-icon">✓</span><span class="todo-content">Run tests</span></li><li class="todo-item todo-in-progress"><span class="todo-icon">→</span><span class="todo-content">Commit changes</span></li><li class="todo-item todo-pending"><span class="todo-icon">○</span><span class="todo-content">Push to remote</span></li></ul></div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-00-30-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-00-30-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:30.000Z" data-timestamp="2025-12-24T10:00:30.000Z">2025-12-24T10:00:30.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>Todos updated</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-00-35-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-35-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:35.000Z" data-timestamp="2025-12-24T10:00:35.000Z">2025-12-24T10:00:35.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-00-30-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-30-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:30.000Z" data-timestamp="2025-12-24T10:00:30.000Z">2025-12-24T10:00:30.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>Todos updated</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-00-35-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-35-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:35.000Z" data-timestamp="2025-12-24T10:00:35.000Z">2025-12-24T10:00:35.000Z</time></a></span></div><div class="message-content">
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_002">
 <div class="tool-header"><span class="tool-icon">$</span> Bash</div>
 <div class="tool-description">Commit changes</div><div class="truncatable"><div class="truncatable-content"><pre class="bash-command">git add . &amp;&amp; git commit -m &#39;Add math_utils with add function&#39;</pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-00-40-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-00-40-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:40.000Z" data-timestamp="2025-12-24T10:00:40.000Z">2025-12-24T10:00:40.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><div class="commit-card"><a href="https://github.com/example/project/commit/abc1234"><span class="commit-card-hash">abc1234</span> Add math_utils with add function</a></div><pre>1 file changed, 5 insertions(+)</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-00-45-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-45-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:45.000Z" data-timestamp="2025-12-24T10:00:45.000Z">2025-12-24T10:00:45.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-00-40-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-40-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:40.000Z" data-timestamp="2025-12-24T10:00:40.000Z">2025-12-24T10:00:40.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><div class="commit-card"><a href="https://github.com/example/project/commit/abc1234"><span class="commit-card-hash">abc1234</span> Add math_utils with add function</a></div><pre>1 file changed, 5 insertions(+)</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-00-45-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Committed! Now pushing to remote."></copy-button><a href="#msg-2025-12-24T10-00-45-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:45.000Z" data-timestamp="2025-12-24T10:00:45.000Z">2025-12-24T10:00:45.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>Committed! Now pushing to remote.</p></div>
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_003">
 <div class="tool-header"><span class="tool-icon">$</span> Bash</div>
 <div class="tool-description">Push to remote</div><div class="truncatable"><div class="truncatable-content"><pre class="bash-command">git push -u origin main</pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-00-50-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-00-50-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:50.000Z" data-timestamp="2025-12-24T10:00:50.000Z">2025-12-24T10:00:50.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>remote: 
+<div class="message tool-reply" id="msg-2025-12-24T10-00-50-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-00-50-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:50.000Z" data-timestamp="2025-12-24T10:00:50.000Z">2025-12-24T10:00:50.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>remote: 
 remote: Create a pull request for &#x27;main&#x27; on GitHub by visiting:
 remote:      https://github.com/example/project/pull/new/main
 remote: 
 To github.com:example/project.git
    def5678..abc1234  main -&gt; main</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-01-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-01-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-01-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Now edit the file to add a subtract function"></copy-button><a href="#msg-2025-12-24T10-01-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>Now edit the file to add a subtract function</p></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-01-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-01-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:05.000Z" data-timestamp="2025-12-24T10:01:05.000Z">2025-12-24T10:01:05.000Z</time></a></div><div class="message-content">
+<div class="message assistant" id="msg-2025-12-24T10-01-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-01-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:05.000Z" data-timestamp="2025-12-24T10:01:05.000Z">2025-12-24T10:01:05.000Z</time></a></span></div><div class="message-content">
 <div class="tool-use" data-tool-id="toolu_glob_001"><div class="tool-header"><span class="tool-icon">⚙</span> Glob</div><div class="truncatable"><div class="truncatable-content"><pre class="json">{
   &#34;pattern&#34;: &#34;**/*.py&#34;,
   &#34;path&#34;: &#34;/project&#34;
 }</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-01-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-01-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:10.000Z" data-timestamp="2025-12-24T10:01:10.000Z">2025-12-24T10:01:10.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>/project/math_utils.py
+<div class="message tool-reply" id="msg-2025-12-24T10-01-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-01-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:10.000Z" data-timestamp="2025-12-24T10:01:10.000Z">2025-12-24T10:01:10.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>/project/math_utils.py
 /project/tests/test_math.py</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-01-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-01-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:15.000Z" data-timestamp="2025-12-24T10:01:15.000Z">2025-12-24T10:01:15.000Z</time></a></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_001">
+<div class="message assistant" id="msg-2025-12-24T10-01-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-01-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:15.000Z" data-timestamp="2025-12-24T10:01:15.000Z">2025-12-24T10:01:15.000Z</time></a></span></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_001">
 <div class="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">math_utils.py</span></div>
 <div class="file-tool-fullpath">/project/math_utils.py</div>
 <div class="truncatable"><div class="truncatable-content">
@@ -231,26 +239,36 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </pre></div>
 </div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-01-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-01-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:20.000Z" data-timestamp="2025-12-24T10:01:20.000Z">2025-12-24T10:01:20.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-01-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-01-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:25.000Z" data-timestamp="2025-12-24T10:01:25.000Z">2025-12-24T10:01:25.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-01-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-01-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:20.000Z" data-timestamp="2025-12-24T10:01:20.000Z">2025-12-24T10:01:20.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-01-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Added the subtract function. Let me verify with grep."></copy-button><a href="#msg-2025-12-24T10-01-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:25.000Z" data-timestamp="2025-12-24T10:01:25.000Z">2025-12-24T10:01:25.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>Added the subtract function. Let me verify with grep.</p></div>
 <div class="tool-use" data-tool-id="toolu_grep_001"><div class="tool-header"><span class="tool-icon">⚙</span> Grep</div><div class="truncatable"><div class="truncatable-content"><pre class="json">{
   &#34;pattern&#34;: &#34;def subtract&#34;,
   &#34;path&#34;: &#34;/project&#34;,
   &#34;output_mode&#34;: &#34;content&#34;
 }</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-01-30-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-01-30-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:30.000Z" data-timestamp="2025-12-24T10:01:30.000Z">2025-12-24T10:01:30.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>/project/math_utils.py:6:def subtract(a: int, b: int) -&gt; int:</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-02-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-02-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-01-30-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-01-30-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:30.000Z" data-timestamp="2025-12-24T10:01:30.000Z">2025-12-24T10:01:30.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>/project/math_utils.py:6:def subtract(a: int, b: int) -&gt; int:</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message user" id="msg-2025-12-24T10-02-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Run the tests again"></copy-button><a href="#msg-2025-12-24T10-02-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>Run the tests again</p></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-02-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-02-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:05.000Z" data-timestamp="2025-12-24T10:02:05.000Z">2025-12-24T10:02:05.000Z</time></a></div><div class="message-content">
+<div class="message assistant" id="msg-2025-12-24T10-02-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-02-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:05.000Z" data-timestamp="2025-12-24T10:02:05.000Z">2025-12-24T10:02:05.000Z</time></a></span></div><div class="message-content">
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_004">
 <div class="tool-header"><span class="tool-icon">$</span> Bash</div>
 <div class="tool-description">Run tests with verbose output</div><div class="truncatable"><div class="truncatable-content"><pre class="bash-command">python -m pytest tests/ -v</pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-02-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-02-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:10.000Z" data-timestamp="2025-12-24T10:02:10.000Z">2025-12-24T10:02:10.000Z</time></a></div><div class="message-content"><div class="tool-result tool-error"><div class="truncatable"><div class="truncatable-content"><pre>Exit code 1
+<div class="message tool-reply" id="msg-2025-12-24T10-02-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-02-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:10.000Z" data-timestamp="2025-12-24T10:02:10.000Z">2025-12-24T10:02:10.000Z</time></a></span></div><div class="message-content"><div class="tool-result tool-error"><div class="truncatable"><div class="truncatable-content"><pre>Exit code 1
 ===== FAILURES =====
 test_subtract - AssertionError: expected 5 but got None</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-02-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-02-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:15.000Z" data-timestamp="2025-12-24T10:02:15.000Z">2025-12-24T10:02:15.000Z</time></a></div><div class="message-content">
+<div class="message assistant" id="msg-2025-12-24T10-02-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="There&#39;s a test failure. I need to check the test file and fix it.
+
+Here&#39;s some **markdown** content with:
+- A bullet list
+- `inline code`
+- A [link](https://example.com)
+
+```python
+def example():
+    return 42
+```"></copy-button><a href="#msg-2025-12-24T10-02-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:15.000Z" data-timestamp="2025-12-24T10:02:15.000Z">2025-12-24T10:02:15.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>There's a test failure. I need to check the test file and fix it.</p>
 <p>Here's some <strong>markdown</strong> content with:
 - A bullet list
@@ -259,9 +277,9 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <pre><code class="language-python">def example():
     return 42
 </code></pre></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-03-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-03-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-03-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Fix the issue and commit"></copy-button><a href="#msg-2025-12-24T10-03-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>Fix the issue and commit</p></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-03-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-03-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:05.000Z" data-timestamp="2025-12-24T10:03:05.000Z">2025-12-24T10:03:05.000Z</time></a></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_002">
+<div class="message assistant" id="msg-2025-12-24T10-03-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-03-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:05.000Z" data-timestamp="2025-12-24T10:03:05.000Z">2025-12-24T10:03:05.000Z</time></a></span></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_002">
 <div class="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">test_math.py</span> <span class="edit-replace-all">(replace all)</span></div>
 <div class="file-tool-fullpath">/project/tests/test_math.py</div>
 <div class="truncatable"><div class="truncatable-content">
@@ -269,16 +287,16 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <div class="edit-section edit-new"><div class="edit-label">+</div><pre class="edit-content">assert subtract(10, 5) == 5</pre></div>
 </div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-03-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-03-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:10.000Z" data-timestamp="2025-12-24T10:03:10.000Z">2025-12-24T10:03:10.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-03-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-03-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:15.000Z" data-timestamp="2025-12-24T10:03:15.000Z">2025-12-24T10:03:15.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-03-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-03-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:10.000Z" data-timestamp="2025-12-24T10:03:10.000Z">2025-12-24T10:03:10.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-03-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-03-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:15.000Z" data-timestamp="2025-12-24T10:03:15.000Z">2025-12-24T10:03:15.000Z</time></a></span></div><div class="message-content">
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_005">
 <div class="tool-header"><span class="tool-icon">$</span> Bash</div>
 <div class="tool-description">Commit the fix</div><div class="truncatable"><div class="truncatable-content"><pre class="bash-command">git add . &amp;&amp; git commit -m &#39;Add subtract function and fix tests&#39;</pre></div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-03-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-03-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:20.000Z" data-timestamp="2025-12-24T10:03:20.000Z">2025-12-24T10:03:20.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><div class="commit-card"><a href="https://github.com/example/project/commit/def5678"><span class="commit-card-hash">def5678</span> Add subtract function and fix tests</a></div><pre>2 files changed, 10 insertions(+), 1 deletion(-)</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-03-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-03-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:25.000Z" data-timestamp="2025-12-24T10:03:25.000Z">2025-12-24T10:03:25.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-03-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-03-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:20.000Z" data-timestamp="2025-12-24T10:03:20.000Z">2025-12-24T10:03:20.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><div class="commit-card"><a href="https://github.com/example/project/commit/def5678"><span class="commit-card-hash">def5678</span> Add subtract function and fix tests</a></div><pre>2 files changed, 10 insertions(+), 1 deletion(-)</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-03-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Done! The subtract function is now working and committed."></copy-button><a href="#msg-2025-12-24T10-03-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:25.000Z" data-timestamp="2025-12-24T10:03:25.000Z">2025-12-24T10:03:25.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>Done! The subtract function is now working and committed.</p></div></div></div><details class="continuation"><summary>Session continuation summary</summary>
-<div class="message user" id="msg-2025-12-24T10-04-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-04-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:04:00.000Z" data-timestamp="2025-12-24T10:04:00.000Z">2025-12-24T10:04:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-04-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="This is a session continuation summary from a previous context. The user was working on a math utilities library."></copy-button><a href="#msg-2025-12-24T10-04-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:04:00.000Z" data-timestamp="2025-12-24T10:04:00.000Z">2025-12-24T10:04:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>This is a session continuation summary from a previous context. The user was working on a math utilities library.</p></div></div></div></details>
         
 
@@ -292,6 +310,42 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
     </div>
     <script>
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
 document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
     const timestamp = el.getAttribute('data-timestamp');
     const date = new Date(timestamp);
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index 2d46a78..4ac7ca8 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -20,6 +20,7 @@
 .tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
 .tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
 .message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .user .role-label { color: var(--user-border); }
 time { color: var(--text-muted); font-size: 0.8rem; }
@@ -104,6 +105,7 @@
 .index-item a { display: block; text-decoration: none; color: inherit; }
 .index-item a:hover { background: rgba(25, 118, 210, 0.1); }
 .index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
 .index-item-number { font-weight: 600; color: var(--user-border); }
 .index-item-content { padding: 16px; }
 .index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
@@ -137,9 +139,15 @@
 .search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 .search-result a { display: block; text-decoration: none; color: inherit; }
 .search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-page { padding: 6px 12px; background: rgba(0,0,0,0.03); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
 .search-result-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
 @media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
 </style>
 </head>
@@ -157,9 +165,9 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </div>
 
         
-<div class="message user" id="msg-2025-12-24T10-05-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-05-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-05-00-000Z"><div class="message-header"><span class="role-label">User</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Add a multiply function too"></copy-button><a href="#msg-2025-12-24T10-05-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></a></span></div><div class="message-content">
 <div class="user-content"><p>Add a multiply function too</p></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-05-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-05-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:05.000Z" data-timestamp="2025-12-24T10:05:05.000Z">2025-12-24T10:05:05.000Z</time></a></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_003">
+<div class="message assistant" id="msg-2025-12-24T10-05-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-05-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:05.000Z" data-timestamp="2025-12-24T10:05:05.000Z">2025-12-24T10:05:05.000Z</time></a></span></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_003">
 <div class="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">math_utils.py</span></div>
 <div class="file-tool-fullpath">/project/math_utils.py</div>
 <div class="truncatable"><div class="truncatable-content">
@@ -174,8 +182,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </pre></div>
 </div><button class="expand-btn">Show more</button></div>
 </div></div></div>
-<div class="message tool-reply" id="msg-2025-12-24T10-05-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-05-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:10.000Z" data-timestamp="2025-12-24T10:05:10.000Z">2025-12-24T10:05:10.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message assistant" id="msg-2025-12-24T10-05-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-05-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:15.000Z" data-timestamp="2025-12-24T10:05:15.000Z">2025-12-24T10:05:15.000Z</time></a></div><div class="message-content">
+<div class="message tool-reply" id="msg-2025-12-24T10-05-10-000Z"><div class="message-header"><span class="role-label">Tool reply</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".message-content"></copy-button><a href="#msg-2025-12-24T10-05-10-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:10.000Z" data-timestamp="2025-12-24T10:05:10.000Z">2025-12-24T10:05:10.000Z</time></a></span></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>File edited successfully</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
+<div class="message assistant" id="msg-2025-12-24T10-05-15-000Z"><div class="message-header"><span class="role-label">Assistant</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Added multiply function!"></copy-button><a href="#msg-2025-12-24T10-05-15-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:15.000Z" data-timestamp="2025-12-24T10:05:15.000Z">2025-12-24T10:05:15.000Z</time></a></span></div><div class="message-content">
 <div class="assistant-text"><p>Added multiply function!</p></div></div></div>
         
 
@@ -189,6 +197,42 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
     </div>
     <script>
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
 document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
     const timestamp = el.getAttribute('data-timestamp');
     const date = new Date(timestamp);
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index 318283c..2de9e0e 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -20,6 +20,7 @@
 .tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
 .tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
 .message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
 .user .role-label { color: var(--user-border); }
 time { color: var(--text-muted); font-size: 0.8rem; }
@@ -104,6 +105,7 @@
 .index-item a { display: block; text-decoration: none; color: inherit; }
 .index-item a:hover { background: rgba(25, 118, 210, 0.1); }
 .index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
 .index-item-number { font-weight: 600; color: var(--user-border); }
 .index-item-content { padding: 16px; }
 .index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
@@ -137,9 +139,15 @@
 .search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
 .search-result a { display: block; text-decoration: none; color: inherit; }
 .search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-page { padding: 6px 12px; background: rgba(0,0,0,0.03); font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
 .search-result-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
 @media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
 </style>
 </head>
@@ -165,9 +173,9 @@ <h1>Claude Code transcript</h1>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
         
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-00-00-000Z"><div class="index-item-header"><span class="index-item-number">#1</span><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></div><div class="index-item-content"><p>Create a hello world function</p></div></a><div class="index-item-stats"><span>1 write · 1 bash</span>
-</div></div><div class="index-commit"><div class="index-commit-header"><span class="index-commit-hash">abc1234</span><time datetime="2025-12-24T10:00:20.000Z" data-timestamp="2025-12-24T10:00:20.000Z">2025-12-24T10:00:20.000Z</time></div><div class="index-commit-msg">Add hello function</div></div>
-<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-01-00-000Z"><div class="index-item-header"><span class="index-item-number">#2</span><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></div><div class="index-item-content"><p>Now add a goodbye function</p></div></a></div>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-00-00-000Z"><div class="index-item-header"><span class="index-item-number">#1</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Create a hello world function"></copy-button><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></span></div><div class="index-item-content"><p>Create a hello world function</p></div></a><div class="index-item-stats"><span>1 write · 1 bash</span>
+</div></div><div class="index-commit"><div class="index-commit-header"><span class="index-commit-hash">abc1234</span><span class="header-actions"><copy-button label="Copy text" data-content-from=".index-commit-msg"></copy-button><time datetime="2025-12-24T10:00:20.000Z" data-timestamp="2025-12-24T10:00:20.000Z">2025-12-24T10:00:20.000Z</time></span></div><div class="index-commit-msg">Add hello function</div></div>
+<div class="index-item"><a href="page-001.html#msg-2025-12-24T10-01-00-000Z"><div class="index-item-header"><span class="index-item-number">#2</span><span class="header-actions"><copy-button label="Copy Markdown" data-content="Now add a goodbye function"></copy-button><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></span></div><div class="index-item-content"><p>Now add a goodbye function</p></div></a></div>
         
 
 <div class="pagination">
@@ -357,8 +365,11 @@ <h1>Claude Code transcript</h1>
 
                 var resultDiv = document.createElement('div');
                 resultDiv.className = 'search-result';
-                resultDiv.innerHTML = '<a href="' + link + '">' +
-                    '<div class="search-result-page">' + escapeHtml(pageFile) + '</div>' +
+                resultDiv.innerHTML = '<div class="search-result-header">' +
+                    '<copy-button label="Copy text" data-content-from=".search-result-content"></copy-button>' +
+                    '<a href="' + link + '" class="search-result-page">' + escapeHtml(pageFile) + '</a>' +
+                    '</div>' +
+                    '<a href="' + link + '">' +
                     '<div class="search-result-content">' + clone.innerHTML + '</div>' +
                     '</a>';
                 searchResults.appendChild(resultDiv);
@@ -472,6 +483,42 @@ <h1>Claude Code transcript</h1>
         </script>
     </div>
     <script>
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
 document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
     const timestamp = el.getAttribute('data-timestamp');
     const date = new Date(timestamp);
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index b79542b..2aae8af 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -1537,3 +1537,60 @@ def test_search_total_pages_available(self, output_dir):
 
         # Total pages should be embedded for JS to know how many pages to fetch
         assert "totalPages" in index_html or "total_pages" in index_html
+
+
+class TestCopyButton:
+    """Tests for the copy button web component feature."""
+
+    def test_copy_button_component_defined(self, output_dir):
+        """Test that the copy-button web component is defined in JavaScript."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+
+        # The custom element should be defined
+        assert "customElements.define" in page_html
+        assert "copy-button" in page_html
+
+    def test_page_messages_have_copy_buttons(self, output_dir):
+        """Test that messages in page HTML have copy buttons with data-content."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+
+        # Messages should contain copy-button elements
+        assert "<copy-button" in page_html
+        # Copy buttons should have data-content for markdown or data-content-from for selectors
+        assert "data-content" in page_html
+
+    def test_index_items_have_copy_buttons(self, output_dir):
+        """Test that index items have copy buttons."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        index_html = (output_dir / "index.html").read_text(encoding="utf-8")
+
+        # Index items should contain copy-button elements
+        assert "<copy-button" in index_html
+
+    def test_copy_button_has_label_attribute(self, output_dir):
+        """Test that copy buttons have label attributes for button text."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+
+        # Copy buttons should have a label attribute
+        assert 'label="' in page_html
+
+    def test_copy_button_css_present(self, output_dir):
+        """Test that copy button CSS styles are present."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+
+        # CSS should style the copy button
+        assert "copy-button" in page_html

From 8d09b7a66a941efbbba59b5123f6bcaedd81ab92 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 29 Dec 2025 16:16:59 +0000
Subject: [PATCH 2/4] Add Playwright browser tests for copy button and search
 features

Add comprehensive Playwright tests that verify:
- Copy buttons are visible in messages and index items
- Clicking copy button changes text to "Copied!" for 2 seconds
- Copy button actually copies content to clipboard
- Search modal exists and search box is hidden on file:// protocol
- Timestamps are formatted by JavaScript

Tests are automatically skipped if Playwright browsers are not installed,
making CI/local development seamless without requiring browser setup.

Added pytest-playwright to dev dependencies in pyproject.toml.
---
 pyproject.toml           |   1 +
 tests/test_playwright.py | 186 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 tests/test_playwright.py

diff --git a/pyproject.toml b/pyproject.toml
index afc552b..8ce1bef 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -35,4 +35,5 @@ dev = [
     "pytest>=9.0.2",
     "pytest-httpx>=0.35.0",
     "syrupy>=5.0.0",
+    "pytest-playwright>=0.7.0",
 ]
diff --git a/tests/test_playwright.py b/tests/test_playwright.py
new file mode 100644
index 0000000..572816d
--- /dev/null
+++ b/tests/test_playwright.py
@@ -0,0 +1,186 @@
+"""Playwright browser tests for copy button and search functionality.
+
+These tests are skipped if Playwright browsers are not installed.
+Install browsers with: playwright install chromium
+"""
+
+import json
+import tempfile
+from pathlib import Path
+
+import pytest
+
+# Check if Playwright browsers are available
+try:
+    from playwright.sync_api import sync_playwright
+
+    def _check_browser_available():
+        try:
+            with sync_playwright() as p:
+                browser = p.chromium.launch()
+                browser.close()
+                return True
+        except Exception:
+            return False
+
+    PLAYWRIGHT_AVAILABLE = _check_browser_available()
+except ImportError:
+    PLAYWRIGHT_AVAILABLE = False
+
+pytestmark = pytest.mark.skipif(
+    not PLAYWRIGHT_AVAILABLE,
+    reason="Playwright browsers not available. Install with: playwright install chromium",
+)
+
+
+@pytest.fixture
+def generated_html(tmp_path):
+    """Generate HTML files from the sample session for testing."""
+    from claude_code_transcripts import generate_html
+
+    fixture_path = Path(__file__).parent / "sample_session.json"
+    output_dir = tmp_path / "output"
+    output_dir.mkdir()
+    generate_html(fixture_path, output_dir, github_repo="example/project")
+    return output_dir
+
+
+@pytest.fixture
+def page(generated_html):
+    """Create a Playwright page for testing."""
+    from playwright.sync_api import sync_playwright
+
+    with sync_playwright() as p:
+        browser = p.chromium.launch()
+        page = browser.new_page()
+        yield page, generated_html
+        browser.close()
+
+
+class TestCopyButtonPlaywright:
+    """Playwright tests for the copy button feature."""
+
+    def test_copy_button_visible_in_message(self, page):
+        """Test that copy buttons are visible in messages."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/page-001.html")
+
+        # Wait for copy buttons to be rendered
+        copy_buttons = page_obj.locator("copy-button")
+        assert copy_buttons.count() > 0, "Copy buttons should be present in messages"
+
+    def test_copy_button_visible_in_index(self, page):
+        """Test that copy buttons are visible in index items."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/index.html")
+
+        # Wait for copy buttons to be rendered
+        copy_buttons = page_obj.locator("copy-button")
+        assert copy_buttons.count() > 0, "Copy buttons should be present in index"
+
+    def test_copy_button_click_changes_text(self, page):
+        """Test that clicking a copy button changes the text to 'Copied!'."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/page-001.html")
+
+        # Grant clipboard permissions
+        page_obj.context.grant_permissions(["clipboard-write", "clipboard-read"])
+
+        # Find first copy button and click it
+        copy_button = page_obj.locator("copy-button").first
+        copy_button.wait_for(state="attached")
+
+        # Get the shadow DOM button
+        button = copy_button.locator("button")
+        original_text = button.inner_text()
+
+        # Click the button
+        button.click()
+
+        # Check that text changed to "Copied!"
+        assert (
+            button.inner_text() == "Copied!"
+        ), "Button text should change to 'Copied!' after click"
+
+        # Wait 2.5 seconds and check it reverts
+        page_obj.wait_for_timeout(2500)
+        assert (
+            button.inner_text() == original_text
+        ), "Button text should revert after 2 seconds"
+
+    def test_copy_button_copies_markdown_content(self, page):
+        """Test that clicking a copy button actually copies content."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/page-001.html")
+
+        # Grant clipboard permissions
+        page_obj.context.grant_permissions(["clipboard-write", "clipboard-read"])
+
+        # Find a copy button with data-content (markdown)
+        copy_button = page_obj.locator("copy-button[data-content]").first
+        copy_button.wait_for(state="attached")
+
+        # Get the content that should be copied
+        expected_content = copy_button.get_attribute("data-content")
+
+        # Click the button
+        button = copy_button.locator("button")
+        button.click()
+
+        # Read from clipboard
+        clipboard_content = page_obj.evaluate("navigator.clipboard.readText()")
+
+        assert (
+            clipboard_content == expected_content
+        ), "Clipboard should contain the data-content value"
+
+
+class TestSearchPlaywright:
+    """Playwright tests for the search feature."""
+
+    def test_search_box_hidden_by_default(self, page):
+        """Test that search box is hidden by default (progressive enhancement)."""
+        page_obj, output_dir = page
+        # Load the page with JS disabled to test progressive enhancement
+        page_obj.context.set_offline(False)
+        page_obj.goto(f"file://{output_dir}/index.html", wait_until="domcontentloaded")
+
+        # Note: With file:// protocol, search is hidden
+        # This test verifies the file:// protocol behavior
+        search_box = page_obj.locator("#search-box")
+        # On file:// protocol, search box should remain hidden
+        assert not search_box.is_visible() or search_box.evaluate(
+            "el => getComputedStyle(el).display === 'none'"
+        )
+
+    def test_search_modal_exists(self, page):
+        """Test that the search modal element exists."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/index.html")
+
+        # The modal should exist in the DOM
+        modal = page_obj.locator("#search-modal")
+        assert modal.count() == 1, "Search modal should exist"
+
+
+class TestTimestampFormatting:
+    """Test that timestamps are formatted correctly by JavaScript."""
+
+    def test_timestamps_formatted(self, page):
+        """Test that timestamps are formatted by JavaScript."""
+        page_obj, output_dir = page
+        page_obj.goto(f"file://{output_dir}/page-001.html")
+
+        # Wait for JS to run
+        page_obj.wait_for_load_state("networkidle")
+
+        # Get a timestamp element
+        time_element = page_obj.locator("time[data-timestamp]").first
+        time_element.wait_for(state="attached")
+
+        # The text should be formatted (not the raw ISO timestamp)
+        text = time_element.inner_text()
+        # Raw format is like "2025-01-01T12:00:00.000Z"
+        # Formatted should be like "Jan 1 12:00" or just "12:00"
+        assert "T" not in text, "Timestamp should be formatted, not raw ISO format"
+        assert "Z" not in text, "Timestamp should be formatted, not raw ISO format"

From 3a9ba64fe23eaf749df46fd0f92801824f1d5558 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 29 Dec 2025 09:16:43 -0800
Subject: [PATCH 3/4] Install and cache Playwright browsers in CI

---
 .github/workflows/test.yml | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d182fd7..19d1a19 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -23,6 +23,17 @@ jobs:
     - name: Install dependencies
       run: |
         pip install -e . --group dev
+    - name: Cache Playwright browsers
+      uses: actions/cache@v5
+      with:
+        path: |
+          ~/.cache/ms-playwright/
+          ~/Library/Caches/ms-playwright/
+          ~\AppData\Local\ms-playwright\
+        key: ${{ runner.os }}-playwright
+    - name: Install Playwright browsers
+      run: |
+        python -m playwright install chromium
     - name: Run tests
       env:
         PYTHONUTF8: "1"

From 722787b2f346c714ac379a534c14dafa7a852d1e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 29 Dec 2025 17:19:15 +0000
Subject: [PATCH 4/4] Move CSS and JS from Python strings to Jinja templates

Extract the CSS and JavaScript code from __init__.py into proper
template files:
- templates/styles.css: All CSS styles
- templates/scripts.js: Copy button WebComponent and other JS

Add get_css() and get_js() functions to load and render these
templates, replacing the CSS and JS Python string constants.

This improves code organization by keeping frontend assets in
separate files that can be edited independently.
---
 src/claude_code_transcripts/__init__.py       | 248 ++----------------
 .../templates/scripts.js                      |  64 +++++
 .../templates/styles.css                      | 144 ++++++++++
 ...enerateHtml.test_generates_index_html.html |  12 +-
 ...rateHtml.test_generates_page_001_html.html |  12 +-
 ...rateHtml.test_generates_page_002_html.html |  12 +-
 ...SessionFile.test_jsonl_generates_html.html |  12 +-
 7 files changed, 246 insertions(+), 258 deletions(-)
 create mode 100644 src/claude_code_transcripts/templates/scripts.js
 create mode 100644 src/claude_code_transcripts/templates/styles.css

diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index af2247c..438e349 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -35,6 +35,16 @@ def get_template(name):
     return _jinja_env.get_template(name)
 
 
+def get_css():
+    """Load CSS from template file."""
+    return get_template("styles.css").render()
+
+
+def get_js():
+    """Load JavaScript from template file."""
+    return get_template("scripts.js").render()
+
+
 # Regex to match git commit output: [branch hash] message
 COMMIT_PATTERN = re.compile(r"\[[\w\-/]+ ([a-f0-9]{7,})\] (.+?)(?:\n|$)")
 
@@ -401,8 +411,8 @@ def _generate_project_index(project, output_dir):
         project_name=project["name"],
         sessions=sessions_data,
         session_count=len(sessions_data),
-        css=CSS,
-        js=JS,
+        css=get_css(),
+        js=get_js(),
     )
 
     output_path = output_dir / "index.html"
@@ -440,8 +450,8 @@ def _generate_master_index(projects, output_dir):
         projects=projects_data,
         total_projects=len(projects),
         total_sessions=total_sessions,
-        css=CSS,
-        js=JS,
+        css=get_css(),
+        js=get_js(),
     )
 
     output_path = output_dir / "index.html"
@@ -920,220 +930,6 @@ def render_message(log_type, message_json, timestamp):
     )
 
 
-CSS = """
-:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
-* { box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
-.container { max-width: 800px; margin: 0 auto; }
-h1 { font-size: 1.5rem; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--user-border); }
-.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 8px; margin-bottom: 24px; }
-.header-row h1 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; flex: 1; min-width: 200px; }
-.message { margin-bottom: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-.message.user { background: var(--user-bg); border-left: 4px solid var(--user-border); }
-.message.assistant { background: var(--card-bg); border-left: 4px solid var(--assistant-border); }
-.message.tool-reply { background: #fff8e1; border-left: 4px solid #ff9800; }
-.tool-reply .role-label { color: #e65100; }
-.tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
-.tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
-.message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
-.header-actions { display: flex; align-items: center; gap: 8px; }
-.role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
-.user .role-label { color: var(--user-border); }
-time { color: var(--text-muted); font-size: 0.8rem; }
-.timestamp-link { color: inherit; text-decoration: none; }
-.timestamp-link:hover { text-decoration: underline; }
-.message:target { animation: highlight 2s ease-out; }
-@keyframes highlight { 0% { background-color: rgba(25, 118, 210, 0.2); } 100% { background-color: transparent; } }
-.message-content { padding: 16px; }
-.message-content p { margin: 0 0 12px 0; }
-.message-content p:last-child { margin-bottom: 0; }
-.thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 8px; padding: 12px; margin: 12px 0; font-size: 0.9rem; color: var(--thinking-text); }
-.thinking-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 8px; }
-.thinking p { margin: 8px 0; }
-.assistant-text { margin: 8px 0; }
-.tool-use { background: var(--tool-bg); border: 1px solid var(--tool-border); border-radius: 8px; padding: 12px; margin: 12px 0; }
-.tool-header { font-weight: 600; color: var(--tool-border); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
-.tool-icon { font-size: 1.1rem; }
-.tool-description { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; font-style: italic; }
-.tool-result { background: var(--tool-result-bg); border-radius: 8px; padding: 12px; margin: 12px 0; }
-.tool-result.tool-error { background: var(--tool-error-bg); }
-.file-tool { border-radius: 8px; padding: 12px; margin: 12px 0; }
-.write-tool { background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%); border: 1px solid #4caf50; }
-.edit-tool { background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%); border: 1px solid #ff9800; }
-.file-tool-header { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
-.write-header { color: #2e7d32; }
-.edit-header { color: #e65100; }
-.file-tool-icon { font-size: 1rem; }
-.file-tool-path { font-family: monospace; background: rgba(0,0,0,0.08); padding: 2px 8px; border-radius: 4px; }
-.file-tool-fullpath { font-family: monospace; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; word-break: break-all; }
-.file-content { margin: 0; }
-.edit-section { display: flex; margin: 4px 0; border-radius: 4px; overflow: hidden; }
-.edit-label { padding: 8px 12px; font-weight: bold; font-family: monospace; display: flex; align-items: flex-start; }
-.edit-old { background: #fce4ec; }
-.edit-old .edit-label { color: #b71c1c; background: #f8bbd9; }
-.edit-old .edit-content { color: #880e4f; }
-.edit-new { background: #e8f5e9; }
-.edit-new .edit-label { color: #1b5e20; background: #a5d6a7; }
-.edit-new .edit-content { color: #1b5e20; }
-.edit-content { margin: 0; flex: 1; background: transparent; font-size: 0.85rem; }
-.edit-replace-all { font-size: 0.75rem; font-weight: normal; color: var(--text-muted); }
-.write-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #e6f4ea); }
-.edit-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff0e5); }
-.todo-list { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border: 1px solid #81c784; border-radius: 8px; padding: 12px; margin: 12px 0; }
-.todo-header { font-weight: 600; color: #2e7d32; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
-.todo-items { list-style: none; margin: 0; padding: 0; }
-.todo-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.9rem; }
-.todo-item:last-child { border-bottom: none; }
-.todo-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 50%; }
-.todo-completed .todo-icon { color: #2e7d32; background: rgba(46, 125, 50, 0.15); }
-.todo-completed .todo-content { color: #558b2f; text-decoration: line-through; }
-.todo-in-progress .todo-icon { color: #f57c00; background: rgba(245, 124, 0, 0.15); }
-.todo-in-progress .todo-content { color: #e65100; font-weight: 500; }
-.todo-pending .todo-icon { color: #757575; background: rgba(0,0,0,0.05); }
-.todo-pending .todo-content { color: #616161; }
-pre { background: var(--code-bg); color: var(--code-text); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 8px 0; white-space: pre-wrap; word-wrap: break-word; }
-pre.json { color: #e0e0e0; }
-code { background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
-pre code { background: none; padding: 0; }
-.user-content { margin: 0; }
-.truncatable { position: relative; }
-.truncatable.truncated .truncatable-content { max-height: 200px; overflow: hidden; }
-.truncatable.truncated::after { content: ''; position: absolute; bottom: 32px; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events: none; }
-.message.user .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--user-bg)); }
-.message.tool-reply .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
-.tool-use .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--tool-bg)); }
-.tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--tool-result-bg)); }
-.expand-btn { display: none; width: 100%; padding: 8px 16px; margin-top: 4px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
-.expand-btn:hover { background: rgba(0,0,0,0.1); }
-.truncatable.truncated .expand-btn, .truncatable.expanded .expand-btn { display: block; }
-.pagination { display: flex; justify-content: center; gap: 8px; margin: 24px 0; flex-wrap: wrap; }
-.pagination a, .pagination span { padding: 5px 10px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; }
-.pagination a { background: var(--card-bg); color: var(--user-border); border: 1px solid var(--user-border); }
-.pagination a:hover { background: var(--user-bg); }
-.pagination .current { background: var(--user-border); color: white; }
-.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
-details.continuation { margin-bottom: 16px; }
-details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
-details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
-details.continuation[open] summary { border-radius: 12px 12px 0 0; margin-bottom: 0; }
-.index-item { margin-bottom: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); background: var(--user-bg); border-left: 4px solid var(--user-border); }
-.index-item a { display: block; text-decoration: none; color: inherit; }
-.index-item a:hover { background: rgba(25, 118, 210, 0.1); }
-.index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
-.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
-.index-item-number { font-weight: 600; color: var(--user-border); }
-.index-item-content { padding: 16px; }
-.index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
-.index-item-commit { margin-top: 6px; padding: 4px 8px; background: #fff3e0; border-radius: 4px; font-size: 0.85rem; color: #e65100; }
-.index-item-commit code { background: rgba(0,0,0,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; margin-right: 6px; }
-.commit-card { margin: 8px 0; padding: 10px 14px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 6px; }
-.commit-card a { text-decoration: none; color: #5d4037; display: block; }
-.commit-card a:hover { color: #e65100; }
-.commit-card-hash { font-family: monospace; color: #e65100; font-weight: 600; margin-right: 8px; }
-.index-commit { margin-bottom: 12px; padding: 10px 16px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
-.index-commit a { display: block; text-decoration: none; color: inherit; }
-.index-commit a:hover { background: rgba(255, 152, 0, 0.1); margin: -10px -16px; padding: 10px 16px; border-radius: 8px; }
-.index-commit-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-bottom: 4px; }
-.index-commit-hash { font-family: monospace; color: #e65100; font-weight: 600; }
-.index-commit-msg { color: #5d4037; }
-.index-item-long-text { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); }
-.index-item-long-text .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--card-bg)); }
-.index-item-long-text-content { color: var(--text-color); }
-#search-box { display: none; align-items: center; gap: 8px; }
-#search-box input { padding: 6px 12px; border: 1px solid var(--assistant-border); border-radius: 6px; font-size: 16px; width: 180px; }
-#search-box button, #modal-search-btn, #modal-close-btn { background: var(--user-border); color: white; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
-#search-box button:hover, #modal-search-btn:hover { background: #1565c0; }
-#modal-close-btn { background: var(--text-muted); margin-left: 8px; }
-#modal-close-btn:hover { background: #616161; }
-#search-modal[open] { border: none; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); padding: 0; width: 90vw; max-width: 900px; height: 80vh; max-height: 80vh; display: flex; flex-direction: column; }
-#search-modal::backdrop { background: rgba(0,0,0,0.5); }
-.search-modal-header { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid var(--assistant-border); background: var(--bg-color); border-radius: 12px 12px 0 0; }
-.search-modal-header input { flex: 1; padding: 8px 12px; border: 1px solid var(--assistant-border); border-radius: 6px; font-size: 16px; }
-#search-status { padding: 8px 16px; font-size: 0.85rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
-#search-results { flex: 1; overflow-y: auto; padding: 16px; }
-.search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-.search-result a { display: block; text-decoration: none; color: inherit; }
-.search-result a:hover { background: rgba(25, 118, 210, 0.05); }
-.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
-.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
-.search-result-page:hover { text-decoration: underline; }
-.search-result-content { padding: 12px; }
-.search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
-copy-button { display: inline-block; margin-right: 8px; }
-copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
-copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
-copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
-@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
-"""
-
-JS = """
-class CopyButton extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        const label = this.getAttribute('label') || 'Copy';
-        const style = document.createElement('style');
-        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
-        const btn = document.createElement('button');
-        btn.textContent = label;
-        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
-        this.shadowRoot.appendChild(style);
-        this.shadowRoot.appendChild(btn);
-    }
-    handleClick(e, btn, label) {
-        e.preventDefault();
-        e.stopPropagation();
-        let content = this.getAttribute('data-content');
-        if (!content) {
-            const selector = this.getAttribute('data-content-from');
-            if (selector) {
-                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
-                if (el) content = el.innerText;
-            }
-        }
-        if (content) {
-            navigator.clipboard.writeText(content).then(() => {
-                btn.textContent = 'Copied!';
-                btn.classList.add('copied');
-                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
-            });
-        }
-    }
-}
-customElements.define('copy-button', CopyButton);
-document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
-    const timestamp = el.getAttribute('data-timestamp');
-    const date = new Date(timestamp);
-    const now = new Date();
-    const isToday = date.toDateString() === now.toDateString();
-    const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-    if (isToday) { el.textContent = timeStr; }
-    else { el.textContent = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr; }
-});
-document.querySelectorAll('pre.json').forEach(function(el) {
-    let text = el.textContent;
-    text = text.replace(/"([^"]+)":/g, '<span style="color: #ce93d8">"$1"</span>:');
-    text = text.replace(/: "([^"]*)"/g, ': <span style="color: #81d4fa">"$1"</span>');
-    text = text.replace(/: (\\d+)/g, ': <span style="color: #ffcc80">$1</span>');
-    text = text.replace(/: (true|false|null)/g, ': <span style="color: #f48fb1">$1</span>');
-    el.innerHTML = text;
-});
-document.querySelectorAll('.truncatable').forEach(function(wrapper) {
-    const content = wrapper.querySelector('.truncatable-content');
-    const btn = wrapper.querySelector('.expand-btn');
-    if (content.scrollHeight > 250) {
-        wrapper.classList.add('truncated');
-        btn.addEventListener('click', function() {
-            if (wrapper.classList.contains('truncated')) { wrapper.classList.remove('truncated'); wrapper.classList.add('expanded'); btn.textContent = 'Show less'; }
-            else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
-        });
-    }
-});
-"""
-
 # JavaScript to fix relative URLs when served via gistpreview.github.io
 GIST_PREVIEW_JS = r"""
 (function() {
@@ -1317,8 +1113,8 @@ def generate_html(json_path, output_dir, github_repo=None):
         pagination_html = generate_pagination_html(page_num, total_pages)
         page_template = get_template("page.html")
         page_content = page_template.render(
-            css=CSS,
-            js=JS,
+            css=get_css(),
+            js=get_js(),
             page_num=page_num,
             total_pages=total_pages,
             pagination_html=pagination_html,
@@ -1403,8 +1199,8 @@ def generate_html(json_path, output_dir, github_repo=None):
     index_pagination = generate_index_pagination_html(total_pages)
     index_template = get_template("index.html")
     index_content = index_template.render(
-        css=CSS,
-        js=JS,
+        css=get_css(),
+        js=get_js(),
         pagination_html=index_pagination,
         prompt_num=prompt_num,
         total_messages=total_messages,
@@ -1737,8 +1533,8 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
         pagination_html = generate_pagination_html(page_num, total_pages)
         page_template = get_template("page.html")
         page_content = page_template.render(
-            css=CSS,
-            js=JS,
+            css=get_css(),
+            js=get_js(),
             page_num=page_num,
             total_pages=total_pages,
             pagination_html=pagination_html,
@@ -1823,8 +1619,8 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
     index_pagination = generate_index_pagination_html(total_pages)
     index_template = get_template("index.html")
     index_content = index_template.render(
-        css=CSS,
-        js=JS,
+        css=get_css(),
+        js=get_js(),
         pagination_html=index_pagination,
         prompt_num=prompt_num,
         total_messages=total_messages,
diff --git a/src/claude_code_transcripts/templates/scripts.js b/src/claude_code_transcripts/templates/scripts.js
new file mode 100644
index 0000000..a96ea4e
--- /dev/null
+++ b/src/claude_code_transcripts/templates/scripts.js
@@ -0,0 +1,64 @@
+class CopyButton extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const label = this.getAttribute('label') || 'Copy';
+        const style = document.createElement('style');
+        style.textContent = 'button { background: transparent; border: 1px solid #757575; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: #757575; cursor: pointer; white-space: nowrap; font-family: inherit; } button:hover { background: rgba(0,0,0,0.05); border-color: #1976d2; color: #1976d2; } button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }';
+        const btn = document.createElement('button');
+        btn.textContent = label;
+        btn.addEventListener('click', (e) => this.handleClick(e, btn, label));
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(btn);
+    }
+    handleClick(e, btn, label) {
+        e.preventDefault();
+        e.stopPropagation();
+        let content = this.getAttribute('data-content');
+        if (!content) {
+            const selector = this.getAttribute('data-content-from');
+            if (selector) {
+                const el = this.closest('.message, .index-item, .index-commit, .search-result')?.querySelector(selector) || document.querySelector(selector);
+                if (el) content = el.innerText;
+            }
+        }
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                btn.textContent = 'Copied!';
+                btn.classList.add('copied');
+                setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 2000);
+            });
+        }
+    }
+}
+customElements.define('copy-button', CopyButton);
+document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
+    const timestamp = el.getAttribute('data-timestamp');
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+    if (isToday) { el.textContent = timeStr; }
+    else { el.textContent = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr; }
+});
+document.querySelectorAll('pre.json').forEach(function(el) {
+    let text = el.textContent;
+    text = text.replace(/"([^"]+)":/g, '<span style="color: #ce93d8">"$1"</span>:');
+    text = text.replace(/: "([^"]*)"/g, ': <span style="color: #81d4fa">"$1"</span>');
+    text = text.replace(/: (\d+)/g, ': <span style="color: #ffcc80">$1</span>');
+    text = text.replace(/: (true|false|null)/g, ': <span style="color: #f48fb1">$1</span>');
+    el.innerHTML = text;
+});
+document.querySelectorAll('.truncatable').forEach(function(wrapper) {
+    const content = wrapper.querySelector('.truncatable-content');
+    const btn = wrapper.querySelector('.expand-btn');
+    if (content.scrollHeight > 250) {
+        wrapper.classList.add('truncated');
+        btn.addEventListener('click', function() {
+            if (wrapper.classList.contains('truncated')) { wrapper.classList.remove('truncated'); wrapper.classList.add('expanded'); btn.textContent = 'Show less'; }
+            else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
+        });
+    }
+});
diff --git a/src/claude_code_transcripts/templates/styles.css b/src/claude_code_transcripts/templates/styles.css
new file mode 100644
index 0000000..0244563
--- /dev/null
+++ b/src/claude_code_transcripts/templates/styles.css
@@ -0,0 +1,144 @@
+:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+* { box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
+.container { max-width: 800px; margin: 0 auto; }
+h1 { font-size: 1.5rem; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--user-border); }
+.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 8px; margin-bottom: 24px; }
+.header-row h1 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; flex: 1; min-width: 200px; }
+.message { margin-bottom: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.message.user { background: var(--user-bg); border-left: 4px solid var(--user-border); }
+.message.assistant { background: var(--card-bg); border-left: 4px solid var(--assistant-border); }
+.message.tool-reply { background: #fff8e1; border-left: 4px solid #ff9800; }
+.tool-reply .role-label { color: #e65100; }
+.tool-reply .tool-result { background: transparent; padding: 0; margin: 0; }
+.tool-reply .tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
+.message-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
+.role-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
+.user .role-label { color: var(--user-border); }
+time { color: var(--text-muted); font-size: 0.8rem; }
+.timestamp-link { color: inherit; text-decoration: none; }
+.timestamp-link:hover { text-decoration: underline; }
+.message:target { animation: highlight 2s ease-out; }
+@keyframes highlight { 0% { background-color: rgba(25, 118, 210, 0.2); } 100% { background-color: transparent; } }
+.message-content { padding: 16px; }
+.message-content p { margin: 0 0 12px 0; }
+.message-content p:last-child { margin-bottom: 0; }
+.thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 8px; padding: 12px; margin: 12px 0; font-size: 0.9rem; color: var(--thinking-text); }
+.thinking-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 8px; }
+.thinking p { margin: 8px 0; }
+.assistant-text { margin: 8px 0; }
+.tool-use { background: var(--tool-bg); border: 1px solid var(--tool-border); border-radius: 8px; padding: 12px; margin: 12px 0; }
+.tool-header { font-weight: 600; color: var(--tool-border); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
+.tool-icon { font-size: 1.1rem; }
+.tool-description { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; font-style: italic; }
+.tool-result { background: var(--tool-result-bg); border-radius: 8px; padding: 12px; margin: 12px 0; }
+.tool-result.tool-error { background: var(--tool-error-bg); }
+.file-tool { border-radius: 8px; padding: 12px; margin: 12px 0; }
+.write-tool { background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%); border: 1px solid #4caf50; }
+.edit-tool { background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%); border: 1px solid #ff9800; }
+.file-tool-header { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
+.write-header { color: #2e7d32; }
+.edit-header { color: #e65100; }
+.file-tool-icon { font-size: 1rem; }
+.file-tool-path { font-family: monospace; background: rgba(0,0,0,0.08); padding: 2px 8px; border-radius: 4px; }
+.file-tool-fullpath { font-family: monospace; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; word-break: break-all; }
+.file-content { margin: 0; }
+.edit-section { display: flex; margin: 4px 0; border-radius: 4px; overflow: hidden; }
+.edit-label { padding: 8px 12px; font-weight: bold; font-family: monospace; display: flex; align-items: flex-start; }
+.edit-old { background: #fce4ec; }
+.edit-old .edit-label { color: #b71c1c; background: #f8bbd9; }
+.edit-old .edit-content { color: #880e4f; }
+.edit-new { background: #e8f5e9; }
+.edit-new .edit-label { color: #1b5e20; background: #a5d6a7; }
+.edit-new .edit-content { color: #1b5e20; }
+.edit-content { margin: 0; flex: 1; background: transparent; font-size: 0.85rem; }
+.edit-replace-all { font-size: 0.75rem; font-weight: normal; color: var(--text-muted); }
+.write-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #e6f4ea); }
+.edit-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff0e5); }
+.todo-list { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border: 1px solid #81c784; border-radius: 8px; padding: 12px; margin: 12px 0; }
+.todo-header { font-weight: 600; color: #2e7d32; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
+.todo-items { list-style: none; margin: 0; padding: 0; }
+.todo-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.9rem; }
+.todo-item:last-child { border-bottom: none; }
+.todo-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 50%; }
+.todo-completed .todo-icon { color: #2e7d32; background: rgba(46, 125, 50, 0.15); }
+.todo-completed .todo-content { color: #558b2f; text-decoration: line-through; }
+.todo-in-progress .todo-icon { color: #f57c00; background: rgba(245, 124, 0, 0.15); }
+.todo-in-progress .todo-content { color: #e65100; font-weight: 500; }
+.todo-pending .todo-icon { color: #757575; background: rgba(0,0,0,0.05); }
+.todo-pending .todo-content { color: #616161; }
+pre { background: var(--code-bg); color: var(--code-text); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; margin: 8px 0; white-space: pre-wrap; word-wrap: break-word; }
+pre.json { color: #e0e0e0; }
+code { background: rgba(0,0,0,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
+pre code { background: none; padding: 0; }
+.user-content { margin: 0; }
+.truncatable { position: relative; }
+.truncatable.truncated .truncatable-content { max-height: 200px; overflow: hidden; }
+.truncatable.truncated::after { content: ''; position: absolute; bottom: 32px; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events: none; }
+.message.user .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--user-bg)); }
+.message.tool-reply .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, #fff8e1); }
+.tool-use .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--tool-bg)); }
+.tool-result .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--tool-result-bg)); }
+.expand-btn { display: none; width: 100%; padding: 8px 16px; margin-top: 4px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
+.expand-btn:hover { background: rgba(0,0,0,0.1); }
+.truncatable.truncated .expand-btn, .truncatable.expanded .expand-btn { display: block; }
+.pagination { display: flex; justify-content: center; gap: 8px; margin: 24px 0; flex-wrap: wrap; }
+.pagination a, .pagination span { padding: 5px 10px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; }
+.pagination a { background: var(--card-bg); color: var(--user-border); border: 1px solid var(--user-border); }
+.pagination a:hover { background: var(--user-bg); }
+.pagination .current { background: var(--user-border); color: white; }
+.pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .index-link { background: var(--user-border); color: white; }
+details.continuation { margin-bottom: 16px; }
+details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
+details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
+details.continuation[open] summary { border-radius: 12px 12px 0 0; margin-bottom: 0; }
+.index-item { margin-bottom: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); background: var(--user-bg); border-left: 4px solid var(--user-border); }
+.index-item a { display: block; text-decoration: none; color: inherit; }
+.index-item a:hover { background: rgba(25, 118, 210, 0.1); }
+.index-item-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.03); font-size: 0.85rem; }
+.index-item-header .header-actions { display: flex; align-items: center; gap: 8px; }
+.index-item-number { font-weight: 600; color: var(--user-border); }
+.index-item-content { padding: 16px; }
+.index-item-stats { padding: 8px 16px 12px 32px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid rgba(0,0,0,0.06); }
+.index-item-commit { margin-top: 6px; padding: 4px 8px; background: #fff3e0; border-radius: 4px; font-size: 0.85rem; color: #e65100; }
+.index-item-commit code { background: rgba(0,0,0,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; margin-right: 6px; }
+.commit-card { margin: 8px 0; padding: 10px 14px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 6px; }
+.commit-card a { text-decoration: none; color: #5d4037; display: block; }
+.commit-card a:hover { color: #e65100; }
+.commit-card-hash { font-family: monospace; color: #e65100; font-weight: 600; margin-right: 8px; }
+.index-commit { margin-bottom: 12px; padding: 10px 16px; background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+.index-commit a { display: block; text-decoration: none; color: inherit; }
+.index-commit a:hover { background: rgba(255, 152, 0, 0.1); margin: -10px -16px; padding: 10px 16px; border-radius: 8px; }
+.index-commit-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-bottom: 4px; }
+.index-commit-hash { font-family: monospace; color: #e65100; font-weight: 600; }
+.index-commit-msg { color: #5d4037; }
+.index-item-long-text { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); }
+.index-item-long-text .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, var(--card-bg)); }
+.index-item-long-text-content { color: var(--text-color); }
+#search-box { display: none; align-items: center; gap: 8px; }
+#search-box input { padding: 6px 12px; border: 1px solid var(--assistant-border); border-radius: 6px; font-size: 16px; width: 180px; }
+#search-box button, #modal-search-btn, #modal-close-btn { background: var(--user-border); color: white; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+#search-box button:hover, #modal-search-btn:hover { background: #1565c0; }
+#modal-close-btn { background: var(--text-muted); margin-left: 8px; }
+#modal-close-btn:hover { background: #616161; }
+#search-modal[open] { border: none; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); padding: 0; width: 90vw; max-width: 900px; height: 80vh; max-height: 80vh; display: flex; flex-direction: column; }
+#search-modal::backdrop { background: rgba(0,0,0,0.5); }
+.search-modal-header { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid var(--assistant-border); background: var(--bg-color); border-radius: 12px 12px 0 0; }
+.search-modal-header input { flex: 1; padding: 8px 12px; border: 1px solid var(--assistant-border); border-radius: 6px; font-size: 16px; }
+#search-status { padding: 8px 16px; font-size: 0.85rem; color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06); }
+#search-results { flex: 1; overflow-y: auto; padding: 16px; }
+.search-result { margin-bottom: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.search-result a { display: block; text-decoration: none; color: inherit; }
+.search-result a:hover { background: rgba(25, 118, 210, 0.05); }
+.search-result-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.06); }
+.search-result-page { font-size: 0.8rem; color: var(--text-muted); text-decoration: none; }
+.search-result-page:hover { text-decoration: underline; }
+.search-result-content { padding: 12px; }
+.search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+copy-button { display: inline-block; margin-right: 8px; }
+copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
+copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
+copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
+@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index af14ae7..4976bdb 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - Index</title>
-    <style>
-:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+    <style>:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
@@ -148,8 +147,7 @@
 copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
 copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
 copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
-@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
-</style>
+@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }</style>
 </head>
 <body>
     <div class="container">
@@ -491,8 +489,7 @@ <h1>Claude Code transcript</h1>
 })();
         </script>
     </div>
-    <script>
-class CopyButton extends HTMLElement {
+    <script>class CopyButton extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -555,7 +552,6 @@ <h1>Claude Code transcript</h1>
             else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
         });
     }
-});
-</script>
+});</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index 06edd6b..9ffc938 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - page 1</title>
-    <style>
-:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+    <style>:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
@@ -148,8 +147,7 @@
 copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
 copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
 copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
-@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
-</style>
+@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }</style>
 </head>
 <body>
     <div class="container">
@@ -309,8 +307,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </div>
 
     </div>
-    <script>
-class CopyButton extends HTMLElement {
+    <script>class CopyButton extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -373,7 +370,6 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
             else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
         });
     }
-});
-</script>
+});</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index 4ac7ca8..93f2be1 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - page 2</title>
-    <style>
-:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+    <style>:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
@@ -148,8 +147,7 @@
 copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
 copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
 copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
-@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
-</style>
+@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }</style>
 </head>
 <body>
     <div class="container">
@@ -196,8 +194,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 </div>
 
     </div>
-    <script>
-class CopyButton extends HTMLElement {
+    <script>class CopyButton extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -260,7 +257,6 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
             else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
         });
     }
-});
-</script>
+});</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index 2de9e0e..3fb3605 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - Index</title>
-    <style>
-:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
+    <style>:root { --bg-color: #f5f5f5; --card-bg: #ffffff; --user-bg: #e3f2fd; --user-border: #1976d2; --assistant-bg: #f5f5f5; --assistant-border: #9e9e9e; --thinking-bg: #fff8e1; --thinking-border: #ffc107; --thinking-text: #666; --tool-bg: #f3e5f5; --tool-border: #9c27b0; --tool-result-bg: #e8f5e9; --tool-error-bg: #ffebee; --text-color: #212121; --text-muted: #757575; --code-bg: #263238; --code-text: #aed581; }
 * { box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 16px; line-height: 1.6; }
 .container { max-width: 800px; margin: 0 auto; }
@@ -148,8 +147,7 @@
 copy-button button { background: transparent; border: 1px solid var(--text-muted); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
 copy-button button:hover { background: rgba(0,0,0,0.05); border-color: var(--user-border); color: var(--user-border); }
 copy-button button.copied { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
-@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }
-</style>
+@media (max-width: 600px) { body { padding: 8px; } .message, .index-item { border-radius: 8px; } .message-content, .index-item-content { padding: 12px; } pre { font-size: 0.8rem; padding: 8px; } #search-box input { width: 120px; } #search-modal[open] { width: 95vw; height: 90vh; } }</style>
 </head>
 <body>
     <div class="container">
@@ -482,8 +480,7 @@ <h1>Claude Code transcript</h1>
 })();
         </script>
     </div>
-    <script>
-class CopyButton extends HTMLElement {
+    <script>class CopyButton extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -546,7 +543,6 @@ <h1>Claude Code transcript</h1>
             else { wrapper.classList.remove('expanded'); wrapper.classList.add('truncated'); btn.textContent = 'Show more'; }
         });
     }
-});
-</script>
+});</script>
 </body>
 </html>
\ No newline at end of file