From 038a0189a466162824e2c2154a46ea0c53ce7a81 Mon Sep 17 00:00:00 2001
From: JohnBaumb <80135794+JohnBaumb@users.noreply.github.com>
Date: Thu, 23 Apr 2026 11:39:26 -0700
Subject: [PATCH] fix: add placeholder thumbnail for history items without
 images

---
 webui/static/pages-extra.js |  6 +++---
 webui/static/style.css      | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
index c132875f..8bea349e 100644
--- a/webui/static/pages-extra.js
+++ b/webui/static/pages-extra.js
@@ -2881,10 +2881,10 @@ function _adlRenderBatchHistory() {
         const dotTip = dotSource ? `Source: ${dotSource}` : 'Unknown source';
         const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)" title="${dotTip}"></span>`;
 
-        // Optional thumbnail
+        // Thumbnail with placeholder fallback
         const thumb = h.thumb_url
-            ? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy">`
-            : '';
+            ? `<img src="${_adlEsc(h.thumb_url)}" class="adl-batch-history-thumb" loading="lazy" onerror="this.classList.add('adl-batch-history-thumb-placeholder');this.removeAttribute('src')">`
+            : `<span class="adl-batch-history-thumb adl-batch-history-thumb-placeholder"></span>`;
 
         // Server push status indicator
         let pushBadge = '';
diff --git a/webui/static/style.css b/webui/static/style.css
index b8f68419..5c33bf53 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -57200,6 +57200,20 @@ body.reduce-effects *::after {
     flex-shrink: 0;
 }
 
+.adl-batch-history-thumb-placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.adl-batch-history-thumb-placeholder::after {
+    content: '♫';
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.2);
+}
+
 .adl-batch-history-content {
     flex: 1;
     min-width: 0;