next_updates

app/models.py

@@ -37,11 +37,18 @@ class Job(db.Model):
     reuse_results = db.Column(db.Boolean, default=False)
     results_path = db.Column(db.String(500), nullable=True)
     
+    # Phase 2 Remote Tracking
+    remote_queue_id = db.Column(db.String(50), nullable=True)
+    remote_task_ids = db.Column(db.Text, nullable=True)  # JSON string: {scenario_name: task_id}
+    remote_results = db.Column(db.Text, nullable=True)   # JSON string: {scenario_name: [status, link]}
+    queue_log = db.Column(db.Text, nullable=True)
+    
     def get_status_icon(self):
         icons = {
-            'in_progress': '🟠',
+            'waiting': '⌛',
-            'passed': '🟢',
+            'in_progress': '🔄',
-            'failed': '🔴',
+            'passed': '✅',
+            'failed': '❌',
             'aborted': '⚫'
         }
         return icons.get(self.status, '⚪')

app/routes/jobs.py

@@ -5,14 +5,15 @@ from app import db
 import json
 import subprocess
 import os
+import requests
+import random
+import string
+
+def generate_remote_id(length=6):
+    return ''.join(random.choices(string.digits, k=length))
 
 jobs_bp = Blueprint('jobs', __name__, url_prefix='/jobs')
 
-@jobs_bp.route('/submit')
-@login_required
-def submit():
-    return render_template('jobs/submit.html')
-
 @jobs_bp.route('/debug/test-step2')
 @login_required
 def debug_test_step2():
@@ -270,7 +271,7 @@ def submit_step2():
         flash('Please select at least one scenario', 'error')
         return redirect(url_for('jobs.submit'))
     
-    return render_template('jobs/submit_step3.html', 
+    return render_template('jobs/submit_review.html', 
                          branch_name=branch_name, 
                          scenarios=selected_scenarios,
                          scenario_map=scenario_map)
@@ -318,50 +319,14 @@ def submit_step2_validated():
         print(f"[ERROR] Step2 - Traceback: {traceback.format_exc()}")
         flash(f'Error loading scenario selection: {str(e)}', 'error')
         return redirect(url_for('jobs.submit'))
-@login_required
-def submit_step2():
-    branch_name = request.form.get('branch_name')
-    selected_scenarios = request.form.getlist('scenarios')
-    
-    if not selected_scenarios:
-        flash('Please select at least one scenario', 'error')
-        return redirect(url_for('jobs.submit'))
-    
-    return render_template('jobs/submit_step3.html', 
-                         branch_name=branch_name, 
-                         scenarios=selected_scenarios)
-
-@jobs_bp.route('/submit/step3', methods=['POST'])
-@login_required
-def submit_step3():
-    branch_name = request.form.get('branch_name')
-    scenarios_json = request.form.get('scenarios')
-    scenario_map_json = request.form.get('scenario_map')
-    environment = request.form.get('environment')
-    
-    try:
-        scenarios = json.loads(scenarios_json) if scenarios_json else []
-        scenario_map = json.loads(scenario_map_json) if scenario_map_json else {}
-    except json.JSONDecodeError:
-        flash('Invalid scenario data', 'error')
-        return redirect(url_for('jobs.submit'))
-    
-    return render_template('jobs/submit_step4.html',
-                         branch_name=branch_name,
-                         scenarios=scenarios,
-                         scenario_map=scenario_map,
-                         environment=environment)
-
 @jobs_bp.route('/submit/final', methods=['POST'])
 @login_required
 def submit_final():
     branch_name = request.form.get('branch_name')
     scenarios_json = request.form.get('scenarios')
     scenario_map_json = request.form.get('scenario_map')
-    environment = request.form.get('environment')
+    environment = request.form.get('environment', 'staging')
-    test_mode = request.form.get('test_mode')
+    test_mode = request.form.get('test_mode', 'simulator')
-    keep_devbenches = request.form.get('keep_devbenches') == 'on'
-    reuse_results = request.form.get('reuse_results') == 'on'
     
     try:
         scenarios = json.loads(scenarios_json) if scenarios_json else []
@@ -370,22 +335,44 @@ def submit_final():
         flash('Invalid scenario data', 'error')
         return redirect(url_for('jobs.submit'))
     
+    # Generate Remote IDs
+    remote_queue_id = generate_remote_id()
+    remote_task_ids = {s: generate_remote_id() for s in scenarios}
+    
+    # Prepare Remote Payload
+    # Format: {"source": "branch", "queue_id": ["staging", {"task_id": "path"}]}
+    payload = {
+        "source": branch_name,
+        remote_queue_id: [
+            environment,
+            {remote_task_ids[s]: scenario_map.get(s, s) for s in scenarios}
+        ]
+    }
+    
+    # Trigger Remote Queue
+    try:
+        remote_url = "http://asf-server.duckdns.org:8080/api/queue"
+        response = requests.post(remote_url, json=payload, timeout=10)
+        response.raise_for_status()
+        print(f"[DEBUG] Remote queue triggered: {response.json()}")
+    except Exception as e:
+        print(f"[ERROR] Failed to trigger remote queue: {e}")
+        flash(f'Warning: Job saved but failed to trigger remote queue: {str(e)}', 'warning')
+    
     job = Job(
         user_id=current_user.id,
         branch_name=branch_name,
-        scenarios=json.dumps(scenarios),  # Store as JSON string
+        scenarios=json.dumps(scenarios),
         environment=environment,
         test_mode=test_mode,
-        keep_devbenches=keep_devbenches,
+        status='waiting', # Start with waiting (sand watch)
-        reuse_results=reuse_results,
+        remote_queue_id=remote_queue_id,
-        status='in_progress'
+        remote_task_ids=json.dumps(remote_task_ids)
     )
     
     db.session.add(job)
     db.session.commit()
     
-    # TODO: Start test execution in background using scenario_map
-    
     flash('Test job submitted successfully', 'success')
     return redirect(url_for('dashboard.index'))
 
@@ -409,23 +396,96 @@ def view_job(job_id):
         'submitted_at': job.submitted_at.strftime('%Y-%m-%d %H:%M:%S'),
         'completed_at': job.completed_at.strftime('%Y-%m-%d %H:%M:%S') if job.completed_at else None,
         'duration': job.duration,
-        'keep_devbenches': job.keep_devbenches,
+        'remote_queue_id': job.remote_queue_id,
-        'reuse_results': job.reuse_results,
+        'remote_task_ids': job.remote_task_ids,
-        'results_path': job.results_path
+        'remote_results': job.remote_results,
+        'queue_log': job.queue_log
     })
 
 @jobs_bp.route('/<int:job_id>/abort', methods=['POST'])
 @login_required
 def abort_job(job_id):
