feat(explore): 3-pane tagging workspace — gallery | viewer | tag rail

Reworks Explore from "anchor + neighbour grid + cluster tag-gap rail" into a
persistent 3-pane workspace that unfolds the image modal so you can tag while
rabbit-holing (operator concept 2026-06-26):

- LEFT  neighbour grid (larger thumbs), click = walk; breadcrumb retained.
- CENTER light viewer — reuses ImageCanvas + ImageMetaBar(:image) for the
  focused image; "Open full viewer" still launches the overlay modal.
- RIGHT  the modal's TagPanel, hosted on the anchor for modal-parity tagging
  (chips, autocomplete, suggestions + Accept, fandom-on-chip, T/"/" focus).

Reuse without destabilising the audited modal store: TagPanel and
SuggestionsPanel gain an optional `host` prop (default = modal store, so the
image modal is unchanged); the explore store implements the same small
tag-CRUD surface (current/currentImageId + reloadTags/addExistingTag/
removeTag/createAndAdd) over the anchor. ImageMetaBar gains an optional
`image` prop for the same reason.

Drops the mass/cluster tagger (TagGapPanel deleted; clusterIds/thumbById
removed) — per-image tagging feeds the per-tag reference-embedding centroid
better than bulk ops.

Nav: keep the Explore tab but bare /explore now SEEDS a random image
(GET /api/showcase?limit=1 → /explore/:id) so the tab kick-starts a rabbit
hole; explicit meta.navOrder pins nav order (Explore after Gallery) since
router.getRoutes() doesn't preserve declaration order.

