feat(gallery): visual 'more like this' UI (Phase 3 frontend)

Modal 'Related' strip (RelatedStrip.vue) — top-12 similar thumbs, fetched on
its own DEFERRED, single-flighted path (200ms after the modal is up) so it
never blocks or slows the modal; collapses silently on empty/slow/error and is
hidden when the image has no embedding (has_embedding flag). 'See all similar'
closes the modal and navigates the gallery to ?similar_to=<id>.

Gallery store: similar_to filter field + loadSimilar() (ranked, hasMore=false,
no timeline); applyFilterFromQuery routes similar-mode to /similar with the
scope filters composed; cloneFilter/filterToQuery carry similar_to. Filter bar:
clearable 'Similar to #id' chip, sort hidden in similar-mode; timeline sidebar
hidden too.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/gallery/GalleryFilterBar.vue

@@ -38,6 +38,12 @@
         prepend-icon="mdi-account"
         @click:close="clearArtist"
       >{{ store.artistLabel || `Artist #${store.filter.artist_id}` }}</v-chip>
+      <v-chip
+        v-if="store.filter.similar_to"
+        size="small" closable color="accent" variant="tonal"
+        prepend-icon="mdi-image-multiple"
+        @click:close="clearSimilar"
+      >Similar to #{{ store.filter.similar_to }}</v-chip>
     </div>
 
     <v-spacer />
@@ -52,7 +58,9 @@
       <v-btn value="video" size="small">Videos</v-btn>
     </v-btn-toggle>
 
+    <!-- Sort is meaningless in similar-mode (results are distance-ranked). -->
     <v-select
+      v-if="!store.filter.similar_to"
       :model-value="store.filter.sort"
       :items="SORTS"
       density="compact" hide-details variant="outlined"
@@ -114,6 +122,7 @@ const hasActiveFilters = computed(() =>
   store.filter.artist_id != null ||
   store.filter.media_type != null ||
   store.filter.sort !== 'newest' ||
+  store.filter.similar_to != null ||
   hasRefineFilters.value
 )
 
@@ -190,6 +199,7 @@ function clearArtist() {
   store.noteArtistLabel(null)
   pushFilter((n) => { n.artist_id = null })
 }
+function clearSimilar() { pushFilter((n) => { n.similar_to = null }) }
 function setMedia(m) { pushFilter((n) => { n.media_type = m }) }
 function setSort(s) { pushFilter((n) => { n.sort = s }) }
 function clearAll() { router.push({ name: 'gallery', query: {} }) }

frontend/src/components/modal/ImageViewer.vue

@@ -51,6 +51,9 @@
         <aside v-if="modal.current" class="fc-viewer__side">
           <ProvenancePanel />
           <TagPanel />
+          <!-- Non-blocking: fetches its own similar set after the modal is up;
+               collapses silently if empty/slow/failed (see RelatedStrip). -->
+          <RelatedStrip />
         </aside>
       </div>
     </div>
@@ -65,6 +68,7 @@ import ImageCanvas from './ImageCanvas.vue'
 import VideoCanvas from './VideoCanvas.vue'
 import TagPanel from './TagPanel.vue'
 import ProvenancePanel from './ProvenancePanel.vue'
+import RelatedStrip from './RelatedStrip.vue'
 
 const emit = defineEmits(['close'])
 

frontend/src/components/modal/RelatedStrip.vue

