feat(frontend): Add progress indicator during agent generation [SECRT-1883] (#11974)

## Summary
- Add asymptotic progress bar that appears during long-running chat
tasks
- Progress bar shows after 10 seconds with "Working on it..." label and
percentage
- Uses half-life formula: ~50% at 30s, ~75% at 60s, ~87.5% at 90s, etc.
- Creates the classic "game loading bar" effect that never reaches 100%



https://github.com/user-attachments/assets/3c59289e-793c-4a08-b3fc-69e1eef28b1f



## Test plan
- [x] Start a chat that triggers agent generation
- [x] Wait 10+ seconds for the progress bar to appear
- [x] Verify progress bar is centered with label and percentage
- [x] Verify progress follows expected timing (~50% at 30s)
- [x] Verify progress bar disappears when task completes

---------

Co-authored-by: Otto <otto@agpt.co>

autogpt_platform/backend/.gitignore

@@ -19,3 +19,6 @@ load-tests/*.json
 load-tests/*.log
 load-tests/node_modules/*
 migrations/*/rollback*.sql
+
+# Workspace files
+workspaces/

autogpt_platform/frontend/src/components/contextual/Chat/components/ThinkingMessage/ThinkingMessage.tsx

@@ -1,6 +1,8 @@
+import { Progress } from "@/components/atoms/Progress/Progress";
 import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { AIChatBubble } from "../AIChatBubble/AIChatBubble";
+import { useAsymptoticProgress } from "../ToolCallMessage/useAsymptoticProgress";
 
 export interface ThinkingMessageProps {
   className?: string;
@@ -11,18 +13,19 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
   const [showCoffeeMessage, setShowCoffeeMessage] = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const coffeeTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const progress = useAsymptoticProgress(showCoffeeMessage);
 
   useEffect(() => {
     if (timerRef.current === null) {
       timerRef.current = setTimeout(() => {
         setShowSlowLoader(true);
-      }, 8000);
+      }, 3000);
     }
 
     if (coffeeTimerRef.current === null) {
       coffeeTimerRef.current = setTimeout(() => {
         setShowCoffeeMessage(true);
-      }, 10000);
+      }, 8000);
     }
 
     return () => {
@@ -49,9 +52,18 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
           <AIChatBubble>
             <div className="transition-all duration-500 ease-in-out">
               {showCoffeeMessage ? (
-                <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
-                  This could take a few minutes, grab a coffee ☕️
-                </span>
+                <div className="flex flex-col items-center gap-3">
+                  <div className="flex w-full max-w-[280px] flex-col gap-1.5">
+                    <div className="flex items-center justify-between text-xs text-neutral-500">
+                      <span>Working on it...</span>
+                      <span>{Math.round(progress)}%</span>
+                    </div>
+                    <Progress value={progress} className="h-2 w-full" />
+                  </div>
+                  <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
+                    This could take a few minutes, grab a coffee ☕️
+                  </span>
+                </div>
               ) : showSlowLoader ? (
                 <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
                   Taking a bit more time...

autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/useAsymptoticProgress.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Hook that returns a progress value that starts fast and slows down,
+ * asymptotically approaching but never reaching the max value.
+ *
+ * Uses a half-life formula: progress = max * (1 - 0.5^(time/halfLife))
+ * This creates the "game loading bar" effect where:
+ * - 50% is reached at halfLifeSeconds
+ * - 75% is reached at 2 * halfLifeSeconds
+ * - 87.5% is reached at 3 * halfLifeSeconds
+ * - and so on...
+ *
+ * @param isActive - Whether the progress should be animating
+ * @param halfLifeSeconds - Time in seconds to reach 50% progress (default: 30)
+ * @param maxProgress - Maximum progress value to approach (default: 100)
+ * @param intervalMs - Update interval in milliseconds (default: 100)
+ * @returns Current progress value (0-maxProgress)
+ */
+export function useAsymptoticProgress(
+  isActive: boolean,
+  halfLifeSeconds = 30,
+  maxProgress = 100,
+  intervalMs = 100,
+) {
+  const [progress, setProgress] = useState(0);
+  const elapsedTimeRef = useRef(0);
+
+  useEffect(() => {
+    if (!isActive) {
+      setProgress(0);
+      elapsedTimeRef.current = 0;
+      return;
+    }
+
+    const interval = setInterval(() => {
+      elapsedTimeRef.current += intervalMs / 1000;
+      // Half-life approach: progress = max * (1 - 0.5^(time/halfLife))
+      // At t=halfLife: 50%, at t=2*halfLife: 75%, at t=3*halfLife: 87.5%, etc.
+      const newProgress =
+        maxProgress *
+        (1 - Math.pow(0.5, elapsedTimeRef.current / halfLifeSeconds));
+      setProgress(newProgress);
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  }, [isActive, halfLifeSeconds, maxProgress, intervalMs]);
+
+  return progress;
+}