From 247a5e4b0eb4e90c7a98910ea45a4f2acc5c115d Mon Sep 17 00:00:00 2001
From: Aaron Roberts <aaronroberts@Aarons-MacBook-Air.local>
Date: Tue, 9 Jun 2026 17:57:11 +0100
Subject: [PATCH] Full-screen side-by-side layout for New Job and Browse Jobs

New Job (plain_ocr):
- After OCR completes, the entire main area becomes a flex-column view
  pinned to viewport height: image and editable textarea side by side at
  top (filling available space), metadata fields in a compact row below,
  Commit Job button at the bottom
- "New Analysis" button in the header returns to the upload view
- ResultPanel reverted to simple rendered-output only (no commit logic)

Browse Jobs:
- Selecting a job replaces the search list with a full-screen detail view
  using the same layout: image | editable textarea on top, all metadata
  fields + Reviewer name + action button in a single row below
- "Back to results" button returns to the search/list grid
- Search results now display as a responsive card grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx                    | 288 +++++++-----
 frontend/src/components/JobsPanel.jsx   | 593 ++++++++++--------------
 frontend/src/components/ResultPanel.jsx | 148 ++----
 3 files changed, 454 insertions(+), 575 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6d08cc1..3be8e74 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,9 @@
 import { useState, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText, Layers } from 'lucide-react'
+import {
+  Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText,
+  Layers, ChevronLeft, CheckCircle2, Database,
+} from 'lucide-react'
 import ImageUpload from './components/ImageUpload'
 import ModeSelector from './components/ModeSelector'
 import ResultPanel from './components/ResultPanel'
@@ -12,12 +15,16 @@ import axios from 'axios'
 
 const API_BASE = import.meta.env.VITE_API_URL || '/api'
 
