Render images in tool_result content arrays

Also disables truncation for tool results containing images.

https://gisthost.github.io/?f48425d2e819740d770a52a4e05199a3/index.html

Closes #53

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

Author: simonw

src/claude_code_transcripts/__init__.py

@@ -708,6 +708,7 @@ def render_content_block(block):
     elif block_type == "tool_result":
         content = block.get("content", "")
         is_error = block.get("is_error", False)
+        has_images = False
 
         # Check for git commits and render with styled cards
         if isinstance(content, str):
@@ -737,11 +738,35 @@ def render_content_block(block):
                 content_html = "".join(parts)
             else:
                 content_html = f"<pre>{html.escape(content)}</pre>"
-        elif isinstance(content, list) or is_json_like(content):
+        elif isinstance(content, list):
+            # Handle tool result content that contains multiple blocks (text, images, etc.)
+            parts = []
+            for item in content:
+                if isinstance(item, dict):
+                    item_type = item.get("type", "")
+                    if item_type == "text":
+                        text = item.get("text", "")
+                        if text:
+                            parts.append(f"<pre>{html.escape(text)}</pre>")
+                    elif item_type == "image":
+                        source = item.get("source", {})
+                        media_type = source.get("media_type", "image/png")
+                        data = source.get("data", "")
+                        if data:
+                            parts.append(_macros.image_block(media_type, data))
+                            has_images = True
+                    else:
+                        # Unknown type, render as JSON
+                        parts.append(format_json(item))
+                else:
+                    # Non-dict item, escape as text
+                    parts.append(f"<pre>{html.escape(str(item))}</pre>")
+            content_html = "".join(parts) if parts else format_json(content)
+        elif is_json_like(content):
             content_html = format_json(content)
         else:
             content_html = format_json(content)
-        return _macros.tool_result(content_html, is_error)
+        return _macros.tool_result(content_html, is_error, has_images)
     else:
         return format_json(block)
 

src/claude_code_transcripts/templates/macros.html

@@ -111,9 +111,14 @@
 {%- endmacro %}
 
 {# Tool result - content_html is pre-rendered so needs |safe #}
-{% macro tool_result(content_html, is_error) %}
+{# has_images=True disables truncation so images are always visible #}
+{% macro tool_result(content_html, is_error, has_images=False) %}
 {%- set error_class = ' tool-error' if is_error else '' -%}
+{%- if has_images -%}
+<div class="tool-result{{ error_class }}">{{ content_html|safe }}</div>
+{%- else -%}
 <div class="tool-result{{ error_class }}"><div class="truncatable"><div class="truncatable-content">{{ content_html|safe }}</div><button class="expand-btn">Show more</button></div></div>
+{%- endif -%}
 {%- endmacro %}
 
 {# Thinking block - content_html is pre-rendered markdown so needs |safe #}

tests/__snapshots__/test_generate_html/TestRenderContentBlock.test_tool_result_with_image.html

@@ -0,0 +1,5 @@
+<div class="tool-result"><pre>Successfully captured screenshot (807x782, jpeg) - ID: ss_123</pre><pre>
+
+Tab Context:
+- Executed on tabId: 12345</pre>
+<div class="image-block"><img src="data:image/gif;base64,R0lGODlhyADIAIAAAAAAAAAAACwAAAAAyADIAAAIAgQBADs=" style="max-width: 100%"></div></div>

tests/test_generate_html.py

@@ -302,6 +302,70 @@ def test_tool_result_with_commit(self, snapshot_html):
         finally:
             claude_code_transcripts._github_repo = old_repo
 
+    def test_tool_result_with_image(self, snapshot_html):
+        """Test tool result containing image blocks in content array.
+
+        This tests the case where a tool (like a screenshot tool) returns
+        both text and image content in the same tool_result.
+        """
+        import base64
+
+        # Create a minimal GIF image
+        gif_data = (
+            b"GIF89a"  # Header
+            b"\xc8\x00\xc8\x00"  # Width 200, Height 200
+            b"\x80"  # Global color table flag
+            b"\x00"  # Background color index
+            b"\x00"  # Pixel aspect ratio
+            b"\x00\x00\x00"  # Color 0: black
+            b"\x00\x00\x00"  # Color 1: black
+            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
+            b";"  # GIF trailer
+        )
+        gif_base64 = base64.b64encode(gif_data).decode("ascii")
+
+        block = {
+            "type": "tool_result",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "Successfully captured screenshot (807x782, jpeg) - ID: ss_123",
+                },
+                {
+                    "type": "text",
+                    "text": "\n\nTab Context:\n- Executed on tabId: 12345",
+                },
+                {
+                    "type": "image",
+                    "source": {
+                        "type": "base64",
+                        "media_type": "image/gif",
+                        "data": gif_base64,
+                    },
+                },
+            ],
+            "is_error": False,
+        }
+        result = render_content_block(block)
+
+        # The result should contain the text content
+        assert "Successfully captured screenshot" in result
+        assert "Tab Context" in result
+
+        # The result should contain an img tag with data URL for the image
+        assert 'src="data:image/gif;base64,' in result
+        assert "max-width: 100%" in result
+
+        # Tool results with images should NOT be truncatable
+        assert "truncatable" not in result
+
+        assert result == snapshot_html
+
 
 class TestAnalyzeConversation:
     """Tests for conversation analysis."""