-
-
- );
-};
diff --git a/cua2-front/src/components/mock/Header.tsx b/cua2-front/src/components/mock/Header.tsx
deleted file mode 100644
index 9c9067f35206719cd04381903387d6b082bf63f8..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/Header.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { ConnectionStatus } from './ConnectionStatus';
-import { ProcessingIndicator } from './ProcessingIndicator';
-import { TaskButton } from './TaskButton';
-
-interface HeaderProps {
- isConnected: boolean;
- isAgentProcessing: boolean;
- onSendTask: (content: string, modelId: string) => void;
-}
-
-export const Header: React.FC
-
- {isConnected ? 'Connected' : 'Disconnected'}
-
-
- WebSocket
-
-
-
-
-
-
-
- );
-};
diff --git a/cua2-front/src/components/mock/Metadata.tsx b/cua2-front/src/components/mock/Metadata.tsx
deleted file mode 100644
index 9bd1d95db52bb7b1879b0d0f2484a054508fd437..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/Metadata.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { AgentTrace } from '@/types/agent';
-import React from 'react';
-
-interface MetadataProps {
- trace?: AgentTrace;
-}
-
-export const Metadata: React.FC
-
-
-
-
-
- - CUA2 Agent -
-
-
- );
-};
diff --git a/cua2-front/src/components/mock/ProcessingIndicator.tsx b/cua2-front/src/components/mock/ProcessingIndicator.tsx
deleted file mode 100644
index ad4c0761819d4fe9b47b718d63324cc64b3fb400..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/ProcessingIndicator.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-interface ProcessingIndicatorProps {
- isAgentProcessing: boolean;
-}
-
-export const ProcessingIndicator: React.FCMetadata
- {trace?.metadata ? ( -
-
- ) : (
-
- Total Time
- {trace.metadata.duration.toFixed(2)}s
-
-
- In Tokens
- {trace.metadata.inputTokensUsed.toLocaleString()}
-
-
- Out Tokens
- {trace.metadata.outputTokensUsed.toLocaleString()}
-
-
- Total Steps
- {trace.metadata.numberOfSteps}
-
-
- {trace ? 'Waiting for completion...' : 'No task started yet'}
-
- )}
-
-
-
- PROCESSING...
-
-
- );
-};
diff --git a/cua2-front/src/components/mock/StackSteps.tsx b/cua2-front/src/components/mock/StackSteps.tsx
deleted file mode 100644
index 9fbf768552b20222f0022f35a01981a8290e9c1f..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/StackSteps.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { AgentTrace } from '@/types/agent';
-import { StepCard } from './StepCard';
-
-interface StackStepsProps {
- trace?: AgentTrace;
-}
-
-export const StackSteps: React.FC
-
- );
-};
diff --git a/cua2-front/src/components/mock/StepCard.tsx b/cua2-front/src/components/mock/StepCard.tsx
deleted file mode 100644
index fc74b3eafb1127bf7da424931f077787d02bad73..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/StepCard.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { AgentStep } from '@/types/agent';
-import React from 'react';
-
-interface StepCardProps {
- step: AgentStep;
- index: number;
-}
-
-export const StepCard: React.FCStack Steps
-
- {trace?.steps && trace.steps.length > 0 ? (
-
-
- {trace.steps.map((step, index) => (
-
- ) : (
-
-
- )}
- No steps yet
-Steps will appear as agent progresses
-
- {/* Step Header */}
-
- );
-};
diff --git a/cua2-front/src/components/mock/TaskButton.tsx b/cua2-front/src/components/mock/TaskButton.tsx
deleted file mode 100644
index 34a8d98854028f26ec021e9ea042e54ceb3dae94..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/TaskButton.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-
-interface TaskButtonProps {
- isAgentProcessing: boolean;
- isConnected: boolean;
- onSendTask: (content: string, modelId: string) => void;
-}
-
-export const TaskButton: React.FC
- Step {index + 1}
-
-
-
- {/* Step Image */}
- {step.image && (
- -
-
-
- )}
-
- {/* Thought */}
-
- 
-
- -
-
-
-
- {/* Actions */}
-
-
- - 💭 - Thought -
-{step.thought}
--
-
-
-
- {/* Step Metadata Footer */}
-
-
- - ⚡ - Actions -
--
- {step.actions.map((action, actionIndex) => (
-
- - → - {action} - - ))} -
-
-
-
- Time
- {step.duration.toFixed(2)}s
-
-
- In Tokens
- {step.inputTokensUsed}
-
-
- Out Tokens
- {step.outputTokensUsed}
-
- {
- if (!isAgentProcessing && isConnected) {
- onSendTask(
- "Find the price of a NVIDIA RTX 4090 GPU",
- "Qwen/Qwen3-VL-30B-A3B-Instruct"
- );
- }
- }}
- style={{
- marginTop: '16px',
- padding: '14px 18px',
- background: isAgentProcessing || !isConnected
- ? 'rgba(255, 255, 255, 0.1)'
- : 'rgba(255, 255, 255, 0.15)',
- borderRadius: '10px',
- backdropFilter: 'blur(10px)',
- border: '2px solid rgba(0, 0, 0, 0.3)',
- cursor: isAgentProcessing || !isConnected ? 'not-allowed' : 'pointer',
- transition: 'all 0.3s ease',
- opacity: isAgentProcessing || !isConnected ? 0.6 : 1,
- }}
- onMouseEnter={(e) => {
- if (!isAgentProcessing && isConnected) {
- e.currentTarget.style.background = 'rgba(200, 200, 200, 0.3)';
- e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.5)';
- e.currentTarget.style.transform = 'translateY(-2px)';
- e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)';
- }
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
- e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.3)';
- e.currentTarget.style.transform = 'translateY(0)';
- e.currentTarget.style.boxShadow = 'none';
- }}
- >
-
- );
-};
diff --git a/cua2-front/src/components/mock/VNCStream.tsx b/cua2-front/src/components/mock/VNCStream.tsx
deleted file mode 100644
index b69a820fdb5a9e6fccec2fcbcde8d240bd08a43e..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/VNCStream.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-interface VNCStreamProps {
- vncUrl: string;
-}
-
-export const VNCStream: React.FC
-
-
-
-
- Task
- {!isAgentProcessing && isConnected && (
-
- (click to run)
-
- )}
-
- - Find the price of a NVIDIA RTX 4090 GPU -
-
- Model
-
- - Qwen/Qwen3-VL-30B-A3B-Instruct -
-
-
- );
-};
diff --git a/cua2-front/src/components/mock/index.ts b/cua2-front/src/components/mock/index.ts
deleted file mode 100644
index 0feefce1670f98ea2a8c7b6aaf79252116be22b1..0000000000000000000000000000000000000000
--- a/cua2-front/src/components/mock/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { ConnectionStatus } from './ConnectionStatus';
-export { ProcessingIndicator } from './ProcessingIndicator';
-export { TaskButton } from './TaskButton';
-export { Header } from './Header';
-export { VNCStream } from './VNCStream';
-export { Metadata } from './Metadata';
-export { StepCard } from './StepCard';
-export { StackSteps } from './StackSteps';
diff --git a/cua2-front/src/components/sandbox/SandboxViewer.tsx b/cua2-front/src/components/sandbox/SandboxViewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0a09b62081d482bf9ae5f20d7212783d0cee398d
--- /dev/null
+++ b/cua2-front/src/components/sandbox/SandboxViewer.tsx
@@ -0,0 +1,367 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Typography, CircularProgress, Button, keyframes } from '@mui/material';
+import MonitorIcon from '@mui/icons-material/Monitor';
+import ImageIcon from '@mui/icons-material/Image';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import { AgentTraceMetadata, AgentStep } from '@/types/agent';
+import { useAgentStore, selectError, selectFinalStep, selectSteps, selectTrace } from '@/stores/agentStore';
+import { CompletionView } from './CompletionView';
+import { useGifGenerator } from '@/hooks/useGifGenerator';
+import { useJsonExporter } from '@/hooks/useJsonExporter';
+
+// Animation for live indicator
+const livePulse = keyframes`
+ 0%, 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.7;
+ transform: scale(1.2);
+ }
+`;
+
+interface SandboxViewerProps {
+ vncUrl: string;
+ isAgentProcessing?: boolean;
+ metadata?: AgentTraceMetadata;
+ traceStartTime?: Date;
+ selectedStep?: AgentStep | null; // The step to display in time-travel mode
+ isRunning?: boolean; // Is the agent currently running
+}
+
+export const SandboxViewer: React.FCVNC Stream
-
- {vncUrl ? (
-
- ) : (
-
-
-
-
- )}
- No VNC stream available
-Stream will appear when agent starts
-