@@ -0,0 +1,133 @@
+<template>
+  <!-- Collapses entirely unless the source has an embedding AND we're loading
+       or have results — so a slow/empty/failed fetch leaves no trace and never
+       affects the modal. -->
+  <div v-if="show" class="fc-related">
+    <div class="fc-related__head">
+      <span class="fc-related__title">Related</span>
+      <v-btn
+        size="x-small" variant="text" color="accent"
+        :disabled="loading || !results.length"
+        @click="seeAll"
+      >See all similar</v-btn>
+    </div>
+    <div class="fc-related__row">
+      <template v-if="loading">
+        <div v-for="n in 6" :key="n" class="fc-related__skel" />
+      </template>
+      <button
+        v-for="img in results" :key="img.id"
+        class="fc-related__item" type="button"
+        @click="openImage(img.id)"
+      >
+        <img :src="img.thumbnail_url" :alt="`image ${img.id}`" loading="lazy" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useApi } from '../../composables/useApi.js'
+import { useModalStore } from '../../stores/modal.js'
+
+// Deferred so the modal's main image gets network/decode priority — the strip
+// is a nice-to-have and must never block or slow the modal load.
+const DEFER_MS = 200
+const STRIP_LIMIT = 12
+
+const api = useApi()
+const router = useRouter()
+const modal = useModalStore()
+
+const results = ref([])
+const loading = ref(false)
+
+const hasEmbedding = computed(() => modal.current?.has_embedding === true)
+const show = computed(() => hasEmbedding.value && (loading.value || results.value.length > 0))
+
+let seq = 0
+let timer = null
+
+async function fetchSimilar(id) {
+  const mine = ++seq
+  loading.value = true
+  results.value = []
+  try {
+    const body = await api.get('/api/gallery/similar', {
+      params: { similar_to: id, limit: STRIP_LIMIT },
+    })
+    if (mine !== seq) return
+    results.value = body.images || []
+  } catch {
+    if (mine === seq) results.value = []  // quietly collapse on error
+  } finally {
+    if (mine === seq) loading.value = false
+  }
+}
+
+// Re-fetch whenever the modal lands on a new embedded image. modal.current is
+// null while the next image loads, so this also clears the strip during
+// prev/next nav and repopulates once the new payload arrives.
+watch(
+  () => (hasEmbedding.value ? modal.current?.id : null),
+  (id) => {
+    if (timer) { clearTimeout(timer); timer = null }
+    seq++              // cancel any in-flight fetch
+    results.value = []
+    loading.value = false
+    if (!id) return
+    timer = setTimeout(() => fetchSimilar(id), DEFER_MS)
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => { if (timer) clearTimeout(timer) })
+
+function openImage(id) {
+  modal.open(id)
+}
+
+function seeAll() {
+  const id = modal.current?.id
+  if (!id) return
+  modal.close()
+  router.push({ name: 'gallery', query: { similar_to: String(id) } })
+}
+</script>
+
+<style scoped>
+.fc-related {
+  padding: 12px;
+  border-top: 1px solid rgb(var(--v-theme-surface-light));
+}
+.fc-related__head {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 8px;
+}
+.fc-related__title {
+  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+.fc-related__row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+.fc-related__item {
+  display: block; padding: 0; border: 0; background: none;
+  cursor: pointer; border-radius: 4px; overflow: hidden;
+  aspect-ratio: 1; width: 100%;
+}
+.fc-related__item img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+  background: rgb(var(--v-theme-surface-light));
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+.fc-related__item:hover img { transform: scale(1.05); filter: brightness(1.1); }
+.fc-related__skel {
+  aspect-ratio: 1; border-radius: 4px;
+  background: rgb(var(--v-theme-surface-light));
+  opacity: 0.5;
+}
+</style>

frontend/src/stores/gallery.js

@@ -27,6 +27,9 @@ export const useGalleryStore = defineStore('gallery', () => {
     // Phase-2 faceted refine params.
     platform: null, untagged: false, no_artist: false,
     date_from: null, date_to: null,
+    // Phase-3 visual similarity: when set, the gallery is in "similar mode" —
+    // ranked by cosine distance to this image, bounded top-N, no cursor.
+    similar_to: null,
   })
 
   // Live facet counts for the refine panel; fetched on-demand (panel open +
@@ -84,6 +87,39 @@ export const useGalleryStore = defineStore('gallery', () => {
     }
   }
 
+  // Visual "more like this": ranked top-N by cosine distance, scope filters
+  // composed (AND). No cursor / no timeline — bounded result set.
+  async function loadSimilar() {
+    inflight.cancel()
+    images.value = []
+    dateGroups.value = []
+    nextCursor.value = null
+    timelineBuckets.value = []
+    loading.value = true
+    error.value = null
+    const t = inflight.claim()
+    try {
+      const f = filter.value
+      const params = { similar_to: f.similar_to, limit: 100 }
+      if (f.tag_ids.length) params.tag_id = f.tag_ids.join(',')
+      if (f.artist_id) params.artist_id = f.artist_id
+      if (f.media_type) params.media = f.media_type
+      if (f.platform) params.platform = f.platform
+      if (f.untagged) params.untagged = '1'
+      if (f.no_artist) params.no_artist = '1'
+      if (f.date_from) params.date_from = f.date_from
+      if (f.date_to) params.date_to = f.date_to
+      const body = await api.get('/api/gallery/similar', { params })
+      if (!t.isCurrent()) return
+      images.value = body.images
+      // ranked + bounded → no next page (nextCursor stays null → hasMore false)
+    } catch (e) {
+      error.value = e.message
+    } finally {
+      if (t.isCurrent()) loading.value = false
+    }
+  }
+
   async function jumpTo(year, month) {
     // Rapid timeline-jump clicks need the same race guard as
     // loadMore — first jump's late body could clobber the second
@@ -150,9 +186,15 @@ export const useGalleryStore = defineStore('gallery', () => {
       no_artist: _truthy(q.no_artist),
       date_from: _parseDate(q.date_from),
       date_to: _parseDate(q.date_to),
+      similar_to: _toId(q.similar_to),
+    }
+    if (filter.value.similar_to) {
+      // Similar mode: ranked, no timeline scroll.
+      await loadSimilar()
+    } else {
+      await loadInitial()
+      await loadTimeline()
     }
-    await loadInitial()
-    await loadTimeline()
     _resolveLabels()
   }
 
@@ -200,7 +242,7 @@ export const useGalleryStore = defineStore('gallery', () => {
     images, dateGroups, hasMore, isEmpty, loading, error,
     filter, tagLabels, artistLabel, timelineBuckets, timelineLoading,
     facets, facetsLoading,
-    loadInitial, loadMore, loadTimeline, jumpTo, loadFacets,
+    loadInitial, loadMore, loadTimeline, jumpTo, loadFacets, loadSimilar,
     applyFilterFromQuery, noteTagLabel, noteArtistLabel,
   }
 })
@@ -213,6 +255,7 @@ export function cloneFilter(f) {
     tag_ids: [...f.tag_ids], artist_id: f.artist_id, media_type: f.media_type,
     sort: f.sort, platform: f.platform, untagged: f.untagged,
     no_artist: f.no_artist, date_from: f.date_from, date_to: f.date_to,
+    similar_to: f.similar_to,
   }
 }
 
@@ -227,6 +270,7 @@ export function filterToQuery(f) {
   if (f.no_artist) q.no_artist = '1'
   if (f.date_from) q.date_from = f.date_from
   if (f.date_to) q.date_to = f.date_to
+  if (f.similar_to) q.similar_to = String(f.similar_to)
   return q
 }
 

frontend/src/views/GalleryView.vue

@@ -16,7 +16,10 @@
         <EmptyState v-if="store.isEmpty" />
         <GalleryGrid v-else @open="openImage" />
       </div>
-      <TimelineSidebar v-if="store.images.length > 0" class="fc-gallery-layout__sidebar" />
+      <TimelineSidebar
+        v-if="store.images.length > 0 && store.filter.similar_to == null"
+        class="fc-gallery-layout__sidebar"
+      />
     </div>
 
     <BulkEditorPanel />

frontend/test/components/galleryRelatedStrip.spec.js

@@ -0,0 +1,73 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+
+import RelatedStrip from '../../src/components/modal/RelatedStrip.vue'
+import { useModalStore } from '../../src/stores/modal.js'
+import { freshPinia, mountComponent } from '../support/mountComponent.js'
+
+function stubFetch(handler) {
+  globalThis.fetch = vi.fn(async (url) => {
+    const { status, body } = handler(url)
+    return {
+      ok: status >= 200 && status < 300,
+      status, statusText: String(status),
+      text: async () => JSON.stringify(body),
+    }
+  })
+}
+
+describe('RelatedStrip (modal "more like this")', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => { vi.useRealTimers(); vi.restoreAllMocks() })
+
+  it('stays hidden and never fetches when the image has no embedding', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: false }
+    const fetchSpy = vi.fn()
+    globalThis.fetch = fetchSpy
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(500)
+    expect(fetchSpy).not.toHaveBeenCalled()
+    expect(w.find('.fc-related').exists()).toBe(false)
+  })
+
+  it('deferred-fetches and renders similar thumbs for an embedded image', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: true }
+    stubFetch(() => ({
+      status: 200,
+      body: { images: [{ id: 2, thumbnail_url: '/t2' }, { id: 3, thumbnail_url: '/t3' }] },
+    }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    // Nothing before the defer elapses (modal image gets priority).
+    expect(globalThis.fetch).not.toHaveBeenCalled()
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1)
+    expect(w.findAll('.fc-related__item').length).toBe(2)
+  })
+
+  it('collapses silently when the similar fetch returns nothing', async () => {
+    const pinia = freshPinia()
+    useModalStore().current = { id: 1, has_embedding: true }
+    stubFetch(() => ({ status: 200, body: { images: [] } }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    expect(w.find('.fc-related').exists()).toBe(false)
+  })
+
+  it('clicking a thumb opens that image in the modal', async () => {
+    const pinia = freshPinia()
+    const modal = useModalStore()
+    modal.current = { id: 1, has_embedding: true }
+    const openSpy = vi.spyOn(modal, 'open').mockResolvedValue()
+    stubFetch(() => ({ status: 200, body: { images: [{ id: 7, thumbnail_url: '/t7' }] } }))
+    const w = mountComponent(RelatedStrip, { pinia })
+    await vi.advanceTimersByTimeAsync(250)
+    await flushPromises()
+    await w.find('.fc-related__item').trigger('click')
+    expect(openSpy).toHaveBeenCalledWith(7)
+  })
+})

