Add job tracking with PostgreSQL, image storage, and review workflow

- Add PostgreSQL service to docker-compose with health check and postgres_data volume
- Mount ./ocr_images as bind volume for persistent image storage
- Add backend/database.py with schema init and get_db() context manager
- Add 5 new API endpoints: POST /api/jobs, GET /api/jobs (search), GET /api/jobs/{id},
  GET /api/jobs/{id}/image, PUT /api/jobs/{id}/review
- Jobs are saved with author/book/chapter/page metadata, auto UUID, and submitted_at timestamp
- Jobs start as 'unreviewed'; review captures edited text, reviewer name, and reviewed_at
- Add MetadataForm.jsx (author/book/chapter/page inputs) to the New Job panel
- Add JobsPanel.jsx with search/filter, paginated list, and detail pane with review form
- Add "Commit Job" button to ResultPanel (plain_ocr mode only) with success/error feedback
- Add "New Job" / "Browse Jobs" navigation to the app header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -1,16 +1,21 @@
 import { useState, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText } from 'lucide-react'
+import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText, Layers } from 'lucide-react'
 import ImageUpload from './components/ImageUpload'
 import ModeSelector from './components/ModeSelector'
 import ResultPanel from './components/ResultPanel'
 import AdvancedSettings from './components/AdvancedSettings'
 import PDFProcessor from './components/PDFProcessor'