+    return jsonify({'error': 'Abort functionality is not implemented yet'}), 400
+
+@jobs_bp.route('/<int:job_id>/status')
+@login_required
+def get_job_status(job_id):
     job = Job.query.get_or_404(job_id)
     
-    if not current_user.is_admin and job.user_id != current_user.id:
+    if job.status not in ['passed', 'failed', 'aborted']:
-        return jsonify({'error': 'Access denied'}), 403
+        # Poll remote API
+        try:
+            # 1. Check Queue Status
+            status_url = f"http://asf-server.duckdns.org:8080/api/status/{job.remote_queue_id}"
+            q_resp = requests.get(status_url, timeout=5)
+            if q_resp.status_code == 200:
+                q_data = q_resp.json()
+                remote_status = q_data.get('status', '').lower()
                 
-    if job.status == 'in_progress':
+                if remote_status == 'running':
-        job.status = 'aborted'
+                    job.status = 'in_progress'
-        db.session.commit()
+                elif remote_status == 'waiting':
-        # TODO: Kill the running process
+                    job.status = 'waiting'
-        return jsonify({'success': True})
                 
-    return jsonify({'error': 'Job is not in progress'}), 400
+                # 2. Fetch Queue Logs if running
+                if remote_status == 'running':
+                    log_url = f"http://asf-server.duckdns.org:8080/results/{job.remote_queue_id}/queue_log.txt"
+                    l_resp = requests.get(log_url, timeout=5)
+                    if l_resp.status_code == 200:
+                        job.queue_log = l_resp.text
+
+            # 3. Check Task Statuses and Results
+            task_ids = json.loads(job.remote_task_ids) if job.remote_task_ids else {}
+            results = json.loads(job.remote_results) if job.remote_results else {}
+            
+            all_finished = True
+            any_failed = False
+            
+            for scenario, task_id in task_ids.items():
+                # If we don't have result yet, check it
+                if scenario not in results:
+                    # Check task status
+                    t_status_url = f"http://asf-server.duckdns.org:8080/api/status/{task_id}"
+                    t_resp = requests.get(t_status_url, timeout=2)
+                    if t_resp.status_code == 200:
+                        t_data = t_resp.json()
+                        if t_data.get('status') == 'Finished':
+                            # Fetch results
+                            res_url = f"http://asf-server.duckdns.org:8080/results/{job.remote_queue_id}/{task_id}/final_summary.json"
+                            r_resp = requests.get(res_url, timeout=2)
+                            if r_resp.status_code == 200:
+                                r_data = r_resp.json()
+                                # User says: {"SCENARIO_NAME": ["PASS/FAIL", "link"]}
+                                # We need to find the key that matches our scenario (case insensitive maybe?)
+                                for key, val in r_data.items():
+                                    if key.upper() == scenario.upper():
+                                        results[scenario] = val
+                                        if val[0] == 'FAIL':
+                                            any_failed = True
+                                        break
+                            else:
+                                all_finished = False
+                        else:
+                            all_finished = False
+                    else:
+                        all_finished = False
+                else:
+                    if results[scenario][0] == 'FAIL':
+                        any_failed = True
+            
+            if all_finished and task_ids:
+                job.status = 'failed' if any_failed else 'passed'
+                job.completed_at = db.session.query(db.func.now()).scalar()
+            
+            job.remote_results = json.dumps(results)
+            db.session.commit()
+            
+        except Exception as e:
+            print(f"[ERROR] Status polling failed: {e}")
+            
+    return jsonify({
+        'status': job.status,
+        'status_icon': job.get_status_icon(),
+        'remote_results': job.remote_results,
+        'queue_log': job.queue_log
+    })

app/static/css/style.css

@@ -623,8 +623,8 @@ body {
     background: #9ca3af;
     cursor: not-allowed;
     opacity: 0.6;
-}/
+}
-* Scenario Tree Styles */
+/* Scenario Tree Styles */
 .scenario-controls {
     margin: 20px 0;
     padding: 15px;
@@ -754,3 +754,33 @@ input[type="checkbox"]:indeterminate::before {
     color: var(--primary);
     font-size: 14px;
 }
+
+/* Scenario Table & Log Styles */
+#scenarioTable {
+    margin-top: 10px;
+    font-size: 13px;
+}
+
+#scenarioTable th {
+    padding: 10px;
+    background: #f8fafc;
+}
+
+#scenarioTable td {
+    padding: 10px;
+}
+
+#queue-log {
+    border: 1px solid #333;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
+}
+
+#scenarioSearch:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.status-waiting {
+    background: #fef3c7;
+    color: #92400e;
+}

app/templates/dashboard/index.html

@@ -12,20 +12,21 @@
 
         <div class="job-list">
             {% if jobs %}
-                {% for job in jobs %}
+            {% for job in jobs %}
-                <div class="job-item" data-job-id="{{ job.id }}" onclick="loadJobDetails({{ job.id }})" oncontextmenu="showContextMenu(event, {{ job.id }}, '{{ job.status }}')">
+            <div class="job-item" data-job-id="{{ job.id }}" onclick="loadJobDetails({{ job.id }})"
-                    <div class="job-status-icon">{{ job.get_status_icon() }}</div>
+                oncontextmenu="showContextMenu(event, {{ job.id }}, '{{ job.status }}')">
-                    <div class="job-info">
+                <div class="job-status-icon">{{ job.get_status_icon() }}</div>
-                        <h4>Job #{{ job.id }} - {{ job.branch_name }}</h4>
+                <div class="job-info">
-                        <p>{{ job.submitted_at.strftime('%Y-%m-%d %H:%M') }} by {{ job.submitter.username }}</p>
+                    <h4>Job #{{ job.id }} - {{ job.branch_name }}</h4>
-                    </div>
+                    <p>{{ job.submitted_at.strftime('%Y-%m-%d %H:%M') }} by {{ job.submitter.username }}</p>
                 </div>
-                {% endfor %}
+            </div>
+            {% endfor %}
             {% else %}
-                <div class="empty-state">
+            <div class="empty-state">
-                    <h3>No jobs yet</h3>
+                <h3>No jobs yet</h3>
-                    <p>Submit your first test job to get started</p>
+                <p>Submit your first test job to get started</p>
-                </div>
+            </div>
             {% endif %}
         </div>
     </div>
@@ -53,61 +54,90 @@
 </div>
 
 <script>
-let contextJobId = null;
+    let contextJobId = null;
 
