feat(jobs): introduce extracting_pages status and update job progress handling

- Added a new job status 'extracting_pages' to represent the first sub-phase of thumbnail generation.
- Updated the database schema to include a timestamp for when thumbnail generation starts.
- Enhanced job progress components to handle the new status, including UI updates for displaying progress and status labels.
- Refactored job-related logic to accommodate the two-phase process: extracting pages and generating thumbnails.
- Adjusted SQL queries and job detail responses to include the new fields and statuses.

This change improves the clarity of job processing states and enhances user feedback during the thumbnail generation process.

apps/backoffice/app/components/JobProgress.tsx

@@ -87,8 +87,8 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
   const percent = progress.progress_percent ?? 0;
   const processed = progress.processed_files ?? 0;
   const total = progress.total_files ?? 0;
-  const isThumbnailsPhase = progress.status === "generating_thumbnails";
-  const unitLabel = isThumbnailsPhase ? "thumbnails" : "files";
+  const isPhase2 = progress.status === "extracting_pages" || progress.status === "generating_thumbnails";
+  const unitLabel = progress.status === "extracting_pages" ? "pages" : progress.status === "generating_thumbnails" ? "thumbnails" : "files";
 
   return (
     <div className="p-4 bg-card rounded-lg border border-border">
@@ -112,7 +112,7 @@ export function JobProgress({ jobId, onComplete }: JobProgressProps) {
         )}
       </div>
 
-      {progress.stats_json && !isThumbnailsPhase && (
+      {progress.stats_json && !isPhase2 && (
         <div className="flex flex-wrap gap-3 text-xs">
           <Badge variant="primary">Scanned: {progress.stats_json.scanned_files}</Badge>
           <Badge variant="success">Indexed: {progress.stats_json.indexed_files}</Badge>

apps/backoffice/app/components/JobRow.tsx

@@ -33,7 +33,7 @@ interface JobRowProps {
 }
 
 export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, formatDuration }: JobRowProps) {
-  const isActive = job.status === "running" || job.status === "pending" || job.status === "generating_thumbnails";
+  const isActive = job.status === "running" || job.status === "pending" || job.status === "extracting_pages" || job.status === "generating_thumbnails";
   const [showProgress, setShowProgress] = useState(highlighted || isActive);
 
   const handleComplete = () => {
@@ -52,13 +52,14 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
   const removed = job.stats_json?.removed_files ?? 0;
   const errors = job.stats_json?.errors ?? 0;
 
+  const isPhase2 = job.status === "extracting_pages" || job.status === "generating_thumbnails";
   const isThumbnailPhase = job.status === "generating_thumbnails";
   const isThumbnailJob = job.type === "thumbnail_rebuild" || job.type === "thumbnail_regenerate";
-  const hasThumbnailPhase = isThumbnailPhase || isThumbnailJob;
+  const hasThumbnailPhase = isPhase2 || isThumbnailJob;
 
-  // Files column: index-phase stats only
+  // Files column: index-phase stats only (Phase 1 discovery)
   const filesDisplay =
-    job.status === "running" && !isThumbnailPhase
+    job.status === "running" && !isPhase2
       ? job.total_files != null
         ? `${job.processed_files ?? 0}/${job.total_files}`
         : scanned > 0
@@ -70,8 +71,8 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
           ? `${scanned} scanned`
           : "—";
 
-  // Thumbnails column
-  const thumbInProgress = hasThumbnailPhase && (job.status === "running" || isThumbnailPhase);
+  // Thumbnails column (Phase 2: extracting_pages + generating_thumbnails)
+  const thumbInProgress = hasThumbnailPhase && (job.status === "running" || isPhase2);
   const thumbDisplay =
     thumbInProgress && job.total_files != null
       ? `${job.processed_files ?? 0}/${job.total_files}`
@@ -128,7 +129,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
                 {errors > 0 && <span className="text-error">⚠ {errors}</span>}
               </div>
             )}
-            {job.status === "running" && !isThumbnailPhase && job.total_files != null && (
+            {job.status === "running" && !isPhase2 && job.total_files != null && (
               <MiniProgressBar value={job.processed_files ?? 0} max={job.total_files} className="w-24" />
             )}
           </div>
@@ -155,7 +156,7 @@ export function JobRow({ job, libraryName, highlighted, onCancel, formatDate, fo
             >
               View
             </Link>
-            {(job.status === "pending" || job.status === "running" || job.status === "generating_thumbnails") && (
+            {(job.status === "pending" || job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && (
               <Button 
                 variant="danger" 
                 size="sm"

apps/backoffice/app/components/JobsIndicator.tsx

@@ -78,7 +78,7 @@ export function JobsIndicator() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const runningJobs = activeJobs.filter(j => j.status === "running" || j.status === "generating_thumbnails");
+  const runningJobs = activeJobs.filter(j => j.status === "running" || j.status === "extracting_pages" || j.status === "generating_thumbnails");
   const pendingJobs = activeJobs.filter(j => j.status === "pending");
   const totalCount = activeJobs.length;
 
@@ -222,7 +222,7 @@ export function JobsIndicator() {
                     >
                       <div className="flex items-start gap-3">
                         <div className="mt-0.5">
-                          {(job.status === "running" || job.status === "generating_thumbnails") && <span className="animate-spin inline-block">⏳</span>}
+                          {(job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && <span className="animate-spin inline-block">⏳</span>}
                           {job.status === "pending" && <span>⏸</span>}
                         </div>
                         
@@ -234,7 +234,7 @@ export function JobsIndicator() {
                             </Badge>
                           </div>
                           
-                          {(job.status === "running" || job.status === "generating_thumbnails") && job.progress_percent != null && (
+                          {(job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && job.progress_percent != null && (
                             <div className="flex items-center gap-2 mt-2">
                               <MiniProgressBar value={job.progress_percent} />
                               <span className="text-xs font-medium text-muted-foreground">{job.progress_percent}%</span>

apps/backoffice/app/components/ui/Badge.tsx

@@ -60,6 +60,7 @@ export function Badge({ children, variant = "default", className = "" }: BadgePr
 // Status badge for jobs/tasks
 const statusVariants: Record<string, BadgeVariant> = {
   running: "in-progress",
+  extracting_pages: "in-progress",
   generating_thumbnails: "in-progress",
   success: "completed",
   completed: "completed",
@@ -70,6 +71,7 @@ const statusVariants: Record<string, BadgeVariant> = {
 };
 
 const statusLabels: Record<string, string> = {
+  extracting_pages: "Extracting pages",
   generating_thumbnails: "Thumbnails",
 };