deeply analyse the current repo structure

1→"""HTML formatter for Claude conversations."""
     2→
     3→import html
     4→import re
     5→from datetime import UTC, datetime
     6→from pathlib import Path
     7→from typing import Any
     8→
     9→from claude_notes.formatters.base import BaseFormatter
    10→
    11→
    12→def humanize_date(timestamp_str: str) -> str:
    13→    """Convert ISO timestamp to humanized format."""
    14→    try:
    15→        # Parse the ISO timestamp
    16→        dt = datetime.fromisoformat(timestamp_str.replace("Z", "+00:00"))
    17→        now = datetime.now(UTC)
    18→
    19→        # Calculate time difference
    20→        diff = now - dt
    21→
    22→        # Convert to local time for display
    23→        local_dt = dt.astimezone()
    24→
    25→        # Format based on time difference
    26→        total_seconds = diff.total_seconds()
    27→
    28→        if total_seconds < 60:
    29→            return "just now"
    30→        elif total_seconds < 3600:  # Less than 1 hour
    31→            minutes = int(total_seconds / 60)
    32→            return f"{minutes} minute{'s' if minutes != 1 else ''} ago"
    33→        elif total_seconds < 86400:  # Less than 1 day
    34→            hours = int(total_seconds / 3600)
    35→            return f"{hours} hour{'s' if hours != 1 else ''} ago"
    36→        elif total_seconds < 2592000:  # Less than 30 days
    37→            days = int(total_seconds / 86400)
    38→            return f"{days} day{'s' if days != 1 else ''} ago"
    39→        else:
    40→            # For older dates, show the actual date
    41→            return local_dt.strftime("%B %d, %Y at %I:%M %p")
    42→    except (ValueError, TypeError):
    43→        # Fallback for unparseable dates
    44→        return timestamp_str
    45→
    46→
    47→class HTMLFormatter(BaseFormatter):
    48→    """Format Claude conversations for HTML display."""
    49→
    50→    def __init__(self):
    51→        """Initialize the formatter."""
    52→        super().__init__()
    53→
    54→    def format_conversation(self, messages: list[dict[str, Any]], conversation_info: dict[str, Any]) -> str:
    55→        """Format and return a conversation as HTML."""
    56→        # Collect tool results
    57→        self._collect_tool_results(messages)
    58→
    59→        # Group messages by role continuity
    60→        grouped_messages = self._group_messages(messages)
    61→
    62→        # Build HTML
    63→        html_parts = []
    64→        html_parts.append('<div class="conversation">')
    65→
    66→        # Add conversation header if available
    67→        conversation_id = conversation_info.get("conversation_id", "unknown")
    68→        if conversation_id:
    69→            html_parts.append('<div class="conversation-header">')
    70→            html_parts.append(f'<h2 id="conv-{conversation_id}">Conversation {conversation_id}</h2>')
    71→            if conversation_info.get("start_time"):
    72→                html_parts.append(f'<div class="timestamp">{conversation_info["start_time"]}</div>')
    73→            html_parts.append("</div>")
    74→
    75→        # Display each group with headings and anchors
    76→        for i, group in enumerate(grouped_messages):
    77→            html_parts.append(self._format_message_group(group, i + 1))
    78→
    79→        html_parts.append("</div>")
    80→        return "\n".join(html_parts)
    81→
    82→    def _format_message_group(self, messages: list[dict[str, Any]], message_number: int = None) -> str:
    83→        """Format a group of messages from the same role."""
    84→        if not messages:
    85→            return ""
    86→
    87→        # Get the role from the first message
    88→        first_msg = messages[0]
    89→        message_data = first_msg.get("message", {})
    90→        role = message_data.get("role", "unknown")
    91→
    92→        # Process each message separately but display as one group
    93→        message_parts = []
    94→
    95→        for msg in messages:
    96→            msg_content = []
    97→
    98→            # Handle tool results that are stored at the message level
    99→            if msg.get("type") == "tool_result":
   100→                continue
   101→
   102→            message_data = msg.get("message", {})
   103→            content = message_data.get("content", "")
   104→
   105→            if isinstance(content, str):
   106→                msg_content.append(self._format_text_content(content, role))
   107→            elif isinstance(content, list):
   108→                # Handle content array (e.g., text + tool uses)
   109→                for item in content:
   110→                    if isinstance(item, dict):
   111→                        if item.get("type") == "text":
   112→                            msg_content.append(self._format_text_content(item.get("text", ""), role))
   113→                        elif item.get("type") == "tool_use":
   114→                            msg_content.append(self._format_tool_use_html(item, msg))
   115→
   116→            # Join content for this message
   117→            if msg_content:
   118→                message_parts.append("".join(msg_content))
   119→
   120→        if not message_parts:
   121→            return ""
   122→
   123→        # Create message group HTML with heading and anchor
   124→        role_class = f"message-group {role}"
   125→        role_icon = "👤" if role == "user" else "🤖" if role == "assistant" else "⚙️"
   126→        role_name = role.title()
   127→
   128→        html_parts = []
   129→
   130→        html_parts.append(f'<div class="{role_class}">')
   131→
   132→        # Add message header with role, anchor, and timestamp
   133→        header_parts = []
   134→        header_parts.append('<div class="message-header">')
   135→        header_parts.append(f'<h3 id="msg-{message_number}" class="message-title">')
   136→        header_parts.append(f"{role_icon} {role_name}")
   137→        header_parts.append(f'<a href="#msg-{message_number}" class="anchor-link">#</a>')
   138→        header_parts.append("</h3>")
   139→
   140→        # Add timestamp if available (use first message's timestamp for the group)
   141→        if messages and messages[0].get("timestamp"):
   142→            timestamp_str = messages[0]["timestamp"]
   143→            humanized = humanize_date(timestamp_str)
   144→            header_parts.append(f'<div class="message-timestamp">{humanized}</div>')
   145→
   146→        header_parts.append("</div>")
   147→        html_parts.extend(header_parts)
   148→
   149→        # Add message content
   150→        html_parts.append('<div class="message-content">')
   151→        for part in message_parts:
   152→            html_parts.append(part)
   153→        html_parts.append("</div>")
   154→
   155→        html_parts.append("</div>")
   156→        return "\n".join(html_parts)
   157→
   158→    def _get_message_preview(self, messages: list[dict[str, Any]], max_length: int = 50) -> str:
   159→        """Generate a preview of the message content for navigation."""
   160→        if not messages:
   161→            return "Empty message"
   162→
   163→        # Extract text content from the first message
   164→        first_msg = messages[0]
   165→        message_data = first_msg.get("message", {})
   166→        content = message_data.get("content", "")
   167→
   168→        preview_text = ""
   169→
   170→        if isinstance(content, str):
   171→            preview_text = content.strip()
   172→        elif isinstance(content, list):
   173→            # Look for text content in the list
   174→            for item in content:
   175→                if isinstance(item, dict) and item.get("type") == "text":
   176→                    text = item.get("text", "").strip()
   177→                    if text:
   178→                        preview_text = text
   179→                        break
   180→                elif isinstance(item, dict) and item.get("type") == "tool_use":
   181→                    tool_name = item.get("name", "Unknown Tool")
   182→                    preview_text = f"[{tool_name} tool usage]"
   183→                    break
   184→
   185→        # Clean up the preview text
   186→        if preview_text:
   187→            # Remove markdown formatting for preview
   188→            preview_text = re.sub(r"\*\*(.*?)\*\*", r"\1", preview_text)  # Remove bold
   189→            preview_text = re.sub(r"\*(.*?)\*", r"\1", preview_text)  # Remove italic
   190→            preview_text = re.sub(r"`(.*?)`", r"\1", preview_text)  # Remove code
   191→            preview_text = re.sub(r"#+\s*", "", preview_text)  # Remove headers
   192→
   193→            # Don't truncate for HTML - show full preview
   194→            return html.escape(preview_text)
   195→
   196→        return "No content"
   197→
   198→    def _format_text_content(self, content: str, role: str) -> str:
   199→        """Format text content with proper HTML escaping and markdown conversion."""
   200→        if not content.strip():
   201→            return ""
   202→
   203→        # Escape HTML
   204→        content = html.escape(content)
   205→
   206→        # Convert markdown to HTML
   207→        content = self._markdown_to_html(content)
   208→
   209→        # Handle special tags for user messages
   210→        if role == "user":
   211→            content = self._parse_special_tags_html(content)
   212→
   213→        return f'<div class="text-content">{content}</div>'
   214→
   215→    def _markdown_to_html(self, content: str) -> str:
   216→        """Convert basic markdown to HTML."""
   217→        # Bold **text**
   218→        content = re.sub(r"\*\*(.*?)\*\*", r"<strong>\1</strong>", content)
   219→
   220→        # Italic *text*
   221→        content = re.sub(r"\*(.*?)\*", r"<em>\1</em>", content)
   222→
   223→        # Code `code`
   224→        content = re.sub(r"`(.*?)`", r"<code>\1</code>", content)
   225→
   226→        # Headers
   227→        content = re.sub(r"^### (.*?)$", r"<h3>\1</h3>", content, flags=re.MULTILINE)
   228→        content = re.sub(r"^## (.*?)$", r"<h2>\1</h2>", content, flags=re.MULTILINE)
   229→        content = re.sub(r"^# (.*?)$", r"<h1>\1</h1>", content, flags=re.MULTILINE)
   230→
   231→        # Line breaks
   232→        content = content.replace("\n", "<br>\n")
   233→
   234→        return content
   235→
   236→    def _parse_special_tags_html(self, content: str) -> str:
   237→        """Parse special tags in content for HTML."""
   238→        # Replace command-message tags
   239→        content = re.sub(
   240→            r"<command-message>(.*?)</command-message>",
   241→            r'<span class="command-message">\1</span>',
   242→            content,
   243→            flags=re.DOTALL,
   244→        )
   245→
   246→        # Replace command-name tags
   247→        content = re.sub(
   248→            r"<command-name>(.*?)</command-name>", r'<span class="command-name">\1</span>', content, flags=re.DOTALL
   249→        )
   250→
   251→        # Replace system-reminder tags
   252→        content = re.sub(
   253→            r"

310→        # Generate HTML output
   311→        from claude_notes.formatters.factory import FormatterFactory
   312→        from claude_notes.formatters.html import get_extra_html_css, get_html_css
   313→
   314→        formatter = FormatterFactory.create_formatter("html")
   315→
   316→        # Collect all formatted content
   317→        html_parts = []
   318→        html_parts.append("<!DOCTYPE html>")
   319→        html_parts.append('<html lang="en">')
   320→        html_parts.append("<head>")
   321→        html_parts.append('<meta charset="UTF-8">')
   322→        html_parts.append('<meta name="viewport" content="width=device-width, initial-scale=1.0">')
   323→        html_parts.append("<title>Claude Conversations</title>")
   324→        html_parts.append(get_html_css())
   325→        html_parts.append(get_extra_html_css(style))
   326→        html_parts.append("</head>")
   327→        html_parts.append("<body>")
   328→        html_parts.append('<div class="container">')
   329→
   330→        # Add conversation navigation if multiple conversations
   331→        if len(conversations) > 1:
   332→            html_parts.append('<div class="conversation-nav">')
   333→            html_parts.append("<h2>Conversations</h2>")
   334→            html_parts.append('<ul class="conversation-toc">')
   335→            for i, conv in enumerate(conversations):
   336→                conv_id = conv["info"].get("conversation_id", f"conv-{i + 1}")
   337→                start_time = conv["info"].get("start_time", "Unknown time")
   338→                html_parts.append(f'<li><a href="#conv-{conv_id}">📝 Conversation {i + 1} ({start_time})</a></li>')
   339→            html_parts.append("</ul>")
   340→            html_parts.append("</div>")
   341→
   342→        for i, conv in enumerate(conversations):
   343→            # Order the messages based on user preference
   344→            ordered_messages = order_messages(conv["messages"], message_order)
   345→            html_content = formatter.format_conversation(ordered_messages, conv["info"])
   346→            html_parts.append(html_content)
   347→            if i < len(conversations) - 1:
   348→                html_parts.append('<hr style="margin: 40px 0; border: 1px solid #e1e5e9;">')
   349→
   350→        # Add back to top link
   351→        html_parts.append('<div class="back-to-top">')
   352→        html_parts.append('<a href="#top">⬆️ Back to Top</a>')
   353→        html_parts.append("</div>")
   354→
   355→        html_parts.append("</div>")
   356→        html_parts.append("</body>")
   357→        html_parts.append("</html>")
   358→
   359→        html_output = "\n".join(html_parts)
   360→
   361→        if output:
   362→            # Write to file
   363→            output_path = Path(output)
   364→            output_path.write_text(html_output, encoding="utf-8")
   365→            console.print(f"[green]HTML output written to: {output_path}[/green]")
   366→        else:
   367→            # Print to stdout
   368→            print(html_output)
   369→    elif format == "animated":

1→"""Claude Notes - Transform Claude Code transcripts to readable formats."""
     2→
     3→__version__ = "0.1.0"
     4→

1→"""HTML formatter for Claude conversations."""
     2→
     3→import html
     4→import re
     5→from datetime import UTC, datetime
     6→from pathlib import Path
     7→from typing import Any
     8→
     9→from claude_notes.formatters.base import BaseFormatter
    10→
    11→
    12→def humanize_date(timestamp_str: str) -> str:
    13→    """Convert ISO timestamp to humanized format."""
    14→    try:
    15→        # Parse the ISO timestamp
    16→        dt = datetime.fromisoformat(timestamp_str.replace("Z", "+00:00"))
    17→        now = datetime.now(UTC)
    18→
    19→        # Calculate time difference
    20→        diff = now - dt
    21→
    22→        # Convert to local time for display
    23→        local_dt = dt.astimezone()
    24→
    25→        # Format based on time difference
    26→        total_seconds = diff.total_seconds()
    27→
    28→        if total_seconds < 60:
    29→            return "just now"
    30→        elif total_seconds < 3600:  # Less than 1 hour
    31→            minutes = int(total_seconds / 60)
    32→            return f"{minutes} minute{'s' if minutes != 1 else ''} ago"
    33→        elif total_seconds < 86400:  # Less than 1 day
    34→            hours = int(total_seconds / 3600)
    35→            return f"{hours} hour{'s' if hours != 1 else ''} ago"
    36→        elif total_seconds < 2592000:  # Less than 30 days
    37→            days = int(total_seconds / 86400)
    38→            return f"{days} day{'s' if days != 1 else ''} ago"
    39→        else:
    40→            # For older dates, show the actual date
    41→            return local_dt.strftime("%B %d, %Y at %I:%M %p")
    42→    except (ValueError, TypeError):
    43→        # Fallback for unparseable dates
    44→        return timestamp_str
    45→
    46→
    47→class HTMLFormatter(BaseFormatter):
    48→    """Format Claude conversations for HTML display."""
    49→
    50→    def __init__(self):
    51→        """Initialize the formatter."""
    52→        super().__init__()
    53→
    54→    def format_conversation(self, messages: list[dict[str, Any]], conversation_info: dict[str, Any]) -> str:
    55→        """Format and return a conversation as HTML."""
    56→        # Collect tool results
    57→        self._collect_tool_results(messages)
    58→
    59→        # Group messages by role continuity
    60→        grouped_messages = self._group_messages(messages)
    61→
    62→        # Build HTML
    63→        html_parts = []
    64→        html_parts.append('<div class="conversation">')
    65→
    66→        # Add conversation header if available
    67→        conversation_id = conversation_info.get("conversation_id", "unknown")
    68→        if conversation_id:
    69→            html_parts.append('<div class="conversation-header">')
    70→            html_parts.append(f'<h2 id="conv-{conversation_id}">Conversation {conversation_id}</h2>')
    71→            if conversation_info.get("start_time"):
    72→                html_parts.append(f'<div class="timestamp">{conversation_info["start_time"]}</div>')
    73→            html_parts.append("</div>")
    74→
    75→        # Display each group with headings and anchors
    76→        for i, group in enumerate(grouped_messages):
    77→            html_parts.append(self._format_message_group(group, i + 1))
    78→
    79→        html_parts.append("</div>")
    80→        return "\n".join(html_parts)
    81→
    82→    def _format_message_group(self, messages: list[dict[str, Any]], message_number: int = None) -> str:
    83→        """Format a group of messages from the same role."""
    84→        if not messages:
    85→            return ""
    86→
    87→        # Get the role from the first message
    88→        first_msg = messages[0]
    89→        message_data = first_msg.get("message", {})
    90→        role = message_data.get("role", "unknown")
    91→
    92→        # Process each message separately but display as one group
    93→        message_parts = []
    94→
    95→        for msg in messages:
    96→            msg_content = []
    97→
    98→            # Handle tool results that are stored at the message level
    99→            if msg.get("type") == "tool_result":
   100→                continue

1→"""HTML formatter for Claude conversations - ampcode-inspired design."""
     2→
     3→import html
     4→import re
     5→from datetime import UTC, datetime
     6→from pathlib import Path
     7→from typing import Any
     8→
     9→from claude_notes.formatters.base import BaseFormatter
    10→
    11→
    12→def humanize_date(timestamp_str: str) -> str:
    13→    """Convert ISO timestamp to humanized format."""
    14→    try:
    15→        dt = datetime.fromisoformat(timestamp_str.replace("Z", "+00:00"))
    16→        now = datetime.now(UTC)
    17→        diff = now - dt
    18→        total_seconds = diff.total_seconds()
    19→
    20→        if total_seconds < 60:
    21→            return "just now"
    22→        elif total_seconds < 3600:
    23→            minutes = int(total_seconds / 60)
    24→            return f"{minutes}m ago"
    25→        elif total_seconds < 86400:
    26→            hours = int(total_seconds / 3600)
    27→            return f"{hours}h ago"
    28→        elif total_seconds < 2592000:
    29→            days = int(total_seconds / 86400)
    30→            return f"{days}d ago"
    31→        else:
    32→            local_dt = dt.astimezone()
    33→            return local_dt.strftime("%b %d, %Y")
    34→    except (ValueError, TypeError):
    35→        return timestamp_str
    36→
    37→
    38→class HTMLFormatter(BaseFormatter):
    39→    """Format Claude conversations for HTML display - ampcode style."""
    40→
    41→    def __init__(self):
    42→        """Initialize the formatter."""
    43→        super().__init__()
    44→        self.stats = {
    45→            "files_read": set(),
    46→            "files_edited": set(),
    47→            "lines_added": 0,
    48→            "lines_removed": 0,
    49→            "tool_calls": 0,
    50→            "searches": 0,
    51→            "bash_commands": 0,
    52→        }
    53→
    54→    def format_conversation(self, messages: list[dict[str, Any]], conversation_info: dict[str, Any]) -> str:
    55→        """Format and return a conversation as HTML."""
    56→        # Reset stats for this conversation
    57→        self.stats = {
    58→            "files_read": set(),
    59→            "files_edited": set(),
    60→            "lines_added": 0,
    61→            "lines_removed": 0,
    62→            "tool_calls": 0,
    63→            "searches": 0,
    64→            "bash_commands": 0,
    65→        }
    66→
    67→        # Collect tool results
    68→        self._collect_tool_results(messages)
    69→
    70→        # Group messages by role continuity
    71→        grouped_messages = self._group_messages(messages)
    72→
    73→        # Extract title from first user message
    74→        title = self._extract_title(grouped_messages)
    75→
    76→        # Build HTML
    77→        html_parts = []
    78→        conversation_id = conversation_info.get("conversation_id", "unknown")
    79→
    80→        html_parts.append(f'<article class="thread" id="conv-{conversation_id}">')
    81→
    82→        # Thread header
    83→        html_parts.append('<header class="thread-header">')
    84→        html_parts.append(f'<h1 class="thread-title">{html.escape(title)}</h1>')
    85→        html_parts.append('<div class="thread-meta">')
    86→        if conversation_info.get("start_time"):
    87→            humanized = humanize_date(conversation_info["start_time"])
    88→            html_parts.append(f'<span class="meta-item">{humanized}</span>')
    89→        message_count = len(grouped_messages)
    90→        html_parts.append(f'<span class="meta-item">{message_count} messages</span>')
    91→        html_parts.append("</div>")
    92→        html_parts.append("</header>")
    93→
    94→        # Main content area
    95→        html_parts.append('<div class="thread-body">')
    96→        html_parts.append('<main class="thread-content">')
    97→
    98→        # Display each group
    99→        for i, group in enumerate(grouped_messages):
   100→            html_parts.append(self._format_message_group(group, i + 1))
   101→
   102→        html_parts.append("</main>")
   103→
   104→        # Sidebar with stats (will be populated after processing)
   105→        html_parts.append(self._generate_sidebar(conversation_info))
   106→
   107→        html_parts.append("</div>")  # thread-body
   108→        html_parts.append("</article>")
   109→
   110→        return "\n".join(html_parts)
   111→
   112→    def _extract_title(self, grouped_messages: list[list[dict]]) -> str:
   113→        """Extract a title from the first user message."""
   114→        for group in grouped_messages:
   115→            if not group:
   116→                continue
   117→            first_msg = group[0]
   118→            message_data = first_msg.get("message", {})
   119→            if message_data.get("role") == "user":
   120→                content = message_data.get("content", "")
   121→                if isinstance(content, str):
   122→                    # Take first line, truncate if needed
   123→                    first_line = content.split("\n")[0].strip()
   124→                    if len(first_line) > 80:
   125→                        return first_line[:77] + "..."
   126→                    return first_line if first_line else "Conversation"
   127→                elif isinstance(content, list):
   128→                    for item in content:
   129→                        if isinstance(item, dict) and item.get("type") == "text":
   130→                            text = item.get("text", "").strip()
   131→                            first_line = text.split("\n")[0].strip()
   132→                            if len(first_line) > 80:
   133→                                return first_line[:77] + "..."
   134→                            return first_line if first_line else "Conversation"
   135→        return "Conversation"
   136→
   137→    def _generate_sidebar(self, conversation_info: dict) -> str:
   138→        """Generate the sidebar with stats."""
   139→        parts = []
   140→        parts.append('<aside class="thread-sidebar">')
   141→
   142→        # Thread info section
   143→        parts.append('<section class="sidebar-section">')
   144→        parts.append('<h3 class="sidebar-title">Thread</h3>')
   145→        parts.append('<dl class="sidebar-stats">')
   146→
   147→        if conversation_info.get("start_time"):
   148→            parts.append(f'<dt>Created</dt><dd>{humanize_date(conversation_info["start_time"])}</dd>')
   149→
   150→        if conversation_info.get("session_id"):
   151→            session_short = conversation_info["session_id"][:8]
   152→            parts.append(f"<dt>Session</dt><dd>{session_short}</dd>")
   153→
   154→        parts.append("</dl>")
   155→        parts.append("</section>")
   156→
   157→        # Stats section
   158→        parts.append('<section class="sidebar-section">')
   159→        parts.append('<h3 class="sidebar-title">Stats</h3>')
   160→        parts.append('<dl class="sidebar-stats">')
   161→
   162→        total_files = len(self.stats["files_read"] | self.stats["files_edited"])
   163→        if total_files > 0:
   164→            parts.append(f"<dt>Files</dt><dd>{total_files}</dd>")
   165→
   166→        if self.stats["lines_added"] > 0 or self.stats["lines_removed"] > 0:
   167→            lines_str = f'+{self.stats["lines_added"]} -{self.stats["lines_removed"]}'
   168→            parts.append(f"<dt>Lines</dt><dd class='lines-changed'>{lines_str}</dd>")
   169→
   170→        if self.stats["tool_calls"] > 0:
   171→            parts.append(f'<dt>Tools</dt><dd>{self.stats["tool_calls"]}</dd>')
   172→
   173→        parts.append("</dl>")
   174→        parts.append("</section>")
   175→
   176→        # Files modified section
   177→        edited_files = self.stats["files_edited"]
   178→        if edited_files:
   179→            parts.append('<section class="sidebar-section">')
   180→            parts.append('<h3 class="sidebar-title">Files Modified</h3>')
   181→            parts.append('<ul class="file-list">')
   182→            for f in sorted(edited_files)[:10]:  # Limit to 10
   183→                filename = Path(f).name
   184→                parts.append(f"<li>{html.escape(filename)}</li>")
   185→            if len(edited_files) > 10:
   186→                parts.append(f"<li class='more'>+{len(edited_files) - 10} more</li>")
   187→            parts.append("</ul>")
   188→            parts.append("</section>")
   189→
   190→        parts.append("</aside>")
   191→        return "\n".join(parts)
   192→
   193→    def _format_message_group(self, messages: list[dict[str, Any]], message_number: int = None) -> str:
   194→        """Format a group of messages from the same role."""
   195→        if not messages:
   196→            return ""
   197→
   198→        first_msg = messages[0]
   199→        message_data = first_msg.get("message", {})
   200→        role = message_data.get("role", "unknown")
   201→
   202→        message_parts = []
   203→
   204→        for msg in messages:
   205→            if msg.get("type") == "tool_result":
   206→                continue
   207→
   208→            message_data = msg.get("message", {})
   209→            content = message_data.get("content", "")
   210→
   211→            if isinstance(content, str):
   212→                message_parts.append(self._format_text_content(content, role))
   213→            elif isinstance(content, list):
   214→                for item in content:
   215→                    if isinstance(item, dict):
   216→                        if item.get("type") == "text":
   217→                            message_parts.append(self._format_text_content(item.get("text", ""), role))
   218→                        elif item.get("type") == "tool_use":
   219→                            message_parts.append(self._format_tool_use_html(item, msg))
   220→
   221→        if not message_parts:
   222→            return ""
   223→
   224→        role_class = f"message {role}"
   225→        role_label = "USER" if role == "user" else "ASSISTANT" if role == "assistant" else role.upper()
   226→
   227→        html_parts = []
   228→        html_parts.append(f'<div class="{role_class}" id="msg-{message_number}">')
   229→
   230→        # Message header
   231→        html_parts.append('<div class="message-header">')
   232→        html_parts.append(f'<span class="role-badge role-{role}">{role_label}</span>')
   233→        if messages and messages[0].get("timestamp"):
   234→            humanized = humanize_date(messages[0]["timestamp"])
   235→            html_parts.append(f'<span class="message-time">{humanized}</span>')
   236→        html_parts.append("</div>")
   237→
   238→        # Message content
   239→        html_parts.append('<div class="message-body">')
   240→        for part in message_parts:
   241→            html_parts.append(part)
   242→        html_parts.append("</div>")
   243→
   244→        html_parts.append("</div>")
   245→        return "\n".join(html_parts)
   246→
   247→    def _format_text_content(self, content: str, role: str) -> str:
   248→        """Format text content with proper HTML escaping and markdown conversion."""
   249→        if not content.strip():
   250→            return ""
   251→
   252→        # Check for thinking blocks (Claude's extended thinking)
   253→        thinking_match = re.search(r"<thinking>(.*?)</thinking>", content, re.DOTALL)
   254→        if thinking_match:
   255→            thinking_content = thinking_match.group(1)
   256→            content = re.sub(r"<thinking>.*?</thinking>", "", content, flags=re.DOTALL)
   257→            thinking_html = self._format_thinking_block(thinking_content)
   258→            if content.strip():
   259→                return thinking_html + self._format_regular_text(content, role)
   260→            return thinking_html
   261→
   262→        return self._format_regular_text(content, role)
   263→
   264→    def _format_thinking_block(self, content: str) -> str:
   265→        """Format a thinking block as collapsible."""
   266→        escaped = html.escape(content.strip())
   267→        escaped = self._markdown_to_html(escaped)
   268→        return f"""<details class="thinking-block">
   269→<summary class="thinking-summary">Thinking</summary>
   270→<div class="thinking-content">{escaped}</div>
   271→</details>"""
   272→
   273→    def _format_regular_text(self, content: str, role: str) -> str:
   274→        """Format regular text content."""
   275→        escaped = html.escape(content)
   276→        escaped = self._markdown_to_html(escaped)
   277→
   278→        if role == "user":
   279→            escaped = self._parse_special_tags_html(escaped)
   280→
   281→        return f'<div class="text-block">{escaped}</div>'
   282→
   283→    def _markdown_to_html(self, content: str) -> str:
   284→        """Convert basic markdown to HTML."""
   285→        # Code blocks first (before inline code)
   286→        content = re.sub(
   287→            r"```(\w*)\n(.*?)```",
   288→            lambda m: f'<pre class="code-block" data-lang="{m.group(1)}"><code>{m.group(2)}</code></pre>',
   289→            content,
   290→            flags=re.DOTALL,
   291→        )
   292→
   293→        # Bold **text**
   294→        content = re.sub(r"\*\*(.*?)\*\*", r"<strong>\1</strong>", content)
   295→
   296→        # Italic *text*
   297→        content = re.sub(r"\*(.*?)\*", r"<em>\1</em>", content)
   298→
   299→        # Inline code `code`
   300→        content = re.sub(r"`(.*?)`", r"<code>\1</code>", content)
   301→
   302→        # Headers
   303→        content = re.sub(r"^### (.*?)$", r"<h4>\1</h4>", content, flags=re.MULTILINE)
   304→        content = re.sub(r"^## (.*?)$", r"<h3>\1</h3>", content, flags=re.MULTILINE)
   305→        content = re.sub(r"^# (.*?)$", r"<h2>\1</h2>", content, flags=re.MULTILINE)
   306→
   307→        # Numbered lists
   308→        content = re.sub(r"^(\d+)\. (.*?)$", r"<li>\2</li>", content, flags=re.MULTILINE)
   309→
   310→        # Line breaks (but not inside code blocks)
   311→        lines = content.split("\n")
   312→        result = []
   313→        in_code = False
   314→        for line in lines:
   315→            if "<pre" in line:
   316→                in_code = True
   317→            if "</pre>" in line:
   318→                in_code = False
   319→            if not in_code and line.strip():
   320→                result.append(line)
   321→            elif in_code:
   322→                result.append(line)
   323→            else:
   324→                result.append("<br>")
   325→        content = "\n".join(result)
   326→
   327→        return content
   328→
   329→    def _parse_special_tags_html(self, content: str) -> str:
   330→        """Parse special tags in content for HTML."""
   331→        content = re.sub(
   332→            r"&lt;command-message&gt;(.*?)&lt;/command-message&gt;",
   333→            r'<span class="command-message">\1</span>',
   334→            content,
   335→            flags=re.DOTALL,
   336→        )
   337→        content = re.sub(
   338→            r"&lt;command-name&gt;(.*?)&lt;/command-name&gt;",
   339→            r'<span class="command-name">\1</span>',
   340→            content,
   341→            flags=re.DOTALL,
   342→        )
   343→        content = re.sub(
   344→            r"&lt;system-reminder&gt;(.*?)&lt;/system-reminder&gt;",
   345→            r'<details class="system-reminder"><summary>System Reminder</summary>\1</details>',
   346→            content,
   347→            flags=re.DOTALL,
   348→        )
   349→        return content
   350→
   351→    def _format_tool_use_html(self, tool_use: dict[str, Any], msg: dict[str, Any]) -> str:
   352→        """Format a tool use block with its result for HTML."""
   353→        tool_name = tool_use.get("name", "Unknown Tool")
   354→        tool_id = tool_use.get("id")
   355→
   356→        self.stats["tool_calls"] += 1
   357→
   358→        tool_result = None
   359→        if tool_id:
   360→            msg_uuid = msg.get("uuid")
   361→            if msg_uuid and msg_uuid in self._tool_results:
   362→                tool_result = self._tool_results[msg_uuid]
   363→            elif tool_id in self._tool_results:
   364→                tool_result = self._tool_results[tool_id]
   365→
   366→        return self.format_tool_use(tool_name, tool_use, tool_result)
   367→
   368→    def format_tool_use(self, tool_name: str, tool_use: dict[str, Any], tool_result: str | None = None) -> str:
   369→        """Format a tool use with the appropriate HTML formatter."""
   370→        formatter = HTML_TOOL_FORMATTERS.get(tool_name)
   371→
   372→        if formatter:
   373→            return formatter.format(tool_use, tool_result, self.stats)
   374→        else:
   375→            return f'<div class="tool-pill unknown"><span class="tool-icon">⚙</span> {html.escape(tool_name)}</div>'
   376→
   377→
   378→class HTMLToolFormatter:
   379→    """Base class for HTML tool formatters."""
   380→
   381→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   382→        """Format a tool use and its result as HTML."""
   383→        raise NotImplementedError
   384→
   385→
   386→class HTMLBashFormatter(HTMLToolFormatter):
   387→    """Format Bash tool usage - terminal command style."""
   388→
   389→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   390→        input_data = tool_use.get("input", {})
   391→        command = input_data.get("command", "unknown command")
   392→
   393→        if stats:
   394→            stats["bash_commands"] += 1
   395→
   396→        result_text = tool_result
   397→        if isinstance(tool_result, dict) and "text" in tool_result:
   398→            result_text = tool_result["text"]
   399→
   400→        parts = []
   401→        parts.append('<div class="terminal-block">')
   402→        parts.append('<div class="terminal-header">')
   403→        parts.append('<span class="terminal-prompt">&gt;_</span>')
   404→        parts.append(f'<code class="terminal-command">{html.escape(command)}</code>')
   405→        parts.append("</div>")
   406→
   407→        if result_text and str(result_text).strip():
   408→            lines = str(result_text).strip().split("\n")
   409→            if len(lines) > 5:
   410→                # Collapsible for long output
   411→                preview = "\n".join(lines[:3])
   412→                parts.append(f'<details class="terminal-output"><summary>{len(lines)} lines output</summary>')
   413→                parts.append(f"<pre>{html.escape(str(result_text).strip())}</pre>")
   414→                parts.append("</details>")
   415→            else:
   416→                parts.append(f'<pre class="terminal-output">{html.escape(str(result_text).strip())}</pre>')
   417→
   418→        parts.append("</div>")
   419→        return "\n".join(parts)
   420→
   421→
   422→class HTMLReadFormatter(HTMLToolFormatter):
   423→    """Format Read tool usage - file pill style."""
   424→
   425→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   426→        input_data = tool_use.get("input", {})
   427→        file_path = input_data.get("file_path", "unknown file")
   428→        offset = input_data.get("offset", "")
   429→        limit = input_data.get("limit", "")
   430→
   431→        if stats:
   432→            stats["files_read"].add(file_path)
   433→
   434→        filename = Path(file_path).name
   435→        line_info = ""
   436→        if offset or limit:
   437→            line_info = f" L{offset or 1}-{(offset or 0) + (limit or 100)}"
   438→
   439→        result_text = tool_result
   440→        if isinstance(tool_result, dict) and "text" in tool_result:
   441→            result_text = tool_result["text"]
   442→
   443→        line_count = len(str(result_text).split("\n")) if result_text else 0
   444→
   445→        parts = []
   446→        parts.append('<details class="tool-pill read-pill">')
   447→        parts.append(
   448→            f'<summary><span class="pill-icon">📄</span> <span class="pill-file">{html.escape(filename)}</span>'
   449→        )
   450→        parts.append(f'<span class="pill-meta">{line_info} {line_count} lines</span></summary>')
   451→
   452→        if result_text:
   453→            parts.append(f'<pre class="file-content">{html.escape(str(result_text).strip())}</pre>')
   454→
   455→        parts.append("</details>")
   456→        return "\n".join(parts)
   457→
   458→
   459→class HTMLEditFormatter(HTMLToolFormatter):
   460→    """Format Edit tool usage - diff block style."""
   461→
   462→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   463→        input_data = tool_use.get("input", {})
   464→        file_path = input_data.get("file_path", "unknown file")
   465→        old_string = input_data.get("old_string", "")
   466→        new_string = input_data.get("new_string", "")
   467→
   468→        if stats:
   469→            stats["files_edited"].add(file_path)
   470→            old_lines = len(old_string.split("\n")) if old_string else 0
   471→            new_lines = len(new_string.split("\n")) if new_string else 0
   472→            stats["lines_added"] += max(0, new_lines - old_lines) if new_lines > old_lines else new_lines
   473→            stats["lines_removed"] += max(0, old_lines - new_lines) if old_lines > new_lines else old_lines
   474→
   475→        filename = Path(file_path).name
   476→        old_lines = old_string.split("\n") if old_string else []
   477→        new_lines = new_string.split("\n") if new_string else []
   478→
   479→        diff = len(new_lines) - len(old_lines)
   480→        diff_str = f"+{diff}" if diff >= 0 else str(diff)
   481→
   482→        result_text = tool_result
   483→        if isinstance(tool_result, dict) and "text" in tool_result:
   484→            result_text = tool_result["text"]
   485→
   486→        success = result_text and "updated" in str(result_text).lower()
   487→
   488→        parts = []
   489→        parts.append('<div class="diff-block">')
   490→        parts.append('<div class="diff-header">')
   491→        parts.append(f'<span class="diff-icon">📝</span>')
   492→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   493→        parts.append(f'<span class="diff-lines">{diff_str}</span>')
   494→        if success:
   495→            parts.append('<span class="diff-success">✓</span>')
   496→        parts.append("</div>")
   497→
   498→        parts.append('<div class="diff-content">')
   499→        for line in old_lines:
   500→            parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   501→        for line in new_lines:
   502→            parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   503→        parts.append("</div>")
   504→
   505→        parts.append('<div class="diff-progress"></div>')
   506→        parts.append("</div>")
   507→        return "\n".join(parts)
   508→
   509→
   510→class HTMLMultiEditFormatter(HTMLToolFormatter):
   511→    """Format MultiEdit tool usage."""
   512→
   513→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   514→        input_data = tool_use.get("input", {})
   515→        file_path = input_data.get("file_path", "unknown file")
   516→        edits = input_data.get("edits", [])
   517→
   518→        if stats:
   519→            stats["files_edited"].add(file_path)
   520→
   521→        filename = Path(file_path).name
   522→
   523→        parts = []
   524→        parts.append('<div class="diff-block multi">')
   525→        parts.append('<div class="diff-header">')
   526→        parts.append(f'<span class="diff-icon">📝</span>')
   527→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   528→        parts.append(f'<span class="diff-lines">{len(edits)} edits</span>')
   529→        parts.append("</div>")
   530→
   531→        for i, edit in enumerate(edits, 1):
   532→            old_string = edit.get("old_string", "")
   533→            new_string = edit.get("new_string", "")
   534→
   535→            if stats:
   536→                old_lines = len(old_string.split("\n")) if old_string else 0
   537→                new_lines = len(new_string.split("\n")) if new_string else 0
   538→                stats["lines_added"] += new_lines
   539→                stats["lines_removed"] += old_lines
   540→
   541→            parts.append(f'<div class="diff-section"><span class="edit-num">Edit {i}</span>')
   542→            parts.append('<div class="diff-content">')
   543→            for line in old_string.split("\n") if old_string else []:
   544→                parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   545→            for line in new_string.split("\n") if new_string else []:
   546→                parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   547→            parts.append("</div></div>")
   548→
   549→        parts.append('<div class="diff-progress"></div>')
   550→        parts.append("</div>")
   551→        return "\n".join(parts)
   552→
   553→
   554→class HTMLGrepFormatter(HTMLToolFormatter):
   555→    """Format Grep tool usage - search pill style."""
   556→
   557→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   558→        input_data = tool_use.get("input", {})
   559→        pattern = input_data.get("pattern", "unknown pattern")
   560→        path = input_data.get("path", ".")
   561→
   562→        if stats:
   563→            stats["searches"] += 1
   564→
   565→        result_text = tool_result
   566→        if isinstance(tool_result, dict) and "text" in tool_result:
   567→            result_text = tool_result["text"]
   568→
   569→        match_count = 0
   570→        if result_text:
   571→            lines = [l for l in str(result_text).strip().split("\n") if l.strip()]
   572→            match_count = len(lines)
   573→
   574→        path_display = Path(path).name if path != "." else "project"
   575→
   576→        parts = []
   577→        parts.append('<details class="tool-pill search-pill">')
   578→        parts.append(
   579→            f'<summary><span class="pill-icon">🔍</span> <code class="pill-query">{html.escape(pattern)}</code>'
   580→        )
   581→        parts.append(f'<span class="pill-meta">{match_count} matches in {html.escape(path_display)}</span></summary>')
   582→
   583→        if result_text and match_count > 0:
   584→            parts.append('<div class="search-results">')
   585→            for line in str(result_text).strip().split("\n")[:20]:
   586→                if line.strip():
   587→                    parts.append(f'<div class="search-result">{html.escape(line)}</div>')
   588→            if match_count > 20:
   589→                parts.append(f'<div class="search-more">+{match_count - 20} more matches</div>')
   590→            parts.append("</div>")
   591→
   592→        parts.append("</details>")
   593→        return "\n".join(parts)
   594→
   595→
   596→class HTMLWriteFormatter(HTMLToolFormatter):
   597→    """Format Write tool usage."""
   598→
   599→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   600→        input_data = tool_use.get("input", {})
   601→        file_path = input_data.get("file_path", "unknown file")
   602→        content = input_data.get("content", "")
   603→
   604→        if stats:
   605→            stats["files_edited"].add(file_path)
   606→            stats["lines_added"] += len(content.split("\n")) if content else 0
   607→
   608→        filename = Path(file_path).name
   609→        line_count = len(content.split("\n")) if content else 0
   610→
   611→        parts = []
   612→        parts.append('<details class="tool-pill write-pill">')
   613→        parts.append(
   614→            f'<summary><span class="pill-icon">💾</span> <span class="pill-file">{html.escape(filename)}</span>'
   615→        )
   616→        parts.append(f'<span class="pill-meta">+{line_count} lines (new file)</span></summary>')
   617→
   618→        if content:
   619→            preview = "\n".join(content.split("\n")[:20])
   620→            parts.append(f'<pre class="file-content">{html.escape(preview)}</pre>')
   621→            if line_count > 20:
   622→                parts.append(f'<div class="file-more">+{line_count - 20} more lines</div>')
   623→
   624→        parts.append("</details>")
   625→        return "\n".join(parts)
   626→
   627→
   628→class HTMLTaskFormatter(HTMLToolFormatter):
   629→    """Format Task/Agent tool usage."""
   630→
   631→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   632→        input_data = tool_use.get("input", {})
   633→        description = input_data.get("description", input_data.get("prompt", "Task"))
   634→
   635→        result_text = tool_result
   636→        if isinstance(tool_result, dict) and "text" in tool_result:
   637→            result_text = tool_result["text"]
   638→
   639→        parts = []
   640→        parts.append('<details class="tool-pill task-pill">')
   641→        parts.append(
   642→            f'<summary><span class="pill-icon">🤖</span> <span class="pill-task">{html.escape(description)}</span></summary>'
   643→        )
   644→
   645→        if result_text:
   646→            parts.append(f'<div class="task-result">{html.escape(str(result_text)[:500])}</div>')
   647→
   648→        parts.append("</details>")
   649→        return "\n".join(parts)
   650→
   651→
   652→class HTMLTodoFormatter(HTMLToolFormatter):
   653→    """Format TodoWrite tool usage."""
   654→
   655→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   656→        input_data = tool_use.get("input", {})
   657→        todos = input_data.get("todos", [])
   658→
   659→        parts = []
   660→        parts.append('<div class="todo-block">')
   661→        parts.append('<div class="todo-header"><span class="pill-icon">📋</span> Todos</div>')
   662→        parts.append('<ul class="todo-list">')
   663→
   664→        for todo in todos[:8]:
   665→            content = todo.get("content", "")
   666→            status = todo.get("status", "pending")
   667→            icon = "✓" if status == "completed" else "○" if status == "pending" else "◐"
   668→            status_class = status
   669→            parts.append(
   670→                f'<li class="todo-item {status_class}"><span class="todo-icon">{icon}</span> {html.escape(content)}</li>'
   671→            )
   672→
   673→        if len(todos) > 8:
   674→            parts.append(f'<li class="todo-more">+{len(todos) - 8} more</li>')
   675→
   676→        parts.append("</ul>")
   677→        parts.append("</div>")
   678→        return "\n".join(parts)
   679→
   680→
   681→# Registry of HTML tool formatters
   682→HTML_TOOL_FORMATTERS = {
   683→    "Bash": HTMLBashFormatter(),
   684→    "Read": HTMLReadFormatter(),
   685→    "Write": HTMLWriteFormatter(),
   686→    "Edit": HTMLEditFormatter(),
   687→    "MultiEdit": HTMLMultiEditFormatter(),
   688→    "Grep": HTMLGrepFormatter(),
   689→    "Task": HTMLTaskFormatter(),
   690→    "TodoWrite": HTMLTodoFormatter(),
   691→}
   692→
   693→
   694→def get_extra_html_css(css_file_path: str | None = None) -> str:
   695→    """Return extra CSS styles from a custom stylesheet file."""
   696→    if not css_file_path:
   697→        return ""
   698→    try:
   699→        css_path = Path(css_file_path)
   700→        if css_path.exists():
   701→            return f"\n<style>\n{css_path.read_text(encoding='utf-8')}\n</style>"
   702→    except Exception:
   703→        pass
   704→    return ""
   705→
   706→
   707→def get_html_css() -> str:
   708→    """Return CSS styles for HTML output - ampcode-inspired terminal aesthetic."""
   709→    return """
   710→<style>
   711→@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap");
   712→
   713→:root {
   714→    --bg: #0d1117;
   715→    --bg-elevated: #161b22;
   716→    --bg-subtle: #1c2128;
   717→    --fg: #e6edf3;
   718→    --fg-muted: #8b949e;
   719→    --fg-subtle: #6e7681;
   720→    --border: #30363d;
   721→    --border-muted: #21262d;
   722→    --accent: #58a6ff;
   723→    --accent-emphasis: #1f6feb;
   724→    --success: #3fb950;
   725→    --success-subtle: rgba(63, 185, 80, 0.15);
   726→    --danger: #f85149;
   727→    --danger-subtle: rgba(248, 81, 73, 0.15);
   728→    --warning: #d29922;
   729→    --warning-subtle: rgba(210, 153, 34, 0.15);
   730→}
   731→
   732→[data-theme="light"] {
   733→    --bg: #ffffff;
   734→    --bg-elevated: #f6f8fa;
   735→    --bg-subtle: #f0f2f4;
   736→    --fg: #1f2328;
   737→    --fg-muted: #656d76;
   738→    --fg-subtle: #8c959f;
   739→    --border: #d0d7de;
   740→    --border-muted: #e6e8eb;
   741→    --accent: #0969da;
   742→    --accent-emphasis: #0550ae;
   743→    --success: #1a7f37;
   744→    --success-subtle: rgba(26, 127, 55, 0.1);
   745→    --danger: #cf222e;
   746→    --danger-subtle: rgba(207, 34, 46, 0.1);
   747→    --warning: #9a6700;
   748→    --warning-subtle: rgba(154, 103, 0, 0.1);
   749→}
   750→
   751→*, *::before, *::after {
   752→    box-sizing: border-box;
   753→    margin: 0;
   754→    padding: 0;
   755→}
   756→
   757→html {
   758→    font-size: 14px;
   759→}
   760→
   761→body {
   762→    font-family: "IBM Plex Mono", monospace;
   763→    background: var(--bg);
   764→    color: var(--fg);
   765→    line-height: 1.5;
   766→    -webkit-font-smoothing: antialiased;
   767→}
   768→
   769→/* Thread Layout */
   770→.thread {
   771→    max-width: 1400px;
   772→    margin: 0 auto;
   773→    padding: 24px;
   774→}
   775→
   776→.thread-header {
   777→    margin-bottom: 32px;
   778→    padding-bottom: 24px;
   779→    border-bottom: 1px solid var(--border);
   780→}
   781→
   782→.thread-title {
   783→    font-size: 1.5rem;
   784→    font-weight: 600;
   785→    color: var(--fg);
   786→    margin-bottom: 8px;
   787→    line-height: 1.3;
   788→}
   789→
   790→.thread-meta {
   791→    display: flex;
   792→    gap: 16px;
   793→    color: var(--fg-muted);
   794→    font-size: 0.85rem;
   795→}
   796→
   797→.meta-item::before {
   798→    content: "•";
   799→    margin-right: 16px;
   800→    color: var(--fg-subtle);
   801→}
   802→
   803→.meta-item:first-child::before {
   804→    display: none;
   805→}
   806→
   807→/* Two-column layout */
   808→.thread-body {
   809→    display: grid;
   810→    grid-template-columns: 1fr 280px;
   811→    gap: 32px;
   812→}
   813→
   814→@media (max-width: 1000px) {
   815→    .thread-body {
   816→        grid-template-columns: 1fr;
   817→    }
   818→    .thread-sidebar {
   819→        order: -1;
   820→    }
   821→}
   822→
   823→.thread-content {
   824→    min-width: 0;
   825→}
   826→
   827→/* Sidebar */
   828→.thread-sidebar {
   829→    position: sticky;
   830→    top: 24px;
   831→    height: fit-content;
   832→}
   833→
   834→.sidebar-section {
   835→    background: var(--bg-elevated);
   836→    border: 1px solid var(--border);
   837→    border-radius: 6px;
   838→    padding: 16px;
   839→    margin-bottom: 16px;
   840→}
   841→
   842→.sidebar-title {
   843→    font-size: 0.75rem;
   844→    font-weight: 600;
   845→    text-transform: uppercase;
   846→    letter-spacing: 0.05em;
   847→    color: var(--fg-muted);
   848→    margin-bottom: 12px;
   849→}
   850→
   851→.sidebar-stats {
   852→    display: grid;
   853→    grid-template-columns: auto 1fr;
   854→    gap: 8px 16px;
   855→    font-size: 0.85rem;
   856→}
   857→
   858→.sidebar-stats dt {
   859→    color: var(--fg-muted);
   860→}
   861→
   862→.sidebar-stats dd {
   863→    text-align: right;
   864→    font-weight: 500;
   865→}
   866→
   867→.sidebar-stats .lines-changed {
   868→    font-family: "IBM Plex Mono", monospace;
   869→}
   870→
   871→.file-list {
   872→    list-style: none;
   873→    font-size: 0.85rem;
   874→}
   875→
   876→.file-list li {
   877→    padding: 4px 0;
   878→    color: var(--fg-muted);
   879→    border-bottom: 1px solid var(--border-muted);
   880→}
   881→
   882→.file-list li:last-child {
   883→    border-bottom: none;
   884→}
   885→
   886→.file-list .more {
   887→    color: var(--fg-subtle);
   888→    font-style: italic;
   889→}
   890→
   891→/* Messages */
   892→.message {
   893→    margin-bottom: 32px;
   894→}
   895→
   896→.message-header {
   897→    display: flex;
   898→    align-items: center;
   899→    gap: 12px;
   900→    margin-bottom: 12px;
   901→}
   902→
   903→.role-badge {
   904→    font-size: 0.7rem;
   905→    font-weight: 600;
   906→    text-transform: uppercase;
   907→    letter-spacing: 0.05em;
   908→    padding: 4px 10px;
   909→    border-radius: 4px;
   910→}
   911→
   912→.role-user {
   913→    background: var(--accent-emphasis);
   914→    color: white;
   915→}
   916→
   917→.role-assistant {
   918→    background: var(--success);
   919→    color: white;
   920→}
   921→
   922→.message-time {
   923→    font-size: 0.75rem;
   924→    color: var(--fg-subtle);
   925→}
   926→
   927→.message-body {
   928→    padding-left: 4px;
   929→}
   930→
   931→/* Text content */
   932→.text-block {
   933→    margin-bottom: 16px;
   934→    line-height: 1.6;
   935→}
   936→
   937→.text-block h2, .text-block h3, .text-block h4 {
   938→    margin: 20px 0 12px 0;
   939→    font-weight: 600;
   940→}
   941→
   942→.text-block code {
   943→    background: var(--bg-elevated);
   944→    padding: 2px 6px;
   945→    border-radius: 4px;
   946→    font-size: 0.9em;
   947→}
   948→
   949→.text-block strong {
   950→    font-weight: 600;
   951→}
   952→
   953→.text-block li {
   954→    margin-left: 24px;
   955→    margin-bottom: 4px;
   956→}
   957→
   958→.code-block {
   959→    background: var(--bg-elevated);
   960→    border: 1px solid var(--border);
   961→    border-radius: 6px;
   962→    padding: 16px;
   963→    overflow-x: auto;
   964→    margin: 16px 0;
   965→    font-size: 0.85rem;
   966→}
   967→
   968→/* Thinking block */
   969→.thinking-block {
   970→    background: var(--bg-elevated);
   971→    border: 1px solid var(--border);
   972→    border-radius: 6px;
   973→    margin: 16px 0;
   974→}
   975→
   976→.thinking-summary {
   977→    padding: 12px 16px;
   978→    cursor: pointer;
   979→    font-weight: 500;
   980→    color: var(--fg-muted);
   981→    display: flex;
   982→    align-items: center;
   983→    gap: 8px;
   984→}
   985→
   986→.thinking-summary::before {
   987→    content: "▶";
   988→    font-size: 0.7em;
   989→    transition: transform 0.2s;
   990→}
   991→
   992→.thinking-block[open] .thinking-summary::before {
   993→    transform: rotate(90deg);
   994→}
   995→
   996→.thinking-content {
   997→    padding: 0 16px 16px;
   998→    border-top: 1px solid var(--border);
   999→    color: var(--fg-muted);
  1000→    font-size: 0.9rem;
  1001→}
  1002→
  1003→/* Tool Pills */
  1004→.tool-pill {
  1005→    background: var(--bg-elevated);
  1006→    border: 1px solid var(--border);
  1007→    border-radius: 6px;
  1008→    margin: 12px 0;
  1009→    font-size: 0.85rem;
  1010→}
  1011→
  1012→.tool-pill summary {
  1013→    padding: 10px 14px;
  1014→    cursor: pointer;
  1015→    display: flex;
  1016→    align-items: center;
  1017→    gap: 8px;
  1018→    list-style: none;
  1019→}
  1020→
  1021→.tool-pill summary::-webkit-details-marker {
  1022→    display: none;
  1023→}
  1024→
  1025→.pill-icon {
  1026→    font-size: 1em;
  1027→}
  1028→
  1029→.pill-file, .pill-task {
  1030→    font-weight: 500;
  1031→    color: var(--fg);
  1032→}
  1033→
  1034→.pill-query {
  1035→    background: var(--bg-subtle);
  1036→    padding: 2px 6px;
  1037→    border-radius: 3px;
  1038→}
  1039→
  1040→.pill-meta {
  1041→    color: var(--fg-subtle);
  1042→    margin-left: auto;
  1043→    font-size: 0.8em;
  1044→}
  1045→
  1046→.tool-pill .file-content,
  1047→.tool-pill .search-results,
  1048→.tool-pill .task-result {
  1049→    padding: 12px 14px;
  1050→    border-top: 1px solid var(--border);
  1051→    background: var(--bg-subtle);
  1052→    font-size: 0.8rem;
  1053→    max-height: 400px;
  1054→    overflow: auto;
  1055→}
  1056→
  1057→.search-result {
  1058→    padding: 4px 0;
  1059→    border-bottom: 1px solid var(--border-muted);
  1060→}
  1061→
  1062→.search-more, .file-more {
  1063→    padding-top: 8px;
  1064→    color: var(--fg-subtle);
  1065→    font-style: italic;
  1066→}
  1067→
  1068→/* Terminal Block */
  1069→.terminal-block {
  1070→    background: var(--bg-elevated);
  1071→    border: 1px solid var(--border);
  1072→    border-radius: 6px;
  1073→    margin: 16px 0;
  1074→    overflow: hidden;
  1075→}
  1076→
  1077→.terminal-header {
  1078→    padding: 10px 14px;
  1079→    display: flex;
  1080→    align-items: center;
  1081→    gap: 10px;
  1082→    border-bottom: 1px solid var(--border);
  1083→}
  1084→
  1085→.terminal-prompt {
  1086→    color: var(--success);
  1087→    font-weight: 600;
  1088→}
  1089→
  1090→.terminal-command {
  1091→    color: var(--fg);
  1092→    font-size: 0.9rem;
  1093→}
  1094→
  1095→.terminal-output {
  1096→    padding: 12px 14px;
  1097→    font-size: 0.8rem;
  1098→    background: var(--bg-subtle);
  1099→    margin: 0;
  1100→    max-height: 300px;
  1101→    overflow: auto;
  1102→}
  1103→
  1104→.terminal-output summary {
  1105→    padding: 8px 14px;
  1106→    cursor: pointer;
  1107→    color: var(--fg-muted);
  1108→    font-size: 0.8rem;
  1109→}
  1110→
  1111→/* Diff Block */
  1112→.diff-block {
  1113→    background: var(--bg-elevated);
  1114→    border: 1px solid var(--border);
  1115→    border-radius: 6px;
  1116→    margin: 16px 0;
  1117→    overflow: hidden;
  1118→}
  1119→
  1120→.diff-header {
  1121→    padding: 10px 14px;
  1122→    display: flex;
  1123→    align-items: center;
  1124→    gap: 10px;
  1125→    border-bottom: 1px solid var(--border);
  1126→    background: var(--bg-subtle);
  1127→}
  1128→
  1129→.diff-icon {
  1130→    font-size: 1em;
  1131→}
  1132→
  1133→.diff-file {
  1134→    font-weight: 500;
  1135→    color: var(--fg);
  1136→}
  1137→
  1138→.diff-lines {
  1139→    background: var(--success-subtle);
  1140→    color: var(--success);
  1141→    padding: 2px 8px;
  1142→    border-radius: 10px;
  1143→    font-size: 0.75rem;
  1144→    font-weight: 600;
  1145→}
  1146→
  1147→.diff-success {
  1148→    color: var(--success);
  1149→    margin-left: auto;
  1150→}
  1151→
  1152→.diff-content {
  1153→    padding: 8px 0;
  1154→    font-size: 0.8rem;
  1155→    font-family: "IBM Plex Mono", monospace;
  1156→}
  1157→
  1158→.diff-line {
  1159→    padding: 2px 14px;
  1160→    white-space: pre-wrap;
  1161→    word-break: break-all;
  1162→}
  1163→
  1164→.diff-line.removed {
  1165→    background: var(--danger-subtle);
  1166→    color: var(--danger);
  1167→}
  1168→
  1169→.diff-line.added {
  1170→    background: var(--success-subtle);
  1171→    color: var(--success);
  1172→}
  1173→
  1174→.diff-progress {
  1175→    height: 3px;
  1176→    background: linear-gradient(90deg, var(--warning) 0%, var(--warning) 100%);
  1177→}
  1178→
  1179→.diff-section {
  1180→    border-top: 1px solid var(--border);
  1181→    padding-top: 8px;
  1182→}
  1183→
  1184→.edit-num {
  1185→    display: block;
  1186→    padding: 4px 14px;
  1187→    font-size: 0.75rem;
  1188→    color: var(--fg-muted);
  1189→    font-weight: 500;
  1190→}
  1191→
  1192→/* Todo Block */
  1193→.todo-block {
  1194→    background: var(--bg-elevated);
  1195→    border: 1px solid var(--border);
  1196→    border-radius: 6px;
  1197→    margin: 16px 0;
  1198→    padding: 14px;
  1199→}
  1200→
  1201→.todo-header {
  1202→    font-weight: 500;
  1203→    margin-bottom: 12px;
  1204→    display: flex;
  1205→    align-items: center;
  1206→    gap: 8px;
  1207→}
  1208→
  1209→.todo-list {
  1210→    list-style: none;
  1211→}
  1212→
  1213→.todo-item {
  1214→    padding: 6px 0;
  1215→    display: flex;
  1216→    align-items: center;
  1217→    gap: 8px;
  1218→    border-bottom: 1px solid var(--border-muted);
  1219→}
  1220→
  1221→.todo-item:last-child {
  1222→    border-bottom: none;
  1223→}
  1224→
  1225→.todo-icon {
  1226→    width: 16px;
  1227→    text-align: center;
  1228→}
  1229→
  1230→.todo-item.completed {
  1231→    color: var(--fg-muted);
  1232→}
  1233→
  1234→.todo-item.completed .todo-icon {
  1235→    color: var(--success);
  1236→}
  1237→
  1238→.todo-item.in_progress .todo-icon {
  1239→    color: var(--warning);
  1240→}
  1241→
  1242→.todo-more {
  1243→    padding-top: 8px;
  1244→    color: var(--fg-subtle);
  1245→    font-style: italic;
  1246→}
  1247→
  1248→/* Special tags */
  1249→.command-message {
  1250→    font-style: italic;
  1251→    color: var(--fg-muted);
  1252→}
  1253→
  1254→.command-name {
  1255→    font-weight: 600;
  1256→    color: var(--accent);
  1257→}
  1258→
  1259→.system-reminder {
  1260→    background: var(--warning-subtle);
  1261→    border: 1px solid var(--warning);
  1262→    border-radius: 6px;
  1263→    margin: 12px 0;
  1264→}
  1265→
  1266→.system-reminder summary {
  1267→    padding: 10px 14px;
  1268→    cursor: pointer;
  1269→    color: var(--warning);
  1270→    font-weight: 500;
  1271→}
  1272→
  1273→.system-reminder > div {
  1274→    padding: 0 14px 14px;
  1275→    font-size: 0.85rem;
  1276→}
  1277→
  1278→/* Container */
  1279→.container {
  1280→    max-width: 1400px;
  1281→    margin: 0 auto;
  1282→}
  1283→
  1284→/* Theme toggle */
  1285→.theme-toggle {
  1286→    position: fixed;
  1287→    top: 16px;
  1288→    right: 16px;
  1289→    z-index: 100;
  1290→    background: var(--bg-elevated);
  1291→    border: 1px solid var(--border);
  1292→    color: var(--fg);
  1293→    padding: 8px 14px;
  1294→    font-family: "IBM Plex Mono", monospace;
  1295→    font-size: 0.75rem;
  1296→    cursor: pointer;
  1297→    border-radius: 6px;
  1298→}
  1299→
  1300→.theme-toggle:hover {
  1301→    background: var(--bg-subtle);
  1302→}
  1303→
  1304→/* Back to top */
  1305→.back-to-top {
  1306→    text-align: center;
  1307→    padding: 32px 0;
  1308→    border-top: 1px solid var(--border);
  1309→    margin-top: 32px;
  1310→}
  1311→
  1312→.back-to-top a {
  1313→    color: var(--fg-muted);
  1314→    text-decoration: none;
  1315→    font-size: 0.85rem;
  1316→}
  1317→
  1318→.back-to-top a:hover {
  1319→    color: var(--fg);
  1320→}
  1321→
  1322→/* Conversation nav */
  1323→.conversation-nav {
  1324→    background: var(--bg-elevated);
  1325→    border: 1px solid var(--border);
  1326→    border-radius: 6px;
  1327→    padding: 20px;
  1328→    margin-bottom: 32px;
  1329→}
  1330→
  1331→.conversation-nav h2 {
  1332→    font-size: 0.85rem;
  1333→    font-weight: 600;
  1334→    text-transform: uppercase;
  1335→    letter-spacing: 0.05em;
  1336→    color: var(--fg-muted);
  1337→    margin-bottom: 16px;
  1338→}
  1339→
  1340→.conversation-toc {
  1341→    list-style: none;
  1342→}
  1343→
  1344→.conversation-toc li {
  1345→    margin-bottom: 8px;
  1346→}
  1347→
  1348→.conversation-toc a {
  1349→    display: block;
  1350→    padding: 10px 14px;
  1351→    background: var(--bg-subtle);
  1352→    border: 1px solid var(--border);
  1353→    border-radius: 4px;
  1354→    color: var(--fg);
  1355→    text-decoration: none;
  1356→    font-size: 0.85rem;
  1357→}
  1358→
  1359→.conversation-toc a:hover {
  1360→    background: var(--bg);
  1361→    border-color: var(--accent);
  1362→}
  1363→
  1364→/* Scrollbar */
  1365→::-webkit-scrollbar {
  1366→    width: 8px;
  1367→    height: 8px;
  1368→}
  1369→
  1370→::-webkit-scrollbar-track {
  1371→    background: var(--bg-subtle);
  1372→}
  1373→
  1374→::-webkit-scrollbar-thumb {
  1375→    background: var(--border);
  1376→    border-radius: 4px;
  1377→}
  1378→
  1379→::-webkit-scrollbar-thumb:hover {
  1380→    background: var(--fg-subtle);
  1381→}
  1382→
  1383→/* Print */
  1384→@media print {
  1385→    .theme-toggle, .thread-sidebar {
  1386→        display: none;
  1387→    }
  1388→    .thread-body {
  1389→        grid-template-columns: 1fr;
  1390→    }
  1391→}
  1392→</style>
  1393→"""
  1394→

355→        html_parts.append("</div>")
   356→
   357→        html_parts.append("</div>")
   358→        # Theme toggle JavaScript
   359→        html_parts.append("""<script>
   360→function toggleTheme() {
   361→    const html = document.documentElement;
   362→    const currentTheme = html.getAttribute('data-theme');
   363→    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
   364→    html.setAttribute('data-theme', newTheme);
   365→    localStorage.setItem('theme', newTheme);
   366→}
   367→// Load saved theme or default to light
   368→const savedTheme = localStorage.getItem('theme') || 'light';
   369→if (savedTheme === 'dark') {
   370→    document.documentElement.setAttribute('data-theme', 'dark');
   371→}
   372→</script>""")
   373→        html_parts.append("</body>")
   374→        html_parts.append("</html>")
   375→
   376→        html_output = "\n".join(html_parts)
   377→
   378→        if output:
   379→            # Write to file

54→    def format_conversation(self, messages: list[dict[str, Any]], conversation_info: dict[str, Any]) -> str:
    55→        """Format and return a conversation as HTML."""
    56→        # Reset stats for this conversation
    57→        self.stats = {
    58→            "files_read": set(),
    59→            "files_edited": set(),
    60→            "lines_added": 0,
    61→            "lines_removed": 0,
    62→            "tool_calls": 0,
    63→            "searches": 0,
    64→            "bash_commands": 0,
    65→        }
    66→
    67→        # Collect tool results
    68→        self._collect_tool_results(messages)
    69→
    70→        # Group messages by role continuity
    71→        grouped_messages = self._group_messages(messages)
    72→
    73→        # Extract title from first user message
    74→        title = self._extract_title(grouped_messages)
    75→
    76→        # Build HTML
    77→        html_parts = []
    78→        conversation_id = conversation_info.get("conversation_id", "unknown")
    79→
    80→        html_parts.append(f'<article class="thread" id="conv-{conversation_id}">')
    81→
    82→        # Thread header
    83→        html_parts.append('<header class="thread-header">')
    84→        html_parts.append(f'<h1 class="thread-title">{html.escape(title)}</h1>')
    85→        html_parts.append('<div class="thread-meta">')
    86→        if conversation_info.get("start_time"):
    87→            humanized = humanize_date(conversation_info["start_time"])
    88→            html_parts.append(f'<span class="meta-item">{humanized}</span>')
    89→        message_count = len(grouped_messages)
    90→        html_parts.append(f'<span class="meta-item">{message_count} messages</span>')
    91→        html_parts.append("</div>")
    92→        html_parts.append("</header>")
    93→
    94→        # Main content area
    95→        html_parts.append('<div class="thread-body">')
    96→        html_parts.append('<main class="thread-content">')
    97→
    98→        # Display each group
    99→        for i, group in enumerate(grouped_messages):
   100→            html_parts.append(self._format_message_group(group, i + 1))
   101→
   102→        html_parts.append("</main>")
   103→
   104→        # Sidebar with stats (will be populated after processing)
   105→        html_parts.append(self._generate_sidebar(conversation_info))
   106→
   107→        html_parts.append("</div>")  # thread-body
   108→        html_parts.append("</article>")
   109→
   110→        return "\n".join(html_parts)
   111→
   112→    def _extract_title(self, grouped_messages: list[list[dict]]) -> str:
   113→        """Extract a title from the first user message."""

115→    def _group_messages(self, messages: list[dict[str, Any]]) -> list[list[dict[str, Any]]]:
   116→        """Group consecutive messages by the same role."""
   117→        if not messages:
   118→            return []
   119→
   120→        groups = []
   121→        current_group = []
   122→        current_role = None
   123→
   124→        for msg in messages:
   125→            # Skip tool results - they're handled inline with tool uses
   126→            if msg.get("type") == "tool_result":
   127→                continue
   128→
   129→            # Also skip user messages that are just tool results - they appear inline now
   130→            if msg.get("type") == "user":
   131→                message_data = msg.get("message", {})
   132→                if isinstance(message_data, dict):
   133→                    content = message_data.get("content", "")
   134→                    if isinstance(content, str) and content.strip().startswith("Tool Result:"):
   135→                        continue
   136→
   137→            # Extract the actual message from the structure
   138→            if "message" in msg and isinstance(msg["message"], dict):
   139→                message_data = msg["message"]
   140→                role = message_data.get("role")
   141→
   142→                # Skip meta messages or messages without role
   143→                if msg.get("isMeta") or not role:
   144→                    continue
   145→
   146→                if role != current_role:
   147→                    if current_group:
   148→                        groups.append(current_group)
   149→                    current_group = [msg]

193→    def _format_message_group(self, messages: list[dict[str, Any]], message_number: int = None) -> str:
   194→        """Format a group of messages from the same role."""
   195→        if not messages:
   196→            return ""
   197→
   198→        first_msg = messages[0]
   199→        message_data = first_msg.get("message", {})
   200→        role = message_data.get("role", "unknown")
   201→
   202→        message_parts = []
   203→
   204→        for msg in messages:
   205→            if msg.get("type") == "tool_result":
   206→                continue
   207→
   208→            message_data = msg.get("message", {})
   209→            content = message_data.get("content", "")
   210→
   211→            if isinstance(content, str):
   212→                message_parts.append(self._format_text_content(content, role))
   213→            elif isinstance(content, list):
   214→                for item in content:
   215→                    if isinstance(item, dict):
   216→                        if item.get("type") == "text":
   217→                            message_parts.append(self._format_text_content(item.get("text", ""), role))
   218→                        elif item.get("type") == "tool_use":
   219→                            message_parts.append(self._format_tool_use_html(item, msg))
   220→
   221→        if not message_parts:
   222→            return ""
   223→
   224→        role_class = f"message {role}"
   225→        role_label = "USER" if role == "user" else "ASSISTANT" if role == "assistant" else role.upper()
   226→
   227→        html_parts = []
   228→        html_parts.append(f'<div class="{role_class}" id="msg-{message_number}">')
   229→
   230→        # Message header
   231→        html_parts.append('<div class="message-header">')
   232→        html_parts.append(f'<span class="role-badge role-{role}">{role_label}</span>')
   233→        if messages and messages[0].get("timestamp"):
   234→            humanized = humanize_date(messages[0]["timestamp"])
   235→            html_parts.append(f'<span class="message-time">{humanized}</span>')
   236→        html_parts.append("</div>")
   237→
   238→        # Message content
   239→        html_parts.append('<div class="message-body">')
   240→        for part in message_parts:
   241→            html_parts.append(part)
   242→        html_parts.append("</div>")
   243→
   244→        html_parts.append("</div>")
   245→        return "\n".join(html_parts)
   246→
   247→    def _format_text_content(self, content: str, role: str) -> str:

115→    def _group_messages(self, messages: list[dict[str, Any]]) -> list[list[dict[str, Any]]]:
   116→        """Group consecutive messages by the same role."""
   117→        if not messages:
   118→            return []
   119→
   120→        groups = []
   121→        current_group = []
   122→        current_role = None
   123→
   124→        for msg in messages:
   125→            # Skip tool results - they're handled inline with tool uses
   126→            if msg.get("type") == "tool_result":
   127→                continue
   128→
   129→            # Also skip user messages that are just tool results - they appear inline now
   130→            if msg.get("type") == "user":
   131→                message_data = msg.get("message", {})
   132→                if isinstance(message_data, dict):
   133→                    content = message_data.get("content", "")
   134→                    if isinstance(content, str) and content.strip().startswith("Tool Result:"):
   135→                        continue
   136→
   137→            # Extract the actual message from the structure
   138→            if "message" in msg and isinstance(msg["message"], dict):
   139→                message_data = msg["message"]
   140→                role = message_data.get("role")
   141→
   142→                # Skip meta messages or messages without role
   143→                if msg.get("isMeta") or not role:
   144→                    continue
   145→
   146→                if role != current_role:
   147→                    if current_group:
   148→                        groups.append(current_group)
   149→                    current_group = [msg]
   150→                    current_role = role
   151→                else:
   152→                    current_group.append(msg)
   153→
   154→        if current_group:
   155→            groups.append(current_group)
   156→
   157→        return groups
   158→
   159→
   160→class OutputFormat:
   161→    """Enumeration of supported output formats."""
   162→
   163→    TERMINAL = "terminal"
   164→    HTML = "html"

1→"""Parser for Claude Code transcript JSONL files."""
     2→
     3→import json
     4→from pathlib import Path
     5→from typing import Any
     6→
     7→
     8→class TranscriptParser:
     9→    """Parse Claude Code transcript JSONL files."""
    10→
    11→    def __init__(self, file_path: Path):
    12→        """Initialize parser with a transcript file path."""
    13→        self.file_path = file_path
    14→        self.messages: list[dict[str, Any]] = []
    15→        self._parse()
    16→
    17→    def _parse(self):
    18→        """Parse the JSONL file."""
    19→        with open(self.file_path, encoding="utf-8") as f:
    20→            for line in f:
    21→                line = line.strip()
    22→                if line:
    23→                    try:
    24→                        data = json.loads(line)
    25→                        self.messages.append(data)
    26→                    except json.JSONDecodeError as e:
    27→                        print(f"Warning: Failed to parse line in {self.file_path}: {e}")
    28→
    29→    def get_conversation_info(self) -> dict[str, Any]:
    30→        """Get basic information about the conversation."""
    31→        if not self.messages:
    32→            return {}
    33→
    34→        # Find first and last timestamps
    35→        timestamps = []
    36→        for msg in self.messages:
    37→            if "timestamp" in msg:
    38→                timestamps.append(msg["timestamp"])
    39→
    40→        # Count actual messages (not meta messages)
    41→        actual_messages = [m for m in self.messages if not m.get("isMeta", False)]
    42→
    43→        info = {
    44→            "file_name": self.file_path.name,
    45→            "message_count": len(actual_messages),
    46→            "total_entries": len(self.messages),
    47→            "start_time": min(timestamps) if timestamps else None,
    48→            "end_time": max(timestamps) if timestamps else None,
    49→        }
    50→
    51→        # Try to get conversation ID and session ID
    52→        if self.file_path.stem:
    53→            info["conversation_id"] = self.file_path.stem
    54→
    55→        # Try to get session ID from first message
    56→        if self.messages and "sessionId" in self.messages[0]:
    57→            info["session_id"] = self.messages[0]["sessionId"]
    58→
    59→        return info
    60→
    61→    def get_messages(self) -> list[dict[str, Any]]:
    62→        """Get all messages from the transcript."""
    63→        return self.messages
    64→
    65→    def get_summary(self) -> str | None:
    66→        """Try to extract a summary or title from the conversation."""
    67→        # Look for system messages or first user message
    68→        for msg in self.messages:
    69→            if msg.get("type") == "conversation_title":
    70→                return msg.get("content", "")
    71→            elif msg.get("role") == "user" and msg.get("content"):
    72→                # Return first line of first user message as summary
    73→                content = msg["content"]
    74→                if isinstance(content, str):
    75→                    return content.split("\n")[0][:100] + ("..." if len(content) > 100 else "")
    76→        return None
    77→

183→def order_messages(messages: list, message_order: str) -> list:
   184→    """Order messages based on the specified order."""
   185→    if message_order == "asc":
   186→        return messages
   187→    else:  # desc
   188→        return list(reversed(messages))
   189→
   190→
   191→@cli.command()
   192→@click.argument("path", type=click.Path(exists=True, path_type=Path), default=".")
   193→@click.option("--raw", is_flag=True, help="Show raw JSON data instead of formatted view")
   194→@click.option("--no-pager", is_flag=True, help="Disable pager and show all content at once")
   195→@click.option("--format", type=click.Choice(["terminal", "html", "animated"]), default="terminal", help="Output format")
   196→@click.option("--output", type=click.Path(), help="Output file (HTML/GIF/MP4/cast format)")
   197→@click.option(
   198→    "--session-order",
   199→    type=click.Choice(["asc", "desc"]),
   200→    default="desc",
   201→    help="Order sessions by timestamp (asc=oldest first, desc=newest first)",
   202→)
   203→@click.option(
   204→    "--message-order",
   205→    type=click.Choice(["asc", "desc"]),
   206→    default="desc",
   207→    help="Order messages within sessions (asc=oldest first, desc=newest first)",
   208→)
   209→@click.option("--style", type=click.Path(exists=True), help="Custom CSS file to include with HTML format")
   210→@click.option(
   211→    "--typing-speed", type=float, default=0.05, help="Typing speed in seconds per character (animated format)"
   212→)

225→    path: Path,
   226→    raw: bool,
   227→    no_pager: bool,
   228→    format: str,
   229→    output: str | None,
   230→    session_order: str,
   231→    message_order: str,
   232→    style: str | None,
   233→    typing_speed: float,
   234→    pause_duration: float,
   235→    cols: int,
   236→    rows: int,
   237→    max_duration: float | None,
   238→    emoji_fallbacks: bool,
   239→):
   240→    """Show all conversations for a Claude project.
   241→
   242→    If PATH is not specified, uses the current directory.
   243→    """
   244→    # Convert to absolute path
   245→    abs_path = path.resolve()
   246→
   247→    # Check if the path is a direct .jsonl file
   248→    if abs_path.is_file() and abs_path.suffix == ".jsonl":
   249→        # Use the file directly
   250→        jsonl_files = [abs_path]
   251→    else:
   252→        # Find the project folder
   253→        project_folder = find_project_folder(abs_path)
   254→

