From 069010660dbe6dfecac382f22e6405d46fb08e2f Mon Sep 17 00:00:00 2001
From: gilesb <giles.bradshaw@sigyl.com>
Date: Wed, 7 Jan 2026 21:52:52 +0000
Subject: [PATCH] Show input content as thumbnails in activity/asset detail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display actual images/videos for inputs (not just hash links)
- Video auto-plays if detected, falls back to image
- Consistent display on both activity and asset detail pages

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 server.py | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/server.py b/server.py
index 1075c3f..70c8c5a 100644
--- a/server.py
+++ b/server.py
@@ -716,14 +716,27 @@ async def ui_activity_detail(activity_index: int, request: Request):
             else:
                 effect_url = f"{EFFECTS_REPO_URL}/src/branch/main/{recipe}"
 
-        # Build inputs display
+        # Build inputs display - show actual content as thumbnails
         inputs_html = ""
         for inp in inputs:
             inp_hash = inp.get("content_hash", "") if isinstance(inp, dict) else inp
             if inp_hash:
                 inputs_html += f'''
-                <a href="{l1_server}/cache/{inp_hash}" target="_blank"
-                   class="inline-block px-2 py-1 bg-dark-500 rounded text-blue-400 hover:text-blue-300 font-mono text-xs mr-2 mb-2">{inp_hash[:20]}...</a>
+                <div class="bg-dark-500 rounded-lg p-3 mb-3">
+                    <div class="flex justify-center mb-2">
+                        <video src="{l1_server}/cache/{inp_hash}/mp4"
+                               class="max-h-40 rounded hidden" muted loop playsinline
+                               onloadeddata="this.classList.remove('hidden'); this.nextElementSibling.classList.add('hidden'); this.play();">
+                        </video>
+                        <img src="{l1_server}/cache/{inp_hash}" alt="Input"
+                             class="max-h-40 rounded">
+                    </div>
+                    <div class="text-center">
+                        <code class="text-xs text-gray-400">{inp_hash[:16]}...</code>
+                        <a href="{l1_server}/cache/{inp_hash}" target="_blank"
+                           class="text-blue-400 hover:text-blue-300 text-xs ml-2">view</a>
+                    </div>
+                </div>
                 '''
 
         # Infrastructure display
@@ -989,15 +1002,26 @@ async def ui_asset_detail(name: str, request: Request):
             else:
                 effect_url = f"{EFFECTS_REPO_URL}/src/branch/main/{recipe}"
 
-        # Build inputs display
+        # Build inputs display - show actual content as thumbnails
         inputs_html = ""
         for inp in inputs:
             inp_hash = inp.get("content_hash", "") if isinstance(inp, dict) else inp
             if inp_hash:
                 inputs_html += f'''
-                <div class="flex items-center gap-2 mb-2">
-                    <a href="{l1_server}/cache/{inp_hash}" target="_blank"
-                       class="text-blue-400 hover:text-blue-300 font-mono text-xs">{inp_hash[:24]}...</a>
+                <div class="bg-dark-500 rounded-lg p-3 mb-3">
+                    <div class="flex justify-center mb-2">
+                        <video src="{l1_server}/cache/{inp_hash}/mp4"
+                               class="max-h-40 rounded hidden" muted loop playsinline
+                               onloadeddata="this.classList.remove('hidden'); this.nextElementSibling.classList.add('hidden'); this.play();">
+                        </video>
+                        <img src="{l1_server}/cache/{inp_hash}" alt="Input"
+                             class="max-h-40 rounded">
+                    </div>
+                    <div class="text-center">
+                        <code class="text-xs text-gray-400">{inp_hash[:16]}...</code>
+                        <a href="{l1_server}/cache/{inp_hash}" target="_blank"
+                           class="text-blue-400 hover:text-blue-300 text-xs ml-2">view</a>
+                    </div>
                 </div>
                 '''