diff --git a/.gitignore b/.gitignore
index a4a9ce6..7b5c577 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 __pycache__
 uv.lock
 .playwright-mcp/
+tests/.fixture_cache/
diff --git a/README.md b/README.md
index 53612ee..6426ebb 100644
--- a/README.md
+++ b/README.md
@@ -47,14 +47,16 @@ All commands support these options:
 
 - `-o, --output DIRECTORY` - output directory (default: writes to temp dir and opens browser)
 - `-a, --output-auto` - auto-name output subdirectory based on session ID or filename
-- `--repo OWNER/NAME` - GitHub repo for commit links (auto-detected from git push output if not specified)
+- `--repo PATH|URL|OWNER/NAME` - Git repo for commit links and code viewer. Accepts a local path, GitHub URL, or owner/name format.
 - `--open` - open the generated `index.html` in your default browser (default if no `-o` specified)
 - `--gist` - upload the generated HTML files to a GitHub Gist and output a preview URL
 - `--json` - include the original session file in the output directory
+- `--code-view` - generate an interactive code viewer showing all files modified during the session
 
 The generated output includes:
 - `index.html` - an index page with a timeline of prompts and commits
 - `page-001.html`, `page-002.html`, etc. - paginated transcript pages
+- `code.html` - interactive code viewer (when `--code-view` is used)
 
 ### Local sessions
 
@@ -106,7 +108,19 @@ Preview: https://gisthost.github.io/?abc123def456/index.html
 Files: /var/folders/.../session-id
 ```
 
-The preview URL uses [gisthost.github.io](https://gisthost.github.io/) to render your HTML gist. The tool automatically injects JavaScript to fix relative links when served through gisthost.
+The preview URL uses [gisthost.github.io](https://gisthost.github.io/) to render your HTML gist. The tool automatically injects JavaScript to fix relative links when served through gisthost (also works with gistpreview.github.io for backward compatibility).
+
+**Large sessions:** GitHub's gist API has size limits (~1MB). For large sessions, the tool automatically handles this:
+
+- **Page content**: When total page content exceeds 500KB, the tool generates separate `page-data-NNN.json` files for each page. The HTML pages are stripped of their inline content when uploaded, and JavaScript fetches the content from the JSON files on demand. This keeps each file small while preserving full functionality.
+
+- **Code viewer**: When using `--code-view`, large sessions may have a `code-data.json` file that also needs separate handling.
+
+- **Two-gist strategy**: When data files exceed 1MB total, they're uploaded to a separate "data gist", and the main gist's HTML files reference it.
+
+- **Batched uploads**: If files are still too large, they're automatically batched into multiple gists.
+
+All of this happens transparently and requires no additional options. Search continues to work by fetching from the JSON files instead of HTML.
 
 Combine with `-o` to keep a local copy:
 
@@ -116,6 +130,36 @@ claude-code-transcripts json session.json -o ./my-transcript --gist
 
 **Requirements:** The `--gist` option requires the [GitHub CLI](https://cli.github.com/) (`gh`) to be installed and authenticated (`gh auth login`).
 
+### Code viewer
+
+Use `--code-view` to generate an interactive three-pane code viewer that shows all files modified during the session:
+
+```bash
+# Generate with code viewer from a local session
+claude-code-transcripts --code-view
+
+# Point to the actual repo for full file content and blame
+claude-code-transcripts --code-view --repo /path/to/repo
+
+# From a URL
+claude-code-transcripts json https://example.com/session.jsonl --code-view
+```
+
+The code viewer (`code.html`) provides:
+- **File tree**: Navigate all files that were written or edited during the session
+- **File content**: View file contents with git blame-style annotations showing which prompt modified each line
+- **Transcript pane**: Browse the full conversation with links to jump to specific file operations
+
+When you provide `--repo` pointing to the local git repository that was being modified, the code viewer can show the complete file content with accurate blame attribution. Without a repo path, it shows a diff-only view of the changes.
+
+Use `--exclude-deleted-files` to filter out files that no longer exist on disk:
+
+```bash
+claude-code-transcripts --code-view --exclude-deleted-files
+```
+
+This is useful when files were deleted after the session (either manually or by commands not captured in the transcript).
+
 ### Auto-naming output directories
 
 Use `-a/--output-auto` to automatically create a subdirectory named after the session:
@@ -145,11 +189,14 @@ This is useful for archiving the source data alongside the HTML output.
 
 ### Converting from JSON/JSONL files
 
-Convert a specific session file directly:
+Convert a specific session file or URL directly:
 
 ```bash
 claude-code-transcripts json session.json -o output-directory/
 claude-code-transcripts json session.jsonl --open
+
+# Fetch and convert from a URL
+claude-code-transcripts json https://example.com/session.jsonl --open
 ```
 This works with both JSONL files in the `~/.claude/projects/` folder and JSON session files extracted from Claude Code for web.
 
diff --git a/pyproject.toml b/pyproject.toml
index e1eaed6..5de9054 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -11,9 +11,11 @@ requires-python = ">=3.10"
 dependencies = [
     "click",
     "click-default-group",
+    "gitpython",
     "httpx",
     "jinja2",
     "markdown",
+    "nh3>=0.3.2",
     "questionary",
 ]
 
diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index f2246a2..d27b57c 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -9,14 +9,19 @@
 import subprocess
 import tempfile
 import webbrowser
+from dataclasses import dataclass, field
 from datetime import datetime
 from pathlib import Path
+from typing import Optional, List, Tuple, Dict, Any
 
 import click
 from click_default_group import DefaultGroup
+from git import Repo
+from git.exc import InvalidGitRepositoryError
 import httpx
 from jinja2 import Environment, PackageLoader
 import markdown
+import nh3
 import questionary
 
 # Set up Jinja2 environment
@@ -49,6 +54,101 @@ def get_template(name):
 )
 
 
+# Import code viewer functionality from separate module
+from claude_code_transcripts.code_view import (
+    FileOperation,
+    FileState,
+    CodeViewData,
+    BlameRange,
+    OP_WRITE,
+    OP_EDIT,
+    OP_DELETE,
+    extract_file_operations,
+    filter_deleted_files,
+    normalize_file_paths,
+    find_git_repo_root,
+    find_commit_before_timestamp,
+    build_file_history_repo,
+    get_file_blame_ranges,
+    get_file_content_from_repo,
+    build_file_tree,
+    reconstruct_file_with_blame,
+    build_file_states,
+    render_file_tree_html,
+    file_state_to_dict,
+    generate_code_view_html,
+    build_msg_to_user_html,
+)
+
+
+def extract_github_repo_from_url(url: str) -> Optional[str]:
+    """Extract 'owner/name' from various GitHub URL formats.
+
+    Handles:
+    - https://github.com/owner/repo
+    - https://github.com/owner/repo.git
+    - git@github.com:owner/repo.git
+
+    Args:
+        url: GitHub URL or git remote URL.
+
+    Returns:
+        Repository identifier as 'owner/name', or None if not found.
+    """
+    match = re.search(r"github\.com[:/]([^/]+/[^/?#.]+)", url)
+    if match:
+        repo = match.group(1)
+        return repo[:-4] if repo.endswith(".git") else repo
+    return None
+
+
+def parse_repo_value(repo: Optional[str]) -> Tuple[Optional[str], Optional[Path]]:
+    """Parse --repo value to extract GitHub repo name and/or local path.
+
+    Args:
+        repo: The --repo value (could be path, URL, or owner/name).
+
+    Returns:
+        Tuple of (github_repo, local_path):
+        - github_repo: "owner/name" string for commit links, or None
+        - local_path: Path to local git repo for file history, or None
+    """
+    if not repo:
+        return None, None
+
+    # Check if it's a local path that exists
+    repo_path = Path(repo)
+    if repo_path.exists() and (repo_path / ".git").exists():
+        # Try to extract GitHub remote URL
+        github_repo = None
+        try:
+            result = subprocess.run(
+                ["git", "remote", "get-url", "origin"],
+                cwd=repo_path,
+                capture_output=True,
+                text=True,
+            )
+            if result.returncode == 0:
+                github_repo = extract_github_repo_from_url(result.stdout.strip())
+        except Exception:
+            pass
+        return github_repo, repo_path
+
+    # Check if it's a GitHub URL
+    if is_url(repo):
+        github_repo = extract_github_repo_from_url(repo)
+        if github_repo:
+            return github_repo, None
+        # Not a GitHub URL, ignore
+        return None, None
+
+    # Assume it's owner/name format
+    if "/" in repo and not repo.startswith("/"):
+        return repo, None
+
+    return None, None
+
+
 def extract_text_from_content(content):
     """Extract plain text from message content.
 
@@ -401,8 +501,6 @@ def _generate_project_index(project, output_dir):
         project_name=project["name"],
         sessions=sessions_data,
         session_count=len(sessions_data),
-        css=CSS,
-        js=JS,
     )
 
     output_path = output_dir / "index.html"
@@ -440,8 +538,6 @@ def _generate_master_index(projects, output_dir):
         projects=projects_data,
         total_projects=len(projects),
         total_sessions=total_sessions,
-        css=CSS,
-        js=JS,
     )
 
     output_path = output_dir / "index.html"
@@ -492,6 +588,14 @@ def _parse_jsonl_file(filepath):
                 if obj.get("isCompactSummary"):
                     entry["isCompactSummary"] = True
 
+                # Preserve isMeta if present (skill expansions, not real user prompts)
+                if obj.get("isMeta"):
+                    entry["isMeta"] = True
+
+                # Preserve toolUseResult if present (needed for originalFile content)
+                if "toolUseResult" in obj:
+                    entry["toolUseResult"] = obj["toolUseResult"]
+
                 loglines.append(entry)
             except json.JSONDecodeError:
                 continue
@@ -629,10 +733,58 @@ def format_json(obj):
         return f"<pre>{html.escape(str(obj))}</pre>"
 
 
+# Allowed HTML tags for markdown content - anything else gets escaped
+ALLOWED_TAGS = {
+    # Block elements
+    "p",
+    "div",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "blockquote",
+    "pre",
+    "hr",
+    # Lists
+    "ul",
+    "ol",
+    "li",
+    # Inline elements
+    "a",
+    "strong",
+    "b",
+    "em",
+    "i",
+    "code",
+    "br",
+    "span",
+    # Tables
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "th",
+    "td",
+}
+
+ALLOWED_ATTRIBUTES = {
+    "a": {"href", "title"},
+    "code": {"class"},  # For syntax highlighting
+    "pre": {"class"},
+    "span": {"class"},
+    "td": {"align"},
+    "th": {"align"},
+}
+
+
 def render_markdown_text(text):
     if not text:
         return ""
-    return markdown.markdown(text, extensions=["fenced_code", "tables"])
+    raw_html = markdown.markdown(text, extensions=["fenced_code", "tables"])
+    # Sanitize HTML to only allow safe tags - escapes everything else
+    return nh3.clean(raw_html, tags=ALLOWED_TAGS, attributes=ALLOWED_ATTRIBUTES)
 
 
 def is_json_like(text):
@@ -852,7 +1004,7 @@ def is_tool_result_message(message_data):
     )
 
 
-def render_message(log_type, message_json, timestamp):
+def render_message(log_type, message_json, timestamp, prompt_num=None):
     if not message_json:
         return ""
     try:
@@ -865,7 +1017,8 @@ def render_message(log_type, message_json, timestamp):
         if is_tool_result_message(message_data):
             role_class, role_label = "tool-reply", "Tool reply"
         else:
-            role_class, role_label = "user", "User"
+            role_class = "user"
+            role_label = f"User Prompt #{prompt_num}" if prompt_num else "User"
     elif log_type == "assistant":
         content_html = render_assistant_message(message_data)
         role_class, role_label = "assistant", "Assistant"
@@ -1082,7 +1235,7 @@ def render_message(log_type, message_json, timestamp):
     }
 
     // Use MutationObserver to catch dynamically added content
-    // gistpreview.github.io may add content after initial load
+    // gisthost/gistpreview may add content after initial load
     var observer = new MutationObserver(function(mutations) {
         mutations.forEach(function(mutation) {
             mutation.addedNodes.forEach(function(node) {
@@ -1104,6 +1257,70 @@ def render_message(log_type, message_json, timestamp):
         });
     });
 
+    // Load JS from gist (relative script srcs don't work on gistpreview)
+    document.querySelectorAll('script[src]').forEach(function(script) {
+        var src = script.getAttribute('src');
+        if (src.startsWith('http')) return; // Already absolute
+        var jsUrl = 'https://gist.githubusercontent.com/raw/' + gistId + '/' + src;
+        fetch(jsUrl)
+            .then(function(r) { if (!r.ok) throw new Error('Failed'); return r.text(); })
+            .then(function(js) {
+                var newScript = document.createElement('script');
+                newScript.textContent = js;
+                document.body.appendChild(newScript);
+            })
+            .catch(function(e) { console.error('Failed to load JS:', src, e); });
+    });
+
+    // Rewrite relative links to work with gist preview URL format
+    function rewriteLinks(root) {
+        var scope = root || document;
+        var links = [];
+
+        // Check if the root itself is a link (for MutationObserver calls)
+        if (scope.matches && scope.matches('a[href]')) {
+            links.push(scope);
+        }
+
+        // Also get all descendant links
+        scope.querySelectorAll('a[href]').forEach(function(link) {
+            links.push(link);
+        });
+
+        links.forEach(function(link) {
+            var href = link.getAttribute('href');
+            // Skip already-rewritten links (issue #26 fix)
+            if (href.startsWith('?')) return;
+            // Skip external links and anchors
+            if (href.startsWith('http') || href.startsWith('#') || href.startsWith('//')) return;
+            // Handle anchor in relative URL (e.g., page-001.html#msg-123)
+            var parts = href.split('#');
+            var filename = parts[0];
+            var anchor = parts.length > 1 ? '#' + parts[1] : '';
+            link.setAttribute('href', '?' + gistId + '/' + filename + anchor);
+        });
+    }
+
+    // Run immediately
+    rewriteLinks();
+
+    // Also run on DOMContentLoaded in case DOM isn't ready yet
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() { rewriteLinks(); });
+    }
+
+    // Use MutationObserver to catch dynamically added content
+    // gistpreview.github.io may add content after initial load
+    var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                if (node.nodeType === 1) { // Element node
+                    rewriteLinks(node);
+                }
+            });
+        });
+    });
+
     // Start observing once body exists
     function startObserving() {
         if (document.body) {
@@ -1114,6 +1331,18 @@ def render_message(log_type, message_json, timestamp):
     }
     startObserving();
 
+    // Execute module scripts that were injected via innerHTML
+    // (browsers don't execute scripts added via innerHTML for security)
+    document.querySelectorAll('script[type="module"]').forEach(function(script) {
+        if (script.src) return; // Already has src, skip
+        var blob = new Blob([script.textContent], { type: 'application/javascript' });
+        var url = URL.createObjectURL(blob);
+        var newScript = document.createElement('script');
+        newScript.type = 'module';
+        newScript.src = url;
+        document.body.appendChild(newScript);
+    });
+
     // Handle fragment navigation after dynamic content loads
     // gisthost.github.io/gistpreview.github.io loads content dynamically, so the browser's
     // native fragment navigation fails because the element doesn't exist yet
@@ -1142,10 +1371,29 @@ def render_message(log_type, message_json, timestamp):
 
 
 def inject_gist_preview_js(output_dir):
-    """Inject gist preview JavaScript into all HTML files in the output directory."""
+    """Inject gist preview JavaScript into all HTML files in the output directory.
+
+    Also removes inline CODE_DATA from code.html since gist version fetches it separately.
+
+    Args:
+        output_dir: Path to the output directory containing HTML files.
+    """
     output_dir = Path(output_dir)
     for html_file in output_dir.glob("*.html"):
         content = html_file.read_text(encoding="utf-8")
+
+        # For code.html, remove the inline CODE_DATA script
+        # (gist version fetches code-data.json instead)
+        if html_file.name == "code.html":
+            import re
+
+            content = re.sub(
+                r"<script>window\.CODE_DATA = .*?;</script>\s*",
+                "",
+                content,
+                flags=re.DOTALL,
+            )
+
         # Insert the gist preview JS before the closing </body> tag
         if "</body>" in content:
             content = content.replace(
@@ -1154,22 +1402,49 @@ def inject_gist_preview_js(output_dir):
             html_file.write_text(content, encoding="utf-8")
 
 
-def create_gist(output_dir, public=False):
+def create_gist(output_dir, public=False, description=None):
     """Create a GitHub gist from the HTML files in output_dir.
 
-    Returns the gist ID on success, or raises click.ClickException on failure.
+    Args:
+        output_dir: Directory containing the HTML files to upload.
+        public: Whether to create a public gist.
+        description: Optional description for the gist.
+
+    Returns (gist_id, gist_url) tuple.
+    Raises click.ClickException on failure.
+
+    Note: This function calls inject_gist_preview_js internally. Caller should NOT
+    call it separately.
     """
     output_dir = Path(output_dir)
     html_files = list(output_dir.glob("*.html"))
     if not html_files:
         raise click.ClickException("No HTML files found to upload to gist.")
 
-    # Build the gh gist create command
-    # gh gist create file1 file2 ... --public/--private
+    # Collect all files (HTML + CSS/JS + data)
+    css_js_files = [
+        output_dir / f
+        for f in ["styles.css", "main.js", "search.js"]
+        if (output_dir / f).exists()
+    ]
+    data_files = []
+    code_data = output_dir / "code-data.json"
+    if code_data.exists():
+        data_files.append(code_data)
+
+    all_files = sorted(html_files) + css_js_files + data_files
+
+    # Inject gist preview JS into HTML files
+    inject_gist_preview_js(output_dir)
+
+    # Create gist with all files
+    click.echo(f"Creating gist with {len(all_files)} files...")
     cmd = ["gh", "gist", "create"]
-    cmd.extend(str(f) for f in sorted(html_files))
+    cmd.extend(str(f) for f in all_files)
     if public:
         cmd.append("--public")
+    if description:
+        cmd.extend(["--desc", description])
 
     try:
         result = subprocess.run(
@@ -1201,35 +1476,22 @@ def generate_index_pagination_html(total_pages):
     return _macros.index_pagination(total_pages)
 
 
-def generate_html(json_path, output_dir, github_repo=None):
-    output_dir = Path(output_dir)
-    output_dir.mkdir(exist_ok=True)
-
-    # Load session file (supports both JSON and JSONL)
-    data = parse_session_file(json_path)
-
-    loglines = data.get("loglines", [])
-
-    # Auto-detect GitHub repo if not provided
-    if github_repo is None:
-        github_repo = detect_github_repo(loglines)
-        if github_repo:
-            print(f"Auto-detected GitHub repo: {github_repo}")
-        else:
-            print(
-                "Warning: Could not auto-detect GitHub repo. Commit links will be disabled."
-            )
-
-    # Set module-level variable for render functions
-    global _github_repo
-    _github_repo = github_repo
+def build_conversations(loglines):
+    """Build conversation dicts from loglines.
 
+    Returns list of conversation dicts with keys:
+    - user_text: The user's prompt text
+    - timestamp: ISO timestamp
+    - messages: List of (log_type, message_json, timestamp) tuples
+    - is_continuation: Boolean indicating if this is a continuation
+    """
     conversations = []
     current_conv = None
     for entry in loglines:
         log_type = entry.get("type")
         timestamp = entry.get("timestamp", "")
         is_compact_summary = entry.get("isCompactSummary", False)
+        is_meta = entry.get("isMeta", False)
         message_data = entry.get("message", {})
         if not message_data:
             continue
@@ -1246,66 +1508,25 @@ def generate_html(json_path, output_dir, github_repo=None):
         if is_user_prompt:
             if current_conv:
                 conversations.append(current_conv)
+            # isMeta entries (skill expansions) are continuations, not new prompts
             current_conv = {
                 "user_text": user_text,
                 "timestamp": timestamp,
                 "messages": [(log_type, message_json, timestamp)],
-                "is_continuation": bool(is_compact_summary),
+                "is_continuation": bool(is_compact_summary or is_meta),
             }
         elif current_conv:
             current_conv["messages"].append((log_type, message_json, timestamp))
     if current_conv:
         conversations.append(current_conv)
+    return conversations
 
-    total_convs = len(conversations)
-    total_pages = (total_convs + PROMPTS_PER_PAGE - 1) // PROMPTS_PER_PAGE
 
-    for page_num in range(1, total_pages + 1):
-        start_idx = (page_num - 1) * PROMPTS_PER_PAGE
-        end_idx = min(start_idx + PROMPTS_PER_PAGE, total_convs)
-        page_convs = conversations[start_idx:end_idx]
-        messages_html = []
-        for conv in page_convs:
-            is_first = True
-            for log_type, message_json, timestamp in conv["messages"]:
-                msg_html = render_message(log_type, message_json, timestamp)
-                if msg_html:
-                    # Wrap continuation summaries in collapsed details
-                    if is_first and conv.get("is_continuation"):
-                        msg_html = f'<details class="continuation"><summary>Session continuation summary</summary>{msg_html}</details>'
-                    messages_html.append(msg_html)
-                is_first = False
-        pagination_html = generate_pagination_html(page_num, total_pages)
-        page_template = get_template("page.html")
-        page_content = page_template.render(
-            css=CSS,
-            js=JS,
-            page_num=page_num,
-            total_pages=total_pages,
-            pagination_html=pagination_html,
-            messages_html="".join(messages_html),
-        )
-        (output_dir / f"page-{page_num:03d}.html").write_text(
-            page_content, encoding="utf-8"
-        )
-        print(f"Generated page-{page_num:03d}.html")
-
-    # Calculate overall stats and collect all commits for timeline
-    total_tool_counts = {}
-    total_messages = 0
-    all_commits = []  # (timestamp, hash, message, page_num, conv_index)
-    for i, conv in enumerate(conversations):
-        total_messages += len(conv["messages"])
-        stats = analyze_conversation(conv["messages"])
-        for tool, count in stats["tool_counts"].items():
-            total_tool_counts[tool] = total_tool_counts.get(tool, 0) + count
-        page_num = (i // PROMPTS_PER_PAGE) + 1
-        for commit_hash, commit_msg, commit_ts in stats["commits"]:
-            all_commits.append((commit_ts, commit_hash, commit_msg, page_num, i))
-    total_tool_calls = sum(total_tool_counts.values())
-    total_commits = len(all_commits)
+def build_timeline_items(conversations, all_commits, github_repo):
+    """Build sorted timeline HTML items from conversations and commits.
 
-    # Build timeline items: prompts and commits merged by timestamp
+    Returns list of HTML strings sorted by timestamp.
+    """
     timeline_items = []
 
     # Add prompts
@@ -1348,33 +1569,252 @@ def generate_html(json_path, output_dir, github_repo=None):
     # Add commits as separate timeline items
     for commit_ts, commit_hash, commit_msg, page_num, conv_idx in all_commits:
         item_html = _macros.index_commit(
-            commit_hash, commit_msg, commit_ts, _github_repo
+            commit_hash, commit_msg, commit_ts, github_repo
         )
         timeline_items.append((commit_ts, "commit", item_html))
 
-    # Sort by timestamp
+    # Sort by timestamp and return just the HTML
     timeline_items.sort(key=lambda x: x[0])
-    index_items = [item[2] for item in timeline_items]
+    return [item[2] for item in timeline_items], prompt_num
+
+
+def _generate_html_impl(
+    loglines,
+    output_dir,
+    github_repo=None,
+    code_view=False,
+    exclude_deleted_files=False,
+    echo=None,
+):
+    """Internal implementation of HTML generation from loglines.
+
+    Args:
+        loglines: List of log entries
+        output_dir: Path to output directory
+        github_repo: Optional GitHub repo string (e.g., "owner/repo")
+        code_view: Whether to generate code view
+        exclude_deleted_files: Whether to filter deleted files from code view
+        echo: Function to use for output (print or click.echo wrapper)
+    """
+    if echo is None:
+        echo = print
+
+    output_dir = Path(output_dir)
+
+    # Set module-level variable for render functions
+    global _github_repo
+    _github_repo = github_repo
+
+    conversations = build_conversations(loglines)
+
+    total_convs = len(conversations)
+    total_pages = (total_convs + PROMPTS_PER_PAGE - 1) // PROMPTS_PER_PAGE
+
+    # Determine if code view will be generated (for tab navigation)
+    has_code_view = False
+    file_operations = None
+    if code_view:
+        file_operations = extract_file_operations(loglines, conversations)
+        # Optionally filter out files that no longer exist on disk
+        if exclude_deleted_files and file_operations:
+            file_operations = filter_deleted_files(file_operations)
+        has_code_view = len(file_operations) > 0
+
+    # Collect all messages HTML for the code view transcript pane
+    all_messages_html = []
+    # Collect messages per page for potential page-data.json
+    page_messages_dict = {}
+
+    # Track prompt number across all pages
+    prompt_num = 0
+
+    for page_num in range(1, total_pages + 1):
+        start_idx = (page_num - 1) * PROMPTS_PER_PAGE
+        end_idx = min(start_idx + PROMPTS_PER_PAGE, total_convs)
+        page_convs = conversations[start_idx:end_idx]
+        messages_html = []
+        # Count total messages for this page for progress display
+        total_page_messages = sum(len(c["messages"]) for c in page_convs)
+        msg_count = 0
+        for conv in page_convs:
+            is_first = True
+            for log_type, message_json, timestamp in conv["messages"]:
+                msg_count += 1
+                if total_page_messages > 50:
+                    echo(
+                        f"\rPage {page_num}/{total_pages}: rendering message {msg_count}/{total_page_messages}...",
+                        end="",
+                    )
+                # Track prompt number for user messages (not tool results)
+                current_prompt_num = None
+                if log_type == "user" and message_json:
+                    try:
+                        message_data = json.loads(message_json)
+                        if not is_tool_result_message(message_data):
+                            prompt_num += 1
+                            current_prompt_num = prompt_num
+                    except json.JSONDecodeError:
+                        pass
+                msg_html = render_message(
+                    log_type, message_json, timestamp, current_prompt_num
+                )
+                if msg_html:
+                    # Wrap continuation summaries in collapsed details
+                    if is_first and conv.get("is_continuation"):
+                        msg_html = f'<details class="continuation"><summary>Session continuation summary</summary>{msg_html}</details>'
+                    messages_html.append(msg_html)
+                is_first = False
+        if total_page_messages > 50:
+            echo("\r" + " " * 60 + "\r", end="")  # Clear the progress line
+
+        # Store messages for this page
+        page_messages_dict[str(page_num)] = "".join(messages_html)
+
+        # Collect all messages for code view transcript pane
+        all_messages_html.extend(messages_html)
+
+    # Generate page HTML files
+    for page_num in range(1, total_pages + 1):
+        pagination_html = generate_pagination_html(page_num, total_pages)
+        page_template = get_template("page.html")
+        page_content = page_template.render(
+            page_num=page_num,
+            total_pages=total_pages,
+            pagination_html=pagination_html,
+            messages_html=page_messages_dict[str(page_num)],
+            has_code_view=has_code_view,
+            active_tab="transcript",
+            use_page_data_json=False,
+            use_external_assets=False,
+        )
+        (output_dir / f"page-{page_num:03d}.html").write_text(
+            page_content, encoding="utf-8"
+        )
+        echo(f"Generated page-{page_num:03d}.html")
+
+    # Calculate overall stats and collect all commits for timeline
+    total_tool_counts = {}
+    total_messages = 0
+    all_commits = []  # (timestamp, hash, message, page_num, conv_index)
+    for i, conv in enumerate(conversations):
+        total_messages += len(conv["messages"])
+        stats = analyze_conversation(conv["messages"])
+        for tool, count in stats["tool_counts"].items():
+            total_tool_counts[tool] = total_tool_counts.get(tool, 0) + count
+        page_num = (i // PROMPTS_PER_PAGE) + 1
+        for commit_hash, commit_msg, commit_ts in stats["commits"]:
+            all_commits.append((commit_ts, commit_hash, commit_msg, page_num, i))
+    total_tool_calls = sum(total_tool_counts.values())
+    total_commits = len(all_commits)
+
+    # Build timeline items using helper
+    index_items, final_prompt_num = build_timeline_items(
+        conversations, all_commits, github_repo
+    )
+    index_items_html = "".join(index_items)
 
     index_pagination = generate_index_pagination_html(total_pages)
     index_template = get_template("index.html")
     index_content = index_template.render(
-        css=CSS,
-        js=JS,
         pagination_html=index_pagination,
-        prompt_num=prompt_num,
+        prompt_num=final_prompt_num,
         total_messages=total_messages,
         total_tool_calls=total_tool_calls,
         total_commits=total_commits,
         total_pages=total_pages,
-        index_items_html="".join(index_items),
+        index_items_html=index_items_html,
+        has_code_view=has_code_view,
+        active_tab="transcript",
+        use_index_data_json=False,
+        use_external_assets=False,
     )
     index_path = output_dir / "index.html"
     index_path.write_text(index_content, encoding="utf-8")
-    print(
+    echo(
         f"Generated {index_path.resolve()} ({total_convs} prompts, {total_pages} pages)"
     )
 
+    # Generate code view if requested
+    if has_code_view:
+        num_ops = len(file_operations)
+        num_files = len(set(op.file_path for op in file_operations))
+
+        last_phase = [None]  # Use list to allow mutation in nested function
+
+        def code_view_progress(phase, current, total):
+            # Clear line when switching phases
+            if last_phase[0] and last_phase[0] != phase:
+                echo("\r" + " " * 60 + "\r", end="")
+            last_phase[0] = phase
+
+            if phase == "operations" and num_ops > 20:
+                echo(
+                    f"\rCode view: replaying operation {current}/{total}...",
+                    end="",
+                )
+            elif phase == "files" and num_files > 5:
+                echo(
+                    f"\rCode view: processing file {current}/{total}...",
+                    end="",
+                )
+
+        msg_to_user_html, msg_to_context_id, msg_to_prompt_num = build_msg_to_user_html(
+            conversations
+        )
+        generate_code_view_html(
+            output_dir,
+            file_operations,
+            transcript_messages=all_messages_html,
+            msg_to_user_html=msg_to_user_html,
+            msg_to_context_id=msg_to_context_id,
+            msg_to_prompt_num=msg_to_prompt_num,
+            total_pages=total_pages,
+            progress_callback=code_view_progress,
+        )
+        # Clear progress line
+        if num_ops > 20 or num_files > 5:
+            echo("\r" + " " * 60 + "\r", end="")
+        echo(f"Generated code.html ({num_files} files)")
+
+
+def generate_html(
+    json_path,
+    output_dir,
+    github_repo=None,
+    code_view=False,
+    exclude_deleted_files=False,
+):
+    """Generate HTML from a session file path."""
+    output_dir = Path(output_dir)
+    output_dir.mkdir(exist_ok=True)
+
+    # Load session file (supports both JSON and JSONL)
+    data = parse_session_file(json_path)
+    loglines = data.get("loglines", [])
+
+    # Auto-detect GitHub repo if not provided
+    if github_repo is None:
+        github_repo = detect_github_repo(loglines)
+        if github_repo:
+            print(f"Auto-detected GitHub repo: {github_repo}")
+        else:
+            print(
+                "Warning: Could not auto-detect GitHub repo. Commit links will be disabled."
+            )
+
+    # Use print with flush for progress output
+    def echo(msg, end="\n"):
+        print(msg, end=end, flush=True)
+
+    _generate_html_impl(
+        loglines,
+        output_dir,
+        github_repo=github_repo,
+        code_view=code_view,
+        exclude_deleted_files=exclude_deleted_files,
+        echo=echo,
+    )
+
 
 @click.group(cls=DefaultGroup, default="local", default_if_no_args=True)
 @click.version_option(None, "-v", "--version", package_name="claude-code-transcripts")
@@ -1398,7 +1838,7 @@ def cli():
 )
 @click.option(
     "--repo",
-    help="GitHub repo (owner/name) for commit links. Auto-detected from git push output if not specified.",
+    help="Git repo: local path, GitHub URL, or owner/name. Used for commit links and code viewer file history.",
 )
 @click.option(
     "--gist",
@@ -1422,7 +1862,27 @@ def cli():
     default=10,
     help="Maximum number of sessions to show (default: 10)",
 )
-def local_cmd(output, output_auto, repo, gist, include_json, open_browser, limit):
+@click.option(
+    "--code-view",
+    is_flag=True,
+    help="Generate a code viewer tab showing files modified during the session.",
+)
+@click.option(
+    "--exclude-deleted-files",
+    is_flag=True,
+    help="Exclude files that no longer exist on disk from the code viewer.",
+)
+def local_cmd(
+    output,
+    output_auto,
+    repo,
+    gist,
+    include_json,
+    open_browser,
+    limit,
+    code_view,
+    exclude_deleted_files,
+):
     """Select and convert a local Claude Code session to HTML."""
     projects_folder = Path.home() / ".claude" / "projects"
 
@@ -1473,7 +1933,15 @@ def local_cmd(output, output_auto, repo, gist, include_json, open_browser, limit
         output = Path(tempfile.gettempdir()) / f"claude-session-{session_file.stem}"
 
     output = Path(output)
-    generate_html(session_file, output, github_repo=repo)
+    # Parse --repo to get GitHub repo name
+    github_repo, _ = parse_repo_value(repo)
+    generate_html(
+        session_file,
+        output,
+        github_repo=github_repo,
+        code_view=code_view,
+        exclude_deleted_files=exclude_deleted_files,
+    )
 
     # Show output directory
     click.echo(f"Output: {output.resolve()}")
@@ -1487,10 +1955,10 @@ def local_cmd(output, output_auto, repo, gist, include_json, open_browser, limit
         click.echo(f"JSONL: {json_dest} ({json_size_kb:.1f} KB)")
 
     if gist:
-        # Inject gist preview JS and create gist
-        inject_gist_preview_js(output)
+        # Create gist (handles inject_gist_preview_js internally)
         click.echo("Creating GitHub gist...")
-        gist_id, gist_url = create_gist(output)
+        gist_desc = f"claude-code-transcripts local {session_file.stem}"
+        gist_id, gist_url = create_gist(output, description=gist_desc)
         preview_url = f"https://gisthost.github.io/?{gist_id}/index.html"
         click.echo(f"Gist: {gist_url}")
         click.echo(f"Preview: {preview_url}")
@@ -1555,7 +2023,7 @@ def fetch_url_to_tempfile(url):
 )
 @click.option(
     "--repo",
-    help="GitHub repo (owner/name) for commit links. Auto-detected from git push output if not specified.",
+    help="Git repo: local path, GitHub URL, or owner/name. Used for commit links and code viewer file history.",
 )
 @click.option(
     "--gist",
@@ -1574,9 +2042,30 @@ def fetch_url_to_tempfile(url):
     is_flag=True,
     help="Open the generated index.html in your default browser (default if no -o specified).",
 )
-def json_cmd(json_file, output, output_auto, repo, gist, include_json, open_browser):
+@click.option(
+    "--code-view",
+    is_flag=True,
+    help="Generate a code viewer tab showing files modified during the session.",
+)
+@click.option(
+    "--exclude-deleted-files",
+    is_flag=True,
+    help="Exclude files that no longer exist on disk from the code viewer.",
+)
+def json_cmd(
+    json_file,
+    output,
+    output_auto,
+    repo,
+    gist,
+    include_json,
+    open_browser,
+    code_view,
+    exclude_deleted_files,
+):
     """Convert a Claude Code session JSON/JSONL file or URL to HTML."""
     # Handle URL input
+    original_input = json_file
     if is_url(json_file):
         click.echo(f"Fetching {json_file}...")
         temp_file = fetch_url_to_tempfile(json_file)
@@ -1590,6 +2079,9 @@ def json_cmd(json_file, output, output_auto, repo, gist, include_json, open_brow
             raise click.ClickException(f"File not found: {json_file}")
         url_name = None
 
+    # Parse --repo to get GitHub repo name
+    github_repo, _ = parse_repo_value(repo)
+
     # Determine output directory and whether to open browser
     # If no -o specified, use temp dir and open browser by default
     auto_open = output is None and not gist and not output_auto
@@ -1604,24 +2096,43 @@ def json_cmd(json_file, output, output_auto, repo, gist, include_json, open_brow
         )
 
     output = Path(output)
-    generate_html(json_file_path, output, github_repo=repo)
+    generate_html(
+        json_file_path,
+        output,
+        github_repo=github_repo,
+        code_view=code_view,
+        exclude_deleted_files=exclude_deleted_files,
+    )
 
     # Show output directory
     click.echo(f"Output: {output.resolve()}")
 
     # Copy JSON file to output directory if requested
-    if include_json:
+    if include_json and not is_url(original_input):
         output.mkdir(exist_ok=True)
         json_dest = output / json_file_path.name
         shutil.copy(json_file_path, json_dest)
         json_size_kb = json_dest.stat().st_size / 1024
         click.echo(f"JSON: {json_dest} ({json_size_kb:.1f} KB)")
+    elif include_json and is_url(original_input):
+        # For URLs, copy the temp file with a meaningful name
+        output.mkdir(exist_ok=True)
+        url_name = Path(original_input.split("?")[0]).name or "session.jsonl"
+        json_dest = output / url_name
+        shutil.copy(json_file, json_dest)
+        json_size_kb = json_dest.stat().st_size / 1024
+        click.echo(f"JSON: {json_dest} ({json_size_kb:.1f} KB)")
 
     if gist:
-        # Inject gist preview JS and create gist
-        inject_gist_preview_js(output)
+        # Create gist (handles inject_gist_preview_js internally)
         click.echo("Creating GitHub gist...")
-        gist_id, gist_url = create_gist(output)
+        # Use filename/URL for description
+        if is_url(original_input):
+            input_name = Path(original_input.split("?")[0]).name or "session"
+        else:
+            input_name = Path(original_input).stem
+        gist_desc = f"claude-code-transcripts json {input_name}"
+        gist_id, gist_url = create_gist(output, description=gist_desc)
         preview_url = f"https://gisthost.github.io/?{gist_id}/index.html"
         click.echo(f"Gist: {gist_url}")
         click.echo(f"Preview: {preview_url}")
@@ -1677,7 +2188,13 @@ def format_session_for_display(session_data):
     return f"{session_id}  {created_at[:19] if created_at else 'N/A':19}  {title}"
 
 
-def generate_html_from_session_data(session_data, output_dir, github_repo=None):
+def generate_html_from_session_data(
+    session_data,
+    output_dir,
+    github_repo=None,
+    code_view=False,
+    exclude_deleted_files=False,
+):
     """Generate HTML from session data dict (instead of file path)."""
     output_dir = Path(output_dir)
     output_dir.mkdir(exist_ok=True, parents=True)
@@ -1690,159 +2207,17 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
         if github_repo:
             click.echo(f"Auto-detected GitHub repo: {github_repo}")
 
-    # Set module-level variable for render functions
-    global _github_repo
-    _github_repo = github_repo
-
-    conversations = []
-    current_conv = None
-    for entry in loglines:
-        log_type = entry.get("type")
-        timestamp = entry.get("timestamp", "")
-        is_compact_summary = entry.get("isCompactSummary", False)
-        message_data = entry.get("message", {})
-        if not message_data:
-            continue
-        # Convert message dict to JSON string for compatibility with existing render functions
-        message_json = json.dumps(message_data)
-        is_user_prompt = False
-        user_text = None
-        if log_type == "user":
-            content = message_data.get("content", "")
-            text = extract_text_from_content(content)
-            if text:
-                is_user_prompt = True
-                user_text = text
-        if is_user_prompt:
-            if current_conv:
-                conversations.append(current_conv)
-            current_conv = {
-                "user_text": user_text,
-                "timestamp": timestamp,
-                "messages": [(log_type, message_json, timestamp)],
-                "is_continuation": bool(is_compact_summary),
-            }
-        elif current_conv:
-            current_conv["messages"].append((log_type, message_json, timestamp))
-    if current_conv:
-        conversations.append(current_conv)
-
-    total_convs = len(conversations)
-    total_pages = (total_convs + PROMPTS_PER_PAGE - 1) // PROMPTS_PER_PAGE
-
-    for page_num in range(1, total_pages + 1):
-        start_idx = (page_num - 1) * PROMPTS_PER_PAGE
-        end_idx = min(start_idx + PROMPTS_PER_PAGE, total_convs)
-        page_convs = conversations[start_idx:end_idx]
-        messages_html = []
-        for conv in page_convs:
-            is_first = True
-            for log_type, message_json, timestamp in conv["messages"]:
-                msg_html = render_message(log_type, message_json, timestamp)
-                if msg_html:
-                    # Wrap continuation summaries in collapsed details
-                    if is_first and conv.get("is_continuation"):
-                        msg_html = f'<details class="continuation"><summary>Session continuation summary</summary>{msg_html}</details>'
-                    messages_html.append(msg_html)
-                is_first = False
-        pagination_html = generate_pagination_html(page_num, total_pages)
-        page_template = get_template("page.html")
-        page_content = page_template.render(
-            css=CSS,
-            js=JS,
-            page_num=page_num,
-            total_pages=total_pages,
-            pagination_html=pagination_html,
-            messages_html="".join(messages_html),
-        )
-        (output_dir / f"page-{page_num:03d}.html").write_text(
-            page_content, encoding="utf-8"
-        )
-        click.echo(f"Generated page-{page_num:03d}.html")
-
-    # Calculate overall stats and collect all commits for timeline
-    total_tool_counts = {}
-    total_messages = 0
-    all_commits = []  # (timestamp, hash, message, page_num, conv_index)
-    for i, conv in enumerate(conversations):
-        total_messages += len(conv["messages"])
-        stats = analyze_conversation(conv["messages"])
-        for tool, count in stats["tool_counts"].items():
-            total_tool_counts[tool] = total_tool_counts.get(tool, 0) + count
-        page_num = (i // PROMPTS_PER_PAGE) + 1
-        for commit_hash, commit_msg, commit_ts in stats["commits"]:
-            all_commits.append((commit_ts, commit_hash, commit_msg, page_num, i))
-    total_tool_calls = sum(total_tool_counts.values())
-    total_commits = len(all_commits)
-
-    # Build timeline items: prompts and commits merged by timestamp
-    timeline_items = []
-
-    # Add prompts
-    prompt_num = 0
-    for i, conv in enumerate(conversations):
-        if conv.get("is_continuation"):
-            continue
-        if conv["user_text"].startswith("Stop hook feedback:"):
-            continue
-        prompt_num += 1
-        page_num = (i // PROMPTS_PER_PAGE) + 1
-        msg_id = make_msg_id(conv["timestamp"])
-        link = f"page-{page_num:03d}.html#{msg_id}"
-        rendered_content = render_markdown_text(conv["user_text"])
-
-        # Collect all messages including from subsequent continuation conversations
-        # This ensures long_texts from continuations appear with the original prompt
-        all_messages = list(conv["messages"])
-        for j in range(i + 1, len(conversations)):
-            if not conversations[j].get("is_continuation"):
-                break
-            all_messages.extend(conversations[j]["messages"])
-
-        # Analyze conversation for stats (excluding commits from inline display now)
-        stats = analyze_conversation(all_messages)
-        tool_stats_str = format_tool_stats(stats["tool_counts"])
-
-        long_texts_html = ""
-        for lt in stats["long_texts"]:
-            rendered_lt = render_markdown_text(lt)
-            long_texts_html += _macros.index_long_text(rendered_lt)
-
-        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
-        )
-        timeline_items.append((conv["timestamp"], "prompt", item_html))
-
-    # Add commits as separate timeline items
-    for commit_ts, commit_hash, commit_msg, page_num, conv_idx in all_commits:
-        item_html = _macros.index_commit(
-            commit_hash, commit_msg, commit_ts, _github_repo
-        )
-        timeline_items.append((commit_ts, "commit", item_html))
-
-    # Sort by timestamp
-    timeline_items.sort(key=lambda x: x[0])
-    index_items = [item[2] for item in timeline_items]
-
-    index_pagination = generate_index_pagination_html(total_pages)
-    index_template = get_template("index.html")
-    index_content = index_template.render(
-        css=CSS,
-        js=JS,
-        pagination_html=index_pagination,
-        prompt_num=prompt_num,
-        total_messages=total_messages,
-        total_tool_calls=total_tool_calls,
-        total_commits=total_commits,
-        total_pages=total_pages,
-        index_items_html="".join(index_items),
-    )
-    index_path = output_dir / "index.html"
-    index_path.write_text(index_content, encoding="utf-8")
-    click.echo(
-        f"Generated {index_path.resolve()} ({total_convs} prompts, {total_pages} pages)"
+    # Use click.echo for progress output
+    def echo(msg, end="\n"):
+        click.echo(msg, nl=(end == "\n"))
+
+    _generate_html_impl(
+        loglines,
+        output_dir,
+        github_repo=github_repo,
+        code_view=code_view,
+        exclude_deleted_files=exclude_deleted_files,
+        echo=echo,
     )
 
 
@@ -1866,7 +2241,7 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
 )
 @click.option(
     "--repo",
-    help="GitHub repo (owner/name) for commit links. Auto-detected from git push output if not specified.",
+    help="Git repo: local path, GitHub URL, or owner/name. Used for commit links and code viewer file history.",
 )
 @click.option(
     "--gist",
@@ -1885,6 +2260,11 @@ def generate_html_from_session_data(session_data, output_dir, github_repo=None):
     is_flag=True,
     help="Open the generated index.html in your default browser (default if no -o specified).",
 )
+@click.option(
+    "--code-view",
+    is_flag=True,
+    help="Generate a code viewer tab showing files modified during the session.",
+)
 def web_cmd(
     session_id,
     output,
@@ -1895,6 +2275,7 @@ def web_cmd(
     gist,
     include_json,
     open_browser,
+    code_view,
 ):
     """Select and convert a web session from the Claude API to HTML.
 
@@ -1966,7 +2347,14 @@ def web_cmd(
 
     output = Path(output)
     click.echo(f"Generating HTML in {output}/...")
-    generate_html_from_session_data(session_data, output, github_repo=repo)
+    # Parse --repo to get GitHub repo name
+    github_repo, _ = parse_repo_value(repo)
+    generate_html_from_session_data(
+        session_data,
+        output,
+        github_repo=github_repo,
+        code_view=code_view,
+    )
 
     # Show output directory
     click.echo(f"Output: {output.resolve()}")
@@ -1981,10 +2369,10 @@ def web_cmd(
         click.echo(f"JSON: {json_dest} ({json_size_kb:.1f} KB)")
 
     if gist:
-        # Inject gist preview JS and create gist
-        inject_gist_preview_js(output)
+        # Create gist (handles inject_gist_preview_js internally)
         click.echo("Creating GitHub gist...")
-        gist_id, gist_url = create_gist(output)
+        gist_desc = f"claude-code-transcripts web {session_id}"
+        gist_id, gist_url = create_gist(output, description=gist_desc)
         preview_url = f"https://gisthost.github.io/?{gist_id}/index.html"
         click.echo(f"Gist: {gist_url}")
         click.echo(f"Preview: {preview_url}")
diff --git a/src/claude_code_transcripts/code_view.py b/src/claude_code_transcripts/code_view.py
new file mode 100644
index 0000000..9de3052
--- /dev/null
+++ b/src/claude_code_transcripts/code_view.py
@@ -0,0 +1,1701 @@
+"""Code viewer functionality for Claude Code transcripts.
+
+This module handles the three-pane code viewer with git-based blame annotations.
+"""
+
+import html
+import json
+import os
+import re
+import shutil
+import tempfile
+from dataclasses import dataclass, field
+from datetime import datetime
+from pathlib import Path
+from typing import Optional, List, Tuple, Dict, Any, Set
+
+from git import Repo
+from git.exc import InvalidGitRepositoryError
+
+
+# ============================================================================
+# Helper Functions
+# ============================================================================
+
+
+def group_operations_by_file(
+    operations: List["FileOperation"],
+) -> Dict[str, List["FileOperation"]]:
+    """Group operations by file path and sort each group by timestamp.
+
+    Args:
+        operations: List of FileOperation objects.
+
+    Returns:
+        Dict mapping file paths to lists of FileOperation objects, sorted by timestamp.
+    """
+    file_ops: Dict[str, List["FileOperation"]] = {}
+    for op in operations:
+        if op.file_path not in file_ops:
+            file_ops[op.file_path] = []
+        file_ops[op.file_path].append(op)
+
+    # Sort each file's operations by timestamp
+    for ops in file_ops.values():
+        ops.sort(key=lambda o: o.timestamp)
+
+    return file_ops
+
+
+def read_blob(tree, file_path: str, decode: bool = True) -> Optional[str | bytes]:
+    """Read file content from a git tree/commit.
+
+    Args:
+        tree: Git tree object (e.g., commit.tree).
+        file_path: Relative path to the file within the repo.
+        decode: If True, decode as UTF-8 string; if False, return raw bytes.
+
+    Returns:
+        File content as string (if decode=True) or bytes (if decode=False),
+        or None if not found.
+    """
+    try:
+        blob = tree / file_path
+        data = blob.data_stream.read()
+        return data.decode("utf-8") if decode else data
+    except (KeyError, TypeError, ValueError):
+        return None
+
+
+# Backwards-compatible aliases
+def read_blob_content(tree, file_path: str) -> Optional[str]:
+    """Read file content from a git tree/commit as string."""
+    return read_blob(tree, file_path, decode=True)
+
+
+def read_blob_bytes(tree, file_path: str) -> Optional[bytes]:
+    """Read file content from a git tree/commit as bytes."""
+    return read_blob(tree, file_path, decode=False)
+
+
+def parse_iso_timestamp(timestamp: str) -> Optional[datetime]:
+    """Parse ISO timestamp string to datetime with UTC timezone.
+
+    Handles 'Z' suffix by converting to '+00:00' format.
+
+    Args:
+        timestamp: ISO format timestamp (e.g., "2025-12-27T16:12:36.904Z").
+
+    Returns:
+        datetime object, or None on parse failure.
+    """
+    try:
+        ts = timestamp.replace("Z", "+00:00")
+        return datetime.fromisoformat(ts)
+    except ValueError:
+        return None
+
+
+# ============================================================================
+# Constants
+# ============================================================================
+
+# Operation types for file operations
+OP_WRITE = "write"
+OP_EDIT = "edit"
+OP_DELETE = "delete"
+
+# File status for tree display
+STATUS_ADDED = "added"
+STATUS_MODIFIED = "modified"
+
+# Regex patterns for rm commands
+# Matches: rm, rm -f, rm -r, rm -rf, rm -fr, etc.
+RM_COMMAND_PATTERN = re.compile(r"^\s*rm\s+(?:-[rfivI]+\s+)*(.+)$")
+
+
+# ============================================================================
+# Data Structures
+# ============================================================================
+
+
+@dataclass
+class FileOperation:
+    """Represents a single Write or Edit operation on a file."""
+
+    file_path: str
+    operation_type: str  # "write", "edit", or "delete"
+    tool_id: str  # tool_use.id for linking
+    timestamp: str
+    page_num: int  # which page this operation appears on
+    msg_id: str  # anchor ID in the HTML page
+
+    # For Write operations
+    content: Optional[str] = None
+
+    # For Edit operations
+    old_string: Optional[str] = None
+    new_string: Optional[str] = None
+    replace_all: bool = False
+
+    # For Delete operations
+    is_recursive: bool = False  # True for directory deletes (rm -r)
+
+    # Original file content from tool result (for Edit operations)
+    # This allows reconstruction without local file access
+    original_content: Optional[str] = None
+
+
+@dataclass
+class FileState:
+    """Represents the reconstructed state of a file with blame annotations."""
+
+    file_path: str
+    operations: List[FileOperation] = field(default_factory=list)
+
+    # If we have a git repo, we can reconstruct full content
+    initial_content: Optional[str] = None  # From git or first Write
+    final_content: Optional[str] = None  # Reconstructed content
+
+    # Blame data: list of (line_text, FileOperation or None)
+    # None means the line came from initial_content (pre-session)
+    blame_lines: List[Tuple[str, Optional[FileOperation]]] = field(default_factory=list)
+
+    # For diff-only mode when no repo is available
+    diff_only: bool = False
+
+    # File status: "added" (first op is Write), "modified" (first op is Edit)
+    status: str = "modified"
+
+
+@dataclass
+class CodeViewData:
+    """All data needed to render the code viewer."""
+
+    files: Dict[str, FileState] = field(default_factory=dict)  # file_path -> FileState
+    file_tree: Dict[str, Any] = field(default_factory=dict)  # Nested dict for file tree
+    mode: str = "diff_only"  # "full" or "diff_only"
+    repo_path: Optional[str] = None
+    session_cwd: Optional[str] = None
+
+
+@dataclass
+class BlameRange:
+    """A range of consecutive lines from the same operation."""
+
+    start_line: int  # 1-indexed
+    end_line: int  # 1-indexed, inclusive
+    tool_id: Optional[str]
+    page_num: int
+    msg_id: str
+    operation_type: str  # "write" or "edit"
+    timestamp: str
+
+
+# ============================================================================
+# Code Viewer Functions
+# ============================================================================
+
+
+def extract_deleted_paths_from_bash(command: str) -> List[str]:
+    """Extract file paths deleted by an rm command.
+
+    Handles various rm forms:
+    - rm file.py
+    - rm -f file.py
+    - rm -rf /path/to/dir
+    - rm "file with spaces.py"
+    - rm 'file.py'
+
+    Args:
+        command: The bash command string.
+
+    Returns:
+        List of file paths that would be deleted by this command.
+    """
+    paths = []
+
+    # Check if this is an rm command
+    match = RM_COMMAND_PATTERN.match(command)
+    if not match:
+        return paths
+
+    # Get the path arguments part
+    args_str = match.group(1).strip()
+
+    # Parse paths - handle quoted and unquoted paths
+    # Simple approach: split on spaces but respect quotes
+    current_path = ""
+    in_quotes = None
+    i = 0
+
+    while i < len(args_str):
+        char = args_str[i]
+
+        if in_quotes:
+            if char == in_quotes:
+                # End of quoted string
+                if current_path:
+                    paths.append(current_path)
+                    current_path = ""
+                in_quotes = None
+            else:
+                current_path += char
+        elif char in ('"', "'"):
+            # Start of quoted string
+            in_quotes = char
+        elif char == " ":
+            # Space outside quotes - end of path
+            if current_path:
+                paths.append(current_path)
+                current_path = ""
+        else:
+            current_path += char
+
+        i += 1
+
+    # Don't forget the last path if not quoted
+    if current_path:
+        paths.append(current_path)
+
+    return paths
+
+
+def extract_file_operations(
+    loglines: List[Dict],
+    conversations: List[Dict],
+    prompts_per_page: int = 5,
+) -> List[FileOperation]:
+    """Extract all Write, Edit, and Delete operations from session loglines.
+
+    Delete operations are extracted from Bash rm commands. Files that are
+    ultimately deleted will be filtered out when the operations are replayed
+    in the git repo (deleted files won't exist in the final state).
+
+    Args:
+        loglines: List of parsed logline entries from the session.
+        conversations: List of conversation dicts with page mapping info.
+        prompts_per_page: Number of prompts per page for pagination.
+
+    Returns:
+        List of FileOperation objects sorted by timestamp.
+    """
+    operations = []
+
+    # Build a mapping from message content to page number and message ID
+    # We need to track which page each operation appears on
+    msg_to_page = {}
+    for conv_idx, conv in enumerate(conversations):
+        page_num = (conv_idx // prompts_per_page) + 1
+        for msg_idx, (log_type, message_json, timestamp) in enumerate(
+            conv.get("messages", [])
+        ):
+            # Generate a unique ID matching the HTML message IDs
+            msg_id = f"msg-{timestamp.replace(':', '-').replace('.', '-')}"
+            # Store timestamp -> (page_num, msg_id) mapping
+            msg_to_page[timestamp] = (page_num, msg_id)
+
+    # First pass: collect originalFile content from tool results
+    # These are stored in the toolUseResult field of user messages
+    tool_id_to_original = {}
+    for entry in loglines:
+        tool_use_result = entry.get("toolUseResult", {})
+        if tool_use_result and "originalFile" in tool_use_result:
+            # Find the matching tool_use_id from the message content
+            message = entry.get("message", {})
+            content = message.get("content", [])
+            if isinstance(content, list):
+                for block in content:
+                    if isinstance(block, dict) and block.get("type") == "tool_result":
+                        tool_use_id = block.get("tool_use_id", "")
+                        if tool_use_id:
+                            tool_id_to_original[tool_use_id] = tool_use_result.get(
+                                "originalFile"
+                            )
+
+    for entry in loglines:
+        timestamp = entry.get("timestamp", "")
+        message = entry.get("message", {})
+        content = message.get("content", [])
+
+        if not isinstance(content, list):
+            continue
+
+        for block in content:
+            if not isinstance(block, dict):
+                continue
+
+            if block.get("type") != "tool_use":
+                continue
+
+            tool_name = block.get("name", "")
+            tool_id = block.get("id", "")
+            tool_input = block.get("input", {})
+
+            # Get page and message ID from our mapping
+            fallback_msg_id = f"msg-{timestamp.replace(':', '-').replace('.', '-')}"
+            page_num, msg_id = msg_to_page.get(timestamp, (1, fallback_msg_id))
+
+            if tool_name == "Write":
+                file_path = tool_input.get("file_path", "")
+                file_content = tool_input.get("content", "")
+
+                if file_path:
+                    operations.append(
+                        FileOperation(
+                            file_path=file_path,
+                            operation_type=OP_WRITE,
+                            tool_id=tool_id,
+                            timestamp=timestamp,
+                            page_num=page_num,
+                            msg_id=msg_id,
+                            content=file_content,
+                        )
+                    )
+
+            elif tool_name == "Edit":
+                file_path = tool_input.get("file_path", "")
+                old_string = tool_input.get("old_string", "")
+                new_string = tool_input.get("new_string", "")
+                replace_all = tool_input.get("replace_all", False)
+
+                if file_path and old_string is not None and new_string is not None:
+                    # Get original file content if available from tool result
+                    original_content = tool_id_to_original.get(tool_id)
+
+                    operations.append(
+                        FileOperation(
+                            file_path=file_path,
+                            operation_type=OP_EDIT,
+                            tool_id=tool_id,
+                            timestamp=timestamp,
+                            page_num=page_num,
+                            msg_id=msg_id,
+                            old_string=old_string,
+                            new_string=new_string,
+                            replace_all=replace_all,
+                            original_content=original_content,
+                        )
+                    )
+
+            elif tool_name == "Bash":
+                # Extract delete operations from rm commands
+                command = tool_input.get("command", "")
+                deleted_paths = extract_deleted_paths_from_bash(command)
+                is_recursive = "-r" in command
+
+                for path in deleted_paths:
+                    operations.append(
+                        FileOperation(
+                            file_path=path,
+                            operation_type=OP_DELETE,
+                            tool_id=tool_id,
+                            timestamp=timestamp,
+                            page_num=page_num,
+                            msg_id=msg_id,
+                            is_recursive=is_recursive,
+                        )
+                    )
+
+    # Sort by timestamp
+    operations.sort(key=lambda op: op.timestamp)
+
+    return operations
+
+
+def filter_deleted_files(operations: List[FileOperation]) -> List[FileOperation]:
+    """Filter out operations for files that no longer exist on disk.
+
+    This is used with the --exclude-deleted-files flag to filter out files
+    that were modified during the session but have since been deleted
+    (outside of the session or by commands we didn't detect).
+
+    Only checks absolute paths - relative paths are left as-is since we can't
+    reliably determine where they are.
+
+    Args:
+        operations: List of FileOperation objects.
+
+    Returns:
+        Filtered list excluding operations for files that don't exist.
+    """
+    if not operations:
+        return operations
+
+    # Get unique file paths from Write/Edit operations (not Delete)
+    file_paths = set(
+        op.file_path for op in operations if op.operation_type in (OP_WRITE, OP_EDIT)
+    )
+
+    # Check which files exist (only for absolute paths)
+    missing_files: Set[str] = set()
+    for file_path in file_paths:
+        if os.path.isabs(file_path) and not os.path.exists(file_path):
+            missing_files.add(file_path)
+
+    if not missing_files:
+        return operations
+
+    # Filter out operations for missing files
+    return [op for op in operations if op.file_path not in missing_files]
+
+
+def normalize_file_paths(operations: List[FileOperation]) -> Tuple[str, Dict[str, str]]:
+    """Find common prefix in file paths and create normalized relative paths.
+
+    Args:
+        operations: List of FileOperation objects.
+
+    Returns:
+        Tuple of (common_prefix, path_mapping) where path_mapping maps
+        original absolute paths to normalized relative paths.
+    """
+    if not operations:
+        return "", {}
+
+    # Get all unique file paths
+    file_paths = list(set(op.file_path for op in operations))
+
+    if len(file_paths) == 1:
+        # Single file - use its parent as prefix
+        path = Path(file_paths[0])
+        prefix = str(path.parent)
+        return prefix, {file_paths[0]: path.name}
+
+    # Find common prefix
+    common = os.path.commonpath(file_paths)
+    # Make sure we're at a directory boundary
+    if not os.path.isdir(common):
+        common = os.path.dirname(common)
+
+    # Create mapping
+    path_mapping = {}
+    for fp in file_paths:
+        rel_path = os.path.relpath(fp, common)
+        path_mapping[fp] = rel_path
+
+    return common, path_mapping
+
+
+def find_git_repo_root(start_path: str) -> Optional[Path]:
+    """Walk up from start_path to find a git repository root.
+
+    Args:
+        start_path: Directory path to start searching from.
+
+    Returns:
+        Path to the git repo root, or None if not found.
+    """
+    current = Path(start_path)
+    while current != current.parent:
+        if (current / ".git").exists():
+            return current
+        current = current.parent
+    return None
+
+
+def find_commit_before_timestamp(file_repo: Repo, timestamp: str) -> Optional[Any]:
+    """Find the most recent commit before the given ISO timestamp.
+
+    Args:
+        file_repo: GitPython Repo object.
+        timestamp: ISO format timestamp (e.g., "2025-12-27T16:12:36.904Z").
+
+    Returns:
+        Git commit object, or None if not found.
+    """
+    target_dt = parse_iso_timestamp(timestamp)
+    if target_dt is None:
+        return None
+
+    # Search through commits to find one before the target time
+    try:
+        for commit in file_repo.iter_commits():
+            commit_dt = datetime.fromtimestamp(
+                commit.committed_date, tz=target_dt.tzinfo
+            )
+            if commit_dt < target_dt:
+                return commit
+    except Exception:
+        pass
+
+    return None
+
+
+def get_commits_during_session(
+    file_repo: Repo, start_timestamp: str, end_timestamp: str
+) -> List[Any]:
+    """Get all commits that happened during the session timeframe.
+
+    Args:
+        file_repo: GitPython Repo object.
+        start_timestamp: ISO format timestamp for session start.
+        end_timestamp: ISO format timestamp for session end.
+
+    Returns:
+        List of commit objects in chronological order (oldest first).
+    """
+    from datetime import timezone
+
+    start_dt = parse_iso_timestamp(start_timestamp)
+    end_dt = parse_iso_timestamp(end_timestamp)
+    if start_dt is None or end_dt is None:
+        return []
+
+    commits = []
+
+    try:
+        for commit in file_repo.iter_commits():
+            commit_dt = datetime.fromtimestamp(commit.committed_date, tz=timezone.utc)
+
+            # Skip commits after session end
+            if commit_dt > end_dt:
+                continue
+
+            # Stop when we reach commits before session start
+            if commit_dt < start_dt:
+                break
+
+            commits.append(commit)
+
+    except Exception:
+        pass
+
+    # Return in chronological order (oldest first)
+    return list(reversed(commits))
+
+
+def find_file_content_at_timestamp(
+    file_repo: Repo, file_rel_path: str, timestamp: str, session_commits: List[Any]
+) -> Optional[str]:
+    """Find the file content from the most recent commit at or before the timestamp.
+
+    Args:
+        file_repo: GitPython Repo object.
+        file_rel_path: Relative path to the file within the repo.
+        timestamp: ISO format timestamp to search for.
+        session_commits: List of commits during the session (chronological order).
+
+    Returns:
+        File content as string, or None if not found.
+    """
+    from datetime import timezone
+
+    target_dt = parse_iso_timestamp(timestamp)
+    if target_dt is None:
+        return None
+
+    try:
+        # Find the most recent commit at or before the target timestamp
+        best_commit = None
+        for commit in session_commits:
+            commit_dt = datetime.fromtimestamp(commit.committed_date, tz=timezone.utc)
+            if commit_dt <= target_dt:
+                best_commit = commit
+            else:
+                break  # Commits are chronological, so we can stop
+
+        if best_commit:
+            content = read_blob_content(best_commit.tree, file_rel_path)
+            if content is not None:
+                return content
+
+    except Exception:
+        pass
+
+    return None
+
+
+def _init_temp_repo() -> Tuple[Repo, Path]:
+    """Create and configure a temporary git repository.
+
+    Returns:
+        Tuple of (repo, temp_dir).
+    """
+    temp_dir = Path(tempfile.mkdtemp(prefix="claude-session-"))
+    repo = Repo.init(temp_dir)
+
+    with repo.config_writer() as config:
+        config.set_value("user", "name", "Claude")
+        config.set_value("user", "email", "claude@session")
+
+    return repo, temp_dir
+
+
+def _find_actual_repo_context(
+    sorted_ops: List[FileOperation], session_start: str, session_end: str
+) -> Tuple[Optional[Repo], Optional[Path], List[Any]]:
+    """Find the actual git repo and session commits from operation file paths.
+
+    Args:
+        sorted_ops: List of operations sorted by timestamp.
+        session_start: ISO timestamp of first operation.
+        session_end: ISO timestamp of last operation.
+
+    Returns:
+        Tuple of (actual_repo, actual_repo_root, session_commits).
+    """
+    for op in sorted_ops:
+        repo_root = find_git_repo_root(str(Path(op.file_path).parent))
+        if repo_root:
+            try:
+                actual_repo = Repo(repo_root)
+                session_commits = get_commits_during_session(
+                    actual_repo, session_start, session_end
+                )
+                return actual_repo, repo_root, session_commits
+            except InvalidGitRepositoryError:
+                pass
+    return None, None, []
+
+
+def _fetch_initial_content(
+    op: FileOperation,
+    full_path: Path,
+    earliest_op_by_file: Dict[str, str],
+) -> bool:
+    """Fetch initial file content using fallback chain.
+
+    Priority: pre-session git commit > HEAD > disk > original_content
+
+    Args:
+        op: The edit operation needing initial content.
+        full_path: Path where content should be written.
+        earliest_op_by_file: Map of file path to earliest operation timestamp.
+
+    Returns:
+        True if content was fetched successfully.
+    """
+    # Try to find a git repo for this file
+    file_repo_root = find_git_repo_root(str(Path(op.file_path).parent))
+    if file_repo_root:
+        try:
+            file_repo = Repo(file_repo_root)
+            file_rel_path = os.path.relpath(op.file_path, file_repo_root)
+
+            # Find commit from before the session started for this file
+            earliest_ts = earliest_op_by_file.get(op.file_path, op.timestamp)
+            pre_session_commit = find_commit_before_timestamp(file_repo, earliest_ts)
+
+            if pre_session_commit:
+                content = read_blob_bytes(pre_session_commit.tree, file_rel_path)
+                if content is not None:
+                    full_path.write_bytes(content)
+                    return True
+
+            # Fallback to HEAD (file might be new)
+            content = read_blob_bytes(file_repo.head.commit.tree, file_rel_path)
+            if content is not None:
+                full_path.write_bytes(content)
+                return True
+        except InvalidGitRepositoryError:
+            pass
+
+    # Fallback: read from disk if file exists
+    if Path(op.file_path).exists():
+        try:
+            full_path.write_text(Path(op.file_path).read_text())
+            return True
+        except Exception:
+            pass
+
+    # Fallback: use original_content from tool result (for remote sessions)
+    if op.original_content:
+        full_path.write_text(op.original_content)
+        return True
+
+    return False
+
+
+def build_file_history_repo(
+    operations: List[FileOperation],
+    progress_callback=None,
+) -> Tuple[Repo, Path, Dict[str, str]]:
+    """Create a temp git repo that replays all file operations as commits.
+
+    For Edit operations, uses intermediate commits from the actual repo to
+    resync state when our reconstruction might have diverged from reality.
+    This handles cases where edits fail to match our reconstructed content
+    but succeeded on the actual file.
+
+    Args:
+        operations: List of FileOperation objects in chronological order.
+        progress_callback: Optional callback for progress updates.
+
+    Returns:
+        Tuple of (repo, temp_dir, path_mapping) where:
+        - repo: GitPython Repo object
+        - temp_dir: Path to the temp directory
+        - path_mapping: Dict mapping original paths to relative paths
+    """
+    repo, temp_dir = _init_temp_repo()
+
+    # Get path mapping - exclude delete operations since they don't contribute files
+    # and may have relative paths that would break os.path.commonpath()
+    non_delete_ops = [op for op in operations if op.operation_type != OP_DELETE]
+    common_prefix, path_mapping = normalize_file_paths(non_delete_ops)
+
+    # Sort operations by timestamp
+    sorted_ops = sorted(operations, key=lambda o: o.timestamp)
+
+    if not sorted_ops:
+        return repo, temp_dir, path_mapping
+
+    # Get session timeframe
+    session_start = sorted_ops[0].timestamp
+    session_end = sorted_ops[-1].timestamp
+
+    # Build a map of file path -> earliest operation timestamp
+    earliest_op_by_file: Dict[str, str] = {}
+    for op in sorted_ops:
+        if op.file_path not in earliest_op_by_file:
+            earliest_op_by_file[op.file_path] = op.timestamp
+
+    # Try to find the actual git repo and get commits during the session
+    actual_repo, actual_repo_root, session_commits = _find_actual_repo_context(
+        sorted_ops, session_start, session_end
+    )
+
+    total_ops = len(sorted_ops)
+    for op_idx, op in enumerate(sorted_ops):
+        if progress_callback:
+            progress_callback("operations", op_idx + 1, total_ops)
+        # Delete operations aren't in path_mapping - handle them specially
+        if op.operation_type == OP_DELETE:
+            rel_path = None  # Will find matching files below
+            full_path = None
+        else:
+            rel_path = path_mapping.get(op.file_path, op.file_path)
+            full_path = temp_dir / rel_path
+            full_path.parent.mkdir(parents=True, exist_ok=True)
+
+        # For edit operations, try to sync from commits when our reconstruction diverges
+        if op.operation_type == OP_EDIT and actual_repo and actual_repo_root:
+            file_rel_path = os.path.relpath(op.file_path, actual_repo_root)
+            old_str = op.old_string or ""
+
+            if old_str and full_path.exists():
+                our_content = full_path.read_text()
+
+                # If old_string doesn't match our content, we may have diverged
+                if old_str not in our_content:
+                    # Try to find content where old_string DOES exist
+                    # First, check intermediate commits during the session
+                    commit_content = find_file_content_at_timestamp(
+                        actual_repo, file_rel_path, op.timestamp, session_commits
+                    )
+
+                    if commit_content and old_str in commit_content:
+                        # Resync from this commit
+                        full_path.write_text(commit_content)
+                        repo.index.add([rel_path])
+                        repo.index.commit("{}")  # Sync commit
+                    else:
+                        # Try HEAD - the final state should be correct
+                        head_content = read_blob_content(
+                            actual_repo.head.commit.tree, file_rel_path
+                        )
+                        if head_content and old_str in head_content:
+                            # Resync from HEAD
+                            full_path.write_text(head_content)
+                            repo.index.add([rel_path])
+                            repo.index.commit("{}")  # Sync commit
+
+        if op.operation_type == OP_WRITE:
+            full_path.write_text(op.content or "")
+        elif op.operation_type == OP_EDIT:
+            # If file doesn't exist, try to fetch initial content
+            if not full_path.exists():
+                fetched = _fetch_initial_content(op, full_path, earliest_op_by_file)
+
+                # Commit the initial content first (no metadata = pre-session)
+                # This allows git blame to correctly attribute unchanged lines
+                if fetched:
+                    repo.index.add([rel_path])
+                    repo.index.commit("{}")  # Empty metadata = pre-session content
+
+            if full_path.exists():
+                content = full_path.read_text()
+                old_str = op.old_string or ""
+
+                # If old_string doesn't match, try to resync from original_content
+                # This handles remote sessions where we can't access the actual repo
+                if old_str and old_str not in content and op.original_content:
+                    if old_str in op.original_content:
+                        # Resync from original_content before applying this edit
+                        content = op.original_content
+                        full_path.write_text(content)
+                        repo.index.add([rel_path])
+                        repo.index.commit("{}")  # Sync commit
+
+                if op.replace_all:
+                    content = content.replace(old_str, op.new_string or "")
+                else:
+                    content = content.replace(old_str, op.new_string or "", 1)
+                full_path.write_text(content)
+            else:
+                # Can't apply edit - file doesn't exist
+                continue
+        elif op.operation_type == OP_DELETE:
+            # Delete operation - remove file or directory contents
+            is_recursive = op.is_recursive
+            delete_path = op.file_path
+
+            # Find files to delete by matching original paths against path_mapping
+            # Delete paths may be absolute or relative, and may not be in the mapping
+            files_to_remove = []
+
+            if is_recursive:
+                # Delete all files whose original path starts with delete_path
+                delete_prefix = delete_path.rstrip("/") + "/"
+                for orig_path, mapped_rel_path in path_mapping.items():
+                    # Check if original path starts with delete prefix or equals delete path
+                    if orig_path.startswith(delete_prefix) or orig_path == delete_path:
+                        file_abs = temp_dir / mapped_rel_path
+                        if file_abs.exists():
+                            files_to_remove.append((file_abs, mapped_rel_path))
+            else:
+                # Single file delete - find by exact original path match
+                if delete_path in path_mapping:
+                    mapped_rel_path = path_mapping[delete_path]
+                    file_abs = temp_dir / mapped_rel_path
+                    if file_abs.exists():
+                        files_to_remove.append((file_abs, mapped_rel_path))
+
+            if files_to_remove:
+                for file_abs, file_rel in files_to_remove:
+                    file_abs.unlink()
+                    try:
+                        repo.index.remove([file_rel])
+                    except Exception:
+                        pass  # File might not be tracked
+
+                # Commit the deletion
+                try:
+                    repo.index.commit("{}")  # Delete commit
+                except Exception:
+                    pass  # Nothing to commit if no files were tracked
+
+            continue  # Skip the normal commit below
+
+        # Stage and commit with metadata
+        repo.index.add([rel_path])
+        metadata = json.dumps(
+            {
+                "tool_id": op.tool_id,
+                "page_num": op.page_num,
+                "msg_id": op.msg_id,
+                "timestamp": op.timestamp,
+                "operation_type": op.operation_type,
+                "file_path": op.file_path,
+            }
+        )
+        repo.index.commit(metadata)
+
+    # Note: We intentionally skip final sync here to preserve blame attribution.
+    # The displayed content may not exactly match HEAD, but blame tracking
+    # of which operations modified which lines is more important for the
+    # code viewer's purpose.
+
+    return repo, temp_dir, path_mapping
+
+
+def get_file_blame_ranges(repo: Repo, file_path: str) -> List[BlameRange]:
+    """Get blame data for a file, grouped into ranges of consecutive lines.
+
+    Args:
+        repo: GitPython Repo object.
+        file_path: Relative path to the file within the repo.
+
+    Returns:
+        List of BlameRange objects, each representing consecutive lines
+        from the same operation.
+    """
+    try:
+        blame_data = repo.blame("HEAD", file_path)
+    except Exception:
+        return []
+
+    ranges = []
+    current_line = 1
+
+    for commit, lines in blame_data:
+        if not lines:
+            continue
+
+        # Parse metadata from commit message
+        try:
+            metadata = json.loads(commit.message)
+        except json.JSONDecodeError:
+            metadata = {}
+
+        start_line = current_line
+        end_line = current_line + len(lines) - 1
+
+        ranges.append(
+            BlameRange(
+                start_line=start_line,
+                end_line=end_line,
+                tool_id=metadata.get("tool_id"),
+                page_num=metadata.get("page_num", 1),
+                msg_id=metadata.get("msg_id", ""),
+                operation_type=metadata.get("operation_type", "unknown"),
+                timestamp=metadata.get("timestamp", ""),
+            )
+        )
+
+        current_line = end_line + 1
+
+    return ranges
+
+
+def get_file_content_from_repo(repo: Repo, file_path: str) -> Optional[str]:
+    """Get the final content of a file from the repo.
+
+    Args:
+        repo: GitPython Repo object.
+        file_path: Relative path to the file within the repo.
+
+    Returns:
+        File content as string, or None if file doesn't exist.
+    """
+    try:
+        return read_blob_content(repo.head.commit.tree, file_path)
+    except ValueError:
+        # ValueError occurs when repo has no commits yet
+        return None
+
+
+def build_file_tree(file_states: Dict[str, FileState]) -> Dict[str, Any]:
+    """Build a nested dict structure for file tree UI.
+
+    Common directory prefixes shared by all files are stripped to keep the
+    tree compact.
+
+    Args:
+        file_states: Dict mapping file paths to FileState objects.
+
+    Returns:
+        Nested dict where keys are path components and leaves are FileState objects.
+    """
+    if not file_states:
+        return {}
+
+    # Split all paths into parts
+    all_parts = [Path(fp).parts for fp in file_states.keys()]
+
+    # Find the common prefix (directory components shared by all files)
+    # We want to strip directories, not filename components
+    common_prefix_len = 0
+    if all_parts:
+        # Find minimum path depth (excluding filename)
+        min_dir_depth = min(len(parts) - 1 for parts in all_parts)
+
+        for i in range(min_dir_depth):
+            # Check if all paths have the same component at position i
+            first_part = all_parts[0][i]
+            if all(parts[i] == first_part for parts in all_parts):
+                common_prefix_len = i + 1
+            else:
+                break
+
+    tree: Dict[str, Any] = {}
+
+    for file_path, file_state in file_states.items():
+        # Normalize path and split into components
+        parts = Path(file_path).parts
+
+        # Strip common prefix
+        parts = parts[common_prefix_len:]
+
+        # Navigate/create the nested structure
+        current = tree
+        for i, part in enumerate(parts[:-1]):  # All but the last part (directories)
+            if part not in current:
+                current[part] = {}
+            current = current[part]
+
+        # Add the file (last part)
+        if parts:
+            current[parts[-1]] = file_state
+
+    return tree
+
+
+def reconstruct_file_with_blame(
+    initial_content: Optional[str],
+    operations: List[FileOperation],
+) -> Tuple[str, List[Tuple[str, Optional[FileOperation]]]]:
+    """Reconstruct a file's final state with blame attribution for each line.
+
+    Applies all operations in order and tracks which operation wrote each line.
+
+    Args:
+        initial_content: The initial file content (from git), or None if new file.
+        operations: List of FileOperation objects in chronological order.
+
+    Returns:
+        Tuple of (final_content, blame_lines):
+        - final_content: The reconstructed file content as a string
+        - blame_lines: List of (line_text, operation) tuples, where operation
+          is None for lines from initial_content (pre-session)
+    """
+    # Initialize with initial content
+    if initial_content:
+        lines = initial_content.rstrip("\n").split("\n")
+        blame_lines: List[Tuple[str, Optional[FileOperation]]] = [
+            (line, None) for line in lines
+        ]
+    else:
+        blame_lines = []
+
+    # Apply each operation
+    for op in operations:
+        if op.operation_type == OP_WRITE:
+            # Write replaces all content
+            if op.content:
+                new_lines = op.content.rstrip("\n").split("\n")
+                blame_lines = [(line, op) for line in new_lines]
+
+        elif op.operation_type == OP_EDIT:
+            if op.old_string is None or op.new_string is None:
+                continue
+
+            # Reconstruct current content for searching
+            current_content = "\n".join(line for line, _ in blame_lines)
+
+            # Find where old_string occurs
+            pos = current_content.find(op.old_string)
+            if pos == -1:
+                # old_string not found, skip this operation
+                continue
+
+            # Calculate line numbers for the replacement
+            prefix = current_content[:pos]
+            prefix_lines = prefix.count("\n")
+            old_lines_count = op.old_string.count("\n") + 1
+
+            # Build new blame_lines
+            new_blame_lines = []
+
+            # Add lines before the edit (keep their original blame)
+            for i, (line, attr) in enumerate(blame_lines):
+                if i < prefix_lines:
+                    new_blame_lines.append((line, attr))
+
+            # Handle partial first line replacement
+            if prefix_lines < len(blame_lines):
+                first_affected_line = blame_lines[prefix_lines][0]
+                # Check if the prefix ends mid-line
+                last_newline = prefix.rfind("\n")
+                if last_newline == -1:
+                    prefix_in_line = prefix
+                else:
+                    prefix_in_line = prefix[last_newline + 1 :]
+
+                # Build the new content by doing the actual replacement
+                new_content = (
+                    current_content[:pos]
+                    + op.new_string
+                    + current_content[pos + len(op.old_string) :]
+                )
+                new_content_lines = new_content.rstrip("\n").split("\n")
+
+                # All lines from the edit point onward get the new attribution
+                for i, line in enumerate(new_content_lines):
+                    if i < prefix_lines:
+                        continue
+                    new_blame_lines.append((line, op))
+
+            blame_lines = new_blame_lines
+
+    # Build final content
+    final_content = "\n".join(line for line, _ in blame_lines)
+    if final_content:
+        final_content += "\n"
+
+    return final_content, blame_lines
+
+
+def build_file_states(
+    operations: List[FileOperation],
+) -> Dict[str, FileState]:
+    """Build FileState objects from a list of file operations.
+
+    Args:
+        operations: List of FileOperation objects.
+
+    Returns:
+        Dict mapping file paths to FileState objects.
+    """
+    # Group operations by file (already sorted by timestamp)
+    file_ops = group_operations_by_file(operations)
+
+    file_states = {}
+    for file_path, ops in file_ops.items():
+
+        # Determine status based on first operation
+        status = STATUS_ADDED if ops[0].operation_type == OP_WRITE else STATUS_MODIFIED
+
+        file_state = FileState(
+            file_path=file_path,
+            operations=ops,
+            diff_only=True,  # Default to diff-only
+            status=status,
+        )
+
+        # If first operation is a Write (file creation), we can show full content
+        if ops[0].operation_type == OP_WRITE:
+            final_content, blame_lines = reconstruct_file_with_blame(None, ops)
+            file_state.final_content = final_content
+            file_state.blame_lines = blame_lines
+            file_state.diff_only = False
+
+        file_states[file_path] = file_state
+
+    return file_states
+
+
+def render_file_tree_html(file_tree: Dict[str, Any], prefix: str = "") -> str:
+    """Render file tree as HTML.
+
+    Args:
+        file_tree: Nested dict structure from build_file_tree().
+        prefix: Path prefix for building full paths.
+
+    Returns:
+        HTML string for the file tree.
+    """
+    html_parts = []
+
+    # Sort items: directories first, then files
+    items = sorted(
+        file_tree.items(),
+        key=lambda x: (
+            not isinstance(x[1], dict) or isinstance(x[1], FileState),
+            x[0].lower(),
+        ),
+    )
+
+    for name, value in items:
+        full_path = f"{prefix}/{name}" if prefix else name
+
+        if isinstance(value, FileState):
+            # It's a file - status shown via CSS color
+            status_class = f"status-{value.status}"
+            html_parts.append(
+                f'<li class="tree-file {status_class}" data-path="{html.escape(value.file_path)}">'
+                f'<span class="tree-file-name">{html.escape(name)}</span>'
+                f"</li>"
+            )
+        elif isinstance(value, dict):
+            # It's a directory
+            children_html = render_file_tree_html(value, full_path)
+            html_parts.append(
+                f'<li class="tree-dir open">'
+                f'<span class="tree-toggle"></span>'
+                f'<span class="tree-dir-name">{html.escape(name)}</span>'
+                f'<ul class="tree-children">{children_html}</ul>'
+                f"</li>"
+            )
+
+    return "".join(html_parts)
+
+
+def file_state_to_dict(file_state: FileState) -> Dict[str, Any]:
+    """Convert FileState to a JSON-serializable dict.
+
+    Args:
+        file_state: The FileState object.
+
+    Returns:
+        Dict suitable for JSON serialization.
+    """
+    operations = [
+        {
+            "operation_type": op.operation_type,
+            "tool_id": op.tool_id,
+            "timestamp": op.timestamp,
+            "page_num": op.page_num,
+            "msg_id": op.msg_id,
+            "content": op.content,
+            "old_string": op.old_string,
+            "new_string": op.new_string,
+        }
+        for op in file_state.operations
+    ]
+
+    blame_lines = None
+    if file_state.blame_lines:
+        blame_lines = [
+            [
+                line,
+                (
+                    {
+                        "operation_type": op.operation_type,
+                        "page_num": op.page_num,
+                        "msg_id": op.msg_id,
+                        "timestamp": op.timestamp,
+                    }
+                    if op
+                    else None
+                ),
+            ]
+            for line, op in file_state.blame_lines
+        ]
+
+    return {
+        "file_path": file_state.file_path,
+        "diff_only": file_state.diff_only,
+        "final_content": file_state.final_content,
+        "blame_lines": blame_lines,
+        "operations": operations,
+    }
+
+
+def generate_code_view_html(
+    output_dir: Path,
+    operations: List[FileOperation],
+    transcript_messages: List[str] = None,
+    msg_to_user_html: Dict[str, str] = None,
+    msg_to_context_id: Dict[str, str] = None,
+    msg_to_prompt_num: Dict[str, int] = None,
+    total_pages: int = 1,
+    progress_callback=None,
+) -> None:
+    """Generate the code.html file with three-pane layout.
+
+    Args:
+        output_dir: Output directory.
+        operations: List of FileOperation objects.
+        transcript_messages: List of individual message HTML strings.
+        msg_to_user_html: Mapping from msg_id to rendered user message HTML for tooltips.
+        msg_to_context_id: Mapping from msg_id to context_msg_id for blame coloring.
+        msg_to_prompt_num: Mapping from msg_id to prompt number (1-indexed).
+        total_pages: Total number of transcript pages (for search feature).
+        progress_callback: Optional callback for progress updates. Called with (phase, current, total).
+    """
+    # Import here to avoid circular imports
+    from claude_code_transcripts import get_template
+
+    if not operations:
+        return
+
+    if transcript_messages is None:
+        transcript_messages = []
+
+    if msg_to_user_html is None:
+        msg_to_user_html = {}
+
+    if msg_to_context_id is None:
+        msg_to_context_id = {}
+
+    if msg_to_prompt_num is None:
+        msg_to_prompt_num = {}
+
+    # Extract message IDs from HTML for chunked rendering
+    # Messages have format: <div class="message ..." id="msg-...">
+    msg_id_pattern = re.compile(r'id="(msg-[^"]+)"')
+    messages_data = []
+    current_prompt_num = None
+    for msg_html in transcript_messages:
+        match = msg_id_pattern.search(msg_html)
+        msg_id = match.group(1) if match else None
+        # Update current prompt number when we hit a user prompt
+        if msg_id and msg_id in msg_to_prompt_num:
+            current_prompt_num = msg_to_prompt_num[msg_id]
+        # Every message gets the current prompt number (not just user prompts)
+        messages_data.append(
+            {"id": msg_id, "html": msg_html, "prompt_num": current_prompt_num}
+        )
+
+    # Build temp git repo with file history
+    if progress_callback:
+        progress_callback("operations", 0, len(operations))
+    repo, temp_dir, path_mapping = build_file_history_repo(
+        operations, progress_callback=progress_callback
+    )
+
+    try:
+        # Build file data for each file
+        file_data = {}
+
+        # Group operations by file (already sorted by timestamp)
+        ops_by_file = group_operations_by_file(operations)
+        total_files = len(ops_by_file)
+        file_count = 0
+
+        for orig_path, file_ops in ops_by_file.items():
+            file_count += 1
+            if progress_callback:
+                progress_callback("files", file_count, total_files)
+            rel_path = path_mapping.get(orig_path, orig_path)
+
+            # Get file content
+            content = get_file_content_from_repo(repo, rel_path)
+            if content is None:
+                continue
+
+            # Get blame ranges
+            blame_ranges = get_file_blame_ranges(repo, rel_path)
+
+            # Determine status
+            status = (
+                STATUS_ADDED
+                if file_ops[0].operation_type == OP_WRITE
+                else STATUS_MODIFIED
+            )
+
+            # Pre-compute color indices for each unique context_msg_id
+            # Colors are assigned per-file, with each unique context getting a sequential index
+            context_to_color_index: Dict[str, int] = {}
+            color_index = 0
+
+            # Build blame range data with pre-computed values
+            blame_range_data = []
+            for r in blame_ranges:
+                context_id = msg_to_context_id.get(r.msg_id, r.msg_id)
+
+                # Assign color index for new context IDs
+                if r.msg_id and context_id not in context_to_color_index:
+                    context_to_color_index[context_id] = color_index
+                    color_index += 1
+
+                blame_range_data.append(
+                    {
+                        "start": r.start_line,
+                        "end": r.end_line,
+                        "tool_id": r.tool_id,
+                        "page_num": r.page_num,
+                        "msg_id": r.msg_id,
+                        "context_msg_id": context_id,
+                        "prompt_num": msg_to_prompt_num.get(r.msg_id),
+                        "color_index": (
+                            context_to_color_index.get(context_id) if r.msg_id else None
+                        ),
+                        "operation_type": r.operation_type,
+                        "timestamp": r.timestamp,
+                        "user_html": msg_to_user_html.get(r.msg_id, ""),
+                    }
+                )
+
+            # Build file data
+            file_data[orig_path] = {
+                "file_path": orig_path,
+                "rel_path": rel_path,
+                "content": content,
+                "status": status,
+                "blame_ranges": blame_range_data,
+            }
+
+        # Build file states for tree (reusing existing structure)
+        file_states = {}
+        for orig_path, data in file_data.items():
+            file_states[orig_path] = FileState(
+                file_path=orig_path,
+                status=data["status"],
+            )
+
+        # Build file tree
+        file_tree = build_file_tree(file_states)
+        file_tree_html = render_file_tree_html(file_tree)
+
+        # Build code data object
+        code_data = {
+            "fileData": file_data,
+            "messagesData": messages_data,
+        }
+
+        # Write data to separate JSON file for gistpreview lazy loading
+        # (gistpreview has size limits, so it fetches this file separately)
+        (output_dir / "code-data.json").write_text(
+            json.dumps(code_data), encoding="utf-8"
+        )
+
+        # Also embed data inline for local file:// use
+        # (fetch() doesn't work with file:// URLs due to CORS)
+        code_data_json = json.dumps(code_data)
+        # Escape sequences that would confuse the HTML parser inside script tags:
+        # - </ sequences (closing tags like </div> would break parsing)
+        # - <!-- sequences (HTML comment start has special handling in scripts)
+        code_data_json = code_data_json.replace("</", "<\\/")
+        code_data_json = code_data_json.replace("<!--", "<\\!--")
+        inline_data_script = f"<script>window.CODE_DATA = {code_data_json};</script>"
+
+        # Get templates
+        code_view_template = get_template("code.html")
+        code_view_js_template = get_template("code_view.js")
+
+        # Render JavaScript
+        code_view_js = code_view_js_template.render()
+
+        # Render page
+        page_content = code_view_template.render(
+            file_tree_html=file_tree_html,
+            code_view_js=code_view_js,
+            inline_data_script=inline_data_script,
+            total_pages=total_pages,
+            has_code_view=True,
+            active_tab="code",
+        )
+
+        # Write file
+        (output_dir / "code.html").write_text(page_content, encoding="utf-8")
+
+    finally:
+        # Clean up temp directory
+        shutil.rmtree(temp_dir, ignore_errors=True)
+
+
+def _build_tooltip_html(
+    prompt_num: int,
+    conv_timestamp: str,
+    rendered_user: str,
+    context_html: str = "",
+) -> str:
+    """Build HTML for a tooltip item.
+
+    Args:
+        prompt_num: The prompt number (e.g., #1, #2).
+        conv_timestamp: ISO timestamp for the conversation.
+        rendered_user: Pre-rendered user message HTML.
+        context_html: Optional HTML for assistant context/thinking blocks.
+
+    Returns:
+        Complete HTML string for the tooltip item.
+    """
+    return f"""<div class="index-item tooltip-item"><div class="index-item-header"><span class="index-item-number">User Prompt #{prompt_num}</span><time datetime="{conv_timestamp}" data-timestamp="{conv_timestamp}">{conv_timestamp}</time></div><div class="index-item-content">{rendered_user}</div>{context_html}</div>"""
+
+
+def _truncate_for_tooltip(content: str, max_length: int = 500) -> Tuple[str, bool]:
+    """Truncate content for tooltip display, handling code blocks safely.
+
+    Truncation in the middle of a markdown code block can leave unbalanced
+    backticks, causing HTML inside code examples to be interpreted as actual
+    HTML. This function strips code blocks entirely for tooltip display.
+
+    Args:
+        content: The text content to truncate.
+        max_length: Maximum length before truncation.
+
+    Returns:
+        Tuple of (truncated content, was_truncated flag).
+    """
+    original_length = len(content)
+    was_truncated = False
+
+    # Remove code blocks entirely (they're too verbose for tooltips)
+    # This handles both fenced (```) and indented code blocks
+    content = re.sub(r"```[\s\S]*?```", "[code block]", content)
+    content = re.sub(r"```[\s\S]*$", "[code block]", content)  # Incomplete fence
+
+    # Also remove inline code that might contain HTML
+    content = re.sub(r"`[^`]+`", "`...`", content)
+
+    # Track if we stripped code blocks (significant content removed)
+    if len(content) < original_length * 0.7:  # More than 30% was code blocks
+        was_truncated = True
+
+    # Now truncate
+    if len(content) > max_length:
+        content = content[:max_length] + "..."
+        was_truncated = True
+
+    return content, was_truncated
+
+
+def _render_context_block_inner(
+    block_type: str, content: str, render_fn
+) -> Tuple[str, bool]:
+    """Render a context block (text or thinking) as inner HTML.
+
+    Args:
+        block_type: Either "text" or "thinking".
+        content: The block content to render.
+        render_fn: Function to render markdown text to HTML.
+
+    Returns:
+        Tuple of (HTML string for the block content, was_truncated flag).
+    """
+    # Truncate safely, removing code blocks
+    content, was_truncated = _truncate_for_tooltip(content)
+    rendered = render_fn(content)
+
+    if block_type == "thinking":
+        return (
+            f"""<div class="context-thinking"><div class="context-thinking-label">Thinking:</div>{rendered}</div>""",
+            was_truncated,
+        )
+    else:  # text
+        return f"""<div class="context-text">{rendered}</div>""", was_truncated
+
+
+def _render_context_section(blocks: List[Tuple[str, str, int, str]], render_fn) -> str:
+    """Render all context blocks inside a single Assistant context section.
+
+    Args:
+        blocks: List of (block_type, content, order, msg_id) tuples.
+        render_fn: Function to render markdown text to HTML.
+
+    Returns:
+        HTML string for the complete assistant context section.
+    """
+    if not blocks:
+        return ""
+
+    any_truncated = False
+    inner_html_parts = []
+
+    for block_type, content, _, _ in blocks:
+        html, was_truncated = _render_context_block_inner(
+            block_type, content, render_fn
+        )
+        inner_html_parts.append(html)
+        if was_truncated:
+            any_truncated = True
+
+    inner_html = "".join(inner_html_parts)
+    truncated_indicator = (
+        ' <span class="truncated-indicator">(truncated)</span>' if any_truncated else ""
+    )
+
+    return f"""<div class="tooltip-assistant"><div class="tooltip-assistant-label">Assistant context:{truncated_indicator}</div>{inner_html}</div>"""
+
+
+def _collect_conversation_messages(
+    conversations: List[Dict], start_index: int
+) -> List[Tuple]:
+    """Collect all messages from a conversation.
+
+    Previously this also collected following continuation conversations,
+    but now we process each conversation (including continuations) separately
+    to match how the HTML renderer counts prompt numbers.
+
+    Args:
+        conversations: Full list of conversation dicts.
+        start_index: Index of the conversation.
+
+    Returns:
+        List of (log_type, message_json, timestamp) tuples.
+    """
+    return list(conversations[start_index].get("messages", []))
+
+
+def build_msg_to_user_html(
+    conversations: List[Dict],
+) -> Tuple[Dict[str, str], Dict[str, str], Dict[str, int]]:
+    """Build a mapping from msg_id to tooltip HTML, context message ID, and prompt number.
+
+    For each tool call message, render the user prompt followed by the
+    assistant text that immediately preceded the tool call.
+
+    Args:
+        conversations: List of conversation dicts with user_text, timestamp, and messages.
+
+    Returns:
+        Tuple of:
+        - Dict mapping msg_id to rendered tooltip HTML
+        - Dict mapping msg_id to context_msg_id (the assistant message providing context)
+        - Dict mapping msg_id to prompt_num (1-indexed user prompt number)
+    """
+    # Import here to avoid circular imports
+    from claude_code_transcripts import (
+        make_msg_id,
+        render_markdown_text,
+    )
+
+    msg_to_user_html = {}
+    msg_to_context_id = {}
+    msg_to_prompt_num = {}
+    prompt_num = 0
+
+    for i, conv in enumerate(conversations):
+        # Don't skip continuations - count all user messages the same way
+        # the HTML renderer does, so prompt numbers match between
+        # transcript labels and blame tooltip labels
+
+        user_text = conv.get("user_text", "")
+        conv_timestamp = conv.get("timestamp", "")
+        if not user_text:
+            continue
+
+        prompt_num += 1
+
+        all_messages = _collect_conversation_messages(conversations, i)
+        rendered_user = render_markdown_text(user_text)
+        user_html = _build_tooltip_html(prompt_num, conv_timestamp, rendered_user)
+
+        # Track most recent thinking and text blocks with order for sequencing
+        # Each is (content, order, msg_id) tuple or None
+        last_thinking = None
+        last_text = None
+        block_order = 0
+
+        for log_type, message_json, timestamp in all_messages:
+            msg_id = make_msg_id(timestamp)
+
+            try:
+                message_data = json.loads(message_json)
+            except (json.JSONDecodeError, TypeError):
+                msg_to_user_html[msg_id] = user_html
+                msg_to_prompt_num[msg_id] = prompt_num
+                continue
+
+            content = message_data.get("content", [])
+
+            if log_type == "assistant" and isinstance(content, list):
+                has_tool_use = False
+                for block in content:
+                    if isinstance(block, dict):
+                        if block.get("type") == "text":
+                            text = block.get("text", "")
+                            if text:
+                                last_text = (text, block_order, msg_id)
+                                block_order += 1
+                        elif block.get("type") == "thinking":
+                            thinking = block.get("thinking", "")
+                            if thinking:
+                                last_thinking = (thinking, block_order, msg_id)
+                                block_order += 1
+                        elif block.get("type") == "tool_use":
+                            has_tool_use = True
+
+                # For messages with tool_use, build tooltip with context in original order
+                if has_tool_use and (last_thinking or last_text):
+                    # Collect blocks and sort by order
+                    blocks_to_render = []
+                    if last_thinking:
+                        blocks_to_render.append(
+                            (
+                                "thinking",
+                                last_thinking[0],
+                                last_thinking[1],
+                                last_thinking[2],
+                            )
+                        )
+                    if last_text:
+                        blocks_to_render.append(
+                            ("text", last_text[0], last_text[1], last_text[2])
+                        )
+                    blocks_to_render.sort(key=lambda x: x[2])
+
+                    # Use the most recent block's msg_id as the context message ID
+                    context_msg_id = blocks_to_render[-1][3]
+                    msg_to_context_id[msg_id] = context_msg_id
+
+                    context_html = _render_context_section(
+                        blocks_to_render, render_markdown_text
+                    )
+
+                    msg_to_user_html[msg_id] = _build_tooltip_html(
+                        prompt_num, conv_timestamp, rendered_user, context_html
+                    )
+                    msg_to_prompt_num[msg_id] = prompt_num
+                else:
+                    msg_to_user_html[msg_id] = user_html
+                    msg_to_prompt_num[msg_id] = prompt_num
+            else:
+                msg_to_user_html[msg_id] = user_html
+                msg_to_prompt_num[msg_id] = prompt_num
+
+    return msg_to_user_html, msg_to_context_id, msg_to_prompt_num
diff --git a/src/claude_code_transcripts/templates/base.html b/src/claude_code_transcripts/templates/base.html
index aa833f0..fa72b8a 100644
--- a/src/claude_code_transcripts/templates/base.html
+++ b/src/claude_code_transcripts/templates/base.html
@@ -4,12 +4,54 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Claude Code transcript{% endblock %}</title>
-    <style>{{ css|safe }}</style>
+{%- if use_external_assets %}
+    <link rel="stylesheet" href="styles.css">
+{%- else %}
+    <style>{% include "styles.css" %}</style>
+{%- endif %}
 </head>
 <body>
     <div class="container">
+        <div class="page-header">
+            <div id="search-box">
+                <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+            </div>
+            <div class="header-row">
+                <h1>{% block header_title %}Claude Code transcript{% endblock %}</h1>
+                {% if has_code_view %}
+                <nav class="tab-bar">
+                    <a href="index.html" class="tab{% if active_tab == 'transcript' %} active{% endif %}">Transcript</a>
+                    <a href="code.html" class="tab{% if active_tab == 'code' %} active{% endif %}">Code</a>
+                </nav>
+                {% endif %}
+            </div>
+        </div>
+
+        <dialog id="search-modal">
+            <div class="search-modal-header">
+                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="modal-search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+                <button id="modal-close-btn" type="button" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </button>
+            </div>
+            <div id="search-status"></div>
+            <div id="search-results"></div>
+        </dialog>
+
 {%- block content %}{% endblock %}
     </div>
-    <script>{{ js|safe }}</script>
+{%- if use_external_assets %}
+    <script src="main.js"></script>
+    <script src="search.js"></script>
+{%- else %}
+    <script>{% include "main.js" %}</script>
+    <script>{% include "search.js" %}</script>
+{%- endif %}
 </body>
 </html>
\ No newline at end of file
diff --git a/src/claude_code_transcripts/templates/code.html b/src/claude_code_transcripts/templates/code.html
new file mode 100644
index 0000000..17eac73
--- /dev/null
+++ b/src/claude_code_transcripts/templates/code.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block title %}Claude Code transcript - Code{% endblock %}
+
+{% block header_title %}<a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a>{% endblock %}
+
+{% block content %}
+        <div class="code-viewer three-pane">
+            <div class="file-tree-panel" id="file-tree-panel">
+                <div class="panel-header">
+                    <h3>Files Modified</h3>
+                    <button class="collapse-btn" id="collapse-file-tree" title="Collapse file tree">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                    </button>
+                </div>
+                <ul class="file-tree" id="file-tree">
+                    {{ file_tree_html|safe }}
+                </ul>
+            </div>
+
+            <div class="resize-handle" id="resize-left"></div>
+
+            <div class="code-panel" id="code-panel">
+                <div id="code-header">
+                    <span id="current-file-path">Loading...</span>
+                </div>
+                <div id="code-content">
+                    <div class="initial-loading">
+                        <p>Loading code viewer...</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="resize-handle" id="resize-right"></div>
+
+            <div class="transcript-panel" id="transcript-panel">
+                <h3>Transcript</h3>
+                <div id="pinned-user-message" class="pinned-user-message" style="display: none;">
+                    <div class="pinned-user-message-inner">
+                        <div class="pinned-user-message-label">User prompt:</div>
+                        <div class="pinned-user-content"></div>
+                    </div>
+                </div>
+                <div id="transcript-content">
+                    <!-- Messages rendered dynamically via JS for performance -->
+                    <div id="transcript-sentinel"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Inline data for local file:// access (removed for gist version) -->
+        {{ inline_data_script|safe }}
+
+        <!-- CodeMirror 6 from CDN -->
+        <script type="module">
+{{ code_view_js|safe }}
+        </script>
+{%- endblock %}
diff --git a/src/claude_code_transcripts/templates/code_view.js b/src/claude_code_transcripts/templates/code_view.js
new file mode 100644
index 0000000..a9d690d
--- /dev/null
+++ b/src/claude_code_transcripts/templates/code_view.js
@@ -0,0 +1,1307 @@
+// CodeMirror 6 imports from CDN
+import {EditorView, lineNumbers, gutter, GutterMarker, Decoration, ViewPlugin, WidgetType} from 'https://esm.sh/@codemirror/view@6';
+import {EditorState, StateField, StateEffect} from 'https://esm.sh/@codemirror/state@6';
+
+// Widget to show user message number at end of line
+class MessageNumberWidget extends WidgetType {
+    constructor(msgNum) {
+        super();
+        this.msgNum = msgNum;
+    }
+    toDOM() {
+        const span = document.createElement('span');
+        span.className = 'blame-msg-num';
+        span.textContent = `#${this.msgNum}`;
+        return span;
+    }
+    eq(other) {
+        return this.msgNum === other.msgNum;
+    }
+}
+import {syntaxHighlighting, defaultHighlightStyle} from 'https://esm.sh/@codemirror/language@6';
+import {javascript} from 'https://esm.sh/@codemirror/lang-javascript@6';
+import {python} from 'https://esm.sh/@codemirror/lang-python@6';
+import {html} from 'https://esm.sh/@codemirror/lang-html@6';
+import {css} from 'https://esm.sh/@codemirror/lang-css@6';
+import {json} from 'https://esm.sh/@codemirror/lang-json@6';
+import {markdown} from 'https://esm.sh/@codemirror/lang-markdown@6';
+
+// Format timestamps in local timezone with nice format
+function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
+
+function formatTimestamps(container) {
+    container.querySelectorAll('time[data-timestamp]').forEach(function(el) {
+        const timestamp = el.getAttribute('data-timestamp');
+        const date = new Date(timestamp);
+        el.textContent = formatTimestamp(date);
+        el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
+    });
+}
+
+// Get the URL for fetching code-data.json on gisthost/gistpreview
+function getGistDataUrl() {
+    // URL format: https://gisthost.github.io/?GIST_ID/code.html
+    const match = window.location.search.match(/^\?([^/]+)/);
+    if (match) {
+        const gistId = match[1];
+        // Use raw gist URL (no API rate limits)
+        return `https://gist.githubusercontent.com/raw/${gistId}/code-data.json`;
+    }
+    return null;
+}
+
+// Show loading state
+function showLoading() {
+    const codeContent = document.getElementById('code-content');
+    if (codeContent) {
+        codeContent.innerHTML = '<p style="padding: 16px; color: #888;">Loading code data...</p>';
+    }
+}
+
+// Show error state
+function showError(message) {
+    const codeContent = document.getElementById('code-content');
+    if (codeContent) {
+        codeContent.innerHTML = `<p style="padding: 16px; color: #f44;">Error: ${message}</p>`;
+    }
+}
+
+// Palette of colors for blame ranges
+const rangeColors = [
+    'rgba(66, 165, 245, 0.15)',   // blue
+    'rgba(102, 187, 106, 0.15)',  // green
+    'rgba(255, 167, 38, 0.15)',   // orange
+    'rgba(171, 71, 188, 0.15)',   // purple
+    'rgba(239, 83, 80, 0.15)',    // red
+    'rgba(38, 198, 218, 0.15)',   // cyan
+];
+
+// State effect for updating active range
+const setActiveRange = StateEffect.define();
+
+// State field for active range highlighting
+const activeRangeField = StateField.define({
+    create() { return Decoration.none; },
+    update(decorations, tr) {
+        for (let e of tr.effects) {
+            if (e.is(setActiveRange)) {
+                const {rangeIndex, blameRanges, doc} = e.value;
+                if (rangeIndex < 0 || rangeIndex >= blameRanges.length) {
+                    return Decoration.none;
+                }
+                const range = blameRanges[rangeIndex];
+                const decs = [];
+                for (let line = range.start; line <= range.end; line++) {
+                    if (line <= doc.lines) {
+                        const lineStart = doc.line(line).from;
+                        decs.push(
+                            Decoration.line({
+                                class: 'cm-active-range'
+                            }).range(lineStart)
+                        );
+                    }
+                }
+                return Decoration.set(decs, true);
+            }
+        }
+        return decorations;
+    },
+    provide: f => EditorView.decorations.from(f)
+});
+
+// Main initialization - uses embedded data or fetches from gist
+async function init() {
+    let data;
+
+    // Always show loading on init - parsing large embedded JSON takes time
+    showLoading();
+
+    // Check for embedded data first (works with local file:// access)
+    if (window.CODE_DATA) {
+        // Use setTimeout to allow the loading message to render before heavy processing
+        await new Promise(resolve => setTimeout(resolve, 0));
+        data = window.CODE_DATA;
+    } else {
+        // No embedded data - must be gist version, fetch from raw URL
+        showLoading();
+        const dataUrl = getGistDataUrl();
+        if (!dataUrl) {
+            showError('No data available. If viewing locally, the file may be corrupted.');
+            return;
+        }
+        try {
+            const response = await fetch(dataUrl);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+            }
+            data = await response.json();
+        } catch (err) {
+            showError(err.message);
+            console.error('Failed to load code data:', err);
+            return;
+        }
+    }
+
+    const fileData = data.fileData;
+    const messagesData = data.messagesData;
+
+    // Expose for testing
+    window.codeViewData = { messagesData, fileData };
+
+    // Windowed rendering state
+    // We render a "window" of messages, not necessarily starting from 0
+    const CHUNK_SIZE = 50;
+    let windowStart = 0;      // First rendered message index
+    let windowEnd = -1;       // Last rendered message index (-1 = none rendered)
+
+    // For backwards compatibility
+    function getRenderedCount() {
+        return windowEnd - windowStart + 1;
+    }
+
+    // Find the user prompt that contains a given message index
+    // Scans backwards to find a message with class "user" (non-continuation)
+    function findUserPromptIndex(targetIndex) {
+        for (let i = targetIndex; i >= 0; i--) {
+            const msg = messagesData[i];
+            // Check if this is a user message (not a continuation)
+            if (msg.html && msg.html.includes('class="message user"') &&
+                !msg.html.includes('class="continuation"')) {
+                return i;
+            }
+        }
+        return 0; // Fallback to start
+    }
+
+    // Build ID-to-index map for fast lookup
+    const msgIdToIndex = new Map();
+    messagesData.forEach((msg, index) => {
+        if (msg.id) {
+            msgIdToIndex.set(msg.id, index);
+        }
+    });
+
+    // Build msg_id to file/range map for navigating from transcript to code
+    const msgIdToBlame = new Map();
+    Object.entries(fileData).forEach(([filePath, fileInfo]) => {
+        (fileInfo.blame_ranges || []).forEach((range, rangeIndex) => {
+            if (range.msg_id) {
+                if (!msgIdToBlame.has(range.msg_id)) {
+                    msgIdToBlame.set(range.msg_id, { filePath, range, rangeIndex });
+                }
+            }
+        });
+    });
+
+    // Build sorted list of blame operations by message index
+    const sortedBlameOps = [];
+    msgIdToBlame.forEach((blameInfo, msgId) => {
+        const msgIndex = msgIdToIndex.get(msgId);
+        if (msgIndex !== undefined) {
+            sortedBlameOps.push({ msgId, msgIndex, ...blameInfo });
+        }
+    });
+    sortedBlameOps.sort((a, b) => a.msgIndex - b.msgIndex);
+
+    // Find the first blame operation at or after a given message index
+    function findNextBlameOp(msgIndex) {
+        for (const op of sortedBlameOps) {
+            if (op.msgIndex >= msgIndex) {
+                return op;
+            }
+        }
+        return null;
+    }
+
+    // Current state
+    let currentEditor = null;
+    let currentFilePath = null;
+    let currentBlameRanges = [];
+    let isInitializing = true;  // Skip pinned message updates during initial load
+    let isScrollingToTarget = false;  // Skip pinned updates during programmatic scrolls
+    let scrollTargetTimeout = null;
+
+    // Tooltip element for blame hover
+    let blameTooltip = null;
+
+    function createBlameTooltip() {
+        const tooltip = document.createElement('div');
+        tooltip.className = 'blame-tooltip';
+        tooltip.style.display = 'none';
+        document.body.appendChild(tooltip);
+        return tooltip;
+    }
+
+    function showBlameTooltip(event, html) {
+        if (!blameTooltip) {
+            blameTooltip = createBlameTooltip();
+        }
+        if (!html) return;
+
+        const codePanel = document.getElementById('code-panel');
+        if (codePanel) {
+            const codePanelWidth = codePanel.offsetWidth;
+            const tooltipWidth = Math.min(Math.max(codePanelWidth * 0.75, 300), 800);
+            blameTooltip.style.maxWidth = tooltipWidth + 'px';
+        }
+
+        blameTooltip.innerHTML = html;
+        formatTimestamps(blameTooltip);
+        blameTooltip.style.display = 'block';
+
+        const padding = 10;
+        let x = event.clientX + padding;
+        let y = event.clientY + padding;
+
+        const rect = blameTooltip.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width - padding;
+        const maxY = window.innerHeight - rect.height - padding;
+
+        if (x > maxX) x = event.clientX - rect.width - padding;
+        if (y > maxY) {
+            const yAbove = event.clientY - rect.height - padding;
+            if (yAbove >= 0) {
+                y = yAbove;
+            }
+        }
+
+        blameTooltip.style.left = x + 'px';
+        blameTooltip.style.top = y + 'px';
+    }
+
+    function hideBlameTooltip() {
+        if (blameTooltip) {
+            blameTooltip.style.display = 'none';
+        }
+    }
+
+    // Build maps for range colors and message numbers
+    // Uses pre-computed prompt_num and color_index from server
+    function buildRangeMaps(blameRanges) {
+        const colorMap = new Map();
+        const msgNumMap = new Map();
+
+        blameRanges.forEach((range, index) => {
+            if (range.msg_id) {
+                // Use pre-computed prompt_num from server
+                if (range.prompt_num) {
+                    msgNumMap.set(index, range.prompt_num);
+                }
+
+                // Use pre-computed color_index from server
+                if (range.color_index !== null && range.color_index !== undefined) {
+                    colorMap.set(index, rangeColors[range.color_index % rangeColors.length]);
+                }
+            }
+        });
+        return { colorMap, msgNumMap };
+    }
+
+    // Language detection based on file extension
+    function getLanguageExtension(filePath) {
+        const ext = filePath.split('.').pop().toLowerCase();
+        const langMap = {
+            'js': javascript(),
+            'jsx': javascript({jsx: true}),
+            'ts': javascript({typescript: true}),
+            'tsx': javascript({jsx: true, typescript: true}),
+            'mjs': javascript(),
+            'cjs': javascript(),
+            'py': python(),
+            'html': html(),
+            'htm': html(),
+            'css': css(),
+            'json': json(),
+            'md': markdown(),
+            'markdown': markdown(),
+        };
+        return langMap[ext] || [];
+    }
+
+    // Create line decorations for blame ranges
+    function createRangeDecorations(blameRanges, doc, colorMap, msgNumMap) {
+        const decorations = [];
+
+        blameRanges.forEach((range, index) => {
+            const color = colorMap.get(index);
+            if (!color) return;
+
+            for (let line = range.start; line <= range.end; line++) {
+                if (line <= doc.lines) {
+                    const lineInfo = doc.line(line);
+                    const lineStart = lineInfo.from;
+
+                    decorations.push(
+                        Decoration.line({
+                            attributes: {
+                                style: `background-color: ${color}`,
+                                'data-range-index': index.toString(),
+                                'data-msg-id': range.msg_id,
+                            }
+                        }).range(lineStart)
+                    );
+
+                    if (line === range.start) {
+                        const msgNum = msgNumMap.get(index);
+                        if (msgNum) {
+                            decorations.push(
+                                Decoration.widget({
+                                    widget: new MessageNumberWidget(msgNum),
+                                    side: 1,
+                                }).range(lineInfo.to)
+                            );
+                        }
+                    }
+                }
+            }
+        });
+
+        return Decoration.set(decorations, true);
+    }
+
+    // Create the scrollbar minimap
+    function createMinimap(container, blameRanges, totalLines, editor, colorMap) {
+        const existing = container.querySelector('.blame-minimap');
+        if (existing) existing.remove();
+
+        if (colorMap.size === 0 || totalLines === 0) return null;
+
+        // Check if scrolling is needed - if not, don't show minimap
+        const editorContainer = container.querySelector('.editor-container');
+        const scrollElement = editorContainer?.querySelector('.cm-scroller');
+        if (scrollElement) {
+            const needsScroll = scrollElement.scrollHeight > scrollElement.clientHeight;
+            if (!needsScroll) return null;
+        }
+
+        const minimap = document.createElement('div');
+        minimap.className = 'blame-minimap';
+
+        blameRanges.forEach((range, index) => {
+            const color = colorMap.get(index);
+            if (!color) return;
+
+            const startPercent = ((range.start - 1) / totalLines) * 100;
+            const endPercent = (range.end / totalLines) * 100;
+            const height = Math.max(endPercent - startPercent, 0.5);
+
+            const marker = document.createElement('div');
+            marker.className = 'minimap-marker';
+            marker.style.top = startPercent + '%';
+            marker.style.height = height + '%';
+            marker.style.backgroundColor = color.replace('0.15', '0.6');
+            marker.dataset.rangeIndex = index;
+            marker.dataset.line = range.start;
+            marker.title = `Lines ${range.start}-${range.end}`;
+
+            marker.addEventListener('click', () => {
+                const doc = editor.state.doc;
+                if (range.start <= doc.lines) {
+                    const lineInfo = doc.line(range.start);
+                    editor.dispatch({
+                        effects: EditorView.scrollIntoView(lineInfo.from, { y: 'center' })
+                    });
+                    highlightRange(index, blameRanges, editor);
+                    if (range.msg_id) {
+                        scrollToMessage(range.msg_id);
+                    }
+                }
+            });
+
+            minimap.appendChild(marker);
+        });
+
+        container.appendChild(minimap);
+        return minimap;
+    }
+
+    // Create editor for a file
+    function createEditor(container, content, blameRanges, filePath) {
+        container.innerHTML = '';
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'editor-wrapper';
+        container.appendChild(wrapper);
+
+        const editorContainer = document.createElement('div');
+        editorContainer.className = 'editor-container';
+        wrapper.appendChild(editorContainer);
+
+        const doc = EditorState.create({doc: content}).doc;
+        const { colorMap, msgNumMap } = buildRangeMaps(blameRanges);
+        const rangeDecorations = createRangeDecorations(blameRanges, doc, colorMap, msgNumMap);
+
+        const rangeDecorationsField = StateField.define({
+            create() { return rangeDecorations; },
+            update(decorations) { return decorations; },
+            provide: f => EditorView.decorations.from(f)
+        });
+
+        const clickHandler = EditorView.domEventHandlers({
+            click: (event, view) => {
+                const target = event.target;
+                if (target.closest('.cm-line')) {
+                    const line = target.closest('.cm-line');
+                    const rangeIndex = line.getAttribute('data-range-index');
+                    if (rangeIndex !== null) {
+                        highlightRange(parseInt(rangeIndex), blameRanges, view);
+                        const range = blameRanges[parseInt(rangeIndex)];
+                        if (range) {
+                            updateLineHash(range.start);
+                            // Scroll to the corresponding message in the transcript
+                            if (range.msg_id) {
+                                scrollToMessage(range.msg_id);
+                            }
+                        }
+                    }
+                }
+            },
+            mouseover: (event, view) => {
+                const target = event.target;
+                const line = target.closest('.cm-line');
+                if (line) {
+                    const rangeIndex = line.getAttribute('data-range-index');
+                    if (rangeIndex !== null) {
+                        const range = blameRanges[parseInt(rangeIndex)];
+                        if (range && range.user_html) {
+                            showBlameTooltip(event, range.user_html);
+                        }
+                    }
+                }
+            },
+            mouseout: (event, view) => {
+                const target = event.target;
+                const line = target.closest('.cm-line');
+                if (line) {
+                    hideBlameTooltip();
+                }
+            },
+            mousemove: (event, view) => {
+                const target = event.target;
+                const line = target.closest('.cm-line');
+                if (line && line.getAttribute('data-range-index') !== null) {
+                    const rangeIndex = parseInt(line.getAttribute('data-range-index'));
+                    const range = blameRanges[rangeIndex];
+                    if (range && range.user_html && blameTooltip && blameTooltip.style.display !== 'none') {
+                        showBlameTooltip(event, range.user_html);
+                    }
+                }
+            }
+        });
+
+        const extensions = [
+            lineNumbers(),
+            EditorView.editable.of(false),
+            EditorView.lineWrapping,
+            syntaxHighlighting(defaultHighlightStyle),
+            getLanguageExtension(filePath),
+            rangeDecorationsField,
+            activeRangeField,
+            clickHandler,
+        ];
+
+        const state = EditorState.create({
+            doc: content,
+            extensions: extensions,
+        });
+
+        currentEditor = new EditorView({
+            state,
+            parent: editorContainer,
+        });
+
+        createMinimap(wrapper, blameRanges, doc.lines, currentEditor, colorMap);
+
+        return currentEditor;
+    }
+
+    // Highlight a specific range in the editor
+    function highlightRange(rangeIndex, blameRanges, view) {
+        view.dispatch({
+            effects: setActiveRange.of({
+                rangeIndex,
+                blameRanges,
+                doc: view.state.doc
+            })
+        });
+    }
+
+    // Initialize truncation for elements within a container
+    function initTruncation(container) {
+        container.querySelectorAll('.truncatable:not(.truncation-initialized)').forEach(function(wrapper) {
+            wrapper.classList.add('truncation-initialized');
+            const content = wrapper.querySelector('.truncatable-content');
+            const btn = wrapper.querySelector('.expand-btn');
+            if (content && content.scrollHeight > 250) {
+                wrapper.classList.add('truncated');
+                if (btn) {
+                    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';
+                        }
+                    });
+                }
+            }
+        });
+    }
+
+    // Append messages to the end of the transcript
+    function appendMessages(startIdx, endIdx) {
+        const transcriptContent = document.getElementById('transcript-content');
+        const sentinel = document.getElementById('transcript-sentinel');
+        let added = false;
+
+        for (let i = startIdx; i <= endIdx && i < messagesData.length; i++) {
+            if (i > windowEnd) {
+                const msg = messagesData[i];
+                const div = document.createElement('div');
+                div.innerHTML = msg.html;
+                while (div.firstChild) {
+                    // Insert before the sentinel
+                    transcriptContent.insertBefore(div.firstChild, sentinel);
+                }
+                windowEnd = i;
+                added = true;
+            }
+        }
+
+        if (added) {
+            initTruncation(transcriptContent);
+            formatTimestamps(transcriptContent);
+        }
+    }
+
+    // Prepend messages to the beginning of the transcript
+    function prependMessages(startIdx, endIdx) {
+        const transcriptContent = document.getElementById('transcript-content');
+        const topSentinel = document.getElementById('transcript-sentinel-top');
+        let added = false;
+
+        // Prepend in reverse order so they appear in correct sequence
+        for (let i = endIdx; i >= startIdx && i >= 0; i--) {
+            if (i < windowStart) {
+                const msg = messagesData[i];
+                const div = document.createElement('div');
+                div.innerHTML = msg.html;
+                // Insert all children after the top sentinel
+                const children = Array.from(div.childNodes);
+                const insertPoint = topSentinel ? topSentinel.nextSibling : transcriptContent.firstChild;
+                children.forEach(child => {
+                    transcriptContent.insertBefore(child, insertPoint);
+                });
+                windowStart = i;
+                added = true;
+            }
+        }
+
+        if (added) {
+            initTruncation(transcriptContent);
+            formatTimestamps(transcriptContent);
+        }
+    }
+
+    // Clear and rebuild transcript starting from a specific index
+    function teleportToMessage(targetIndex) {
+        const transcriptContent = document.getElementById('transcript-content');
+        const transcriptPanel = document.getElementById('transcript-panel');
+
+        // Find the user prompt containing this message
+        const promptStart = findUserPromptIndex(targetIndex);
+
+        // Clear existing content (except sentinels - we'll recreate them)
+        transcriptContent.innerHTML = '';
+
+        // Add top sentinel for upward loading
+        const topSentinel = document.createElement('div');
+        topSentinel.id = 'transcript-sentinel-top';
+        topSentinel.style.height = '1px';
+        transcriptContent.appendChild(topSentinel);
+
+        // Add bottom sentinel
+        const bottomSentinel = document.createElement('div');
+        bottomSentinel.id = 'transcript-sentinel';
+        bottomSentinel.style.height = '1px';
+        transcriptContent.appendChild(bottomSentinel);
+
+        // Reset window state
+        windowStart = promptStart;
+        windowEnd = promptStart - 1;  // Will be updated by appendMessages
+
+        // Render from user prompt up to AND INCLUDING the target message
+        // This ensures the target is always in the DOM after teleporting
+        const initialEnd = Math.max(
+            Math.min(promptStart + CHUNK_SIZE - 1, messagesData.length - 1),
+            targetIndex
+        );
+        appendMessages(promptStart, initialEnd);
+
+        // Set up observers for the new sentinels
+        setupScrollObservers();
+
+        // Reset scroll position
+        transcriptPanel.scrollTop = 0;
+    }
+
+    // Render messages down to targetIndex (extending window downward)
+    function renderMessagesDownTo(targetIndex) {
+        if (targetIndex <= windowEnd) return;
+        appendMessages(windowEnd + 1, targetIndex);
+    }
+
+    // Render messages up to targetIndex (extending window upward)
+    function renderMessagesUpTo(targetIndex) {
+        if (targetIndex >= windowStart) return;
+        prependMessages(targetIndex, windowStart - 1);
+    }
+
+    // Render next chunk downward (for lazy loading)
+    function renderNextChunk() {
+        const targetIndex = Math.min(windowEnd + CHUNK_SIZE, messagesData.length - 1);
+        appendMessages(windowEnd + 1, targetIndex);
+    }
+
+    // Render previous chunk upward (for lazy loading)
+    function renderPrevChunk() {
+        if (windowStart <= 0) return;
+        const targetIndex = Math.max(windowStart - CHUNK_SIZE, 0);
+        prependMessages(targetIndex, windowStart - 1);
+    }
+
+    // Check if target message is within or near the current window
+    function isNearCurrentWindow(msgIndex) {
+        if (windowEnd < 0) return false;  // Nothing rendered yet
+        const NEAR_THRESHOLD = CHUNK_SIZE * 2;
+        return msgIndex >= windowStart - NEAR_THRESHOLD &&
+               msgIndex <= windowEnd + NEAR_THRESHOLD;
+    }
+
+    // Scroll observers for lazy loading
+    let topObserver = null;
+    let bottomObserver = null;
+
+    function setupScrollObservers() {
+        // Clean up existing observers
+        if (topObserver) topObserver.disconnect();
+        if (bottomObserver) bottomObserver.disconnect();
+
+        const transcriptPanel = document.getElementById('transcript-panel');
+
+        // Bottom sentinel observer (load more below)
+        const bottomSentinel = document.getElementById('transcript-sentinel');
+        if (bottomSentinel) {
+            bottomObserver = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting && windowEnd < messagesData.length - 1) {
+                    renderNextChunk();
+                }
+            }, {
+                root: transcriptPanel,
+                rootMargin: '200px',
+            });
+            bottomObserver.observe(bottomSentinel);
+        }
+
+        // Top sentinel observer (load more above)
+        const topSentinel = document.getElementById('transcript-sentinel-top');
+        if (topSentinel) {
+            topObserver = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting && windowStart > 0) {
+                    // Save scroll position before prepending
+                    const scrollTop = transcriptPanel.scrollTop;
+                    const scrollHeight = transcriptPanel.scrollHeight;
+
+                    renderPrevChunk();
+
+                    // Adjust scroll position to maintain visual position
+                    const newScrollHeight = transcriptPanel.scrollHeight;
+                    const heightDiff = newScrollHeight - scrollHeight;
+                    transcriptPanel.scrollTop = scrollTop + heightDiff;
+                }
+            }, {
+                root: transcriptPanel,
+                rootMargin: '200px',
+            });
+            topObserver.observe(topSentinel);
+        }
+    }
+
+    // Calculate sticky header offset
+    function getStickyHeaderOffset() {
+        const panel = document.getElementById('transcript-panel');
+        const h3 = panel?.querySelector('h3');
+        const pinnedMsg = document.getElementById('pinned-user-message');
+
+        let offset = 0;
+        if (h3) offset += h3.offsetHeight;
+        if (pinnedMsg && pinnedMsg.style.display !== 'none') {
+            offset += pinnedMsg.offsetHeight;
+        }
+        return offset + 8;
+    }
+
+    // Scroll to a message in the transcript
+    // Uses teleportation for distant messages to avoid rendering thousands of DOM nodes
+    // Always ensures the user prompt for the message is also loaded for context
+    function scrollToMessage(msgId) {
+        const transcriptContent = document.getElementById('transcript-content');
+        const transcriptPanel = document.getElementById('transcript-panel');
+
+        const msgIndex = msgIdToIndex.get(msgId);
+        if (msgIndex === undefined) return;
+
+        // Find the user prompt for this message - we always want it in the window
+        const userPromptIndex = findUserPromptIndex(msgIndex);
+
+        // Check if both user prompt and target message are in/near the window
+        const targetNear = isNearCurrentWindow(msgIndex);
+        const promptNear = isNearCurrentWindow(userPromptIndex);
+
+        // Track if we teleported (need longer delay for layout)
+        let didTeleport = false;
+
+        // If either user prompt or target is far from window, teleport
+        if (!targetNear || !promptNear) {
+            teleportToMessage(msgIndex);
+            didTeleport = true;
+        } else {
+            // Both are near the window - extend as needed
+            // Ensure user prompt is loaded (extend upward if needed)
+            if (userPromptIndex < windowStart) {
+                renderMessagesUpTo(userPromptIndex);
+            }
+            // Ensure target message is loaded (extend downward if needed)
+            if (msgIndex > windowEnd) {
+                renderMessagesDownTo(msgIndex);
+            }
+        }
+
+        // Helper to perform the scroll after DOM is ready
+        const performScroll = () => {
+            const message = transcriptContent.querySelector(`#${CSS.escape(msgId)}`);
+            if (message) {
+                transcriptContent.querySelectorAll('.message.highlighted').forEach(el => {
+                    el.classList.remove('highlighted');
+                });
+                message.classList.add('highlighted');
+
+                const stickyOffset = getStickyHeaderOffset();
+                const messageTop = message.offsetTop;
+                const targetScroll = messageTop - stickyOffset;
+
+                // Suppress pinned message updates during scroll
+                isScrollingToTarget = true;
+                if (scrollTargetTimeout) clearTimeout(scrollTargetTimeout);
+
+                // Use instant scroll after teleport (jumping anyway), smooth otherwise
+                transcriptPanel.scrollTo({
+                    top: targetScroll,
+                    behavior: didTeleport ? 'instant' : 'smooth'
+                });
+
+                // Re-enable pinned updates after scroll completes
+                scrollTargetTimeout = setTimeout(() => {
+                    isScrollingToTarget = false;
+                    updatePinnedUserMessage();
+                }, didTeleport ? 100 : 500);
+            }
+        };
+
+        // After teleporting, wait for layout to complete before scrolling
+        // Teleport adds many DOM elements - need time for browser to lay them out
+        if (didTeleport) {
+            // Use setTimeout to wait for layout, then requestAnimationFrame for paint
+            setTimeout(() => {
+                requestAnimationFrame(performScroll);
+            }, 50);
+        } else {
+            requestAnimationFrame(performScroll);
+        }
+    }
+
+    // Load file content
+    // skipInitialScroll: if true, don't scroll to first blame range (caller will handle scroll)
+    function loadFile(path, skipInitialScroll = false) {
+        currentFilePath = path;
+
+        const codeContent = document.getElementById('code-content');
+        const currentFilePathEl = document.getElementById('current-file-path');
+
+        currentFilePathEl.textContent = path;
+
+        const fileInfo = fileData[path];
+        if (!fileInfo) {
+            codeContent.innerHTML = '<p style="padding: 16px;">File not found</p>';
+            return;
+        }
+
+        // Always show loading indicator - gives visual feedback during file switch
+        codeContent.innerHTML = '<div class="initial-loading"><p>Loading file...</p></div>';
+
+        // Use setTimeout to ensure loading message renders before heavy work
+        setTimeout(() => {
+            const content = fileInfo.content || '';
+            currentBlameRanges = fileInfo.blame_ranges || [];
+            createEditor(codeContent, content, currentBlameRanges, path);
+
+            // Scroll to first blame range and align transcript (without highlighting)
+            // Skip if caller will handle scroll (e.g., hash navigation to specific line)
+            if (!skipInitialScroll) {
+                const firstOpIndex = currentBlameRanges.findIndex(r => r.msg_id);
+                if (firstOpIndex >= 0) {
+                    const firstOpRange = currentBlameRanges[firstOpIndex];
+                    scrollEditorToLine(firstOpRange.start);
+                    // Scroll transcript to the corresponding message (no highlight on initial load)
+                    if (firstOpRange.msg_id) {
+                        scrollToMessage(firstOpRange.msg_id);
+                    }
+                }
+            }
+        }, 10);
+    }
+
+    // Scroll editor to a line
+    function scrollEditorToLine(lineNumber) {
+        if (!currentEditor) return;
+        const doc = currentEditor.state.doc;
+        if (lineNumber < 1 || lineNumber > doc.lines) return;
+
+        const line = doc.line(lineNumber);
+        currentEditor.dispatch({
+            effects: EditorView.scrollIntoView(line.from, { y: 'center' })
+        });
+    }
+
+    // Update URL hash for deep-linking to a line
+    function updateLineHash(lineNumber) {
+        if (!currentFilePath) return;
+        // Use format: #path/to/file:L{number}
+        const hash = `${encodeURIComponent(currentFilePath)}:L${lineNumber}`;
+        history.replaceState(null, '', `#${hash}`);
+    }
+
+    // Parse URL hash and navigate to file/line
+    // Supports formats: #L5, #path/to/file:L5, #path%2Fto%2Ffile:L5
+    function navigateFromHash() {
+        const hash = window.location.hash.slice(1); // Remove leading #
+        if (!hash) return false;
+
+        let filePath = null;
+        let lineNumber = null;
+
+        // Check for file:L{number} format
+        const fileLineMatch = hash.match(/^(.+):L(\d+)$/);
+        if (fileLineMatch) {
+            filePath = decodeURIComponent(fileLineMatch[1]);
+            lineNumber = parseInt(fileLineMatch[2]);
+        } else {
+            // Check for just L{number} format (uses current file)
+            const lineMatch = hash.match(/^L(\d+)$/);
+            if (lineMatch) {
+                lineNumber = parseInt(lineMatch[1]);
+                filePath = currentFilePath; // Use current file
+            }
+        }
+
+        if (lineNumber) {
+            // Helper to scroll to line and select blame
+            const scrollAndSelect = () => {
+                scrollEditorToLine(lineNumber);
+                // Find and highlight the range at this line
+                if (currentBlameRanges.length > 0 && currentEditor) {
+                    const rangeIndex = currentBlameRanges.findIndex(r =>
+                        lineNumber >= r.start && lineNumber <= r.end
+                    );
+                    if (rangeIndex >= 0) {
+                        const range = currentBlameRanges[rangeIndex];
+                        highlightRange(rangeIndex, currentBlameRanges, currentEditor);
+                        // Also scroll transcript to the corresponding message
+                        if (range.msg_id) {
+                            scrollToMessage(range.msg_id);
+                        }
+                    }
+                }
+            };
+
+            // If we have a file path and it's different from current, load it
+            if (filePath && filePath !== currentFilePath) {
+                // Find and click the file in the tree
+                const fileEl = document.querySelector(`.tree-file[data-path="${CSS.escape(filePath)}"]`);
+                if (fileEl) {
+                    document.querySelectorAll('.tree-file.selected').forEach(el => el.classList.remove('selected'));
+                    fileEl.classList.add('selected');
+                    // Skip initial scroll - scrollAndSelect will handle it
+                    loadFile(filePath, true);
+                    // Wait for file to load (loadFile uses setTimeout 10ms + rendering time)
+                    setTimeout(scrollAndSelect, 100);
+                }
+                return true;
+            } else if (filePath) {
+                // Same file already loaded, just scroll
+                requestAnimationFrame(scrollAndSelect);
+                return true;
+            } else if (lineNumber && !currentFilePath) {
+                // Line number but no file loaded yet - let caller load first file
+                // We'll handle the scroll after file loads
+                return false;
+            }
+            return true;
+        }
+        return false;
+    }
+
+    // Navigate from message to code
+    function navigateToBlame(msgId) {
+        const blameInfo = msgIdToBlame.get(msgId);
+        if (!blameInfo) return false;
+
+        const { filePath, range, rangeIndex } = blameInfo;
+
+        const fileEl = document.querySelector(`.tree-file[data-path="${CSS.escape(filePath)}"]`);
+        if (fileEl) {
+            let parent = fileEl.parentElement;
+            while (parent && parent.id !== 'file-tree') {
+                if (parent.classList.contains('tree-dir') && !parent.classList.contains('open')) {
+                    parent.classList.add('open');
+                }
+                parent = parent.parentElement;
+            }
+
+            document.querySelectorAll('.tree-file.selected').forEach(el => el.classList.remove('selected'));
+            fileEl.classList.add('selected');
+        }
+
+        // Helper to scroll and highlight the range
+        const scrollAndHighlight = () => {
+            scrollEditorToLine(range.start);
+            if (currentEditor && currentBlameRanges.length > 0) {
+                const idx = currentBlameRanges.findIndex(r => r.msg_id === msgId && r.start === range.start);
+                if (idx >= 0) {
+                    highlightRange(idx, currentBlameRanges, currentEditor);
+                }
+            }
+            // Don't auto-scroll transcript - user is already viewing it
+        };
+
+        if (currentFilePath !== filePath) {
+            // Skip initial scroll - scrollAndHighlight will handle it
+            loadFile(filePath, true);
+            // Wait for file to load (loadFile uses setTimeout 10ms + rendering time)
+            setTimeout(scrollAndHighlight, 100);
+        } else {
+            requestAnimationFrame(scrollAndHighlight);
+        }
+
+        return true;
+    }
+
+    // Set up file tree interaction
+    document.getElementById('file-tree').addEventListener('click', (e) => {
+        const dir = e.target.closest('.tree-dir');
+        if (dir && (e.target.classList.contains('tree-toggle') || e.target.classList.contains('tree-dir-name'))) {
+            dir.classList.toggle('open');
+            return;
+        }
+
+        const file = e.target.closest('.tree-file');
+        if (file) {
+            document.querySelectorAll('.tree-file.selected').forEach((el) => {
+                el.classList.remove('selected');
+            });
+            file.classList.add('selected');
+            loadFile(file.dataset.path);
+        }
+    });
+
+    // Check URL hash for deep-linking FIRST
+    // If hash specifies a file, we load that directly instead of the first file
+    // This avoids race conditions between loading the first file and then the hash file
+    const hashFileLoaded = navigateFromHash();
+
+    // If no hash or hash didn't specify a file, load the first file
+    if (!hashFileLoaded) {
+        const firstFile = document.querySelector('.tree-file');
+        if (firstFile) {
+            firstFile.click();
+            // If hash has just a line number (no file), apply it after first file loads
+            if (window.location.hash.match(/^#L\d+$/)) {
+                setTimeout(() => navigateFromHash(), 100);
+            }
+        }
+    }
+
+    // Mark initialization complete after a delay to let scrolling finish
+    setTimeout(() => {
+        isInitializing = false;
+        updatePinnedUserMessage();
+    }, 500);
+
+    // Handle hash changes (browser back/forward)
+    window.addEventListener('hashchange', () => {
+        navigateFromHash();
+    });
+
+    // Resizable panels
+    function initResize() {
+        const fileTreePanel = document.getElementById('file-tree-panel');
+        const transcriptPanel = document.getElementById('transcript-panel');
+        const resizeLeft = document.getElementById('resize-left');
+        const resizeRight = document.getElementById('resize-right');
+
+        let isResizing = false;
+        let currentHandle = null;
+        let startX = 0;
+        let startWidthLeft = 0;
+        let startWidthRight = 0;
+
+        function startResize(e, handle) {
+            isResizing = true;
+            currentHandle = handle;
+            startX = e.clientX;
+            handle.classList.add('dragging');
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+
+            if (handle === resizeLeft) {
+                startWidthLeft = fileTreePanel.offsetWidth;
+            } else {
+                startWidthRight = transcriptPanel.offsetWidth;
+            }
+
+            e.preventDefault();
+        }
+
+        function doResize(e) {
+            if (!isResizing) return;
+
+            const dx = e.clientX - startX;
+
+            if (currentHandle === resizeLeft) {
+                const newWidth = Math.max(200, Math.min(500, startWidthLeft + dx));
+                fileTreePanel.style.width = newWidth + 'px';
+            } else {
+                const newWidth = Math.max(280, Math.min(700, startWidthRight - dx));
+                transcriptPanel.style.width = newWidth + 'px';
+            }
+        }
+
+        function stopResize() {
+            if (!isResizing) return;
+            isResizing = false;
+            if (currentHandle) {
+                currentHandle.classList.remove('dragging');
+            }
+            currentHandle = null;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        }
+
+        resizeLeft.addEventListener('mousedown', (e) => startResize(e, resizeLeft));
+        resizeRight.addEventListener('mousedown', (e) => startResize(e, resizeRight));
+        document.addEventListener('mousemove', doResize);
+        document.addEventListener('mouseup', stopResize);
+    }
+
+    initResize();
+
+    // File tree collapse/expand
+    const collapseBtn = document.getElementById('collapse-file-tree');
+    const fileTreePanel = document.getElementById('file-tree-panel');
+    const resizeLeftHandle = document.getElementById('resize-left');
+
+    if (collapseBtn && fileTreePanel) {
+        collapseBtn.addEventListener('click', () => {
+            fileTreePanel.classList.toggle('collapsed');
+            if (resizeLeftHandle) {
+                resizeLeftHandle.style.display = fileTreePanel.classList.contains('collapsed') ? 'none' : '';
+            }
+            collapseBtn.title = fileTreePanel.classList.contains('collapsed') ? 'Expand file tree' : 'Collapse file tree';
+        });
+    }
+
+    // Initialize transcript with windowed rendering
+    // Add top sentinel for upward lazy loading
+    const transcriptContentInit = document.getElementById('transcript-content');
+    const topSentinelInit = document.createElement('div');
+    topSentinelInit.id = 'transcript-sentinel-top';
+    topSentinelInit.style.height = '1px';
+    transcriptContentInit.insertBefore(topSentinelInit, transcriptContentInit.firstChild);
+
+    // Render initial chunk of messages (starting from 0)
+    windowStart = 0;
+    windowEnd = -1;
+    renderNextChunk();
+
+    // Set up scroll observers for bi-directional lazy loading
+    setupScrollObservers();
+
+    // Sticky user message header
+    const pinnedUserMessage = document.getElementById('pinned-user-message');
+    const pinnedUserContent = pinnedUserMessage?.querySelector('.pinned-user-content');
+    const pinnedUserLabel = pinnedUserMessage?.querySelector('.pinned-user-message-label');
+    const transcriptPanel = document.getElementById('transcript-panel');
+    const transcriptContent = document.getElementById('transcript-content');
+    let currentPinnedMessage = null;
+
+    function extractUserMessageText(messageEl) {
+        const contentEl = messageEl.querySelector('.message-content');
+        if (!contentEl) return '';
+
+        let text = contentEl.textContent.trim();
+        if (text.length > 150) {
+            text = text.substring(0, 150) + '...';
+        }
+        return text;
+    }
+
+    // Get the prompt number for any message from server-provided data
+    function getPromptNumber(messageEl) {
+        const msgId = messageEl.id;
+        if (!msgId) return null;
+
+        const msgIndex = msgIdToIndex.get(msgId);
+        if (msgIndex === undefined) return null;
+
+        // Every message has prompt_num set by the server
+        return messagesData[msgIndex]?.prompt_num || null;
+    }
+
+    // Cache the pinned message height to avoid flashing when it's hidden
+    let cachedPinnedHeight = 0;
+    // Store pinned message ID separately (element reference may become stale after teleportation)
+    let currentPinnedMsgId = null;
+
+    function updatePinnedUserMessage() {
+        if (!pinnedUserMessage || !transcriptContent || !transcriptPanel) return;
+        if (isInitializing || isScrollingToTarget) return;  // Skip during scrolling to avoid repeated updates
+
+        const userMessages = transcriptContent.querySelectorAll('.message.user:not(.continuation)');
+        if (userMessages.length === 0) {
+            pinnedUserMessage.style.display = 'none';
+            currentPinnedMessage = null;
+            currentPinnedMsgId = null;
+            return;
+        }
+
+        const panelRect = transcriptPanel.getBoundingClientRect();
+        const headerHeight = transcriptPanel.querySelector('h3')?.offsetHeight || 0;
+
+        // Use cached height if pinned is hidden, otherwise update cache
+        if (pinnedUserMessage.style.display !== 'none') {
+            cachedPinnedHeight = pinnedUserMessage.offsetHeight || cachedPinnedHeight;
+        }
+        // Use a minimum height estimate if we've never measured it
+        const pinnedHeight = cachedPinnedHeight || 40;
+
+        // Threshold for when a message is considered "scrolled past"
+        const pinnedAreaBottom = panelRect.top + headerHeight + pinnedHeight;
+
+        let messageToPin = null;
+        let nextUserMessage = null;
+
+        for (const msg of userMessages) {
+            const msgRect = msg.getBoundingClientRect();
+            // A message should be pinned if its bottom is above the pinned area
+            if (msgRect.bottom < pinnedAreaBottom) {
+                messageToPin = msg;
+            } else {
+                // This is the first user message that's visible
+                nextUserMessage = msg;
+                break;
+            }
+        }
+
+        // Hide pinned if the next user message is entering the pinned area
+        // Use a small buffer to prevent flashing at the boundary
+        if (nextUserMessage) {
+            const nextRect = nextUserMessage.getBoundingClientRect();
+            if (nextRect.top < pinnedAreaBottom) {
+                // Next user message is in the pinned area - hide the pinned
+                messageToPin = null;
+            }
+        }
+
+        if (messageToPin && messageToPin !== currentPinnedMessage) {
+            currentPinnedMessage = messageToPin;
+            currentPinnedMsgId = messageToPin.id;
+            const promptNum = getPromptNumber(messageToPin);
+            // Update label with prompt number
+            if (pinnedUserLabel) {
+                pinnedUserLabel.textContent = promptNum ? `User Prompt #${promptNum}` : 'User Prompt';
+            }
+            pinnedUserContent.textContent = extractUserMessageText(messageToPin);
+            pinnedUserMessage.style.display = 'block';
+            // Use message ID to look up element on click (element may be stale after teleportation)
+            pinnedUserMessage.onclick = () => {
+                if (currentPinnedMsgId) {
+                    const msgEl = transcriptContent.querySelector(`#${CSS.escape(currentPinnedMsgId)}`);
+                    if (msgEl) {
+                        msgEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    } else {
+                        // Element not in DOM (teleported away) - use scrollToMessage to bring it back
+                        scrollToMessage(currentPinnedMsgId);
+                    }
+                }
+            };
+        } else if (!messageToPin) {
+            pinnedUserMessage.style.display = 'none';
+            currentPinnedMessage = null;
+            currentPinnedMsgId = null;
+        }
+    }
+
+    // Throttle scroll handler
+    let scrollTimeout = null;
+    transcriptPanel?.addEventListener('scroll', () => {
+        if (scrollTimeout) return;
+        scrollTimeout = setTimeout(() => {
+            updatePinnedUserMessage();
+            scrollTimeout = null;
+        }, 16);
+    });
+
+    setTimeout(updatePinnedUserMessage, 100);
+
+    // Click handler for transcript messages
+    transcriptContent?.addEventListener('click', (e) => {
+        const messageEl = e.target.closest('.message');
+        if (!messageEl) return;
+
+        const msgId = messageEl.id;
+        if (!msgId) return;
+
+        const msgIndex = msgIdToIndex.get(msgId);
+        if (msgIndex === undefined) return;
+
+        const nextOp = findNextBlameOp(msgIndex);
+        if (nextOp) {
+            navigateToBlame(nextOp.msgId);
+        }
+    });
+}
+
+// Start initialization
+init();
diff --git a/src/claude_code_transcripts/templates/index.html b/src/claude_code_transcripts/templates/index.html
index 30ed6ea..f0d6296 100644
--- a/src/claude_code_transcripts/templates/index.html
+++ b/src/claude_code_transcripts/templates/index.html
@@ -3,34 +3,15 @@
 {% block title %}Claude Code transcript - Index{% endblock %}
 
 {% block content %}
-        <div class="header-row">
-            <h1>Claude Code transcript</h1>
-            <div id="search-box">
-                <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
-                <button id="search-btn" type="button" aria-label="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
-                </button>
+        <div class="transcript-wrapper">
+            {{ pagination_html|safe }}
+            <p style="color: var(--text-muted); margin-bottom: 24px;">{{ prompt_num }} prompts · {{ total_messages }} messages · {{ total_tool_calls }} tool calls · {{ total_commits }} commits · {{ total_pages }} pages</p>
+            <div id="index-items">
+{%- if not use_index_data_json %}
+                {{ index_items_html|safe }}
+{%- endif %}
             </div>
+            {{ pagination_html|safe }}
         </div>
-        {{ pagination_html|safe }}
-        <p style="color: var(--text-muted); margin-bottom: 24px;">{{ prompt_num }} prompts · {{ total_messages }} messages · {{ total_tool_calls }} tool calls · {{ total_commits }} commits · {{ total_pages }} pages</p>
-        {{ index_items_html|safe }}
-        {{ pagination_html|safe }}
-
-        <dialog id="search-modal">
-            <div class="search-modal-header">
-                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
-                <button id="modal-search-btn" type="button" aria-label="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
-                </button>
-                <button id="modal-close-btn" type="button" aria-label="Close">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
-                </button>
-            </div>
-            <div id="search-status"></div>
-            <div id="search-results"></div>
-        </dialog>
-        <script>
-{% include "search.js" %}
-        </script>
-{%- endblock %}
\ No newline at end of file
+        <script>window.TOTAL_PAGES = {{ total_pages }};</script>
+{%- endblock %}
diff --git a/src/claude_code_transcripts/templates/main.js b/src/claude_code_transcripts/templates/main.js
new file mode 100644
index 0000000..59385c7
--- /dev/null
+++ b/src/claude_code_transcripts/templates/main.js
@@ -0,0 +1,45 @@
+function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
+document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
+    const timestamp = el.getAttribute('data-timestamp');
+    const date = new Date(timestamp);
+    el.textContent = formatTimestamp(date);
+    el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
+});
+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/page.html b/src/claude_code_transcripts/templates/page.html
index eaa4e5f..4040e4a 100644
--- a/src/claude_code_transcripts/templates/page.html
+++ b/src/claude_code_transcripts/templates/page.html
@@ -2,9 +2,17 @@
 
 {% block title %}Claude Code transcript - page {{ page_num }}{% endblock %}
 
+{% block header_title %}<a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page {{ page_num }}/{{ total_pages }}{% endblock %}
+
 {% block content %}
-        <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page {{ page_num }}/{{ total_pages }}</h1>
-        {{ pagination_html|safe }}
-        {{ messages_html|safe }}
-        {{ pagination_html|safe }}
-{%- endblock %}
\ No newline at end of file
+        <div class="transcript-wrapper">
+            {{ pagination_html|safe }}
+            <div id="page-messages">
+{%- if not use_page_data_json %}
+                {{ messages_html|safe }}
+{%- endif %}
+            </div>
+            {{ pagination_html|safe }}
+        </div>
+        <script>window.PAGE_NUM = {{ page_num }};</script>
+{%- endblock %}
diff --git a/src/claude_code_transcripts/templates/search.js b/src/claude_code_transcripts/templates/search.js
index 6bc337c..20c55de 100644
--- a/src/claude_code_transcripts/templates/search.js
+++ b/src/claude_code_transcripts/templates/search.js
@@ -1,5 +1,5 @@
 (function() {
-    var totalPages = {{ total_pages }};
+    var totalPages = window.TOTAL_PAGES || 1;
     var searchBox = document.getElementById('search-box');
     var searchInput = document.getElementById('search-input');
     var searchBtn = document.getElementById('search-btn');
@@ -57,7 +57,7 @@
 
     function getPageLinkUrl(pageFile) {
         if (isGistPreview && gistId) {
-            // Use gistpreview URL format for navigation links
+            // Use gisthost/gistpreview URL format for navigation links
             return '?' + gistId + '/' + pageFile;
         }
         return pageFile;
@@ -139,7 +139,7 @@
         });
     }
 
-    function processPage(pageFile, html, query) {
+    function processPageHtml(pageFile, html, query) {
         var parser = new DOMParser();
         var doc = parser.parseFromString(html, 'text/html');
         var resultsFromPage = 0;
@@ -175,6 +175,14 @@
         return resultsFromPage;
     }
 
+    async function fetchPageContent(pageNum) {
+        var pageFile = 'page-' + String(pageNum).padStart(3, '0') + '.html';
+        var response = await fetch(getPageFetchUrl(pageFile));
+        if (!response.ok) throw new Error('Failed to fetch');
+        var html = await response.text();
+        return { pageFile: pageFile, html: html };
+    }
+
     async function performSearch(query) {
         if (!query.trim()) {
             searchStatus.textContent = 'Enter a search term';
@@ -185,7 +193,7 @@
         searchResults.innerHTML = '';
         searchStatus.textContent = 'Searching...';
 
-        // Load gist info if on gistpreview (needed for constructing URLs)
+        // Load gist info if on gisthost/gistpreview (needed for constructing URLs)
         if (isGistPreview && !gistInfoLoaded) {
             searchStatus.textContent = 'Loading gist info...';
             await loadGistInfo();
@@ -198,29 +206,22 @@
         var resultsFound = 0;
         var pagesSearched = 0;
 
-        // Build list of pages to fetch
-        var pagesToFetch = [];
-        for (var i = 1; i <= totalPages; i++) {
-            pagesToFetch.push('page-' + String(i).padStart(3, '0') + '.html');
-        }
-
         searchStatus.textContent = 'Searching...';
 
         // Process pages in batches of 3, but show results immediately as each completes
         var batchSize = 3;
-        for (var i = 0; i < pagesToFetch.length; i += batchSize) {
-            var batch = pagesToFetch.slice(i, i + batchSize);
+        for (var i = 1; i <= totalPages; i += batchSize) {
+            var batch = [];
+            for (var j = i; j < i + batchSize && j <= totalPages; j++) {
+                batch.push(j);
+            }
 
             // Create promises that process results immediately when each fetch completes
-            var promises = batch.map(function(pageFile) {
-                return fetch(getPageFetchUrl(pageFile))
-                    .then(function(response) {
-                        if (!response.ok) throw new Error('Failed to fetch');
-                        return response.text();
-                    })
-                    .then(function(html) {
+            var promises = batch.map(function(pageNum) {
+                return fetchPageContent(pageNum)
+                    .then(function(result) {
                         // Process and display results immediately
-                        var count = processPage(pageFile, html, query);
+                        var count = processPageHtml(result.pageFile, result.html, query);
                         resultsFound += count;
                         pagesSearched++;
                         searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
diff --git a/src/claude_code_transcripts/templates/styles.css b/src/claude_code_transcripts/templates/styles.css
new file mode 100644
index 0000000..53c68d6
--- /dev/null
+++ b/src/claude_code_transcripts/templates/styles.css
@@ -0,0 +1,308 @@
+/* Base CSS Variables */
+: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; }
+.transcript-wrapper { max-width: 800px; margin: 0 auto; }
+h1 { font-size: 1.5rem; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--user-border); }
+/* Page header with optional search */
+.page-header { margin-bottom: 24px; }
+.page-header #search-box { justify-content: flex-end; margin-bottom: 12px; }
+.header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 0; }
+.header-row h1 { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; flex: 1; min-width: 200px; }
+
+/* Messages */
+.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; }
+.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 blocks */
+.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 blocks */
+.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 blocks (Write/Edit) */
+.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 blocks */
+.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; }
+
+/* Code blocks */
+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 */
+.user-content { margin: 0; }
+
+/* Truncatable content */
+.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 */
+.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; }
+
+/* Continuation details */
+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 items */
+.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-number { font-weight: 600; color: var(--user-border); }
+.index-item-content { padding: 16px; overflow: hidden; }
+.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); overflow: hidden; }
+.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 cards */
+.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); overflow: hidden; }
+.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 */
+#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-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-content { padding: 12px; }
+.search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+
+/* Mobile styles */
+@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; } }
+
+/* Tab Bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: -2px; }
+.tab { padding: 8px 20px; text-decoration: none; color: var(--text-muted); border-radius: 6px 6px 0 0; background: transparent; border: 2px solid transparent; border-bottom: none; transition: color 0.15s ease; }
+.tab:hover { color: var(--text-color); }
+.tab.active { color: var(--user-border); background: var(--bg-color); font-weight: 600; border-color: var(--user-border); border-bottom: 2px solid var(--bg-color); }
+
+/* Full-width container when tabs are present */
+.container:has(.header-row) { max-width: none; }
+
+/* Code Viewer Layout */
+.code-viewer { display: flex; height: calc(100vh - 140px); gap: 16px; min-height: 400px; }
+.file-tree-panel { width: 320px; min-width: 240px; overflow-y: auto; overflow-x: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.4; color: var(--text-color); transition: width 0.2s, min-width 0.2s, padding 0.2s; }
+.file-tree-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.file-tree-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0; }
+.collapse-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
+.collapse-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
+.collapse-btn svg { transition: transform 0.2s; }
+.file-tree-panel.collapsed { width: 48px !important; min-width: 48px !important; padding: 12px 8px; overflow: hidden; }
+.file-tree-panel.collapsed .panel-header { flex-direction: column; margin-bottom: 0; }
+.file-tree-panel.collapsed h3 { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); margin-top: 12px; white-space: nowrap; }
+.file-tree-panel.collapsed .collapse-btn svg { transform: rotate(180deg); }
+.file-tree-panel.collapsed .file-tree { display: none; }
+.code-panel { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden; min-width: 0; }
+#code-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); }
+#current-file-path { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-weight: 600; font-size: 0.9rem; word-break: break-all; }
+#code-content { flex: 1; overflow: auto; }
+.no-file-selected, .initial-loading { padding: 32px; text-align: center; color: var(--text-muted); }
+.initial-loading { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.editor-wrapper { display: flex; height: 100%; }
+.editor-container { flex: 1; overflow: auto; }
+.blame-minimap { width: 10px; background: rgba(0,0,0,0.05); position: relative; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.1); }
+.minimap-marker { position: absolute; left: 0; right: 0; cursor: pointer; transition: opacity 0.15s; }
+.minimap-marker:hover { opacity: 0.8; }
+.blame-tooltip { position: fixed; z-index: 1000; pointer-events: none; }
+.blame-tooltip .index-item { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+.blame-tooltip .index-item-content { max-height: 150px; overflow: hidden; }
+.blame-tooltip .index-item-stats { padding: 8px 16px; }
+.blame-tooltip .index-long-text { display: none; }
+.tooltip-assistant { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.1); background: var(--card-bg); }
+.tooltip-assistant-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--assistant-border); margin-bottom: 6px; }
+.tooltip-assistant p { margin: 4px 0; font-size: 0.9rem; }
+.blame-tooltip .tooltip-assistant { max-height: 200px; overflow: hidden; }
+.blame-tooltip .thinking { max-height: 200px; overflow: hidden; margin: 8px 16px 12px 16px; }
+.truncated-indicator { font-weight: normal; font-style: italic; color: var(--text-muted); text-transform: none; }
+.context-thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
+.context-thinking-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 4px; }
+.context-thinking p { margin: 4px 0; font-size: 0.85rem; color: var(--thinking-text); }
+.context-text { margin: 8px 0; }
+.context-text p { margin: 4px 0; font-size: 0.9rem; }
+
+/* File Tree */
+.file-tree { list-style: none; padding: 0; margin: 0; }
+.file-tree ul { list-style: none; padding-left: 16px; margin: 0; position: relative; }
+.file-tree ul::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 8px; width: 1px; background: rgba(0,0,0,0.15); }
+.tree-dir { padding: 4px 0; }
+.tree-toggle { display: inline-block; width: 16px; height: 16px; margin-right: 4px; position: relative; cursor: pointer; }
+.tree-toggle::before { content: ''; position: absolute; left: 5px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.15s ease; }
+.tree-dir.open > .tree-toggle::before { transform: rotate(90deg); left: 3px; top: 6px; }
+.tree-dir-name { color: var(--text-color); font-weight: 500; }
+.tree-children { display: none; margin-top: 2px; }
+.tree-dir.open > .tree-children { display: block; }
+.tree-file { display: flex; align-items: center; padding: 3px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tree-file::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
+.tree-file:hover { background: rgba(0,0,0,0.05); }
+.tree-file.selected { background: var(--user-bg); }
+.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.tree-file.status-added::before { background: #2e7d32; }
+.tree-file.status-added .tree-file-name { color: #2e7d32; }
+.tree-file.status-modified::before { background: #e65100; }
+.tree-file.status-modified .tree-file-name { color: #e65100; }
+
+/* Blame Gutter */
+.cm-blame-gutter { width: 28px; background: rgba(0,0,0,0.02); }
+.blame-marker { display: flex; justify-content: center; align-items: center; height: 100%; }
+.blame-link { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--user-border); color: white; border-radius: 3px; text-decoration: none; font-size: 0.65rem; font-weight: bold; }
+.blame-link:hover { background: #1565c0; }
+.blame-initial { color: var(--text-muted); font-size: 0.8rem; }
+
+/* CodeMirror Overrides */
+.cm-editor { height: 100%; font-size: 0.85rem; }
+.cm-scroller { overflow: auto; }
+.cm-content { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
+.cm-line[data-range-index] { cursor: pointer; position: relative; }
+.cm-line:focus { outline: none; }
+.cm-active-range { background: rgba(255, 235, 59, 0.5) !important; }
+.blame-msg-num { position: absolute; right: 16px; color: #9e9e9e; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none; }
+
+/* Transcript Panel */
+.transcript-panel { width: 460px; min-width: 280px; overflow-y: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; position: relative; }
+.transcript-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 -16px 0 -16px; padding: 0 16px 12px 16px; position: sticky; top: -16px; background: var(--card-bg); z-index: 11; }
+
+/* Pinned User Message - sits directly below h3 with no gap */
+.pinned-user-message { position: sticky; top: 12px; z-index: 10; margin: 0 -16px 12px -16px; padding: 0 16px 8px 16px; background: var(--card-bg); cursor: pointer; }
+.pinned-user-message::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%); pointer-events: none; }
+.pinned-user-message-inner { background: linear-gradient(135deg, var(--user-bg) 0%, #bbdefb 100%); border-left: 3px solid var(--user-border); border-radius: 4px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.15s, transform 0.15s; }
+.pinned-user-message:hover .pinned-user-message-inner { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }
+.pinned-user-message-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--user-border); margin-bottom: 4px; }
+.pinned-user-content { font-size: 0.85rem; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Resizable panels */
+.resize-handle { width: 8px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; }
+.resize-handle:hover, .resize-handle.dragging { background: rgba(25, 118, 210, 0.2); }
+.resize-handle::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 1px; }
+
+/* Highlighted message in transcript */
+.message.highlighted { box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.8); }
+
+/* Clickable messages in transcript (code view mode) */
+.transcript-panel .message { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
+.transcript-panel .message:hover { transform: translateX(2px); }
+.transcript-panel .message.highlighted:hover { transform: none; }
+
+/* Diff-only View */
+.diff-only-view { padding: 16px; }
+.diff-operation { margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+.diff-header { padding: 8px 12px; background: rgba(0,0,0,0.03); display: flex; align-items: center; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
+.diff-type { font-weight: 600; background: var(--user-border); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
+.diff-link { color: var(--user-border); text-decoration: none; }
+.diff-link:hover { text-decoration: underline; }
+.diff-content { margin: 0; padding: 12px; overflow-x: auto; background: var(--card-bg); font-size: 0.85rem; }
+.diff-write { background: #e8f5e9; border-left: 4px solid #4caf50; }
+.diff-edit { display: flex; flex-direction: column; }
+.diff-edit .edit-section { display: flex; }
+.diff-edit .edit-label { width: 24px; padding: 8px 4px; font-weight: bold; text-align: center; flex-shrink: 0; }
+.diff-edit .edit-old { background: #ffebee; }
+.diff-edit .edit-old .edit-label { color: #c62828; }
+.diff-edit .edit-new { background: #e8f5e9; }
+.diff-edit .edit-new .edit-label { color: #2e7d32; }
+.diff-edit .edit-content { flex: 1; margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+    .code-viewer { flex-direction: column; height: auto; }
+    .file-tree-panel { width: 100% !important; max-height: 200px; }
+    .code-panel { min-height: 400px; }
+    .transcript-panel { width: 100% !important; max-height: 300px; }
+    .resize-handle { display: none; }
+}
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 693c48f..c41e532 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,14 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - Index</title>
-    <style>
+    <style>/* Base CSS Variables */
 :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; }
+.transcript-wrapper { 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; }
+/* Page header with optional search */
+.page-header { margin-bottom: 24px; }
+.page-header #search-box { justify-content: flex-end; margin-bottom: 12px; }
+.header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 0; }
+.header-row h1 { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; flex: 1; min-width: 200px; }
+
+/* Messages */
 .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); }
@@ -30,16 +36,22 @@
 .message-content { padding: 16px; }
 .message-content p { margin: 0 0 12px 0; }
 .message-content p:last-child { margin-bottom: 0; }
+
+/* Thinking blocks */
 .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 blocks */
 .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 blocks (Write/Edit) */
 .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; }
@@ -62,6 +74,8 @@
 .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 blocks */
 .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; }
@@ -74,11 +88,17 @@
 .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; }
+
+/* Code blocks */
 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 */
 .user-content { margin: 0; }
+
+/* Truncatable content */
 .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; }
@@ -89,6 +109,8 @@
 .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 */
 .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); }
@@ -96,19 +118,25 @@
 .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; }
+
+/* Continuation details */
 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 items */
 .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-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-content { padding: 16px; overflow: hidden; }
+.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); overflow: hidden; }
 .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 cards */
 .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; }
@@ -119,9 +147,11 @@
 .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 { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); overflow: hidden; }
 .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 */
 #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; }
@@ -140,21 +170,179 @@
 .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-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+
+/* Mobile styles */
 @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>
+
+/* Tab Bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: -2px; }
+.tab { padding: 8px 20px; text-decoration: none; color: var(--text-muted); border-radius: 6px 6px 0 0; background: transparent; border: 2px solid transparent; border-bottom: none; transition: color 0.15s ease; }
+.tab:hover { color: var(--text-color); }
+.tab.active { color: var(--user-border); background: var(--bg-color); font-weight: 600; border-color: var(--user-border); border-bottom: 2px solid var(--bg-color); }
+
+/* Full-width container when tabs are present */
+.container:has(.header-row) { max-width: none; }
+
+/* Code Viewer Layout */
+.code-viewer { display: flex; height: calc(100vh - 140px); gap: 16px; min-height: 400px; }
+.file-tree-panel { width: 320px; min-width: 240px; overflow-y: auto; overflow-x: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.4; color: var(--text-color); transition: width 0.2s, min-width 0.2s, padding 0.2s; }
+.file-tree-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.file-tree-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0; }
+.collapse-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
+.collapse-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
+.collapse-btn svg { transition: transform 0.2s; }
+.file-tree-panel.collapsed { width: 48px !important; min-width: 48px !important; padding: 12px 8px; overflow: hidden; }
+.file-tree-panel.collapsed .panel-header { flex-direction: column; margin-bottom: 0; }
+.file-tree-panel.collapsed h3 { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); margin-top: 12px; white-space: nowrap; }
+.file-tree-panel.collapsed .collapse-btn svg { transform: rotate(180deg); }
+.file-tree-panel.collapsed .file-tree { display: none; }
+.code-panel { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden; min-width: 0; }
+#code-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); }
+#current-file-path { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-weight: 600; font-size: 0.9rem; word-break: break-all; }
+#code-content { flex: 1; overflow: auto; }
+.no-file-selected, .initial-loading { padding: 32px; text-align: center; color: var(--text-muted); }
+.initial-loading { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.editor-wrapper { display: flex; height: 100%; }
+.editor-container { flex: 1; overflow: auto; }
+.blame-minimap { width: 10px; background: rgba(0,0,0,0.05); position: relative; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.1); }
+.minimap-marker { position: absolute; left: 0; right: 0; cursor: pointer; transition: opacity 0.15s; }
+.minimap-marker:hover { opacity: 0.8; }
+.blame-tooltip { position: fixed; z-index: 1000; pointer-events: none; }
+.blame-tooltip .index-item { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+.blame-tooltip .index-item-content { max-height: 150px; overflow: hidden; }
+.blame-tooltip .index-item-stats { padding: 8px 16px; }
+.blame-tooltip .index-long-text { display: none; }
+.tooltip-assistant { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.1); background: var(--card-bg); }
+.tooltip-assistant-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--assistant-border); margin-bottom: 6px; }
+.tooltip-assistant p { margin: 4px 0; font-size: 0.9rem; }
+.blame-tooltip .tooltip-assistant { max-height: 200px; overflow: hidden; }
+.blame-tooltip .thinking { max-height: 200px; overflow: hidden; margin: 8px 16px 12px 16px; }
+.truncated-indicator { font-weight: normal; font-style: italic; color: var(--text-muted); text-transform: none; }
+.context-thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
+.context-thinking-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 4px; }
+.context-thinking p { margin: 4px 0; font-size: 0.85rem; color: var(--thinking-text); }
+.context-text { margin: 8px 0; }
+.context-text p { margin: 4px 0; font-size: 0.9rem; }
+
+/* File Tree */
+.file-tree { list-style: none; padding: 0; margin: 0; }
+.file-tree ul { list-style: none; padding-left: 16px; margin: 0; position: relative; }
+.file-tree ul::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 8px; width: 1px; background: rgba(0,0,0,0.15); }
+.tree-dir { padding: 4px 0; }
+.tree-toggle { display: inline-block; width: 16px; height: 16px; margin-right: 4px; position: relative; cursor: pointer; }
+.tree-toggle::before { content: ''; position: absolute; left: 5px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.15s ease; }
+.tree-dir.open > .tree-toggle::before { transform: rotate(90deg); left: 3px; top: 6px; }
+.tree-dir-name { color: var(--text-color); font-weight: 500; }
+.tree-children { display: none; margin-top: 2px; }
+.tree-dir.open > .tree-children { display: block; }
+.tree-file { display: flex; align-items: center; padding: 3px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tree-file::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
+.tree-file:hover { background: rgba(0,0,0,0.05); }
+.tree-file.selected { background: var(--user-bg); }
+.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.tree-file.status-added::before { background: #2e7d32; }
+.tree-file.status-added .tree-file-name { color: #2e7d32; }
+.tree-file.status-modified::before { background: #e65100; }
+.tree-file.status-modified .tree-file-name { color: #e65100; }
+
+/* Blame Gutter */
+.cm-blame-gutter { width: 28px; background: rgba(0,0,0,0.02); }
+.blame-marker { display: flex; justify-content: center; align-items: center; height: 100%; }
+.blame-link { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--user-border); color: white; border-radius: 3px; text-decoration: none; font-size: 0.65rem; font-weight: bold; }
+.blame-link:hover { background: #1565c0; }
+.blame-initial { color: var(--text-muted); font-size: 0.8rem; }
+
+/* CodeMirror Overrides */
+.cm-editor { height: 100%; font-size: 0.85rem; }
+.cm-scroller { overflow: auto; }
+.cm-content { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
+.cm-line[data-range-index] { cursor: pointer; position: relative; }
+.cm-line:focus { outline: none; }
+.cm-active-range { background: rgba(255, 235, 59, 0.5) !important; }
+.blame-msg-num { position: absolute; right: 16px; color: #9e9e9e; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none; }
+
+/* Transcript Panel */
+.transcript-panel { width: 460px; min-width: 280px; overflow-y: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; position: relative; }
+.transcript-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 -16px 0 -16px; padding: 0 16px 12px 16px; position: sticky; top: -16px; background: var(--card-bg); z-index: 11; }
+
+/* Pinned User Message - sits directly below h3 with no gap */
+.pinned-user-message { position: sticky; top: 12px; z-index: 10; margin: 0 -16px 12px -16px; padding: 0 16px 8px 16px; background: var(--card-bg); cursor: pointer; }
+.pinned-user-message::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%); pointer-events: none; }
+.pinned-user-message-inner { background: linear-gradient(135deg, var(--user-bg) 0%, #bbdefb 100%); border-left: 3px solid var(--user-border); border-radius: 4px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.15s, transform 0.15s; }
+.pinned-user-message:hover .pinned-user-message-inner { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }
+.pinned-user-message-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--user-border); margin-bottom: 4px; }
+.pinned-user-content { font-size: 0.85rem; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Resizable panels */
+.resize-handle { width: 8px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; }
+.resize-handle:hover, .resize-handle.dragging { background: rgba(25, 118, 210, 0.2); }
+.resize-handle::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 1px; }
+
+/* Highlighted message in transcript */
+.message.highlighted { box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.8); }
+
+/* Clickable messages in transcript (code view mode) */
+.transcript-panel .message { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
+.transcript-panel .message:hover { transform: translateX(2px); }
+.transcript-panel .message.highlighted:hover { transform: none; }
+
+/* Diff-only View */
+.diff-only-view { padding: 16px; }
+.diff-operation { margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+.diff-header { padding: 8px 12px; background: rgba(0,0,0,0.03); display: flex; align-items: center; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
+.diff-type { font-weight: 600; background: var(--user-border); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
+.diff-link { color: var(--user-border); text-decoration: none; }
+.diff-link:hover { text-decoration: underline; }
+.diff-content { margin: 0; padding: 12px; overflow-x: auto; background: var(--card-bg); font-size: 0.85rem; }
+.diff-write { background: #e8f5e9; border-left: 4px solid #4caf50; }
+.diff-edit { display: flex; flex-direction: column; }
+.diff-edit .edit-section { display: flex; }
+.diff-edit .edit-label { width: 24px; padding: 8px 4px; font-weight: bold; text-align: center; flex-shrink: 0; }
+.diff-edit .edit-old { background: #ffebee; }
+.diff-edit .edit-old .edit-label { color: #c62828; }
+.diff-edit .edit-new { background: #e8f5e9; }
+.diff-edit .edit-new .edit-label { color: #2e7d32; }
+.diff-edit .edit-content { flex: 1; margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+    .code-viewer { flex-direction: column; height: auto; }
+    .file-tree-panel { width: 100% !important; max-height: 200px; }
+    .code-panel { min-height: 400px; }
+    .transcript-panel { width: 100% !important; max-height: 300px; }
+    .resize-handle { display: none; }
+}</style>
 </head>
 <body>
     <div class="container">
-        <div class="header-row">
-            <h1>Claude Code transcript</h1>
+        <div class="page-header">
             <div id="search-box">
                 <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
                 <button id="search-btn" type="button" aria-label="Search">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
                 </button>
             </div>
+            <div class="header-row">
+                <h1>Claude Code transcript</h1>
+                
+            </div>
         </div>
-        
+
+        <dialog id="search-modal">
+            <div class="search-modal-header">
+                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="modal-search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+                <button id="modal-close-btn" type="button" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </button>
+            </div>
+            <div id="search-status"></div>
+            <div id="search-results"></div>
+        </dialog>
+        <div class="transcript-wrapper">
+            
 
 <div class="pagination">
 <span class="current">Index</span>
@@ -164,8 +352,9 @@ <h1>Claude Code transcript</h1>
 <a href="page-001.html">Next &rarr;</a>
 </div>
 
-        <p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
-        
+            <p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
+            <div id="index-items">
+                
 <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>
@@ -176,7 +365,8 @@ <h1>Claude Code transcript</h1>
 </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></div>
-        
+            </div>
+            
 
 <div class="pagination">
 <span class="current">Index</span>
@@ -186,23 +376,56 @@ <h1>Claude Code transcript</h1>
 <a href="page-001.html">Next &rarr;</a>
 </div>
 
-
-        <dialog id="search-modal">
-            <div class="search-modal-header">
-                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
-                <button id="modal-search-btn" type="button" aria-label="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
-                </button>
-                <button id="modal-close-btn" type="button" aria-label="Close">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
-                </button>
-            </div>
-            <div id="search-status"></div>
-            <div id="search-results"></div>
-        </dialog>
-        <script>
-(function() {
-    var totalPages = 2;
+        </div>
+        <script>window.TOTAL_PAGES = 2;</script>
+    </div>
+    <script>function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
+document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
+    const timestamp = el.getAttribute('data-timestamp');
+    const date = new Date(timestamp);
+    el.textContent = formatTimestamp(date);
+    el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
+});
+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'; }
+        });
+    }
+});</script>
+    <script>(function() {
+    var totalPages = window.TOTAL_PAGES || 1;
     var searchBox = document.getElementById('search-box');
     var searchInput = document.getElementById('search-input');
     var searchBtn = document.getElementById('search-btn');
@@ -260,7 +483,7 @@ <h1>Claude Code transcript</h1>
 
     function getPageLinkUrl(pageFile) {
         if (isGistPreview && gistId) {
-            // Use gistpreview URL format for navigation links
+            // Use gisthost/gistpreview URL format for navigation links
             return '?' + gistId + '/' + pageFile;
         }
         return pageFile;
@@ -342,7 +565,7 @@ <h1>Claude Code transcript</h1>
         });
     }
 
-    function processPage(pageFile, html, query) {
+    function processPageHtml(pageFile, html, query) {
         var parser = new DOMParser();
         var doc = parser.parseFromString(html, 'text/html');
         var resultsFromPage = 0;
@@ -378,6 +601,14 @@ <h1>Claude Code transcript</h1>
         return resultsFromPage;
     }
 
+    async function fetchPageContent(pageNum) {
+        var pageFile = 'page-' + String(pageNum).padStart(3, '0') + '.html';
+        var response = await fetch(getPageFetchUrl(pageFile));
+        if (!response.ok) throw new Error('Failed to fetch');
+        var html = await response.text();
+        return { pageFile: pageFile, html: html };
+    }
+
     async function performSearch(query) {
         if (!query.trim()) {
             searchStatus.textContent = 'Enter a search term';
@@ -388,7 +619,7 @@ <h1>Claude Code transcript</h1>
         searchResults.innerHTML = '';
         searchStatus.textContent = 'Searching...';
 
-        // Load gist info if on gistpreview (needed for constructing URLs)
+        // Load gist info if on gisthost/gistpreview (needed for constructing URLs)
         if (isGistPreview && !gistInfoLoaded) {
             searchStatus.textContent = 'Loading gist info...';
             await loadGistInfo();
@@ -401,29 +632,22 @@ <h1>Claude Code transcript</h1>
         var resultsFound = 0;
         var pagesSearched = 0;
 
-        // Build list of pages to fetch
-        var pagesToFetch = [];
-        for (var i = 1; i <= totalPages; i++) {
-            pagesToFetch.push('page-' + String(i).padStart(3, '0') + '.html');
-        }
-
         searchStatus.textContent = 'Searching...';
 
         // Process pages in batches of 3, but show results immediately as each completes
         var batchSize = 3;
-        for (var i = 0; i < pagesToFetch.length; i += batchSize) {
-            var batch = pagesToFetch.slice(i, i + batchSize);
+        for (var i = 1; i <= totalPages; i += batchSize) {
+            var batch = [];
+            for (var j = i; j < i + batchSize && j <= totalPages; j++) {
+                batch.push(j);
+            }
 
             // Create promises that process results immediately when each fetch completes
-            var promises = batch.map(function(pageFile) {
-                return fetch(getPageFetchUrl(pageFile))
-                    .then(function(response) {
-                        if (!response.ok) throw new Error('Failed to fetch');
-                        return response.text();
-                    })
-                    .then(function(html) {
+            var promises = batch.map(function(pageNum) {
+                return fetchPageContent(pageNum)
+                    .then(function(result) {
                         // Process and display results immediately
-                        var count = processPage(pageFile, html, query);
+                        var count = processPageHtml(result.pageFile, result.html, query);
                         resultsFound += count;
                         pagesSearched++;
                         searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
@@ -478,38 +702,6 @@ <h1>Claude Code transcript</h1>
             openModal(query);
         }
     }
-})();
-        </script>
-    </div>
-    <script>
-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'; }
-        });
-    }
-});
-</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 cdc794b..b111742 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,14 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - page 1</title>
-    <style>
+    <style>/* Base CSS Variables */
 :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; }
+.transcript-wrapper { 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; }
+/* Page header with optional search */
+.page-header { margin-bottom: 24px; }
+.page-header #search-box { justify-content: flex-end; margin-bottom: 12px; }
+.header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 0; }
+.header-row h1 { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; flex: 1; min-width: 200px; }
+
+/* Messages */
 .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); }
@@ -30,16 +36,22 @@
 .message-content { padding: 16px; }
 .message-content p { margin: 0 0 12px 0; }
 .message-content p:last-child { margin-bottom: 0; }
+
+/* Thinking blocks */
 .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 blocks */
 .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 blocks (Write/Edit) */
 .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; }
@@ -62,6 +74,8 @@
 .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 blocks */
 .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; }
@@ -74,11 +88,17 @@
 .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; }
+
+/* Code blocks */
 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 */
 .user-content { margin: 0; }
+
+/* Truncatable content */
 .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; }
@@ -89,6 +109,8 @@
 .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 */
 .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); }
@@ -96,19 +118,25 @@
 .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; }
+
+/* Continuation details */
 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 items */
 .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-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-content { padding: 16px; overflow: hidden; }
+.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); overflow: hidden; }
 .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 cards */
 .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; }
@@ -119,9 +147,11 @@
 .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 { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); overflow: hidden; }
 .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 */
 #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; }
@@ -140,13 +170,179 @@
 .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-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+
+/* Mobile styles */
 @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>
+
+/* Tab Bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: -2px; }
+.tab { padding: 8px 20px; text-decoration: none; color: var(--text-muted); border-radius: 6px 6px 0 0; background: transparent; border: 2px solid transparent; border-bottom: none; transition: color 0.15s ease; }
+.tab:hover { color: var(--text-color); }
+.tab.active { color: var(--user-border); background: var(--bg-color); font-weight: 600; border-color: var(--user-border); border-bottom: 2px solid var(--bg-color); }
+
+/* Full-width container when tabs are present */
+.container:has(.header-row) { max-width: none; }
+
+/* Code Viewer Layout */
+.code-viewer { display: flex; height: calc(100vh - 140px); gap: 16px; min-height: 400px; }
+.file-tree-panel { width: 320px; min-width: 240px; overflow-y: auto; overflow-x: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.4; color: var(--text-color); transition: width 0.2s, min-width 0.2s, padding 0.2s; }
+.file-tree-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.file-tree-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0; }
+.collapse-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
+.collapse-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
+.collapse-btn svg { transition: transform 0.2s; }
+.file-tree-panel.collapsed { width: 48px !important; min-width: 48px !important; padding: 12px 8px; overflow: hidden; }
+.file-tree-panel.collapsed .panel-header { flex-direction: column; margin-bottom: 0; }
+.file-tree-panel.collapsed h3 { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); margin-top: 12px; white-space: nowrap; }
+.file-tree-panel.collapsed .collapse-btn svg { transform: rotate(180deg); }
+.file-tree-panel.collapsed .file-tree { display: none; }
+.code-panel { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden; min-width: 0; }
+#code-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); }
+#current-file-path { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-weight: 600; font-size: 0.9rem; word-break: break-all; }
+#code-content { flex: 1; overflow: auto; }
+.no-file-selected, .initial-loading { padding: 32px; text-align: center; color: var(--text-muted); }
+.initial-loading { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.editor-wrapper { display: flex; height: 100%; }
+.editor-container { flex: 1; overflow: auto; }
+.blame-minimap { width: 10px; background: rgba(0,0,0,0.05); position: relative; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.1); }
+.minimap-marker { position: absolute; left: 0; right: 0; cursor: pointer; transition: opacity 0.15s; }
+.minimap-marker:hover { opacity: 0.8; }
+.blame-tooltip { position: fixed; z-index: 1000; pointer-events: none; }
+.blame-tooltip .index-item { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+.blame-tooltip .index-item-content { max-height: 150px; overflow: hidden; }
+.blame-tooltip .index-item-stats { padding: 8px 16px; }
+.blame-tooltip .index-long-text { display: none; }
+.tooltip-assistant { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.1); background: var(--card-bg); }
+.tooltip-assistant-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--assistant-border); margin-bottom: 6px; }
+.tooltip-assistant p { margin: 4px 0; font-size: 0.9rem; }
+.blame-tooltip .tooltip-assistant { max-height: 200px; overflow: hidden; }
+.blame-tooltip .thinking { max-height: 200px; overflow: hidden; margin: 8px 16px 12px 16px; }
+.truncated-indicator { font-weight: normal; font-style: italic; color: var(--text-muted); text-transform: none; }
+.context-thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
+.context-thinking-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 4px; }
+.context-thinking p { margin: 4px 0; font-size: 0.85rem; color: var(--thinking-text); }
+.context-text { margin: 8px 0; }
+.context-text p { margin: 4px 0; font-size: 0.9rem; }
+
+/* File Tree */
+.file-tree { list-style: none; padding: 0; margin: 0; }
+.file-tree ul { list-style: none; padding-left: 16px; margin: 0; position: relative; }
+.file-tree ul::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 8px; width: 1px; background: rgba(0,0,0,0.15); }
+.tree-dir { padding: 4px 0; }
+.tree-toggle { display: inline-block; width: 16px; height: 16px; margin-right: 4px; position: relative; cursor: pointer; }
+.tree-toggle::before { content: ''; position: absolute; left: 5px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.15s ease; }
+.tree-dir.open > .tree-toggle::before { transform: rotate(90deg); left: 3px; top: 6px; }
+.tree-dir-name { color: var(--text-color); font-weight: 500; }
+.tree-children { display: none; margin-top: 2px; }
+.tree-dir.open > .tree-children { display: block; }
+.tree-file { display: flex; align-items: center; padding: 3px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tree-file::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
+.tree-file:hover { background: rgba(0,0,0,0.05); }
+.tree-file.selected { background: var(--user-bg); }
+.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.tree-file.status-added::before { background: #2e7d32; }
+.tree-file.status-added .tree-file-name { color: #2e7d32; }
+.tree-file.status-modified::before { background: #e65100; }
+.tree-file.status-modified .tree-file-name { color: #e65100; }
+
+/* Blame Gutter */
+.cm-blame-gutter { width: 28px; background: rgba(0,0,0,0.02); }
+.blame-marker { display: flex; justify-content: center; align-items: center; height: 100%; }
+.blame-link { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--user-border); color: white; border-radius: 3px; text-decoration: none; font-size: 0.65rem; font-weight: bold; }
+.blame-link:hover { background: #1565c0; }
+.blame-initial { color: var(--text-muted); font-size: 0.8rem; }
+
+/* CodeMirror Overrides */
+.cm-editor { height: 100%; font-size: 0.85rem; }
+.cm-scroller { overflow: auto; }
+.cm-content { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
+.cm-line[data-range-index] { cursor: pointer; position: relative; }
+.cm-line:focus { outline: none; }
+.cm-active-range { background: rgba(255, 235, 59, 0.5) !important; }
+.blame-msg-num { position: absolute; right: 16px; color: #9e9e9e; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none; }
+
+/* Transcript Panel */
+.transcript-panel { width: 460px; min-width: 280px; overflow-y: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; position: relative; }
+.transcript-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 -16px 0 -16px; padding: 0 16px 12px 16px; position: sticky; top: -16px; background: var(--card-bg); z-index: 11; }
+
+/* Pinned User Message - sits directly below h3 with no gap */
+.pinned-user-message { position: sticky; top: 12px; z-index: 10; margin: 0 -16px 12px -16px; padding: 0 16px 8px 16px; background: var(--card-bg); cursor: pointer; }
+.pinned-user-message::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%); pointer-events: none; }
+.pinned-user-message-inner { background: linear-gradient(135deg, var(--user-bg) 0%, #bbdefb 100%); border-left: 3px solid var(--user-border); border-radius: 4px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.15s, transform 0.15s; }
+.pinned-user-message:hover .pinned-user-message-inner { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }
+.pinned-user-message-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--user-border); margin-bottom: 4px; }
+.pinned-user-content { font-size: 0.85rem; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Resizable panels */
+.resize-handle { width: 8px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; }
+.resize-handle:hover, .resize-handle.dragging { background: rgba(25, 118, 210, 0.2); }
+.resize-handle::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 1px; }
+
+/* Highlighted message in transcript */
+.message.highlighted { box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.8); }
+
+/* Clickable messages in transcript (code view mode) */
+.transcript-panel .message { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
+.transcript-panel .message:hover { transform: translateX(2px); }
+.transcript-panel .message.highlighted:hover { transform: none; }
+
+/* Diff-only View */
+.diff-only-view { padding: 16px; }
+.diff-operation { margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+.diff-header { padding: 8px 12px; background: rgba(0,0,0,0.03); display: flex; align-items: center; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
+.diff-type { font-weight: 600; background: var(--user-border); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
+.diff-link { color: var(--user-border); text-decoration: none; }
+.diff-link:hover { text-decoration: underline; }
+.diff-content { margin: 0; padding: 12px; overflow-x: auto; background: var(--card-bg); font-size: 0.85rem; }
+.diff-write { background: #e8f5e9; border-left: 4px solid #4caf50; }
+.diff-edit { display: flex; flex-direction: column; }
+.diff-edit .edit-section { display: flex; }
+.diff-edit .edit-label { width: 24px; padding: 8px 4px; font-weight: bold; text-align: center; flex-shrink: 0; }
+.diff-edit .edit-old { background: #ffebee; }
+.diff-edit .edit-old .edit-label { color: #c62828; }
+.diff-edit .edit-new { background: #e8f5e9; }
+.diff-edit .edit-new .edit-label { color: #2e7d32; }
+.diff-edit .edit-content { flex: 1; margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+    .code-viewer { flex-direction: column; height: auto; }
+    .file-tree-panel { width: 100% !important; max-height: 200px; }
+    .code-panel { min-height: 400px; }
+    .transcript-panel { width: 100% !important; max-height: 300px; }
+    .resize-handle { display: none; }
+}</style>
 </head>
 <body>
     <div class="container">
-        <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page 1/2</h1>
-        
+        <div class="page-header">
+            <div id="search-box">
+                <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+            </div>
+            <div class="header-row">
+                <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page 1/2</h1>
+                
+            </div>
+        </div>
+
+        <dialog id="search-modal">
+            <div class="search-modal-header">
+                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="modal-search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+                <button id="modal-close-btn" type="button" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </button>
+            </div>
+            <div id="search-status"></div>
+            <div id="search-results"></div>
+        </dialog>
+        <div class="transcript-wrapper">
+            
 
 <div class="pagination">
 <a href="index.html" class="index-link">Index</a>
@@ -156,8 +352,9 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <a href="page-002.html">Next &rarr;</a>
 </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 id="page-messages">
+                
+<div class="message user" id="msg-2025-12-24T10-00-00-000Z"><div class="message-header"><span class="role-label">User Prompt #1</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="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="thinking"><div class="thinking-label">Thinking</div><p>The user wants a simple addition function. I should:
@@ -207,7 +404,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 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 Prompt #2</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="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="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">{
@@ -240,7 +437,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
   &#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 user" id="msg-2025-12-24T10-02-00-000Z"><div class="message-header"><span class="role-label">User Prompt #3</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="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="tool-use bash-tool" data-tool-id="toolu_bash_004">
@@ -255,11 +452,11 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <p>Here's some <strong>markdown</strong> content with:
 - A bullet list
 - <code>inline code</code>
-- A <a href="https://example.com">link</a></p>
+- A <a href="https://example.com" rel="noopener noreferrer">link</a></p>
 <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 Prompt #4</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="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="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>
@@ -278,9 +475,10 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <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="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 Prompt #5</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="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>
-        
+            </div>
+            
 
 <div class="pagination">
 <a href="index.html" class="index-link">Index</a>
@@ -290,16 +488,34 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <a href="page-002.html">Next &rarr;</a>
 </div>
 
+        </div>
+        <script>window.PAGE_NUM = 1;</script>
     </div>
-    <script>
+    <script>function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
 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; }
+    el.textContent = formatTimestamp(date);
+    el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
 });
 document.querySelectorAll('pre.json').forEach(function(el) {
     let text = el.textContent;
@@ -319,7 +535,285 @@ <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>
+    <script>(function() {
+    var totalPages = window.TOTAL_PAGES || 1;
+    var searchBox = document.getElementById('search-box');
+    var searchInput = document.getElementById('search-input');
+    var searchBtn = document.getElementById('search-btn');
+    var modal = document.getElementById('search-modal');
+    var modalInput = document.getElementById('modal-search-input');
+    var modalSearchBtn = document.getElementById('modal-search-btn');
+    var modalCloseBtn = document.getElementById('modal-close-btn');
+    var searchStatus = document.getElementById('search-status');
+    var searchResults = document.getElementById('search-results');
+
+    if (!searchBox || !modal) return;
+
+    // Hide search on file:// protocol (doesn't work due to CORS restrictions)
+    if (window.location.protocol === 'file:') return;
+
+    // Show search box (progressive enhancement)
+    searchBox.style.display = 'flex';
+
+    // Gist preview support - detect if we're on gisthost.github.io or gistpreview.github.io
+    var hostname = window.location.hostname;
+    var isGistPreview = hostname === 'gisthost.github.io' || hostname === 'gistpreview.github.io';
+    var gistId = null;
+    var gistOwner = null;
+    var gistInfoLoaded = false;
+
+    if (isGistPreview) {
+        // Extract gist ID from URL query string like ?78a436a8a9e7a2e603738b8193b95410/index.html
+        var queryMatch = window.location.search.match(/^\?([a-f0-9]+)/i);
+        if (queryMatch) {
+            gistId = queryMatch[1];
+        }
+    }
+
+    async function loadGistInfo() {
+        if (!isGistPreview || !gistId || gistInfoLoaded) return;
+        try {
+            var response = await fetch('https://api.github.com/gists/' + gistId);
+            if (response.ok) {
+                var info = await response.json();
+                gistOwner = info.owner.login;
+                gistInfoLoaded = true;
+            }
+        } catch (e) {
+            console.error('Failed to load gist info:', e);
+        }
+    }
+
+    function getPageFetchUrl(pageFile) {
+        if (isGistPreview && gistOwner && gistId) {
+            // Use raw gist URL for fetching content
+            return 'https://gist.githubusercontent.com/' + gistOwner + '/' + gistId + '/raw/' + pageFile;
+        }
+        return pageFile;
+    }
+
+    function getPageLinkUrl(pageFile) {
+        if (isGistPreview && gistId) {
+            // Use gisthost/gistpreview URL format for navigation links
+            return '?' + gistId + '/' + pageFile;
+        }
+        return pageFile;
+    }
+
+    function escapeHtml(text) {
+        var div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function escapeRegex(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    function openModal(query) {
+        modalInput.value = query || '';
+        searchResults.innerHTML = '';
+        searchStatus.textContent = '';
+        modal.showModal();
+        modalInput.focus();
+        if (query) {
+            performSearch(query);
+        }
+    }
+
+    function closeModal() {
+        modal.close();
+        // Update URL to remove search fragment, preserving path and query string
+        if (window.location.hash.startsWith('#search=')) {
+            history.replaceState(null, '', window.location.pathname + window.location.search);
+        }
+    }
+
+    function updateUrlHash(query) {
+        if (query) {
+            // Preserve path and query string when adding hash
+            history.replaceState(null, '', window.location.pathname + window.location.search + '#search=' + encodeURIComponent(query));
+        }
+    }
+
+    function highlightTextNodes(element, searchTerm) {
+        var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+        var nodesToReplace = [];
+
+        while (walker.nextNode()) {
+            var node = walker.currentNode;
+            if (node.nodeValue.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
+                nodesToReplace.push(node);
+            }
+        }
+
+        nodesToReplace.forEach(function(node) {
+            var text = node.nodeValue;
+            var regex = new RegExp('(' + escapeRegex(searchTerm) + ')', 'gi');
+            var parts = text.split(regex);
+            if (parts.length > 1) {
+                var span = document.createElement('span');
+                parts.forEach(function(part) {
+                    if (part.toLowerCase() === searchTerm.toLowerCase()) {
+                        var mark = document.createElement('mark');
+                        mark.textContent = part;
+                        span.appendChild(mark);
+                    } else {
+                        span.appendChild(document.createTextNode(part));
+                    }
+                });
+                node.parentNode.replaceChild(span, node);
+            }
+        });
+    }
+
+    function fixInternalLinks(element, pageFile) {
+        // Update all internal anchor links to include the page file
+        var links = element.querySelectorAll('a[href^="#"]');
+        links.forEach(function(link) {
+            var href = link.getAttribute('href');
+            link.setAttribute('href', pageFile + href);
+        });
+    }
+
+    function processPageHtml(pageFile, html, query) {
+        var parser = new DOMParser();
+        var doc = parser.parseFromString(html, 'text/html');
+        var resultsFromPage = 0;
+
+        // Find all message blocks
+        var messages = doc.querySelectorAll('.message');
+        messages.forEach(function(msg) {
+            var text = msg.textContent || '';
+            if (text.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+                resultsFromPage++;
+
+                // Get the message ID for linking
+                var msgId = msg.id || '';
+                var pageLinkUrl = getPageLinkUrl(pageFile);
+                var link = pageLinkUrl + (msgId ? '#' + msgId : '');
+
+                // Clone the message HTML and highlight matches
+                var clone = msg.cloneNode(true);
+                // Fix internal links to include the page file
+                fixInternalLinks(clone, pageLinkUrl);
+                highlightTextNodes(clone, query);
+
+                var resultDiv = document.createElement('div');
+                resultDiv.className = 'search-result';
+                resultDiv.innerHTML = '<a href="' + link + '">' +
+                    '<div class="search-result-page">' + escapeHtml(pageFile) + '</div>' +
+                    '<div class="search-result-content">' + clone.innerHTML + '</div>' +
+                    '</a>';
+                searchResults.appendChild(resultDiv);
+            }
+        });
+
+        return resultsFromPage;
+    }
+
+    async function fetchPageContent(pageNum) {
+        var pageFile = 'page-' + String(pageNum).padStart(3, '0') + '.html';
+        var response = await fetch(getPageFetchUrl(pageFile));
+        if (!response.ok) throw new Error('Failed to fetch');
+        var html = await response.text();
+        return { pageFile: pageFile, html: html };
+    }
+
+    async function performSearch(query) {
+        if (!query.trim()) {
+            searchStatus.textContent = 'Enter a search term';
+            return;
+        }
+
+        updateUrlHash(query);
+        searchResults.innerHTML = '';
+        searchStatus.textContent = 'Searching...';
+
+        // Load gist info if on gisthost/gistpreview (needed for constructing URLs)
+        if (isGistPreview && !gistInfoLoaded) {
+            searchStatus.textContent = 'Loading gist info...';
+            await loadGistInfo();
+            if (!gistOwner) {
+                searchStatus.textContent = 'Failed to load gist info. Search unavailable.';
+                return;
+            }
+        }
+
+        var resultsFound = 0;
+        var pagesSearched = 0;
+
+        searchStatus.textContent = 'Searching...';
+
+        // Process pages in batches of 3, but show results immediately as each completes
+        var batchSize = 3;
+        for (var i = 1; i <= totalPages; i += batchSize) {
+            var batch = [];
+            for (var j = i; j < i + batchSize && j <= totalPages; j++) {
+                batch.push(j);
+            }
+
+            // Create promises that process results immediately when each fetch completes
+            var promises = batch.map(function(pageNum) {
+                return fetchPageContent(pageNum)
+                    .then(function(result) {
+                        // Process and display results immediately
+                        var count = processPageHtml(result.pageFile, result.html, query);
+                        resultsFound += count;
+                        pagesSearched++;
+                        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
+                    })
+                    .catch(function() {
+                        pagesSearched++;
+                        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
+                    });
+            });
+
+            // Wait for this batch to complete before starting the next
+            await Promise.all(promises);
+        }
+
+        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + totalPages + ' pages';
+    }
+
+    // Event listeners
+    searchBtn.addEventListener('click', function() {
+        openModal(searchInput.value);
+    });
+
+    searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            openModal(searchInput.value);
+        }
+    });
+
+    modalSearchBtn.addEventListener('click', function() {
+        performSearch(modalInput.value);
+    });
+
+    modalInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            performSearch(modalInput.value);
+        }
+    });
+
+    modalCloseBtn.addEventListener('click', closeModal);
+
+    modal.addEventListener('click', function(e) {
+        if (e.target === modal) {
+            closeModal();
+        }
+    });
+
+    // Check for #search= in URL on page load
+    if (window.location.hash.startsWith('#search=')) {
+        var query = decodeURIComponent(window.location.hash.substring(8));
+        if (query) {
+            searchInput.value = query;
+            openModal(query);
+        }
+    }
+})();</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 2d46a78..f7805a6 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,14 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - page 2</title>
-    <style>
+    <style>/* Base CSS Variables */
 :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; }
+.transcript-wrapper { 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; }
+/* Page header with optional search */
+.page-header { margin-bottom: 24px; }
+.page-header #search-box { justify-content: flex-end; margin-bottom: 12px; }
+.header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 0; }
+.header-row h1 { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; flex: 1; min-width: 200px; }
+
+/* Messages */
 .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); }
@@ -30,16 +36,22 @@
 .message-content { padding: 16px; }
 .message-content p { margin: 0 0 12px 0; }
 .message-content p:last-child { margin-bottom: 0; }
+
+/* Thinking blocks */
 .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 blocks */
 .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 blocks (Write/Edit) */
 .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; }
@@ -62,6 +74,8 @@
 .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 blocks */
 .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; }
@@ -74,11 +88,17 @@
 .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; }
+
+/* Code blocks */
 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 */
 .user-content { margin: 0; }
+
+/* Truncatable content */
 .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; }
@@ -89,6 +109,8 @@
 .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 */
 .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); }
@@ -96,19 +118,25 @@
 .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; }
+
+/* Continuation details */
 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 items */
 .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-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-content { padding: 16px; overflow: hidden; }
+.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); overflow: hidden; }
 .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 cards */
 .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; }
@@ -119,9 +147,11 @@
 .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 { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); overflow: hidden; }
 .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 */
 #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; }
@@ -140,13 +170,179 @@
 .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-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+
+/* Mobile styles */
 @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>
+
+/* Tab Bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: -2px; }
+.tab { padding: 8px 20px; text-decoration: none; color: var(--text-muted); border-radius: 6px 6px 0 0; background: transparent; border: 2px solid transparent; border-bottom: none; transition: color 0.15s ease; }
+.tab:hover { color: var(--text-color); }
+.tab.active { color: var(--user-border); background: var(--bg-color); font-weight: 600; border-color: var(--user-border); border-bottom: 2px solid var(--bg-color); }
+
+/* Full-width container when tabs are present */
+.container:has(.header-row) { max-width: none; }
+
+/* Code Viewer Layout */
+.code-viewer { display: flex; height: calc(100vh - 140px); gap: 16px; min-height: 400px; }
+.file-tree-panel { width: 320px; min-width: 240px; overflow-y: auto; overflow-x: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.4; color: var(--text-color); transition: width 0.2s, min-width 0.2s, padding 0.2s; }
+.file-tree-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.file-tree-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0; }
+.collapse-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
+.collapse-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
+.collapse-btn svg { transition: transform 0.2s; }
+.file-tree-panel.collapsed { width: 48px !important; min-width: 48px !important; padding: 12px 8px; overflow: hidden; }
+.file-tree-panel.collapsed .panel-header { flex-direction: column; margin-bottom: 0; }
+.file-tree-panel.collapsed h3 { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); margin-top: 12px; white-space: nowrap; }
+.file-tree-panel.collapsed .collapse-btn svg { transform: rotate(180deg); }
+.file-tree-panel.collapsed .file-tree { display: none; }
+.code-panel { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden; min-width: 0; }
+#code-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); }
+#current-file-path { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-weight: 600; font-size: 0.9rem; word-break: break-all; }
+#code-content { flex: 1; overflow: auto; }
+.no-file-selected, .initial-loading { padding: 32px; text-align: center; color: var(--text-muted); }
+.initial-loading { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.editor-wrapper { display: flex; height: 100%; }
+.editor-container { flex: 1; overflow: auto; }
+.blame-minimap { width: 10px; background: rgba(0,0,0,0.05); position: relative; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.1); }
+.minimap-marker { position: absolute; left: 0; right: 0; cursor: pointer; transition: opacity 0.15s; }
+.minimap-marker:hover { opacity: 0.8; }
+.blame-tooltip { position: fixed; z-index: 1000; pointer-events: none; }
+.blame-tooltip .index-item { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+.blame-tooltip .index-item-content { max-height: 150px; overflow: hidden; }
+.blame-tooltip .index-item-stats { padding: 8px 16px; }
+.blame-tooltip .index-long-text { display: none; }
+.tooltip-assistant { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.1); background: var(--card-bg); }
+.tooltip-assistant-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--assistant-border); margin-bottom: 6px; }
+.tooltip-assistant p { margin: 4px 0; font-size: 0.9rem; }
+.blame-tooltip .tooltip-assistant { max-height: 200px; overflow: hidden; }
+.blame-tooltip .thinking { max-height: 200px; overflow: hidden; margin: 8px 16px 12px 16px; }
+.truncated-indicator { font-weight: normal; font-style: italic; color: var(--text-muted); text-transform: none; }
+.context-thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
+.context-thinking-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 4px; }
+.context-thinking p { margin: 4px 0; font-size: 0.85rem; color: var(--thinking-text); }
+.context-text { margin: 8px 0; }
+.context-text p { margin: 4px 0; font-size: 0.9rem; }
+
+/* File Tree */
+.file-tree { list-style: none; padding: 0; margin: 0; }
+.file-tree ul { list-style: none; padding-left: 16px; margin: 0; position: relative; }
+.file-tree ul::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 8px; width: 1px; background: rgba(0,0,0,0.15); }
+.tree-dir { padding: 4px 0; }
+.tree-toggle { display: inline-block; width: 16px; height: 16px; margin-right: 4px; position: relative; cursor: pointer; }
+.tree-toggle::before { content: ''; position: absolute; left: 5px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.15s ease; }
+.tree-dir.open > .tree-toggle::before { transform: rotate(90deg); left: 3px; top: 6px; }
+.tree-dir-name { color: var(--text-color); font-weight: 500; }
+.tree-children { display: none; margin-top: 2px; }
+.tree-dir.open > .tree-children { display: block; }
+.tree-file { display: flex; align-items: center; padding: 3px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tree-file::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
+.tree-file:hover { background: rgba(0,0,0,0.05); }
+.tree-file.selected { background: var(--user-bg); }
+.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.tree-file.status-added::before { background: #2e7d32; }
+.tree-file.status-added .tree-file-name { color: #2e7d32; }
+.tree-file.status-modified::before { background: #e65100; }
+.tree-file.status-modified .tree-file-name { color: #e65100; }
+
+/* Blame Gutter */
+.cm-blame-gutter { width: 28px; background: rgba(0,0,0,0.02); }
+.blame-marker { display: flex; justify-content: center; align-items: center; height: 100%; }
+.blame-link { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--user-border); color: white; border-radius: 3px; text-decoration: none; font-size: 0.65rem; font-weight: bold; }
+.blame-link:hover { background: #1565c0; }
+.blame-initial { color: var(--text-muted); font-size: 0.8rem; }
+
+/* CodeMirror Overrides */
+.cm-editor { height: 100%; font-size: 0.85rem; }
+.cm-scroller { overflow: auto; }
+.cm-content { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
+.cm-line[data-range-index] { cursor: pointer; position: relative; }
+.cm-line:focus { outline: none; }
+.cm-active-range { background: rgba(255, 235, 59, 0.5) !important; }
+.blame-msg-num { position: absolute; right: 16px; color: #9e9e9e; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none; }
+
+/* Transcript Panel */
+.transcript-panel { width: 460px; min-width: 280px; overflow-y: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; position: relative; }
+.transcript-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 -16px 0 -16px; padding: 0 16px 12px 16px; position: sticky; top: -16px; background: var(--card-bg); z-index: 11; }
+
+/* Pinned User Message - sits directly below h3 with no gap */
+.pinned-user-message { position: sticky; top: 12px; z-index: 10; margin: 0 -16px 12px -16px; padding: 0 16px 8px 16px; background: var(--card-bg); cursor: pointer; }
+.pinned-user-message::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%); pointer-events: none; }
+.pinned-user-message-inner { background: linear-gradient(135deg, var(--user-bg) 0%, #bbdefb 100%); border-left: 3px solid var(--user-border); border-radius: 4px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.15s, transform 0.15s; }
+.pinned-user-message:hover .pinned-user-message-inner { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }
+.pinned-user-message-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--user-border); margin-bottom: 4px; }
+.pinned-user-content { font-size: 0.85rem; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Resizable panels */
+.resize-handle { width: 8px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; }
+.resize-handle:hover, .resize-handle.dragging { background: rgba(25, 118, 210, 0.2); }
+.resize-handle::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 1px; }
+
+/* Highlighted message in transcript */
+.message.highlighted { box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.8); }
+
+/* Clickable messages in transcript (code view mode) */
+.transcript-panel .message { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
+.transcript-panel .message:hover { transform: translateX(2px); }
+.transcript-panel .message.highlighted:hover { transform: none; }
+
+/* Diff-only View */
+.diff-only-view { padding: 16px; }
+.diff-operation { margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+.diff-header { padding: 8px 12px; background: rgba(0,0,0,0.03); display: flex; align-items: center; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
+.diff-type { font-weight: 600; background: var(--user-border); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
+.diff-link { color: var(--user-border); text-decoration: none; }
+.diff-link:hover { text-decoration: underline; }
+.diff-content { margin: 0; padding: 12px; overflow-x: auto; background: var(--card-bg); font-size: 0.85rem; }
+.diff-write { background: #e8f5e9; border-left: 4px solid #4caf50; }
+.diff-edit { display: flex; flex-direction: column; }
+.diff-edit .edit-section { display: flex; }
+.diff-edit .edit-label { width: 24px; padding: 8px 4px; font-weight: bold; text-align: center; flex-shrink: 0; }
+.diff-edit .edit-old { background: #ffebee; }
+.diff-edit .edit-old .edit-label { color: #c62828; }
+.diff-edit .edit-new { background: #e8f5e9; }
+.diff-edit .edit-new .edit-label { color: #2e7d32; }
+.diff-edit .edit-content { flex: 1; margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+    .code-viewer { flex-direction: column; height: auto; }
+    .file-tree-panel { width: 100% !important; max-height: 200px; }
+    .code-panel { min-height: 400px; }
+    .transcript-panel { width: 100% !important; max-height: 300px; }
+    .resize-handle { display: none; }
+}</style>
 </head>
 <body>
     <div class="container">
-        <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page 2/2</h1>
-        
+        <div class="page-header">
+            <div id="search-box">
+                <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+            </div>
+            <div class="header-row">
+                <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude Code transcript</a> - page 2/2</h1>
+                
+            </div>
+        </div>
+
+        <dialog id="search-modal">
+            <div class="search-modal-header">
+                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="modal-search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+                <button id="modal-close-btn" type="button" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </button>
+            </div>
+            <div id="search-status"></div>
+            <div id="search-results"></div>
+        </dialog>
+        <div class="transcript-wrapper">
+            
 
 <div class="pagination">
 <a href="index.html" class="index-link">Index</a>
@@ -156,8 +352,9 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <span class="disabled">Next &rarr;</span>
 </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 id="page-messages">
+                
+<div class="message user" id="msg-2025-12-24T10-05-00-000Z"><div class="message-header"><span class="role-label">User Prompt #6</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="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="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">math_utils.py</span></div>
@@ -177,7 +374,8 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <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="assistant-text"><p>Added multiply function!</p></div></div></div>
-        
+            </div>
+            
 
 <div class="pagination">
 <a href="index.html" class="index-link">Index</a>
@@ -187,16 +385,34 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <span class="disabled">Next &rarr;</span>
 </div>
 
+        </div>
+        <script>window.PAGE_NUM = 2;</script>
     </div>
-    <script>
+    <script>function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
 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; }
+    el.textContent = formatTimestamp(date);
+    el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
 });
 document.querySelectorAll('pre.json').forEach(function(el) {
     let text = el.textContent;
@@ -216,7 +432,285 @@ <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>
+    <script>(function() {
+    var totalPages = window.TOTAL_PAGES || 1;
+    var searchBox = document.getElementById('search-box');
+    var searchInput = document.getElementById('search-input');
+    var searchBtn = document.getElementById('search-btn');
+    var modal = document.getElementById('search-modal');
+    var modalInput = document.getElementById('modal-search-input');
+    var modalSearchBtn = document.getElementById('modal-search-btn');
+    var modalCloseBtn = document.getElementById('modal-close-btn');
+    var searchStatus = document.getElementById('search-status');
+    var searchResults = document.getElementById('search-results');
+
+    if (!searchBox || !modal) return;
+
+    // Hide search on file:// protocol (doesn't work due to CORS restrictions)
+    if (window.location.protocol === 'file:') return;
+
+    // Show search box (progressive enhancement)
+    searchBox.style.display = 'flex';
+
+    // Gist preview support - detect if we're on gisthost.github.io or gistpreview.github.io
+    var hostname = window.location.hostname;
+    var isGistPreview = hostname === 'gisthost.github.io' || hostname === 'gistpreview.github.io';
+    var gistId = null;
+    var gistOwner = null;
+    var gistInfoLoaded = false;
+
+    if (isGistPreview) {
+        // Extract gist ID from URL query string like ?78a436a8a9e7a2e603738b8193b95410/index.html
+        var queryMatch = window.location.search.match(/^\?([a-f0-9]+)/i);
+        if (queryMatch) {
+            gistId = queryMatch[1];
+        }
+    }
+
+    async function loadGistInfo() {
+        if (!isGistPreview || !gistId || gistInfoLoaded) return;
+        try {
+            var response = await fetch('https://api.github.com/gists/' + gistId);
+            if (response.ok) {
+                var info = await response.json();
+                gistOwner = info.owner.login;
+                gistInfoLoaded = true;
+            }
+        } catch (e) {
+            console.error('Failed to load gist info:', e);
+        }
+    }
+
+    function getPageFetchUrl(pageFile) {
+        if (isGistPreview && gistOwner && gistId) {
+            // Use raw gist URL for fetching content
+            return 'https://gist.githubusercontent.com/' + gistOwner + '/' + gistId + '/raw/' + pageFile;
+        }
+        return pageFile;
+    }
+
+    function getPageLinkUrl(pageFile) {
+        if (isGistPreview && gistId) {
+            // Use gisthost/gistpreview URL format for navigation links
+            return '?' + gistId + '/' + pageFile;
+        }
+        return pageFile;
+    }
+
+    function escapeHtml(text) {
+        var div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function escapeRegex(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    function openModal(query) {
+        modalInput.value = query || '';
+        searchResults.innerHTML = '';
+        searchStatus.textContent = '';
+        modal.showModal();
+        modalInput.focus();
+        if (query) {
+            performSearch(query);
+        }
+    }
+
+    function closeModal() {
+        modal.close();
+        // Update URL to remove search fragment, preserving path and query string
+        if (window.location.hash.startsWith('#search=')) {
+            history.replaceState(null, '', window.location.pathname + window.location.search);
+        }
+    }
+
+    function updateUrlHash(query) {
+        if (query) {
+            // Preserve path and query string when adding hash
+            history.replaceState(null, '', window.location.pathname + window.location.search + '#search=' + encodeURIComponent(query));
+        }
+    }
+
+    function highlightTextNodes(element, searchTerm) {
+        var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+        var nodesToReplace = [];
+
+        while (walker.nextNode()) {
+            var node = walker.currentNode;
+            if (node.nodeValue.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
+                nodesToReplace.push(node);
+            }
+        }
+
+        nodesToReplace.forEach(function(node) {
+            var text = node.nodeValue;
+            var regex = new RegExp('(' + escapeRegex(searchTerm) + ')', 'gi');
+            var parts = text.split(regex);
+            if (parts.length > 1) {
+                var span = document.createElement('span');
+                parts.forEach(function(part) {
+                    if (part.toLowerCase() === searchTerm.toLowerCase()) {
+                        var mark = document.createElement('mark');
+                        mark.textContent = part;
+                        span.appendChild(mark);
+                    } else {
+                        span.appendChild(document.createTextNode(part));
+                    }
+                });
+                node.parentNode.replaceChild(span, node);
+            }
+        });
+    }
+
+    function fixInternalLinks(element, pageFile) {
+        // Update all internal anchor links to include the page file
+        var links = element.querySelectorAll('a[href^="#"]');
+        links.forEach(function(link) {
+            var href = link.getAttribute('href');
+            link.setAttribute('href', pageFile + href);
+        });
+    }
+
+    function processPageHtml(pageFile, html, query) {
+        var parser = new DOMParser();
+        var doc = parser.parseFromString(html, 'text/html');
+        var resultsFromPage = 0;
+
+        // Find all message blocks
+        var messages = doc.querySelectorAll('.message');
+        messages.forEach(function(msg) {
+            var text = msg.textContent || '';
+            if (text.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+                resultsFromPage++;
+
+                // Get the message ID for linking
+                var msgId = msg.id || '';
+                var pageLinkUrl = getPageLinkUrl(pageFile);
+                var link = pageLinkUrl + (msgId ? '#' + msgId : '');
+
+                // Clone the message HTML and highlight matches
+                var clone = msg.cloneNode(true);
+                // Fix internal links to include the page file
+                fixInternalLinks(clone, pageLinkUrl);
+                highlightTextNodes(clone, query);
+
+                var resultDiv = document.createElement('div');
+                resultDiv.className = 'search-result';
+                resultDiv.innerHTML = '<a href="' + link + '">' +
+                    '<div class="search-result-page">' + escapeHtml(pageFile) + '</div>' +
+                    '<div class="search-result-content">' + clone.innerHTML + '</div>' +
+                    '</a>';
+                searchResults.appendChild(resultDiv);
+            }
+        });
+
+        return resultsFromPage;
+    }
+
+    async function fetchPageContent(pageNum) {
+        var pageFile = 'page-' + String(pageNum).padStart(3, '0') + '.html';
+        var response = await fetch(getPageFetchUrl(pageFile));
+        if (!response.ok) throw new Error('Failed to fetch');
+        var html = await response.text();
+        return { pageFile: pageFile, html: html };
+    }
+
+    async function performSearch(query) {
+        if (!query.trim()) {
+            searchStatus.textContent = 'Enter a search term';
+            return;
+        }
+
+        updateUrlHash(query);
+        searchResults.innerHTML = '';
+        searchStatus.textContent = 'Searching...';
+
+        // Load gist info if on gisthost/gistpreview (needed for constructing URLs)
+        if (isGistPreview && !gistInfoLoaded) {
+            searchStatus.textContent = 'Loading gist info...';
+            await loadGistInfo();
+            if (!gistOwner) {
+                searchStatus.textContent = 'Failed to load gist info. Search unavailable.';
+                return;
+            }
+        }
+
+        var resultsFound = 0;
+        var pagesSearched = 0;
+
+        searchStatus.textContent = 'Searching...';
+
+        // Process pages in batches of 3, but show results immediately as each completes
+        var batchSize = 3;
+        for (var i = 1; i <= totalPages; i += batchSize) {
+            var batch = [];
+            for (var j = i; j < i + batchSize && j <= totalPages; j++) {
+                batch.push(j);
+            }
+
+            // Create promises that process results immediately when each fetch completes
+            var promises = batch.map(function(pageNum) {
+                return fetchPageContent(pageNum)
+                    .then(function(result) {
+                        // Process and display results immediately
+                        var count = processPageHtml(result.pageFile, result.html, query);
+                        resultsFound += count;
+                        pagesSearched++;
+                        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
+                    })
+                    .catch(function() {
+                        pagesSearched++;
+                        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
+                    });
+            });
+
+            // Wait for this batch to complete before starting the next
+            await Promise.all(promises);
+        }
+
+        searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + totalPages + ' pages';
+    }
+
+    // Event listeners
+    searchBtn.addEventListener('click', function() {
+        openModal(searchInput.value);
+    });
+
+    searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            openModal(searchInput.value);
+        }
+    });
+
+    modalSearchBtn.addEventListener('click', function() {
+        performSearch(modalInput.value);
+    });
+
+    modalInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            performSearch(modalInput.value);
+        }
+    });
+
+    modalCloseBtn.addEventListener('click', closeModal);
+
+    modal.addEventListener('click', function(e) {
+        if (e.target === modal) {
+            closeModal();
+        }
+    });
+
+    // Check for #search= in URL on page load
+    if (window.location.hash.startsWith('#search=')) {
+        var query = decodeURIComponent(window.location.hash.substring(8));
+        if (query) {
+            searchInput.value = query;
+            openModal(query);
+        }
+    }
+})();</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 e83424a..56ae826 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,14 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code transcript - Index</title>
-    <style>
+    <style>/* Base CSS Variables */
 :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; }
+.transcript-wrapper { 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; }
+/* Page header with optional search */
+.page-header { margin-bottom: 24px; }
+.page-header #search-box { justify-content: flex-end; margin-bottom: 12px; }
+.header-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid var(--user-border); padding-bottom: 0; }
+.header-row h1 { border-bottom: none; padding-bottom: 8px; margin-bottom: 0; flex: 1; min-width: 200px; }
+
+/* Messages */
 .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); }
@@ -30,16 +36,22 @@
 .message-content { padding: 16px; }
 .message-content p { margin: 0 0 12px 0; }
 .message-content p:last-child { margin-bottom: 0; }
+
+/* Thinking blocks */
 .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 blocks */
 .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 blocks (Write/Edit) */
 .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; }
@@ -62,6 +74,8 @@
 .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 blocks */
 .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; }
@@ -74,11 +88,17 @@
 .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; }
+
+/* Code blocks */
 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 */
 .user-content { margin: 0; }
+
+/* Truncatable content */
 .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; }
@@ -89,6 +109,8 @@
 .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 */
 .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); }
@@ -96,19 +118,25 @@
 .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; }
+
+/* Continuation details */
 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 items */
 .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-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-content { padding: 16px; overflow: hidden; }
+.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); overflow: hidden; }
 .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 cards */
 .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; }
@@ -119,9 +147,11 @@
 .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 { margin-top: 8px; padding: 12px; background: var(--card-bg); border-radius: 8px; border-left: 3px solid var(--assistant-border); overflow: hidden; }
 .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 */
 #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; }
@@ -140,21 +170,179 @@
 .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-content { padding: 12px; }
 .search-result mark { background: #fff59d; padding: 1px 2px; border-radius: 2px; }
+
+/* Mobile styles */
 @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>
+
+/* Tab Bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: -2px; }
+.tab { padding: 8px 20px; text-decoration: none; color: var(--text-muted); border-radius: 6px 6px 0 0; background: transparent; border: 2px solid transparent; border-bottom: none; transition: color 0.15s ease; }
+.tab:hover { color: var(--text-color); }
+.tab.active { color: var(--user-border); background: var(--bg-color); font-weight: 600; border-color: var(--user-border); border-bottom: 2px solid var(--bg-color); }
+
+/* Full-width container when tabs are present */
+.container:has(.header-row) { max-width: none; }
+
+/* Code Viewer Layout */
+.code-viewer { display: flex; height: calc(100vh - 140px); gap: 16px; min-height: 400px; }
+.file-tree-panel { width: 320px; min-width: 240px; overflow-y: auto; overflow-x: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.4; color: var(--text-color); transition: width 0.2s, min-width 0.2s, padding 0.2s; }
+.file-tree-panel .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.file-tree-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0; }
+.collapse-btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
+.collapse-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-color); }
+.collapse-btn svg { transition: transform 0.2s; }
+.file-tree-panel.collapsed { width: 48px !important; min-width: 48px !important; padding: 12px 8px; overflow: hidden; }
+.file-tree-panel.collapsed .panel-header { flex-direction: column; margin-bottom: 0; }
+.file-tree-panel.collapsed h3 { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); margin-top: 12px; white-space: nowrap; }
+.file-tree-panel.collapsed .collapse-btn svg { transform: rotate(180deg); }
+.file-tree-panel.collapsed .file-tree { display: none; }
+.code-panel { flex: 1; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden; min-width: 0; }
+#code-header { padding: 12px 16px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.1); }
+#current-file-path { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-weight: 600; font-size: 0.9rem; word-break: break-all; }
+#code-content { flex: 1; overflow: auto; }
+.no-file-selected, .initial-loading { padding: 32px; text-align: center; color: var(--text-muted); }
+.initial-loading { animation: pulse 1.5s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+.editor-wrapper { display: flex; height: 100%; }
+.editor-container { flex: 1; overflow: auto; }
+.blame-minimap { width: 10px; background: rgba(0,0,0,0.05); position: relative; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.1); }
+.minimap-marker { position: absolute; left: 0; right: 0; cursor: pointer; transition: opacity 0.15s; }
+.minimap-marker:hover { opacity: 0.8; }
+.blame-tooltip { position: fixed; z-index: 1000; pointer-events: none; }
+.blame-tooltip .index-item { margin: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
+.blame-tooltip .index-item-content { max-height: 150px; overflow: hidden; }
+.blame-tooltip .index-item-stats { padding: 8px 16px; }
+.blame-tooltip .index-long-text { display: none; }
+.tooltip-assistant { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.1); background: var(--card-bg); }
+.tooltip-assistant-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--assistant-border); margin-bottom: 6px; }
+.tooltip-assistant p { margin: 4px 0; font-size: 0.9rem; }
+.blame-tooltip .tooltip-assistant { max-height: 200px; overflow: hidden; }
+.blame-tooltip .thinking { max-height: 200px; overflow: hidden; margin: 8px 16px 12px 16px; }
+.truncated-indicator { font-weight: normal; font-style: italic; color: var(--text-muted); text-transform: none; }
+.context-thinking { background: var(--thinking-bg); border: 1px solid var(--thinking-border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
+.context-thinking-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: #f57c00; margin-bottom: 4px; }
+.context-thinking p { margin: 4px 0; font-size: 0.85rem; color: var(--thinking-text); }
+.context-text { margin: 8px 0; }
+.context-text p { margin: 4px 0; font-size: 0.9rem; }
+
+/* File Tree */
+.file-tree { list-style: none; padding: 0; margin: 0; }
+.file-tree ul { list-style: none; padding-left: 16px; margin: 0; position: relative; }
+.file-tree ul::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 8px; width: 1px; background: rgba(0,0,0,0.15); }
+.tree-dir { padding: 4px 0; }
+.tree-toggle { display: inline-block; width: 16px; height: 16px; margin-right: 4px; position: relative; cursor: pointer; }
+.tree-toggle::before { content: ''; position: absolute; left: 5px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--text-muted); transition: transform 0.15s ease; }
+.tree-dir.open > .tree-toggle::before { transform: rotate(90deg); left: 3px; top: 6px; }
+.tree-dir-name { color: var(--text-color); font-weight: 500; }
+.tree-children { display: none; margin-top: 2px; }
+.tree-dir.open > .tree-children { display: block; }
+.tree-file { display: flex; align-items: center; padding: 3px 8px; margin: 1px 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.tree-file::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
+.tree-file:hover { background: rgba(0,0,0,0.05); }
+.tree-file.selected { background: var(--user-bg); }
+.tree-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.tree-file.status-added::before { background: #2e7d32; }
+.tree-file.status-added .tree-file-name { color: #2e7d32; }
+.tree-file.status-modified::before { background: #e65100; }
+.tree-file.status-modified .tree-file-name { color: #e65100; }
+
+/* Blame Gutter */
+.cm-blame-gutter { width: 28px; background: rgba(0,0,0,0.02); }
+.blame-marker { display: flex; justify-content: center; align-items: center; height: 100%; }
+.blame-link { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--user-border); color: white; border-radius: 3px; text-decoration: none; font-size: 0.65rem; font-weight: bold; }
+.blame-link:hover { background: #1565c0; }
+.blame-initial { color: var(--text-muted); font-size: 0.8rem; }
+
+/* CodeMirror Overrides */
+.cm-editor { height: 100%; font-size: 0.85rem; }
+.cm-scroller { overflow: auto; }
+.cm-content { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
+.cm-line[data-range-index] { cursor: pointer; position: relative; }
+.cm-line:focus { outline: none; }
+.cm-active-range { background: rgba(255, 235, 59, 0.5) !important; }
+.blame-msg-num { position: absolute; right: 16px; color: #9e9e9e; font-size: 0.75rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none; }
+
+/* Transcript Panel */
+.transcript-panel { width: 460px; min-width: 280px; overflow-y: auto; background: var(--card-bg); border-radius: 8px; padding: 16px; flex-shrink: 0; position: relative; }
+.transcript-panel h3 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 -16px 0 -16px; padding: 0 16px 12px 16px; position: sticky; top: -16px; background: var(--card-bg); z-index: 11; }
+
+/* Pinned User Message - sits directly below h3 with no gap */
+.pinned-user-message { position: sticky; top: 12px; z-index: 10; margin: 0 -16px 12px -16px; padding: 0 16px 8px 16px; background: var(--card-bg); cursor: pointer; }
+.pinned-user-message::before { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%); pointer-events: none; }
+.pinned-user-message-inner { background: linear-gradient(135deg, var(--user-bg) 0%, #bbdefb 100%); border-left: 3px solid var(--user-border); border-radius: 4px; padding: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.15s, transform 0.15s; }
+.pinned-user-message:hover .pinned-user-message-inner { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }
+.pinned-user-message-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--user-border); margin-bottom: 4px; }
+.pinned-user-content { font-size: 0.85rem; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Resizable panels */
+.resize-handle { width: 8px; cursor: col-resize; background: transparent; flex-shrink: 0; position: relative; }
+.resize-handle:hover, .resize-handle.dragging { background: rgba(25, 118, 210, 0.2); }
+.resize-handle::after { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 1px; }
+
+/* Highlighted message in transcript */
+.message.highlighted { box-shadow: 0 0 0 3px rgba(255, 235, 59, 0.8); }
+
+/* Clickable messages in transcript (code view mode) */
+.transcript-panel .message { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
+.transcript-panel .message:hover { transform: translateX(2px); }
+.transcript-panel .message.highlighted:hover { transform: none; }
+
+/* Diff-only View */
+.diff-only-view { padding: 16px; }
+.diff-operation { margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
+.diff-header { padding: 8px 12px; background: rgba(0,0,0,0.03); display: flex; align-items: center; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
+.diff-type { font-weight: 600; background: var(--user-border); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
+.diff-link { color: var(--user-border); text-decoration: none; }
+.diff-link:hover { text-decoration: underline; }
+.diff-content { margin: 0; padding: 12px; overflow-x: auto; background: var(--card-bg); font-size: 0.85rem; }
+.diff-write { background: #e8f5e9; border-left: 4px solid #4caf50; }
+.diff-edit { display: flex; flex-direction: column; }
+.diff-edit .edit-section { display: flex; }
+.diff-edit .edit-label { width: 24px; padding: 8px 4px; font-weight: bold; text-align: center; flex-shrink: 0; }
+.diff-edit .edit-old { background: #ffebee; }
+.diff-edit .edit-old .edit-label { color: #c62828; }
+.diff-edit .edit-new { background: #e8f5e9; }
+.diff-edit .edit-new .edit-label { color: #2e7d32; }
+.diff-edit .edit-content { flex: 1; margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+    .code-viewer { flex-direction: column; height: auto; }
+    .file-tree-panel { width: 100% !important; max-height: 200px; }
+    .code-panel { min-height: 400px; }
+    .transcript-panel { width: 100% !important; max-height: 300px; }
+    .resize-handle { display: none; }
+}</style>
 </head>
 <body>
     <div class="container">
-        <div class="header-row">
-            <h1>Claude Code transcript</h1>
+        <div class="page-header">
             <div id="search-box">
                 <input type="text" id="search-input" placeholder="Search..." aria-label="Search transcripts">
                 <button id="search-btn" type="button" aria-label="Search">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
                 </button>
             </div>
+            <div class="header-row">
+                <h1>Claude Code transcript</h1>
+                
+            </div>
         </div>
-        
+
+        <dialog id="search-modal">
+            <div class="search-modal-header">
+                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
+                <button id="modal-search-btn" type="button" aria-label="Search">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
+                </button>
+                <button id="modal-close-btn" type="button" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </button>
+            </div>
+            <div id="search-status"></div>
+            <div id="search-results"></div>
+        </dialog>
+        <div class="transcript-wrapper">
+            
 
 <div class="pagination">
 <span class="current">Index</span>
@@ -163,12 +351,14 @@ <h1>Claude Code transcript</h1>
 <a href="page-001.html">Next &rarr;</a>
 </div>
 
-        <p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
-        
+            <p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
+            <div id="index-items">
+                
 <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>
+            
 
 <div class="pagination">
 <span class="current">Index</span>
@@ -177,23 +367,56 @@ <h1>Claude Code transcript</h1>
 <a href="page-001.html">Next &rarr;</a>
 </div>
 
-
-        <dialog id="search-modal">
-            <div class="search-modal-header">
-                <input type="text" id="modal-search-input" placeholder="Search..." aria-label="Search transcripts">
-                <button id="modal-search-btn" type="button" aria-label="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
-                </button>
-                <button id="modal-close-btn" type="button" aria-label="Close">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
-                </button>
-            </div>
-            <div id="search-status"></div>
-            <div id="search-results"></div>
-        </dialog>
-        <script>
-(function() {
-    var totalPages = 1;
+        </div>
+        <script>window.TOTAL_PAGES = 1;</script>
+    </div>
+    <script>function formatTimestamp(date) {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+    const isThisYear = date.getFullYear() === now.getFullYear();
+
+    const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+    if (isToday) {
+        return timeStr;
+    } else if (isYesterday) {
+        return 'Yesterday ' + timeStr;
+    } else if (isThisYear) {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + timeStr;
+    } else {
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) + ' ' + timeStr;
+    }
+}
+document.querySelectorAll('time[data-timestamp]').forEach(function(el) {
+    const timestamp = el.getAttribute('data-timestamp');
+    const date = new Date(timestamp);
+    el.textContent = formatTimestamp(date);
+    el.title = date.toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'long' });
+});
+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'; }
+        });
+    }
+});</script>
+    <script>(function() {
+    var totalPages = window.TOTAL_PAGES || 1;
     var searchBox = document.getElementById('search-box');
     var searchInput = document.getElementById('search-input');
     var searchBtn = document.getElementById('search-btn');
@@ -251,7 +474,7 @@ <h1>Claude Code transcript</h1>
 
     function getPageLinkUrl(pageFile) {
         if (isGistPreview && gistId) {
-            // Use gistpreview URL format for navigation links
+            // Use gisthost/gistpreview URL format for navigation links
             return '?' + gistId + '/' + pageFile;
         }
         return pageFile;
@@ -333,7 +556,7 @@ <h1>Claude Code transcript</h1>
         });
     }
 
-    function processPage(pageFile, html, query) {
+    function processPageHtml(pageFile, html, query) {
         var parser = new DOMParser();
         var doc = parser.parseFromString(html, 'text/html');
         var resultsFromPage = 0;
@@ -369,6 +592,14 @@ <h1>Claude Code transcript</h1>
         return resultsFromPage;
     }
 
+    async function fetchPageContent(pageNum) {
+        var pageFile = 'page-' + String(pageNum).padStart(3, '0') + '.html';
+        var response = await fetch(getPageFetchUrl(pageFile));
+        if (!response.ok) throw new Error('Failed to fetch');
+        var html = await response.text();
+        return { pageFile: pageFile, html: html };
+    }
+
     async function performSearch(query) {
         if (!query.trim()) {
             searchStatus.textContent = 'Enter a search term';
@@ -379,7 +610,7 @@ <h1>Claude Code transcript</h1>
         searchResults.innerHTML = '';
         searchStatus.textContent = 'Searching...';
 
-        // Load gist info if on gistpreview (needed for constructing URLs)
+        // Load gist info if on gisthost/gistpreview (needed for constructing URLs)
         if (isGistPreview && !gistInfoLoaded) {
             searchStatus.textContent = 'Loading gist info...';
             await loadGistInfo();
@@ -392,29 +623,22 @@ <h1>Claude Code transcript</h1>
         var resultsFound = 0;
         var pagesSearched = 0;
 
-        // Build list of pages to fetch
-        var pagesToFetch = [];
-        for (var i = 1; i <= totalPages; i++) {
-            pagesToFetch.push('page-' + String(i).padStart(3, '0') + '.html');
-        }
-
         searchStatus.textContent = 'Searching...';
 
         // Process pages in batches of 3, but show results immediately as each completes
         var batchSize = 3;
-        for (var i = 0; i < pagesToFetch.length; i += batchSize) {
-            var batch = pagesToFetch.slice(i, i + batchSize);
+        for (var i = 1; i <= totalPages; i += batchSize) {
+            var batch = [];
+            for (var j = i; j < i + batchSize && j <= totalPages; j++) {
+                batch.push(j);
+            }
 
             // Create promises that process results immediately when each fetch completes
-            var promises = batch.map(function(pageFile) {
-                return fetch(getPageFetchUrl(pageFile))
-                    .then(function(response) {
-                        if (!response.ok) throw new Error('Failed to fetch');
-                        return response.text();
-                    })
-                    .then(function(html) {
+            var promises = batch.map(function(pageNum) {
+                return fetchPageContent(pageNum)
+                    .then(function(result) {
                         // Process and display results immediately
-                        var count = processPage(pageFile, html, query);
+                        var count = processPageHtml(result.pageFile, result.html, query);
                         resultsFound += count;
                         pagesSearched++;
                         searchStatus.textContent = 'Found ' + resultsFound + ' result(s) in ' + pagesSearched + '/' + totalPages + ' pages...';
@@ -469,38 +693,6 @@ <h1>Claude Code transcript</h1>
             openModal(query);
         }
     }
-})();
-        </script>
-    </div>
-    <script>
-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'; }
-        });
-    }
-});
-</script>
+})();</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/tests/test_code_view.py b/tests/test_code_view.py
new file mode 100644
index 0000000..9780ee6
--- /dev/null
+++ b/tests/test_code_view.py
@@ -0,0 +1,2368 @@
+"""Tests for code viewer functionality."""
+
+import json
+from pathlib import Path
+
+import pytest
+
+from claude_code_transcripts import (
+    FileOperation,
+    FileState,
+    CodeViewData,
+    extract_file_operations,
+    build_file_tree,
+    generate_code_view_html,
+    PROMPTS_PER_PAGE,
+)
+
+
+@pytest.fixture
+def sample_session():
+    """Load the sample session fixture."""
+    fixture_path = Path(__file__).parent / "sample_session.json"
+    with open(fixture_path) as f:
+        return json.load(f)
+
+
+@pytest.fixture
+def sample_conversations(sample_session):
+    """Build conversations list from sample session (mimics generate_html logic)."""
+    from claude_code_transcripts import extract_text_from_content
+
+    loglines = sample_session.get("loglines", [])
+    conversations = []
+    current_conv = None
+
+    for entry in loglines:
+        log_type = entry.get("type")
+        timestamp = entry.get("timestamp", "")
+        message = entry.get("message", {})
+
+        if not message:
+            continue
+
+        message_json = json.dumps(message)
+        is_user_prompt = False
+        user_text = None
+
+        if log_type == "user":
+            content = message.get("content", "")
+            text = extract_text_from_content(content)
+            if text:
+                is_user_prompt = True
+                user_text = text
+
+        if is_user_prompt:
+            if current_conv:
+                conversations.append(current_conv)
+            current_conv = {
+                "user_text": user_text,
+                "timestamp": timestamp,
+                "messages": [(log_type, message_json, timestamp)],
+            }
+        elif current_conv:
+            current_conv["messages"].append((log_type, message_json, timestamp))
+
+    if current_conv:
+        conversations.append(current_conv)
+
+    return conversations
+
+
+class TestFileOperationDataclass:
+    """Tests for the FileOperation dataclass."""
+
+    def test_create_write_operation(self):
+        """Test creating a Write FileOperation."""
+        op = FileOperation(
+            file_path="/path/to/file.py",
+            operation_type="write",
+            tool_id="toolu_123",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-0-1",
+            content="print('hello')\n",
+        )
+        assert op.file_path == "/path/to/file.py"
+        assert op.operation_type == "write"
+        assert op.content == "print('hello')\n"
+        assert op.old_string is None
+        assert op.new_string is None
+
+    def test_create_edit_operation(self):
+        """Test creating an Edit FileOperation."""
+        op = FileOperation(
+            file_path="/path/to/file.py",
+            operation_type="edit",
+            tool_id="toolu_456",
+            timestamp="2025-12-24T10:01:00.000Z",
+            page_num=1,
+            msg_id="msg-0-2",
+            old_string="print('hello')",
+            new_string="print('world')",
+            replace_all=False,
+        )
+        assert op.file_path == "/path/to/file.py"
+        assert op.operation_type == "edit"
+        assert op.old_string == "print('hello')"
+        assert op.new_string == "print('world')"
+        assert op.content is None
+
+
+class TestExtractFileOperations:
+    """Tests for the extract_file_operations function."""
+
+    def test_extracts_write_operations(self, sample_session, sample_conversations):
+        """Test that Write tool calls are extracted."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        write_ops = [op for op in operations if op.operation_type == "write"]
+        assert len(write_ops) >= 1
+
+        # Check first write operation
+        first_write = write_ops[0]
+        assert first_write.file_path == "/project/math_utils.py"
+        assert "def add" in first_write.content
+        assert first_write.tool_id == "toolu_write_001"
+
+    def test_extracts_edit_operations(self, sample_session, sample_conversations):
+        """Test that Edit tool calls are extracted."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        edit_ops = [op for op in operations if op.operation_type == "edit"]
+        assert len(edit_ops) >= 1
+
+        # Check an edit operation
+        first_edit = edit_ops[0]
+        assert first_edit.file_path == "/project/math_utils.py"
+        assert first_edit.old_string is not None
+        assert first_edit.new_string is not None
+
+    def test_operations_sorted_by_timestamp(self, sample_session, sample_conversations):
+        """Test that operations are returned in chronological order."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        # Check timestamps are in order
+        for i in range(len(operations) - 1):
+            assert operations[i].timestamp <= operations[i + 1].timestamp
+
+    def test_operations_have_page_numbers(self, sample_session, sample_conversations):
+        """Test that operations have valid page numbers."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        for op in operations:
+            assert op.page_num >= 1
+            # Page number should be within reasonable bounds
+            max_page = (len(sample_conversations) // PROMPTS_PER_PAGE) + 1
+            assert op.page_num <= max_page
+
+    def test_operations_have_message_ids(self, sample_session, sample_conversations):
+        """Test that operations have message IDs for linking."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        for op in operations:
+            assert op.msg_id.startswith("msg-")
+
+    def test_handles_multiple_files(self, sample_session, sample_conversations):
+        """Test that multiple files are tracked correctly."""
+        loglines = sample_session.get("loglines", [])
+        operations = extract_file_operations(loglines, sample_conversations)
+
+        # Get unique file paths
+        file_paths = set(op.file_path for op in operations)
+        # Sample session should have at least 1 file
+        assert len(file_paths) >= 1
+
+    def test_empty_loglines(self, sample_conversations):
+        """Test handling of empty loglines."""
+        operations = extract_file_operations([], sample_conversations)
+        assert operations == []
+
+    def test_no_tool_calls(self):
+        """Test handling of session with no Write/Edit operations."""
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Hello", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "content": [{"type": "text", "text": "Hi!"}],
+                    "role": "assistant",
+                },
+            },
+        ]
+        conversations = [
+            {
+                "user_text": "Hello",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Hello", "role": "user"}',
+                        "2025-12-24T10:00:00.000Z",
+                    ),
+                    (
+                        "assistant",
+                        '{"content": [{"type": "text", "text": "Hi!"}], "role": "assistant"}',
+                        "2025-12-24T10:00:05.000Z",
+                    ),
+                ],
+            }
+        ]
+        operations = extract_file_operations(loglines, conversations)
+        assert operations == []
+
+    def test_extracts_original_file_content_for_edit(self):
+        """Test that originalFile from toolUseResult is extracted for Edit operations.
+
+        This enables file reconstruction for remote sessions without local file access.
+        """
+        original_content = "def add(a, b):\n    return a + b\n"
+
+        loglines = [
+            # User prompt
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Edit the file", "role": "user"},
+            },
+            # Assistant makes an Edit
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_edit_001",
+                            "name": "Edit",
+                            "input": {
+                                "file_path": "/project/math.py",
+                                "old_string": "return a + b",
+                                "new_string": "return a + b  # sum",
+                            },
+                        }
+                    ],
+                },
+            },
+            # Tool result with originalFile in toolUseResult
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:10.000Z",
+                "toolUseResult": {"originalFile": original_content},
+                "message": {
+                    "role": "user",
+                    "content": [
+                        {
+                            "type": "tool_result",
+                            "tool_use_id": "toolu_edit_001",
+                            "content": "File edited successfully",
+                            "is_error": False,
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Edit the file",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Edit the file", "role": "user"}',
+                        "2025-12-24T10:00:00.000Z",
+                    ),
+                    (
+                        "assistant",
+                        '{"content": [{"type": "tool_use", "id": "toolu_edit_001", "name": "Edit", "input": {}}], "role": "assistant"}',
+                        "2025-12-24T10:00:05.000Z",
+                    ),
+                    (
+                        "user",
+                        '{"content": [{"type": "tool_result", "tool_use_id": "toolu_edit_001"}], "role": "user"}',
+                        "2025-12-24T10:00:10.000Z",
+                    ),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+
+        # Should have one Edit operation
+        assert len(operations) == 1
+        op = operations[0]
+        assert op.operation_type == "edit"
+        assert op.file_path == "/project/math.py"
+        assert op.old_string == "return a + b"
+        assert op.new_string == "return a + b  # sum"
+        # original_content should be populated from toolUseResult.originalFile
+        assert op.original_content == original_content
+
+    def test_original_file_not_set_for_write(self):
+        """Test that original_content is not set for Write operations (only Edit)."""
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create a file", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/new.py",
+                                "content": "print('hello')\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:10.000Z",
+                "message": {
+                    "role": "user",
+                    "content": [
+                        {
+                            "type": "tool_result",
+                            "tool_use_id": "toolu_write_001",
+                            "content": "File written",
+                            "is_error": False,
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-12-24T10:00:00.000Z",
+                    ),
+                    (
+                        "assistant",
+                        '{"content": [], "role": "assistant"}',
+                        "2025-12-24T10:00:05.000Z",
+                    ),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+
+        assert len(operations) == 1
+        op = operations[0]
+        assert op.operation_type == "write"
+        # Write operations don't use original_content
+        assert op.original_content is None
+
+
+class TestBuildFileTree:
+    """Tests for the build_file_tree function."""
+
+    def test_builds_simple_tree(self):
+        """Test building a file tree from flat file paths."""
+        file_states = {
+            "/src/main.py": FileState(file_path="/src/main.py"),
+            "/src/utils.py": FileState(file_path="/src/utils.py"),
+            "/tests/test_main.py": FileState(file_path="/tests/test_main.py"),
+        }
+
+        tree = build_file_tree(file_states)
+
+        # Check structure - common "/" prefix stripped, src and tests at root
+        assert "src" in tree
+        assert "tests" in tree
+        assert "main.py" in tree["src"]
+        assert "utils.py" in tree["src"]
+        assert "test_main.py" in tree["tests"]
+
+    def test_empty_file_states(self):
+        """Test building tree from empty file states."""
+        tree = build_file_tree({})
+        assert tree == {}
+
+    def test_single_file(self):
+        """Test building tree with single file."""
+        file_states = {"/path/to/file.py": FileState(file_path="/path/to/file.py")}
+        tree = build_file_tree(file_states)
+
+        # Single file: all parent directories are common prefix, only filename remains
+        assert "file.py" in tree
+        assert isinstance(tree["file.py"], FileState)
+
+    def test_file_state_is_leaf(self):
+        """Test that FileState objects are the leaves of the tree."""
+        file_state = FileState(file_path="/src/main.py")
+        file_states = {"/src/main.py": file_state}
+
+        tree = build_file_tree(file_states)
+
+        # Single file: common prefix stripped, just the filename at root
+        leaf = tree["main.py"]
+        assert isinstance(leaf, FileState)
+        assert leaf.file_path == "/src/main.py"
+
+    def test_strips_common_prefix(self):
+        """Test that common directory prefixes are stripped from the tree."""
+        file_states = {
+            "/Users/alice/projects/myapp/src/main.py": FileState(
+                file_path="/Users/alice/projects/myapp/src/main.py"
+            ),
+            "/Users/alice/projects/myapp/src/utils.py": FileState(
+                file_path="/Users/alice/projects/myapp/src/utils.py"
+            ),
+            "/Users/alice/projects/myapp/tests/test_main.py": FileState(
+                file_path="/Users/alice/projects/myapp/tests/test_main.py"
+            ),
+        }
+
+        tree = build_file_tree(file_states)
+
+        # Common prefix /Users/alice/projects/myapp should be stripped
+        # Tree should start with src and tests at the root
+        assert "src" in tree
+        assert "tests" in tree
+        assert "Users" not in tree
+        assert "main.py" in tree["src"]
+        assert "utils.py" in tree["src"]
+        assert "test_main.py" in tree["tests"]
+
+    def test_strips_common_prefix_single_common_dir(self):
+        """Test stripping when all files share exactly one common parent."""
+        file_states = {
+            "/src/foo.py": FileState(file_path="/src/foo.py"),
+            "/src/bar.py": FileState(file_path="/src/bar.py"),
+        }
+
+        tree = build_file_tree(file_states)
+
+        # /src is common, so tree should just have the files
+        assert "foo.py" in tree
+        assert "bar.py" in tree
+        assert "src" not in tree
+
+    def test_no_common_prefix_preserved(self):
+        """Test that paths with no common prefix are preserved."""
+        file_states = {
+            "/src/main.py": FileState(file_path="/src/main.py"),
+            "/lib/utils.py": FileState(file_path="/lib/utils.py"),
+        }
+
+        tree = build_file_tree(file_states)
+
+        # Only "/" is common, so src and lib should be at root
+        assert "src" in tree
+        assert "lib" in tree
+
+
+class TestCodeViewDataDataclass:
+    """Tests for the CodeViewData dataclass."""
+
+    def test_create_empty(self):
+        """Test creating empty CodeViewData."""
+        data = CodeViewData()
+        assert data.files == {}
+        assert data.file_tree == {}
+        assert data.mode == "diff_only"
+        assert data.repo_path is None
+
+    def test_create_with_data(self):
+        """Test creating CodeViewData with data."""
+        file_state = FileState(file_path="/src/main.py")
+        data = CodeViewData(
+            files={"/src/main.py": file_state},
+            file_tree={"/": {"src": {"main.py": file_state}}},
+            mode="full",
+            repo_path="/path/to/repo",
+            session_cwd="/path/to/project",
+        )
+        assert len(data.files) == 1
+        assert data.mode == "full"
+        assert data.repo_path == "/path/to/repo"
+
+
+class TestReconstructFileWithBlame:
+    """Tests for the reconstruct_file_with_blame function."""
+
+    def test_write_operation_replaces_all_content(self):
+        """Test that a Write operation replaces all content."""
+        from claude_code_transcripts import reconstruct_file_with_blame, FileOperation
+
+        op = FileOperation(
+            file_path="/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-0-1",
+            content="line1\nline2\n",
+        )
+
+        final_content, blame_lines = reconstruct_file_with_blame(None, [op])
+
+        assert final_content == "line1\nline2\n"
+        assert len(blame_lines) == 2
+        assert blame_lines[0][0] == "line1"
+        assert blame_lines[0][1] == op
+        assert blame_lines[1][0] == "line2"
+        assert blame_lines[1][1] == op
+
+    def test_edit_operation_modifies_content(self):
+        """Test that an Edit operation modifies specific content."""
+        from claude_code_transcripts import reconstruct_file_with_blame, FileOperation
+
+        # Start with content from a Write
+        write_op = FileOperation(
+            file_path="/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-0-1",
+            content="line1\nline2\nline3\n",
+        )
+
+        edit_op = FileOperation(
+            file_path="/test.py",
+            operation_type="edit",
+            tool_id="toolu_002",
+            timestamp="2025-12-24T10:01:00.000Z",
+            page_num=1,
+            msg_id="msg-0-2",
+            old_string="line2",
+            new_string="modified_line2",
+        )
+
+        final_content, blame_lines = reconstruct_file_with_blame(
+            None, [write_op, edit_op]
+        )
+
+        assert final_content == "line1\nmodified_line2\nline3\n"
+        assert len(blame_lines) == 3
+        assert blame_lines[0][1] == write_op  # line1 still from write
+        assert blame_lines[1][1] == edit_op  # modified_line2 from edit
+        assert blame_lines[2][1] == edit_op  # line3 also from edit (after old_string)
+
+    def test_initial_content_attributed_to_none(self):
+        """Test that initial content lines are attributed to None."""
+        from claude_code_transcripts import reconstruct_file_with_blame, FileOperation
+
+        initial_content = "existing1\nexisting2\n"
+
+        edit_op = FileOperation(
+            file_path="/test.py",
+            operation_type="edit",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-0-1",
+            old_string="existing2",
+            new_string="modified",
+        )
+
+        final_content, blame_lines = reconstruct_file_with_blame(
+            initial_content, [edit_op]
+        )
+
+        assert final_content == "existing1\nmodified\n"
+        assert blame_lines[0][1] is None  # existing1 is pre-session
+        assert blame_lines[1][1] == edit_op  # modified is from edit
+
+    def test_no_operations_returns_initial(self):
+        """Test that no operations returns initial content unchanged."""
+        from claude_code_transcripts import reconstruct_file_with_blame
+
+        initial_content = "line1\nline2\n"
+
+        final_content, blame_lines = reconstruct_file_with_blame(initial_content, [])
+
+        assert final_content == "line1\nline2\n"
+        assert len(blame_lines) == 2
+        assert blame_lines[0][1] is None  # All attributed to None (pre-session)
+        assert blame_lines[1][1] is None
+
+    def test_multiline_edit(self):
+        """Test edit operation that adds multiple lines."""
+        from claude_code_transcripts import reconstruct_file_with_blame, FileOperation
+
+        write_op = FileOperation(
+            file_path="/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-0-1",
+            content="def foo():\n    pass\n",
+        )
+
+        edit_op = FileOperation(
+            file_path="/test.py",
+            operation_type="edit",
+            tool_id="toolu_002",
+            timestamp="2025-12-24T10:01:00.000Z",
+            page_num=1,
+            msg_id="msg-0-2",
+            old_string="    pass",
+            new_string="    x = 1\n    y = 2\n    return x + y",
+        )
+
+        final_content, blame_lines = reconstruct_file_with_blame(
+            None, [write_op, edit_op]
+        )
+
+        assert "x = 1" in final_content
+        assert "y = 2" in final_content
+        assert "return x + y" in final_content
+
+
+class TestGitBlameAttribution:
+    """Tests for git-based blame attribution."""
+
+    def test_write_operation_attributes_all_lines(self):
+        """Test that Write operations attribute all lines to the operation."""
+        from claude_code_transcripts import (
+            build_file_history_repo,
+            get_file_blame_ranges,
+            FileOperation,
+        )
+        import shutil
+
+        write_op = FileOperation(
+            file_path="/project/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-001",
+            content="line1\nline2\nline3\n",
+        )
+
+        repo, temp_dir, path_mapping = build_file_history_repo([write_op])
+        try:
+            rel_path = path_mapping[write_op.file_path]
+            blame_ranges = get_file_blame_ranges(repo, rel_path)
+
+            # All lines should be attributed to the write operation
+            assert len(blame_ranges) == 1
+            assert blame_ranges[0].start_line == 1
+            assert blame_ranges[0].end_line == 3
+            assert blame_ranges[0].msg_id == "msg-001"
+        finally:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+
+    def test_edit_only_attributes_changed_lines(self, tmp_path):
+        """Test that Edit operations only attribute changed lines, not context."""
+        from claude_code_transcripts import (
+            build_file_history_repo,
+            get_file_blame_ranges,
+            FileOperation,
+        )
+        import shutil
+
+        # Create a file on disk to simulate pre-existing content
+        test_file = tmp_path / "existing.py"
+        test_file.write_text("line1\nline2\nline3\nline4\nline5\n")
+
+        edit_op = FileOperation(
+            file_path=str(test_file),
+            operation_type="edit",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-001",
+            old_string="line3",
+            new_string="MODIFIED",
+        )
+
+        repo, temp_dir, path_mapping = build_file_history_repo([edit_op])
+        try:
+            rel_path = path_mapping[edit_op.file_path]
+            blame_ranges = get_file_blame_ranges(repo, rel_path)
+
+            # Should have multiple ranges: pre-edit lines and edited line
+            # Find the range with msg_id (the edit)
+            edit_ranges = [r for r in blame_ranges if r.msg_id == "msg-001"]
+            pre_ranges = [r for r in blame_ranges if not r.msg_id]
+
+            # The edit should only cover the changed line
+            assert len(edit_ranges) == 1
+            assert edit_ranges[0].start_line == edit_ranges[0].end_line  # Single line
+
+            # Pre-existing lines should have no msg_id
+            assert len(pre_ranges) >= 1
+            total_pre_lines = sum(r.end_line - r.start_line + 1 for r in pre_ranges)
+            assert total_pre_lines == 4  # lines 1,2,4,5 unchanged
+        finally:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+
+    def test_multiple_edits_track_separately(self):
+        """Test that multiple edits to the same file are tracked separately."""
+        from claude_code_transcripts import (
+            build_file_history_repo,
+            get_file_blame_ranges,
+            FileOperation,
+        )
+        import shutil
+
+        write_op = FileOperation(
+            file_path="/project/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-001",
+            content="aaa\nbbb\nccc\n",
+        )
+
+        edit1 = FileOperation(
+            file_path="/project/test.py",
+            operation_type="edit",
+            tool_id="toolu_002",
+            timestamp="2025-12-24T10:01:00.000Z",
+            page_num=1,
+            msg_id="msg-002",
+            old_string="aaa",
+            new_string="AAA",
+        )
+
+        edit2 = FileOperation(
+            file_path="/project/test.py",
+            operation_type="edit",
+            tool_id="toolu_003",
+            timestamp="2025-12-24T10:02:00.000Z",
+            page_num=1,
+            msg_id="msg-003",
+            old_string="ccc",
+            new_string="CCC",
+        )
+
+        repo, temp_dir, path_mapping = build_file_history_repo([write_op, edit1, edit2])
+        try:
+            rel_path = path_mapping[write_op.file_path]
+            blame_ranges = get_file_blame_ranges(repo, rel_path)
+
+            # Collect msg_ids from all ranges
+            msg_ids = set(r.msg_id for r in blame_ranges if r.msg_id)
+
+            # Should have at least edit1 and edit2 tracked
+            assert "msg-002" in msg_ids  # First edit
+            assert "msg-003" in msg_ids  # Second edit
+        finally:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+
+    def test_resyncs_from_original_content_when_edit_fails_to_match(self):
+        """Test that edits resync from original_content when old_string doesn't match."""
+        from claude_code_transcripts import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+            FileOperation,
+        )
+        import shutil
+
+        # First write creates file with content A
+        write_op = FileOperation(
+            file_path="/project/test.py",
+            operation_type="write",
+            tool_id="toolu_001",
+            timestamp="2025-12-24T10:00:00.000Z",
+            page_num=1,
+            msg_id="msg-001",
+            content="line1\nMARKER\nline3\n",
+        )
+
+        # Edit that expects different content (simulates divergence)
+        # old_string="MARKER" won't match if our reconstruction has "WRONG"
+        # But original_content shows the real state had "MARKER"
+        edit_op = FileOperation(
+            file_path="/project/test.py",
+            operation_type="edit",
+            tool_id="toolu_002",
+            timestamp="2025-12-24T10:01:00.000Z",
+            page_num=1,
+            msg_id="msg-002",
+            old_string="MARKER",
+            new_string="REPLACED",
+            original_content="line1\nMARKER\nline3\n",  # Real state before edit
+        )
+
+        # Simulate a scenario where our reconstruction diverged
+        # by using a write that puts wrong content, then the edit should resync
+        wrong_write = FileOperation(
+            file_path="/project/test.py",
+            operation_type="write",
+            tool_id="toolu_000",
+            timestamp="2025-12-24T09:59:00.000Z",  # Earlier than other ops
+            page_num=1,
+            msg_id="msg-000",
+            content="line1\nWRONG\nline3\n",  # Wrong content - MARKER not present
+        )
+
+        # Apply: wrong_write, then edit_op (which should resync from original_content)
+        repo, temp_dir, path_mapping = build_file_history_repo([wrong_write, edit_op])
+        try:
+            rel_path = path_mapping[edit_op.file_path]
+            content = get_file_content_from_repo(repo, rel_path)
+
+            # The edit should have resynced and replaced MARKER with REPLACED
+            assert "REPLACED" in content
+            assert "MARKER" not in content
+            assert "WRONG" not in content  # The wrong content should be gone
+        finally:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+
+
+class TestGenerateCodeViewHtml:
+    """Tests for generate_code_view_html function."""
+
+    def test_generates_separate_data_file(self, tmp_path):
+        """Test that code-data.json is generated with file content."""
+        import json
+
+        content = 'console.log("</script>"); // end'
+
+        operations = [
+            FileOperation(
+                file_path="/test/path.js",
+                operation_type="write",
+                tool_id="t1",
+                timestamp="2024-01-01T10:00:00Z",
+                page_num=1,
+                msg_id="msg-001",
+                content=content,
+            )
+        ]
+
+        generate_code_view_html(tmp_path, operations)
+
+        html = (tmp_path / "code.html").read_text()
+        assert "</script>" in html  # Has script tag
+
+        # Local version has embedded data for file:// access
+        assert (
+            "window.CODE_DATA" in html
+        ), "Embedded data should be present for local use"
+        # Script tags in content should be escaped
+        assert r"<\/script>" in html, "Script tags should be escaped in embedded JSON"
+
+        # code-data.json should also exist for gist version fetching
+        data_file = tmp_path / "code-data.json"
+        assert data_file.exists()
+        data = json.loads(data_file.read_text())
+        assert "fileData" in data
+        assert "messagesData" in data
+        # The content should be preserved correctly in JSON
+        assert data["fileData"]["/test/path.js"]["content"] == content
+
+    def test_escapes_html_sequences_in_embedded_json(self, tmp_path):
+        """Test that HTML sequences are escaped in embedded JSON.
+
+        When JSON is embedded in a <script> tag, the browser's HTML parser can:
+        1. Mistake </div> or </p> as actual HTML closing tags
+        2. Interpret <!-- as an HTML comment start
+
+        Both break script parsing with "Unexpected token '<'" errors.
+        """
+        # Content with HTML comment that would break script parsing
+        content = "<!-- This is a comment -->\nsome code"
+
+        operations = [
+            FileOperation(
+                file_path="/test/path.js",
+                operation_type="write",
+                tool_id="t1",
+                timestamp="2024-01-01T10:00:00Z",
+                page_num=1,
+                msg_id="msg-001",
+                content=content,
+            )
+        ]
+
+        generate_code_view_html(
+            tmp_path,
+            operations,
+            # This user_html contains </div> which would break script parsing
+            msg_to_user_html={"msg-001": '<div class="test">Hello</div>'},
+        )
+
+        html = (tmp_path / "code.html").read_text()
+
+        # Find the embedded script section
+        script_start = html.find("window.CODE_DATA")
+        script_end = html.find("</script>", script_start)
+        embedded_json = html[script_start:script_end]
+
+        # The </div> should be escaped as <\/div> in the embedded script
+        assert r"<\/div>" in html, "HTML closing tags should be escaped"
+        assert "</div>" not in embedded_json, "Unescaped </div> in embedded JSON"
+
+        # The <!-- should be escaped as <\!-- in the embedded script
+        assert r"<\!--" in embedded_json, "HTML comments should be escaped"
+        assert "<!--" not in embedded_json, "Unescaped <!-- in embedded JSON"
+
+
+class TestBuildMsgToUserHtml:
+    """Tests for build_msg_to_user_html function."""
+
+    def test_includes_assistant_context(self):
+        """Test that assistant text before tool_use is included in tooltip."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "text",
+                                        "text": "I'll create that file for you.",
+                                    },
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+
+        # Should have entry for the assistant message with tool_use
+        assert "msg-2025-01-01T10-00-05Z" in result
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Should contain user prompt
+        assert "Create a file" in html
+        # Should contain assistant context
+        assert "Assistant context" in html
+
+        # Should have context_msg_id mapping
+        assert "msg-2025-01-01T10-00-05Z" in context_ids
+        assert "create that file for you" in html
+
+    def test_includes_thinking_block(self):
+        """Test that thinking blocks are included in tooltip."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "thinking",
+                                        "thinking": "Let me think about this...",
+                                    },
+                                    {"type": "text", "text": "I'll create that file."},
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Should contain thinking block with proper styling inside assistant context
+        assert 'class="context-thinking"' in html
+        assert "Thinking:" in html
+        assert "Let me think about this" in html
+        # Should be inside the assistant context section
+        assert 'class="tooltip-assistant"' in html
+
+    def test_thinking_persists_across_messages(self):
+        """Test that thinking from a previous message is captured for tool calls."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    # First assistant message with thinking and text
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "thinking",
+                                        "thinking": "I need to plan this carefully.",
+                                    },
+                                    {
+                                        "type": "text",
+                                        "text": "Let me create that file.",
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                    # Second assistant message with just tool_use (no thinking in this message)
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:10Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+
+        # The tool_use message should have the thinking from the previous message
+        html = result["msg-2025-01-01T10-00-10Z"]
+
+        # Should contain thinking block (persisted from previous message) inside assistant context
+        assert 'class="context-thinking"' in html
+        assert "plan this carefully" in html
+        # Should also have assistant text
+        assert "create that file" in html
+        # Both should be inside the assistant context section
+        assert 'class="tooltip-assistant"' in html
+
+    def test_preserves_block_order_thinking_first(self):
+        """Test that blocks are rendered in original order (thinking before text)."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    # Thinking comes FIRST
+                                    {
+                                        "type": "thinking",
+                                        "thinking": "THINKING_MARKER_FIRST",
+                                    },
+                                    # Then text
+                                    {"type": "text", "text": "TEXT_MARKER_SECOND"},
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Thinking should appear before text in the HTML
+        thinking_pos = html.find("THINKING_MARKER_FIRST")
+        text_pos = html.find("TEXT_MARKER_SECOND")
+
+        assert thinking_pos != -1, "Thinking marker not found"
+        assert text_pos != -1, "Text marker not found"
+        assert thinking_pos < text_pos, "Thinking should come before text"
+
+    def test_preserves_block_order_text_first(self):
+        """Test that blocks are rendered in original order (text before thinking)."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    # Text comes FIRST
+                                    {"type": "text", "text": "TEXT_MARKER_FIRST"},
+                                    # Then thinking
+                                    {
+                                        "type": "thinking",
+                                        "thinking": "THINKING_MARKER_SECOND",
+                                    },
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Text should appear before thinking in the HTML
+        text_pos = html.find("TEXT_MARKER_FIRST")
+        thinking_pos = html.find("THINKING_MARKER_SECOND")
+
+        assert text_pos != -1, "Text marker not found"
+        assert thinking_pos != -1, "Thinking marker not found"
+        assert text_pos < thinking_pos, "Text should come before thinking"
+
+    def test_accumulates_blocks_across_messages(self):
+        """Test that thinking and text from separate messages are both included."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    # First message has only thinking (extended thinking scenario)
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "thinking",
+                                        "thinking": "THINKING_FROM_FIRST_MESSAGE",
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:02Z",
+                    ),
+                    # Second message has text + tool_use
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "text",
+                                        "text": "TEXT_FROM_SECOND_MESSAGE",
+                                    },
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Both thinking and text should be present
+        assert (
+            "THINKING_FROM_FIRST_MESSAGE" in html
+        ), "Thinking from first message not found"
+        assert "TEXT_FROM_SECOND_MESSAGE" in html, "Text from second message not found"
+
+        # And thinking should come before text (since it was in the earlier message)
+        thinking_pos = html.find("THINKING_FROM_FIRST_MESSAGE")
+        text_pos = html.find("TEXT_FROM_SECOND_MESSAGE")
+        assert thinking_pos < text_pos, "Thinking should come before text"
+
+    def test_only_keeps_most_recent_of_each_block_type(self):
+        """Test that only the most recent thinking and text blocks are shown."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    # First thinking block
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "thinking", "thinking": "OLD_THINKING"},
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:01Z",
+                    ),
+                    # First text block
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "text", "text": "OLD_TEXT"},
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:02Z",
+                    ),
+                    # Second (newer) thinking block
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "thinking", "thinking": "NEW_THINKING"},
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:03Z",
+                    ),
+                    # Second (newer) text block + tool_use
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "text", "text": "NEW_TEXT"},
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Only the NEW (most recent) blocks should be present
+        assert "NEW_THINKING" in html, "New thinking not found"
+        assert "NEW_TEXT" in html, "New text not found"
+
+        # The OLD blocks should NOT be present
+        assert "OLD_THINKING" not in html, "Old thinking should not be present"
+        assert "OLD_TEXT" not in html, "Old text should not be present"
+
+    def test_context_msg_id_uses_most_recent_block_message(self):
+        """Test that context_msg_id is set to the message containing the most recent block."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    # First message has thinking
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "thinking", "thinking": "Thinking..."},
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:02Z",
+                    ),
+                    # Second message has text (more recent)
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "text", "text": "Creating file..."},
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:03Z",
+                    ),
+                    # Third message has tool_use
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+
+        # The context_msg_id should be the message with the text (most recent block)
+        tool_msg_id = "msg-2025-01-01T10-00-05Z"
+        text_msg_id = "msg-2025-01-01T10-00-03Z"
+        assert tool_msg_id in context_ids
+        assert context_ids[tool_msg_id] == text_msg_id
+
+    def test_truncates_long_text(self):
+        """Test that long assistant text is truncated."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        long_text = "x" * 1000  # Much longer than 500 char limit
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "user",
+                        '{"content": "Create a file", "role": "user"}',
+                        "2025-01-01T10:00:00Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "text", "text": long_text},
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Should contain ellipsis indicating truncation
+        assert "..." in html
+        # Should not contain the full 1000 char string
+        assert long_text not in html
+
+    def test_first_tool_use_with_no_preceding_context(self):
+        """Test first tool_use only shows user prompt when no assistant context exists."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        # First (and only) assistant message has only tool_use, no text/thinking
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Write",
+                                        "input": {
+                                            "file_path": "/test.py",
+                                            "content": "# test",
+                                        },
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Should still have user prompt
+        assert "Create a file" in html
+        # Should NOT have assistant context since there's none
+        assert "Assistant context" not in html
+        assert "Thinking" not in html
+
+    def test_text_after_tool_use_in_same_message(self):
+        """Test text that appears after tool_use in same message is still captured."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        # Content order: tool_use THEN text (Claude sometimes comments after acting)
+        conversations = [
+            {
+                "user_text": "Do something",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Read",
+                                        "input": {"file_path": "/test.py"},
+                                    },
+                                    {
+                                        "type": "text",
+                                        "text": "Now I can see the differences...",
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Should contain the text that came after tool_use
+        assert "Now I can see the differences" in html
+        assert "Assistant context" in html
+
+    def test_text_in_later_message_not_included(self):
+        """Test that text from a later message is NOT included (by design).
+
+        When tool_use happens first and text comes in a subsequent message,
+        the tooltip only shows context that preceded the tool_use.
+        """
+        from claude_code_transcripts import build_msg_to_user_html
+
+        # First message: tool_use only
+        # Second message: text (comes after, so not included for first tool)
+        conversations = [
+            {
+                "user_text": "Do something",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Read",
+                                        "input": {"file_path": "/test.py"},
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {
+                                        "type": "text",
+                                        "text": "Now I can see the differences...",
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:10Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Text from later message should NOT be included
+        assert "Now I can see the differences" not in html
+        # But user prompt should still be there
+        assert "Do something" in html
+
+    def test_strips_code_blocks_from_tooltip(self):
+        """Test that code blocks are stripped from tooltip content to avoid HTML injection."""
+        from claude_code_transcripts import build_msg_to_user_html
+
+        # Content with code block containing HTML that could cause issues
+        text_with_code = """Let me analyze this:
+
+```html
+<div id="prompts-modal" class="prompts-modal">
+  <button type="button" class="btn">Close</button>
+</div>
+```
+
+The implementation looks correct."""
+
+        conversations = [
+            {
+                "user_text": "Do something",
+                "timestamp": "2025-01-01T10:00:00Z",
+                "messages": [
+                    (
+                        "assistant",
+                        json.dumps(
+                            {
+                                "content": [
+                                    {"type": "text", "text": text_with_code},
+                                    {
+                                        "type": "tool_use",
+                                        "id": "toolu_001",
+                                        "name": "Read",
+                                        "input": {"file_path": "/test.py"},
+                                    },
+                                ],
+                                "role": "assistant",
+                            }
+                        ),
+                        "2025-01-01T10:00:05Z",
+                    ),
+                ],
+            }
+        ]
+
+        result, context_ids, prompt_nums = build_msg_to_user_html(conversations)
+        html = result["msg-2025-01-01T10-00-05Z"]
+
+        # Code block should be replaced with placeholder, not rendered as HTML
+        assert "<div id=" not in html
+        assert "<button" not in html
+        # But the surrounding text should still be there
+        assert "Let me analyze this" in html
+        assert "implementation looks correct" in html
+        # Code block should be replaced with placeholder
+        assert "[code block]" in html
+        # Should show truncation indicator since code block was stripped
+        assert "(truncated)" in html
+
+
+class TestDeletedFileFiltering:
+    """Tests for filtering out files that are ultimately deleted in the session.
+
+    Delete operations are tracked as OP_DELETE and applied in the git repo.
+    Files that don't exist in the final repo state are filtered out when
+    generating the code view.
+    """
+
+    def test_extracts_delete_operations(self):
+        """Test that delete operations are extracted from rm commands."""
+        from claude_code_transcripts.code_view import OP_DELETE
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Delete a file", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {"command": "rm /project/temp.py"},
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Delete a file",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+
+        # Should have one delete operation
+        delete_ops = [op for op in operations if op.operation_type == OP_DELETE]
+        assert len(delete_ops) == 1
+        assert delete_ops[0].file_path == "/project/temp.py"
+
+    def test_file_deleted_via_rm_not_in_final_repo(self):
+        """Test that a file created then deleted doesn't exist in final repo."""
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create a temp file", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/temp.py",
+                                "content": "# temporary file\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:01:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {"command": "rm /project/temp.py"},
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create a temp file",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:01:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            # File should not exist in final repo
+            rel_path = path_mapping.get("/project/temp.py", "temp.py")
+            content = get_file_content_from_repo(repo, rel_path)
+            assert content is None, "Deleted file should not exist in repo"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+    def test_file_not_deleted_still_exists_in_repo(self):
+        """Test that files NOT deleted still exist in final repo."""
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create a file", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/keeper.py",
+                                "content": "# permanent file\n",
+                            },
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create a file",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            # File should exist in final repo
+            rel_path = path_mapping.get("/project/keeper.py", "keeper.py")
+            content = get_file_content_from_repo(repo, rel_path)
+            assert content == "# permanent file\n", "Non-deleted file should exist"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+    def test_deleted_file_with_quotes_in_rm(self):
+        """Test deletion detection with quoted paths in rm command."""
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create and delete", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/file with spaces.py",
+                                "content": "# file\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:01:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {
+                                "command": 'rm "/project/file with spaces.py"',
+                            },
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create and delete",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:01:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            rel_path = path_mapping.get(
+                "/project/file with spaces.py", "file with spaces.py"
+            )
+            content = get_file_content_from_repo(repo, rel_path)
+            assert content is None, "File deleted with quotes should not exist"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+    def test_rm_rf_deletes_directory_contents(self):
+        """Test that rm -rf deletes files in a directory."""
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create files then delete dir", "role": "user"},
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/subdir/file1.py",
+                                "content": "# file 1\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:10.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_002",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/subdir/file2.py",
+                                "content": "# file 2\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:01:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {"command": "rm -rf /project/subdir"},
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create files then delete dir",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:10.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:01:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            # Both files in subdir should not exist
+            rel_path1 = path_mapping.get("/project/subdir/file1.py", "subdir/file1.py")
+            rel_path2 = path_mapping.get("/project/subdir/file2.py", "subdir/file2.py")
+            content1 = get_file_content_from_repo(repo, rel_path1)
+            content2 = get_file_content_from_repo(repo, rel_path2)
+            assert content1 is None, "file1.py should be deleted"
+            assert content2 is None, "file2.py should be deleted"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+    def test_create_delete_recreate_shows_file(self):
+        """Test that a file created, deleted, then recreated DOES appear."""
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create delete recreate", "role": "user"},
+            },
+            # Create
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/temp.py",
+                                "content": "# version 1\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            # Delete
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:01:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {"command": "rm /project/temp.py"},
+                        }
+                    ],
+                },
+            },
+            # Recreate
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:02:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_002",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/temp.py",
+                                "content": "# version 2\n",
+                            },
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create delete recreate",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:01:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:02:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            # File should exist with version 2 content
+            rel_path = path_mapping.get("/project/temp.py", "temp.py")
+            content = get_file_content_from_repo(repo, rel_path)
+            assert content == "# version 2\n", "Recreated file should exist with v2"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+    def test_handles_relative_path_in_rm_command(self):
+        """Test that rm commands with relative paths don't break path normalization.
+
+        Write/Edit operations always have absolute paths, but rm commands can have
+        relative paths. This should not cause a ValueError when mixing them.
+        """
+        from claude_code_transcripts.code_view import (
+            build_file_history_repo,
+            get_file_content_from_repo,
+        )
+
+        loglines = [
+            {
+                "type": "user",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "message": {"content": "Create and delete", "role": "user"},
+            },
+            # Create with absolute path
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:00:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_write_001",
+                            "name": "Write",
+                            "input": {
+                                "file_path": "/project/src/main.py",
+                                "content": "# main\n",
+                            },
+                        }
+                    ],
+                },
+            },
+            # Delete with RELATIVE path (this is what causes the bug)
+            {
+                "type": "assistant",
+                "timestamp": "2025-12-24T10:01:05.000Z",
+                "message": {
+                    "role": "assistant",
+                    "content": [
+                        {
+                            "type": "tool_use",
+                            "id": "toolu_bash_001",
+                            "name": "Bash",
+                            "input": {"command": "rm temp.py"},
+                        }
+                    ],
+                },
+            },
+        ]
+
+        conversations = [
+            {
+                "user_text": "Create and delete",
+                "timestamp": "2025-12-24T10:00:00.000Z",
+                "messages": [
+                    ("user", "{}", "2025-12-24T10:00:00.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:00:05.000Z"),
+                    ("assistant", "{}", "2025-12-24T10:01:05.000Z"),
+                ],
+            }
+        ]
+
+        operations = extract_file_operations(loglines, conversations)
+
+        # This should NOT raise ValueError: Can't mix absolute and relative paths
+        repo, temp_dir, path_mapping = build_file_history_repo(operations)
+
+        try:
+            # The file should exist
+            rel_path = path_mapping.get("/project/src/main.py", "main.py")
+            content = get_file_content_from_repo(repo, rel_path)
+            assert content == "# main\n"
+        finally:
+            import shutil
+
+            shutil.rmtree(temp_dir)
+
+
+class TestFilterDeletedFiles:
+    """Tests for filter_deleted_files function (--exclude-deleted-files flag)."""
+
+    def test_filters_files_missing_from_disk(self, tmp_path):
+        """Test that files which no longer exist on disk are filtered out."""
+        from claude_code_transcripts.code_view import filter_deleted_files
+
+        # Create a real file
+        real_file = tmp_path / "exists.py"
+        real_file.write_text("# exists\n")
+
+        # File path that doesn't exist
+        missing_file = tmp_path / "missing.py"
+
+        operations = [
+            FileOperation(
+                file_path=str(real_file),
+                operation_type="write",
+                tool_id="toolu_001",
+                timestamp="2025-12-24T10:00:00.000Z",
+                page_num=1,
+                msg_id="msg-1",
+                content="# exists\n",
+            ),
+            FileOperation(
+                file_path=str(missing_file),
+                operation_type="write",
+                tool_id="toolu_002",
+                timestamp="2025-12-24T10:00:05.000Z",
+                page_num=1,
+                msg_id="msg-2",
+                content="# missing\n",
+            ),
+        ]
+
+        filtered = filter_deleted_files(operations)
+
+        # Should only have the operation for the file that exists
+        assert len(filtered) == 1
+        assert filtered[0].file_path == str(real_file)
+
+    def test_keeps_files_that_exist(self, tmp_path):
+        """Test that files which exist on disk are kept."""
+        from claude_code_transcripts.code_view import filter_deleted_files
+
+        # Create real files
+        file1 = tmp_path / "file1.py"
+        file1.write_text("# file1\n")
+        file2 = tmp_path / "file2.py"
+        file2.write_text("# file2\n")
+
+        operations = [
+            FileOperation(
+                file_path=str(file1),
+                operation_type="write",
+                tool_id="toolu_001",
+                timestamp="2025-12-24T10:00:00.000Z",
+                page_num=1,
+                msg_id="msg-1",
+                content="# file1\n",
+            ),
+            FileOperation(
+                file_path=str(file2),
+                operation_type="write",
+                tool_id="toolu_002",
+                timestamp="2025-12-24T10:00:05.000Z",
+                page_num=1,
+                msg_id="msg-2",
+                content="# file2\n",
+            ),
+        ]
+
+        filtered = filter_deleted_files(operations)
+
+        # Should keep both files
+        assert len(filtered) == 2
+
+    def test_ignores_relative_paths(self):
+        """Test that relative paths are not checked (kept as-is)."""
+        from claude_code_transcripts.code_view import filter_deleted_files
+
+        operations = [
+            FileOperation(
+                file_path="relative/path/file.py",  # Relative path
+                operation_type="write",
+                tool_id="toolu_001",
+                timestamp="2025-12-24T10:00:00.000Z",
+                page_num=1,
+                msg_id="msg-1",
+                content="# content\n",
+            ),
+        ]
+
+        filtered = filter_deleted_files(operations)
+
+        # Relative paths should be kept (we can't check them reliably)
+        assert len(filtered) == 1
+
+    def test_keeps_delete_operations(self, tmp_path):
+        """Test that delete operations are kept regardless of file existence."""
+        from claude_code_transcripts.code_view import filter_deleted_files, OP_DELETE
+
+        missing_file = tmp_path / "deleted.py"
+
+        operations = [
+            FileOperation(
+                file_path=str(missing_file),
+                operation_type=OP_DELETE,
+                tool_id="toolu_001",
+                timestamp="2025-12-24T10:00:00.000Z",
+                page_num=1,
+                msg_id="msg-1",
+            ),
+        ]
+
+        filtered = filter_deleted_files(operations)
+
+        # Delete operations should be kept
+        assert len(filtered) == 1
+
+    def test_empty_operations(self):
+        """Test with empty operations list."""
+        from claude_code_transcripts.code_view import filter_deleted_files
+
+        filtered = filter_deleted_files([])
+        assert filtered == []
diff --git a/tests/test_code_view_e2e.py b/tests/test_code_view_e2e.py
new file mode 100644
index 0000000..6c64697
--- /dev/null
+++ b/tests/test_code_view_e2e.py
@@ -0,0 +1,838 @@
+"""End-to-end tests for code.html using Playwright.
+
+These tests use a real session file to generate the code view HTML and then
+test the interactive features using Playwright browser automation.
+"""
+
+import hashlib
+import http.server
+import re
+import shutil
+import socketserver
+import tempfile
+import threading
+from pathlib import Path
+
+import httpx
+import pytest
+from playwright.sync_api import Page, expect
+
+# URL for test fixture - a real Claude Code session with file operations
+FIXTURE_URL = "https://gist.githubusercontent.com/simonw/bfe117b6007b9d7dfc5a81e4b2fd3d9a/raw/31e9df7c09c8a10c6fbd257aefa47dfa3f7863e5/3f5f590c-2795-4de2-875a-aa3686d523a1.jsonl"
+FIXTURE_CACHE_DIR = Path(__file__).parent / ".fixture_cache"
+
+
+def get_cached_fixture() -> Path:
+    """Download and cache the test fixture file.
+
+    Returns the path to the cached fixture file.
+    """
+    FIXTURE_CACHE_DIR.mkdir(exist_ok=True)
+
+    # Use URL hash as cache key
+    url_hash = hashlib.sha256(FIXTURE_URL.encode()).hexdigest()[:12]
+    cache_path = FIXTURE_CACHE_DIR / f"fixture-{url_hash}.jsonl"
+
+    if not cache_path.exists():
+        # Download the fixture
+        response = httpx.get(FIXTURE_URL, follow_redirects=True)
+        response.raise_for_status()
+        cache_path.write_bytes(response.content)
+
+    return cache_path
+
+
+@pytest.fixture(scope="module")
+def fixture_path() -> Path:
+    """Provide path to the cached test fixture."""
+    return get_cached_fixture()
+
+
+@pytest.fixture(scope="module")
+def code_view_dir(fixture_path: Path) -> Path:
+    """Generate code view HTML from the fixture and return the output directory."""
+    from claude_code_transcripts import generate_html
+
+    output_dir = Path(tempfile.mkdtemp(prefix="code_view_e2e_"))
+
+    # Generate HTML with code view enabled
+    generate_html(str(fixture_path), output_dir, code_view=True)
+
+    code_html_path = output_dir / "code.html"
+    assert code_html_path.exists(), "code.html was not generated"
+
+    yield output_dir
+
+    # Cleanup after all tests in this module
+    shutil.rmtree(output_dir, ignore_errors=True)
+
+
+@pytest.fixture(scope="module")
+def http_server(code_view_dir: Path):
+    """Start an HTTP server to serve the generated files.
+
+    Required because fetch() doesn't work with file:// URLs.
+    """
+
+    class Handler(http.server.SimpleHTTPRequestHandler):
+        def __init__(self, *args, **kwargs):
+            super().__init__(*args, directory=str(code_view_dir), **kwargs)
+
+        def log_message(self, format, *args):
+            # Suppress server logs during tests
+            pass
+
+    # Use port 0 to get a random available port
+    with socketserver.TCPServer(("127.0.0.1", 0), Handler) as server:
+        port = server.server_address[1]
+        thread = threading.Thread(target=server.serve_forever, daemon=True)
+        thread.start()
+
+        yield f"http://127.0.0.1:{port}"
+
+        server.shutdown()
+
+
+@pytest.fixture
+def code_view_page(page: Page, http_server: str) -> Page:
+    """Navigate to the code view page and wait for it to load."""
+    page.goto(f"{http_server}/code.html")
+    # Wait for the editor to be created (CodeMirror initializes)
+    page.wait_for_selector(".cm-editor", timeout=10000)
+    return page
+
+
+class TestFileTreeNavigation:
+    """Tests for file tree panel navigation."""
+
+    def test_file_tree_exists(self, code_view_page: Page):
+        """Test that the file tree panel exists."""
+        file_tree = code_view_page.locator("#file-tree-panel")
+        expect(file_tree).to_be_visible()
+
+    def test_files_are_listed(self, code_view_page: Page):
+        """Test that files are listed in the tree."""
+        files = code_view_page.locator(".tree-file")
+        expect(files.first).to_be_visible()
+        assert files.count() > 0
+
+    def test_first_file_is_selected(self, code_view_page: Page):
+        """Test that the first file is auto-selected."""
+        selected = code_view_page.locator(".tree-file.selected")
+        expect(selected).to_be_visible()
+
+    def test_clicking_file_selects_it(self, code_view_page: Page):
+        """Test that clicking a different file selects it."""
+        files = code_view_page.locator(".tree-file")
+        if files.count() > 1:
+            # Click the second file
+            second_file = files.nth(1)
+            second_file.click()
+            expect(second_file).to_have_class(re.compile(r"selected"))
+
+    def test_directory_expand_collapse(self, code_view_page: Page):
+        """Test that directories can be expanded and collapsed."""
+        dirs = code_view_page.locator(".tree-dir")
+        if dirs.count() > 0:
+            first_dir = dirs.first
+            # Check if it has a toggle - get the direct child toggle
+            toggle = first_dir.locator("> .tree-toggle")
+            if toggle.count() > 0:
+                # Click to toggle
+                initial_open = "open" in (first_dir.get_attribute("class") or "")
+                toggle.first.click()
+                if initial_open:
+                    expect(first_dir).not_to_have_class(re.compile(r"open"))
+                else:
+                    expect(first_dir).to_have_class(re.compile(r"open"))
+
+    def test_collapse_button_works(self, code_view_page: Page):
+        """Test that the collapse file tree button works."""
+        collapse_btn = code_view_page.locator("#collapse-file-tree")
+        file_tree_panel = code_view_page.locator("#file-tree-panel")
+
+        expect(collapse_btn).to_be_visible()
+
+        # Click to collapse
+        collapse_btn.click()
+        expect(file_tree_panel).to_have_class(re.compile(r"collapsed"))
+
+        # Click to expand
+        collapse_btn.click()
+        expect(file_tree_panel).not_to_have_class(re.compile(r"collapsed"))
+
+
+class TestCodeEditor:
+    """Tests for the CodeMirror code editor."""
+
+    def test_editor_displays_code(self, code_view_page: Page):
+        """Test that the editor displays code content."""
+        editor = code_view_page.locator(".cm-editor")
+        expect(editor).to_be_visible()
+
+        # Check that there are lines with content
+        lines = code_view_page.locator(".cm-line")
+        expect(lines.first).to_be_visible()
+
+    def test_line_numbers_visible(self, code_view_page: Page):
+        """Test that line numbers are displayed."""
+        # CodeMirror uses .cm-lineNumbers for the line number gutter
+        gutter = code_view_page.locator(".cm-lineNumbers")
+        expect(gutter).to_be_visible()
+
+    def test_blame_ranges_highlighted(self, code_view_page: Page):
+        """Test that blame ranges have background colors."""
+        # Lines with blame should have data-range-index attribute
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            # Check that they have a background color style
+            first_blame = blame_lines.first
+            style = first_blame.get_attribute("style")
+            assert style and "background-color" in style
+
+    def test_minimap_exists(self, code_view_page: Page):
+        """Test that the blame minimap exists."""
+        minimap = code_view_page.locator(".blame-minimap")
+        # Minimap only exists if there are blame ranges
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            expect(minimap).to_be_visible()
+
+
+class TestBlameInteraction:
+    """Tests for blame block interactions."""
+
+    def test_clicking_blame_highlights_range(self, code_view_page: Page):
+        """Test that clicking a blame line highlights the range."""
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            blame_lines.first.click()
+            # Check for active range class
+            active = code_view_page.locator(".cm-active-range")
+            expect(active.first).to_be_visible()
+
+    def test_clicking_blame_updates_url_hash(self, code_view_page: Page):
+        """Test that clicking a blame block updates the URL hash for deep-linking."""
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            first_blame = blame_lines.first
+            first_blame.click()
+
+            # Check that the URL hash was updated with a line number
+            url = code_view_page.url
+            assert ":L" in url, f"Expected URL to contain line hash, got: {url}"
+
+    def test_hovering_blame_shows_tooltip(self, code_view_page: Page):
+        """Test that hovering over blame line shows tooltip."""
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            blame_lines.first.hover()
+
+            # Wait for tooltip to appear
+            tooltip = code_view_page.locator(".blame-tooltip")
+            expect(tooltip).to_be_visible(timeout=2000)
+
+    def test_tooltip_has_user_message(self, code_view_page: Page):
+        """Test that the tooltip shows user message content."""
+        blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+        if blame_lines.count() > 0:
+            blame_lines.first.hover()
+
+            tooltip = code_view_page.locator(".blame-tooltip")
+            expect(tooltip).to_be_visible(timeout=2000)
+
+            # Should contain user content (inside .index-item-content)
+            user_content = tooltip.locator(".index-item-content")
+            expect(user_content).to_be_visible()
+
+
+class TestTranscriptPanel:
+    """Tests for the transcript panel."""
+
+    def test_transcript_panel_exists(self, code_view_page: Page):
+        """Test that the transcript panel exists."""
+        panel = code_view_page.locator("#transcript-panel")
+        expect(panel).to_be_visible()
+
+    def test_messages_are_rendered(self, code_view_page: Page):
+        """Test that messages are rendered in the transcript."""
+        messages = code_view_page.locator("#transcript-content .message")
+        expect(messages.first).to_be_visible()
+        assert messages.count() > 0
+
+    def test_user_and_assistant_messages(self, code_view_page: Page):
+        """Test that both user and assistant messages are present."""
+        user_msgs = code_view_page.locator("#transcript-content .message.user")
+        assistant_msgs = code_view_page.locator(
+            "#transcript-content .message.assistant"
+        )
+
+        expect(user_msgs.first).to_be_visible()
+        expect(assistant_msgs.first).to_be_visible()
+
+    def test_clicking_message_navigates_to_code(self, code_view_page: Page):
+        """Test that clicking a transcript message navigates to code."""
+        # Find a message that should have an associated edit
+        messages = code_view_page.locator("#transcript-content .message")
+        if messages.count() > 1:
+            # Click on the first message
+            messages.first.click()
+
+            # Give it time to navigate
+            code_view_page.wait_for_timeout(200)
+
+            # Check that a code range is highlighted (navigation happened)
+            active_range = code_view_page.locator(".cm-active-range")
+            expect(active_range.first).to_be_visible()
+
+    def test_pinned_user_message_on_scroll(self, code_view_page: Page):
+        """Test that scrolling shows pinned user message with correct content."""
+        panel = code_view_page.locator("#transcript-panel")
+        pinned = code_view_page.locator("#pinned-user-message")
+        pinned_content = code_view_page.locator(".pinned-user-content")
+
+        # Get the first user message's text for comparison
+        first_user = code_view_page.locator(
+            "#transcript-content .message.user:not(.continuation)"
+        ).first
+        first_user_text = first_user.locator(".message-content").text_content().strip()
+
+        # Scroll down past the first user message
+        panel.evaluate("el => el.scrollTop = 800")
+        code_view_page.wait_for_timeout(100)
+
+        # Pinned header should be visible with content from the first user message
+        expect(pinned).to_be_visible()
+
+        # Check that label shows "User Prompt #N"
+        pinned_label = code_view_page.locator(".pinned-user-message-label")
+        label_text = pinned_label.text_content()
+        assert label_text.startswith(
+            "User Prompt #"
+        ), f"Label should show 'User Prompt #N', got: {label_text}"
+
+        # Check that content matches the user message
+        pinned_text = pinned_content.text_content()
+        assert len(pinned_text) > 0, "Pinned content should not be empty"
+        assert (
+            first_user_text.startswith(pinned_text[:50])
+            or pinned_text in first_user_text
+        ), f"Pinned text '{pinned_text[:50]}...' should match user message"
+
+    def test_pinned_user_message_click_scrolls_back(self, code_view_page: Page):
+        """Test that clicking pinned header scrolls to the original message."""
+        panel = code_view_page.locator("#transcript-panel")
+        pinned = code_view_page.locator("#pinned-user-message")
+
+        # Scroll down to show pinned header
+        panel.evaluate("el => el.scrollTop = 800")
+        code_view_page.wait_for_timeout(100)
+
+        # Click the pinned header
+        if pinned.is_visible():
+            pinned.click()
+            code_view_page.wait_for_timeout(300)  # Wait for smooth scroll
+
+            # Panel should have scrolled up (scrollTop should be less)
+            scroll_top = panel.evaluate("el => el.scrollTop")
+            assert scroll_top < 800, "Clicking pinned header should scroll up"
+
+
+class TestPanelResizing:
+    """Tests for panel resize functionality."""
+
+    def test_resize_handles_exist(self, code_view_page: Page):
+        """Test that resize handles exist."""
+        left_handle = code_view_page.locator("#resize-left")
+        right_handle = code_view_page.locator("#resize-right")
+
+        expect(left_handle).to_be_visible()
+        expect(right_handle).to_be_visible()
+
+    def test_resize_left_panel(self, code_view_page: Page):
+        """Test that dragging left handle resizes file tree panel."""
+        file_tree = code_view_page.locator("#file-tree-panel")
+        handle = code_view_page.locator("#resize-left")
+
+        initial_width = file_tree.bounding_box()["width"]
+
+        # Drag the handle
+        handle.drag_to(handle, target_position={"x": 50, "y": 0}, force=True)
+
+        # Width should have changed
+        new_width = file_tree.bounding_box()["width"]
+        # Allow for the change - it may not always work perfectly in test
+        assert new_width is not None
+
+    def test_resize_right_panel(self, code_view_page: Page):
+        """Test that dragging right handle resizes transcript panel."""
+        transcript = code_view_page.locator("#transcript-panel")
+        handle = code_view_page.locator("#resize-right")
+
+        initial_width = transcript.bounding_box()["width"]
+
+        # Drag the handle
+        handle.drag_to(handle, target_position={"x": -50, "y": 0}, force=True)
+
+        # Width should have changed
+        new_width = transcript.bounding_box()["width"]
+        assert new_width is not None
+
+
+class TestNavigation:
+    """Tests for navigation links and tabs."""
+
+    def test_code_tab_is_active(self, code_view_page: Page):
+        """Test that the Code tab is active in navigation."""
+        code_tab = code_view_page.locator('a[href="code.html"]')
+        # It should be the current/active tab
+        expect(code_tab).to_be_visible()
+
+    def test_transcript_tab_links_to_index(self, code_view_page: Page):
+        """Test that Transcript tab links to index.html."""
+        # Use the tab specifically (not the header link)
+        transcript_tab = code_view_page.locator('a.tab[href="index.html"]')
+        expect(transcript_tab).to_be_visible()
+
+
+class TestMinimapBehavior:
+    """Tests for minimap visibility based on content height."""
+
+    def test_minimap_hidden_for_short_files(self, page: Page, http_server: str):
+        """Test that minimap is hidden when code doesn't need scrolling."""
+        page.goto(f"{http_server}/code.html")
+        page.wait_for_selector(".cm-editor", timeout=10000)
+
+        # Find a short file (few lines) that wouldn't need scrolling
+        files = page.locator(".tree-file")
+        minimap_visible = False
+
+        for i in range(min(files.count(), 10)):
+            file_item = files.nth(i)
+            file_item.click()
+            page.wait_for_timeout(200)
+
+            # Check if content is short (doesn't need scrolling)
+            scroller = page.locator(".cm-scroller")
+            scroll_height = scroller.evaluate("el => el.scrollHeight")
+            client_height = scroller.evaluate("el => el.clientHeight")
+
+            minimap = page.locator(".blame-minimap")
+
+            if scroll_height <= client_height:
+                # Short file - minimap should be hidden
+                assert (
+                    minimap.count() == 0
+                ), f"Minimap should be hidden for file {i} (scrollHeight={scroll_height}, clientHeight={client_height})"
+            else:
+                # Long file - minimap should be visible (if there are blame ranges)
+                blame_lines = page.locator(".cm-line[data-range-index]")
+                if blame_lines.count() > 0:
+                    minimap_visible = True
+                    assert (
+                        minimap.count() > 0
+                    ), f"Minimap should be visible for long file {i}"
+
+        # Make sure we tested at least one file where minimap would be visible
+        # (if the fixture has long files with blame ranges)
+
+    def test_minimap_shows_for_long_files(self, code_view_page: Page):
+        """Test that minimap is visible for files that need scrolling."""
+        # Find a file that needs scrolling
+        files = code_view_page.locator(".tree-file")
+
+        for i in range(min(files.count(), 10)):
+            files.nth(i).click()
+            code_view_page.wait_for_timeout(200)
+
+            scroller = code_view_page.locator(".cm-scroller")
+            scroll_height = scroller.evaluate("el => el.scrollHeight")
+            client_height = scroller.evaluate("el => el.clientHeight")
+
+            if scroll_height > client_height:
+                # This file needs scrolling - check for minimap
+                blame_lines = code_view_page.locator(".cm-line[data-range-index]")
+                if blame_lines.count() > 0:
+                    minimap = code_view_page.locator(".blame-minimap")
+                    assert (
+                        minimap.count() > 0
+                    ), "Minimap should be visible for long files with blame"
+                    return
+
+        # Test passes even if no long files found in fixture
+
+
+class TestCodeViewScrolling:
+    """Tests for scroll synchronization between panels."""
+
+    def test_file_load_scrolls_to_first_blame(self, code_view_page: Page):
+        """Test that loading a file scrolls to the first blame block."""
+        files = code_view_page.locator(".tree-file")
+        if files.count() > 1:
+            # Click a different file
+            files.nth(1).click()
+            code_view_page.wait_for_timeout(200)
+
+            # Check that the editor scrolled (we can verify by checking
+            # that a blame line is visible in the viewport)
+            editor = code_view_page.locator(".cm-editor")
+            expect(editor).to_be_visible()
+
+    def test_minimap_click_scrolls_editor(self, code_view_page: Page):
+        """Test that clicking minimap marker scrolls the editor."""
+        markers = code_view_page.locator(".minimap-marker")
+        if markers.count() > 0:
+            # Click a marker
+            markers.first.click()
+            code_view_page.wait_for_timeout(100)
+
+            # Editor should still be visible (scroll happened)
+            editor = code_view_page.locator(".cm-editor")
+            expect(editor).to_be_visible()
+
+
+class TestMessageNumberWidget:
+    """Tests for the message number widget on blame lines."""
+
+    def test_message_numbers_displayed(self, code_view_page: Page):
+        """Test that message numbers are displayed on blame lines."""
+        msg_nums = code_view_page.locator(".blame-msg-num")
+        if msg_nums.count() > 0:
+            # Should show format like "#5"
+            first_num = msg_nums.first
+            text = first_num.text_content()
+            assert text.startswith("#")
+            assert text[1:].isdigit()
+
+
+class TestChunkedRendering:
+    """Tests for transcript panel performance optimizations.
+
+    These tests verify that the chunked rendering and lazy loading work correctly
+    by examining DOM state rather than accessing internal JavaScript variables.
+    """
+
+    def test_sentinel_element_exists(self, code_view_page: Page):
+        """Test that the sentinel element exists for IntersectionObserver."""
+        sentinel = code_view_page.locator("#transcript-sentinel")
+        expect(sentinel).to_be_attached()
+
+    def test_data_loading_and_chunked_rendering_setup(self, code_view_page: Page):
+        """Test that data loading and chunked rendering are configured."""
+        # Check that the script tag contains chunked rendering setup
+        scripts = code_view_page.locator("script[type='module']")
+        script_content = scripts.first.text_content()
+        # Local version uses embedded CODE_DATA, gist version uses fetch
+        assert (
+            "CODE_DATA" in script_content
+        ), "CODE_DATA should be checked for embedded data"
+        assert (
+            "getGistDataUrl" in script_content
+        ), "getGistDataUrl should be defined for gist fetching"
+        assert "CHUNK_SIZE" in script_content, "CHUNK_SIZE should be defined"
+        # Windowed rendering uses windowStart/windowEnd instead of renderedCount
+        assert "windowStart" in script_content, "windowStart should be defined"
+        assert "windowEnd" in script_content, "windowEnd should be defined"
+
+    def test_scroll_loads_more_messages(self, code_view_page: Page):
+        """Test that scrolling the transcript loads more messages."""
+        panel = code_view_page.locator("#transcript-panel")
+        content = code_view_page.locator("#transcript-content")
+
+        # Count initial messages
+        initial_count = content.locator("> .message").count()
+
+        # Scroll to bottom multiple times to trigger lazy loading
+        for _ in range(3):
+            panel.evaluate("el => el.scrollTop = el.scrollHeight")
+            code_view_page.wait_for_timeout(150)
+
+        # Count messages after scrolling
+        final_count = content.locator("> .message").count()
+
+        # If the session has many messages, more should be loaded
+        # (test passes if already all loaded or if more loaded)
+        assert final_count >= initial_count
+
+    def test_transcript_content_has_messages(self, code_view_page: Page):
+        """Test that transcript content contains rendered messages."""
+        content = code_view_page.locator("#transcript-content")
+        messages = content.locator(".message")
+
+        # Should have at least some messages rendered
+        assert messages.count() > 0, "No messages rendered in transcript"
+
+    def test_clicking_blame_highlights_code_range(self, code_view_page: Page):
+        """Test that clicking a blame block highlights the code range."""
+        blame_lines = code_view_page.locator(".cm-line[data-msg-id]")
+
+        if blame_lines.count() > 0:
+            # Click the blame line
+            blame_lines.first.click()
+            code_view_page.wait_for_timeout(200)
+
+            # The code range should be highlighted
+            active_range = code_view_page.locator(".cm-active-range")
+            expect(active_range.first).to_be_visible()
+
+    def test_clicking_blame_scrolls_to_transcript_message(self, code_view_page: Page):
+        """Test that clicking a blame block scrolls to the corresponding transcript message."""
+        blame_lines = code_view_page.locator(".cm-line[data-msg-id]")
+
+        if blame_lines.count() > 0:
+            # Get the msg_id from the blame line
+            first_blame = blame_lines.first
+            msg_id = first_blame.get_attribute("data-msg-id")
+
+            if msg_id:
+                # Click the blame line
+                first_blame.click()
+
+                # Wait for the transcript to scroll and render the message
+                code_view_page.wait_for_timeout(500)
+
+                # The corresponding message should be visible and highlighted in the transcript
+                message = code_view_page.locator(f"#{msg_id}")
+                expect(message).to_be_visible(timeout=5000)
+                expect(message).to_have_class(re.compile(r"highlighted"))
+
+    def test_intersection_observer_setup(self, code_view_page: Page):
+        """Test that IntersectionObserver is set up for lazy loading."""
+        # Check that the script contains IntersectionObserver setup
+        scripts = code_view_page.locator("script[type='module']")
+        script_content = scripts.first.text_content()
+        assert "IntersectionObserver" in script_content
+        assert "transcript-sentinel" in script_content
+
+    def test_render_messages_up_to_function_exists(self, code_view_page: Page):
+        """Test that the renderMessagesUpTo function exists for on-demand rendering."""
+        scripts = code_view_page.locator("script[type='module']")
+        script_content = scripts.first.text_content()
+        assert "renderMessagesUpTo" in script_content
+        assert "renderNextChunk" in script_content
+
+
+class TestBlameToTranscriptNavigation:
+    """Tests for blame block to transcript message navigation."""
+
+    def test_clicking_blame_shows_user_prompt_and_edit_message(
+        self, code_view_page: Page
+    ):
+        """Test that clicking a blame block shows both user prompt and edit message.
+
+        When clicking a blame block, the transcript should load all messages from
+        the user prompt through the edit message, ensuring the user can see the
+        full context of the change.
+        """
+        blame_lines = code_view_page.locator(".cm-line[data-msg-id]")
+
+        if blame_lines.count() > 0:
+            # Get the msg_id from a blame line
+            first_blame = blame_lines.first
+            msg_id = first_blame.get_attribute("data-msg-id")
+
+            if msg_id:
+                # Click the blame line
+                first_blame.click()
+
+                # Wait for the transcript to scroll and render
+                code_view_page.wait_for_timeout(500)
+
+                # The edit message should be visible and highlighted
+                message = code_view_page.locator(f"#{msg_id}")
+                expect(message).to_be_visible(timeout=5000)
+                expect(message).to_have_class(re.compile(r"highlighted"))
+
+                # Find the user message that started this conversation context
+                # The user prompt should be in the DOM (it may be scrolled above)
+                user_messages = code_view_page.locator(
+                    "#transcript-content .message.user:not(.continuation)"
+                )
+                assert (
+                    user_messages.count() > 0
+                ), "User prompt should be loaded in transcript"
+
+
+class TestLoadingIndicators:
+    """Tests for loading indicators."""
+
+    def test_file_switch_shows_loading(self, code_view_page: Page):
+        """Test that switching files shows a loading indicator briefly."""
+        files = code_view_page.locator(".tree-file")
+        if files.count() > 1:
+            # Click a different file
+            files.nth(1).click()
+            # The code content area should exist and eventually show the editor
+            code_content = code_view_page.locator("#code-content")
+            expect(code_content).to_be_visible()
+
+
+class TestPromptNumberConsistency:
+    """Tests for prompt number consistency between tooltip and pinned header."""
+
+    def test_pinned_prompt_matches_tooltip_prompt(self, code_view_page: Page):
+        """Test that pinned user prompt number matches the tooltip's prompt number.
+
+        When clicking on a blame block, the pinned user prompt header should show
+        the same prompt number as displayed in the blame tooltip. This verifies
+        that the client-side prompt counting matches the server-side computation.
+        """
+        blame_lines = code_view_page.locator(".cm-line[data-msg-id]")
+
+        if blame_lines.count() == 0:
+            pytest.skip("No blame lines with msg_id found")
+
+        # Find blame lines that have tooltip HTML (user_html attribute)
+        # and iterate through several to test consistency
+        tested_count = 0
+        for i in range(min(blame_lines.count(), 10)):
+            blame_line = blame_lines.nth(i)
+            msg_id = blame_line.get_attribute("data-msg-id")
+            if not msg_id:
+                continue
+
+            # Hover to show tooltip and get its prompt number
+            blame_line.hover()
+            code_view_page.wait_for_timeout(200)
+
+            tooltip = code_view_page.locator(".blame-tooltip")
+            if not tooltip.is_visible():
+                continue
+
+            # Get prompt number from tooltip (User Prompt #N format in .index-item-number)
+            tooltip_number_el = tooltip.locator(".index-item-number")
+            if tooltip_number_el.count() == 0:
+                continue
+
+            tooltip_prompt_text = tooltip_number_el.text_content()
+            # Extract number from "User Prompt #N" format
+            tooltip_match = re.search(r"#(\d+)", tooltip_prompt_text)
+            if not tooltip_match:
+                continue
+            tooltip_prompt_num = int(tooltip_match.group(1))
+
+            # Click to navigate and show pinned header
+            blame_line.click()
+            code_view_page.wait_for_timeout(500)
+
+            # Get prompt number from pinned header
+            pinned = code_view_page.locator("#pinned-user-message")
+            if not pinned.is_visible():
+                # Pinned header might not show if message is at top
+                continue
+
+            pinned_label = code_view_page.locator(".pinned-user-message-label")
+            pinned_label_text = pinned_label.text_content()
+            # Extract number from "User Prompt #N" format
+            match = re.search(r"#(\d+)", pinned_label_text)
+            if not match:
+                continue
+
+            pinned_prompt_num = int(match.group(1))
+
+            # They should match!
+            assert pinned_prompt_num == tooltip_prompt_num, (
+                f"Pinned prompt #{pinned_prompt_num} should match "
+                f"tooltip prompt #{tooltip_prompt_num} for msg_id {msg_id}"
+            )
+
+            tested_count += 1
+            if tested_count >= 3:  # Test a few blame blocks
+                break
+
+        if tested_count == 0:
+            pytest.skip("Could not test any blame blocks with visible pinned headers")
+
+    def test_all_messages_have_prompt_num(self, code_view_page: Page):
+        """Test that every message in messagesData has a prompt_num after first user prompt.
+
+        The server sets prompt_num on every message (not just user prompts) so the
+        client doesn't need to search backwards to find the current prompt number.
+        """
+        # Get messagesData from the page
+        messages_data = code_view_page.evaluate(
+            "() => window.codeViewData?.messagesData"
+        )
+
+        if not messages_data or len(messages_data) == 0:
+            pytest.skip("No messagesData found")
+
+        # Find the first message with a prompt_num (first user prompt)
+        first_prompt_idx = None
+        for i, msg in enumerate(messages_data):
+            if msg.get("prompt_num") is not None:
+                first_prompt_idx = i
+                break
+
+        if first_prompt_idx is None:
+            pytest.skip("No messages with prompt_num found")
+
+        # All messages after the first user prompt should have prompt_num set
+        for i in range(first_prompt_idx, len(messages_data)):
+            msg = messages_data[i]
+            assert (
+                msg.get("prompt_num") is not None
+            ), f"Message at index {i} (id={msg.get('id')}) should have prompt_num set"
+
+        # Verify prompt_num is monotonically non-decreasing
+        prev_num = 0
+        for msg in messages_data:
+            num = msg.get("prompt_num")
+            if num is not None:
+                assert num >= prev_num, (
+                    f"prompt_num should be monotonically non-decreasing, "
+                    f"got {num} after {prev_num}"
+                )
+                prev_num = num
+
+
+class TestLineAnchors:
+    """Tests for line anchor deep-linking support."""
+
+    def test_line_hash_navigates_to_line(self, page: Page, http_server: str):
+        """Test that navigating with #L{number} scrolls to that line."""
+        # Navigate to code.html#L5
+        page.goto(f"{http_server}/code.html#L5")
+        page.wait_for_selector(".cm-editor", timeout=10000)
+        page.wait_for_timeout(500)  # Wait for scroll to happen
+
+        # Line 5 should be visible and highlighted
+        line_5 = page.locator(".cm-gutterElement:has-text('5')")
+        if line_5.count() > 0:
+            # The line 5 gutter element should be visible
+            expect(line_5.first).to_be_visible()
+
+    def test_clicking_line_updates_url_hash(self, code_view_page: Page):
+        """Test that clicking a line updates the URL hash."""
+        # Click on a line with a blame range
+        blame_line = code_view_page.locator(".cm-line[data-range-index]").first
+        if blame_line.count() > 0:
+            blame_line.click()
+            code_view_page.wait_for_timeout(200)
+
+            # URL should now contain an #L anchor
+            url = code_view_page.url
+            assert (
+                "#L" in url or "#" in url
+            ), "URL should have a line anchor after clicking"
+
+    def test_line_hash_with_file_path(self, page: Page, http_server: str):
+        """Test that navigating with file:L{number} format works."""
+        # First load the page to get a file path
+        page.goto(f"{http_server}/code.html")
+        page.wait_for_selector(".cm-editor", timeout=10000)
+
+        # Get the first file path
+        first_file = page.locator(".tree-file").first
+        file_path = first_file.get_attribute("data-path")
+
+        if file_path:
+            # Navigate with file:Lnumber format
+            # URL encode the file path for the hash
+            encoded_path = file_path.replace("/", "%2F")
+            page.goto(f"{http_server}/code.html#{encoded_path}:L3")
+            page.wait_for_timeout(500)
+
+            # The correct file should be selected and visible
+            editor = page.locator(".cm-editor")
+            expect(editor).to_be_visible()
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index 32120c5..752d95b 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -131,6 +131,43 @@ def test_render_markdown_text_empty(self):
         assert render_markdown_text("") == ""
         assert render_markdown_text(None) == ""
 
+    def test_render_markdown_strips_style_tags(self):
+        """Test that <style> tags in markdown content are stripped."""
+        # This prevents CSS in transcript content from affecting page styles
+        text = "Here is some CSS:\n<style>:root { --bg: red; }</style>"
+        result = render_markdown_text(text)
+        assert "<style>" not in result
+        assert "</style>" not in result
+
+    def test_render_markdown_strips_script_tags(self):
+        """Test that <script> tags in markdown content are stripped."""
+        # This prevents JS in transcript content from executing
+        text = "Here is some code:\n<script>alert('xss')</script>"
+        result = render_markdown_text(text)
+        assert "<script>" not in result
+        assert "</script>" not in result
+
+    def test_render_markdown_strips_form_elements(self):
+        """Test that form elements in markdown content are stripped."""
+        # This prevents forms/inputs from being rendered
+        text = (
+            "Here is a form:\n<form><input type='text'><button>Submit</button></form>"
+        )
+        result = render_markdown_text(text)
+        assert "<form>" not in result
+        assert "<input" not in result
+        assert "<button>" not in result
+
+    def test_render_markdown_allows_safe_tags(self):
+        """Test that safe markdown tags are preserved."""
+        text = "**bold** and `code` and [link](http://example.com)"
+        result = render_markdown_text(text)
+        assert "<strong>bold</strong>" in result
+        assert "<code>code</code>" in result
+        # nh3 adds rel="noopener noreferrer" to links for security
+        assert '<a href="http://example.com"' in result
+        assert ">link</a>" in result
+
     def test_format_json(self, snapshot_html):
         """Test JSON formatting."""
         result = format_json({"key": "value", "number": 42, "nested": {"a": 1}})
@@ -435,8 +472,8 @@ def test_injects_js_into_html_files(self, output_dir):
     def test_gist_preview_js_handles_fragment_navigation(self):
         """Test that GIST_PREVIEW_JS includes fragment navigation handling.
 
-        When accessing a gistpreview URL with a fragment like:
-        https://gistpreview.github.io/?GIST_ID/page-001.html#msg-2025-12-26T15-30-45-910Z
+        When accessing a gisthost URL with a fragment like:
+        https://gisthost.github.io/?GIST_ID/page-001.html#msg-2025-12-26T15-30-45-910Z
 
         The content loads dynamically, so the browser's native fragment
         navigation fails because the element doesn't exist yet. The JS
@@ -450,6 +487,11 @@ def test_gist_preview_js_handles_fragment_navigation(self):
         # The JS should scroll to the element
         assert "scrollIntoView" in GIST_PREVIEW_JS
 
+    def test_gist_preview_js_supports_both_hosts(self):
+        """Test that GIST_PREVIEW_JS supports both gisthost and gistpreview domains."""
+        assert "gisthost.github.io" in GIST_PREVIEW_JS
+        assert "gistpreview.github.io" in GIST_PREVIEW_JS
+
     def test_skips_files_without_body(self, output_dir):
         """Test that files without </body> are not modified."""
         original_content = "<html><head><title>Test</title></head></html>"
@@ -664,7 +706,7 @@ def mock_run(*args, **kwargs):
 
         assert result.exit_code == 0
         assert (output_dir / "index.html").exists()
-        # Verify JS was injected (checks for both domains for backwards compatibility)
+        # Verify JS was injected (supports both gisthost and gistpreview)
         index_content = (output_dir / "index.html").read_text(encoding="utf-8")
         assert "gisthost.github.io" in index_content
 
@@ -1078,6 +1120,58 @@ def test_jsonl_generates_html(self, output_dir, snapshot_html):
         assert "hello world" in index_html.lower()
         assert index_html == snapshot_html
 
+    def test_jsonl_preserves_tool_use_result(self, tmp_path):
+        """Test that toolUseResult field is preserved in parsed entries.
+
+        This is needed for originalFile content used in remote session code reconstruction.
+        """
+        # Create a JSONL file with toolUseResult
+        jsonl_content = """{"type":"user","timestamp":"2025-01-01T10:00:00Z","message":{"role":"user","content":"Edit the file"}}
+{"type":"assistant","timestamp":"2025-01-01T10:00:05Z","message":{"role":"assistant","content":[{"type":"tool_use","id":"toolu_001","name":"Edit","input":{"file_path":"/test.py","old_string":"old","new_string":"new"}}]}}
+{"type":"user","timestamp":"2025-01-01T10:00:10Z","toolUseResult":{"originalFile":"original content here","filePath":"/test.py"},"message":{"role":"user","content":[{"type":"tool_result","tool_use_id":"toolu_001","content":"File edited"}]}}"""
+
+        jsonl_file = tmp_path / "test.jsonl"
+        jsonl_file.write_text(jsonl_content)
+
+        result = parse_session_file(jsonl_file)
+
+        # Find the tool result entry (last user message)
+        tool_result_entry = [
+            e
+            for e in result["loglines"]
+            if e["type"] == "user" and "tool_result" in str(e)
+        ][-1]
+
+        # toolUseResult should be preserved
+        assert "toolUseResult" in tool_result_entry
+        assert (
+            tool_result_entry["toolUseResult"]["originalFile"]
+            == "original content here"
+        )
+        assert tool_result_entry["toolUseResult"]["filePath"] == "/test.py"
+
+    def test_jsonl_preserves_is_meta(self, tmp_path):
+        """Test that isMeta field is preserved in parsed entries.
+
+        Skill expansion messages have isMeta=True and should be treated as
+        continuations for prompt numbering.
+        """
+        jsonl_content = """{"type":"user","timestamp":"2025-01-01T10:00:00Z","message":{"role":"user","content":"Use the test skill"}}
+{"type":"assistant","timestamp":"2025-01-01T10:00:05Z","message":{"role":"assistant","content":[{"type":"text","text":"Invoking skill..."}]}}
+{"type":"user","timestamp":"2025-01-01T10:00:10Z","isMeta":true,"message":{"role":"user","content":[{"type":"text","text":"Base directory for this skill: /path/to/skill"}]}}
+{"type":"assistant","timestamp":"2025-01-01T10:00:15Z","message":{"role":"assistant","content":[{"type":"text","text":"Working on it..."}]}}"""
+
+        jsonl_file = tmp_path / "test.jsonl"
+        jsonl_file.write_text(jsonl_content)
+
+        result = parse_session_file(jsonl_file)
+
+        # Find the skill expansion entry (isMeta=True)
+        meta_entry = [e for e in result["loglines"] if e.get("isMeta")]
+        assert len(meta_entry) == 1
+        assert meta_entry[0]["isMeta"] is True
+        assert "Base directory for this skill" in str(meta_entry[0]["message"])
+
 
 class TestGetSessionSummary:
     """Tests for get_session_summary which extracts summary from session files."""
@@ -1497,6 +1591,43 @@ def test_output_auto_with_jsonl_uses_stem(self, tmp_path, monkeypatch):
         assert (expected_dir / "index.html").exists()
 
 
+class TestGistCreation:
+    """Tests for gist creation."""
+
+    def test_creates_gist_with_all_files(self, output_dir, monkeypatch):
+        """Test that create_gist uploads all files to a single gist."""
+        import subprocess
+
+        # Create test HTML files
+        (output_dir / "index.html").write_text(
+            "<html><head></head><body>Index</body></html>", encoding="utf-8"
+        )
+        (output_dir / "page-001.html").write_text(
+            "<html><head></head><body>Page</body></html>", encoding="utf-8"
+        )
+
+        # Track subprocess calls
+        subprocess_calls = []
+
+        def mock_run(cmd, *args, **kwargs):
+            subprocess_calls.append(cmd)
+            return subprocess.CompletedProcess(
+                args=cmd,
+                returncode=0,
+                stdout="https://gist.github.com/testuser/abc123def456\n",
+                stderr="",
+            )
+
+        monkeypatch.setattr(subprocess, "run", mock_run)
+
+        gist_id, gist_url = create_gist(output_dir)
+
+        # Should call gh gist create once with all files
+        assert len(subprocess_calls) == 1
+        assert subprocess_calls[0][0:3] == ["gh", "gist", "create"]
+        assert gist_id == "abc123def456"
+
+
 class TestSearchFeature:
     """Tests for the search feature on index.html pages."""
 
@@ -1531,6 +1662,7 @@ def test_search_javascript_present(self, output_dir):
         fixture_path = Path(__file__).parent / "sample_session.json"
         generate_html(fixture_path, output_dir, github_repo="example/project")
 
+        # For small sessions, JavaScript is inlined in HTML
         index_html = (output_dir / "index.html").read_text(encoding="utf-8")
 
         # JavaScript should handle DOMParser for parsing fetched pages
@@ -1545,25 +1677,26 @@ def test_search_css_present(self, output_dir):
         fixture_path = Path(__file__).parent / "sample_session.json"
         generate_html(fixture_path, output_dir, github_repo="example/project")
 
+        # For small sessions, CSS is inlined in HTML
         index_html = (output_dir / "index.html").read_text(encoding="utf-8")
 
         # CSS should style the search box
-        assert "#search-box" in index_html or ".search-box" in index_html
+        assert "#search-box" in index_html
         # CSS should style the search modal
-        assert "#search-modal" in index_html or ".search-modal" in index_html
+        assert "#search-modal" in index_html
 
     def test_search_box_hidden_by_default_in_css(self, output_dir):
         """Test that search box is hidden by default (for progressive enhancement)."""
         fixture_path = Path(__file__).parent / "sample_session.json"
         generate_html(fixture_path, output_dir, github_repo="example/project")
 
+        # For small sessions, CSS is inlined in HTML
         index_html = (output_dir / "index.html").read_text(encoding="utf-8")
 
         # Search box should be hidden by default in CSS
         # JavaScript will show it when loaded
-        assert "search-box" in index_html
-        # The JS should show the search box
-        assert "style.display" in index_html or "classList" in index_html
+        assert "#search-box" in index_html
+        assert "display: none" in index_html
 
     def test_search_total_pages_available(self, output_dir):
         """Test that total_pages is available to JavaScript for fetching."""
@@ -1573,4 +1706,4 @@ def test_search_total_pages_available(self, output_dir):
         index_html = (output_dir / "index.html").read_text(encoding="utf-8")
 
         # 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
+        assert "TOTAL_PAGES" in index_html