1→name: CI
     2→
     3→on:
     4→  push:
     5→    branches: [ main ]
     6→    tags: [ 'v*' ]
     7→  pull_request:
     8→    branches: [ main ]
     9→
    10→jobs:
    11→  test:
    12→    runs-on: ubuntu-latest
    13→    
    14→    steps:
    15→    - uses: actions/checkout@v4
    16→    
    17→    - name: Install uv
    18→      uses: astral-sh/setup-uv@v4
    19→      with:
    20→        version: "latest"
    21→    
    22→    - name: Set up Python 3.12
    23→      run: uv python install 3.12
    24→    
    25→    - name: Install dependencies
    26→      run: uv sync --extra dev
    27→    
    28→    - name: Format code
    29→      run: make format
    30→    
    31→    - name: Lint with ruff
    32→      run: uv run ruff check
    33→    
    34→    - name: Test CLI functionality
    35→      run: make test
    36→    
    37→    - name: Build package
    38→      run: make build
    39→    
    40→    - name: Upload build artifacts
    41→      uses: actions/upload-artifact@v4
    42→      with:
    43→        name: python-package-distributions
    44→        path: dist/
    45→
    46→  publish:
    47→    needs: test
    48→    runs-on: ubuntu-latest
    49→    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
    50→    environment:
    51→      name: pypi
    52→      url: https://pypi.org/p/claude-notes
    53→    permissions:
    54→      id-token: write
    55→    
    56→    steps:
    57→    - name: Download build artifacts
    58→      uses: actions/download-artifact@v4
    59→      with:
    60→        name: python-package-distributions
    61→        path: dist/
    62→    
    63→    - name: Publish to PyPI
    64→      uses: pypa/gh-action-pypi-publish@release/v1