+const INPUT_CLASS =
+  'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
+  'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
+
 function App() {
-  const [view, setView] = useState('new_job') // 'new_job' | 'jobs'
+  const [view, setView] = useState('new_job')
 
   // OCR state
   const [mode, setMode] = useState('plain_ocr')
-  const [fileType, setFileType] = useState('image') // 'image' or 'pdf'
+  const [fileType, setFileType] = useState('image')
   const [image, setImage] = useState(null)
   const [imagePreview, setImagePreview] = useState(null)
   const [result, setResult] = useState(null)
@@ -26,26 +33,20 @@ function App() {
   const [showAdvanced, setShowAdvanced] = useState(false)
   const [includeCaption, setIncludeCaption] = useState(false)
 
-  // Form state
   const [prompt, setPrompt] = useState('')
   const [findTerm, setFindTerm] = useState('')
   const [advancedSettings, setAdvancedSettings] = useState({
-    base_size: 1024,
-    image_size: 640,
-    crop_mode: true,
-    test_compress: false
+    base_size: 1024, image_size: 640, crop_mode: true, test_compress: false,
   })
 
-  // Job metadata
   const [metadata, setMetadata] = useState({ author: '', book: '', chapter: '', page: '' })
-
-  // Editable OCR text (for plain_ocr mode, editable before commit)
   const [editedOcrText, setEditedOcrText] = useState('')
-
-  // Job commit state
   const [commitLoading, setCommitLoading] = useState(false)
   const [commitResult, setCommitResult] = useState(null)
 
+  // Whether to show the full-screen result view
+  const showResultView = view === 'new_job' && mode === 'plain_ocr' && !!result
+
   const handleFileTypeChange = useCallback((newType) => {
     setImage(null)
     if (imagePreview) URL.revokeObjectURL(imagePreview)
@@ -62,6 +63,8 @@ function App() {
       setImagePreview(null)
       setError(null)
       setResult(null)
+      setEditedOcrText('')
+      setCommitResult(null)
     } else {
       setImage(file)
       setImagePreview(fileType === 'image' ? URL.createObjectURL(file) : file)
@@ -73,14 +76,10 @@ function App() {
   }, [imagePreview, fileType])
 
   const handleSubmit = async () => {
-    if (!image) {
-      setError('Please upload an image first')
-      return
-    }
+    if (!image) { setError('Please upload an image first'); return }
     setLoading(true)
     setError(null)
     setCommitResult(null)
-
     try {
       const formData = new FormData()
       formData.append('image', image)
@@ -108,6 +107,12 @@ function App() {
     }
   }
 
+  const handleNewAnalysis = () => {
+    setResult(null)
+    setEditedOcrText('')
+    setCommitResult(null)
+  }
+
   const handleCommitJob = useCallback(async () => {
     if (!image) return
     setCommitLoading(true)
@@ -149,7 +154,9 @@ function App() {
     a.download = `deepseek-ocr-result.${ext}`
     a.click()
     URL.revokeObjectURL(url)
-  }, [result, mode])
+  }, [editedOcrText, result, mode])
+
+  const metaField = (key) => (e) => setMetadata(m => ({ ...m, [key]: e.target.value }))
 
   return (
     <div className="min-h-screen relative overflow-hidden">
@@ -160,12 +167,12 @@ function App() {
         <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" }}
+          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" }}
+          transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
         />
       </div>
 
@@ -173,11 +180,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
-              className="flex items-center gap-3"
-              initial={{ opacity: 0, x: -20 }}
-              animate={{ opacity: 1, x: 0 }}
-            >
+            <motion.div className="flex items-center gap-3" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
               <div className="relative">
                 <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-75" />
                 <div className="relative bg-gradient-to-br from-purple-600 to-cyan-500 p-2 rounded-xl">
@@ -190,30 +193,29 @@ function App() {
               </div>
             </motion.div>
 
-            {/* Navigation */}
             <nav className="flex gap-2">
+              {showResultView && (
+                <motion.button
+                  onClick={handleNewAnalysis}
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium glass text-gray-400 hover:bg-white/5 transition-all"
+                  whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                  New Analysis
+                </motion.button>
+              )}
               <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 }}
+                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 }}
+                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
@@ -224,9 +226,115 @@ function App() {
       </header>
 
       {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-6 py-8">
+      <main className="max-w-7xl mx-auto px-6 py-6">
         <AnimatePresence mode="wait">
-          {view === 'jobs' ? (
+
+          {/* ── Full-screen OCR result view (plain_ocr + result) ── */}
+          {showResultView ? (
+            <motion.div
+              key="ocr_result"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="flex flex-col gap-4"
+              style={{ height: 'calc(100vh - 9.5rem)' }}
+            >
+              {/* Image + Text */}
+              <div className="grid grid-cols-2 gap-6 flex-1 min-h-0">
+                {imagePreview && typeof imagePreview === 'string' ? (
+                  <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
+                    <img
+                      src={imagePreview}
+                      alt="Source"
+                      className="w-full h-full object-contain"
+                    />
+                  </div>
+                ) : (
+                  <div className="glass rounded-2xl flex items-center justify-center">
+                    <p className="text-gray-500 text-sm">No preview</p>
+                  </div>
+                )}
+                <div className="glass rounded-2xl p-4 flex flex-col min-h-0">
+                  <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
+                    OCR Text <span className="text-purple-400">(edit before committing)</span>
+                  </p>
+                  <textarea
+                    value={editedOcrText}
+                    onChange={e => setEditedOcrText(e.target.value)}
+                    className="flex-1 w-full bg-transparent text-sm text-gray-200 font-mono resize-none focus:outline-none min-h-0"
+                    placeholder="OCR text appears here..."
+                  />
+                </div>
+              </div>
+
+              {/* Metadata row */}
+              <div className="glass p-4 rounded-2xl flex-shrink-0">
+                <div className="grid grid-cols-4 gap-4">
+                  {[
+                    { key: 'author', label: 'Author', placeholder: 'Author name' },
+                    { key: 'book',   label: 'Book',   placeholder: 'Book title' },
+                    { key: 'chapter', label: 'Chapter', placeholder: 'Chapter' },
+                    { key: 'page',   label: 'Page',   placeholder: 'Page number' },
+                  ].map(({ key, label, placeholder }) => (
+                    <div key={key}>
+                      <label className="text-xs text-gray-400 mb-1 block">{label}</label>
+                      <input
+                        type="text"
+                        value={metadata[key]}
+                        onChange={metaField(key)}
+                        placeholder={placeholder}
+                        className={INPUT_CLASS}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Commit row */}
+              <div className="flex items-center gap-4 flex-shrink-0">
+                <AnimatePresence>
+                  {commitResult?.success && (
+                    <motion.div
+                      initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }}
+                      className="flex-1 glass p-3 rounded-xl bg-green-500/10 border border-green-500/20"
+                    >
+                      <p className="text-xs text-green-400">
+                        Job saved &mdash; ID: <span className="font-mono">{commitResult.job?.id}</span>
+                      </p>
+                    </motion.div>
+                  )}
+                  {commitResult && !commitResult.success && (
+                    <motion.div
+                      initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }}
+                      className="flex-1 glass p-3 rounded-xl bg-red-500/10 border border-red-500/20"
+                    >
+                      <p className="text-xs text-red-400">{commitResult.error}</p>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <motion.button
+                  onClick={handleCommitJob}
+                  disabled={commitLoading || commitResult?.success}
+                  className={`flex items-center gap-2 px-6 py-3 rounded-xl font-medium text-sm transition-all flex-shrink-0 ${
+                    commitLoading || commitResult?.success
+                      ? 'opacity-50 cursor-not-allowed bg-white/5'
+                      : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
+                  }`}
+                  whileHover={!commitLoading && !commitResult?.success ? { scale: 1.02 } : {}}
+                  whileTap={!commitLoading && !commitResult?.success ? { scale: 0.98 } : {}}
+                >
+                  {commitLoading ? (
+                    <><Loader2 className="w-4 h-4 animate-spin" /> Committing...</>
+                  ) : commitResult?.success ? (
+                    <><CheckCircle2 className="w-4 h-4" /> Committed</>
+                  ) : (
+                    <><Database className="w-4 h-4" /> Commit Job</>
+                  )}
+                </motion.button>
+              </div>
+            </motion.div>
+
+          ) : view === 'jobs' ? (
             <motion.div
               key="jobs"
               initial={{ opacity: 0, y: 20 }}
@@ -235,7 +343,9 @@ function App() {
             >
               <JobsPanel />
             </motion.div>
+
           ) : (
+            /* ── Upload / Controls layout ── */
             <motion.div
               key="new_job"
               initial={{ opacity: 0, y: 20 }}
@@ -243,7 +353,7 @@ function App() {
               exit={{ opacity: 0, y: -20 }}
             >
               <div className="grid lg:grid-cols-2 gap-6">
-                {/* Left Panel - Upload & Controls */}
+                {/* Left Panel */}
                 <motion.div
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
@@ -255,126 +365,83 @@ function App() {
                     <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 }}
+                        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
+                        <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 }}
+                        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
+                        <FileText className="w-4 h-4" /> PDF Processing
                       </motion.button>
                     </div>
                   </div>
 
-                  {/* 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}
+                    mode={mode} onModeChange={setMode}
+                    prompt={prompt} onPromptChange={setPrompt}
+                    findTerm={findTerm} onFindTermChange={setFindTerm}
                   />
 
-                  {/* Image/PDF Upload */}
-                  <ImageUpload
-                    onImageSelect={handleImageSelect}
-                    preview={imagePreview}
-                    fileType={fileType}
-                  />
+                  <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 }}
+                    whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }}
                   >
                     <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 }}
-                    >
+                    <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}
+                        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}
+                      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' : ''
-                        }`}
+                        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>
-                            </>
+                            <><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>
-                            </>
+                            <><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 }}
+                          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>
@@ -384,7 +451,7 @@ function App() {
                   )}
                 </motion.div>
 
-                {/* Right Panel - Results */}
+                {/* Right Panel - Results (non-plain_ocr modes or loading) */}
                 <motion.div
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
@@ -396,11 +463,6 @@ function App() {
                     imagePreview={imagePreview}
                     onCopy={handleCopy}
                     onDownload={handleDownload}
-                    onCommitJob={mode === 'plain_ocr' && result ? handleCommitJob : null}
-                    commitLoading={commitLoading}
-                    commitResult={commitResult}
-                    editedOcrText={editedOcrText}
-                    onOcrTextChange={setEditedOcrText}
                   />
                 </motion.div>
               </div>
diff --git a/frontend/src/components/JobsPanel.jsx b/frontend/src/components/JobsPanel.jsx
index 30999d1..0e4a9ec 100644
--- a/frontend/src/components/JobsPanel.jsx
+++ b/frontend/src/components/JobsPanel.jsx
@@ -2,25 +2,23 @@ import { useState, useEffect, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
   Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
-  User, BookOpen, FileText, Calendar, Hash, Loader2, X, Save,
-  RefreshCw, Image as ImageIcon,
+  FileText, Loader2, Save, RefreshCw,
 } from 'lucide-react'
 import axios from 'axios'
 
 const API_BASE = import.meta.env.VITE_API_URL || '/api'
 
+const INPUT_CLASS =
+  'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
+  'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
+
 const STATUS_COLORS = {
   unreviewed: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
-  reviewed: 'text-green-400 bg-green-400/10 border-green-400/30',
-}
-
-const STATUS_ICONS = {
-  unreviewed: Clock,
-  reviewed: CheckCircle2,
+  reviewed:   'text-green-400 bg-green-400/10 border-green-400/30',
 }
 
 function StatusBadge({ status }) {
-  const Icon = STATUS_ICONS[status] || Clock
+  const Icon = status === 'reviewed' ? CheckCircle2 : Clock
   return (
     <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${STATUS_COLORS[status] || 'text-gray-400'}`}>
       <Icon className="w-3 h-3" />