-function showContextMenu(event, jobId, status) {
+    function showContextMenu(event, jobId, status) {
-    event.preventDefault();
+        event.preventDefault();
 
-    // Only show context menu for in_progress jobs
+        // Only show context menu for in_progress jobs
-    if (status !== 'in_progress') {
+        if (status !== 'in_progress') {
-        return;
+            return;
+        }
+
+        contextJobId = jobId;
+        const contextMenu = document.getElementById('contextMenu');
+
+        contextMenu.style.display = 'block';
+        contextMenu.style.left = event.pageX + 'px';
+        contextMenu.style.top = event.pageY + 'px';
+
+        // Hide context menu when clicking elsewhere
+        document.addEventListener('click', hideContextMenu);
     }
 
-    contextJobId = jobId;
+    function hideContextMenu() {
-    const contextMenu = document.getElementById('contextMenu');
+        document.getElementById('contextMenu').style.display = 'none';
-    
+        document.removeEventListener('click', hideContextMenu);
-    contextMenu.style.display = 'block';
+        contextJobId = null;
-    contextMenu.style.left = event.pageX + 'px';
-    contextMenu.style.top = event.pageY + 'px';
-    
-    // Hide context menu when clicking elsewhere
-    document.addEventListener('click', hideContextMenu);
-}
-
-function hideContextMenu() {
-    document.getElementById('contextMenu').style.display = 'none';
-    document.removeEventListener('click', hideContextMenu);
-    contextJobId = null;
-}
-
-function abortJobFromContext() {
-    if (contextJobId) {
-        abortJob(contextJobId);
     }
-    hideContextMenu();
-}
-function loadJobDetails(jobId) {
-    // Mark job as active
-    document.querySelectorAll('.job-item').forEach(item => {
-        item.classList.remove('active');
-    });
-    document.querySelector(`[data-job-id="${jobId}"]`).classList.add('active');
 
-    // Fetch job details
+    function abortJobFromContext() {
-    fetch(`/jobs/${jobId}`)
+        if (contextJobId) {
-        .then(response => response.json())
+            abortJob(contextJobId);
-        .then(job => {
+        }
-            const container = document.getElementById('job-details-container');
+        hideContextMenu();
-            const scenarios = JSON.parse(job.scenarios || '[]');
+    }
+    let pollingInterval = null;
 
-            container.innerHTML = `
+    function loadJobDetails(jobId) {
+        // Clear existing polling
+        if (pollingInterval) {
+            clearInterval(pollingInterval);
+            pollingInterval = null;
+        }
+
+        // Mark job as active
+        document.querySelectorAll('.job-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        const jobItem = document.querySelector(`[data-job-id="${jobId}"]`);
+        if (jobItem) jobItem.classList.add('active');
+
+        // Initial fetch
+        fetchJobDetails(jobId);
+
+        // Start polling if job is not finished
+        pollingInterval = setInterval(() => {
+            fetchJobDetails(jobId, true);
+        }, 5000);
+    }
+
+    function fetchJobDetails(jobId, isPolling = false) {
+        fetch(`/jobs/${jobId}`)
+            .then(response => response.json())
+            .then(job => {
+                const container = document.getElementById('job-details-container');
+                const scenarios = JSON.parse(job.scenarios || '[]');
+                const taskIds = JSON.parse(job.remote_task_ids || '{}');
+                const results = JSON.parse(job.remote_results || '{}');
+
+                // If polling and job is finished, stop polling
+                if (isPolling && ['passed', 'failed', 'aborted'].includes(job.status)) {
+                    clearInterval(pollingInterval);
+                    pollingInterval = null;
+                }
+
+                // Update job item icon in the list if it changed
+                const jobItem = document.querySelector(`[data-job-id="${jobId}"]`);
+                if (jobItem) {
+                    // We need to fetch the icon separately or update it here
+                    // For now, let's just update the details panel
+                }
+
+                let html = `
                 <div class="detail-row">
                     <div class="detail-label">Job ID:</div>
-                    <div class="detail-value">#${job.id}</div>
+                    <div class="detail-value">#${job.id} (Remote: ${job.remote_queue_id || 'N/A'})</div>
-                </div>
-                <div class="detail-row">
-                    <div class="detail-label">Submitter:</div>
-                    <div class="detail-value">${job.submitter}</div>
                 </div>
                 <div class="detail-row">
                     <div class="detail-label">Branch:</div>
@@ -115,62 +145,114 @@ function loadJobDetails(jobId) {
                 </div>
                 <div class="detail-row">
                     <div class="detail-label">Status:</div>
-                    <div class="detail-value">
+                    <div class="detail-value" id="job-status-badge">
                         <span class="status-badge status-${job.status}">${job.status.replace('_', ' ').toUpperCase()}</span>
                     </div>
                 </div>
-                <div class="detail-row">
-                    <div class="detail-label">Environment:</div>
-                    <div class="detail-value">${job.environment}</div>
-                </div>
-                <div class="detail-row">
-                    <div class="detail-label">Test Mode:</div>
-                    <div class="detail-value">${job.test_mode}</div>
-                </div>
-                <div class="detail-row">
-                    <div class="detail-label">Submitted:</div>
-                    <div class="detail-value">${job.submitted_at}</div>
-                </div>
-                ${job.completed_at ? `
-                <div class="detail-row">
-                    <div class="detail-label">Completed:</div>
-                    <div class="detail-value">${job.completed_at}</div>
-                </div>
-                <div class="detail-row">
-                    <div class="detail-label">Duration:</div>
-                    <div class="detail-value">${job.duration ? Math.floor(job.duration / 60) + 'm ' + (job.duration % 60) + 's' : 'N/A'}</div>
-                </div>
-                ` : ''}
-                <div class="detail-row">
-                    <div class="detail-label">Scenarios:</div>
-                    <div class="detail-value">${Array.isArray(scenarios) ? scenarios.join(', ') : scenarios}</div>
-                </div>
-                ${job.status === 'in_progress' ? `
-                <div style="margin-top: 20px;">
-                    <button class="btn btn-danger" onclick="abortJob(${job.id})">Abort Job</button>
-                </div>
-                ` : ''}
-                ${job.results_path ? `
-                <div style="margin-top: 20px;">
-                    <a href="${job.results_path}" class="btn btn-primary" target="_blank">View Results</a>
-                </div>
-                ` : ''}
-            `;
-        });
-}
                 
-function abortJob(jobId) {
+                <div style="margin-top: 30px;">
-    if (confirm('Are you sure you want to abort this job?')) {
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-        fetch(`/jobs/${jobId}/abort`, { method: 'POST' })
+                        <h4 style="color: var(--dark);">Scenario Summary</h4>
-            .then(response => response.json())
+                        <input type="text" id="scenarioSearch" placeholder="Search scenarios..." onkeyup="filterScenarios()" class="form-control" style="width: 200px; padding: 6px 12px;">
-            .then(data => {
+                    </div>
-                if (data.success) {
+                    <table class="user-table" id="scenarioTable">
-                    location.reload();
+                        <thead>
-                } else {
+                            <tr>
-                    alert(data.error);
+                                <th>Scenario Name</th>
+                                <th>Task ID</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+            `;
+
+                scenarios.forEach(s => {
+                    const taskId = taskIds[s] || 'N/A';
+                    const result = results[s]; // [status, link]
+                    let statusHtml = '⌛ Waiting';
+
+                    if (result) {
+                        const icon = result[0] === 'PASS' ? '✅' : '❌';
+                        const color = result[0] === 'PASS' ? 'var(--success)' : 'var(--danger)';
+                        statusHtml = `<a href="${result[1]}" target="_blank" style="text-decoration: none; color: ${color}; font-weight: 600;">${icon} ${result[0]}</a>`;
+                    } else if (job.status === 'in_progress') {
+                        statusHtml = '🔄 Running';
+                    }
+
+                    html += `
+                    <tr>
+                        <td>${s}</td>
+                        <td><small>${taskId}</small></td>
+                        <td>${statusHtml}</td>
+                    </tr>
+                `;
+                });
+
+                html += `
+                        </tbody>
+                    </table>
+                </div>
+
+                <div style="margin-top: 30px;">
+                    <h4 style="color: var(--dark); margin-bottom: 15px;">Queue Logging</h4>
+                    <div id="queue-log" style="background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 8px; font-family: 'Consolas', monospace; font-size: 12px; max-height: 400px; overflow-y: auto; white-space: pre-wrap;">${job.queue_log || 'Waiting for logs...'}</div>
+                </div>
+
+                <div style="margin-top: 30px; display: flex; gap: 10px;">
+                    <button class="btn btn-danger" onclick="abortJob(${job.id})" style="width: auto;">Abort Job</button>
+                </div>
+            `;
+
+                container.innerHTML = html;
+
+                // Scroll log to bottom if it's being updated
+                const logElement = document.getElementById('queue-log');
+                if (logElement) logElement.scrollTop = logElement.scrollHeight;
+
+                // If in progress, trigger status update on backend
+                if (!['passed', 'failed', 'aborted'].includes(job.status)) {
+                    fetch(`/jobs/${jobId}/status`)
+                        .then(r => r.json())
+                        .then(data => {
+                            // Update icon in list
+                            const iconEl = document.querySelector(`[data-job-id="${jobId}"] .job-status-icon`);
+                            if (iconEl) iconEl.textContent = data.status_icon;
+                        });
                 }
             });
     }
-}
+
+    function filterScenarios() {
+        const input = document.getElementById('scenarioSearch');
+        const filter = input.value.toUpperCase();
+        const table = document.getElementById('scenarioTable');
+        const tr = table.getElementsByTagName('tr');
+
+        for (let i = 1; i < tr.length; i++) {
+            const td = tr[i].getElementsByTagName('td')[0];
+            if (td) {
+                const txtValue = td.textContent || td.innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    tr[i].style.display = "";
+                } else {
+                    tr[i].style.display = "none";
+                }
+            }
+        }
+    }
+
+    function abortJob(jobId) {
+        if (confirm('Are you sure you want to abort this job?')) {
+            fetch(`/jobs/${jobId}/abort`, { method: 'POST' })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    } else {
+                        alert(data.error);
+                    }
+                });
+        }
+    }
 </script>
 {% endblock %}