128→def encode_project_path(path: str) -> str:
   129→    """Encode a project path to Claude folder name format."""
   130→    normalized = path.replace("\\", "/")
   131→
   132→    # Windows path with drive letter (e.g., C:/Users/...)
   133→    if len(normalized) >= 2 and normalized[1] == ":" and normalized[0].isalpha():
   134→        drive = normalized[0]
   135→        rest = normalized[2:]
   136→        if rest.startswith("/"):
   137→            rest = rest[1:]
   138→        encoded_rest = _encode_segments(rest)
   139→        return f"{drive}--{encoded_rest}"
   140→
   141→    # Unix/Linux path (leading slash)
   142→    normalized = normalized.lstrip("/")
   143→    encoded_body = _encode_segments(normalized)
   144→    return "-" + encoded_body
   145→
   146→
   147→def find_project_folder(project_path: Path) -> Path | None:
   148→    """Find the Claude project folder for a given project path."""
   149→    projects_dir = get_claude_projects_dir()
   150→    encoded_name = encode_project_path(str(project_path))
   151→    project_folder = projects_dir / encoded_name
   152→

459→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   460→        input_data = tool_use.get("input", {})
   461→        file_path = input_data.get("file_path", "unknown file")
   462→        old_string = input_data.get("old_string", "")
   463→        new_string = input_data.get("new_string", "")
   464→
   465→        if stats:
   466→            stats["files_edited"].add(file_path)
   467→            old_lines = len(old_string.split("\n")) if old_string else 0
   468→            new_lines = len(new_string.split("\n")) if new_string else 0
   469→            stats["lines_added"] += max(0, new_lines - old_lines) if new_lines > old_lines else new_lines
   470→            stats["lines_removed"] += max(0, old_lines - new_lines) if old_lines > new_lines else old_lines
   471→
   472→        filename = Path(file_path).name
   473→        old_lines = old_string.split("\n") if old_string else []
   474→        new_lines = new_string.split("\n") if new_string else []
   475→
   476→        diff = len(new_lines) - len(old_lines)
   477→        diff_str = f"+{diff}" if diff >= 0 else str(diff)
   478→
   479→        result_text = tool_result
   480→        if isinstance(tool_result, dict) and "text" in tool_result:
   481→            result_text = tool_result["text"]
   482→
   483→        success = result_text and "updated" in str(result_text).lower()
   484→
   485→        parts = []
   486→        parts.append('<div class="diff-block">')
   487→        parts.append('<div class="diff-header">')
   488→        parts.append(f'<span class="diff-icon">📝</span>')
   489→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   490→        parts.append(f'<span class="diff-lines">{diff_str}</span>')
   491→        if success:
   492→            parts.append('<span class="diff-success">✓</span>')
   493→        parts.append("</div>")
   494→
   495→        parts.append('<div class="diff-content">')
   496→        for line in old_lines:
   497→            parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   498→        for line in new_lines:
   499→            parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   500→        parts.append("</div>")
   501→
   502→        parts.append('<div class="diff-progress"></div>')
   503→        parts.append("</div>")
   504→        return "\n".join(parts)
   505→
   506→
   507→class HTMLMultiEditFormatter(HTMLToolFormatter):
   508→    """Format MultiEdit tool usage."""
   509→
   510→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   511→        input_data = tool_use.get("input", {})
   512→        file_path = input_data.get("file_path", "unknown file")
   513→        edits = input_data.get("edits", [])
   514→
   515→        if stats:
   516→            stats["files_edited"].add(file_path)
   517→
   518→        filename = Path(file_path).name

