From bcd8960ea970d916855f36e5ecc0671451d9199b Mon Sep 17 00:00:00 2001
From: Aaron Roberts <aaronroberts@Aarons-MacBook-Air.local>
Date: Fri, 3 Jul 2026 10:14:35 +0100
Subject: [PATCH] Show synced to qdrant status on Browse Jobs

---
 backend/main.py                       |  3 ++-
 frontend/src/components/JobsPanel.jsx | 38 +++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index c2e6967..c0c612d 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -552,7 +552,8 @@ async def list_jobs(
                 cur.execute(
                     f"""
                     SELECT id, author, book, chapter, page, submitted_at, status,
-                           reviewer_name, reviewed_at, mode, ocr_model, original_filename
+                           reviewer_name, reviewed_at, mode, ocr_model, original_filename,
+                           qdrant_synced_at, updated_at
                     FROM ocr_jobs {where}
                     ORDER BY submitted_at DESC
                     LIMIT %s OFFSET %s
diff --git a/frontend/src/components/JobsPanel.jsx b/frontend/src/components/JobsPanel.jsx
index b1720d7..798d5e8 100644
--- a/frontend/src/components/JobsPanel.jsx
+++ b/frontend/src/components/JobsPanel.jsx
@@ -4,7 +4,7 @@ import { useModels } from '../hooks/useModels'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
-  FileText, Loader2, Save, RefreshCw, Trash2, Sparkles,
+  FileText, Loader2, Save, RefreshCw, Trash2, Sparkles, Cloud, CloudOff,
 } from 'lucide-react'
 import axios from 'axios'
 
@@ -29,6 +29,38 @@ function StatusBadge({ status }) {
   )
 }
 
+// A job is synced "in its most recent state" when it was pushed to Qdrant at or
+// after its last update. `updated_at` is bumped by a DB trigger on every change,
+// so any edit after a sync makes the job stale until it's re-synced.
+function isSynced(job) {
+  if (!job.qdrant_synced_at) return false
+  if (!job.updated_at) return true
+  return new Date(job.qdrant_synced_at).getTime() >= new Date(job.updated_at).getTime()
+}
+
+function SyncBadge({ job }) {
+  const synced = isSynced(job)
+  const Icon = synced ? Cloud : CloudOff
+  const title = synced
+    ? 'Synced with Qdrant'
+    : job.qdrant_synced_at
+      ? 'Changed since last Qdrant sync — needs re-sync'
+      : 'Never synced with Qdrant'
+  return (
+    <span
+      title={title}
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${
+        synced
+          ? 'text-green-400 bg-green-400/10 border-green-400/30'
+          : 'text-orange-400 bg-orange-400/10 border-orange-400/30'
+      }`}
+    >
+      <Icon className="w-3 h-3" />
+      {synced ? 'Synced' : 'Not synced'}
+    </span>
+  )
+}
+
 // ─────────────────────────────────────────────────────────────
 // Full-screen Job Detail
 // ─────────────────────────────────────────────────────────────
@@ -210,6 +242,7 @@ function JobDetail({ jobId, onClose, onReviewed, onDeleted, suggestions = {} })
         {job && (
           <>
             <StatusBadge status={job.status} />
+            <SyncBadge job={job} />
             <motion.button
               onClick={handleToggleStatus}
               disabled={togglingStatus}
@@ -631,8 +664,9 @@ export default function JobsPanel() {
               whileTap={{ scale: 0.98 }}
               layout
             >
-              <div className="flex items-start justify-between gap-2 mb-2">
+              <div className="flex items-center flex-wrap gap-2 mb-2">
                 <StatusBadge status={job.status} />
+                <SyncBadge job={job} />
               </div>
               {job.book && <p className="text-sm font-medium text-gray-200 truncate">{job.book}</p>}
               <div className="flex items-center gap-2 mt-0.5">