app/templates/jobs/submit.html

@@ -17,14 +17,6 @@
         </div>
         <div class="step">
             <div class="step-number">3</div>
-            <div class="step-label">Environment</div>
-        </div>
-        <div class="step">
-            <div class="step-number">4</div>
-            <div class="step-label">Test Mode</div>
-        </div>
-        <div class="step">
-            <div class="step-number">5</div>
             <div class="step-label">Review</div>
         </div>
     </div>
@@ -33,7 +25,7 @@
         <div class="form-group">
             <label for="branch_name">Git Branch Name</label>
             <input type="text" id="branch_name" name="branch_name" class="form-control"
-                   placeholder="e.g., feature/new-feature" required>
+                placeholder="e.g., feature/new-feature" required>
             <small style="color: #6b7280; margin-top: 5px; display: block;">
                 Enter the branch name to analyze available test scenarios
             </small>
@@ -47,151 +39,152 @@
         <div class="form-actions">
             <a href="{{ url_for('dashboard.index') }}" class="btn" style="background: #6b7280; color: white;">Cancel</a>
             <button type="submit" id="validateBtn" class="btn btn-primary">Validate Branch</button>
-            <button type="button" id="nextBtn" class="btn btn-primary" style="display: none;" onclick="proceedToStep2()">Next</button>
+            <button type="button" id="nextBtn" class="btn btn-primary" style="display: none;"
+                onclick="proceedToStep2()">Next</button>
         </div>
     </form>
 </div>
 
 <script>
-let validatedBranch = null;
+    let validatedBranch = null;
-let organizedData = {};
+    let organizedData = {};
-let scenarioMap = {};
+    let scenarioMap = {};
 
-document.getElementById('branchForm').addEventListener('submit', function(e) {
+    document.getElementById('branchForm').addEventListener('submit', function (e) {
-    e.preventDefault();
+        e.preventDefault();
-    validateBranch();
+        validateBranch();
-});
+    });
 