506→class HTMLMultiEditFormatter(HTMLToolFormatter):
   507→    """Format MultiEdit tool usage."""
   508→
   509→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   510→        input_data = tool_use.get("input", {})
   511→        file_path = input_data.get("file_path", "unknown file")
   512→        edits = input_data.get("edits", [])
   513→
   514→        if stats:
   515→            stats["files_edited"].add(file_path)
   516→
   517→        filename = Path(file_path).name
   518→
   519→        parts = []
   520→        parts.append('<div class="diff-block multi">')
   521→        parts.append('<div class="diff-header">')
   522→        parts.append(f'<span class="diff-icon">📝</span>')
   523→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   524→        parts.append(f'<span class="diff-lines">{len(edits)} edits</span>')
   525→        parts.append("</div>")
   526→
   527→        for i, edit in enumerate(edits, 1):
   528→            old_string = edit.get("old_string", "")
   529→            new_string = edit.get("new_string", "")
   530→
   531→            if stats:
   532→                old_lines = len(old_string.split("\n")) if old_string else 0
   533→                new_lines = len(new_string.split("\n")) if new_string else 0
   534→                stats["lines_added"] += new_lines
   535→                stats["lines_removed"] += old_lines
   536→
   537→            parts.append(f'<div class="diff-section"><span class="edit-num">Edit {i}</span>')
   538→            parts.append('<div class="diff-content">')
   539→            for line in old_string.split("\n") if old_string else []:
   540→                parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   541→            for line in new_string.split("\n") if new_string else []:
   542→                parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   543→            parts.append("</div></div>")
   544→
   545→        parts.append('<div class="diff-progress"></div>')
   546→        parts.append("</div>")
   547→        return "\n".join(parts)
   548→
   549→
   550→class HTMLGrepFormatter(HTMLToolFormatter):

