Merge pull request #22 from All-Hands-AI/fix/trajectory-viewer-crashes-and-routing

Fix trajectory visualizer bugs: null checking and routing

Author: neubig

src/App.tsx

@@ -295,21 +295,20 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
     // Check if it's an array (OpenHands trajectory format)
     if (Array.isArray(data)) {
       // Check if it has OpenHands specific fields
-      if (data.length > 0 && 
-          (('action' in data[0] && 'source' in data[0]) || 
+      if (data.length > 0 &&
+          (('action' in data[0] && 'source' in data[0]) ||
            ('observation' in data[0] && 'source' in data[0]))) {
-        console.log('Detected OpenHands trajectory format');
-        
-        // Convert to JSONL format for the JsonlViewer
-        const jsonlContent = JSON.stringify({ history: data });
+        console.log('Detected OpenHands trajectory format - using trajectory viewer');
+
+        // Return as trajectory data for the trajectory viewer
         return {
           content: {
-            jsonlContent,
-            fileType: 'jsonl'
+            trajectoryData: data,
+            fileType: 'trajectory'
           }
         };
       }
-      
+
       // For other array formats
       return {
         content: {
@@ -334,14 +333,13 @@ const App: React.FC<{ router?: boolean }> = ({ router = true }) => {
 
     // Check if it has history array (trajectory-visualizer format)
     if (data.history && Array.isArray(data.history)) {
-      console.log('Detected history array format');
-      
-      // Already in the right format, just convert to JSONL
-      const jsonlContent = JSON.stringify(data);
+      console.log('Detected history array format - using trajectory viewer');
+
+      // Return the history array for the trajectory viewer
       return {
         content: {
-          jsonlContent,
-          fileType: 'jsonl'
+          trajectoryData: data.history,
+          fileType: 'trajectory'
         }
       };
     }

src/components/RunDetails.tsx

@@ -5,6 +5,7 @@ import RunDetailsSkeleton from './loading/RunDetailsSkeleton';
 import ArtifactDetails from './artifacts/ArtifactDetails';
 import RunHeader from './header/RunHeader';
 import JsonlViewer from '../components/jsonl-viewer/JsonlViewer';
+import TrajectoryList from './share/trajectory-list';
 
 interface RunDetailsProps {
   owner: string;
@@ -107,6 +108,17 @@ const RunDetails: React.FC<RunDetailsProps> = ({ owner, repo, run, initialConten
     );
   }
 
+  // Check if we're dealing with trajectory data
+  if (artifactContent?.content?.fileType === 'trajectory' && artifactContent?.content?.trajectoryData) {
+    console.log('Rendering Trajectory viewer with', artifactContent.content.trajectoryData.length, 'items');
+
+    return (
+      <div className="flex flex-col h-full">
+        <TrajectoryList trajectory={artifactContent.content.trajectoryData} />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* Main Content */}

src/components/share/trajectory-list-items/agent-state-change.tsx

@@ -11,11 +11,11 @@ export const AgentStateChangeComponent: React.FC<AgentStateChangeProps> = ({ sta
   let stateText = '';
   let thought = '';
 
-  if ('args' in state) {
-    stateText = state.args.agent_state;
-    thought = state.args.thought;
-  } else if ('extras' in state) {
-    stateText = state.extras.agent_state;
+  if ('args' in state && state.args) {
+    stateText = state.args.agent_state || '';
+    thought = state.args.thought || '';
+  } else if ('extras' in state && state.extras) {
+    stateText = state.extras.agent_state || '';
   }
 
   return (

src/components/share/trajectory-list.tsx

@@ -59,7 +59,7 @@ export const TrajectoryList: React.FC<TrajectoryListProps> = ({ trajectory }) =>
   return (
     <div className="flex flex-col h-full">
       {/* Trajectory Items List */}
-      <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
+      <div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 shadow-sm">
         <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center">
           <h3 className="text-lg font-medium text-gray-900 dark:text-white">
             Trajectory Items ({filteredTrajectory.length} items)

src/components/upload/UploadTrajectory.tsx

@@ -18,17 +18,13 @@ export const UploadTrajectory: React.FC<UploadTrajectoryProps> = ({
     // Check if it's an array (OpenHands trajectory format)
     if (Array.isArray(content)) {
       // Check if it has OpenHands specific fields
-      if (content.length > 0 && 
-          (('action' in content[0] && 'source' in content[0]) || 
+      if (content.length > 0 &&
+          (('action' in content[0] && 'source' in content[0]) ||
            ('observation' in content[0] && 'source' in content[0]))) {
-        console.log('Detected OpenHands trajectory format');
-        
-        // Convert to JSONL format for the JsonlViewer
-        const jsonlContent = JSON.stringify({ history: content });
-        return {
-          jsonlContent,
-          fileType: 'jsonl'
-        };
+        console.log('Detected OpenHands trajectory format - using trajectory viewer');
+
+        // Return the content directly for the trajectory viewer
+        return content;
       }
       return content;
     }
@@ -43,14 +39,10 @@ export const UploadTrajectory: React.FC<UploadTrajectoryProps> = ({
 
     // Check if it has history array (trajectory-visualizer format)
     if (content.history && Array.isArray(content.history)) {
-      console.log('Detected history array format');
-      
-      // Already in the right format, just convert to JSONL
-      const jsonlContent = JSON.stringify(content);
-      return {
-        jsonlContent,
-        fileType: 'jsonl'
-      };
+      console.log('Detected history array format - using trajectory viewer');
+
+      // Return the history array for the trajectory viewer
+      return content.history;
     }
 
     // If it's not in a recognized format, return as is and let the converter handle it