@@ -29,17 +27,19 @@ function StatusBadge({ status }) {
   )
 }
 
+// ─────────────────────────────────────────────────────────────
+// Full-screen Job Detail
+// ─────────────────────────────────────────────────────────────
 function JobDetail({ jobId, onClose, onReviewed }) {
   const [job, setJob] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
 
-  // Editable fields
-  const [editedText, setEditedText] = useState('')
-  const [editAuthor, setEditAuthor] = useState('')
-  const [editBook, setEditBook] = useState('')
+  const [editedText, setEditedText]   = useState('')
+  const [editAuthor, setEditAuthor]   = useState('')
+  const [editBook, setEditBook]       = useState('')
   const [editChapter, setEditChapter] = useState('')
-  const [editPage, setEditPage] = useState('')
+  const [editPage, setEditPage]       = useState('')
   const [reviewerName, setReviewerName] = useState('')
 
   const [submitting, setSubmitting] = useState(false)
@@ -67,9 +67,7 @@ function JobDetail({ jobId, onClose, onReviewed }) {
       .catch(err => {
         if (!cancelled) setError(err.response?.data?.detail || err.message)
       })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
+      .finally(() => { if (!cancelled) setLoading(false) })
 
     return () => { cancelled = true }
   }, [jobId])
@@ -100,193 +98,163 @@ function JobDetail({ jobId, onClose, onReviewed }) {
     }
   }
 
