Merge pull request #18 from All-Hands-AI/feature/openhands-trajectory-support

Add support for OpenHands trajectory visualization

Author: xingyaoww

src/App.tsx

@@ -4,6 +4,7 @@ import RepositorySelector from './components/RepositorySelector';
 import { WorkflowRunsList } from './components/workflow-runs';
 import RunDetails from './components/RunDetails';
 import RunDetailsSkeleton from './components/loading/RunDetailsSkeleton';
+import { TrajectoryLoadingOverlay } from './components/loading/TrajectoryLoadingOverlay';
 import { WorkflowRun } from './types';
 import { UploadTrajectory } from './components/upload/UploadTrajectory';
 import { EvaluationUpload } from './components/upload/EvaluationUpload';
@@ -294,8 +295,9 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
     const navigate = useNavigate();
     const location = useLocation();
     const [uploadedContent, setUploadedContent] = useState<UploadContent | null>(null);
+    const [isLoadingTrajectory, setIsLoadingTrajectory] = useState<boolean>(false);
 
-    // Check if we should restore from localStorage on initial load
+    // Check for URL parameters and localStorage on initial load
     useEffect(() => {
       // Keep track of load count to prevent cycles
       navigationRef.current.loadCount++;
@@ -311,6 +313,28 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
         console.log('Initial navigation check');
         navigationRef.current.initialNavigationDone = true;
 
+        // Check for data parameter in URL
+        const searchParams = new URLSearchParams(location.search);
+        const dataParam = searchParams.get('data');
+        
+        if (dataParam) {
+          try {
+            // Decode and parse the data parameter
+            const decodedData = atob(decodeURIComponent(dataParam));
+            const parsedData = JSON.parse(decodedData);
+            console.log('Found trajectory data in URL:', parsedData);
+            
+            // Set the uploaded content
+            setUploadedContent(parsedData);
+            
+            // Clear the URL parameter to avoid reloading the same data
+            navigate(location.pathname, { replace: true });
+            return;
+          } catch (error) {
+            console.error('Failed to parse data parameter:', error);
+          }
+        }
+        
         // Only redirect if we're at the root path and have no owner/repo
         if ((!owner || !repo) && location.pathname === '/') {
           const savedRepo = localStorage.getItem('selected_repository');
@@ -325,7 +349,7 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
           }
         }
       }
-    }, [owner, repo, navigate, location.pathname]);
+    }, [owner, repo, navigate, location.pathname, location.search]);
 
     // Handle repository selection
     const handleRepositorySelect = (newOwner: string, newRepo: string) => {
@@ -343,11 +367,20 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
 
     // Handle trajectory upload
     const handleTrajectoryUpload = (content: UploadContent) => {
+      setIsLoadingTrajectory(false);
       setUploadedContent(content);
     };
 
+    // Handle trajectory upload start
+    const handleTrajectoryUploadStart = () => {
+      setIsLoadingTrajectory(true);
+    };
+    
     return (
       <div className="h-screen max-h-screen flex flex-col overflow-hidden bg-gray-50 dark:bg-gray-900">
+        {/* Show loading overlay when processing trajectory */}
+        {isLoadingTrajectory && <TrajectoryLoadingOverlay />}
+        
         {/* Header */}
         <header className={`${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border-b`}>
           <div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
@@ -407,7 +440,10 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
                   <h2 className={`text-lg font-medium mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                     Upload OpenHands Trajectory
                   </h2>
-                  <UploadTrajectory onUpload={handleTrajectoryUpload} />
+                  <UploadTrajectory 
+                    onUpload={handleTrajectoryUpload} 
+                    onUploadStart={handleTrajectoryUploadStart} 
+                  />
                 </div>
 
                 <div>
@@ -449,7 +485,10 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
                   <h2 className={`text-lg font-medium mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                     Or Upload OpenHands Trajectory
                   </h2>
-                  <UploadTrajectory onUpload={handleTrajectoryUpload} />
+                  <UploadTrajectory 
+                    onUpload={handleTrajectoryUpload} 
+                    onUploadStart={handleTrajectoryUploadStart} 
+                  />
                 </div>
 
                 <div>