bump

backend/api/rlm_eval_datasets.py

@@ -36,12 +36,20 @@ def _build_hierarchy(rows: list[dict]) -> dict:
 
         ex = examples[ei]
 
-        # Parse code blocks
+        # Parse code blocks, flattening result.stdout -> stdout
         code_blocks = []
         cbj = row.get("code_blocks_json", "")
         if cbj and cbj != "[]":
             try:
-                code_blocks = json.loads(cbj) if isinstance(cbj, str) else cbj
+                raw_blocks = json.loads(cbj) if isinstance(cbj, str) else cbj
+                for cb in raw_blocks:
+                    block = {"code": cb.get("code", "")}
+                    result = cb.get("result", {})
+                    if isinstance(result, dict) and result.get("stdout"):
+                        block["stdout"] = result["stdout"]
+                    elif cb.get("stdout"):
+                        block["stdout"] = cb["stdout"]
+                    code_blocks.append(block)
             except (json.JSONDecodeError, TypeError):
                 code_blocks = []
 

frontend/src/harbor/components/ChatBubble.tsx

@@ -5,11 +5,9 @@ import type { RawStep, RawToolCall, AtifStep } from "../types";
 
 interface RawBubbleProps {
   step: RawStep;
-  // Map of tool_call_id → tool response content for pairing
-  toolResponses?: Map<string, string>;
 }
 