-  const inputClass =
-    'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
-    'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
-
   const isReviewed = job?.status === 'reviewed'
 
   return (
-    <div className="glass rounded-2xl flex flex-col overflow-hidden" style={{ minHeight: '600px' }}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
-        <div className="flex items-center gap-3">
-          {job && <StatusBadge status={job.status} />}
-          <h3 className="font-semibold text-gray-200">Job Detail</h3>
-        </div>
-        <button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
-          <X className="w-4 h-4" />
-        </button>
+    <motion.div
+      key={jobId}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="flex flex-col gap-4"
+      style={{ height: 'calc(100vh - 9.5rem)' }}
+    >
+      {/* Top bar */}
+      <div className="flex items-center gap-4 flex-shrink-0">
+        <motion.button
+          onClick={onClose}
+          className="flex items-center gap-2 glass glass-hover px-4 py-2 rounded-xl text-sm text-gray-300"
+          whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
+        >
+          <ChevronLeft className="w-4 h-4" />
+          Back to results
+        </motion.button>
+        {job && (
+          <>
+            <StatusBadge status={job.status} />
+            <span className="text-xs text-gray-500 font-mono hidden sm:block">{job.id}</span>
+          </>
+        )}
       </div>
 
       {loading && (
-        <div className="flex justify-center py-16">
+        <div className="flex-1 flex items-center justify-center">
           <Loader2 className="w-8 h-8 animate-spin text-purple-400" />
         </div>
       )}
 
       {error && (
-        <div className="m-5 glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
+        <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10 flex-shrink-0">
           <p className="text-sm text-red-400">{error}</p>
         </div>
       )}
 
       {job && !loading && (
-        <div className="grid grid-cols-2 divide-x divide-white/10 flex-1 min-h-0">
-
-          {/* ── Left column: image + read-only info ── */}
-          <div className="overflow-y-auto p-5 space-y-4">
-            <div>
-              <p className="text-xs text-gray-400 mb-2 flex items-center gap-1">
-                <ImageIcon className="w-3.5 h-3.5" /> Source Image
-              </p>
+        <>
+          {/* Image + Text */}
+          <div className="grid grid-cols-2 gap-6 flex-1 min-h-0">
+            <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
               <img
                 src={`${API_BASE}/jobs/${job.id}/image`}
                 alt="Job source"
-                className="w-full rounded-xl border border-white/10 bg-black/30"
+                className="w-full h-full object-contain"
                 onError={e => { e.target.style.display = 'none' }}
               />
             </div>
-
-            {/* Read-only job info */}
-            <div className="space-y-1.5 text-xs text-gray-500">
-              <p className="font-mono break-all">{job.id}</p>
-              <p>Submitted: {new Date(job.submitted_at).toLocaleString()}</p>
-              {job.mode && <p>Mode: {job.mode}</p>}
-              {isReviewed && job.reviewed_at && (
-                <p>Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</p>
-              )}
-            </div>
-
-            {/* Original OCR text (collapsed, for reviewed jobs) */}
-            {isReviewed && job.ocr_text && (
-              <details className="glass rounded-xl overflow-hidden">
-                <summary className="px-3 py-2 cursor-pointer text-xs text-gray-500 hover:bg-white/5 transition-colors">
-                  Original OCR Text
-                </summary>
-                <div className="px-3 py-3 border-t border-white/10">
-                  <pre className="text-xs text-gray-500 whitespace-pre-wrap font-mono">{job.ocr_text}</pre>
-                </div>
-              </details>
-            )}
-          </div>
-
-          {/* ── Right column: all editable fields ── */}
-          <div className="overflow-y-auto p-5 space-y-5">
-
-            {/* Metadata */}
-            <div className="space-y-3">
-              <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Metadata</p>
-              <div>
-                <label className="text-xs text-gray-400 mb-1 block">Author</label>
-                <input
-                  type="text"
-                  value={editAuthor}
-                  onChange={e => setEditAuthor(e.target.value)}
-                  placeholder="Author name"
-                  className={inputClass}
-                />
-              </div>
-              <div>
-                <label className="text-xs text-gray-400 mb-1 block">Book</label>
-                <input
-                  type="text"
-                  value={editBook}
-                  onChange={e => setEditBook(e.target.value)}
-                  placeholder="Book title"
-                  className={inputClass}
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div>
-                  <label className="text-xs text-gray-400 mb-1 block">Chapter</label>
-                  <input
-                    type="text"
-                    value={editChapter}
-                    onChange={e => setEditChapter(e.target.value)}
-                    placeholder="Chapter"
-                    className={inputClass}
-                  />
-                </div>
-                <div>
-                  <label className="text-xs text-gray-400 mb-1 block">Page</label>
-                  <input
-                    type="text"
-                    value={editPage}
-                    onChange={e => setEditPage(e.target.value)}
-                    placeholder="Page"
-                    className={inputClass}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* OCR / reviewed text */}
-            <div className="space-y-1">
-              <label className="text-xs text-gray-400 block">
+            <div className="glass rounded-2xl p-4 flex flex-col min-h-0">
+              <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
                 {isReviewed ? 'Reviewed Text' : 'OCR Text'}
                 <span className="text-purple-400 ml-1">(editable)</span>
-              </label>
+              </p>
               <textarea
                 value={editedText}
                 onChange={e => setEditedText(e.target.value)}
-                rows={12}
-                className={`${inputClass} resize-y font-mono`}
+                className="flex-1 w-full bg-transparent text-sm text-gray-200 font-mono resize-none focus:outline-none min-h-0"
                 placeholder="Text content..."
               />
-            </div>
-
-            {/* Reviewer + save */}
-            <div className="space-y-3 pt-3 border-t border-white/10">
-              <div>
-                <label className="text-xs text-gray-400 mb-1 block">Reviewer Name</label>
-                <input
-                  type="text"
-                  value={reviewerName}
-                  onChange={e => setReviewerName(e.target.value)}
-                  placeholder="Your name"
-                  className={inputClass}
-                />
-              </div>
-
-              {saveResult && (
-                <div className={`p-3 rounded-lg text-sm ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
-                  {saveResult.success
-                    ? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
-                    : saveResult.error}
-                </div>
+              {/* Original OCR text collapsed for reviewed jobs */}
+              {isReviewed && job.ocr_text && (
+                <details className="flex-shrink-0 mt-2 border-t border-white/10 pt-2">
+                  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 transition-colors">
+                    Original OCR Text
+                  </summary>
+                  <pre className="text-xs text-gray-600 whitespace-pre-wrap font-mono mt-1 max-h-28 overflow-y-auto">
+                    {job.ocr_text}
+                  </pre>
+                </details>
               )}
-
-              <motion.button
-                onClick={handleSave}
-                disabled={submitting || !reviewerName.trim()}
-                className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
-                  submitting || !reviewerName.trim()
-                    ? 'opacity-50 cursor-not-allowed bg-white/5'
-                    : isReviewed
-                      ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
-                      : 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
-                }`}
-                whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
-                whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
-              >
-                {submitting ? (
-                  <><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
-                ) : isReviewed ? (
-                  <><Save className="w-4 h-4" /> Save Changes</>
-                ) : (
-                  <><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
-                )}
-              </motion.button>
             </div>
           </div>
 
-        </div>
+          {/* Metadata + reviewer row */}
+          <div className="glass p-4 rounded-2xl flex-shrink-0">
+            <div className="grid grid-cols-6 gap-4">
+              <div>
+                <label className="text-xs text-gray-400 mb-1 block">Author</label>
+                <input type="text" value={editAuthor} onChange={e => setEditAuthor(e.target.value)} placeholder="Author" className={INPUT_CLASS} />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400 mb-1 block">Book</label>
+                <input type="text" value={editBook} onChange={e => setEditBook(e.target.value)} placeholder="Book title" className={INPUT_CLASS} />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400 mb-1 block">Chapter</label>
+                <input type="text" value={editChapter} onChange={e => setEditChapter(e.target.value)} placeholder="Chapter" className={INPUT_CLASS} />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400 mb-1 block">Page</label>
+                <input type="text" value={editPage} onChange={e => setEditPage(e.target.value)} placeholder="Page" className={INPUT_CLASS} />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400 mb-1 block">Reviewer</label>
+                <input type="text" value={reviewerName} onChange={e => setReviewerName(e.target.value)} placeholder="Your name" className={INPUT_CLASS} />
+              </div>
+              <div className="flex flex-col justify-end">
+                <motion.button
+                  onClick={handleSave}
+                  disabled={submitting || !reviewerName.trim()}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all ${
+                    submitting || !reviewerName.trim()
+                      ? 'opacity-50 cursor-not-allowed bg-white/5'
+                      : isReviewed
+                        ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
+                        : 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
+                  }`}
+                  whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
+                  whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
+                >
+                  {submitting ? (
+                    <><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
+                  ) : isReviewed ? (
+                    <><Save className="w-4 h-4" /> Save Changes</>
+                  ) : (
+                    <><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
+                  )}
+                </motion.button>
+              </div>
+            </div>
+
+            {saveResult && (
+              <motion.div
+                initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }}
+                className={`mt-3 p-2 rounded-lg text-xs ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}
+              >
+                {saveResult.success
+                  ? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
+                  : saveResult.error}
+              </motion.div>
+            )}
+
+            {/* Read-only info row */}
+            <div className="flex gap-6 mt-3 pt-3 border-t border-white/10">
+              {job.submitted_at && (
+                <span className="text-xs text-gray-500">Submitted: {new Date(job.submitted_at).toLocaleString()}</span>
+              )}
+              {isReviewed && job.reviewed_at && (
+                <span className="text-xs text-gray-500">Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</span>
+              )}
+              {job.mode && <span className="text-xs text-gray-500">Mode: {job.mode}</span>}
+            </div>
+          </div>
+        </>
       )}