+import MetadataForm from './components/MetadataForm'
+import JobsPanel from './components/JobsPanel'
 import axios from 'axios'
 
 const API_BASE = import.meta.env.VITE_API_URL || '/api'
 
 function App() {
+  const [view, setView] = useState('new_job') // 'new_job' | 'jobs'
+
+  // OCR state
   const [mode, setMode] = useState('plain_ocr')
   const [fileType, setFileType] = useState('image') // 'image' or 'pdf'
   const [image, setImage] = useState(null)
@@ -20,7 +25,7 @@ function App() {
   const [error, setError] = useState(null)
   const [showAdvanced, setShowAdvanced] = useState(false)
   const [includeCaption, setIncludeCaption] = useState(false)
-  
+
   // Form state
   const [prompt, setPrompt] = useState('')
   const [findTerm, setFindTerm] = useState('')
@@ -31,12 +36,16 @@ function App() {
     test_compress: false
   })
 
+  // Job metadata
+  const [metadata, setMetadata] = useState({ author: '', book: '', chapter: '', page: '' })
+
+  // Job commit state
+  const [commitLoading, setCommitLoading] = useState(false)
+  const [commitResult, setCommitResult] = useState(null)
+
   const handleFileTypeChange = useCallback((newType) => {
-    // Clear current file when switching types
     setImage(null)
-    if (imagePreview) {
-      URL.revokeObjectURL(imagePreview)
-    }
+    if (imagePreview) URL.revokeObjectURL(imagePreview)
     setImagePreview(null)
     setError(null)
     setResult(null)
@@ -45,24 +54,17 @@ function App() {
 
   const handleImageSelect = useCallback((file) => {
     if (file === null) {
-      // Clear everything when removing image
       setImage(null)
-      if (imagePreview && fileType === 'image') {
-        URL.revokeObjectURL(imagePreview)
-      }
+      if (imagePreview && fileType === 'image') URL.revokeObjectURL(imagePreview)
       setImagePreview(null)
       setError(null)
       setResult(null)
     } else {
       setImage(file)
-      // Only create preview URL for images, not PDFs
-      if (fileType === 'image') {
-        setImagePreview(URL.createObjectURL(file))
-      } else {
-        setImagePreview(file) // Just store the file for PDFs
-      }
+      setImagePreview(fileType === 'image' ? URL.createObjectURL(file) : file)
       setError(null)
       setResult(null)
+      setCommitResult(null)
     }
   }, [imagePreview, fileType])
 
@@ -71,16 +73,15 @@ function App() {
       setError('Please upload an image first')
       return
     }
-
     setLoading(true)
     setError(null)
+    setCommitResult(null)
 
     try {
       const formData = new FormData()
       formData.append('image', image)
       formData.append('mode', mode)
       formData.append('prompt', prompt)
-      // Enable grounding only for find mode
       formData.append('grounding', mode === 'find_ref')
       formData.append('include_caption', includeCaption)
       formData.append('find_term', findTerm)
@@ -91,11 +92,8 @@ function App() {
       formData.append('test_compress', advancedSettings.test_compress)
 
       const response = await axios.post(`${API_BASE}/ocr`, formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
+        headers: { 'Content-Type': 'multipart/form-data' },
       })
-
       setResult(response.data)
     } catch (err) {
       setError(err.response?.data?.detail || err.message || 'An error occurred')
@@ -104,23 +102,38 @@ function App() {
     }
   }
 
-  const handleCopy = useCallback(() => {
-    if (result?.text) {
-      navigator.clipboard.writeText(result.text)
+  const handleCommitJob = useCallback(async () => {
+    if (!image || !result?.text) return
+    setCommitLoading(true)
+    setCommitResult(null)
+    try {
+      const formData = new FormData()
+      formData.append('image', image)
+      formData.append('author', metadata.author)
+      formData.append('book', metadata.book)
+      formData.append('chapter', metadata.chapter)
+      formData.append('page', metadata.page)
+      formData.append('ocr_text', result.text)
+      formData.append('mode', mode)
+
+      const response = await axios.post(`${API_BASE}/jobs`, formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      })
+      setCommitResult({ success: true, job: response.data })
+    } catch (err) {
+      setCommitResult({ success: false, error: err.response?.data?.detail || err.message })
+    } finally {
+      setCommitLoading(false)
     }
+  }, [image, result, metadata, mode])
+
+  const handleCopy = useCallback(() => {
+    if (result?.text) navigator.clipboard.writeText(result.text)
   }, [result])
 
   const handleDownload = useCallback(() => {
     if (!result?.text) return
-    
-    const extensions = {
-      plain_ocr: 'txt',
-      describe: 'txt',
-      find_ref: 'txt',
-      freeform: 'txt',
-    }
-    
-    const ext = extensions[mode] || 'txt'
+    const ext = { plain_ocr: 'txt', describe: 'txt', find_ref: 'txt', freeform: 'txt' }[mode] || 'txt'
     const blob = new Blob([result.text], { type: 'text/plain' })
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
@@ -138,27 +151,13 @@ function App() {
         <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6TTI0IDZjMy4zMSAwIDYgMi42OSA2IDZzLTIuNjkgNi02IDYtNi0yLjY5LTYtNiAyLjY5LTYgNi02ek00OCAzNmMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6IiBzdHJva2U9InJnYmEoMTQ3LCA1MSwgMjM0LCAwLjEpIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PC9zdmc+')] opacity-30" />
         <motion.div
           className="absolute top-20 left-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"
-          animate={{
-            scale: [1, 1.2, 1],
-            opacity: [0.3, 0.5, 0.3],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
+          animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
+          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
         />
         <motion.div
           className="absolute bottom-20 right-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl"
-          animate={{
-            scale: [1.2, 1, 1.2],
-            opacity: [0.5, 0.3, 0.5],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
+          animate={{ scale: [1.2, 1, 1.2], opacity: [0.5, 0.3, 0.5] }}
+          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
         />
       </div>
 
@@ -166,7 +165,7 @@ function App() {
       <header className="sticky top-0 z-50 glass border-b border-white/10">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
-            <motion.div 
+            <motion.div
               className="flex items-center gap-3"
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
@@ -182,173 +181,229 @@ function App() {
                 <p className="text-xs text-gray-400">Next-Gen Vision AI</p>
               </div>
             </motion.div>
+
+            {/* Navigation */}
+            <nav className="flex gap-2">
+              <motion.button
+                onClick={() => setView('new_job')}
+                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${
+                  view === 'new_job'
+                    ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
+                    : 'glass text-gray-400 hover:bg-white/5'
+                }`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Zap className="w-4 h-4" />
+                New Job
+              </motion.button>
+              <motion.button
+                onClick={() => setView('jobs')}
+                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${
+                  view === 'jobs'
+                    ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
+                    : 'glass text-gray-400 hover:bg-white/5'
+                }`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Layers className="w-4 h-4" />
+                Browse Jobs
+              </motion.button>
+            </nav>
           </div>
         </div>
       </header>
 
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-6 py-8">
-        <div className="grid lg:grid-cols-2 gap-6">
-          {/* Left Panel - Upload & Controls */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1 }}
-            className="space-y-6"
-          >
-            {/* File Type Toggle */}
-            <div className="glass p-4 rounded-2xl">
-              <div className="grid grid-cols-2 gap-2">
-                <motion.button
-                  onClick={() => handleFileTypeChange('image')}
-                  className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
-                    fileType === 'image'
-                      ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
-                      : 'glass text-gray-400 hover:bg-white/5'
-                  }`}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                >
-                  <ImageIcon className="w-4 h-4" />
-                  Image OCR
-                </motion.button>
-                <motion.button
-                  onClick={() => handleFileTypeChange('pdf')}
-                  className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
-                    fileType === 'pdf'
-                      ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
-                      : 'glass text-gray-400 hover:bg-white/5'
-                  }`}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                >
-                  <FileText className="w-4 h-4" />
-                  PDF Processing
-                </motion.button>
-              </div>
-            </div>
-
-            {/* Mode Selector with integrated inputs */}
-            <ModeSelector
-              mode={mode}
-              onModeChange={setMode}
-              prompt={prompt}
-              onPromptChange={setPrompt}
-              findTerm={findTerm}
-              onFindTermChange={setFindTerm}
-            />
-
-            {/* Image/PDF Upload */}
-            <ImageUpload
-              onImageSelect={handleImageSelect}
-              preview={imagePreview}
-              fileType={fileType}
-            />
-
-            {/* Advanced Settings Toggle */}
-            <motion.button
-              onClick={() => setShowAdvanced(!showAdvanced)}
-              className="w-full glass px-4 py-3 rounded-2xl flex items-center justify-between hover:bg-white/5 transition-colors"
-              whileHover={{ scale: 1.01 }}
-              whileTap={{ scale: 0.99 }}
+        <AnimatePresence mode="wait">
+          {view === 'jobs' ? (
+            <motion.div
+              key="jobs"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
             >
-              <div className="flex items-center gap-2">
-                <Settings className="w-4 h-4 text-purple-400" />
-                <span className="text-sm font-medium text-gray-300">Advanced Settings</span>
-              </div>
-              <motion.div
-                animate={{ rotate: showAdvanced ? 180 : 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                </svg>
-              </motion.div>
-            </motion.button>
-
-            {/* Advanced Settings Panel */}
-            <AnimatePresence>
-              {showAdvanced && (
-                <AdvancedSettings
-                  settings={advancedSettings}
-                  onSettingsChange={setAdvancedSettings}
-                  includeCaption={includeCaption}
-                  onIncludeCaptionChange={setIncludeCaption}
-                />
-              )}
-            </AnimatePresence>
-
-            {/* Action Button / PDF Processor */}
-            {fileType === 'pdf' ? (
-              <PDFProcessor
-                pdfFile={image}
-                mode={mode}
-                prompt={prompt}
-                advancedSettings={advancedSettings}
-                includeCaption={includeCaption}
-              />
-            ) : (
-              <>
-                <motion.button
-                  onClick={handleSubmit}
-                  disabled={!image || loading}
-                  className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${
-                    !image || loading ? 'opacity-50 cursor-not-allowed' : ''
-                  }`}
-                  whileHover={!loading && image ? { scale: 1.02 } : {}}
-                  whileTap={!loading && image ? { scale: 0.98 } : {}}
+              <JobsPanel />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="new_job"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+            >
+              <div className="grid lg:grid-cols-2 gap-6">
+                {/* Left Panel - Upload & Controls */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.1 }}
+                  className="space-y-6"
                 >
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 animate-gradient" />
-                  <div className="relative bg-dark-100 px-8 py-4 rounded-2xl flex items-center justify-center gap-3">
-                    {loading ? (
-                      <>
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        <span className="font-semibold">Processing Magic...</span>
-                      </>
-                    ) : (
-                      <>
-                        <Zap className="w-5 h-5" />
-                        <span className="font-semibold">Analyze Image</span>
-                      </>
-                    )}
+                  {/* File Type Toggle */}
+                  <div className="glass p-4 rounded-2xl">
+                    <div className="grid grid-cols-2 gap-2">
+                      <motion.button
+                        onClick={() => handleFileTypeChange('image')}
+                        className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                          fileType === 'image'
+                            ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
+                            : 'glass text-gray-400 hover:bg-white/5'
+                        }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                      >
+                        <ImageIcon className="w-4 h-4" />
+                        Image OCR
+                      </motion.button>
+                      <motion.button
+                        onClick={() => handleFileTypeChange('pdf')}
+                        className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                          fileType === 'pdf'
+                            ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
+                            : 'glass text-gray-400 hover:bg-white/5'
+                        }`}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                      >
+                        <FileText className="w-4 h-4" />
+                        PDF Processing
+                      </motion.button>
+                    </div>
                   </div>
-                </motion.button>
 
-                {error && (
-                  <motion.div
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10"
+                  {/* Job Metadata */}
+                  <MetadataForm metadata={metadata} onChange={setMetadata} />
+
+                  {/* Mode Selector with integrated inputs */}
+                  <ModeSelector
+                    mode={mode}
+                    onModeChange={setMode}
+                    prompt={prompt}
+                    onPromptChange={setPrompt}
+                    findTerm={findTerm}
+                    onFindTermChange={setFindTerm}
+                  />
+
+                  {/* Image/PDF Upload */}
+                  <ImageUpload
+                    onImageSelect={handleImageSelect}
+                    preview={imagePreview}
+                    fileType={fileType}
+                  />
+
+                  {/* Advanced Settings Toggle */}
+                  <motion.button
+                    onClick={() => setShowAdvanced(!showAdvanced)}
+                    className="w-full glass px-4 py-3 rounded-2xl flex items-center justify-between hover:bg-white/5 transition-colors"
+                    whileHover={{ scale: 1.01 }}
+                    whileTap={{ scale: 0.99 }}
                   >
-                    <p className="text-sm text-red-400">{error}</p>
-                  </motion.div>
-                )}
-              </>
-            )}
-          </motion.div>
+                    <div className="flex items-center gap-2">
+                      <Settings className="w-4 h-4 text-purple-400" />
+                      <span className="text-sm font-medium text-gray-300">Advanced Settings</span>
+                    </div>
+                    <motion.div
+                      animate={{ rotate: showAdvanced ? 180 : 0 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </motion.div>
+                  </motion.button>
 
-          {/* Right Panel - Results */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-          >
-            <ResultPanel 
-              result={result}
-              loading={loading}
-              imagePreview={imagePreview}
-              onCopy={handleCopy}
-              onDownload={handleDownload}
-            />
-          </motion.div>
-        </div>
+                  {/* Advanced Settings Panel */}
+                  <AnimatePresence>
+                    {showAdvanced && (
+                      <AdvancedSettings
+                        settings={advancedSettings}
+                        onSettingsChange={setAdvancedSettings}
+                        includeCaption={includeCaption}
+                        onIncludeCaptionChange={setIncludeCaption}
+                      />
+                    )}
+                  </AnimatePresence>
+
+                  {/* Action Button / PDF Processor */}
+                  {fileType === 'pdf' ? (
+                    <PDFProcessor
+                      pdfFile={image}
+                      mode={mode}
+                      prompt={prompt}
+                      advancedSettings={advancedSettings}
+                      includeCaption={includeCaption}
+                    />
+                  ) : (
+                    <>
+                      <motion.button
+                        onClick={handleSubmit}
+                        disabled={!image || loading}
+                        className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${
+                          !image || loading ? 'opacity-50 cursor-not-allowed' : ''
+                        }`}
+                        whileHover={!loading && image ? { scale: 1.02 } : {}}
+                        whileTap={!loading && image ? { scale: 0.98 } : {}}
+                      >
+                        <div className="absolute inset-0 bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 animate-gradient" />
+                        <div className="relative bg-dark-100 px-8 py-4 rounded-2xl flex items-center justify-center gap-3">
+                          {loading ? (
+                            <>
+                              <Loader2 className="w-5 h-5 animate-spin" />
+                              <span className="font-semibold">Processing Magic...</span>
+                            </>
+                          ) : (
+                            <>
+                              <Zap className="w-5 h-5" />
+                              <span className="font-semibold">Analyze Image</span>
+                            </>
+                          )}
+                        </div>
+                      </motion.button>
+
+                      {error && (
+                        <motion.div
+                          initial={{ opacity: 0, y: -10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10"
+                        >
+                          <p className="text-sm text-red-400">{error}</p>
+                        </motion.div>
+                      )}
+                    </>
+                  )}
+                </motion.div>
+
+                {/* Right Panel - Results */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                >
+                  <ResultPanel
+                    result={result}
+                    loading={loading}
+                    imagePreview={imagePreview}
+                    onCopy={handleCopy}
+                    onDownload={handleDownload}
+                    onCommitJob={mode === 'plain_ocr' && result ? handleCommitJob : null}
+                    commitLoading={commitLoading}
+                    commitResult={commitResult}
+                  />
+                </motion.div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </main>
 
       {/* Footer */}
       <footer className="mt-20 border-t border-white/10 glass">
         <div className="max-w-7xl mx-auto px-6 py-8 text-center space-y-2">
           <p className="text-sm text-gray-400">
-            Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> • 
+            Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> &bull;
             Built with <span className="text-pink-400">♥</span> using React + FastAPI
           </p>
           <p className="text-xs text-gray-500">