add vis

show_eval.py

@@ -0,0 +1,199 @@
+import os
+import json
+import glob
+import traceback
+from flask import Flask, render_template, jsonify, send_file, request
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)  # Enable CORS for all routes
+
+# Serve the HTML viewer
+@app.route('/')
+def index():
+    return render_template('viewer.html')
+
+# Get list of available evaluations
+@app.route('/api/evals')
+def list_evals():
+    base_dir = request.args.get('path', './eval_results')
+    if not os.path.exists(base_dir):
+        return jsonify({"error": f"Path {base_dir} does not exist"}), 404
+    
+    eval_dirs = []
+    for item in os.listdir(base_dir):
+        full_path = os.path.join(base_dir, item)
+        if os.path.isdir(full_path) and item.startswith('eval_'):
+            eval_dirs.append(item)
+    
+    return jsonify(eval_dirs)
+
+# Get examples for an evaluation
+@app.route('/api/eval/<eval_id>/examples')
+def get_examples(eval_id):
+    base_dir = request.args.get('path', './eval_results')
+    eval_path = os.path.join(base_dir, eval_id)
+    
+    # Try to read examples.json
+    examples_json_path = os.path.join(eval_path, 'examples.json')
+    examples = {}
+    
+    if os.path.exists(examples_json_path):
+        try:
+            with open(examples_json_path, 'r') as f:
+                examples = json.load(f)
+        except json.JSONDecodeError:
+            app.logger.error(f"Error parsing examples.json at {examples_json_path}")
+    
+    # If examples.json doesn't exist or is empty, scan for example directories
+    if not examples:
+        for item in os.listdir(eval_path):
+            if os.path.isdir(os.path.join(eval_path, item)) and item.startswith('example_'):
+                example_id = item.replace('example_', '')
+                example_dir = os.path.join(eval_path, item)
+                
+                # Find the first run and read task.txt
+                run_dirs = []
+                for run_item in os.listdir(example_dir):
+                    run_path = os.path.join(example_dir, run_item)
+                    if os.path.isdir(run_path) and run_item.startswith('run_'):
+                        run_dirs.append(run_item)
+                
+                if run_dirs:
+                    task_path = os.path.join(example_dir, run_dirs[0], 'task.txt')
+                    if os.path.exists(task_path):
+                        with open(task_path, 'r') as f:
+                            examples[example_id] = f.read().strip()
+                    else:
+                        # If no task.txt, try reading from metadata.json
+                        metadata_path = os.path.join(example_dir, run_dirs[0], 'metadata.json')
+                        if os.path.exists(metadata_path):
+                            try:
+                                with open(metadata_path, 'r') as f:
+                                    metadata = json.load(f)
+                                    # Look for task in summary[0].task
+                                    if 'summary' in metadata and metadata['summary'] and 'task' in metadata['summary'][0]:
+                                        examples[example_id] = metadata['summary'][0]['task']
+                            except:
+                                # Default to directory name if all else fails
+                                examples[example_id] = f"Task for {example_id}"
+                        else:
+                            examples[example_id] = f"Task for {example_id}"
+    
+    return jsonify(examples)
+
+# Get runs for an example
+@app.route('/api/eval/<eval_id>/example/<example_id>/runs')
+def get_runs(eval_id, example_id):
+    base_dir = request.args.get('path', './eval_results')
+    example_dir = os.path.join(base_dir, eval_id, f'example_{example_id}')
+    
+    if not os.path.exists(example_dir):
+        return jsonify({"error": f"Example directory not found: {example_dir}"}), 404
+    
+    runs = []
+    for item in os.listdir(example_dir):
+        item_path = os.path.join(example_dir, item)
+        if os.path.isdir(item_path) and item.startswith('run_'):
+            run_id = item
+            
+            # Try to get status from metadata.json
+            metadata_path = os.path.join(item_path, 'metadata.json')
+            status = 'unknown'
+            
+            if os.path.exists(metadata_path):
+                try:
+                    with open(metadata_path, 'r') as f:
+                        metadata = json.load(f)
+                        status = metadata.get('status', 'unknown')
+                except Exception as e:
+                    app.logger.error(f"Error reading metadata.json for {run_id}: {str(e)}")
+            
+            runs.append({'id': run_id, 'status': status})
+    app.logger.info(f"runs: {runs}")
+
+    return jsonify(runs)
+
+# Get metadata for a run
+@app.route('/api/eval/<eval_id>/example/<example_id>/run/<run_id>/metadata')
+def get_metadata(eval_id, example_id, run_id):
+    base_dir = request.args.get('path', './eval_results')
+    run_dir = os.path.join(base_dir, eval_id, f'example_{example_id}', run_id)
+    metadata_path = os.path.join(run_dir, 'metadata.json')
+    app.logger.info(f"metadata: {metadata_path}")
+
+    if not os.path.exists(metadata_path):
+        return jsonify({"error": "Metadata not found", "path": metadata_path}), 404
+    
+    try:
+        with open(metadata_path, 'r') as f:
+            metadata_content = f.read()
+            if not metadata_content.strip():
+                return jsonify({"error": "Metadata file is empty"}), 404
+            
+            metadata = json.loads(metadata_content)
+            return jsonify(metadata)
+    except json.JSONDecodeError as e:
+        error_info = {
+            "error": "Invalid JSON in metadata file",
+            "details": str(e),
+            "path": metadata_path
+        }
+        app.logger.error(f"JSON error in {metadata_path}: {str(e)}")
+        return jsonify(error_info), 400
+    except Exception as e:
+        error_info = {
+            "error": "Error reading metadata file",
+            "details": str(e),
+            "traceback": traceback.format_exc(),
+            "path": metadata_path
+        }
+        app.logger.error(f"Error reading {metadata_path}: {str(e)}")
+        return jsonify(error_info), 500
+
+# Get screenshots for a run
+@app.route('/api/eval/<eval_id>/example/<example_id>/run/<run_id>/screenshots')
+def get_screenshots(eval_id, example_id, run_id):
+    base_dir = request.args.get('path', './eval_results')
+    run_dir = os.path.join(base_dir, eval_id, f'example_{example_id}', run_id)
+    
+    if not os.path.exists(run_dir):
+        return jsonify({"error": f"Run directory not found: {run_dir}"}), 404
+    
+    screenshots = []
+    for ext in ['png', 'jpg', 'jpeg']:
+        pattern = os.path.join(run_dir, f'*.{ext}')
+        for file_path in glob.glob(pattern):
+            filename = os.path.basename(file_path)
+            screenshots.append({
+                'name': filename,
+                'path': f'/api/image?path={file_path}'
+            })
+    
+    # Sort by filename
+    screenshots.sort(key=lambda x: x['name'])
+
+    app.logger.info(f"screenshots: {screenshots}")
+    
+    return jsonify(screenshots)
+
+# Serve an image file
+@app.route('/api/image')
+def get_image():
+    path = request.args.get('path')
+    if not path:
+        return jsonify({"error": "No path provided"}), 400
+    
+    if not os.path.exists(path):
+        return jsonify({"error": f"Image not found at path: {path}"}), 404
+    
+    try:
+        return send_file(path)
+    except Exception as e:
+        return jsonify({"error": f"Error serving image: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    print("Evaluation Server is running at http://localhost:8000")
+    print("Press Ctrl+C to stop the server")
+    
+    app.run(debug=True, port=8000)

templates/viewer.html

@@ -0,0 +1,753 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Computer Agent Evaluation Viewer</title>
+    <style>
+        /* CSS styles here */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1, h2, h3 {
+            color: #333;
+        }
+        select, input, button {
+            padding: 8px 12px;
+            margin: 5px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            background-color: #4a6cf7;
+            color: white;
+            cursor: pointer;
+            border: none;
+        }
+        button:hover {
+            background-color: #3a5ce5;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        .row {
+            display: flex;
+            margin-bottom: 20px;
+        }
+        .col {
+            flex: 1;
+            padding: 0 10px;
+        }
+        .image-viewer {
+            width: 100%;
+            max-height: 500px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-bottom: 10px;
+            position: relative;
+        }
+        .image-viewer img {
+            max-width: 100%;
+            max-height: 450px;
+            display: block;
+            margin: 0 auto;
+        }
+        .image-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+        }
+        .nav-buttons {
+            display: flex;
+            gap: 10px;
+        }
+        .step {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            margin-bottom: 10px;
+            overflow: hidden;
+        }
+        .step-header {
+            background-color: #f0f0f0;
+            padding: 10px;
+            font-weight: bold;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+        }
+        .step-content {
+            padding: 15px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            background-color: #f9f9f9;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .hidden {
+            display: none;
+        }
+        .status-success {
+            color: #22c55e;
+            font-weight: bold;
+        }
+        .status-failure {
+            color: #ef4444;
+            font-weight: bold;
+        }
+        .tabs {
+            display: flex;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 20px;
+        }
+        .tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+        }
+        .tab.active {
+            border-bottom-color: #4a6cf7;
+            font-weight: bold;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        pre {
+            background-color: #f0f0f0;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
+            white-space: pre-wrap;
+        }
+        .error-message {
+            background-color: #fee2e2;
+            color: #b91c1c;
+            padding: 10px;
+            border-radius: 4px;
+            margin: 10px 0;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #3498db;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-left: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Computer Agent Evaluation Viewer</h1>
+        
+        <!-- Path and Eval Selection -->
+        <div style="margin-bottom: 20px; padding: 15px; background-color: #f0f0f0; border-radius: 8px;">
+            <h2>Load Evaluation Data</h2>
+            <div style="display: flex; gap: 10px; margin-top: 10px;">
+                <input type="text" id="base-path" placeholder="Base directory path (leave empty for default)" 
+                       style="flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
+                <button id="refresh-evals-btn">Refresh</button>
+            </div>
+            <div style="margin-top: 10px;">
+                <label for="eval-select">Select Evaluation:</label>
+                <select id="eval-select" style="min-width: 300px;"></select>
+            </div>
+            <div id="load-status" style="margin-top: 10px; font-style: italic;"></div>
+        </div>
+        
+        <!-- Example and Run Selectors -->
+        <div class="row">
+            <div class="col">
+                <label for="example-select">Select Example:</label>
+                <select id="example-select">
+                    <option value="">-- Select Example --</option>
+                </select>
+            </div>
+            <div class="col">
+                <label for="run-select">Select Run:</label>
+                <select id="run-select" disabled>
+                    <option value="">-- Select Run --</option>
+                </select>
+            </div>
+        </div>
+        
+        <!-- Task & Status Display -->
+        <div id="run-details" class="hidden">
+            <div>
+                <h2>Task</h2>
+                <pre id="task-text"></pre>
+            </div>
+            
+            <div>
+                <h2>Run Status</h2>
+                <div id="status-display"></div>
+            </div>
+            
+            <!-- Tabs -->
+            <div class="tabs">
+                <div class="tab active" data-tab="screenshots">Screenshots</div>
+                <div class="tab" data-tab="agent-trace">Agent Trace</div>
+                <div class="tab" data-tab="raw-json">Raw JSON</div>
+            </div>
+            
+            <!-- Screenshots Tab -->
+            <div id="screenshots-tab" class="tab-content active">
+                <div id="no-images" class="hidden">
+                    <p>No screenshots available for this run.</p>
+                </div>
+                <div id="image-container" class="image-viewer hidden">
+                    <img id="current-image" src="" alt="Screenshot">
+                    <p id="image-caption" class="text-center"></p>
+                </div>
+                <div class="image-controls hidden" id="image-controls">
+                    <div class="nav-buttons">
+                        <button id="prev-image">Previous</button>
+                        <span id="image-counter">0 / 0</span>
+                        <button id="next-image">Next</button>
+                    </div>
+                    <input type="range" id="image-slider" min="0" max="0" value="0" style="width: 100%">
+                </div>
+            </div>
+            
+            <!-- Agent Trace Tab -->
+            <div id="agent-trace-tab" class="tab-content">
+                <div id="agent-steps"></div>
+            </div>
+            
+            <!-- Raw JSON Tab -->
+            <div id="raw-json-tab" class="tab-content">
+                <div id="json-loading-indicator" class="hidden">
+                    <p>Loading metadata... <span class="loading"></span></p>
+                </div>
+                <div id="json-error" class="error-message hidden"></div>
+                <pre id="raw-json"></pre>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Application state
+        const appState = {
+            basePath: '',
+            evalId: null,
+            currentExampleId: null,
+            currentRunId: null,
+            currentImages: [],
+            currentImageIndex: 0,
+            loadedData: {
+                examples: {},
+                runs: {},
+                metadata: {},
+                screenshots: {}
+            }
+        };
+        
+        // DOM elements
+        const basePathInput = document.getElementById('base-path');
+        const refreshEvalsBtn = document.getElementById('refresh-evals-btn');
+        const evalSelect = document.getElementById('eval-select');
+        const loadStatusDisplay = document.getElementById('load-status');
+        const exampleSelect = document.getElementById('example-select');
+        const runSelect = document.getElementById('run-select');
+        const runDetails = document.getElementById('run-details');
+        const taskText = document.getElementById('task-text');
+        const statusDisplay = document.getElementById('status-display');
+        const imageContainer = document.getElementById('image-container');
+        const noImages = document.getElementById('no-images');
+        const imageControls = document.getElementById('image-controls');
+        const currentImage = document.getElementById('current-image');
+        const imageCaption = document.getElementById('image-caption');
+        const imageCounter = document.getElementById('image-counter');
+        const imageSlider = document.getElementById('image-slider');
+        const prevImage = document.getElementById('prev-image');
+        const nextImage = document.getElementById('next-image');
+        const agentSteps = document.getElementById('agent-steps');
+        const rawJson = document.getElementById('raw-json');
+        const jsonLoadingIndicator = document.getElementById('json-loading-indicator');
+        const jsonError = document.getElementById('json-error');
+        
+        // Initialize by loading available evaluations
+        refreshEvalsBtn.addEventListener('click', loadEvaluations);
+        
+        // Load evaluations from server
+        async function loadEvaluations() {
+            appState.basePath = basePathInput.value.trim();
+            loadStatusDisplay.textContent = 'Loading evaluations...';
+            refreshEvalsBtn.disabled = true;
+            
+            try {
+                const response = await fetch(`/api/evals?path=${encodeURIComponent(appState.basePath)}`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to load evaluations');
+                }
+                
+                const evals = await response.json();
+                
+                // Clear existing options
+                evalSelect.innerHTML = '<option value="">-- Select Evaluation --</option>';
+                
+                // Add new options
+                evals.forEach(evalId => {
+                    const option = document.createElement('option');
+                    option.value = evalId;
+                    option.textContent = evalId;
+                    evalSelect.appendChild(option);
+                });
+                
+                loadStatusDisplay.textContent = `Loaded ${evals.length} evaluations`;
+                
+                // AUTO-SELECT LATEST EVALUATION
+                if (evals.length > 0) {
+                    // Sort evaluations to get the latest one
+                    evals.sort().reverse();
+                    evalSelect.value = evals[0];
+                    // Trigger change event to load examples
+                    evalSelect.dispatchEvent(new Event('change'));
+                }
+            } catch (err) {
+                console.error('Error loading evaluations:', err);
+                loadStatusDisplay.textContent = `Error: ${err.message}`;
+            } finally {
+                refreshEvalsBtn.disabled = false;
+            }
+        }
+        
+        // Handle evaluation selection
+        evalSelect.addEventListener('change', async () => {
+            appState.evalId = evalSelect.value;
+            
+            if (!appState.evalId) {
+                exampleSelect.innerHTML = '<option value="">-- Select Example --</option>';
+                exampleSelect.disabled = true;
+                runSelect.innerHTML = '<option value="">-- Select Run --</option>';
+                runSelect.disabled = true;
+                runDetails.classList.add('hidden');
+                return;
+            }
+            
+            try {
+                loadStatusDisplay.textContent = 'Loading examples...';
+                evalSelect.disabled = true;
+                
+                const response = await fetch(`/api/eval/${appState.evalId}/examples?path=${encodeURIComponent(appState.basePath)}`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to load examples');
+                }
+                
+                const examples = await response.json();
+                appState.loadedData.examples = examples;
+                
+                // Update example dropdown
+                exampleSelect.innerHTML = '<option value="">-- Select Example --</option>';
+                
+                for (const [exampleId, task] of Object.entries(examples)) {
+                    const option = document.createElement('option');
+                    option.value = exampleId;
+                    option.textContent = exampleId;
+                    option.title = task; // Show task as tooltip
+                    exampleSelect.appendChild(option);
+                }
+                
+                exampleSelect.disabled = false;
+                runSelect.innerHTML = '<option value="">-- Select Run --</option>';
+                runSelect.disabled = true;
+                runDetails.classList.add('hidden');
+                
+                loadStatusDisplay.textContent = `Loaded ${Object.keys(examples).length} examples`;
+                
+                // AUTO-SELECT FIRST EXAMPLE
+                if (Object.keys(examples).length > 0) {
+                    const firstExampleId = Object.keys(examples)[0];
+                    exampleSelect.value = firstExampleId;
+                    // Trigger change event to load runs
+                    exampleSelect.dispatchEvent(new Event('change'));
+                }
+            } catch (err) {
+                console.error('Error loading examples:', err);
+                loadStatusDisplay.textContent = `Error: ${err.message}`;
+            } finally {
+                evalSelect.disabled = false;
+            }
+        });
+        
+        // Example selection
+        exampleSelect.addEventListener('change', async () => {
+            appState.currentExampleId = exampleSelect.value;
+            
+            // Reset run selection
+            runSelect.innerHTML = '<option value="">-- Select Run --</option>';
+            
+            if (!appState.currentExampleId) {
+                runSelect.disabled = true;
+                runDetails.classList.add('hidden');
+                return;
+            }
+            
+            try {
+                loadStatusDisplay.textContent = 'Loading runs...';
+                exampleSelect.disabled = true;
+                
+                const response = await fetch(`/api/eval/${appState.evalId}/example/${appState.currentExampleId}/runs?path=${encodeURIComponent(appState.basePath)}`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Failed to load runs');
+                }
+                
+                const runs = await response.json();
+                appState.loadedData.runs[appState.currentExampleId] = runs;
+                
+                // SORT RUNS by ID (assuming run IDs have timestamps or sequence numbers)
+                runs.sort((a, b) => a.id.localeCompare(b.id, undefined, {numeric: true}));
+                
+                // Update run dropdown with sorted runs
+                runSelect.innerHTML = '<option value="">-- Select Run --</option>';
+                runs.forEach(run => {
+                    const option = document.createElement('option');
+                    option.value = run.id;
+                    option.textContent = `${run.id} (${run.status})`;
+                    option.dataset.status = run.status;
+                    runSelect.appendChild(option);
+                });
+                
+                runSelect.disabled = false;
+                runDetails.classList.add('hidden');
+                
+                loadStatusDisplay.textContent = `Loaded ${runs.length} runs`;
+                
+                // AUTO-SELECT FIRST RUN
+                if (runs.length > 0) {
+                    runSelect.value = runs[0].id;
+                    // Trigger change event to load run data
+                    runSelect.dispatchEvent(new Event('change'));
+                }
+            } catch (err) {
+                console.error('Error loading runs:', err);
+                loadStatusDisplay.textContent = `Error: ${err.message}`;
+            } finally {
+                exampleSelect.disabled = false;
+            }
+        });
+        
+        // Run selection
+        runSelect.addEventListener('change', () => {
+            appState.currentRunId = runSelect.value;
+            
+            if (appState.currentRunId && appState.currentExampleId) {
+                loadRunData(appState.currentExampleId, appState.currentRunId);
+                runDetails.classList.remove('hidden');
+            } else {
+                runDetails.classList.add('hidden');
+            }
+        });
+        
+        // Load run data
+        async function loadRunData(exampleId, runId) {
+            loadStatusDisplay.textContent = 'Loading run data...';
+            runSelect.disabled = true;
+            jsonLoadingIndicator.classList.remove('hidden');
+            jsonError.classList.add('hidden');
+            
+            try {
+                // Get metadata
+                const metadataResponse = await fetch(`/api/eval/${appState.evalId}/example/${exampleId}/run/${runId}/metadata?path=${encodeURIComponent(appState.basePath)}`);
+                let metadata;
+                
+                if (metadataResponse.ok) {
+                    metadata = await metadataResponse.json();
+                } else {
+                    const errorData = await metadataResponse.json();
+                    console.error('Error loading metadata:', errorData);
+                    jsonError.textContent = `Error loading metadata: ${errorData.error || 'Unknown error'}`;
+                    jsonError.classList.remove('hidden');
+                    metadata = null;
+                }
+                
+                appState.loadedData.metadata[exampleId] = appState.loadedData.metadata[exampleId] || {};
+                appState.loadedData.metadata[exampleId][runId] = metadata;
+                
+                // Display task
+                const task = appState.loadedData.examples[exampleId];
+                taskText.textContent = task || "No task available";
+                
+                // Display status
+                let statusHtml = "";
+                
+                if (metadata) {
+                    if (metadata.status === 'completed') {
+                        statusHtml = `<p><span class="status-success">✓ Completed successfully</span></p>`;
+                    } else {
+                        statusHtml = `<p><span class="status-failure">✗ Failed</span></p>`;
+                        if (metadata.error_message) {
+                            statusHtml += `<p>Error: ${metadata.error_message}</p>`;
+                        }
+                    }
+                } else {
+                    statusHtml = "<p>Status information not available</p>";
+                }
+                
+                statusDisplay.innerHTML = statusHtml;
+                
+                // Get screenshots
+                const screenshotsResponse = await fetch(`/api/eval/${appState.evalId}/example/${exampleId}/run/${runId}/screenshots?path=${encodeURIComponent(appState.basePath)}`);
+                const screenshots = await screenshotsResponse.json();
+                
+                appState.loadedData.screenshots[exampleId] = appState.loadedData.screenshots[exampleId] || {};
+                appState.loadedData.screenshots[exampleId][runId] = screenshots;
+                
+                // Load screenshots
+                loadScreenshots(exampleId, runId);
+                
+                // Load agent trace
+                renderAgentTrace(metadata);
+                
+                // Display raw JSON
+                if (metadata) {
+                    rawJson.textContent = JSON.stringify(metadata, null, 2);
+                } else {
+                    rawJson.textContent = "No metadata available";
+                }
+                
+                // Show screenshots tab by default
+                document.querySelector('.tab[data-tab="screenshots"]').click();
+                
+                loadStatusDisplay.textContent = 'Run data loaded successfully';
+            } catch (err) {
+                console.error('Error loading run data:', err);
+                loadStatusDisplay.textContent = `Error: ${err.message}`;
+                jsonError.textContent = `Error loading data: ${err.message}`;
+                jsonError.classList.remove('hidden');
+            } finally {
+                jsonLoadingIndicator.classList.add('hidden');
+                runSelect.disabled = false;
+            }
+        }
+        
+        // Load screenshots
+        function loadScreenshots(exampleId, runId) {
+            appState.currentImages = appState.loadedData.screenshots[exampleId]?.[runId] || [];
+            
+            if (appState.currentImages.length === 0) {
+                imageContainer.classList.add('hidden');
+                imageControls.classList.add('hidden');
+                noImages.classList.remove('hidden');
+                return;
+            }
+            
+            // Setup image viewer
+            noImages.classList.add('hidden');
+            imageContainer.classList.remove('hidden');
+            imageControls.classList.remove('hidden');
+            
+            // Configure slider
+            imageSlider.min = 0;
+            imageSlider.max = appState.currentImages.length - 1;
+            imageSlider.value = 0;
+            
+            // Reset to first image
+            appState.currentImageIndex = 0;
+            updateImageDisplay();
+        }
+        
+        // Update image display
+        function updateImageDisplay() {
+            if (appState.currentImages.length === 0) return;
+            
+            const image = appState.currentImages[appState.currentImageIndex];
+            currentImage.src = image.path;
+            imageCaption.textContent = image.name;
+            imageCounter.textContent = `${appState.currentImageIndex + 1} / ${appState.currentImages.length}`;
+            imageSlider.value = appState.currentImageIndex;
+            
+            // Update button states
+            prevImage.disabled = appState.currentImageIndex === 0;
+            nextImage.disabled = appState.currentImageIndex === appState.currentImages.length - 1;
+        }
+        
+        // Image navigation
+        prevImage.addEventListener('click', () => {
+            if (appState.currentImageIndex > 0) {
+                appState.currentImageIndex--;
+                updateImageDisplay();
+            }
+        });
+        
+        nextImage.addEventListener('click', () => {
+            if (appState.currentImageIndex < appState.currentImages.length - 1) {
+                appState.currentImageIndex++;
+                updateImageDisplay();
+            }
+        });
+        
+        imageSlider.addEventListener('input', () => {
+            appState.currentImageIndex = parseInt(imageSlider.value);
+            updateImageDisplay();
+        });
+        
+        // Tab handling
+        document.querySelectorAll('.tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                // Set active tab
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                
+                // Show active content
+                const tabId = tab.getAttribute('data-tab');
+                document.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.remove('active');
+                });
+                document.getElementById(`${tabId}-tab`).classList.add('active');
+            });
+        });
+        
+        // Render agent trace - UPDATED to show all sections expanded and remove duplicated task title
+        function renderAgentTrace(metadata) {
+            agentSteps.innerHTML = '';
+            
+            if (!metadata || !metadata.summary || metadata.summary.length === 0) {
+                agentSteps.innerHTML = '<p>No agent trace data available</p>';
+                return;
+            }
+            
+            // Process each step
+            metadata.summary.forEach((step, index) => {
+                const stepDiv = document.createElement('div');
+                stepDiv.className = 'step';
+                
+                // Create step header
+                const headerDiv = document.createElement('div');
+                headerDiv.className = 'step-header';
+                
+                let headerText = `Step ${index}`;
+                if (index === 0 && step.task) {
+                    headerText = 'Task';
+                } else if (step.model_output_message) {
+                    headerText = 'Planning';
+                } else if (step.tool_calls) {
+                    headerText = `Action ${index}`;
+                } else if (step.error) {
+                    headerText = 'Error';
+                }
+                
+                headerDiv.innerHTML = `<span>${headerText}</span><span>▲</span>`;
+                stepDiv.appendChild(headerDiv);
+                
+                // Create step content
+                const contentDiv = document.createElement('div');
+                contentDiv.className = 'step-content';
+                // Make all sections visible by default
+                contentDiv.style.display = 'block';
+                
+                let contentHtml = '';
+                
+                // Task information - don't duplicate the title
+                if (index === 0 && step.task) {
+                    // Just show the task content without the "Task:" title
+                    contentHtml += `${step.task}\n\n`;
+                }
+                
+                // Model output and planning
+                if (step.model_output_message && step.model_output_message.content) {
+                    contentHtml += `<strong>Model Output:</strong>\n${step.model_output_message.content}\n\n`;
+                    
+                    if (step.plan) {
+                        contentHtml += `<strong>Plan:</strong>\n${step.plan}\n\n`;
+                    }
+                }
+                
+                // Tool calls
+                if (step.tool_calls && step.tool_calls.length > 0) {
+                    step.tool_calls.forEach(toolCall => {
+                        if (toolCall.function) {
+                            contentHtml += `<strong>Tool Call:</strong> ${toolCall.function.name}\n`;
+                            if (toolCall.function.arguments) {
+                                contentHtml += `<strong>Arguments:</strong>\n${toolCall.function.arguments}\n\n`;
+                            }
+                        }
+                    });
+                }
+                
+                // Model reasoning
+                if (step.model_output) {
+                    contentHtml += `<strong>Model Reasoning:</strong>\n${step.model_output}\n\n`;
+                }
+                
+                // Observations
+                if (step.observations) {
+                    contentHtml += `<strong>Observations:</strong>\n${step.observations}\n\n`;
+                }
+                
+                // Action output
+                if (step.action_output) {
+                    contentHtml += `<strong>Action Output:</strong>\n${step.action_output}\n\n`;
+                }
+                
+                // Errors
+                if (step.error) {
+                    contentHtml += `<strong>Error Type:</strong> ${step.error.type || 'Unknown'}\n`;
+                    if (step.error.message) {
+                        contentHtml += `<strong>Error Message:</strong> ${step.error.message}\n`;
+                    }
+                }
+                
+                contentDiv.textContent = contentHtml || "No content available for this step";
+                stepDiv.appendChild(contentDiv);
+                
+                // Add click handler to toggle content
+                headerDiv.addEventListener('click', () => {
+                    const isHidden = contentDiv.style.display === 'none';
+                    contentDiv.style.display = isHidden ? 'block' : 'none';
+                    headerDiv.querySelector('span:last-child').textContent = isHidden ? '▲' : '▼';
+                });
+                
+                agentSteps.appendChild(stepDiv);
+            });
+            
+            // No need to expand the first step by default since all are now expanded
+        }
+        
+        // Handle keyboard navigation for images
+        document.addEventListener('keydown', (e) => {
+            if (!appState.currentImages || appState.currentImages.length === 0) return;
+            
+            // Check if the screenshots tab is active
+            const screenshotsTab = document.getElementById('screenshots-tab');
+            if (!screenshotsTab.classList.contains('active')) return;
+            
+            if (e.key === 'ArrowLeft' && appState.currentImageIndex > 0) {
+                appState.currentImageIndex--;
+                updateImageDisplay();
+            } else if (e.key === 'ArrowRight' && appState.currentImageIndex < appState.currentImages.length - 1) {
+                appState.currentImageIndex++;
+                updateImageDisplay();
+            }
+        });
+        
+        // Load evaluations on page load
+        document.addEventListener('DOMContentLoaded', loadEvaluations);
+    </script>
+</body>
+</html>