Merge branch 'dev' into fix/sentry-performance-integrations

Adds FastApiIntegration and HttpxIntegration to Sentry SDK initialization to enable:
- Detailed span tracking for FastAPI request handling
- Automatic tracing of outgoing HTTP calls (OpenAI, external APIs, etc.)

This improves visibility in Sentry Performance for debugging slow requests and identifying bottlenecks in external API calls.

autogpt_platform/backend/backend/util/metrics.py

@@ -6,6 +6,8 @@ from pydantic import SecretStr
 from sentry_sdk.integrations import DidNotEnable
 from sentry_sdk.integrations.anthropic import AnthropicIntegration
 from sentry_sdk.integrations.asyncio import AsyncioIntegration
+from sentry_sdk.integrations.fastapi import FastApiIntegration
+from sentry_sdk.integrations.httpx import HttpxIntegration
 from sentry_sdk.integrations.launchdarkly import LaunchDarklyIntegration
 from sentry_sdk.integrations.logging import LoggingIntegration
 
@@ -37,6 +39,8 @@ def sentry_init():
         _experiments={"enable_logs": True},
         integrations=[
             AsyncioIntegration(),
+            FastApiIntegration(),  # Traces FastAPI requests with detailed spans
+            HttpxIntegration(),  # Traces outgoing HTTP calls (OpenAI, external APIs)
             LoggingIntegration(sentry_logs_level=logging.INFO),
             AnthropicIntegration(
                 include_prompts=False,

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

@@ -1,8 +1,6 @@
-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;
@@ -13,7 +11,6 @@ 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) {
@@ -52,18 +49,9 @@ export function ThinkingMessage({ className }: ThinkingMessageProps) {
           <AIChatBubble>
             <div className="transition-all duration-500 ease-in-out">
               {showCoffeeMessage ? (
-                <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>
+                <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>
               ) : 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

@@ -1,50 +0,0 @@
-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;
-}