From 6acf27326734afc0fc9121b8b3c5d6effe5221f5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:12:17 -0400
Subject: [PATCH 1/5] fix(ui): poll import task list during active batch so
 Recent Import Tasks doesn't sit stale

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/SettingsView.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index b15b946..8235e0a 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -57,7 +57,12 @@ function startPolling() {
   pollId = setInterval(() => {
     if (!document.hidden) {
       system.refreshStats()
-      if (tab.value === 'import') importStore.refreshStatus()
+      if (tab.value === 'import') {
+        importStore.refreshStatus()
+        // Refresh the task list while a batch is in flight so the UI
+        // doesn't sit stale next to a ticking imported/skipped counter.
+        if (importStore.activeBatch) importStore.loadTasks(true)
+      }
     }
   }, 5000)
 }

From 95bc761a6993ea14499bb2c8133c916a6d989df3 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:16:37 -0400
Subject: [PATCH 2/5] fix(ui): TopNav uses 1fr/auto/1fr grid so
 Gallery/Showcase action buttons don't shift the centered links

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/TopNav.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TopNav.vue b/frontend/src/components/TopNav.vue
index 4493050..e95bf1a 100644
--- a/frontend/src/components/TopNav.vue
+++ b/frontend/src/components/TopNav.vue
@@ -55,7 +55,13 @@ const health = computed(() => {
   position: sticky;
   top: 0;
   z-index: 1000;
-  display: flex;
+  /* Mirrored side columns (1fr / auto / 1fr) keep the link block dead-
+     centered no matter what the teleport-slot on the right is rendering
+     for the active view (Gallery: Select, Showcase: Shuffle, others: ∅).
+     With a plain flex layout the links shifted left as soon as actions
+     appeared. */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
@@ -87,7 +93,6 @@ const health = computed(() => {
 }
 
 .fc-links {
-  flex: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -118,6 +123,7 @@ const health = computed(() => {
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
+  justify-self: start;
 }
 .fc-health {
   display: flex;
@@ -129,5 +135,6 @@ const health = computed(() => {
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  justify-self: end;
 }
 </style>

From c9ddcd0f607ee81fd3666d4398edf01a16441a16 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:21:02 -0400
Subject: [PATCH 3/5] =?UTF-8?q?fix(ui):=20viewer=20modal=20=E2=80=94=20haz?=
 =?UTF-8?q?e=20background=20through=20to=20the=20image,=20fit-to-view=20at?=
 =?UTF-8?q?=20zoom=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/ImageCanvas.vue |  4 +++-
 frontend/src/components/modal/ImageViewer.vue | 14 +++++++++++---
 frontend/src/components/modal/VideoCanvas.vue |  4 +++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/modal/ImageCanvas.vue b/frontend/src/components/modal/ImageCanvas.vue
index 52cbb17..7cd986a 100644
--- a/frontend/src/components/modal/ImageCanvas.vue
+++ b/frontend/src/components/modal/ImageCanvas.vue
@@ -33,7 +33,9 @@ watch(() => props.src, () => panZoom.reset())
 .fc-canvas {
   flex: 1;
   position: relative;
-  background: rgb(var(--v-theme-background));
+  /* Transparent so the viewer's haze shows through to the image area
+     instead of a solid panel sitting on top of it. */
+  background: transparent;
   overflow: hidden;
   cursor: zoom-in;
   user-select: none;
diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue
index 99ef9e8..195037f 100644
--- a/frontend/src/components/modal/ImageViewer.vue
+++ b/frontend/src/components/modal/ImageViewer.vue
@@ -123,7 +123,11 @@ function isTextEntry(el) {
 <style scoped>
 .fc-viewer {
   position: fixed; inset: 0; z-index: 2000;
-  background: rgba(20, 23, 26, 0.96);
+  /* Obsidian haze (#14171A = 20,23,26) — same palette as TopNav,
+     mid-opacity + blur so the page behind shows through faintly. */
+  background: rgba(20, 23, 26, 0.65);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   outline: none;
   display: flex; flex-direction: column;
 }
@@ -152,8 +156,12 @@ function isTextEntry(el) {
   flex: 1; display: flex; min-height: 0;
 }
 .fc-viewer__media {
-  flex: 1; display: flex; align-items: center; justify-content: center;
-  min-width: 0;
+  /* Let the canvas fill us; the canvas does its own centering. Both
+     min-* are needed so this child can shrink inside its flex parents
+     (without them, max-height/max-width on the <img> have nothing to
+     bound against and the image overflows the viewport). */
+  flex: 1; display: flex;
+  min-width: 0; min-height: 0;
 }
 .fc-viewer__side {
   width: 320px; flex-shrink: 0;
diff --git a/frontend/src/components/modal/VideoCanvas.vue b/frontend/src/components/modal/VideoCanvas.vue
index e79e6da..addc4b1 100644
--- a/frontend/src/components/modal/VideoCanvas.vue
+++ b/frontend/src/components/modal/VideoCanvas.vue
@@ -34,7 +34,9 @@ const playable = computed(() => BROWSER_PLAYABLE.has(props.mime))
 <style scoped>
 .fc-canvas {
   flex: 1;
-  background: rgb(var(--v-theme-background));
+  /* Transparent so the viewer's haze shows through (parallels
+     ImageCanvas — both sit inside ImageViewer's blurred backdrop). */
+  background: transparent;
   display: flex; align-items: center; justify-content: center;
 }
 .fc-canvas__video { max-width: 100%; max-height: 100%; }

From 38a45baad5526f3428bda0b59c3cf49229f4b1ab Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:24:06 -0400
Subject: [PATCH 4/5] feat(ui): click outside the image in the viewer modal
 closes it (parity with IR)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/modal/ImageCanvas.vue | 34 +++++++++++++++++--
 frontend/src/components/modal/ImageViewer.vue |  2 ++
 frontend/src/components/modal/VideoCanvas.vue |  6 ++--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/modal/ImageCanvas.vue b/frontend/src/components/modal/ImageCanvas.vue
index 7cd986a..a4a4163 100644
--- a/frontend/src/components/modal/ImageCanvas.vue
+++ b/frontend/src/components/modal/ImageCanvas.vue
@@ -1,14 +1,16 @@
 <template>
   <div
+    ref="canvasEl"
     class="fc-canvas"
     :class="{ 'fc-canvas--zoomed': panZoom.state.scale > 1 }"
     @wheel="panZoom.handlers.onWheel"
     @pointerdown="panZoom.handlers.onPointerDown"
     @pointermove="panZoom.handlers.onPointerMove"
     @pointerup="panZoom.handlers.onPointerUp"
-    @click="panZoom.handlers.onClick"
+    @click="onCanvasClick"
   >
     <img
+      ref="imgEl"
       :src="src" :alt="alt"
       :style="{
         transform: `translate(${panZoom.state.x}px, ${panZoom.state.y}px) scale(${panZoom.state.scale})`
@@ -19,14 +21,42 @@
 </template>
 
 <script setup>
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import { usePanZoom } from '../../composables/usePanZoom.js'
 
 const props = defineProps({ src: String, alt: String })
+const emit = defineEmits(['close-request'])
 const panZoom = usePanZoom()
 
+const canvasEl = ref(null)
+const imgEl = ref(null)
+
 // Reset zoom when the src changes (prev/next nav).
 watch(() => props.src, () => panZoom.reset())
+
+// Click on the image → toggle zoom (IR/expected behavior). Click on
+// the haze area around the image → request close. We use the image's
+// own bounding rect rather than @click.self because the <img> sets
+// pointer-events: none for the pan-drag pathway, so the click always
+// targets the canvas div regardless of where the cursor was.
+function onCanvasClick(ev) {
+  if (panZoom.state.scale > 1) {
+    // When zoomed, any click resets zoom — preserve old behavior.
+    panZoom.handlers.onClick(ev)
+    return
+  }
+  const img = imgEl.value
+  if (!img) return
+  const r = img.getBoundingClientRect()
+  const inside =
+    ev.clientX >= r.left && ev.clientX <= r.right &&
+    ev.clientY >= r.top && ev.clientY <= r.bottom
+  if (inside) {
+    panZoom.handlers.onClick(ev)
+  } else {
+    emit('close-request')
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue
index 195037f..fe458db 100644
--- a/frontend/src/components/modal/ImageViewer.vue
+++ b/frontend/src/components/modal/ImageViewer.vue
@@ -39,9 +39,11 @@
           <template v-else-if="modal.current">
             <ImageCanvas
               v-if="!isVideo" :src="modal.current.image_url" :alt="`Image ${modal.current.id}`"
+              @close-request="$emit('close')"
             />
             <VideoCanvas
               v-else :src="modal.current.image_url" :mime="modal.current.mime"
+              @close-request="$emit('close')"
             />
           </template>
           <v-alert v-else-if="modal.error" type="error" variant="tonal">
diff --git a/frontend/src/components/modal/VideoCanvas.vue b/frontend/src/components/modal/VideoCanvas.vue
index addc4b1..4fcbc21 100644
--- a/frontend/src/components/modal/VideoCanvas.vue
+++ b/frontend/src/components/modal/VideoCanvas.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="fc-canvas fc-canvas--video">
+  <div class="fc-canvas fc-canvas--video" @click.self="$emit('close-request')">
     <video
       v-if="playable" :src="src" controls playsinline preload="metadata"
       class="fc-canvas__video"
+      @click.stop
     />
-    <div v-else class="fc-canvas__unsupported">
+    <div v-else class="fc-canvas__unsupported" @click.stop>
       <v-icon size="56" icon="mdi-video-off-outline" />
       <h3 class="fc-canvas__unsupported-title">Format not browser-playable</h3>
       <p>
@@ -23,6 +24,7 @@
 <script setup>
 import { computed } from 'vue'
 
+defineEmits(['close-request'])
 const props = defineProps({ src: String, mime: String })
 
 const BROWSER_PLAYABLE = new Set([

From 7a5a71471eb3ba5c94faba83d243b70dfae9b6c3 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 23 May 2026 21:25:57 -0400
Subject: [PATCH 5/5] fix(scan): auto-finalize empty scans + system_stats picks
 running batch with actual work

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 backend/app/api/settings.py | 16 ++++++++++++++--
 backend/app/tasks/scan.py   |  9 +++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/backend/app/api/settings.py b/backend/app/api/settings.py
index 15c52e9..145890e 100644
--- a/backend/app/api/settings.py
+++ b/backend/app/api/settings.py
@@ -141,11 +141,23 @@ async def system_stats():
         ).all()
         integrity_counts = {row[0]: row[1] for row in integrity_rows}
 
-        # Active batch (most recent running)
+        # Active batch = running batch that still has outstanding work.
+        # Plain "most recent running" picks a freshly-created scan that
+        # enqueued zero new files and hides the older batch that's
+        # actually being processed; the EXISTS clause filters those
+        # empty batches out.
         active_batch_row = (
             await session.execute(
                 select(ImportBatch)
-                .where(ImportBatch.status == "running")
+                .where(
+                    ImportBatch.status == "running",
+                    select(ImportTask.id)
+                    .where(
+                        ImportTask.batch_id == ImportBatch.id,
+                        ImportTask.status.in_(["pending", "queued", "processing"]),
+                    )
+                    .exists(),
+                )
                 .order_by(ImportBatch.started_at.desc())
                 .limit(1)
             )
diff --git a/backend/app/tasks/scan.py b/backend/app/tasks/scan.py
index c4581f7..6aacde0 100644
--- a/backend/app/tasks/scan.py
+++ b/backend/app/tasks/scan.py
@@ -95,6 +95,15 @@ def scan_directory(self, triggered_by: str = "manual",
             files_seen += 1
 
         batch.total_files = files_seen
+        # If the walk enqueued nothing (every file was already on a
+        # non-failed ImportTask from a prior scan), there's no
+        # import_media_file message that would ever flip this batch to
+        # 'complete' — finalize it now so the active-batch query in
+        # /api/system/stats doesn't get stuck reporting all-zero
+        # counters from an empty scan.
+        if files_seen == 0:
+            batch.status = "complete"
+            batch.finished_at = datetime.now(UTC)
         session.commit()
 
         # Now enqueue import_media_file for each pending task.