260→
   261→    def _format_thinking_block(self, content: str) -> str:
   262→        """Format a thinking block as collapsible."""
   263→        escaped = html.escape(content.strip())
   264→        escaped = self._markdown_to_html(escaped)
   265→        return f"""<details class="thinking-block">
   266→<summary class="thinking-summary">Thinking</summary>
   267→<div class="thinking-content">{escaped}</div>
   268→</details>"""
   269→
   270→    def _format_regular_text(self, content: str, role: str) -> str:
   271→        """Format regular text content."""
   272→        escaped = html.escape(content)
   273→        escaped = self._markdown_to_html(escaped)
   274→
   275→        if role == "user":
   276→            escaped = self._parse_special_tags_html(escaped)
   277→
   278→        return f'<div class="text-block">{escaped}</div>'
   279→
   280→    def _markdown_to_html(self, content: str) -> str:
   281→        """Convert basic markdown to HTML."""
   282→        # Code blocks first (before inline code)
   283→        content = re.sub(
   284→            r"```(\w*)\n(.*?)```",
   285→            lambda m: f'<pre class="code-block" data-lang="{m.group(1)}"><code>{m.group(2)}</code></pre>',
   286→            content,
   287→            flags=re.DOTALL,
   288→        )
   289→

388→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   389→        """Format a tool use and its result as HTML."""
   390→        raise NotImplementedError
   391→
   392→
   393→class HTMLBashFormatter(HTMLToolFormatter):
   394→    """Format Bash tool usage - terminal command style."""
   395→
   396→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   397→        input_data = tool_use.get("input", {})
   398→        command = input_data.get("command", "unknown command")
   399→
   400→        if stats:
   401→            stats["bash_commands"] += 1
   402→
   403→        result_text = tool_result
   404→        if isinstance(tool_result, dict) and "text" in tool_result:
   405→            result_text = tool_result["text"]
   406→
   407→        parts = []
   408→        parts.append('<div class="terminal-block">')
   409→        parts.append('<div class="terminal-header">')
   410→        parts.append('<span class="terminal-prompt">&gt;_</span>')
   411→        parts.append(f'<code class="terminal-command">{html.escape(command)}</code>')
   412→        parts.append("</div>")
   413→
   414→        if result_text and str(result_text).strip():
   415→            lines = str(result_text).strip().split("\n")
   416→            if len(lines) > 5:
   417→                # Collapsible for long output
   418→                preview = "\n".join(lines[:3])
   419→                parts.append(f'<details class="terminal-output"><summary>{len(lines)} lines output</summary>')
   420→                parts.append(f"<pre>{html.escape(str(result_text).strip())}</pre>")
   421→                parts.append("</details>")
   422→            else:
   423→                parts.append(f'<pre class="terminal-output">{html.escape(str(result_text).strip())}</pre>')
   424→
   425→        parts.append("</div>")
   426→        return "\n".join(parts)
   427→