Note: the backend cluster tag-gaps route/service (#94a) is now frontend-orphaned
— left in place; flag for a separate cleanup.

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

frontend/src/components/TopNav.vue

@@ -72,10 +72,14 @@ import PipelineStatusChip from './PipelineStatusChip.vue'
 const system = useSystemStore()
 onMounted(() => system.refreshHealth())
 
-// Same mechanism the old sidebar used: every route with a meta.title is a
-// nav entry, in router declaration order. Auto-tracks future routes.
+// Every route with a meta.title is a nav entry. Order by meta.navOrder —
+// router.getRoutes() does NOT guarantee declaration order, so explicit numbers
+// pin the sequence (e.g. Explore after Gallery). Routes without one fall to the
+// end. Auto-tracks future routes.
 const navRoutes = computed(() =>
-  router.getRoutes().filter(r => r.meta?.title)
+  router.getRoutes()
+    .filter(r => r.meta?.title)
+    .sort((a, b) => (a.meta.navOrder ?? 999) - (b.meta.navOrder ?? 999))
 )
 // Content links for the centered desktop row — everything EXCEPT Settings,
 // which is config and gets pinned to the right edge instead.

frontend/src/components/explore/TagGapPanel.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="fc-gaps">
-    <h3 class="fc-gaps__title">Tag-coverage gaps</h3>
-    <p class="fc-gaps__hint fc-muted">
-      Tags most of this cluster shares but some images lack. Apply to close the
-      gap across the stragglers.
-    </p>
-
-    <div class="fc-gaps__threshold">
-      <label class="text-caption fc-muted">
-        Consensus ≥ {{ Math.round(threshold * 100) }}%
-      </label>
-      <v-slider
-        v-model="threshold"
-        :min="0.3" :max="0.95" :step="0.05"
-        density="compact" hide-details color="accent"
-        aria-label="Consensus threshold"
-        @update:model-value="onThresholdInput"
-      />
-    </div>
-
-    <div v-if="loading" class="fc-gaps__state">
-      <v-progress-circular indeterminate size="22" width="2" color="accent" />
-    </div>
-    <v-alert v-else-if="error" type="error" variant="tonal" density="compact" class="mt-2">
-      {{ error }}
-    </v-alert>
-    <p v-else-if="!store.clusterIds.length" class="fc-gaps__state fc-muted text-body-2">
-      Anchor on an image with visual neighbours to see gaps.
-    </p>
-    <p v-else-if="!gaps.length" class="fc-gaps__state fc-muted text-body-2">
-      No gaps at this threshold — this cluster is consistently tagged.
-    </p>
-
-    <div v-else class="fc-gaps__list">
-      <div v-for="g in gaps" :key="g.tag_id" class="fc-gap">
-        <div class="fc-gap__head">
-          <span class="fc-gap__name">{{ g.name }}</span>
-          <span class="fc-gap__count fc-muted" :title="`${g.present_count} of ${g.total} images have this tag`">
-            {{ g.present_count }}/{{ g.total }}
-          </span>
-        </div>
-        <div class="fc-gap__missing">
-          <img
-            v-for="iid in g.missing_image_ids.slice(0, MISSING_PREVIEW)" :key="iid"
-            :src="store.thumbById[iid]" alt="" loading="lazy"
-          />
-          <span
-            v-if="g.missing_image_ids.length > MISSING_PREVIEW"
-            class="fc-muted text-caption"
-          >+{{ g.missing_image_ids.length - MISSING_PREVIEW }}</span>
-        </div>
-        <v-btn
-          size="small" color="accent" variant="tonal" rounded="pill"
-          :loading="applyingId === g.tag_id"
-          prepend-icon="mdi-tag-plus"
-          @click="applyGap(g)"
-        >Apply to {{ g.missing_image_ids.length }} missing</v-btn>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { useExploreStore } from '../../stores/explore.js'
-import { useApi } from '../../composables/useApi.js'
-import { useInflightToken } from '../../composables/useInflightToken.js'
-import { toast } from '../../utils/toast.js'
-
-const MISSING_PREVIEW = 8
-
-const store = useExploreStore()
-const api = useApi()
-
-const threshold = ref(0.6)
-const gaps = ref([])
-const loading = ref(false)
-const error = ref(null)
-const applyingId = ref(null)
-
-const inflight = useInflightToken()
-let debounce = null
-
-async function fetchGaps () {
-  const ids = store.clusterIds
-  if (ids.length < 2) { gaps.value = []; return }
-  inflight.cancel()
-  const t = inflight.claim()
-  loading.value = true
-  error.value = null
-  try {
-    const body = await api.post('/api/images/cluster/tag-gaps', {
-      body: { image_ids: ids, threshold: threshold.value },
-    })
-    if (!t.isCurrent()) return
-    gaps.value = body.gaps || []
-  } catch (e) {
-    if (t.isCurrent()) { error.value = e.message; gaps.value = [] }
-  } finally {
-    if (t.isCurrent()) loading.value = false
-  }
-}
-
-function onThresholdInput () {
-  if (debounce) clearTimeout(debounce)
-  debounce = setTimeout(fetchGaps, 350)
-}
-
-// Re-evaluate gaps whenever the cluster changes (new anchor / new neighbours).
-watch(() => store.clusterIds.join(','), fetchGaps, { immediate: true })
-
-async function applyGap (g) {
-  applyingId.value = g.tag_id
-  try {
-    const res = await api.post('/api/tags/images/bulk/tags', {
-      body: { image_ids: g.missing_image_ids, tag_id: g.tag_id, source: 'manual' },
-    })
-    toast({
-      text: `Applied “${g.name}” to ${res.added_count ?? g.missing_image_ids.length} image(s)`,
-      type: 'success',
-    })
-    await fetchGaps()   // the gap shrinks/closes — refresh
-  } catch (e) {
-    toast({ text: `Couldn't apply “${g.name}”: ${e.message}`, type: 'error' })
-  } finally {
-    applyingId.value = null
-  }
-}
-</script>
-
-<style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-.fc-gaps {
-  padding: 14px; border-radius: 12px;
-  background: rgba(var(--v-theme-on-surface), 0.03);
-  border: 1px solid rgba(var(--v-theme-on-surface), 0.10);
-}
-.fc-gaps__title {
-  font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 500;
-  margin-bottom: 4px;
-}
-.fc-gaps__hint { font-size: 12px; margin-bottom: 10px; }
-.fc-gaps__threshold { margin-bottom: 8px; }
-.fc-gaps__state { display: flex; justify-content: center; padding: 20px 0; }
-.fc-gaps__list { display: flex; flex-direction: column; gap: 12px; }
-.fc-gap {
-  padding: 10px; border-radius: 10px;
-  background: rgba(var(--v-theme-on-surface), 0.04);
-}
-.fc-gap__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
-.fc-gap__name { font-weight: 600; }
-.fc-gap__count { font-variant-numeric: tabular-nums; font-size: 12px; }
-.fc-gap__missing { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
-.fc-gap__missing img {
-  width: 36px; height: 36px; object-fit: cover; border-radius: 5px;
-  background: rgb(var(--v-theme-surface-light));
-}
-</style>

frontend/src/components/modal/ImageMetaBar.vue

@@ -38,8 +38,12 @@ import { useModalStore } from '../../stores/modal.js'
 import { copyText } from '../../utils/clipboard.js'
 import { toast } from '../../utils/toast.js'
 
+// `image` lets a non-modal surface (the Explore workspace) render the same
+// meta + download block for its anchor. Defaults to the modal store's current
+// image so the image modal is unchanged.
+const props = defineProps({ image: { type: Object, default: null } })
 const modal = useModalStore()
-const img = computed(() => modal.current)
+const img = computed(() => props.image ?? modal.current)
 
 function humanSize (bytes) {
   const units = ['B', 'KB', 'MB', 'GB']

frontend/src/components/modal/SuggestionsPanel.vue

@@ -51,12 +51,19 @@ import { useModalStore } from '../../stores/modal.js'
 import SuggestionsCategoryGroup from './SuggestionsCategoryGroup.vue'
 import AliasPickerDialog from './AliasPickerDialog.vue'
 
-const props = defineProps({ imageId: { type: Number, required: true } })
+const props = defineProps({
+  imageId: { type: Number, required: true },
+  // The tagging host whose chip rail to refresh after an accept. Defaults to
+  // the modal store (image modal); the Explore workspace passes its anchor host
+  // so the same panel refreshes the right surface. See TagPanel.
+  host: { type: Object, default: null },
+})
 // 'accepted' lets the parent return focus to the tag input after a suggestion is
 // applied (operator-asked 2026-06-08).
 const emit = defineEmits(['accepted'])
 const store = useSuggestionsStore()
-const modal = useModalStore()
+const modalStore = useModalStore()
+const host = props.host || modalStore
 
 // 'artist' (FC-2d-vii-c) and 'copyright' (2026-06-01) retired as
 // suggestion categories. Only 'character' remains as a people-style
@@ -84,7 +91,7 @@ watch(() => props.imageId, (id) => {
 async function onAccept(s) {
   try {
     await store.accept(s)
-    await modal.reloadTags()
+    await host.reloadTags()
     emit('accepted')
   } catch (e) {
     toast({ text: `Accept failed: ${e.message}`, type: 'error' })
@@ -98,7 +105,7 @@ async function onAliasConfirm(canonicalTagId) {
   try {
     await store.aliasAccept(aliasTarget.value, canonicalTagId)
     aliasDialog.value = false
-    await modal.reloadTags()
+    await host.reloadTags()
     emit('accepted')
   } catch (e) {
     toast({ text: `Alias failed: ${e.message}`, type: 'error' })

frontend/src/components/modal/TagPanel.vue

@@ -3,12 +3,12 @@
     <h3 class="fc-tag-panel__title">Tags</h3>
     <div class="fc-tag-panel__chips">
       <TagChip
-        v-for="tag in modal.current?.tags || []"
+        v-for="tag in host.current?.tags || []"
         :key="tag.id" :tag="tag"
         @remove="onRemove" @rename="openRename" @set-fandom="openSetFandom"
         @navigate="onNavigate"
       />
-      <span v-if="!modal.current?.tags?.length" class="text-caption">No tags yet.</span>
+      <span v-if="!host.current?.tags?.length" class="text-caption">No tags yet.</span>
     </div>
 
     <v-divider class="my-3" />
@@ -24,8 +24,9 @@
     </v-alert>
 
     <SuggestionsPanel
-      v-if="modal.currentImageId != null"
-      :image-id="modal.currentImageId"
+      v-if="host.currentImageId != null"
+      :image-id="host.currentImageId"
+      :host="host"
       @accepted="focusTagInput"
     />
 
@@ -61,17 +62,24 @@ import SuggestionsPanel from './SuggestionsPanel.vue'
 import TagRenameDialog from './TagRenameDialog.vue'
 import FandomSetDialog from './FandomSetDialog.vue'
 
-const modal = useModalStore()
+// `host` is the tagging context — a store-like object exposing
+// current / currentImageId + removeTag/addExistingTag/createAndAdd/reloadTags
+// (+ optional close). Defaults to the modal store so the image modal is
+// unchanged; the Explore workspace passes its own host bound to the anchor,
+// reusing this panel verbatim for modal-parity tagging.
+const props = defineProps({ host: { type: Object, default: null } })
+const modalStore = useModalStore()
+const host = props.host || modalStore
 const suggestions = useSuggestionsStore()
 const router = useRouter()
 const errorMsg = ref(null)
 const tagInputRef = ref(null)
 
-// #5: clicking a tag chip's body leaves the modal and opens the gallery
-// filtered for that single tag (a fresh filter — the obvious "show me more
-// like this tag" move). Rename/set-fandom (kebab) and remove (✕) stay put.
+// #5: clicking a tag chip's body leaves the current surface and opens the
+// gallery filtered for that single tag (a fresh filter — the obvious "show me
+// more like this tag" move). Rename/set-fandom (kebab) and remove (✕) stay put.
 async function onNavigate(tag) {
-  await modal.close()
+  await host.close?.()
   router.push({ name: 'gallery', query: { tag_id: String(tag.id) } })
 }
 
@@ -82,17 +90,17 @@ function focusTagInput() { tagInputRef.value?.focus?.() }
 
 async function onRemove(tagId) {
   errorMsg.value = null
-  try { await modal.removeTag(tagId) }
+  try { await host.removeTag(tagId) }
   catch (e) { errorMsg.value = e.message }
 }
 async function onPickExisting(hit) {
   errorMsg.value = null
-  try { await modal.addExistingTag(hit.id) }
+  try { await host.addExistingTag(hit.id) }
   catch (e) { errorMsg.value = e.message }
 }
 async function onPickNew(payload) {
   errorMsg.value = null
-  try { await modal.createAndAdd(payload) }
+  try { await host.createAndAdd(payload) }
   catch (e) { errorMsg.value = e.message }
 }
 // A suggestion picked from the autocomplete dropdown runs the SAME path as the
@@ -102,7 +110,7 @@ async function onAcceptSuggestion(s) {
   errorMsg.value = null
   try {
     await suggestions.accept(s)
-    await modal.reloadTags()
+    await host.reloadTags()
     focusTagInput()
   } catch (e) { errorMsg.value = e.message }
 }
@@ -116,8 +124,8 @@ function openRename(tag) {
 }
 async function onRenamed() {
   renameDialog.value = false
-  // Reflect the new name in the modal's current tag list without a full reload.
-  await modal.reloadTags()
+  // Reflect the new name in the current tag list without a full reload.
+  await host.reloadTags()
 }
 
 const fandomDialog = ref(false)
@@ -130,7 +138,7 @@ function openSetFandom(tag) {
 async function onFandomUpdated() {
   fandomDialog.value = false
   // A fandom change can merge the tag away; reload to reflect the new state.
-  await modal.reloadTags()
+  await host.reloadTags()
 }
 </script>