Side-by-side image/text layout and editable metadata on review

New Job page:
- OCR result now shows source image and editable textarea side by side
- Grounding-box overlay preview moved into the non-commit branch

Browse Jobs / Review page:
- JobDetail uses a 2-column layout: image + read-only info on left,
  all editable fields on right
- Author, book, chapter, and page are now editable inputs (not read-only)
- Text textarea is always editable (for both unreviewed and reviewed jobs)
- Reviewer name pre-filled for reviewed jobs; button becomes "Save Changes"
- Outer grid changed to 1/3 list + 2/3 detail for more review space

Backend:
- PUT /api/jobs/{id}/review now accepts and saves author, book,
  chapter, page alongside reviewed_text and reviewer_name

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

backend/main.py

@@ -603,6 +603,10 @@ async def process_pdf(
 class ReviewRequest(BaseModel):
     reviewed_text: str
     reviewer_name: str
+    author: Optional[str] = None
+    book: Optional[str] = None
+    chapter: Optional[str] = None
+    page: Optional[str] = None
 
 
 def _job_row_to_dict(row) -> Dict[str, Any]:
@@ -811,11 +815,23 @@ async def review_job(job_id: str, body: ReviewRequest):
                     SET status = 'reviewed',
                         reviewed_text = %s,
                         reviewer_name = %s,
-                        reviewed_at = NOW()
+                        reviewed_at = NOW(),
+                        author = %s,
+                        book = %s,
+                        chapter = %s,
+                        page = %s
                     WHERE id = %s
                     RETURNING *
                     """,
-                    (body.reviewed_text, body.reviewer_name, job_id),
+                    (
+                        body.reviewed_text,
+                        body.reviewer_name,
+                        body.author or None,
+                        body.book or None,
+                        body.chapter or None,
+                        body.page or None,
+                        job_id,
+                    ),
                 )
                 row = cur.fetchone()
     except Exception as exc:

frontend/src/components/JobsPanel.jsx

@@ -29,37 +29,39 @@ function StatusBadge({ status }) {
   )
 }
 
-function MetaRow({ icon: Icon, label, value }) {
-  if (!value) return null
-  return (
-    <div className="flex items-start gap-2 text-sm">
-      <Icon className="w-4 h-4 text-purple-400 mt-0.5 flex-shrink-0" />
-      <span className="text-gray-400 flex-shrink-0">{label}:</span>
-      <span className="text-gray-200">{value}</span>
-    </div>
-  )
-}
-
 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 [editChapter, setEditChapter] = useState('')
+  const [editPage, setEditPage] = useState('')
   const [reviewerName, setReviewerName] = useState('')
+
   const [submitting, setSubmitting] = useState(false)
-  const [reviewResult, setReviewResult] = useState(null)
+  const [saveResult, setSaveResult] = useState(null)
 
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setError(null)
-    setReviewResult(null)
+    setSaveResult(null)
 
     axios.get(`${API_BASE}/jobs/${jobId}`)
       .then(res => {
         if (!cancelled) {
-          setJob(res.data)
-          setEditedText(res.data.reviewed_text ?? res.data.ocr_text ?? '')
+          const d = res.data
+          setJob(d)
+          setEditedText(d.reviewed_text ?? d.ocr_text ?? '')
+          setEditAuthor(d.author || '')
+          setEditBook(d.book || '')
+          setEditChapter(d.chapter || '')
+          setEditPage(d.page || '')
+          setReviewerName(d.reviewer_name || '')
         }
       })
       .catch(err => {
@@ -72,23 +74,27 @@ function JobDetail({ jobId, onClose, onReviewed }) {
     return () => { cancelled = true }
   }, [jobId])
 
-  const handleMarkReviewed = async () => {
+  const handleSave = async () => {
     if (!reviewerName.trim()) {
-      setReviewResult({ success: false, error: 'Reviewer name is required.' })
+      setSaveResult({ success: false, error: 'Reviewer name is required.' })
       return
     }
     setSubmitting(true)
-    setReviewResult(null)
+    setSaveResult(null)
     try {
       const res = await axios.put(`${API_BASE}/jobs/${jobId}/review`, {
         reviewed_text: editedText,
         reviewer_name: reviewerName.trim(),
+        author: editAuthor,
+        book: editBook,
+        chapter: editChapter,
+        page: editPage,
       })
       setJob(res.data)
-      setReviewResult({ success: true })
+      setSaveResult({ success: true })
       onReviewed(res.data)
     } catch (err) {
-      setReviewResult({ success: false, error: err.response?.data?.detail || err.message })
+      setSaveResult({ success: false, error: err.response?.data?.detail || err.message })
     } finally {
       setSubmitting(false)
     }
@@ -98,48 +104,38 @@ function JobDetail({ jobId, onClose, onReviewed }) {
     '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 h-full overflow-hidden">
+    <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>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-5 space-y-5">
       {loading && (
-          <div className="flex justify-center py-12">
+        <div className="flex justify-center py-16">
           <Loader2 className="w-8 h-8 animate-spin text-purple-400" />
         </div>
       )}
 
       {error && (
-          <div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
+        <div className="m-5 glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
           <p className="text-sm text-red-400">{error}</p>
         </div>
       )}
 
       {job && !loading && (
-          <>
-            {/* Status + IDs */}
-            <div className="flex items-center gap-3 flex-wrap">
-              <StatusBadge status={job.status} />
-              <span className="text-xs text-gray-500 font-mono">{job.id}</span>
-            </div>
+        <div className="grid grid-cols-2 divide-x divide-white/10 flex-1 min-h-0">
 
-            {/* Metadata */}
-            <div className="glass p-4 rounded-xl space-y-2">
-              <MetaRow icon={User} label="Author" value={job.author} />
-              <MetaRow icon={BookOpen} label="Book" value={job.book} />
-              <MetaRow icon={Hash} label="Chapter" value={job.chapter} />
-              <MetaRow icon={FileText} label="Page" value={job.page} />
-              <MetaRow icon={Calendar} label="Submitted" value={job.submitted_at ? new Date(job.submitted_at).toLocaleString() : null} />
-              {job.mode && <MetaRow icon={FileText} label="Mode" value={job.mode} />}
-            </div>
-
-            {/* Image */}
+          {/* ── 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
@@ -152,54 +148,96 @@ function JobDetail({ jobId, onClose, onReviewed }) {
               />
             </div>
 
-            {/* OCR / Reviewed text */}
-            <div>
-              <p className="text-xs text-gray-400 mb-2">
-                {job.status === 'reviewed' ? 'Reviewed Text' : 'OCR Text (editable)'}
-              </p>
-              {job.status === 'reviewed' ? (
-                <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-60 overflow-y-auto">
-                  <pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
-                    {job.reviewed_text}
-                  </pre>
-                </div>
-              ) : (
-                <textarea
-                  value={editedText}
-                  onChange={e => setEditedText(e.target.value)}
-                  rows={8}
-                  className={`${inputClass} resize-y font-mono`}
-                  placeholder="OCR text will appear here for editing..."
-                />
+            {/* 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 */}
-            {job.status === 'reviewed' && job.ocr_text && (
+            {/* Original OCR text (collapsed, for reviewed jobs) */}
+            {isReviewed && job.ocr_text && (
               <details className="glass rounded-xl overflow-hidden">
-                <summary className="px-4 py-3 cursor-pointer text-sm text-gray-400 hover:bg-white/5 transition-colors">
+                <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-4 py-3 border-t border-white/10">
-                  <pre className="text-sm text-gray-500 whitespace-pre-wrap font-mono">
-                    {job.ocr_text}
-                  </pre>
+                <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>
             )}
-
-            {/* Review info for reviewed jobs */}
-            {job.status === 'reviewed' && (
-              <div className="glass p-4 rounded-xl space-y-2">
-                <MetaRow icon={User} label="Reviewer" value={job.reviewer_name} />
-                <MetaRow icon={Calendar} label="Reviewed" value={job.reviewed_at ? new Date(job.reviewed_at).toLocaleString() : null} />
           </div>
-            )}
 
-            {/* Mark Reviewed form */}
-            {job.status === 'unreviewed' && (
-              <div className="glass p-4 rounded-xl space-y-3 border border-purple-500/20">
-                <p className="text-sm font-medium text-gray-300">Mark as Reviewed</p>
+          {/* ── 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">
+                {isReviewed ? 'Reviewed Text' : 'OCR Text'}
+                <span className="text-purple-400 ml-1">(editable)</span>
+              </label>
+              <textarea
+                value={editedText}
+                onChange={e => setEditedText(e.target.value)}
+                rows={12}
+                className={`${inputClass} resize-y font-mono`}
+                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
@@ -211,18 +249,22 @@ function JobDetail({ jobId, onClose, onReviewed }) {
                 />
               </div>
 
-                {reviewResult && (
-                  <div className={`p-3 rounded-lg text-sm ${reviewResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
-                    {reviewResult.success ? 'Job marked as reviewed!' : reviewResult.error}
+              {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>
               )}
 
               <motion.button
-                  onClick={handleMarkReviewed}
+                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 } : {}}
@@ -230,15 +272,17 @@ function JobDetail({ jobId, onClose, onReviewed }) {
               >
                 {submitting ? (
                   <><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
+                ) : isReviewed ? (
+                  <><Save className="w-4 h-4" /> Save Changes</>
                 ) : (
-                    <><Save className="w-4 h-4" /> Mark Reviewed</>
+                  <><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
                 )}
               </motion.button>
             </div>
-            )}
-          </>
-        )}
           </div>
+
+        </div>
+      )}
     </div>
   )
 }
@@ -280,7 +324,6 @@ export default function JobsPanel() {
     }
   }, [search, filterStatus, filterAuthor, filterBook])
 
-  // Initial load
   useEffect(() => {
     fetchJobs(0)
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -301,10 +344,11 @@ export default function JobsPanel() {
     'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
 
   return (
-    <div className="grid lg:grid-cols-2 gap-6 h-full">
-      {/* Left: Search + List */}
-      <div className="space-y-4">
-        {/* Search form */}
+    // 1/3 list — 2/3 detail on large screens
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+      {/* ── 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
@@ -325,12 +369,11 @@ export default function JobsPanel() {
             </motion.button>
           </form>
 
-          {/* Filters */}
           <div className="grid grid-cols-3 gap-2">
             <select
               value={filterStatus}
               onChange={e => setFilterStatus(e.target.value)}
-              className={`${inputClass} col-span-1`}
+              className={inputClass}
             >
               <option value="">All statuses</option>
               <option value="unreviewed">Unreviewed</option>
@@ -341,14 +384,14 @@ export default function JobsPanel() {
               value={filterAuthor}
               onChange={e => setFilterAuthor(e.target.value)}
               placeholder="Author..."
-              className={`${inputClass} col-span-1`}
+              className={inputClass}
             />
             <input
               type="text"
               value={filterBook}
               onChange={e => setFilterBook(e.target.value)}
               placeholder="Book..."
-              className={`${inputClass} col-span-1`}
+              className={inputClass}
             />
           </div>
 
@@ -366,8 +409,6 @@ export default function JobsPanel() {
           </div>
         </div>
 
-        {/* Results */}
-        <div className="space-y-2">
         {loading && (
           <div className="flex justify-center py-8">
             <Loader2 className="w-6 h-6 animate-spin text-purple-400" />
@@ -388,6 +429,7 @@ export default function JobsPanel() {
           </div>
         )}
 
+        <div className="space-y-2">
           <AnimatePresence>
             {jobs.map(job => (
               <motion.button
@@ -432,7 +474,6 @@ export default function JobsPanel() {
           </AnimatePresence>
         </div>
 
-        {/* Pagination */}
         {totalPages > 1 && (
           <div className="flex items-center justify-center gap-3">
             <button
@@ -456,8 +497,8 @@ export default function JobsPanel() {
         )}
       </div>
 
-      {/* Right: Detail panel */}
-      <div>
+      {/* ── Right: Detail panel ── */}
+      <div className="lg:col-span-2">
         <AnimatePresence mode="wait">
           {selectedJobId ? (
             <motion.div
@@ -465,7 +506,6 @@ export default function JobsPanel() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: 20 }}
-              className="h-full"
             >
               <JobDetail
                 jobId={selectedJobId}
@@ -479,14 +519,16 @@ export default function JobsPanel() {
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center h-full min-h-64"
+              className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center"
+              style={{ minHeight: '300px' }}
             >
               <Search className="w-10 h-10 mb-3 text-gray-600" />
-              <p className="text-gray-400">Select a job to view details</p>
+              <p className="text-gray-400">Select a job to view and edit details</p>
             </motion.div>
           )}
         </AnimatePresence>
       </div>
+
     </div>
   )
 }

frontend/src/components/ResultPanel.jsx

@@ -205,7 +205,37 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
             exit={{ opacity: 0, y: -20 }}
             className="space-y-4"
           >
-            {/* Preview with boxes */}
+            {/* 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>
+              </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
@@ -226,19 +256,7 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
                   </div>
                 )}
 
-            {/* Text result — editable textarea in plain_ocr/commit mode, rendered otherwise */}
-            {onCommitJob ? (
-              <div className="space-y-1">
-                <p className="text-xs text-gray-400">OCR Text <span className="text-purple-400">(editable — correct before committing)</span></p>
-                <textarea
-                  value={editedOcrText}
-                  onChange={e => onOcrTextChange(e.target.value)}
-                  rows={10}
-                  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"
-                  placeholder="OCR text will appear here..."
-                />
-              </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
@@ -256,6 +274,7 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
                     </pre>
                   )}
                 </div>
+              </>
             )}
 
             {/* Raw Response Viewer */}