frontend/test/gallery.spec.js

@@ -122,6 +122,28 @@ describe('gallery store: composable filter', () => {
     expect(s.facets.total).toBe(4)
   })
 
+  it('similar_to routes applyFilterFromQuery to the /similar endpoint, not scroll', async () => {
+    const s = useGalleryStore()
+    const urls = []
+    stubFetch((url) => {
+      urls.push(url)
+      if (url.includes('/api/gallery/similar')) {
+        return { status: 200, body: { images: [{ id: 9 }], next_cursor: null, date_groups: [] } }
+      }
+      return { status: 200, body: EMPTY }
+    })
+    await s.applyFilterFromQuery({ similar_to: '5', tag_id: '3' })
+    expect(s.filter.similar_to).toBe(5)
+    const sim = decodeURIComponent(urls.find((u) => u.includes('/api/gallery/similar')))
+    expect(sim).toContain('similar_to=5')
+    expect(sim).toContain('limit=100')
+    expect(sim).toContain('tag_id=3')          // scope composes
+    expect(s.images.map((i) => i.id)).toEqual([9])
+    expect(s.hasMore).toBe(false)              // ranked + bounded → no pages
+    expect(urls.some((u) => u.includes('/api/gallery/scroll'))).toBe(false)
+    expect(urls.some((u) => u.includes('/api/gallery/timeline'))).toBe(false)
+  })
+
   it('loadInitial issues exactly one scroll request at the initial limit', async () => {
     const s = useGalleryStore()
     const urls = []
@@ -154,6 +176,11 @@ describe('filterToQuery / cloneFilter', () => {
     expect(q.sort).toBeUndefined()  // newest is the default → omitted
   })
 
+  it('serializes similar_to', () => {
+    expect(filterToQuery({ tag_ids: [], similar_to: 42 }).similar_to).toBe('42')
+    expect(filterToQuery({ tag_ids: [], similar_to: null }).similar_to).toBeUndefined()
+  })
+
   it('cloneFilter copies refine fields and detaches tag_ids', () => {
     const orig = {
       tag_ids: [1], artist_id: 2, media_type: 'image', sort: 'oldest',