Add support for rendering images with base64 data URLs

When a user message includes an image, it now renders as an actual
<img> tag with a data: URL instead of showing the raw JSON structure.
Images are displayed with max-width: 100% for proper sizing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: simonw

src/claude_code_transcripts/__init__.py

@@ -651,7 +651,12 @@ def render_content_block(block):
     if not isinstance(block, dict):
         return f"<p>{html.escape(str(block))}</p>"
     block_type = block.get("type", "")
-    if block_type == "thinking":
+    if block_type == "image":
+        source = block.get("source", {})
+        media_type = source.get("media_type", "image/png")
+        data = source.get("data", "")
+        return _macros.image_block(media_type, data)
+    elif block_type == "thinking":
         content_html = render_markdown_text(block.get("thinking", ""))
         return _macros.thinking(content_html)
     elif block_type == "text":

src/claude_code_transcripts/templates/macros.html

@@ -131,6 +131,11 @@
 <div class="user-content">{{ content_html|safe }}</div>
 {%- endmacro %}
 
+{# Image block with base64 data URL #}
+{% macro image_block(media_type, data) %}
+<div class="image-block"><img src="data:{{ media_type }};base64,{{ data }}" style="max-width: 100%"></div>
+{%- endmacro %}
+
 {# Commit card (in tool results) #}
 {% macro commit_card(commit_hash, commit_msg, github_repo) %}
 {%- if github_repo -%}

tests/__snapshots__/test_generate_html/TestRenderContentBlock.test_image_block.html

@@ -0,0 +1,2 @@
+
+<div class="image-block"><img src="data:image/gif;base64,R0lGODlhyADIAIAAAAAAAAAAACwAAAAAyADIAAAIAgQBADs=" style="max-width: 100%"></div>

tests/test_generate_html.py

@@ -182,6 +182,47 @@ def test_render_bash_tool(self, snapshot_html):
 class TestRenderContentBlock:
     """Tests for render_content_block function."""
 
+    def test_image_block(self, snapshot_html):
+        """Test image block rendering with base64 data URL."""
+        # 200x200 black GIF - minimal valid GIF with black pixels
+        # Generated with: from PIL import Image; img = Image.new('RGB', (200, 200), (0, 0, 0)); img.save('black.gif')
+        import base64
+        import io
+
+        # Create a minimal 200x200 black GIF using raw bytes
+        # GIF89a header + logical screen descriptor + global color table + image data
+        gif_data = (
+            b"GIF89a"  # Header
+            b"\xc8\x00\xc8\x00"  # Width 200, Height 200
+            b"\x80"  # Global color table flag (1 color: 2^(0+1)=2 colors)
+            b"\x00"  # Background color index
+            b"\x00"  # Pixel aspect ratio
+            b"\x00\x00\x00"  # Color 0: black
+            b"\x00\x00\x00"  # Color 1: black (padding)
+            b","  # Image separator
+            b"\x00\x00\x00\x00"  # Left, Top
+            b"\xc8\x00\xc8\x00"  # Width 200, Height 200
+            b"\x00"  # No local color table
+            b"\x08"  # LZW minimum code size
+            b"\x02\x04\x01\x00"  # Compressed data (minimal)
+            b";"  # GIF trailer
+        )
+        black_gif_base64 = base64.b64encode(gif_data).decode("ascii")
+
+        block = {
+            "type": "image",
+            "source": {
+                "type": "base64",
+                "media_type": "image/gif",
+                "data": black_gif_base64,
+            },
+        }
+        result = render_content_block(block)
+        # The result should contain an img tag with data URL
+        assert 'src="data:image/gif;base64,' in result
+        assert "max-width: 100%" in result
+        assert result == snapshot_html
+
     def test_thinking_block(self, snapshot_html):
         """Test thinking block rendering."""
         block = {