From 218781e038388c273651e14dc7a263846e83bf7d Mon Sep 17 00:00:00 2001
From: Viktor Barzin <vbarzin@gmail.com>
Date: Sun, 1 Feb 2026 19:23:27 +0000
Subject: [PATCH] Add visual progress bar to task indicator

---
 .../frontend/src/components/TaskIndicator.tsx | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/crawler/frontend/src/components/TaskIndicator.tsx b/crawler/frontend/src/components/TaskIndicator.tsx
index 4ca1fa0..c9ebf2d 100644
--- a/crawler/frontend/src/components/TaskIndicator.tsx
+++ b/crawler/frontend/src/components/TaskIndicator.tsx
@@ -147,14 +147,29 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
 
     return (
         <TooltipProvider>
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-2">
                 <Tooltip>
                     <TooltipTrigger asChild>
-                        <div className="flex items-center gap-1.5 cursor-default">
+                        <div className="flex items-center gap-2 cursor-default">
                             {getStatusIcon()}
-                            <span className="text-xs text-muted-foreground hidden sm:inline">
-                                {isInProgress ? getProgressText() : taskStatus}
-                            </span>
+                            {isInProgress && (
+                                <div className="flex items-center gap-2">
+                                    <div className="w-24 h-1.5 bg-primary/20 rounded-full overflow-hidden hidden sm:block">
+                                        <div
+                                            className="h-full bg-primary transition-all duration-300 ease-out rounded-full"
+                                            style={{ width: `${Math.min(progressPercentage, 100)}%` }}
+                                        />
+                                    </div>
+                                    <span className="text-xs text-muted-foreground hidden sm:inline min-w-[60px]">
+                                        {getProgressText()}
+                                    </span>
+                                </div>
+                            )}
+                            {!isInProgress && (
+                                <span className="text-xs text-muted-foreground hidden sm:inline">
+                                    {taskStatus}
+                                </span>
+                            )}
                         </div>
                     </TooltipTrigger>
                     <TooltipContent side="bottom">