1→"""HTML formatter for Claude conversations - ampcode-inspired design."""
     2→
     3→import html
     4→import re
     5→from datetime import UTC, datetime
     6→from pathlib import Path
     7→from typing import Any
     8→
     9→from claude_notes.formatters.base import BaseFormatter
    10→
    11→
    12→def humanize_date(timestamp_str: str) -> str:
    13→    """Convert ISO timestamp to humanized format."""
    14→    try:
    15→        dt = datetime.fromisoformat(timestamp_str.replace("Z", "+00:00"))
    16→        now = datetime.now(UTC)
    17→        diff = now - dt
    18→        total_seconds = diff.total_seconds()
    19→
    20→        if total_seconds < 60:
    21→            return "just now"
    22→        elif total_seconds < 3600:
    23→            minutes = int(total_seconds / 60)
    24→            return f"{minutes}m ago"
    25→        elif total_seconds < 86400:
    26→            hours = int(total_seconds / 3600)
    27→            return f"{hours}h ago"
    28→        elif total_seconds < 2592000:
    29→            days = int(total_seconds / 86400)
    30→            return f"{days}d ago"
    31→        else:
    32→            local_dt = dt.astimezone()
    33→            return local_dt.strftime("%b %d, %Y")
    34→    except (ValueError, TypeError):
    35→        return timestamp_str
    36→
    37→
    38→class HTMLFormatter(BaseFormatter):
    39→    """Format Claude conversations for HTML display - ampcode style."""
    40→
    41→    def __init__(self):
    42→        """Initialize the formatter."""
    43→        super().__init__()
    44→        self.stats = {
    45→            "files_read": set(),
    46→            "files_edited": set(),
    47→            "lines_added": 0,
    48→            "lines_removed": 0,
    49→            "tool_calls": 0,
    50→            "searches": 0,
    51→            "bash_commands": 0,
    52→        }
    53→
    54→    def format_conversation(self, messages: list[dict[str, Any]], conversation_info: dict[str, Any]) -> str:
    55→        """Format and return a conversation as HTML."""
    56→        # Reset stats for this conversation
    57→        self.stats = {
    58→            "files_read": set(),
    59→            "files_edited": set(),
    60→            "lines_added": 0,
    61→            "lines_removed": 0,
    62→            "tool_calls": 0,
    63→            "searches": 0,
    64→            "bash_commands": 0,
    65→        }
    66→
    67→        # Collect tool results
    68→        self._collect_tool_results(messages)
    69→
    70→        # Group messages by role continuity
    71→        grouped_messages = self._group_messages(messages)
    72→
    73→        # Extract title from first user message
    74→        title = self._extract_title(grouped_messages)
    75→
    76→        # Build HTML
    77→        html_parts = []
    78→        conversation_id = conversation_info.get("conversation_id", "unknown")
    79→
    80→        html_parts.append(f'<article class="thread" id="conv-{conversation_id}">')
    81→
    82→        # Thread header
    83→        html_parts.append('<header class="thread-header">')
    84→        html_parts.append(f'<h1 class="thread-title">{html.escape(title)}</h1>')
    85→        html_parts.append('<div class="thread-meta">')
    86→        if conversation_info.get("start_time"):
    87→            humanized = humanize_date(conversation_info["start_time"])
    88→            html_parts.append(f'<span class="meta-item">{humanized}</span>')
    89→        message_count = len(grouped_messages)
    90→        html_parts.append(f'<span class="meta-item">{message_count} messages</span>')
    91→        html_parts.append("</div>")
    92→        html_parts.append("</header>")
    93→
    94→        # Main content area
    95→        html_parts.append('<div class="thread-body">')
    96→        html_parts.append('<main class="thread-content">')
    97→
    98→        # Display each group
    99→        for i, group in enumerate(grouped_messages):
   100→            if not group:
   101→                continue
   102→            html_parts.append(self._format_message_group(group, i + 1))
   103→
   104→        html_parts.append("</main>")
   105→
   106→        # Sidebar with stats (will be populated after processing)
   107→        html_parts.append(self._generate_sidebar(conversation_info))
   108→
   109→        html_parts.append("</div>")  # thread-body
   110→        html_parts.append("</article>")
   111→
   112→        return "\n".join(html_parts)
   113→
   114→    def _extract_title(self, grouped_messages: list[list[dict]]) -> str:
   115→        """Extract a title from the first user message."""
   116→        for group in grouped_messages:
   117→            if not group:
   118→                continue
   119→            first_msg = group[0]
   120→            message_data = first_msg.get("message", {})
   121→            if message_data.get("role") == "user":
   122→                content = message_data.get("content", "")
   123→                if isinstance(content, str):
   124→                    # Take first line, truncate if needed
   125→                    first_line = content.split("\n")[0].strip()
   126→                    if len(first_line) > 80:
   127→                        return first_line[:77] + "..."
   128→                    return first_line if first_line else "Conversation"
   129→                elif isinstance(content, list):
   130→                    for item in content:
   131→                        if isinstance(item, dict) and item.get("type") == "text":
   132→                            text = item.get("text", "").strip()
   133→                            first_line = text.split("\n")[0].strip()
   134→                            if len(first_line) > 80:
   135→                                return first_line[:77] + "..."
   136→                            return first_line if first_line else "Conversation"
   137→        return "Conversation"
   138→
   139→    def _generate_sidebar(self, conversation_info: dict) -> str:
   140→        """Generate the sidebar with stats."""
   141→        parts = []
   142→        parts.append('<aside class="thread-sidebar">')
   143→
   144→        # Thread info section
   145→        parts.append('<section class="sidebar-section">')
   146→        parts.append('<h3 class="sidebar-title">Thread</h3>')
   147→        parts.append('<dl class="sidebar-stats">')
   148→
   149→        if conversation_info.get("start_time"):
   150→            parts.append(f'<dt>Created</dt><dd>{humanize_date(conversation_info["start_time"])}</dd>')
   151→
   152→        if conversation_info.get("session_id"):
   153→            session_short = conversation_info["session_id"][:8]
   154→            parts.append(f"<dt>Session</dt><dd>{session_short}</dd>")
   155→
   156→        parts.append("</dl>")
   157→        parts.append("</section>")
   158→
   159→        # Stats section
   160→        parts.append('<section class="sidebar-section">')
   161→        parts.append('<h3 class="sidebar-title">Stats</h3>')
   162→        parts.append('<dl class="sidebar-stats">')
   163→
   164→        total_files = len(self.stats["files_read"] | self.stats["files_edited"])
   165→        if total_files > 0:
   166→            parts.append(f"<dt>Files</dt><dd>{total_files}</dd>")
   167→
   168→        if self.stats["lines_added"] > 0 or self.stats["lines_removed"] > 0:
   169→            lines_str = f'+{self.stats["lines_added"]} -{self.stats["lines_removed"]}'
   170→            parts.append(f"<dt>Lines</dt><dd class='lines-changed'>{lines_str}</dd>")
   171→
   172→        if self.stats["tool_calls"] > 0:
   173→            parts.append(f'<dt>Tools</dt><dd>{self.stats["tool_calls"]}</dd>')
   174→
   175→        parts.append("</dl>")
   176→        parts.append("</section>")
   177→
   178→        # Files modified section
   179→        edited_files = self.stats["files_edited"]
   180→        if edited_files:
   181→            parts.append('<section class="sidebar-section">')
   182→            parts.append('<h3 class="sidebar-title">Files Modified</h3>')
   183→            parts.append('<ul class="file-list">')
   184→            for f in sorted(edited_files)[:10]:  # Limit to 10
   185→                filename = Path(f).name
   186→                parts.append(f"<li>{html.escape(filename)}</li>")
   187→            if len(edited_files) > 10:
   188→                parts.append(f"<li class='more'>+{len(edited_files) - 10} more</li>")
   189→            parts.append("</ul>")
   190→            parts.append("</section>")
   191→
   192→        parts.append("</aside>")
   193→        return "\n".join(parts)
   194→
   195→    def _format_message_group(self, messages: list[dict[str, Any]], message_number: int = None) -> str:
   196→        """Format a group of messages from the same role."""
   197→        if not messages:
   198→            return ""
   199→
   200→        first_msg = messages[0]
   201→        message_data = first_msg.get("message", {})
   202→        role = message_data.get("role", "unknown")
   203→
   204→        message_parts = []
   205→
   206→        for msg in messages:
   207→            if msg.get("type") == "tool_result":
   208→                continue
   209→
   210→            message_data = msg.get("message", {})
   211→            content = message_data.get("content", "")
   212→
   213→            if isinstance(content, str):
   214→                message_parts.append(self._format_text_content(content, role))
   215→            elif isinstance(content, list):
   216→                for item in content:
   217→                    if isinstance(item, dict):
   218→                        if item.get("type") == "text":
   219→                            message_parts.append(self._format_text_content(item.get("text", ""), role))
   220→                        elif item.get("type") == "tool_use":
   221→                            message_parts.append(self._format_tool_use_html(item, msg))
   222→
   223→        if not message_parts:
   224→            return ""
   225→
   226→        role_class = f"message {role}"
   227→
   228→        html_parts = []
   229→        html_parts.append(f'<div class="{role_class}" id="msg-{message_number}">')
   230→
   231→        # Message content wrapper
   232→        html_parts.append('<div class="message-content">')
   233→
   234→        # Message body (no header needed - avatar indicates role)
   235→        html_parts.append('<div class="message-body">')
   236→        for part in message_parts:
   237→            html_parts.append(part)
   238→        html_parts.append("</div>")
   239→
   240→        html_parts.append("</div>")  # message-content
   241→        html_parts.append("</div>")  # message
   242→        return "\n".join(html_parts)
   243→
   244→    def _format_text_content(self, content: str, role: str) -> str:
   245→        """Format text content with proper HTML escaping and markdown conversion."""
   246→        if not content.strip():
   247→            return ""
   248→
   249→        # Check for thinking blocks (Claude's extended thinking)
   250→        thinking_match = re.search(r"<thinking>(.*?)</thinking>", content, re.DOTALL)
   251→        if thinking_match:
   252→            thinking_content = thinking_match.group(1)
   253→            content = re.sub(r"<thinking>.*?</thinking>", "", content, flags=re.DOTALL)
   254→            thinking_html = self._format_thinking_block(thinking_content)
   255→            if content.strip():
   256→                return thinking_html + self._format_regular_text(content, role)
   257→            return thinking_html
   258→
   259→        return self._format_regular_text(content, role)
   260→
   261→    def _format_thinking_block(self, content: str) -> str:
   262→        """Format a thinking block as collapsible."""
   263→        escaped = html.escape(content.strip())
   264→        escaped = self._markdown_to_html(escaped)
   265→        return f"""<details class="thinking-block">
   266→<summary class="thinking-summary">Thinking</summary>
   267→<div class="thinking-content">{escaped}</div>
   268→</details>"""
   269→
   270→    def _format_regular_text(self, content: str, role: str) -> str:
   271→        """Format regular text content."""
   272→        escaped = html.escape(content)
   273→        escaped = self._markdown_to_html(escaped)
   274→
   275→        if role == "user":
   276→            escaped = self._parse_special_tags_html(escaped)
   277→            # Trim long user messages with expandable option
   278→            if len(content) > 300:
   279→                preview = html.escape(content[:280].rsplit(" ", 1)[0])
   280→                preview = self._markdown_to_html(preview)
   281→                return f'''<div class="text-block user-text">
   282→<div class="user-preview">{preview}...</div>
   283→<details class="user-expand"><summary>Show more</summary>
   284→<div class="user-full">{escaped}</div>
   285→</details>
   286→</div>'''
   287→
   288→        return f'<div class="text-block">{escaped}</div>'
   289→
   290→    def _markdown_to_html(self, content: str) -> str:
   291→        """Convert basic markdown to HTML."""
   292→        # Code blocks first (before inline code)
   293→        content = re.sub(
   294→            r"```(\w*)\n(.*?)```",
   295→            lambda m: f'<pre class="code-block" data-lang="{m.group(1)}"><code>{m.group(2)}</code></pre>',
   296→            content,
   297→            flags=re.DOTALL,
   298→        )
   299→
   300→        # Bold **text**
   301→        content = re.sub(r"\*\*(.*?)\*\*", r"<strong>\1</strong>", content)
   302→
   303→        # Italic *text*
   304→        content = re.sub(r"\*(.*?)\*", r"<em>\1</em>", content)
   305→
   306→        # Inline code `code`
   307→        content = re.sub(r"`(.*?)`", r"<code>\1</code>", content)
   308→
   309→        # Headers
   310→        content = re.sub(r"^### (.*?)$", r"<h4>\1</h4>", content, flags=re.MULTILINE)
   311→        content = re.sub(r"^## (.*?)$", r"<h3>\1</h3>", content, flags=re.MULTILINE)
   312→        content = re.sub(r"^# (.*?)$", r"<h2>\1</h2>", content, flags=re.MULTILINE)
   313→
   314→        # Numbered lists
   315→        content = re.sub(r"^(\d+)\. (.*?)$", r"<li>\2</li>", content, flags=re.MULTILINE)
   316→
   317→        # Line breaks (but not inside code blocks)
   318→        lines = content.split("\n")
   319→        result = []
   320→        in_code = False
   321→        for line in lines:
   322→            if "<pre" in line:
   323→                in_code = True
   324→            if "</pre>" in line:
   325→                in_code = False
   326→            if not in_code and line.strip():
   327→                result.append(line)
   328→            elif in_code:
   329→                result.append(line)
   330→            else:
   331→                result.append("<br>")
   332→        content = "\n".join(result)
   333→
   334→        return content
   335→
   336→    def _parse_special_tags_html(self, content: str) -> str:
   337→        """Parse special tags in content for HTML."""
   338→        content = re.sub(
   339→            r"&lt;command-message&gt;(.*?)&lt;/command-message&gt;",
   340→            r'<span class="command-message">\1</span>',
   341→            content,
   342→            flags=re.DOTALL,
   343→        )
   344→        content = re.sub(
   345→            r"&lt;command-name&gt;(.*?)&lt;/command-name&gt;",
   346→            r'<span class="command-name">\1</span>',
   347→            content,
   348→            flags=re.DOTALL,
   349→        )
   350→        content = re.sub(
   351→            r"&lt;system-reminder&gt;(.*?)&lt;/system-reminder&gt;",
   352→            r'<details class="system-reminder"><summary>System Reminder</summary>\1</details>',
   353→            content,
   354→            flags=re.DOTALL,
   355→        )
   356→        return content
   357→
   358→    def _format_tool_use_html(self, tool_use: dict[str, Any], msg: dict[str, Any]) -> str:
   359→        """Format a tool use block with its result for HTML."""
   360→        tool_name = tool_use.get("name", "Unknown Tool")
   361→        tool_id = tool_use.get("id")
   362→
   363→        self.stats["tool_calls"] += 1
   364→
   365→        tool_result = None
   366→        if tool_id:
   367→            msg_uuid = msg.get("uuid")
   368→            if msg_uuid and msg_uuid in self._tool_results:
   369→                tool_result = self._tool_results[msg_uuid]
   370→            elif tool_id in self._tool_results:
   371→                tool_result = self._tool_results[tool_id]
   372→
   373→        return self.format_tool_use(tool_name, tool_use, tool_result)
   374→
   375→    def format_tool_use(self, tool_name: str, tool_use: dict[str, Any], tool_result: str | None = None) -> str:
   376→        """Format a tool use with the appropriate HTML formatter."""
   377→        formatter = HTML_TOOL_FORMATTERS.get(tool_name)
   378→
   379→        if formatter:
   380→            return formatter.format(tool_use, tool_result, self.stats)
   381→        else:
   382→            return f'<div class="tool-pill unknown"><span class="tool-icon">⚙</span> {html.escape(tool_name)}</div>'
   383→
   384→
   385→class HTMLToolFormatter:
   386→    """Base class for HTML tool formatters."""
   387→
   388→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   389→        """Format a tool use and its result as HTML."""
   390→        raise NotImplementedError
   391→
   392→
   393→class HTMLBashFormatter(HTMLToolFormatter):
   394→    """Format Bash tool usage - terminal command style."""
   395→
   396→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   397→        input_data = tool_use.get("input", {})
   398→        command = input_data.get("command", "unknown command")
   399→
   400→        if stats:
   401→            stats["bash_commands"] += 1
   402→
   403→        result_text = tool_result
   404→        if isinstance(tool_result, dict) and "text" in tool_result:
   405→            result_text = tool_result["text"]
   406→
   407→        parts = []
   408→        parts.append('<div class="terminal-block">')
   409→        parts.append('<div class="terminal-header">')
   410→        parts.append('<span class="terminal-prompt">&gt;_</span>')
   411→        parts.append(f'<code class="terminal-command">{html.escape(command)}</code>')
   412→        parts.append("</div>")
   413→
   414→        if result_text and str(result_text).strip():
   415→            lines = str(result_text).strip().split("\n")
   416→            if len(lines) > 5:
   417→                # Collapsible for long output
   418→                preview = "\n".join(lines[:3])
   419→                parts.append(f'<details class="terminal-output"><summary>{len(lines)} lines output</summary>')
   420→                parts.append(f"<pre>{html.escape(str(result_text).strip())}</pre>")
   421→                parts.append("</details>")
   422→            else:
   423→                parts.append(f'<pre class="terminal-output">{html.escape(str(result_text).strip())}</pre>')
   424→
   425→        parts.append("</div>")
   426→        return "\n".join(parts)
   427→
   428→
   429→class HTMLReadFormatter(HTMLToolFormatter):
   430→    """Format Read tool usage - file pill style."""
   431→
   432→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   433→        input_data = tool_use.get("input", {})
   434→        file_path = input_data.get("file_path", "unknown file")
   435→        offset = input_data.get("offset", "")
   436→        limit = input_data.get("limit", "")
   437→
   438→        if stats:
   439→            stats["files_read"].add(file_path)
   440→
   441→        filename = Path(file_path).name
   442→        line_info = ""
   443→        if offset or limit:
   444→            line_info = f" L{offset or 1}-{(offset or 0) + (limit or 100)}"
   445→
   446→        result_text = tool_result
   447→        if isinstance(tool_result, dict) and "text" in tool_result:
   448→            result_text = tool_result["text"]
   449→
   450→        line_count = len(str(result_text).split("\n")) if result_text else 0
   451→
   452→        parts = []
   453→        parts.append('<details class="tool-pill read-pill">')
   454→        parts.append(
   455→            f'<summary><span class="pill-icon">📄</span> <span class="pill-file">{html.escape(filename)}</span>'
   456→        )
   457→        parts.append(f'<span class="pill-meta">{line_info} {line_count} lines</span></summary>')
   458→
   459→        if result_text:
   460→            parts.append(f'<pre class="file-content">{html.escape(str(result_text).strip())}</pre>')
   461→
   462→        parts.append("</details>")
   463→        return "\n".join(parts)
   464→
   465→
   466→class HTMLEditFormatter(HTMLToolFormatter):
   467→    """Format Edit tool usage - diff block style."""
   468→
   469→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   470→        input_data = tool_use.get("input", {})
   471→        file_path = input_data.get("file_path", "unknown file")
   472→        old_string = input_data.get("old_string", "")
   473→        new_string = input_data.get("new_string", "")
   474→
   475→        if stats:
   476→            stats["files_edited"].add(file_path)
   477→            old_lines = len(old_string.split("\n")) if old_string else 0
   478→            new_lines = len(new_string.split("\n")) if new_string else 0
   479→            stats["lines_added"] += max(0, new_lines - old_lines) if new_lines > old_lines else new_lines
   480→            stats["lines_removed"] += max(0, old_lines - new_lines) if old_lines > new_lines else old_lines
   481→
   482→        filename = Path(file_path).name
   483→        old_lines = old_string.split("\n") if old_string else []
   484→        new_lines = new_string.split("\n") if new_string else []
   485→
   486→        diff = len(new_lines) - len(old_lines)
   487→        diff_str = f"+{diff}" if diff >= 0 else str(diff)
   488→
   489→        result_text = tool_result
   490→        if isinstance(tool_result, dict) and "text" in tool_result:
   491→            result_text = tool_result["text"]
   492→
   493→        success = result_text and "updated" in str(result_text).lower()
   494→
   495→        total_lines = len(old_lines) + len(new_lines)
   496→
   497→        parts = []
   498→        parts.append('<details class="diff-block">')
   499→        parts.append('<summary class="diff-header">')
   500→        parts.append(f'<span class="diff-icon">📝</span>')
   501→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   502→        parts.append(f'<span class="diff-lines">{diff_str}</span>')
   503→        if success:
   504→            parts.append('<span class="diff-success">✓</span>')
   505→        parts.append(f'<span class="line-count">{total_lines} lines</span>')
   506→        parts.append("</summary>")
   507→
   508→        parts.append('<div class="diff-content">')
   509→        for line in old_lines:
   510→            parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   511→        for line in new_lines:
   512→            parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   513→        parts.append("</div>")
   514→
   515→        parts.append("</details>")
   516→        return "\n".join(parts)
   517→
   518→
   519→class HTMLMultiEditFormatter(HTMLToolFormatter):
   520→    """Format MultiEdit tool usage."""
   521→
   522→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   523→        input_data = tool_use.get("input", {})
   524→        file_path = input_data.get("file_path", "unknown file")
   525→        edits = input_data.get("edits", [])
   526→
   527→        if stats:
   528→            stats["files_edited"].add(file_path)
   529→
   530→        filename = Path(file_path).name
   531→
   532→        parts = []
   533→        parts.append('<details class="diff-block multi">')
   534→        parts.append('<summary class="diff-header">')
   535→        parts.append(f'<span class="diff-icon">📝</span>')
   536→        parts.append(f'<span class="diff-file">{html.escape(filename)}</span>')
   537→        parts.append(f'<span class="diff-lines">{len(edits)} edits</span>')
   538→        parts.append("</summary>")
   539→
   540→        for i, edit in enumerate(edits, 1):
   541→            old_string = edit.get("old_string", "")
   542→            new_string = edit.get("new_string", "")
   543→
   544→            if stats:
   545→                old_lines = len(old_string.split("\n")) if old_string else 0
   546→                new_lines = len(new_string.split("\n")) if new_string else 0
   547→                stats["lines_added"] += new_lines
   548→                stats["lines_removed"] += old_lines
   549→
   550→            parts.append(f'<div class="diff-section"><span class="edit-num">Edit {i}</span>')
   551→            parts.append('<div class="diff-content">')
   552→            for line in old_string.split("\n") if old_string else []:
   553→                parts.append(f'<div class="diff-line removed">- {html.escape(line)}</div>')
   554→            for line in new_string.split("\n") if new_string else []:
   555→                parts.append(f'<div class="diff-line added">+ {html.escape(line)}</div>')
   556→            parts.append("</div></div>")
   557→
   558→        parts.append("</details>")
   559→        return "\n".join(parts)
   560→
   561→
   562→class HTMLGrepFormatter(HTMLToolFormatter):
   563→    """Format Grep tool usage - search pill style."""
   564→
   565→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   566→        input_data = tool_use.get("input", {})
   567→        pattern = input_data.get("pattern", "unknown pattern")
   568→        path = input_data.get("path", ".")
   569→
   570→        if stats:
   571→            stats["searches"] += 1
   572→
   573→        result_text = tool_result
   574→        if isinstance(tool_result, dict) and "text" in tool_result:
   575→            result_text = tool_result["text"]
   576→
   577→        match_count = 0
   578→        if result_text:
   579→            lines = [l for l in str(result_text).strip().split("\n") if l.strip()]
   580→            match_count = len(lines)
   581→
   582→        path_display = Path(path).name if path != "." else "project"
   583→
   584→        parts = []
   585→        parts.append('<details class="tool-pill search-pill">')
   586→        parts.append(
   587→            f'<summary><span class="pill-icon">🔍</span> <code class="pill-query">{html.escape(pattern)}</code>'
   588→        )
   589→        parts.append(f'<span class="pill-meta">{match_count} matches in {html.escape(path_display)}</span></summary>')
   590→
   591→        if result_text and match_count > 0:
   592→            parts.append('<div class="search-results">')
   593→            for line in str(result_text).strip().split("\n")[:20]:
   594→                if line.strip():
   595→                    parts.append(f'<div class="search-result">{html.escape(line)}</div>')
   596→            if match_count > 20:
   597→                parts.append(f'<div class="search-more">+{match_count - 20} more matches</div>')
   598→            parts.append("</div>")
   599→
   600→        parts.append("</details>")
   601→        return "\n".join(parts)
   602→
   603→
   604→class HTMLWriteFormatter(HTMLToolFormatter):
   605→    """Format Write tool usage."""
   606→
   607→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   608→        input_data = tool_use.get("input", {})
   609→        file_path = input_data.get("file_path", "unknown file")
   610→        content = input_data.get("content", "")
   611→
   612→        if stats:
   613→            stats["files_edited"].add(file_path)
   614→            stats["lines_added"] += len(content.split("\n")) if content else 0
   615→
   616→        filename = Path(file_path).name
   617→        line_count = len(content.split("\n")) if content else 0
   618→
   619→        parts = []
   620→        parts.append('<details class="tool-pill write-pill">')
   621→        parts.append(
   622→            f'<summary><span class="pill-icon">💾</span> <span class="pill-file">{html.escape(filename)}</span>'
   623→        )
   624→        parts.append(f'<span class="pill-meta">+{line_count} lines (new file)</span></summary>')
   625→
   626→        if content:
   627→            preview = "\n".join(content.split("\n")[:20])
   628→            parts.append(f'<pre class="file-content">{html.escape(preview)}</pre>')
   629→            if line_count > 20:
   630→                parts.append(f'<div class="file-more">+{line_count - 20} more lines</div>')
   631→
   632→        parts.append("</details>")
   633→        return "\n".join(parts)
   634→
   635→
   636→class HTMLTaskFormatter(HTMLToolFormatter):
   637→    """Format Task/Agent tool usage."""
   638→
   639→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   640→        input_data = tool_use.get("input", {})
   641→        description = input_data.get("description", input_data.get("prompt", "Task"))
   642→
   643→        result_text = tool_result
   644→        if isinstance(tool_result, dict) and "text" in tool_result:
   645→            result_text = tool_result["text"]
   646→
   647→        parts = []
   648→        parts.append('<details class="tool-pill task-pill">')
   649→        parts.append(
   650→            f'<summary><span class="pill-icon">🤖</span> <span class="pill-task">{html.escape(description)}</span></summary>'
   651→        )
   652→
   653→        if result_text:
   654→            parts.append(f'<div class="task-result">{html.escape(str(result_text)[:500])}</div>')
   655→
   656→        parts.append("</details>")
   657→        return "\n".join(parts)
   658→
   659→
   660→class HTMLTodoFormatter(HTMLToolFormatter):
   661→    """Format TodoWrite tool usage."""
   662→
   663→    def format(self, tool_use: dict[str, Any], tool_result: str | None = None, stats: dict = None) -> str:
   664→        input_data = tool_use.get("input", {})
   665→        todos = input_data.get("todos", [])
   666→
   667→        parts = []
   668→        parts.append('<div class="todo-block">')
   669→        parts.append('<div class="todo-header"><span class="pill-icon">📋</span> Todos</div>')
   670→        parts.append('<ul class="todo-list">')
   671→
   672→        for todo in todos[:8]:
   673→            content = todo.get("content", "")
   674→            status = todo.get("status", "pending")
   675→            icon = "✓" if status == "completed" else "○" if status == "pending" else "◐"
   676→            status_class = status
   677→            parts.append(
   678→                f'<li class="todo-item {status_class}"><span class="todo-icon">{icon}</span> {html.escape(content)}</li>'
   679→            )
   680→
   681→        if len(todos) > 8:
   682→            parts.append(f'<li class="todo-more">+{len(todos) - 8} more</li>')
   683→
   684→        parts.append("</ul>")
   685→        parts.append("</div>")
   686→        return "\n".join(parts)
   687→
   688→
   689→# Registry of HTML tool formatters
   690→HTML_TOOL_FORMATTERS = {
   691→    "Bash": HTMLBashFormatter(),
   692→    "Read": HTMLReadFormatter(),
   693→    "Write": HTMLWriteFormatter(),
   694→    "Edit": HTMLEditFormatter(),
   695→    "MultiEdit": HTMLMultiEditFormatter(),
   696→    "Grep": HTMLGrepFormatter(),
   697→    "Task": HTMLTaskFormatter(),
   698→    "TodoWrite": HTMLTodoFormatter(),
   699→}
   700→
   701→
   702→def get_extra_html_css(css_file_path: str | None = None) -> str:
   703→    """Return extra CSS styles from a custom stylesheet file."""
   704→    if not css_file_path:
   705→        return ""
   706→    try:
   707→        css_path = Path(css_file_path)
   708→        if css_path.exists():
   709→            return f"\n<style>\n{css_path.read_text(encoding='utf-8')}\n</style>"
   710→    except Exception:
   711→        pass
   712→    return ""
   713→
   714→
   715→def get_html_css() -> str:
   716→    """Return CSS styles for HTML output - nof1 terminal aesthetic with ampcode features."""
   717→    return """
   718→<style>
   719→@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap");
   720→
   721→:root {
   722→    /* nof1 light theme - clean terminal aesthetic */
   723→    --bg: #ffffff;
   724→    --bg-elevated: #fafafa;
   725→    --bg-subtle: #f5f5f5;
   726→    --fg: #000000;
   727→    --fg-muted: #666666;
   728→    --fg-subtle: #999999;
   729→    --border: #cccccc;
   730→    --border-muted: #e0e0e0;
   731→    --accent: #000000;
   732→    --accent-emphasis: #000000;
   733→    --success: #006600;
   734→    --success-subtle: rgba(0, 102, 0, 0.1);
   735→    --danger: #cc0000;
   736→    --danger-subtle: rgba(204, 0, 0, 0.1);
   737→    --warning: #996600;
   738→    --warning-subtle: rgba(153, 102, 0, 0.1);
   739→}
   740→
   741→[data-theme="dark"] {
   742→    --bg: #000000;
   743→    --bg-elevated: #0a0a0a;
   744→    --bg-subtle: #111111;
   745→    --fg: #ffffff;
   746→    --fg-muted: #888888;
   747→    --fg-subtle: #555555;
   748→    --border: #333333;
   749→    --border-muted: #222222;
   750→    --accent: #ffffff;
   751→    --accent-emphasis: #ffffff;
   752→    --success: #00ff00;
   753→    --success-subtle: rgba(0, 255, 0, 0.1);
   754→    --danger: #ff3333;
   755→    --danger-subtle: rgba(255, 51, 51, 0.1);
   756→    --warning: #ffcc00;
   757→    --warning-subtle: rgba(255, 204, 0, 0.1);
   758→}
   759→
   760→*, *::before, *::after {
   761→    box-sizing: border-box;
   762→    margin: 0;
   763→    padding: 0;
   764→}
   765→
   766→html {
   767→    font-size: 14px;
   768→}
   769→
   770→body {
   771→    font-family: "IBM Plex Mono", monospace;
   772→    background: var(--bg);
   773→    color: var(--fg);
   774→    line-height: 1.6;
   775→    -webkit-font-smoothing: antialiased;
   776→    position: relative;
   777→}
   778→
   779→/* nof1 noise texture overlay */
   780→body::before {
   781→    content: "";
   782→    position: fixed;
   783→    top: 0;
   784→    left: 0;
   785→    width: 100%;
   786→    height: 100%;
   787→    pointer-events: none;
   788→    opacity: 0.03;
   789→    z-index: 1000;
   790→    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
   791→}
   792→
   793→/* Thread Layout */
   794→.thread {
   795→    max-width: 1400px;
   796→    margin: 0 auto;
   797→    padding: 48px 32px;
   798→}
   799→
   800→.thread-header {
   801→    margin-bottom: 48px;
   802→    padding-bottom: 32px;
   803→    border-bottom: 1px solid var(--border);
   804→}
   805→
   806→.thread-title {
   807→    font-size: 1.25rem;
   808→    font-weight: 500;
   809→    color: var(--fg);
   810→    margin-bottom: 16px;
   811→    line-height: 1.4;
   812→    text-transform: uppercase;
   813→    letter-spacing: 0.1em;
   814→}
   815→
   816→.thread-meta {
   817→    display: flex;
   818→    gap: 24px;
   819→    color: var(--fg-muted);
   820→    font-size: 0.75rem;
   821→    text-transform: uppercase;
   822→    letter-spacing: 0.15em;
   823→}
   824→
   825→.meta-item::before {
   826→    content: "/";
   827→    margin-right: 24px;
   828→    color: var(--border);
   829→}
   830→
   831→.meta-item:first-child::before {
   832→    display: none;
   833→}
   834→
   835→/* Two-column layout */
   836→.thread-body {
   837→    display: grid;
   838→    grid-template-columns: 1fr 260px;
   839→    gap: 48px;
   840→}
   841→
   842→@media (max-width: 1000px) {
   843→    .thread-body {
   844→        grid-template-columns: 1fr;
   845→    }
   846→    .thread-sidebar {
   847→        order: -1;
   848→    }
   849→}
   850→
   851→.thread-content {
   852→    min-width: 0;
   853→}
   854→
   855→/* Sidebar - nof1 style */
   856→.thread-sidebar {
   857→    position: sticky;
   858→    top: 32px;
   859→    height: fit-content;
   860→}
   861→
   862→.sidebar-section {
   863→    background: var(--bg);
   864→    border: 1px solid var(--border);
   865→    padding: 20px;
   866→    margin-bottom: 20px;
   867→}
   868→
   869→.sidebar-title {
   870→    font-size: 0.65rem;
   871→    font-weight: 600;
   872→    text-transform: uppercase;
   873→    letter-spacing: 0.2em;
   874→    color: var(--fg-muted);
   875→    margin-bottom: 16px;
   876→    padding-bottom: 8px;
   877→    border-bottom: 1px solid var(--border-muted);
   878→}
   879→
   880→.sidebar-stats {
   881→    display: grid;
   882→    grid-template-columns: auto 1fr;
   883→    gap: 12px 20px;
   884→    font-size: 0.8rem;
   885→}
   886→
   887→.sidebar-stats dt {
   888→    color: var(--fg-muted);
   889→    text-transform: uppercase;
   890→    letter-spacing: 0.1em;
   891→    font-size: 0.7rem;
   892→}
   893→
   894→.sidebar-stats dd {
   895→    text-align: right;
   896→    font-weight: 500;
   897→    font-family: "IBM Plex Mono", monospace;
   898→}
   899→
   900→.sidebar-stats .lines-changed {
   901→    color: var(--success);
   902→}
   903→
   904→.file-list {
   905→    list-style: none;
   906→    font-size: 0.75rem;
   907→}
   908→
   909→.file-list li {
   910→    padding: 8px 0;
   911→    color: var(--fg-muted);
   912→    border-bottom: 1px solid var(--border-muted);
   913→    font-family: "IBM Plex Mono", monospace;
   914→}
   915→
   916→.file-list li:last-child {
   917→    border-bottom: none;
   918→}
   919→
   920→.file-list .more {
   921→    color: var(--fg-subtle);
   922→    font-style: italic;
   923→}
   924→
   925→/* Role separator - visual break between conversation turns */
   926→.role-separator {
   927→    border: none;
   928→    border-top: 1px solid var(--border);
   929→    margin: 32px 0;
   930→    position: relative;
   931→}
   932→
   933→.role-separator::after {
   934→    content: "•";
   935→    position: absolute;
   936→    left: 50%;
   937→    top: -0.5em;
   938→    transform: translateX(-50%);
   939→    background: var(--bg);
   940→    padding: 0 12px;
   941→    color: var(--border);
   942→    font-size: 0.8rem;
   943→}
   944→
   945→/* Messages - hybrid chat layout */
   946→.message {
   947→    display: flex;
   948→    gap: 12px;
   949→    margin-bottom: 16px;
   950→}
   951→
   952→/* User messages - right-aligned bubbles */
   953→.message.user {
   954→    justify-content: flex-end;
   955→    margin-bottom: 20px;
   956→}
   957→
   958→.message.user .message-content {
   959→    max-width: 70%;
   960→    background: var(--fg);
   961→    color: var(--bg);
   962→    border-radius: 16px 16px 4px 16px;
   963→    padding: 12px 16px;
   964→}
   965→
   966→.message.user .message-content code {
   967→    background: rgba(255,255,255,0.2);
   968→    color: var(--bg);
   969→}
   970→
   971→.message.user .text-block {
   972→    margin-bottom: 0;
   973→}
   974→
   975→/* User text - trimmed with expand */
   976→.user-text .user-preview {
   977→    display: block;
   978→}
   979→
   980→.user-text .user-expand {
   981→    margin-top: 8px;
   982→}
   983→
   984→.user-text .user-expand summary {
   985→    cursor: pointer;
   986→    opacity: 0.7;
   987→    font-size: 0.8rem;
   988→}
   989→
   990→.user-text .user-expand[open] .user-preview {
   991→    display: none;
   992→}
   993→
   994→.user-text .user-expand[open] + .user-preview,
   995→.user-text:has(.user-expand[open]) .user-preview {
   996→    display: none;
   997→}
   998→
   999→.user-text .user-full {
  1000→    margin-top: 8px;
  1001→}
  1002→
  1003→/* Assistant messages - left-aligned with border bubble */
  1004→.message.assistant {
  1005→    justify-content: flex-start;
  1006→    margin-bottom: 20px;
  1007→}
  1008→
  1009→.message.assistant .message-content {
  1010→    max-width: 85%;
  1011→    border: 1px solid var(--border);
  1012→    border-radius: 16px 16px 16px 4px;
  1013→    padding: 16px 20px;
  1014→}
  1015→
  1016→.message-content {
  1017→    min-width: 0;
  1018→}
  1019→
  1020→.message-body {
  1021→    /* Content flows naturally */
  1022→}
  1023→
  1024→/* Text content */
  1025→.text-block {
  1026→    margin-bottom: 12px;
  1027→    line-height: 1.5;
  1028→}
  1029→
  1030→.text-block h2, .text-block h3, .text-block h4 {
  1031→    margin: 16px 0 8px 0;
  1032→    font-weight: 600;
  1033→    text-transform: uppercase;
  1034→    letter-spacing: 0.1em;
  1035→}
  1036→
  1037→.text-block code {
  1038→    background: var(--bg-elevated);
  1039→    border: 1px solid var(--border-muted);
  1040→    padding: 2px 8px;
  1041→    font-size: 0.9em;
  1042→}
  1043→
  1044→.text-block strong {
  1045→    font-weight: 600;
  1046→}
  1047→
  1048→.text-block li {
  1049→    margin-left: 24px;
  1050→    margin-bottom: 8px;
  1051→}
  1052→
  1053→.code-block {
  1054→    background: var(--bg-elevated);
  1055→    border: 1px solid var(--border);
  1056→    padding: 12px;
  1057→    overflow-x: auto;
  1058→    margin: 8px 0;
  1059→    font-size: 0.8rem;
  1060→}
  1061→
  1062→/* Thinking block */
  1063→.thinking-block {
  1064→    background: var(--bg);
  1065→    border: 1px solid var(--border);
  1066→    margin: 8px 0;
  1067→}
  1068→
  1069→.thinking-summary {
  1070→    padding: 8px 12px;
  1071→    cursor: pointer;
  1072→    font-weight: 500;
  1073→    color: var(--fg-muted);
  1074→    display: flex;
  1075→    align-items: center;
  1076→    gap: 8px;
  1077→    text-transform: uppercase;
  1078→    letter-spacing: 0.1em;
  1079→    font-size: 0.65rem;
  1080→}
  1081→
  1082→.thinking-summary::before {
  1083→    content: "▶";
  1084→    font-size: 0.6em;
  1085→    transition: transform 0.2s;
  1086→}
  1087→
  1088→.thinking-block[open] .thinking-summary::before {
  1089→    transform: rotate(90deg);
  1090→}
  1091→
  1092→.thinking-content {
  1093→    padding: 0 12px 12px;
  1094→    border-top: 1px solid var(--border);
  1095→    color: var(--fg-muted);
  1096→    font-size: 0.8rem;
  1097→}
  1098→
  1099→/* Tool Pills */
  1100→.tool-pill {
  1101→    background: var(--bg);
  1102→    border: 1px solid var(--border);
  1103→    margin: 10px 0;
  1104→    font-size: 0.8rem;
  1105→}
  1106→
  1107→.tool-pill summary {
  1108→    padding: 10px 14px;
  1109→    cursor: pointer;
  1110→    display: flex;
  1111→    align-items: center;
  1112→    gap: 10px;
  1113→    list-style: none;
  1114→}
  1115→
  1116→.tool-pill summary::-webkit-details-marker {
  1117→    display: none;
  1118→}
  1119→
  1120→.pill-icon {
  1121→    font-size: 0.9em;
  1122→    opacity: 0.7;
  1123→}
  1124→
  1125→.pill-file, .pill-task {
  1126→    font-weight: 500;
  1127→    color: var(--fg);
  1128→}
  1129→
  1130→.pill-query {
  1131→    background: var(--bg-elevated);
  1132→    border: 1px solid var(--border-muted);
  1133→    padding: 4px 8px;
  1134→}
  1135→
  1136→.pill-meta {
  1137→    color: var(--fg-subtle);
  1138→    margin-left: auto;
  1139→    font-size: 0.7rem;
  1140→    text-transform: uppercase;
  1141→    letter-spacing: 0.1em;
  1142→}
  1143→
  1144→.tool-pill .file-content,
  1145→.tool-pill .search-results,
  1146→.tool-pill .task-result {
  1147→    padding: 12px 14px;
  1148→    border-top: 1px solid var(--border);
  1149→    background: var(--bg-elevated);
  1150→    font-size: 0.75rem;
  1151→    max-height: 300px;
  1152→    overflow: auto;
  1153→}
  1154→
  1155→.search-result {
  1156→    padding: 4px 0;
  1157→    border-bottom: 1px solid var(--border-muted);
  1158→}
  1159→
  1160→.search-more, .file-more {
  1161→    padding-top: 8px;
  1162→    color: var(--fg-subtle);
  1163→    font-style: italic;
  1164→}
  1165→
  1166→/* Terminal Block */
  1167→.terminal-block {
  1168→    background: var(--bg);
  1169→    border: 1px solid var(--border);
  1170→    margin: 10px 0;
  1171→    overflow: hidden;
  1172→}
  1173→
  1174→.terminal-header {
  1175→    padding: 10px 14px;
  1176→    display: flex;
  1177→    align-items: center;
  1178→    gap: 10px;
  1179→    border-bottom: 1px solid var(--border);
  1180→    background: var(--bg-elevated);
  1181→}
  1182→
  1183→.terminal-prompt {
  1184→    color: var(--success);
  1185→    font-weight: 600;
  1186→    font-size: 0.8rem;
  1187→}
  1188→
  1189→.terminal-command {
  1190→    color: var(--fg);
  1191→    font-size: 0.8rem;
  1192→}
  1193→
  1194→.terminal-output {
  1195→    padding: 12px 14px;
  1196→    font-size: 0.75rem;
  1197→    background: var(--bg);
  1198→    margin: 0;
  1199→    max-height: 200px;
  1200→    overflow: auto;
  1201→    color: var(--fg-muted);
  1202→}
  1203→
  1204→.terminal-output summary {
  1205→    padding: 8px 12px;
  1206→    cursor: pointer;
  1207→    color: var(--fg-muted);
  1208→    font-size: 0.7rem;
  1209→    text-transform: uppercase;
  1210→    letter-spacing: 0.1em;
  1211→}
  1212→
  1213→/* Diff Block - collapsible */
  1214→.diff-block {
  1215→    background: var(--bg);
  1216→    border: 1px solid var(--border);
  1217→    margin: 10px 0;
  1218→    overflow: hidden;
  1219→}
  1220→
  1221→.diff-block > .diff-header {
  1222→    padding: 10px 14px;
  1223→    display: flex;
  1224→    align-items: center;
  1225→    gap: 10px;
  1226→    background: var(--bg-elevated);
  1227→    cursor: pointer;
  1228→    list-style: none;
  1229→}
  1230→
  1231→.diff-block > .diff-header::-webkit-details-marker {
  1232→    display: none;
  1233→}
  1234→
  1235→.diff-icon {
  1236→    font-size: 0.9em;
  1237→    opacity: 0.7;
  1238→}
  1239→
  1240→.diff-file {
  1241→    font-weight: 500;
  1242→    color: var(--fg);
  1243→    font-size: 0.85rem;
  1244→}
  1245→
  1246→.diff-lines {
  1247→    background: transparent;
  1248→    border: 1px solid var(--success);
  1249→    color: var(--success);
  1250→    padding: 4px 10px;
  1251→    font-size: 0.7rem;
  1252→    font-weight: 600;
  1253→    text-transform: uppercase;
  1254→    letter-spacing: 0.1em;
  1255→}
  1256→
  1257→.diff-success {
  1258→    color: var(--success);
  1259→    margin-left: auto;
  1260→}
  1261→
  1262→.diff-content {
  1263→    padding: 8px 0;
  1264→    font-size: 0.75rem;
  1265→    font-family: "IBM Plex Mono", monospace;
  1266→}
  1267→
  1268→.diff-line {
  1269→    padding: 3px 14px;
  1270→    white-space: pre-wrap;
  1271→    word-break: break-all;
  1272→}
  1273→
  1274→.diff-line.removed {
  1275→    background: var(--danger-subtle);
  1276→    color: var(--danger);
  1277→}
  1278→
  1279→.diff-line.added {
  1280→    background: var(--success-subtle);
  1281→    color: var(--success);
  1282→}
  1283→
  1284→.diff-progress {
  1285→    height: 2px;
  1286→    background: var(--success);
  1287→}
  1288→
  1289→.diff-section {
  1290→    border-top: 1px solid var(--border);
  1291→    padding-top: 12px;
  1292→}
  1293→
  1294→.edit-num {
  1295→    display: block;
  1296→    padding: 8px 16px;
  1297→    font-size: 0.7rem;
  1298→    color: var(--fg-muted);
  1299→    font-weight: 500;
  1300→    text-transform: uppercase;
  1301→    letter-spacing: 0.1em;
  1302→}
  1303→
  1304→/* Todo Block */
  1305→.todo-block {
  1306→    background: var(--bg);
  1307→    border: 1px solid var(--border);
  1308→    margin: 6px 0;
  1309→    padding: 10px 12px;
  1310→}
  1311→
  1312→.todo-header {
  1313→    font-weight: 500;
  1314→    margin-bottom: 8px;
  1315→    display: flex;
  1316→    align-items: center;
  1317→    gap: 8px;
  1318→    text-transform: uppercase;
  1319→    letter-spacing: 0.1em;
  1320→    font-size: 0.65rem;
  1321→    color: var(--fg-muted);
  1322→}
  1323→
  1324→.todo-list {
  1325→    list-style: none;
  1326→}
  1327→
  1328→.todo-item {
  1329→    padding: 4px 0;
  1330→    display: flex;
  1331→    align-items: center;
  1332→    gap: 8px;
  1333→    border-bottom: 1px solid var(--border-muted);
  1334→    font-size: 0.8rem;
  1335→}
  1336→
  1337→.todo-item:last-child {
  1338→    border-bottom: none;
  1339→}
  1340→
  1341→.todo-icon {
  1342→    width: 16px;
  1343→    text-align: center;
  1344→}
  1345→
  1346→.todo-item.completed {
  1347→    color: var(--fg-muted);
  1348→}
  1349→
  1350→.todo-item.completed .todo-icon {
  1351→    color: var(--success);
  1352→}
  1353→
  1354→.todo-item.in_progress .todo-icon {
  1355→    color: var(--warning);
  1356→}
  1357→
  1358→.todo-more {
  1359→    padding-top: 12px;
  1360→    color: var(--fg-subtle);
  1361→    font-style: italic;
  1362→}
  1363→
  1364→/* Special tags */
  1365→.command-message {
  1366→    font-style: italic;
  1367→    color: var(--fg-muted);
  1368→}
  1369→
  1370→.command-name {
  1371→    font-weight: 600;
  1372→    color: var(--fg);
  1373→}
  1374→
  1375→.system-reminder {
  1376→    background: var(--bg);
  1377→    border: 1px solid var(--warning);
  1378→    margin: 16px 0;
  1379→}
  1380→
  1381→.system-reminder summary {
  1382→    padding: 12px 16px;
  1383→    cursor: pointer;
  1384→    color: var(--warning);
  1385→    font-weight: 500;
  1386→    text-transform: uppercase;
  1387→    letter-spacing: 0.1em;
  1388→    font-size: 0.7rem;
  1389→}
  1390→
  1391→.system-reminder > div {
  1392→    padding: 0 16px 16px;
  1393→    font-size: 0.85rem;
  1394→}
  1395→
  1396→/* Container */
  1397→.container {
  1398→    max-width: 1400px;
  1399→    margin: 0 auto;
  1400→}
  1401→
  1402→/* Theme toggle - nof1 style */
  1403→.theme-toggle {
  1404→    position: fixed;
  1405→    top: 20px;
  1406→    right: 20px;
  1407→    z-index: 100;
  1408→    background: var(--bg);
  1409→    border: 1px solid var(--border);
  1410→    color: var(--fg);
  1411→    padding: 10px 16px;
  1412→    font-family: "IBM Plex Mono", monospace;
  1413→    font-size: 0.65rem;
  1414→    cursor: pointer;
  1415→    text-transform: uppercase;
  1416→    letter-spacing: 0.2em;
  1417→}
  1418→
  1419→.theme-toggle:hover {
  1420→    background: var(--fg);
  1421→    color: var(--bg);
  1422→}
  1423→
  1424→/* Back to top */
  1425→.back-to-top {
  1426→    text-align: center;
  1427→    padding: 48px 0;
  1428→    border-top: 1px solid var(--border);
  1429→    margin-top: 48px;
  1430→}
  1431→
  1432→.back-to-top a {
  1433→    color: var(--fg-muted);
  1434→    text-decoration: none;
  1435→    font-size: 0.7rem;
  1436→    text-transform: uppercase;
  1437→    letter-spacing: 0.2em;
  1438→}
  1439→
  1440→.back-to-top a:hover {
  1441→    color: var(--fg);
  1442→}
  1443→
  1444→/* Conversation nav */
  1445→.conversation-nav {
  1446→    background: var(--bg);
  1447→    border: 1px solid var(--border);
  1448→    padding: 24px;
  1449→    margin-bottom: 48px;
  1450→}
  1451→
  1452→.conversation-nav h2 {
  1453→    font-size: 0.7rem;
  1454→    font-weight: 600;
  1455→    text-transform: uppercase;
  1456→    letter-spacing: 0.2em;
  1457→    color: var(--fg-muted);
  1458→    margin-bottom: 20px;
  1459→    padding-bottom: 12px;
  1460→    border-bottom: 1px solid var(--border-muted);
  1461→}
  1462→
  1463→.conversation-toc {
  1464→    list-style: none;
  1465→}
  1466→
  1467→.conversation-toc li {
  1468→    margin-bottom: 8px;
  1469→}
  1470→
  1471→.conversation-toc a {
  1472→    display: block;
  1473→    padding: 12px 16px;
  1474→    background: var(--bg);
  1475→    border: 1px solid var(--border);
  1476→    color: var(--fg);
  1477→    text-decoration: none;
  1478→    font-size: 0.8rem;
  1479→}
  1480→
  1481→.conversation-toc a:hover {
  1482→    background: var(--fg);
  1483→    color: var(--bg);
  1484→}
  1485→
  1486→/* Scrollbar - minimal */
  1487→::-webkit-scrollbar {
  1488→    width: 6px;
  1489→    height: 6px;
  1490→}
  1491→
  1492→::-webkit-scrollbar-track {
  1493→    background: var(--bg);
  1494→}
  1495→
  1496→::-webkit-scrollbar-thumb {
  1497→    background: var(--border);
  1498→}
  1499→
  1500→::-webkit-scrollbar-thumb:hover {
  1501→    background: var(--fg-subtle);
  1502→}
  1503→
  1504→/* Print */
  1505→@media print {
  1506→    .theme-toggle, .thread-sidebar {
  1507→        display: none;
  1508→    }
  1509→    .thread-body {
  1510→        grid-template-columns: 1fr;
  1511→    }
  1512→    body::before {
  1513→        display: none;
  1514→    }
  1515→}
  1516→</style>
  1517→"""
  1518→

