From 4974b7cf77c9d8d0c453985507efa5aee0110a56 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 27 Jun 2026 23:19:58 -0400
Subject: [PATCH] feat(tag-eval): bigger, clickable example thumbnails
 (label-review queue)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 56px example thumbs were too small to judge a label (operator-flagged).
Bump to 120px and wrap each in a link to /explore/<id> (new tab) so the
"head doubts / would suggest" galleries double as a review-and-fix queue —
click a doubted positive, land on it in Explore, correct the tag, re-run.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/components/settings/TagEvalCard.vue   | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/settings/TagEvalCard.vue b/frontend/src/components/settings/TagEvalCard.vue
index 70f3735..ca218cc 100644
--- a/frontend/src/components/settings/TagEvalCard.vue
+++ b/frontend/src/components/settings/TagEvalCard.vue
@@ -87,21 +87,27 @@
 
           <div v-if="c.examples" class="fc-ex">
             <div class="fc-ex__row">
-              <div class="fc-muted text-caption mb-1">Head would suggest (untagged, high score)</div>
+              <div class="fc-muted text-caption mb-1">Head would suggest (untagged, high score) — click to open in Explore</div>
               <div class="fc-ex__thumbs">
-                <img
+                <a
                   v-for="it in c.examples.head_would_suggest" :key="`s${it.id}`"
-                  :src="it.thumbnail_url" class="fc-ex__thumb" loading="lazy"
-                />
+                  class="fc-ex__thumb" :href="`/explore/${it.id}`" target="_blank"
+                  rel="noopener" :title="`#${it.id} — open in Explore`"
+                >
+                  <img :src="it.thumbnail_url" loading="lazy" />
+                </a>
               </div>
             </div>
             <div class="fc-ex__row">
-              <div class="fc-muted text-caption mb-1">Head doubts these (your positives, low score)</div>
+              <div class="fc-muted text-caption mb-1">Head doubts these (your positives, low score) — click to open in Explore</div>
               <div class="fc-ex__thumbs">
-                <img
+                <a
                   v-for="it in c.examples.head_doubts_positive" :key="`d${it.id}`"
-                  :src="it.thumbnail_url" class="fc-ex__thumb" loading="lazy"
-                />
+                  class="fc-ex__thumb" :href="`/explore/${it.id}`" target="_blank"
+                  rel="noopener" :title="`#${it.id} — open in Explore`"
+                >
+                  <img :src="it.thumbnail_url" loading="lazy" />
+                </a>
               </div>
             </div>
           </div>
@@ -202,10 +208,13 @@ function formatTime(iso) {
 .fc-down { color: rgb(var(--v-theme-error)); }
 .fc-curve { margin-bottom: 8px; }
 .fc-curve__pt { margin-left: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
-.fc-ex__row { margin-top: 6px; }
-.fc-ex__thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
+.fc-ex__row { margin-top: 8px; }
+.fc-ex__thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
 .fc-ex__thumb {
-  width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
-  background: rgb(var(--v-theme-surface-light));
+  display: block; width: 120px; height: 120px; border-radius: 6px;
+  overflow: hidden; background: rgb(var(--v-theme-surface-light));
+  outline: 1px solid transparent; transition: outline-color 0.12s;
 }
+.fc-ex__thumb:hover { outline-color: rgb(var(--v-theme-accent)); }
+.fc-ex__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
 </style>