-    </div>
+    </motion.div>
   )
 }
 
+// ─────────────────────────────────────────────────────────────
+// Search / List view
+// ─────────────────────────────────────────────────────────────
 export default function JobsPanel() {
   const [search, setSearch] = useState('')
   const [filterStatus, setFilterStatus] = useState('')
@@ -324,14 +292,7 @@ export default function JobsPanel() {
     }
   }, [search, filterStatus, filterAuthor, filterBook])
 
-  useEffect(() => {
-    fetchJobs(0)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleSearch = (e) => {
-    e.preventDefault()
-    fetchJobs(0)
-  }
+  useEffect(() => { fetchJobs(0) }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleReviewed = (updatedJob) => {
     setJobs(prev => prev.map(j => j.id === updatedJob.id ? { ...j, ...updatedJob } : j))
@@ -339,196 +300,122 @@ export default function JobsPanel() {
 
   const totalPages = Math.ceil(total / LIMIT)
 
-  const inputClass =
-    'bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
-    'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
+  // When a job is selected show full-screen detail
+  if (selectedJobId) {
+    return (
+      <AnimatePresence mode="wait">
+        <JobDetail
+          key={selectedJobId}
+          jobId={selectedJobId}
+          onClose={() => setSelectedJobId(null)}
+          onReviewed={handleReviewed}
+        />
+      </AnimatePresence>
+    )
+  }
 
   return (
-    // 1/3 list — 2/3 detail on large screens
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <motion.div
+      key="job_list"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="space-y-4"
+    >
+      {/* Search form */}
+      <div className="glass p-4 rounded-2xl space-y-3">
+        <form onSubmit={e => { e.preventDefault(); fetchJobs(0) }} className="flex gap-2">
+          <input
+            type="text"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="Search all fields..."
+            className={`${INPUT_CLASS} flex-1`}
+          />
+          <motion.button
+            type="submit"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
+            whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
+          >
+            <Search className="w-4 h-4" /> Search
+          </motion.button>
+        </form>
 
-      {/* ── Left: Search + List ── */}
-      <div className="lg:col-span-1 space-y-4">
-        <div className="glass p-4 rounded-2xl space-y-3">
-          <form onSubmit={handleSearch} className="flex gap-2">
-            <input
-              type="text"
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              placeholder="Search all fields..."
-              className={`${inputClass} flex-1`}
-            />
-            <motion.button
-              type="submit"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-            >
-              <Search className="w-4 h-4" />
-              Search
-            </motion.button>
-          </form>
-
-          <div className="grid grid-cols-3 gap-2">
-            <select
-              value={filterStatus}
-              onChange={e => setFilterStatus(e.target.value)}
-              className={inputClass}
-            >
-              <option value="">All statuses</option>
-              <option value="unreviewed">Unreviewed</option>
-              <option value="reviewed">Reviewed</option>
-            </select>
-            <input
-              type="text"
-              value={filterAuthor}
-              onChange={e => setFilterAuthor(e.target.value)}
-              placeholder="Author..."
-              className={inputClass}
-            />
-            <input
-              type="text"
-              value={filterBook}
-              onChange={e => setFilterBook(e.target.value)}
-              placeholder="Book..."
-              className={inputClass}
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <span className="text-xs text-gray-500">
-              {total} job{total !== 1 ? 's' : ''} found
-            </span>
-            <button
-              onClick={() => fetchJobs(page)}
-              className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors"
-            >
-              <RefreshCw className="w-3 h-3" />
-              Refresh
-            </button>
-          </div>
+        <div className="grid grid-cols-3 gap-2">
+          <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} className={INPUT_CLASS}>
+            <option value="">All statuses</option>
+            <option value="unreviewed">Unreviewed</option>
+            <option value="reviewed">Reviewed</option>
+          </select>
+          <input type="text" value={filterAuthor} onChange={e => setFilterAuthor(e.target.value)} placeholder="Author..." className={INPUT_CLASS} />
+          <input type="text" value={filterBook} onChange={e => setFilterBook(e.target.value)} placeholder="Book..." className={INPUT_CLASS} />
         </div>
 
-        {loading && (
-          <div className="flex justify-center py-8">
-            <Loader2 className="w-6 h-6 animate-spin text-purple-400" />
-          </div>
-        )}
-
-        {error && (
-          <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
-            <p className="text-sm text-red-400">{error}</p>
-          </div>
-        )}
-
-        {!loading && !error && jobs.length === 0 && (
-          <div className="glass p-8 rounded-2xl text-center">
-            <FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
-            <p className="text-gray-400">No jobs found</p>
-            <p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
-          </div>
-        )}
-
-        <div className="space-y-2">
-          <AnimatePresence>
-            {jobs.map(job => (
-              <motion.button
-                key={job.id}
-                onClick={() => setSelectedJobId(job.id === selectedJobId ? null : job.id)}
-                className={`w-full text-left glass p-4 rounded-xl transition-all border ${
-                  selectedJobId === job.id
-                    ? 'border-purple-500/50 bg-purple-500/5'
-                    : 'border-white/5 hover:border-white/20 hover:bg-white/5'
-                }`}
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0 }}
-                layout
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1 flex-wrap">
-                      {job.book && (
-                        <span className="text-sm font-medium text-gray-200 truncate">{job.book}</span>
-                      )}
-                      {job.chapter && (
-                        <span className="text-xs text-gray-500">Ch. {job.chapter}</span>
-                      )}
-                      {job.page && (
-                        <span className="text-xs text-gray-500">p. {job.page}</span>
-                      )}
-                    </div>
-                    {job.author && (
-                      <p className="text-xs text-gray-400">{job.author}</p>
-                    )}
-                    <p className="text-xs text-gray-600 mt-1 font-mono">
-                      {new Date(job.submitted_at).toLocaleString()}
-                    </p>
-                  </div>
-                  <div className="flex-shrink-0">
-                    <StatusBadge status={job.status} />
-                  </div>
-                </div>
-              </motion.button>
-            ))}
-          </AnimatePresence>
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-500">{total} job{total !== 1 ? 's' : ''} found</span>
+          <button onClick={() => fetchJobs(page)} className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors">
+            <RefreshCw className="w-3 h-3" /> Refresh
+          </button>
         </div>
-
-        {totalPages > 1 && (
-          <div className="flex items-center justify-center gap-3">
-            <button
-              onClick={() => fetchJobs(page - 1)}
-              disabled={page === 0}
-              className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </button>
-            <span className="text-sm text-gray-400">
-              Page {page + 1} of {totalPages}
-            </span>
-            <button
-              onClick={() => fetchJobs(page + 1)}
-              disabled={page >= totalPages - 1}
-              className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </button>
-          </div>
-        )}
       </div>
 
-      {/* ── Right: Detail panel ── */}
-      <div className="lg:col-span-2">
-        <AnimatePresence mode="wait">
-          {selectedJobId ? (
-            <motion.div
-              key={selectedJobId}
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: 20 }}
-            >
-              <JobDetail
-                jobId={selectedJobId}
-                onClose={() => setSelectedJobId(null)}
-                onReviewed={handleReviewed}
-              />
-            </motion.div>
-          ) : (
-            <motion.div
-              key="empty"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
+      {loading && <div className="flex justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-purple-400" /></div>}
+
+      {error && (
+        <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
+          <p className="text-sm text-red-400">{error}</p>
+        </div>
+      )}
+
+      {!loading && !error && jobs.length === 0 && (
+        <div className="glass p-8 rounded-2xl text-center">
+          <FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
+          <p className="text-gray-400">No jobs found</p>
+          <p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
+        </div>
+      )}
+
+      {/* Results grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+        <AnimatePresence>
+          {jobs.map(job => (
+            <motion.button
+              key={job.id}
+              onClick={() => setSelectedJobId(job.id)}
+              className="text-left glass p-4 rounded-xl border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0 }}
-              className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center"
-              style={{ minHeight: '300px' }}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              layout
             >
-              <Search className="w-10 h-10 mb-3 text-gray-600" />
-              <p className="text-gray-400">Select a job to view and edit details</p>
-            </motion.div>
-          )}
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <StatusBadge status={job.status} />
+              </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">
+                {job.chapter && <span className="text-xs text-gray-500">Ch. {job.chapter}</span>}
+                {job.page && <span className="text-xs text-gray-500">p. {job.page}</span>}
+              </div>
+              {job.author && <p className="text-xs text-gray-400 mt-1">{job.author}</p>}
+              <p className="text-xs text-gray-600 mt-2 font-mono">{new Date(job.submitted_at).toLocaleDateString()}</p>
+            </motion.button>
+          ))}
         </AnimatePresence>
       </div>
 
-    </div>
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-3">
+          <button onClick={() => fetchJobs(page - 1)} disabled={page === 0} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <span className="text-sm text-gray-400">Page {page + 1} of {totalPages}</span>
+          <button onClick={() => fetchJobs(page + 1)} disabled={page >= totalPages - 1} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+    </motion.div>
   )
 }
diff --git a/frontend/src/components/ResultPanel.jsx b/frontend/src/components/ResultPanel.jsx
index 7742ce3..79bc656 100644
--- a/frontend/src/components/ResultPanel.jsx
+++ b/frontend/src/components/ResultPanel.jsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown, Database } from 'lucide-react'
+import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import DOMPurify from 'dompurify'
 
-export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload, onCommitJob, commitLoading, commitResult, editedOcrText, onOcrTextChange }) {
+export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload }) {
   const canvasRef = useRef(null)
   const imgRef = useRef(null)
   const [showAdvanced, setShowAdvanced] = useState(false)
@@ -205,78 +205,46 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
             exit={{ opacity: 0, y: -20 }}
             className="space-y-4"
           >
-            {/* plain_ocr commit mode: image + editable textarea side by side */}
-            {onCommitJob ? (
-              <div className="grid grid-cols-2 gap-4 items-start">
-                {imagePreview && typeof imagePreview === 'string' ? (
-                  <div className="space-y-1">
-                    <p className="text-xs text-gray-400">Source Image</p>
-                    <img
-                      src={imagePreview}
-                      alt="Source"
-                      className="w-full rounded-xl border border-white/10 bg-black/30"
-                    />
-                  </div>
-                ) : (
-                  <div />
-                )}
-                <div className={`space-y-1 ${(!imagePreview || typeof imagePreview !== 'string') ? 'col-span-2' : ''}`}>
-                  <p className="text-xs text-gray-400">
-                    OCR Text <span className="text-purple-400">(edit before committing)</span>
-                  </p>
-                  <textarea
-                    value={editedOcrText}
-                    onChange={e => onOcrTextChange(e.target.value)}
-                    className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-gray-200 font-mono resize-y focus:outline-none focus:border-purple-500/50 transition-colors"
-                    style={{ minHeight: '240px' }}
-                    placeholder="OCR text will appear here..."
-                  />
-                </div>
+            {/* Preview with boxes (grounding modes) */}
+            {imagePreview && result.boxes && result.boxes.length > 0 && (
+              <div className="relative rounded-xl overflow-hidden border border-white/10 bg-black">
+                <img
+                  ref={imgRef}
+                  src={imagePreview}
+                  alt="Result"
+                  className="w-full block"
+                  onLoad={() => {
+                    console.log('🖼️ Image loaded, triggering draw')
+                    setImageLoaded(true)
+                  }}
+                />
+                <canvas
+                  ref={canvasRef}
+                  className="absolute top-0 left-0 w-full h-full pointer-events-none"
+                  style={{ display: 'block' }}
+                />
               </div>
-            ) : (
-              <>
-                {/* Preview with boxes (grounding modes) */}
-                {imagePreview && result.boxes && result.boxes.length > 0 && (
-                  <div className="relative rounded-xl overflow-hidden border border-white/10 bg-black">
-                    <img
-                      ref={imgRef}
-                      src={imagePreview}
-                      alt="Result"
-                      className="w-full block"
-                      onLoad={() => {
-                        console.log('🖼️ Image loaded, triggering draw')
-                        setImageLoaded(true)
-                      }}
-                    />
-                    <canvas
-                      ref={canvasRef}
-                      className="absolute top-0 left-0 w-full h-full pointer-events-none"
-                      style={{ display: 'block' }}
-                    />
-                  </div>
-                )}
-
-                {/* Rendered text result */}
-                <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
-                  {isHTML ? (
-                    <div
-                      className="prose prose-invert prose-sm max-w-none"
-                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
-                      style={{ color: '#e5e7eb' }}
-                    />
-                  ) : isMarkdown ? (
-                    <div className="prose prose-invert prose-sm max-w-none">
-                      <ReactMarkdown>{result.text}</ReactMarkdown>
-                    </div>
-                  ) : (
-                    <pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
-                      {result.text}
-                    </pre>
-                  )}
-                </div>
-              </>
             )}
 
+            {/* Rendered text result */}
+            <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
+              {isHTML ? (
+                <div
+                  className="prose prose-invert prose-sm max-w-none"
+                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
+                  style={{ color: '#e5e7eb' }}
+                />
+              ) : isMarkdown ? (
+                <div className="prose prose-invert prose-sm max-w-none">
+                  <ReactMarkdown>{result.text}</ReactMarkdown>
+                </div>
+              ) : (
+                <pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
+                  {result.text}
+                </pre>
+              )}
+            </div>
+
             {/* Raw Response Viewer */}
             {result.raw_text && (
               <details className="glass rounded-xl overflow-hidden">
@@ -343,44 +311,6 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
               </div>
             </details>
 
-            {/* Commit Job button (plain_ocr only) */}
-            {onCommitJob && (
-              <div className="space-y-2">
-                <motion.button
-                  onClick={onCommitJob}
-                  disabled={commitLoading || commitResult?.success}
-                  className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
-                    commitLoading || commitResult?.success
-                      ? 'opacity-50 cursor-not-allowed bg-white/5'
-                      : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
-                  }`}
-                  whileHover={!commitLoading && !commitResult?.success ? { scale: 1.02 } : {}}
-                  whileTap={!commitLoading && !commitResult?.success ? { scale: 0.98 } : {}}
-                >
-                  {commitLoading ? (
-                    <><Loader2 className="w-4 h-4 animate-spin" /> Committing Job...</>
-                  ) : commitResult?.success ? (
-                    <><CheckCircle2 className="w-4 h-4" /> Job Committed</>
-                  ) : (
-                    <><Database className="w-4 h-4" /> Commit Job</>
-                  )}
-                </motion.button>
-
-                {commitResult?.success && (
-                  <div className="glass p-3 rounded-xl bg-green-500/10 border border-green-500/20">
-                    <p className="text-xs text-green-400">
-                      Job saved &mdash; ID: <span className="font-mono">{commitResult.job?.id}</span>
-                    </p>
-                  </div>
-                )}
-                {commitResult && !commitResult.success && (
-                  <div className="glass p-3 rounded-xl bg-red-500/10 border border-red-500/20">
-                    <p className="text-xs text-red-400">{commitResult.error}</p>
-                  </div>
-                )}
-              </div>
-            )}
-
             {/* Success indicator */}
             <motion.div
               initial={{ scale: 0.9, opacity: 0 }}