-export function RawBubble({ step, toolResponses }: RawBubbleProps) {
+export function RawBubble({ step }: RawBubbleProps) {
   const [expanded, setExpanded] = useState(false);
 
   if (step.role === "system") {
@@ -71,13 +69,9 @@ export function RawBubble({ step, toolResponses }: RawBubbleProps) {
           )}
 
           {step.tool_calls && step.tool_calls.length > 0 && (
-            <div className="mt-2 space-y-2">
+            <div className="mt-2 space-y-1">
               {step.tool_calls.map((tc, i) => (
-                <ToolCallBlock
-                  key={i}
-                  toolCall={tc}
-                  response={toolResponses?.get(tc.id)}
-                />
+                <ToolCallCommand key={i} toolCall={tc} />
               ))}
             </div>
           )}
@@ -87,13 +81,11 @@ export function RawBubble({ step, toolResponses }: RawBubbleProps) {
   }
 
   if (step.role === "tool") {
-    // Tool responses are shown inline with their tool_call above when possible
-    // Only render standalone if not paired
     return (
       <div className="flex justify-start mb-3">
         <div className="max-w-[85%] rounded-lg px-3 py-2 bg-gray-800 border border-gray-700">
           <div className="text-xs font-medium text-gray-400 mb-1">
-            Tool Output
+            Environment
           </div>
           <ContentBlock
             content={step.content}
@@ -118,6 +110,7 @@ export function RawBubble({ step, toolResponses }: RawBubbleProps) {
 }
 
 // ---- ATIF step bubble ----
+// Returns an array of elements: agent action (right) + environment response (left)
 
 interface AtifBubbleProps {
   step: AtifStep;
@@ -155,11 +148,11 @@ export function AtifBubble({ step }: AtifBubbleProps) {
 
   if (step.source === "agent") {
     return (
-      <div className="flex justify-end mb-3">
-        <div className="max-w-[85%] space-y-2">
-          {/* Reasoning */}
-          {step.reasoning && (
-            <div className="rounded-lg px-4 py-3 bg-violet-900/20 border border-violet-800/30">
+      <>
+        {/* Reasoning (right, violet) */}
+        {step.reasoning && (
+          <div className="flex justify-end mb-3">
+            <div className="max-w-[85%] rounded-lg px-4 py-3 bg-violet-900/20 border border-violet-800/30">
               <div className="text-xs font-medium text-violet-400 mb-1">Reasoning</div>
               <ContentBlock
                 content={step.reasoning}
@@ -168,45 +161,39 @@ export function AtifBubble({ step }: AtifBubbleProps) {
                 maxPreview={300}
               />
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Message / action */}
-          <div className="rounded-lg px-4 py-3 bg-blue-900/30 border border-blue-800/50">
-            <div className="text-xs font-medium text-blue-400 mb-1">Agent</div>
-            {step.message && (
-              <ContentBlock
-                content={step.message}
-                expanded={expanded}
-                onToggle={() => setExpanded(!expanded)}
-                maxPreview={400}
-              />
-            )}
+        {/* Agent message + tool calls (right, blue) */}
+        {(step.message || (step.tool_calls && step.tool_calls.length > 0)) && (
+          <div className="flex justify-end mb-3">
+            <div className="max-w-[85%] rounded-lg px-4 py-3 bg-blue-900/30 border border-blue-800/50">
+              <div className="text-xs font-medium text-blue-400 mb-1">Agent</div>
+              {step.message && (
+                <ContentBlock
+                  content={step.message}
+                  expanded={expanded}
+                  onToggle={() => setExpanded(!expanded)}
+                  maxPreview={400}
+                />
+              )}
 
-            {step.tool_calls && step.tool_calls.length > 0 && (
-              <div className="mt-2 space-y-1">
-                {step.tool_calls.map((tc, i) => (
-                  <div
-                    key={i}
-                    className="rounded bg-amber-900/30 border border-amber-800/30 px-3 py-2"
-                  >
-                    <div className="text-xs text-amber-400 font-medium">
-                      {tc.function}
-                    </div>
-                    {tc.command && (
-                      <pre className="code-block text-amber-200 mt-1 whitespace-pre-wrap break-all">
-                        {tc.command}
-                      </pre>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
+              {step.tool_calls && step.tool_calls.length > 0 && (
+                <div className="mt-2 space-y-1">
+                  {step.tool_calls.map((tc, i) => (
+                    <ToolCallCommand key={i} toolCall={tc} />
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
+        )}
 
-          {/* Observation */}
-          {step.observation && (
-            <div className="rounded-lg px-3 py-2 bg-gray-800 border border-gray-700 self-start">
-              <div className="text-xs font-medium text-gray-400 mb-1">Output</div>
+        {/* Observation / Environment response (LEFT, gray) */}
+        {step.observation && (
+          <div className="flex justify-start mb-3">
+            <div className="max-w-[85%] rounded-lg px-3 py-2 bg-gray-800 border border-gray-700">
+              <div className="text-xs font-medium text-gray-400 mb-1">Environment</div>
               <ContentBlock
                 content={step.observation}
                 expanded={expanded}
@@ -215,23 +202,23 @@ export function AtifBubble({ step }: AtifBubbleProps) {
                 mono
               />
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Step metrics */}
-          {step.metrics && Object.keys(step.metrics).length > 0 && (
-            <div className="flex gap-2 flex-wrap">
-              {Object.entries(step.metrics).map(([k, v]) => (
-                <span
-                  key={k}
-                  className="px-1.5 py-0.5 rounded text-xs bg-gray-800 text-gray-500"
-                >
-                  {k}: {typeof v === "number" ? v.toFixed(2) : String(v)}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+        {/* Step metrics */}
+        {step.metrics && Object.keys(step.metrics).length > 0 && (
+          <div className="flex gap-2 flex-wrap mb-3 justify-end">
+            {Object.entries(step.metrics).map(([k, v]) => (
+              <span
+                key={k}
+                className="px-1.5 py-0.5 rounded text-xs bg-gray-800 text-gray-500"
+              >
+                {k}: {typeof v === "number" ? v.toFixed(2) : String(v)}
+              </span>
+            ))}
+          </div>
+        )}
+      </>
     );
   }
 
@@ -307,15 +294,14 @@ function ContentBlock({
   );
 }
 
-function ToolCallBlock({
+/** Shows just the command portion of a tool call (no hidden expand for response). */
+function ToolCallCommand({
   toolCall,
-  response,
 }: {
-  toolCall: RawToolCall;
-  response?: string;
+  toolCall: { function: string; command?: string; arguments?: Record<string, unknown> };
 }) {
   const [expanded, setExpanded] = useState(false);
-  const cmd = toolCall.command || toolCall.arguments_raw;
+  const cmd = toolCall.command || "";
 
   return (
     <div className="rounded bg-amber-900/30 border border-amber-800/30 px-3 py-2">
@@ -323,12 +309,14 @@ function ToolCallBlock({
         <span className="text-xs text-amber-400 font-medium">
           {toolCall.function}
         </span>
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className="text-xs text-gray-500 hover:text-gray-300"
-        >
-          {expanded ? "[-]" : "[+]"}
-        </button>
+        {cmd.length > 300 && (
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="text-xs text-gray-500 hover:text-gray-300"
+          >
+            {expanded ? "[-]" : "[+]"}
+          </button>
+        )}
       </div>
 
       {cmd && (
@@ -336,15 +324,6 @@ function ToolCallBlock({
           {expanded ? cmd : cmd.length > 300 ? cmd.slice(0, 300) + "..." : cmd}
         </pre>
       )}
-
-      {expanded && response && (
-        <div className="mt-2 rounded bg-gray-800/80 px-2 py-1.5 max-h-64 overflow-y-auto">
-          <div className="text-xs text-gray-400 mb-1">Output:</div>
-          <pre className="code-block text-gray-300 whitespace-pre-wrap break-all">
-            {response}
-          </pre>
-        </div>
-      )}
     </div>
   );
 }

frontend/src/harbor/components/TrajectoryView.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect } from "react";
-import type { DatasetInfo, InstanceDetail, TrajectoryMode, RawStep } from "../types";
+import type { DatasetInfo, InstanceDetail, TrajectoryMode } from "../types";
 import { RawBubble, AtifBubble } from "./ChatBubble";
 import { StepDetail } from "./StepDetail";
 
@@ -19,42 +19,6 @@ export function TrajectoryView({ dataset, detail, mode, isSingle }: Props) {
     }
   }, [detail.instance_id, mode]);
 
-  // Build tool_call_id → response map for raw mode
-  const toolResponseMap = new Map<string, string>();
-  if (mode === "raw") {
-    for (const step of detail.raw_steps) {
-      if (step.role === "tool" && step.tool_call_id) {
-        toolResponseMap.set(step.tool_call_id, step.content);
-      }
-    }
-  }
-
-  // For raw mode, group assistant messages with their tool responses
-  // to avoid showing tool responses twice
-  const pairedToolCallIds = new Set<string>();
-  if (mode === "raw") {
-    for (const step of detail.raw_steps) {
-      if (step.role === "assistant" && step.tool_calls) {
-        for (const tc of step.tool_calls) {
-          if (toolResponseMap.has(tc.id)) {
-            pairedToolCallIds.add(tc.id);
-          }
-        }
-      }
-    }
-  }
-
-  // Filter out standalone tool messages that are already paired
-  const filteredRawSteps: RawStep[] =
-    mode === "raw"
-      ? detail.raw_steps.filter((step) => {
-          if (step.role === "tool" && step.tool_call_id) {
-            return !pairedToolCallIds.has(step.tool_call_id);
-          }
-          return true;
-        })
-      : [];
-
   return (
     <div
       className={`flex flex-col overflow-hidden ${
@@ -89,16 +53,13 @@ export function TrajectoryView({ dataset, detail, mode, isSingle }: Props) {
       <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
         {mode === "raw" && (
           <>
-            {filteredRawSteps.map((step) => (
-              <RawBubble
-                key={step.index}
-                step={step}
-                toolResponses={toolResponseMap}
-              />
+            {detail.raw_steps.map((step) => (
+              <RawBubble key={step.index} step={step} />
             ))}
-            {filteredRawSteps.length === 0 && (
+            {detail.raw_steps.length === 0 && (
               <div className="text-center text-gray-500 text-sm mt-8">
-                No raw trajectory data available
+                No raw trajectory data available.
+                {detail.n_atif_steps > 0 && " Try ATIF Steps mode."}
               </div>
             )}
           </>