Front update 4 (#17)

* add emergency, update stacktrace, update tmeline, update gifgenerator resolution

* update timeline

* update stepcard

* fix: remove trailing whitespaces (pre-commit auto-fix)

* handle new error cases

cua2-front/src/App.tsx

@@ -13,8 +13,10 @@ const App = () => {
   const theme = useMemo(() => getTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode]);
 
   // Initialize WebSocket connection at app level so it persists across route changes
+  const { stopCurrentTask } = useAgentWebSocket({ url: getWebSocketUrl() });
 
-  useAgentWebSocket({ url: getWebSocketUrl() });
+  // Store stopCurrentTask in window for global access
+  (window as Window & { __stopCurrentTask?: () => void }).__stopCurrentTask = stopCurrentTask;
 
   return (
     <ThemeProvider theme={theme}>

cua2-front/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { AppBar, Toolbar, Box, Typography, Chip, IconButton, CircularProgress, keyframes } from '@mui/material';
+import { AppBar, Toolbar, Box, Typography, Chip, IconButton, CircularProgress, keyframes, Button } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
@@ -11,6 +11,7 @@ import OutputIcon from '@mui/icons-material/Output';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
 import { useAgentStore, selectTrace, selectError, selectIsDarkMode, selectMetadata, selectIsConnectingToE2B, selectFinalStep } from '@/stores/agentStore';
 
 interface HeaderProps {
@@ -125,10 +126,16 @@ export const Header: React.FC<HeaderProps> = ({ isAgentProcessing, onBackToHome
   const getTaskStatus = () => {
     // If we have a final step, use its type
     if (finalStep) {
-      if (finalStep.type === 'failure') {
-        return { label: 'Task failed', color: 'error', icon: <CloseIcon sx={{ fontSize: 16, color: 'error.main' }} /> };
+      switch (finalStep.type) {
+        case 'failure':
+          return { label: 'Task failed', color: 'error', icon: <CloseIcon sx={{ fontSize: 16, color: 'error.main' }} /> };
+        case 'stopped':
+          return { label: 'Task stopped', color: 'warning', icon: <StopCircleIcon sx={{ fontSize: 16, color: 'warning.main' }} /> };
+        case 'max_steps_reached':
+          return { label: 'Max steps reached', color: 'warning', icon: <HourglassEmptyIcon sx={{ fontSize: 16, color: 'warning.main' }} /> };
+        case 'success':
+          return { label: 'Completed', color: 'success', icon: <CheckIcon sx={{ fontSize: 16, color: 'success.main' }} /> };
       }
-      return { label: 'Completed', color: 'success', icon: <CheckIcon sx={{ fontSize: 16, color: 'success.main' }} /> };
     }
     // Otherwise check running states
     if (isConnectingToE2B) return { label: 'Connecting to E2B...', color: 'primary', icon: <CircularProgress size={16} thickness={5} sx={{ color: 'primary.main' }} /> };
@@ -141,6 +148,14 @@ export const Header: React.FC<HeaderProps> = ({ isAgentProcessing, onBackToHome
   // Extract model name from modelId (e.g., "Qwen/Qwen3-VL-8B-Instruct" -> "Qwen3-VL-8B-Instruct")
   const modelName = trace?.modelId?.split('/').pop() || 'Unknown Model';
 
+  // Handler for emergency stop
+  const handleEmergencyStop = () => {
+    const stopTask = (window as Window & { __stopCurrentTask?: () => void }).__stopCurrentTask;
+    if (stopTask) {
+      stopTask();
+    }
+  };
+
   return (
     <AppBar
       position="static"
@@ -188,8 +203,34 @@ export const Header: React.FC<HeaderProps> = ({ isAgentProcessing, onBackToHome
             </Typography>
           </Box>
 
-          {/* Right side: Dark Mode */}
+          {/* Right side: Emergency Stop + Dark Mode */}
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            {/* Emergency Stop Button - Only show when agent is processing */}
+            {isAgentProcessing && (
+              <Button
+                onClick={handleEmergencyStop}
+                variant="outlined"
+                size="small"
+                startIcon={<StopCircleIcon />}
+                sx={{
+                  color: 'error.main',
+                  borderColor: 'error.main',
+                  backgroundColor: 'transparent',
+                  fontWeight: 600,
+                  fontSize: '0.8rem',
+                  px: 1.5,
+                  py: 0.5,
+                  textTransform: 'none',
+                  '&:hover': {
+                    backgroundColor: 'error.50',
+                    borderColor: 'error.dark',
+                  },
+                }}
+              >
+                Stop
+              </Button>
+            )}
+
             <IconButton
               onClick={toggleDarkMode}
               size="small"

cua2-front/src/components/sandbox/SandboxViewer.tsx

@@ -4,7 +4,7 @@ import { selectError, selectFinalStep, selectSteps, selectTrace, useAgentStore }
 import { AgentStep, AgentTraceMetadata } from '@/types/agent';
 import ImageIcon from '@mui/icons-material/Image';
 import MonitorIcon from '@mui/icons-material/Monitor';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import PlayCircleIcon from '@mui/icons-material/PlayCircle';
 import { Box, Button, CircularProgress, keyframes, Typography } from '@mui/material';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -58,6 +58,7 @@ export const SandboxViewer: React.FC<SandboxViewerProps> = ({
     trace,
     steps: steps || [],
     metadata: finalStep?.metadata || metadata,
+    finalStep,
   });
 
   // Extract final_answer from the last step, or fallback to last thought
@@ -127,7 +128,7 @@ export const SandboxViewer: React.FC<SandboxViewerProps> = ({
         position: 'relative',
         border: '1px solid',
         borderColor: showStatus
-          ? (finalStep?.type === 'failure' ? 'error.main' : 'success.main')
+          ? ((finalStep?.type === 'failure' || finalStep?.type === 'sandbox_timeout') ? 'error.main' : 'success.main')
           : ((vncUrl || isAgentProcessing) && !selectedStep && !showStatus ? 'primary.main' : 'divider'),
         borderRadius: '12px',
         backgroundColor: 'background.paper',
@@ -191,7 +192,7 @@ export const SandboxViewer: React.FC<SandboxViewerProps> = ({
             // Go Live Button when viewing a specific step
             <Button
               onClick={handleGoLive}
-              startIcon={<PlayArrowIcon sx={{ fontSize: 20 }} />}
+              startIcon={<PlayCircleIcon sx={{ fontSize: 20 }} />}
               sx={{
                 position: 'absolute',
                 top: 12,
@@ -307,6 +308,7 @@ export const SandboxViewer: React.FC<SandboxViewerProps> = ({
             src={vncUrl}
             style={{ width: '100%', height: '100%', border: 'none' }}
             title="OS Stream"
+            lang="en"
           />
         ) : isAgentProcessing ? (
           // Loading state

cua2-front/src/components/sandbox/completionview/CompletionView.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Box, Typography, Button, Divider, Alert, Paper } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
 import AddIcon from '@mui/icons-material/Add';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import AssignmentIcon from '@mui/icons-material/Assignment';
@@ -40,8 +42,43 @@ export const CompletionView: React.FC<CompletionViewProps> = ({
   onDownloadJson,
   onBackToHome,
 }) => {
-  const isSuccess = finalStep.type === 'success';
-  const statusColor = isSuccess ? 'success.main' : 'error.main';
+  const getStatusConfig = () => {
+    switch (finalStep.type) {
+      case 'success':
+        return {
+          icon: <CheckIcon sx={{ fontSize: 28 }} />,
+          title: 'Task Completed Successfully!',
+          color: 'success.main',
+        };
+      case 'stopped':
+        return {
+          icon: <StopCircleIcon sx={{ fontSize: 28 }} />,
+          title: 'Task Stopped',
+          color: 'warning.main',
+        };
+      case 'max_steps_reached':
+        return {
+          icon: <HourglassEmptyIcon sx={{ fontSize: 28 }} />,
+          title: 'Maximum Steps Reached',
+          color: 'warning.main',
+        };
+      case 'sandbox_timeout':
+        return {
+          icon: <AccessTimeIcon sx={{ fontSize: 28 }} />,
+          title: 'Sandbox Timeout',
+          color: 'error.main',
+        };
+      case 'failure':
+      default:
+        return {
+          icon: <CloseIcon sx={{ fontSize: 28 }} />,
+          title: 'Task Failed',
+          color: 'error.main',
+        };
+    }
+  };
+
+  const statusConfig = getStatusConfig();
 
   // Format model name for display
   const formatModelName = (modelId: string) => {
@@ -69,32 +106,32 @@ export const CompletionView: React.FC<CompletionViewProps> = ({
               width: 40,
               height: 40,
               borderRadius: '50%',
-              backgroundColor: statusColor,
+              backgroundColor: statusConfig.color,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              boxShadow: (theme) =>
-                isSuccess
-                  ? `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(102, 187, 106, 0.3)' : 'rgba(102, 187, 106, 0.2)'}`
-                  : `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.3)' : 'rgba(244, 67, 54, 0.2)'}`,
+              boxShadow: (theme) => {
+                const rgba = finalStep.type === 'success'
+                  ? '102, 187, 106'
+                  : (finalStep.type === 'failure' || finalStep.type === 'sandbox_timeout')
+                    ? '244, 67, 54'
+                    : '255, 152, 0';
+                return `0 2px 8px ${theme.palette.mode === 'dark' ? `rgba(${rgba}, 0.3)` : `rgba(${rgba}, 0.2)`}`;
+              },
             }}
           >
-            {isSuccess ? (
-              <CheckIcon sx={{ fontSize: 24, color: 'white' }} />
-            ) : (
-              <CloseIcon sx={{ fontSize: 24, color: 'white' }} />
-            )}
+            {React.cloneElement(statusConfig.icon, { sx: { fontSize: 24, color: 'white' } })}
           </Box>
           <Typography
             variant="h6"
             sx={{
               fontWeight: 700,
-              color: statusColor,
+              color: statusConfig.color,
               fontSize: '1.1rem',
               letterSpacing: '-0.5px',
             }}
           >
-            {isSuccess ? 'Task Completed' : 'Task Failed'}
+            {statusConfig.title}
           </Typography>
         </Box>
       </Box>

cua2-front/src/components/steps/FinalStepCard.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 import { Card, CardContent, Box, Typography } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { useAgentStore } from '@/stores/agentStore';
 
 interface FinalStepCardProps {
@@ -13,7 +16,43 @@ interface FinalStepCardProps {
 export const FinalStepCard: React.FC<FinalStepCardProps> = ({ finalStep, isActive = false }) => {
   const setSelectedStepIndex = useAgentStore((state) => state.setSelectedStepIndex);
 
-  const isSuccess = finalStep.type === 'success';
+  const getStatusConfig = () => {
+    switch (finalStep.type) {
+      case 'success':
+        return {
+          icon: <CheckIcon sx={{ fontSize: 20, color: 'success.main' }} />,
+          label: 'Task completed',
+          color: 'success',
+        };
+      case 'stopped':
+        return {
+          icon: <StopCircleIcon sx={{ fontSize: 20, color: 'warning.main' }} />,
+          label: 'Task stopped',
+          color: 'warning',
+        };
+      case 'max_steps_reached':
+        return {
+          icon: <HourglassEmptyIcon sx={{ fontSize: 20, color: 'warning.main' }} />,
+          label: 'Max steps reached',
+          color: 'warning',
+        };
+      case 'sandbox_timeout':
+        return {
+          icon: <AccessTimeIcon sx={{ fontSize: 20, color: 'error.main' }} />,
+          label: 'Sandbox timeout',
+          color: 'error',
+        };
+      case 'failure':
+      default:
+        return {
+          icon: <CloseIcon sx={{ fontSize: 20, color: 'error.main' }} />,
+          label: 'Task failed',
+          color: 'error',
+        };
+    }
+  };
+
+  const statusConfig = getStatusConfig();
 
   const handleClick = () => {
     // Clicking on final step goes to live mode (null)
@@ -28,40 +67,36 @@ export const FinalStepCard: React.FC<FinalStepCardProps> = ({ finalStep, isActiv
         backgroundColor: 'background.paper',
         border: '1px solid',
         borderColor: (theme) => `${isActive
-          ? isSuccess ? theme.palette.success.main : theme.palette.error.main
+          ? theme.palette[statusConfig.color].main
           : theme.palette.divider} !important`,
         borderRadius: 1.5,
         transition: 'all 0.2s ease',
         cursor: 'pointer',
         boxShadow: isActive
-          ? (theme) => isSuccess
-            ? `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(102, 187, 106, 0.3)' : 'rgba(102, 187, 106, 0.2)'}`
-            : `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.3)' : 'rgba(244, 67, 54, 0.2)'}`
+          ? (theme) => `0 2px 8px ${theme.palette.mode === 'dark'
+              ? `rgba(${statusConfig.color === 'success' ? '102, 187, 106' : statusConfig.color === 'error' ? '244, 67, 54' : '255, 152, 0'}, 0.3)`
+              : `rgba(${statusConfig.color === 'success' ? '102, 187, 106' : statusConfig.color === 'error' ? '244, 67, 54' : '255, 152, 0'}, 0.2)`}`
           : 'none',
         '&:hover': {
-          borderColor: (theme) => `${isSuccess ? theme.palette.success.main : theme.palette.error.main} !important`,
-          boxShadow: (theme) => isSuccess
-            ? `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(102, 187, 106, 0.2)' : 'rgba(102, 187, 106, 0.1)'}`
-            : `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.2)' : 'rgba(244, 67, 54, 0.1)'}`,
+          borderColor: (theme) => `${theme.palette[statusConfig.color].main} !important`,
+          boxShadow: (theme) => `0 2px 8px ${theme.palette.mode === 'dark'
+            ? `rgba(${statusConfig.color === 'success' ? '102, 187, 106' : statusConfig.color === 'error' ? '244, 67, 54' : '255, 152, 0'}, 0.2)`
+            : `rgba(${statusConfig.color === 'success' ? '102, 187, 106' : statusConfig.color === 'error' ? '244, 67, 54' : '255, 152, 0'}, 0.1)`}`,
         },
       }}
     >
       <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 } }}>
         {/* Header with icon */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-          {isSuccess ? (
-            <CheckIcon sx={{ fontSize: 20, color: 'success.main' }} />
-          ) : (
-            <CloseIcon sx={{ fontSize: 20, color: 'error.main' }} />
-          )}
+          {statusConfig.icon}
           <Typography
             sx={{
               fontSize: '0.85rem',
               fontWeight: 700,
-              color: isSuccess ? 'success.main' : 'error.main',
+              color: `${statusConfig.color}.main`,
             }}
           >
-            {isSuccess ? 'Task completed' : 'Task failed'}
+            {statusConfig.label}
           </Typography>
         </Box>
       </CardContent>

cua2-front/src/components/steps/StepCard.tsx

@@ -339,7 +339,14 @@ export const StepCard: React.FC<StepCardProps> = ({ step, index, isLatest = fals
 
         {/* Error */}
         {step.error && (
-          <Box sx={{ mt: 1.5, p: 1, borderRadius: 1, backgroundColor: 'error.main', opacity: 0.1 }}>
+          <Box sx={{
+            mt: 1.5,
+            p: 1,
+            borderRadius: 1,
+            backgroundColor: (theme) => theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.1)' : 'rgba(244, 67, 54, 0.08)',
+            border: '1px solid',
+            borderColor: 'error.main'
+          }}>
             <Typography
               variant="caption"
               sx={{

cua2-front/src/components/steps/StepsList.tsx

@@ -30,19 +30,25 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
   // Check if final step is active (when selectedStepIndex is null and finalStep exists and trace is not running)
   const isFinalStepActive = selectedStepIndex === null && finalStep && !trace?.isRunning;
 
+  // Check if thinking card is active (when in live mode and thinking card is shown)
+  const isThinkingCardActive = selectedStepIndex === null && showThinkingCard;
+
   // Determine the active step index
   // If a specific step is selected, use that
   // If the final step is active, no normal step should be active
+  // If the thinking card is active, no normal step should be active
   // Otherwise, show the last step as active
   const activeStepIndex = selectedStepIndex !== null
     ? selectedStepIndex
     : isFinalStepActive
       ? null  // When final step is active, no normal step is active
-      : (trace?.steps && trace.steps.length > 0 && trace?.isRunning)
-        ? trace.steps.length - 1
-        : (trace?.steps && trace.steps.length > 0)
+      : isThinkingCardActive
+        ? null  // When thinking card is active, no normal step is active
+        : (trace?.steps && trace.steps.length > 0 && trace?.isRunning)
           ? trace.steps.length - 1
-          : null;
+          : (trace?.steps && trace.steps.length > 0)
+            ? trace.steps.length - 1
+            : null;
 
   // Manage ConnectionStepCard display:
   // - Shows when isConnectingToE2B = true OR when we had a connection
@@ -101,44 +107,42 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
     };
   }, [isAgentProcessing, isConnectingToE2B, finalStep]);
 
-  // Auto-scroll to active step when it changes (timeline → steps)
+  // Auto-scroll logic
   useEffect(() => {
-    if (containerRef.current) {
-      isScrollingProgrammatically.current = true;
-      // Use setTimeout to ensure DOM has updated
-      setTimeout(() => {
-        if (containerRef.current) {
-          // Scroll to final step if it's active
-          if (isFinalStepActive) {
-            const finalStepElement = containerRef.current.querySelector(`[data-step-index="final"]`);
-            if (finalStepElement) {
-              finalStepElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center'
-              });
-              setTimeout(() => {
-                isScrollingProgrammatically.current = false;
-              }, 500);
-            }
-          }
-          // Otherwise scroll to active step
-          else if (activeStepIndex !== null && trace?.steps) {
-            const activeStepElement = containerRef.current.querySelector(`[data-step-index="${activeStepIndex}"]`);
-            if (activeStepElement) {
-              activeStepElement.scrollIntoView({
-                behavior: 'smooth',
-                block: 'center'
-              });
-              // Reset flag after scroll animation
-              setTimeout(() => {
-                isScrollingProgrammatically.current = false;
-              }, 500);
-            }
-          }
+    const container = containerRef.current;
+    if (!container) return;
+
+    isScrollingProgrammatically.current = true;
+
+    // Use setTimeout to ensure DOM has updated
+    setTimeout(() => {
+      if (!container) return;
+
+      // LIVE MODE: Always scroll to the bottom (last visible element)
+      if (selectedStepIndex === null) {
+        // Scroll to bottom
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+      // NON-LIVE MODE: Scroll to selected step
+      else {
+        const selectedElement = container.querySelector(`[data-step-index="${selectedStepIndex}"]`);
+        if (selectedElement) {
+          selectedElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          });
         }
-      }, 100);
-    }
-  }, [activeStepIndex, trace?.steps?.length, isFinalStepActive]);
+      }
+
+      // Reset flag after scroll animation
+      setTimeout(() => {
+        isScrollingProgrammatically.current = false;
+      }, 500);
+    }, 100);
+  }, [selectedStepIndex, trace?.steps?.length, showThinkingCard, finalStep]);
 
   // Detect which step is visible when scrolling (steps → timeline)
   useEffect(() => {
@@ -149,6 +153,9 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
       // Don't update if we're scrolling programmatically
       if (isScrollingProgrammatically.current) return;
 
+      // Don't update if agent is running (stay in live mode)
+      if (trace?.isRunning) return;
+
       const containerRect = container.getBoundingClientRect();
       const containerTop = containerRect.top;
       const containerBottom = containerRect.bottom;
@@ -346,7 +353,7 @@ export const StepsList: React.FC<StepsListProps> = ({ trace }) => {
             {/* Show thinking indicator after steps (appears 5 seconds after stream start) */}
             {showThinkingCard && (
               <Box data-step-index="thinking">
-                <ThinkingStepCard />
+                <ThinkingStepCard isActive={isThinkingCardActive} />
               </Box>
             )}
 

cua2-front/src/components/steps/ThinkingStepCard.tsx

@@ -24,19 +24,25 @@ const backgroundPulse = keyframes`
   }
 `;
 
-export const ThinkingStepCard: React.FC = () => {
+interface ThinkingStepCardProps {
+  isActive?: boolean;
+}
+
+export const ThinkingStepCard: React.FC<ThinkingStepCardProps> = ({ isActive = false }) => {
 
   return (
     <Card
       elevation={0}
       sx={{
         backgroundColor: 'background.paper',
-        border: '2px solid',
-        borderColor: 'primary.main',
+        border: '1px solid',
+        borderColor: (theme) => `${isActive ? theme.palette.primary.main : theme.palette.divider} !important`,
         borderRadius: 1.5,
-        animation: `${borderPulse} 2s ease-in-out infinite`,
+        animation: isActive ? `${borderPulse} 2s ease-in-out infinite` : 'none',
         position: 'relative',
         overflow: 'hidden',
+        boxShadow: isActive ? (theme) => `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(79, 134, 198, 0.3)' : 'rgba(79, 134, 198, 0.2)'}` : 'none',
+        transition: 'all 0.2s ease',
         '&::before': {
           content: '""',
           position: 'absolute',
@@ -44,7 +50,7 @@ export const ThinkingStepCard: React.FC = () => {
           left: 0,
           right: 0,
           bottom: 0,
-          animation: `${backgroundPulse} 2s ease-in-out infinite`,
+          animation: isActive ? `${backgroundPulse} 2s ease-in-out infinite` : 'none',
           zIndex: 0,
         },
       }}

cua2-front/src/components/timeline/Timeline.tsx

@@ -2,6 +2,9 @@ import React, { useRef, useEffect } from 'react';
 import { Box, Typography, CircularProgress, Button } from '@mui/material';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CableIcon from '@mui/icons-material/Cable';
 import { AgentTraceMetadata } from '@/types/agent';
 import { useAgentStore, selectSelectedStepIndex, selectFinalStep, selectIsConnectingToE2B, selectIsAgentProcessing } from '@/stores/agentStore';
@@ -23,8 +26,15 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
   const showConnectionIndicator = isConnectingToE2B || isAgentProcessing || (metadata.numberOfSteps > 0) || finalStep;
 
   // Generate array of steps with their status
-  // Show all steps up to maxSteps (200)
-  const totalStepsToShow = metadata.maxSteps;
+  // Only show completed steps + current step if running
+  const totalStepsToShow = isRunning && !isConnectingToE2B
+    ? metadata.numberOfSteps + 1  // Show completed steps + current step
+    : metadata.numberOfSteps;     // Show only completed steps when not running
+
+  // Calculate total width for the line (including finalStep if present)
+  const lineWidth = finalStep
+    ? `calc(${totalStepsToShow} * (40px + 12px) + 52px)` // Add space for finalStep (40px + 12px gap)
+    : `calc(${totalStepsToShow} * (40px + 12px))`;
 
   const steps = Array.from({ length: totalStepsToShow }, (_, index) => ({
     stepNumber: index + 1,
@@ -130,13 +140,14 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
             '&::before': {
               content: '""',
               position: 'absolute',
-              left: "15px",
-              // Calculate width to cover all steps (200 steps * (40px minWidth + 12px gap))
-              width: `calc(${metadata.maxSteps} * (40px + 12px))`,
-              top: '17.5px',
+              left: "25px",
+              // Calculate width to cover visible steps + finalStep if present
+              width: lineWidth,
+              top: '19.5px',
               transform: 'translateY(-50%)',
+              transition: 'width 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
               height: '2px',
-              backgroundColor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+              backgroundColor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.3)',
               zIndex: 0,
               pointerEvents: 'none',
             },
@@ -151,7 +162,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 gap: 0.75,
-                minWidth: 50,
+                minWidth: 40,
                 flexShrink: 0,
                 position: 'relative',
                 zIndex: 1,
@@ -164,14 +175,16 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
+                  height: 28,
+                  width: 28,
                 }}
               >
                 {/* White background to hide the line */}
                 <Box
                   sx={{
                     position: 'absolute',
-                    width: 32,
-                    height: 32,
+                    width: 28,
+                    height: 28,
                     borderRadius: '50%',
                     backgroundColor: 'background.paper',
                     zIndex: 0,
@@ -246,14 +259,16 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
+                    height: 28,
+                    width: 28,
                   }}
                 >
                   {/* White background to hide the line */}
                   <Box
                     sx={{
                       position: 'absolute',
-                      width: step.isCurrent || step.isSelected ? 28 : step.isCompleted ? 22 : 20,
-                      height: step.isCurrent || step.isSelected ? 28 : step.isCompleted ? 22 : 20,
+                      width: 28,
+                      height: 28,
                       borderRadius: '50%',
                       backgroundColor: 'background.paper',
                       zIndex: 0,
@@ -262,39 +277,76 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
 
                   {/* Step dot */}
                   {step.isCurrent ? (
-                    <CircularProgress
-                      size={20}
-                      thickness={5}
+                    <Box
                       sx={{
-                        color: 'primary.main',
                         position: 'relative',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                         zIndex: 1,
                       }}
-                    />
+                    >
+                      <CircularProgress
+                        size={20}
+                        thickness={5}
+                        sx={{
+                          color: 'primary.main',
+                          position: 'absolute',
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          width: 8,
+                          height: 8,
+                          borderRadius: '50%',
+                          backgroundColor: 'white',
+                          position: 'absolute',
+                          pointerEvents: 'none',
+                          boxShadow: '0 0 4px rgba(0,0,0,0.2)',
+                        }}
+                      />
+                    </Box>
                   ) : (
                     <Box
-                      className="step-dot"
                       sx={{
-                        width: step.isSelected ? 20 : step.isCompleted ? 14 : 12,
-                        height: step.isSelected ? 20 : step.isCompleted ? 14 : 12,
-                        borderRadius: '50%',
-                        // Always keep steps in primary color (blue)
-                        backgroundColor: step.isCompleted
-                          ? 'primary.main' // Blue for completed steps
-                          : (theme) => theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', // Light grey for future steps
+                        position: 'relative',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        transition: 'all 0.2s ease',
-                        boxShadow: step.isCompleted || step.isSelected
-                          ? step.isSelected
-                            ? '0 0 8px rgba(255, 167, 38, 0.5)'
-                            : '0 2px 4px rgba(0,0,0,0.1)'
-                          : 'none',
-                        position: 'relative',
                         zIndex: 1,
                       }}
-                    />
+                    >
+                      <Box
+                        className="step-dot"
+                        sx={{
+                          width: step.isSelected ? 20 : step.isCompleted ? 14 : 12,
+                          height: step.isSelected ? 20 : step.isCompleted ? 14 : 12,
+                          borderRadius: '50%',
+                          // Always keep steps in primary color (blue)
+                          backgroundColor: step.isCompleted
+                            ? 'primary.main' // Blue for completed steps
+                            : (theme) => theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300', // Light grey for future steps
+                          transition: 'all 0.2s ease',
+                          boxShadow: step.isCompleted || step.isSelected
+                            ? step.isSelected
+                              ? '0 0 8px rgba(255, 167, 38, 0.5)'
+                              : '0 2px 4px rgba(0,0,0,0.1)'
+                            : 'none',
+                        }}
+                      />
+                      {/* White dot for selected step */}
+                      {step.isSelected && (
+                        <Box
+                          sx={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            backgroundColor: 'white',
+                            position: 'absolute',
+                          }}
+                        />
+                      )}
+                    </Box>
                   )}
                 </Box>
 
@@ -303,13 +355,14 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   variant="caption"
                   sx={{
                     fontSize: '0.7rem',
-                    fontWeight: step.isCompleted || step.isCurrent || step.isSelected ? 700 : 400,
+                    fontWeight: step.isSelected || step.isCurrent ? 900 : 400,
                     color: step.isCurrent
                       ? 'primary.main'
                       : (step.isCompleted || step.isSelected
                         ? 'text.primary'
                         : (theme) => theme.palette.mode === 'dark' ? 'grey.700' : 'grey.400'),
                     whiteSpace: 'nowrap',
+                    lineHeight: 1,
                   }}
                 >
                   {step.stepNumber}
@@ -326,7 +379,7 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 gap: 0.75,
-                minWidth: 50,
+                minWidth: 40,
                 flexShrink: 0,
                 position: 'relative',
                 zIndex: 1,
@@ -345,14 +398,16 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
+                  height: 28,
+                  width: 28,
                 }}
               >
                 {/* White background to hide the line */}
                 <Box
                   sx={{
                     position: 'absolute',
-                    width: selectedStepIndex === null ? 32 : 28,
-                    height: selectedStepIndex === null ? 32 : 28,
+                    width: 28,
+                    height: 28,
                     borderRadius: '50%',
                     backgroundColor: 'background.paper',
                     zIndex: 0,
@@ -363,10 +418,13 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 <Box
                   className="final-step-icon"
                   sx={{
-                    width: selectedStepIndex === null ? 24 : 20,
-                    height: selectedStepIndex === null ? 24 : 20,
+                    width: selectedStepIndex === null ? 20 : 18,
+                    height: selectedStepIndex === null ? 20 : 18,
                     borderRadius: '50%',
-                    backgroundColor: finalStep.type === 'success' ? 'success.main' : 'error.main',
+                    backgroundColor:
+                      finalStep.type === 'success' ? 'success.main' :
+                      finalStep.type === 'stopped' || finalStep.type === 'max_steps_reached' ? 'warning.main' :
+                      'error.main',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -374,7 +432,9 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                     boxShadow: selectedStepIndex === null
                       ? finalStep.type === 'success'
                         ? '0 2px 8px rgba(102, 187, 106, 0.4)'
-                        : '0 2px 8px rgba(244, 67, 54, 0.4)'
+                        : finalStep.type === 'stopped' || finalStep.type === 'max_steps_reached'
+                          ? '0 2px 8px rgba(255, 152, 0, 0.4)'
+                          : '0 2px 8px rgba(244, 67, 54, 0.4)'
                       : '0 2px 4px rgba(0,0,0,0.1)',
                     position: 'relative',
                     zIndex: 1,
@@ -382,6 +442,12 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 >
                   {finalStep.type === 'success' ? (
                     <CheckIcon sx={{ fontSize: 14, color: 'white' }} />
+                  ) : finalStep.type === 'stopped' ? (
+                    <StopCircleIcon sx={{ fontSize: 14, color: 'white' }} />
+                  ) : finalStep.type === 'max_steps_reached' ? (
+                    <HourglassEmptyIcon sx={{ fontSize: 14, color: 'white' }} />
+                  ) : finalStep.type === 'sandbox_timeout' ? (
+                    <AccessTimeIcon sx={{ fontSize: 14, color: 'white' }} />
                   ) : (
                     <CloseIcon sx={{ fontSize: 14, color: 'white' }} />
                   )}
@@ -394,13 +460,20 @@ export const Timeline: React.FC<TimelineProps> = ({ metadata, isRunning }) => {
                 sx={{
                   fontSize: '0.7rem',
                   fontWeight: selectedStepIndex === null ? 700 : 500,
-                  color: finalStep.type === 'success'
-                    ? (selectedStepIndex === null ? 'text.primary' : 'text.secondary')
-                    : 'error.main',
+                  color:
+                    finalStep.type === 'success'
+                      ? (selectedStepIndex === null ? 'text.primary' : 'text.secondary')
+                      : finalStep.type === 'stopped' || finalStep.type === 'max_steps_reached'
+                        ? 'warning.main'
+                        : 'error.main',
                   whiteSpace: 'nowrap',
                 }}
               >
-                {finalStep.type === 'success' ? 'End' : 'Failed'}
+                {finalStep.type === 'success' ? 'End' :
+                 finalStep.type === 'stopped' ? 'Stopped' :
+                 finalStep.type === 'max_steps_reached' ? 'Max Steps' :
+                 finalStep.type === 'sandbox_timeout' ? 'Timeout' :
+                 'Failed'}
               </Typography>
             </Box>
               )}

cua2-front/src/hooks/useAgentWebSocket.ts

@@ -70,8 +70,8 @@ export const useAgentWebSocket = ({ url }: UseAgentWebSocketOptions) => {
         case 'agent_complete':
           setIsAgentProcessing(false);
           setIsConnectingToE2B(false);
-          completeTrace(event.traceMetadata);
-          console.log('Agent complete received:', event.traceMetadata);
+          completeTrace(event.traceMetadata, event.final_state);
+          console.log('Agent complete received:', event.traceMetadata, 'Final state:', event.final_state);
           break;
 
         case 'agent_error':
@@ -157,9 +157,24 @@ export const useAgentWebSocket = ({ url }: UseAgentWebSocketOptions) => {
     };
   }, [setTrace, setIsAgentProcessing, setIsConnectingToE2B, sendMessage, resetAgent]);
 
+  // Function to stop the current task
+  const stopCurrentTask = useCallback(() => {
+    const trace = useAgentStore.getState().trace;
+    if (trace?.id && trace.isRunning) {
+      sendMessage({
+        type: 'stop_task',
+        trace_id: trace.id,
+      });
+      console.log('Stop task sent for trace:', trace.id);
+
+      // Don't update UI state here - wait for backend to send agent_complete with final_state='stopped'
+    }
+  }, [sendMessage]);
+
   return {
     isConnected,
     connectionState,
     manualReconnect,
+    stopCurrentTask,
   };
 };

cua2-front/src/hooks/useGifGenerator.ts

@@ -44,12 +44,10 @@ export const useGifGenerator = ({
         return;
       }
 
-      // Generate GIF with maximum dimensions of 400x200
+      // Generate GIF with original image dimensions
       const options: GifGenerationOptions = {
         images,
         interval: 1.5, // 1.5 seconds per frame
-        gifWidth: 400,
-        gifHeight: 200,
         quality: 10, // Medium quality for good size/quality compromise
       };
 

cua2-front/src/hooks/useJsonExporter.ts

@@ -1,11 +1,12 @@
 import { useCallback } from 'react';
 import { exportTraceToJson, downloadJson } from '@/services/jsonExporter';
-import { AgentTrace, AgentStep, AgentTraceMetadata } from '@/types/agent';
+import { AgentTrace, AgentStep, AgentTraceMetadata, FinalStep } from '@/types/agent';
 
 interface UseJsonExporterOptions {
   trace?: AgentTrace;
   steps: AgentStep[];
   metadata?: AgentTraceMetadata;
+  finalStep?: FinalStep;
 }
 
 interface UseJsonExporterReturn {
@@ -19,6 +20,7 @@ export const useJsonExporter = ({
   trace,
   steps,
   metadata,
+  finalStep,
 }: UseJsonExporterOptions): UseJsonExporterReturn => {
   const downloadTraceAsJson = useCallback(() => {
     if (!trace) {
@@ -27,13 +29,13 @@ export const useJsonExporter = ({
     }
 
     try {
-      const jsonString = exportTraceToJson(trace, steps, metadata);
+      const jsonString = exportTraceToJson(trace, steps, metadata, finalStep);
       const filename = `trace-${trace.id}.json`;
       downloadJson(jsonString, filename);
     } catch (error) {
       console.error('Error exporting trace to JSON:', error);
     }
-  }, [trace, steps, metadata]);
+  }, [trace, steps, metadata, finalStep]);
 
   return {
     downloadTraceAsJson,

cua2-front/src/services/gifGenerator.ts

@@ -49,32 +49,41 @@ const addStepCounter = async (
       ctx.drawImage(img, 0, 0, width, height);
 
       // Configure counter style
-      const fontSize = Math.max(12, Math.floor(height * 0.08));
-      const padding = Math.max(6, Math.floor(height * 0.03));
+      const fontSize = Math.max(11, Math.floor(height * 0.05));
+      const padding = Math.max(5, Math.floor(height * 0.02));
       const text = `${stepNumber}/${totalSteps}`;
 
       ctx.font = `bold ${fontSize}px Arial, sans-serif`;
       const textMetrics = ctx.measureText(text);
       const textWidth = textMetrics.width;
-      const textHeight = fontSize;
-
-      // Position at bottom right
-      const x = width - textWidth - padding * 2;
-      const y = height - padding * 2;
-
-      // Draw semi-transparent rectangle for readability
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
-      ctx.fillRect(
-        x - padding,
-        y - textHeight - padding,
-        textWidth + padding * 2,
-        textHeight + padding * 2
-      );
 
-      // Draw black text
+      // Use actual text metrics for better vertical centering
+      const actualHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+
+      // Calculate box dimensions
+      const boxWidth = textWidth + padding * 2;
+      const boxHeight = actualHeight + padding * 2;
+
+      // Position at bottom right with margin
+      const margin = Math.max(8, Math.floor(height * 0.015));
+      const boxX = width - boxWidth - margin;
+      const boxY = height - boxHeight - margin;
+
+      // Draw semi-transparent rounded rectangle for readability
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
+      const borderRadius = 4;
+      ctx.beginPath();
+      ctx.roundRect(boxX, boxY, boxWidth, boxHeight, borderRadius);
+      ctx.fill();
+
+      // Draw black text centered in the box
       ctx.fillStyle = '#000000';
-      ctx.textBaseline = 'top';
-      ctx.fillText(text, x, y - textHeight);
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'alphabetic';
+      // Position text precisely using actual bounding box metrics
+      const textX = boxX + boxWidth / 2;
+      const textY = boxY + padding + textMetrics.actualBoundingBoxAscent;
+      ctx.fillText(text, textX, textY);
 
       // Convert canvas to base64
       resolve(canvas.toDataURL('image/png'));
@@ -88,6 +97,28 @@ const addStepCounter = async (
   });
 };
 
+/**
+ * Get the dimensions of an image
+ * @param imageSrc Image source (base64 or URL)
+ * @returns Promise resolved with image dimensions
+ */
+const getImageDimensions = (imageSrc: string): Promise<{ width: number; height: number }> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image to get dimensions'));
+    };
+
+    img.src = imageSrc;
+  });
+};
+
 /**
  * Generate a GIF from a list of images (base64 or URLs)
  * @param options GIF generation options
@@ -99,8 +130,8 @@ export const generateGif = async (
   const {
     images,
     interval = 1.5, // 1.5 seconds per frame by default
-    gifWidth = 400,
-    gifHeight = 200,
+    gifWidth,
+    gifHeight,
     quality = 10,
   } = options;
 
@@ -112,10 +143,20 @@ export const generateGif = async (
   }
 
   try {
+    // Get dimensions from the first image if not specified
+    let width = gifWidth;
+    let height = gifHeight;
+
+    if (!width || !height) {
+      const dimensions = await getImageDimensions(images[0]);
+      width = width || dimensions.width;
+      height = height || dimensions.height;
+    }
+
     // Add counter to each image
     const imagesWithCounter = await Promise.all(
       images.map((img, index) =>
-        addStepCounter(img, index + 1, images.length, gifWidth, gifHeight)
+        addStepCounter(img, index + 1, images.length, width, height)
       )
     );
 
@@ -124,8 +165,8 @@ export const generateGif = async (
         {
           images: imagesWithCounter,
           interval,
-          gifWidth,
-          gifHeight,
+          gifWidth: width,
+          gifHeight: height,
           numFrames: imagesWithCounter.length,
           frameDuration: interval,
           sampleInterval: quality,

cua2-front/src/services/jsonExporter.ts

@@ -1,16 +1,46 @@
-import { AgentTrace, AgentStep, AgentTraceMetadata } from '@/types/agent';
+import { AgentTrace, AgentStep, AgentTraceMetadata, FinalStep } from '@/types/agent';
+
+/**
+ * Extract final answer from steps
+ */
+const extractFinalAnswer = (steps: AgentStep[]): string | null => {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+
+  // Try to find final_answer in any step (iterate backwards)
+  for (let i = steps.length - 1; i >= 0; i--) {
+    const step = steps[i];
+
+    if (step.actions && Array.isArray(step.actions)) {
+      const finalAnswerAction = step.actions.find(
+        (action) => action.function_name === 'final_answer'
+      );
+
+      if (finalAnswerAction && finalAnswerAction.parameters?.answer) {
+        return String(finalAnswerAction.parameters.answer);
+      }
+    }
+  }
+
+  // Fallback: return the last thought if no final_answer found
+  const lastStep = steps[steps.length - 1];
+  return lastStep?.thought || null;
+};
 
 /**
  * Export the complete trace as JSON
  * @param trace The agent trace
  * @param steps The trace steps
  * @param metadata The final metadata
+ * @param finalStep The final step with completion status
  * @returns A JSON object containing the entire trace
  */
 export const exportTraceToJson = (
   trace: AgentTrace,
   steps: AgentStep[],
-  metadata?: AgentTraceMetadata
+  metadata?: AgentTraceMetadata,
+  finalStep?: FinalStep
 ): string => {
   const exportData = {
     trace: {
@@ -20,6 +50,11 @@ export const exportTraceToJson = (
       modelId: trace.modelId,
       isRunning: trace.isRunning,
     },
+    completion: finalStep ? {
+      status: finalStep.type,
+      message: finalStep.message || null,
+      finalAnswer: extractFinalAnswer(steps),
+    } : null,
     metadata: metadata || trace.traceMetadata,
     steps: steps.map((step) => ({
       traceId: step.traceId,

cua2-front/src/stores/agentStore.ts

@@ -20,7 +20,7 @@ interface AgentState {
   // Actions
   setTrace: (trace: AgentTrace | undefined) => void;
   updateTraceWithStep: (step: AgentStep, metadata: AgentTraceMetadata) => void;
-  completeTrace: (metadata: AgentTraceMetadata) => void;
+  completeTrace: (metadata: AgentTraceMetadata, finalState?: 'success' | 'stopped' | 'max_steps_reached' | 'error' | 'sandbox_timeout') => void;
   setIsAgentProcessing: (processing: boolean) => void;
   setIsConnectingToE2B: (connecting: boolean) => void;
   setVncUrl: (url: string) => void;
@@ -90,42 +90,62 @@ export const useAgentStore = create<AgentState>()(
           'updateTraceWithStep'
         ),
 
-      // Complete the trace
-      completeTrace: (metadata) =>
-        set(
-          (state) => {
-            if (!state.trace) return state;
-
-            // Preserve existing maxSteps if new metadata has 0
-            const updatedMetadata = {
-              ...metadata,
-              maxSteps: metadata.maxSteps > 0
-                ? metadata.maxSteps
-                : (state.trace.traceMetadata?.maxSteps || 200),
-              completed: true,
-            };
-
-            // Determine if the task succeeded or failed based on error state
-            const finalStep: FinalStep = {
-              type: state.error ? 'failure' : 'success',
-              message: state.error,
-              metadata: updatedMetadata,
-            };
-
-            return {
-              trace: {
-                ...state.trace,
-                isRunning: false,
-                traceMetadata: updatedMetadata,
-              },
-              finalStep,
-              // Keep error in state for display
-              selectedStepIndex: null, // Reset to live mode on completion
-            };
+  // Complete the trace
+  completeTrace: (metadata, finalState?: 'success' | 'stopped' | 'max_steps_reached' | 'error' | 'sandbox_timeout') =>
+    set(
+      (state) => {
+        if (!state.trace) return state;
+
+        // Preserve existing maxSteps if new metadata has 0
+        const updatedMetadata = {
+          ...metadata,
+          maxSteps: metadata.maxSteps > 0
+            ? metadata.maxSteps
+            : (state.trace.traceMetadata?.maxSteps || 200),
+          completed: true,
+        };
+
+        // Determine the final step type based on final_state from backend
+        let stepType: 'success' | 'failure' | 'stopped' | 'max_steps_reached' | 'sandbox_timeout';
+        let stepMessage: string | undefined;
+
+        if (finalState === 'stopped') {
+          stepType = 'stopped';
+          stepMessage = 'Task stopped by user';
+        } else if (finalState === 'max_steps_reached') {
+          stepType = 'max_steps_reached';
+          stepMessage = 'Maximum steps reached';
+        } else if (finalState === 'sandbox_timeout') {
+          stepType = 'sandbox_timeout';
+          stepMessage = 'Sandbox timeout';
+        } else if (finalState === 'error' || state.error) {
+          stepType = 'failure';
+          stepMessage = state.error || 'Task failed';
+        } else {
+          stepType = 'success';
+          stepMessage = undefined;
+        }
+
+        const finalStep: FinalStep = {
+          type: stepType,
+          message: stepMessage,
+          metadata: updatedMetadata,
+        };
+
+        return {
+          trace: {
+            ...state.trace,
+            isRunning: false,
+            traceMetadata: updatedMetadata,
           },
-          false,
-          'completeTrace'
-        ),
+          finalStep,
+          // Keep error in state for display
+          selectedStepIndex: null, // Reset to live mode on completion
+        };
+      },
+      false,
+      'completeTrace'
+    ),
 
       // Set processing state
       setIsAgentProcessing: (isAgentProcessing) =>

cua2-front/src/types/agent.ts

@@ -39,7 +39,7 @@ export interface AgentTraceMetadata {
 }
 
 export interface FinalStep {
-  type: 'success' | 'failure';
+  type: 'success' | 'failure' | 'stopped' | 'max_steps_reached' | 'sandbox_timeout';
   message?: string;
   metadata: AgentTraceMetadata;
 }