-function validateBranch() {
+    function validateBranch() {
-    const branchName = document.getElementById('branch_name').value.trim();
+        const branchName = document.getElementById('branch_name').value.trim();
 
-    if (!branchName) {
+        if (!branchName) {
-        alert('Please enter a branch name');
+            alert('Please enter a branch name');
-        return;
+            return;
+        }
+
+        // Show loading state
+        const validation = document.getElementById('branchValidation');
+        const message = document.getElementById('validationMessage');
+        const validateBtn = document.getElementById('validateBtn');
+        const nextBtn = document.getElementById('nextBtn');
+
+        validation.className = 'branch-validation loading';
+        validation.style.display = 'block';
+        message.textContent = 'Validating branch...';
+        validateBtn.disabled = true;
+        nextBtn.style.display = 'none';
+
+        // Make AJAX request
+        fetch('/jobs/submit/step1', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: `branch_name=${encodeURIComponent(branchName)}`
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log('Branch validation response:', data); // Debug log
+
+                if (data.success) {
+                    // Success
+                    validation.className = 'branch-validation success';
+                    message.textContent = data.message;
+                    validateBtn.style.display = 'none';
+                    nextBtn.style.display = 'inline-block';
+
+                    validatedBranch = branchName;
+                    organizedData = data.organized_data || {};
+                    scenarioMap = data.scenario_map || {};
+
+                    // Log debug info
+                    if (data.debug) {
+                        console.log('Debug info:', data.debug);
+                    }
+                    if (data.output) {
+                        console.log('Command output:', data.output);
+                    }
+                } else {
+                    // Error
+                    validation.className = 'branch-validation error';
+                    message.textContent = data.error;
+                    validateBtn.disabled = false;
+                    nextBtn.style.display = 'none';
+
+                    validatedBranch = null;
+                    organizedData = {};
+                    scenarioMap = {};
+
+                    // Log debug info for troubleshooting
+                    console.error('Branch validation failed:', data.error);
+                    if (data.debug) {
+                        console.error('Debug info:', data.debug);
+                    }
+                    if (data.output) {
+                        console.error('Command output:', data.output);
+                    }
+                }
+            })
+            .catch(error => {
+                // Network error
+                validation.className = 'branch-validation error';
+                message.textContent = 'Network error. Please try again.';
+                validateBtn.disabled = false;
+                nextBtn.style.display = 'none';
+
+                validatedBranch = null;
+                availableScenarios = [];
+            });
     }
 
-    // Show loading state
+    function proceedToStep2() {
-    const validation = document.getElementById('branchValidation');
+        if (!validatedBranch || Object.keys(organizedData).length === 0) {
-    const message = document.getElementById('validationMessage');
+            alert('Please validate the branch first');
-    const validateBtn = document.getElementById('validateBtn');
+            return;
-    const nextBtn = document.getElementById('nextBtn');
-    
-    validation.className = 'branch-validation loading';
-    validation.style.display = 'block';
-    message.textContent = 'Validating branch...';
-    validateBtn.disabled = true;
-    nextBtn.style.display = 'none';
-    
-    // Make AJAX request
-    fetch('/jobs/submit/step1', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: `branch_name=${encodeURIComponent(branchName)}`
-    })
-    .then(response => response.json())
-    .then(data => {
-        console.log('Branch validation response:', data); // Debug log
-        
-        if (data.success) {
-            // Success
-            validation.className = 'branch-validation success';
-            message.textContent = data.message;
-            validateBtn.style.display = 'none';
-            nextBtn.style.display = 'inline-block';
-            
-            validatedBranch = branchName;
-            organizedData = data.organized_data || {};
-            scenarioMap = data.scenario_map || {};
-            
-            // Log debug info
-            if (data.debug) {
-                console.log('Debug info:', data.debug);
-            }
-            if (data.output) {
-                console.log('Command output:', data.output);
-            }
-        } else {
-            // Error
-            validation.className = 'branch-validation error';
-            message.textContent = data.error;
-            validateBtn.disabled = false;
-            nextBtn.style.display = 'none';
-            
-            validatedBranch = null;
-            organizedData = {};
-            scenarioMap = {};
-            
-            // Log debug info for troubleshooting
-            console.error('Branch validation failed:', data.error);
-            if (data.debug) {
-                console.error('Debug info:', data.debug);
-            }
-            if (data.output) {
-                console.error('Command output:', data.output);
-            }
         }
-    })
+
-    .catch(error => {
+        // Create form to submit to step 2
-        // Network error
+        const form = document.createElement('form');
-        validation.className = 'branch-validation error';
+        form.method = 'POST';
-        message.textContent = 'Network error. Please try again.';
+        form.action = '/jobs/submit/step2-validated';
+
+        const branchInput = document.createElement('input');
+        branchInput.type = 'hidden';
+        branchInput.name = 'branch_name';
+        branchInput.value = validatedBranch;
+        form.appendChild(branchInput);
+
+        const organizedDataInput = document.createElement('input');
+        organizedDataInput.type = 'hidden';
+        organizedDataInput.name = 'organized_data';
+        organizedDataInput.value = JSON.stringify(organizedData);
+        form.appendChild(organizedDataInput);
+
+        const scenarioMapInput = document.createElement('input');
+        scenarioMapInput.type = 'hidden';
+        scenarioMapInput.name = 'scenario_map';
+        scenarioMapInput.value = JSON.stringify(scenarioMap);
+        form.appendChild(scenarioMapInput);
+
+        document.body.appendChild(form);
+        form.submit();
+    }
+
+    // Reset validation when branch name changes
+    document.getElementById('branch_name').addEventListener('input', function () {
+        const validation = document.getElementById('branchValidation');
+        const validateBtn = document.getElementById('validateBtn');
+        const nextBtn = document.getElementById('nextBtn');
+
+        validation.style.display = 'none';
+        validateBtn.style.display = 'inline-block';
         validateBtn.disabled = false;
         nextBtn.style.display = 'none';
 
         validatedBranch = null;
-        availableScenarios = [];
+        organizedData = {};
+        scenarioMap = {};
     });
-}
-
-function proceedToStep2() {
-    if (!validatedBranch || Object.keys(organizedData).length === 0) {
-        alert('Please validate the branch first');
-        return;
-    }
-    
-    // Create form to submit to step 2
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.action = '/jobs/submit/step2-validated';
-    
-    const branchInput = document.createElement('input');
-    branchInput.type = 'hidden';
-    branchInput.name = 'branch_name';
-    branchInput.value = validatedBranch;
-    form.appendChild(branchInput);
-    
-    const organizedDataInput = document.createElement('input');
-    organizedDataInput.type = 'hidden';
-    organizedDataInput.name = 'organized_data';
-    organizedDataInput.value = JSON.stringify(organizedData);
-    form.appendChild(organizedDataInput);
-    
-    const scenarioMapInput = document.createElement('input');
-    scenarioMapInput.type = 'hidden';
-    scenarioMapInput.name = 'scenario_map';
-    scenarioMapInput.value = JSON.stringify(scenarioMap);
-    form.appendChild(scenarioMapInput);
-    
-    document.body.appendChild(form);
-    form.submit();
-}
-
-// Reset validation when branch name changes
-document.getElementById('branch_name').addEventListener('input', function() {
-    const validation = document.getElementById('branchValidation');
-    const validateBtn = document.getElementById('validateBtn');
-    const nextBtn = document.getElementById('nextBtn');
-    
-    validation.style.display = 'none';
-    validateBtn.style.display = 'inline-block';
-    validateBtn.disabled = false;
-    nextBtn.style.display = 'none';
-    
-    validatedBranch = null;
-    organizedData = {};
-    scenarioMap = {};
-});
 </script>
 {% endblock %}

app/templates/jobs/submit_review.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+
+{% block title %}Review & Submit - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="submit-container">
+    <h2 style="margin-bottom: 30px; color: var(--dark);">Review & Submit</h2>
+    
+    <div class="step-indicator">
+        <div class="step completed">
+            <div class="step-number">✓</div>
+            <div class="step-label">Branch</div>
+        </div>
+        <div class="step completed">
+            <div class="step-number">✓</div>
+            <div class="step-label">Scenarios</div>
+        </div>
+        <div class="step active">
+            <div class="step-number">3</div>
+            <div class="step-label">Review</div>
+        </div>
+    </div>
+    
+    <div style="background: white; border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 30px;">
+        <div class="detail-row">
+            <div class="detail-label">Branch:</div>
+            <div class="detail-value">{{ branch_name }}</div>
+        </div>
+        <div class="detail-row">
+            <div class="detail-label">Scenarios:</div>
+            <div class="detail-value">
+                <strong>{{ scenarios|length }} scenarios selected</strong>
+                <ul style="margin-top: 10px; padding-left: 20px; max-height: 200px; overflow-y: auto;">
+                    {% for scenario in scenarios %}
+                    <li style="font-size: 13px; color: #4b5563; margin-bottom: 4px;">{{ scenario }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <form method="POST" action="{{ url_for('jobs.submit_final') }}">
+        <input type="hidden" name="branch_name" value="{{ branch_name }}">
+        <input type="hidden" name="scenarios" value="{{ scenarios|tojson }}">
+        <input type="hidden" name="scenario_map" value="{{ scenario_map|tojson }}">
+        
+        <!-- Default values for deactivated sections -->
+        <input type="hidden" name="environment" value="staging">
+        <input type="hidden" name="test_mode" value="simulator">
+        
+        <div class="form-actions">
+            <button type="button" class="btn" style="background: #6b7280; color: white;" onclick="history.back()">Back</button>
+            <button type="submit" class="btn btn-success" style="padding: 12px 40px;">Submit Job</button>
+        </div>
+    </form>
+</div>
+{% endblock %}

app/templates/jobs/submit_step2.html

@@ -17,14 +17,6 @@
         </div>
         <div class="step">
             <div class="step-number">3</div>
-            <div class="step-label">Environment</div>
-        </div>
-        <div class="step">
-            <div class="step-number">4</div>
-            <div class="step-label">Test Mode</div>
-        </div>
-        <div class="step">
-            <div class="step-number">5</div>
             <div class="step-label">Review</div>
         </div>
     </div>
@@ -39,70 +31,81 @@
         <input type="hidden" name="selected_scenarios" id="selectedScenariosInput">
 
         <div class="scenario-controls">
-            <button type="button" class="btn btn-sm" onclick="selectAll()" style="background: var(--success); color: white; margin-right: 10px;">Select All</button>
+            <button type="button" class="btn btn-sm" onclick="selectAll()"
-            <button type="button" class="btn btn-sm" onclick="deselectAll()" style="background: var(--danger); color: white;">Deselect All</button>
+                style="background: var(--success); color: white; margin-right: 10px;">Select All</button>
+            <button type="button" class="btn btn-sm" onclick="deselectAll()"
+                style="background: var(--danger); color: white;">Deselect All</button>
             <span id="selectionCount" style="margin-left: 20px; font-weight: 600;">0 scenarios selected</span>
         </div>
 
         <div class="scenario-tree">
             {% if organized_data %}
-                {% for layer_name, layer_data in organized_data.items() %}
+            {% for layer_name, layer_data in organized_data.items() %}
-                <div class="tree-layer">
+            <div class="tree-layer">
-                    <div class="tree-node layer-node" onclick="toggleLayer('{{ layer_name }}')">
+                <div class="tree-node layer-node" onclick="toggleLayer('{{ layer_name }}')">
-                        <span class="tree-toggle" id="toggle-{{ layer_name }}">▶</span>
+                    <span class="tree-toggle" id="toggle-{{ layer_name }}">▶</span>
-                        <input type="checkbox" class="layer-checkbox" id="layer-{{ layer_name }}" onchange="toggleLayerSelection('{{ layer_name }}')">
+                    <input type="checkbox" class="layer-checkbox" id="layer-{{ layer_name }}"
-                        <label for="layer-{{ layer_name }}" class="tree-label layer-label">{{ layer_name.replace('_', ' ').title() }}</label>
+                        onchange="toggleLayerSelection('{{ layer_name }}')">
-                    </div>
+                    <label for="layer-{{ layer_name }}" class="tree-label layer-label">{{ layer_name.replace('_', '
+                        ').title() }}</label>
+                </div>
 
-                    <div class="tree-children" id="children-{{ layer_name }}" style="display: none;">
+                <div class="tree-children" id="children-{{ layer_name }}" style="display: none;">
-                        {% if layer_data %}
+                    {% if layer_data %}
-                            {% for stack_name, scenarios in layer_data.items() %}
+                    {% for stack_name, scenarios in layer_data.items() %}
-                            <div class="tree-stack">
+                    <div class="tree-stack">
-                                <div class="tree-node stack-node" onclick="toggleStack('{{ layer_name }}', '{{ stack_name }}')">
+                        <div class="tree-node stack-node" onclick="toggleStack('{{ layer_name }}', '{{ stack_name }}')">
-                                    <span class="tree-toggle" id="toggle-{{ layer_name }}-{{ stack_name }}">▶</span>
+                            <span class="tree-toggle" id="toggle-{{ layer_name }}-{{ stack_name }}">▶</span>
-                                    <input type="checkbox" class="stack-checkbox" id="stack-{{ layer_name }}-{{ stack_name }}" onchange="toggleStackSelection('{{ layer_name }}', '{{ stack_name }}')">
+                            <input type="checkbox" class="stack-checkbox" id="stack-{{ layer_name }}-{{ stack_name }}"
-                                    <label for="stack-{{ layer_name }}-{{ stack_name }}" class="tree-label stack-label">{{ stack_name.replace('_', ' ').title() }}</label>
+                                onchange="toggleStackSelection('{{ layer_name }}', '{{ stack_name }}')">
-                                </div>
+                            <label for="stack-{{ layer_name }}-{{ stack_name }}" class="tree-label stack-label">{{
+                                stack_name.replace('_', ' ').title() }}</label>
+                        </div>
 
-                                <div class="tree-children" id="children-{{ layer_name }}-{{ stack_name }}" style="display: none;">
+                        <div class="tree-children" id="children-{{ layer_name }}-{{ stack_name }}"
-                                    {% if scenarios %}
+                            style="display: none;">
-                                        {% for scenario in scenarios %}
+                            {% if scenarios %}
-                                        <div class="tree-scenario">
+                            {% for scenario in scenarios %}
-                                            <div class="tree-node scenario-node">
+                            <div class="tree-scenario">
-                                                <span class="tree-spacer"></span>
+                                <div class="tree-node scenario-node">
-                                                <input type="checkbox" class="scenario-checkbox" id="scenario-{{ scenario }}" value="{{ scenario }}" onchange="updateSelectionCount()" data-layer="{{ layer_name }}" data-stack="{{ stack_name }}">
+                                    <span class="tree-spacer"></span>
-                                                <label for="scenario-{{ scenario }}" class="tree-label scenario-label">{{ scenario }}</label>
+                                    <input type="checkbox" class="scenario-checkbox" id="scenario-{{ scenario }}"
-                                            </div>
+                                        value="{{ scenario }}" onchange="updateSelectionCount()"
-                                        </div>
+                                        data-layer="{{ layer_name }}" data-stack="{{ stack_name }}">
-                                        {% endfor %}
+                                    <label for="scenario-{{ scenario }}" class="tree-label scenario-label">{{ scenario
-                                    {% else %}
+                                        }}</label>
-                                        <div class="tree-scenario">
-                                            <div class="tree-node scenario-node">
-                                                <span class="tree-spacer"></span>
-                                                <span class="tree-label scenario-label" style="color: #9ca3af;">No scenarios found</span>
-                                            </div>
-                                        </div>
-                                    {% endif %}
                                 </div>
                             </div>
                             {% endfor %}
-                        {% else %}
+                            {% else %}
-                            <div class="tree-stack">
+                            <div class="tree-scenario">
-                                <div class="tree-node stack-node">
+                                <div class="tree-node scenario-node">
                                     <span class="tree-spacer"></span>
-                                    <span class="tree-label stack-label" style="color: #9ca3af;">No stacks found</span>
+                                    <span class="tree-label scenario-label" style="color: #9ca3af;">No scenarios
+                                        found</span>
                                 </div>
                             </div>
-                        {% endif %}
+                            {% endif %}
+                        </div>
                     </div>
+                    {% endfor %}
+                    {% else %}
+                    <div class="tree-stack">
+                        <div class="tree-node stack-node">
+                            <span class="tree-spacer"></span>
+                            <span class="tree-label stack-label" style="color: #9ca3af;">No stacks found</span>
+                        </div>
+                    </div>
+                    {% endif %}
                 </div>
-                {% endfor %}
+            </div>
+            {% endfor %}
             {% else %}
-                <div class="tree-layer">
+            <div class="tree-layer">
-                    <div class="tree-node layer-node">
+                <div class="tree-node layer-node">
-                        <span class="tree-label layer-label" style="color: #9ca3af;">No scenarios available</span>
+                    <span class="tree-label layer-label" style="color: #9ca3af;">No scenarios available</span>
-                    </div>
                 </div>
+            </div>
             {% endif %}
         </div>
 
@@ -114,155 +117,155 @@
 </div>
 
 <script>
-let selectedScenarios = new Set();
+    let selectedScenarios = new Set();
 
-function toggleLayer(layerName) {
+    function toggleLayer(layerName) {
-    const children = document.getElementById(`children-${layerName}`);
+        const children = document.getElementById(`children-${layerName}`);
-    const toggle = document.getElementById(`toggle-${layerName}`);
+        const toggle = document.getElementById(`toggle-${layerName}`);
 
-    if (children.style.display === 'none') {
+        if (children.style.display === 'none') {
-        children.style.display = 'block';
+            children.style.display = 'block';
-        toggle.textContent = '▼';
+            toggle.textContent = '▼';
-    } else {
+        } else {
-        children.style.display = 'none';
+            children.style.display = 'none';
-        toggle.textContent = '▶';
+            toggle.textContent = '▶';
+        }
     }
-}
 
-function toggleStack(layerName, stackName) {
+    function toggleStack(layerName, stackName) {
-    const children = document.getElementById(`children-${layerName}-${stackName}`);
+        const children = document.getElementById(`children-${layerName}-${stackName}`);
-    const toggle = document.getElementById(`toggle-${layerName}-${stackName}`);
+        const toggle = document.getElementById(`toggle-${layerName}-${stackName}`);
 
-    if (children.style.display === 'none') {
+        if (children.style.display === 'none') {
-        children.style.display = 'block';
+            children.style.display = 'block';
-        toggle.textContent = '▼';
+            toggle.textContent = '▼';
-    } else {
+        } else {
-        children.style.display = 'none';
+            children.style.display = 'none';
-        toggle.textContent = '▶';
+            toggle.textContent = '▶';
+        }
     }
-}
 
-function toggleLayerSelection(layerName) {
+    function toggleLayerSelection(layerName) {
-    const layerCheckbox = document.getElementById(`layer-${layerName}`);
+        const layerCheckbox = document.getElementById(`layer-${layerName}`);
-    const stackCheckboxes = document.querySelectorAll(`input[id^="stack-${layerName}-"]`);
+        const stackCheckboxes = document.querySelectorAll(`input[id^="stack-${layerName}-"]`);
-    const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"]`);
+        const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"]`);
 
-    // Update all stacks and scenarios in this layer
+        // Update all stacks and scenarios in this layer
-    stackCheckboxes.forEach(checkbox => {
+        stackCheckboxes.forEach(checkbox => {
-        checkbox.checked = layerCheckbox.checked;
+            checkbox.checked = layerCheckbox.checked;
-        checkbox.indeterminate = false;
+            checkbox.indeterminate = false;
-    });
+        });
 
-    scenarioCheckboxes.forEach(checkbox => {
+        scenarioCheckboxes.forEach(checkbox => {
-        checkbox.checked = layerCheckbox.checked;
+            checkbox.checked = layerCheckbox.checked;
-        if (layerCheckbox.checked) {
+            if (layerCheckbox.checked) {
+                selectedScenarios.add(checkbox.value);
+            } else {
+                selectedScenarios.delete(checkbox.value);
+            }
+        });
+
+        updateSelectionCount();
+    }
+
+    function toggleStackSelection(layerName, stackName) {
+        const stackCheckbox = document.getElementById(`stack-${layerName}-${stackName}`);
+        const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"][data-stack="${stackName}"]`);
+
+        // Update all scenarios in this stack
+        scenarioCheckboxes.forEach(checkbox => {
+            checkbox.checked = stackCheckbox.checked;
+            if (stackCheckbox.checked) {
+                selectedScenarios.add(checkbox.value);
+            } else {
+                selectedScenarios.delete(checkbox.value);
+            }
+        });
+
+        updateLayerState(layerName);
+        updateSelectionCount();
+    }
+
+    function updateLayerState(layerName) {
+        const layerCheckbox = document.getElementById(`layer-${layerName}`);
+        const stackCheckboxes = document.querySelectorAll(`input[id^="stack-${layerName}-"]`);
+        const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"]`);
+
+        // Update stack states
+        stackCheckboxes.forEach(stackCheckbox => {
+            const stackName = stackCheckbox.id.replace(`stack-${layerName}-`, '');
+            const stackScenarios = document.querySelectorAll(`input[data-layer="${layerName}"][data-stack="${stackName}"]`);
+            const checkedCount = Array.from(stackScenarios).filter(cb => cb.checked).length;
+
+            if (checkedCount === 0) {
+                stackCheckbox.checked = false;
+                stackCheckbox.indeterminate = false;
+            } else if (checkedCount === stackScenarios.length) {
+                stackCheckbox.checked = true;
+                stackCheckbox.indeterminate = false;
+            } else {
+                stackCheckbox.checked = false;
+                stackCheckbox.indeterminate = true;
+            }
+        });
+
+        // Update layer state
+        const checkedScenarios = Array.from(scenarioCheckboxes).filter(cb => cb.checked).length;
+        if (checkedScenarios === 0) {
+            layerCheckbox.checked = false;
+            layerCheckbox.indeterminate = false;
+        } else if (checkedScenarios === scenarioCheckboxes.length) {
+            layerCheckbox.checked = true;
+            layerCheckbox.indeterminate = false;
+        } else {
+            layerCheckbox.checked = false;
+            layerCheckbox.indeterminate = true;
+        }
+    }
+
+    function updateSelectionCount() {
+        // Update selected scenarios set
+        selectedScenarios.clear();
+        document.querySelectorAll('.scenario-checkbox:checked').forEach(checkbox => {
             selectedScenarios.add(checkbox.value);
-        } else {
+        });
-            selectedScenarios.delete(checkbox.value);
-        }
-    });
 
-    updateSelectionCount();
+        // Update all layer states
-}
+        const layers = new Set();
+        document.querySelectorAll('.scenario-checkbox').forEach(checkbox => {
+            layers.add(checkbox.dataset.layer);
+        });
+        layers.forEach(layer => updateLayerState(layer));
 
-function toggleStackSelection(layerName, stackName) {
+        // Update UI
-    const stackCheckbox = document.getElementById(`stack-${layerName}-${stackName}`);
+        const count = selectedScenarios.size;
-    const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"][data-stack="${stackName}"]`);
+        document.getElementById('selectionCount').textContent = `${count} scenario${count !== 1 ? 's' : ''} selected`;
+        document.getElementById('nextBtn').disabled = count === 0;
 
-    // Update all scenarios in this stack
+        // Update hidden input
-    scenarioCheckboxes.forEach(checkbox => {
+        document.getElementById('selectedScenariosInput').value = JSON.stringify(Array.from(selectedScenarios));
-        checkbox.checked = stackCheckbox.checked;
-        if (stackCheckbox.checked) {
-            selectedScenarios.add(checkbox.value);
-        } else {
-            selectedScenarios.delete(checkbox.value);
-        }
-    });
-    
-    updateLayerState(layerName);
-    updateSelectionCount();
-}
-
-function updateLayerState(layerName) {
-    const layerCheckbox = document.getElementById(`layer-${layerName}`);
-    const stackCheckboxes = document.querySelectorAll(`input[id^="stack-${layerName}-"]`);
-    const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"]`);
-    
-    // Update stack states
-    stackCheckboxes.forEach(stackCheckbox => {
-        const stackName = stackCheckbox.id.replace(`stack-${layerName}-`, '');
-        const stackScenarios = document.querySelectorAll(`input[data-layer="${layerName}"][data-stack="${stackName}"]`);
-        const checkedCount = Array.from(stackScenarios).filter(cb => cb.checked).length;
-        
-        if (checkedCount === 0) {
-            stackCheckbox.checked = false;
-            stackCheckbox.indeterminate = false;
-        } else if (checkedCount === stackScenarios.length) {
-            stackCheckbox.checked = true;
-            stackCheckbox.indeterminate = false;
-        } else {
-            stackCheckbox.checked = false;
-            stackCheckbox.indeterminate = true;
-        }
-    });
-    
-    // Update layer state
-    const checkedScenarios = Array.from(scenarioCheckboxes).filter(cb => cb.checked).length;
-    if (checkedScenarios === 0) {
-        layerCheckbox.checked = false;
-        layerCheckbox.indeterminate = false;
-    } else if (checkedScenarios === scenarioCheckboxes.length) {
-        layerCheckbox.checked = true;
-        layerCheckbox.indeterminate = false;
-    } else {
-        layerCheckbox.checked = false;
-        layerCheckbox.indeterminate = true;
     }
-}
 
-function updateSelectionCount() {
+    function selectAll() {
-    // Update selected scenarios set
+        document.querySelectorAll('.scenario-checkbox').forEach(checkbox => {
-    selectedScenarios.clear();
+            checkbox.checked = true;
-    document.querySelectorAll('.scenario-checkbox:checked').forEach(checkbox => {
+            selectedScenarios.add(checkbox.value);
-        selectedScenarios.add(checkbox.value);
+        });
+        updateSelectionCount();
+    }
+
+    function deselectAll() {
+        document.querySelectorAll('.scenario-checkbox, .stack-checkbox, .layer-checkbox').forEach(checkbox => {
+            checkbox.checked = false;
+            checkbox.indeterminate = false;
+        });
+        selectedScenarios.clear();
+        updateSelectionCount();
+    }
+
+    // Initialize
+    document.addEventListener('DOMContentLoaded', function () {
+        updateSelectionCount();
     });
-    
-    // Update all layer states
-    const layers = new Set();
-    document.querySelectorAll('.scenario-checkbox').forEach(checkbox => {
-        layers.add(checkbox.dataset.layer);
-    });
-    layers.forEach(layer => updateLayerState(layer));
-    
-    // Update UI
-    const count = selectedScenarios.size;
-    document.getElementById('selectionCount').textContent = `${count} scenario${count !== 1 ? 's' : ''} selected`;
-    document.getElementById('nextBtn').disabled = count === 0;
-    
-    // Update hidden input
-    document.getElementById('selectedScenariosInput').value = JSON.stringify(Array.from(selectedScenarios));
-}
-
-function selectAll() {
-    document.querySelectorAll('.scenario-checkbox').forEach(checkbox => {
-        checkbox.checked = true;
-        selectedScenarios.add(checkbox.value);
-    });
-    updateSelectionCount();
-}
-
-function deselectAll() {
-    document.querySelectorAll('.scenario-checkbox, .stack-checkbox, .layer-checkbox').forEach(checkbox => {
-        checkbox.checked = false;
-        checkbox.indeterminate = false;
-    });
-    selectedScenarios.clear();
-    updateSelectionCount();
-}
-
-// Initialize
-document.addEventListener('DOMContentLoaded', function() {
-    updateSelectionCount();
-});
 </script>
 {% endblock %}

requirements.txt

@@ -7,3 +7,4 @@ gunicorn==21.2.0
 python-dotenv==1.0.0
 Werkzeug==3.0.1
 WTForms==3.1.1
+requests==2.31.0