1→"""Parser for Claude Code transcript JSONL files."""
     2→
     3→import json
     4→from pathlib import Path
     5→from typing import Any
     6→
     7→
     8→class TranscriptParser:
     9→    """Parse Claude Code transcript JSONL files."""
    10→
    11→    def __init__(self, file_path: Path):
    12→        """Initialize parser with a transcript file path."""
    13→        self.file_path = file_path
    14→        self.messages: list[dict[str, Any]] = []
    15→        self._parse()
    16→
    17→    def _parse(self):
    18→        """Parse the JSONL file."""
    19→        with open(self.file_path, encoding="utf-8") as f:
    20→            for line in f:
    21→                line = line.strip()
    22→                if line:
    23→                    try:
    24→                        data = json.loads(line)
    25→                        self.messages.append(data)
    26→                    except json.JSONDecodeError as e:
    27→                        print(f"Warning: Failed to parse line in {self.file_path}: {e}")
    28→
    29→    def get_conversation_info(self) -> dict[str, Any]:
    30→        """Get basic information about the conversation."""
    31→        if not self.messages:
    32→            return {}
    33→
    34→        # Find first and last timestamps
    35→        timestamps = []
    36→        for msg in self.messages:
    37→            if "timestamp" in msg:
    38→                timestamps.append(msg["timestamp"])
    39→
    40→        # Count actual messages (not meta messages)
    41→        actual_messages = [m for m in self.messages if not m.get("isMeta", False)]
    42→
    43→        info = {
    44→            "file_name": self.file_path.name,
    45→            "message_count": len(actual_messages),
    46→            "total_entries": len(self.messages),
    47→            "start_time": min(timestamps) if timestamps else None,
    48→            "end_time": max(timestamps) if timestamps else None,
    49→        }
    50→
    51→        # Try to get conversation ID and session ID
    52→        if self.file_path.stem:
    53→            info["conversation_id"] = self.file_path.stem
    54→
    55→        # Try to get session ID from first message
    56→        if self.messages and "sessionId" in self.messages[0]:
    57→            info["session_id"] = self.messages[0]["sessionId"]
    58→
    59→        return info
    60→
    61→    def get_messages(self) -> list[dict[str, Any]]:
    62→        """Get all messages from the transcript."""
    63→        return self.messages
    64→
    65→    def get_summary(self) -> str | None:
    66→        """Try to extract a summary or title from the conversation."""
    67→        # Look for system messages or first user message
    68→        for msg in self.messages:
    69→            if msg.get("type") == "conversation_title":
    70→                return msg.get("content", "")
    71→            elif msg.get("role") == "user" and msg.get("content"):
    72→                # Return first line of first user message as summary
    73→                content = msg["content"]
    74→                if isinstance(content, str):
    75→                    return content.split("\n")[0][:100] + ("..." if len(content) > 100 else "")
    76→        return None
    77→

1→"""Claude Notes - Transform Claude Code transcripts to readable formats."""
     2→
     3→__version__ = "0.1.6"
     4→