Show processed/total counts in task progress indicator

crawler/frontend/src/components/TaskIndicator.tsx

@@ -16,6 +16,8 @@ interface TaskIndicatorProps {
 export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
     const [user, setUser] = useState<User | null>(null);
     const [progressPercentage, setProgressPercentage] = useState<number>(0);
+    const [processed, setProcessed] = useState<number | null>(null);
+    const [total, setTotal] = useState<number | null>(null);
     const [taskStatus, setTaskStatus] = useState<TaskStatus | null>(null);
     const [isCancelling, setIsCancelling] = useState(false);
 
@@ -32,6 +34,8 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
         // Reset state for new task
         setTaskStatus(TaskStatus.PENDING);
         setProgressPercentage(0);
+        setProcessed(null);
+        setTotal(null);
 
         const pollTaskStatus = async () => {
             try {
@@ -53,6 +57,12 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
                     try {
                         const parsedResult: TaskResult = JSON.parse(data.result);
                         setProgressPercentage(parsedResult.progress * 100);
+                        if (parsedResult.processed !== undefined) {
+                            setProcessed(parsedResult.processed);
+                        }
+                        if (parsedResult.total !== undefined) {
+                            setTotal(parsedResult.total);
+                        }
                     } catch {
                         // Ignore parsing errors
                     }
@@ -112,8 +122,18 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
         return <XCircle className="h-3.5 w-3.5 text-red-500" />;
     };
 
+    const getProgressText = () => {
+        if (processed !== null && total !== null && total > 0) {
+            return `${processed} / ${total}`;
+        }
+        return `${Math.round(progressPercentage)}%`;
+    };
+
     const getTooltipContent = () => {
         if (isInProgress) {
+            if (processed !== null && total !== null && total > 0) {
+                return `Processing: ${processed} / ${total} listings (${Math.round(progressPercentage)}%)`;
+            }
             return `Task running: ${Math.round(progressPercentage)}%`;
         }
         if (taskStatus === TaskStatus.SUCCESS) {
@@ -133,7 +153,7 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
                         <div className="flex items-center gap-1.5 cursor-default">
                             {getStatusIcon()}
                             <span className="text-xs text-muted-foreground hidden sm:inline">
-                                {isInProgress ? `${Math.round(progressPercentage)}%` : taskStatus}
+                                {isInProgress ? getProgressText() : taskStatus}
                             </span>
                         </div>
                     </TooltipTrigger>

crawler/frontend/src/types/index.ts

@@ -53,6 +53,8 @@ export interface TaskStatusResponse {
 
 export interface TaskResult {
   progress: number;
+  processed?: number;
+  total?: number;
 }
 
 export interface RefreshListingsResponse {

crawler/tasks/listing_tasks.py

@@ -84,7 +84,7 @@ async def dump_listings_and_monitor(
             )
             task.update_state(
                 state=f"Progress: {progress_ratio * 100}% ({progress} out of {len(missing_ids)})",
-                meta={"progress": progress_ratio},
+                meta={"progress": progress_ratio, "processed": progress, "total": len(missing_ids)},
             )
             await asyncio.sleep(1)