init

app/templates/admin/dashboard.html

@@ -0,0 +1,116 @@
+{% extends "base.html" %}
+
+{% block title %}Admin Dashboard - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="admin-container">
+    <div class="admin-header">
+        <h2>User Management</h2>
+        <button class="btn btn-primary" onclick="openModal('createUserModal')">+ Create User</button>
+    </div>
+    
+    <table class="user-table">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Username</th>
+                <th>Role</th>
+                <th>Created At</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for user in users %}
+            <tr>
+                <td>{{ user.id }}</td>
+                <td>{{ user.username }}</td>
+                <td>
+                    {% if user.is_admin %}
+                    <span class="badge badge-admin">Admin</span>
+                    {% else %}
+                    <span class="badge badge-user">User</span>
+                    {% endif %}
+                </td>
+                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
+                <td>
+                    <button class="btn btn-sm btn-primary" onclick="openResetPasswordModal({{ user.id }}, '{{ user.username }}')">Reset Password</button>
+                    {% if user.id != current_user.id %}
+                    <form method="POST" action="{{ url_for('admin.delete_user', user_id=user.id) }}" style="display: inline;">
+                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete user {{ user.username }}?')">Delete</button>
+                    </form>
+                    {% endif %}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+<!-- Create User Modal -->
+<div id="createUserModal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Create New User</h3>
+            <button class="close-btn" onclick="closeModal('createUserModal')">&times;</button>
+        </div>
+        <form method="POST" action="{{ url_for('admin.create_user') }}">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" class="form-control" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" class="form-control" required>
+            </div>
+            <div class="form-group">
+                <label>
+                    <input type="checkbox" name="is_admin">
+                    Admin User
+                </label>
+            </div>
+            <button type="submit" class="btn btn-primary">Create User</button>
+        </form>
+    </div>
+</div>
+
+<!-- Reset Password Modal -->
+<div id="resetPasswordModal" class="modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Reset Password</h3>
+            <button class="close-btn" onclick="closeModal('resetPasswordModal')">&times;</button>
+        </div>
+        <form id="resetPasswordForm" method="POST">
+            <p>Reset password for: <strong id="resetUsername"></strong></p>
+            <div class="form-group">
+                <label for="new_password">New Password</label>
+                <input type="password" id="new_password" name="new_password" class="form-control" required>
+            </div>
+            <button type="submit" class="btn btn-primary">Reset Password</button>
+        </form>
+    </div>
+</div>
+
+<script>
+function openModal(modalId) {
+    document.getElementById(modalId).classList.add('active');
+}
+
+function closeModal(modalId) {
+    document.getElementById(modalId).classList.remove('active');
+}
+
+function openResetPasswordModal(userId, username) {
+    document.getElementById('resetUsername').textContent = username;
+    document.getElementById('resetPasswordForm').action = `/admin/users/${userId}/reset-password`;
+    openModal('resetPasswordModal');
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    if (event.target.classList.contains('modal')) {
+        event.target.classList.remove('active');
+    }
+}
+</script>
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}ASF TestArena{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    {% if current_user.is_authenticated %}
+    <nav class="navbar">
+        <div class="navbar-brand">
+            <img src="{{ url_for('static', filename='uploads/icon.png') }}" alt="Logo">
+            <h2>ASF TestArena</h2>
+        </div>
+        <div class="navbar-menu">
+            <a href="{{ url_for('dashboard.index') }}">Dashboard</a>
+            <a href="{{ url_for('jobs.submit') }}">Submit Job</a>
+            {% if current_user.is_admin %}
+            <a href="{{ url_for('admin.index') }}">Admin</a>
+            {% endif %}
+            <span>{{ current_user.username }}</span>
+            <a href="{{ url_for('auth.logout') }}">Logout</a>
+        </div>
+    </nav>
+    {% endif %}
+    
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        {% block content %}{% endblock %}
+    </div>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>

app/templates/dashboard/index.html

@@ -0,0 +1,176 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="dashboard-container">
+    <div class="panel">
+        <div class="panel-header">
+            <h3>Test Jobs</h3>
+            <a href="{{ url_for('jobs.submit') }}" class="btn btn-primary btn-sm">+ New Job</a>
+        </div>
+        
+        <div class="job-list">
+            {% if 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-status-icon">{{ job.get_status_icon() }}</div>
+                    <div class="job-info">
+                        <h4>Job #{{ job.id }} - {{ job.branch_name }}</h4>
+                        <p>{{ job.submitted_at.strftime('%Y-%m-%d %H:%M') }} by {{ job.submitter.username }}</p>
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="empty-state">
+                    <h3>No jobs yet</h3>
+                    <p>Submit your first test job to get started</p>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+    
+    <div class="panel">
+        <div class="panel-header">
+            <h3>Job Details</h3>
+        </div>
+        
+        <div id="job-details-container">
+            <div class="empty-state">
+                <h3>Select a job</h3>
+                <p>Click on a job from the list to view details</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Context Menu -->
+<div id="contextMenu" class="context-menu">
+    <div class="context-menu-item" onclick="abortJobFromContext()">
+        <span class="context-menu-icon">⚫</span>
+        Abort Job
+    </div>
+</div>
+
+<script>
+let contextJobId = null;
+
+function showContextMenu(event, jobId, status) {
+    event.preventDefault();
+    
+    // Only show context menu for in_progress jobs
+    if (status !== 'in_progress') {
+        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);
+}
+
+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
+    fetch(`/jobs/${jobId}`)
+        .then(response => response.json())
+        .then(job => {
+            const container = document.getElementById('job-details-container');
+            const scenarios = JSON.parse(job.scenarios || '[]');
+            
+            container.innerHTML = `
+                <div class="detail-row">
+                    <div class="detail-label">Job ID:</div>
+                    <div class="detail-value">#${job.id}</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>
+                    <div class="detail-value">${job.branch_name}</div>
+                </div>
+                <div class="detail-row">
+                    <div class="detail-label">Status:</div>
+                    <div class="detail-value">
+                        <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) {
+    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

@@ -0,0 +1,197 @@
+{% extends "base.html" %}
+
+{% block title %}Submit Test Job - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="submit-container">
+    <h2 style="margin-bottom: 30px; color: var(--dark);">Submit New Test Job</h2>
+    
+    <div class="step-indicator">
+        <div class="step active">
+            <div class="step-number">1</div>
+            <div class="step-label">Branch</div>
+        </div>
+        <div class="step">
+            <div class="step-number">2</div>
+            <div class="step-label">Scenarios</div>
+        </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>
+    
+    <form id="branchForm">
+        <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>
+            <small style="color: #6b7280; margin-top: 5px; display: block;">
+                Enter the branch name to analyze available test scenarios
+            </small>
+            
+            <div id="branchValidation" class="branch-validation">
+                <div class="loading-spinner"></div>
+                <span id="validationMessage">Validating branch...</span>
+            </div>
+        </div>
+        
+        <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>
+        </div>
+    </form>
+</div>
+
+<script>
+let validatedBranch = null;
+let organizedData = {};
+let scenarioMap = {};
+
+document.getElementById('branchForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    validateBranch();
+});
+
+function validateBranch() {
+    const branchName = document.getElementById('branch_name').value.trim();
+    
+    if (!branchName) {
+        alert('Please enter a branch name');
+        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 = [];
+    });
+}
+
+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_step2.html

@@ -0,0 +1,268 @@
+{% extends "base.html" %}
+
+{% block title %}Select Scenarios - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="submit-container">
+    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Test Scenarios</h2>
+    
+    <div class="step-indicator">
+        <div class="step completed">
+            <div class="step-number">✓</div>
+            <div class="step-label">Branch</div>
+        </div>
+        <div class="step active">
+            <div class="step-number">2</div>
+            <div class="step-label">Scenarios</div>
+        </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>
+    
+    <div style="background: #eff6ff; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+        <strong>Branch:</strong> {{ branch_name }}
+    </div>
+    
+    <form method="POST" action="{{ url_for('jobs.submit_step2') }}" id="scenarioForm">
+        <input type="hidden" name="branch_name" value="{{ branch_name }}">
+        <input type="hidden" name="scenario_map" value="{{ scenario_map|tojson }}">
+        <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="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() %}
+                <div class="tree-layer">
+                    <div class="tree-node layer-node" onclick="toggleLayer('{{ layer_name }}')">
+                        <span class="tree-toggle" id="toggle-{{ layer_name }}">▶</span>
+                        <input type="checkbox" class="layer-checkbox" id="layer-{{ layer_name }}" onchange="toggleLayerSelection('{{ layer_name }}')">
+                        <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;">
+                        {% if layer_data %}
+                            {% for stack_name, scenarios in layer_data.items() %}
+                            <div class="tree-stack">
+                                <div class="tree-node stack-node" onclick="toggleStack('{{ layer_name }}', '{{ stack_name }}')">
+                                    <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 }}')">
+                                    <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;">
+                                    {% if scenarios %}
+                                        {% for scenario in scenarios %}
+                                        <div class="tree-scenario">
+                                            <div class="tree-node scenario-node">
+                                                <span class="tree-spacer"></span>
+                                                <input type="checkbox" class="scenario-checkbox" id="scenario-{{ scenario }}" value="{{ scenario }}" onchange="updateSelectionCount()" data-layer="{{ layer_name }}" data-stack="{{ stack_name }}">
+                                                <label for="scenario-{{ scenario }}" class="tree-label scenario-label">{{ scenario }}</label>
+                                            </div>
+                                        </div>
+                                        {% endfor %}
+                                    {% else %}
+                                        <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 %}
+                            <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>
+                </div>
+                {% endfor %}
+            {% else %}
+                <div class="tree-layer">
+                    <div class="tree-node layer-node">
+                        <span class="tree-label layer-label" style="color: #9ca3af;">No scenarios available</span>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+        
+        <div class="form-actions">
+            <a href="{{ url_for('jobs.submit') }}" class="btn" style="background: #6b7280; color: white;">Back</a>
+            <button type="submit" class="btn btn-primary" id="nextBtn" disabled>Next</button>
+        </div>
+    </form>
+</div>
+
+<script>
+let selectedScenarios = new Set();
+
+function toggleLayer(layerName) {
+    const children = document.getElementById(`children-${layerName}`);
+    const toggle = document.getElementById(`toggle-${layerName}`);
+    
+    if (children.style.display === 'none') {
+        children.style.display = 'block';
+        toggle.textContent = '▼';
+    } else {
+        children.style.display = 'none';
+        toggle.textContent = '▶';
+    }
+}
+
+function toggleStack(layerName, stackName) {
+    const children = document.getElementById(`children-${layerName}-${stackName}`);
+    const toggle = document.getElementById(`toggle-${layerName}-${stackName}`);
+    
+    if (children.style.display === 'none') {
+        children.style.display = 'block';
+        toggle.textContent = '▼';
+    } else {
+        children.style.display = 'none';
+        toggle.textContent = '▶';
+    }
+}
+
+function toggleLayerSelection(layerName) {
+    const layerCheckbox = document.getElementById(`layer-${layerName}`);
+    const stackCheckboxes = document.querySelectorAll(`input[id^="stack-${layerName}-"]`);
+    const scenarioCheckboxes = document.querySelectorAll(`input[data-layer="${layerName}"]`);
+    
+    // Update all stacks and scenarios in this layer
+    stackCheckboxes.forEach(checkbox => {
+        checkbox.checked = layerCheckbox.checked;
+        checkbox.indeterminate = false;
+    });
+    
+    scenarioCheckboxes.forEach(checkbox => {
+        checkbox.checked = 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);
+    });
+    
+    // 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 %}

app/templates/jobs/submit_step3.html

@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+
+{% block title %}Select Environment - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="submit-container">
+    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Environment</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">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>
+    
+    <div style="background: #eff6ff; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+        <strong>Branch:</strong> {{ branch_name }}<br>
+        <strong>Selected Scenarios:</strong> {{ scenarios|length }} scenario{{ 's' if scenarios|length != 1 else '' }}
+        <details style="margin-top: 10px;">
+            <summary style="cursor: pointer; color: var(--primary);">View selected scenarios</summary>
+            <ul style="margin-top: 10px; padding-left: 20px;">
+                {% for scenario in scenarios %}
+                <li style="font-size: 12px; color: #6b7280;">{{ scenario }}</li>
+                {% endfor %}
+            </ul>
+        </details>
+    </div>
+    
+    <form method="POST" action="{{ url_for('jobs.submit_step3') }}">
+        <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 }}">
+        
+        <div class="radio-group">
+            <label class="radio-item">
+                <input type="radio" name="environment" value="sensor_hub" required>
+                <div>
+                    <strong>Sensor Hub</strong>
+                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Test on sensor hub hardware/simulator</p>
+                </div>
+            </label>
+            
+            <label class="radio-item">
+                <input type="radio" name="environment" value="main_board" required>
+                <div>
+                    <strong>Main Board</strong>
+                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Test on main board hardware/simulator</p>
+                </div>
+            </label>
+        </div>
+        
+        <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-primary">Next</button>
+        </div>
+    </form>
+</div>
+{% endblock %}

app/templates/jobs/submit_step4.html

@@ -0,0 +1,80 @@
+{% extends "base.html" %}
+
+{% block title %}Select Test Mode - ASF TestArena{% endblock %}
+
+{% block content %}
+<div class="submit-container">
+    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Test Mode</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 completed">
+            <div class="step-number">✓</div>
+            <div class="step-label">Environment</div>
+        </div>
+        <div class="step active">
+            <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>
+    
+    <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 }}">
+        <input type="hidden" name="environment" value="{{ environment }}">
+        
+        <div class="radio-group">
+            <label class="radio-item">
+                <input type="radio" name="test_mode" value="devbench_simulator" required>
+                <div>
+                    <strong>Devbench Simulator</strong>
+                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Fully simulated environment</p>
+                </div>
+            </label>
+            
+            <label class="radio-item">
+                <input type="radio" name="test_mode" value="testbench_hil" required>
+                <div>
+                    <strong>Testbench HIL</strong>
+                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Hardware-in-the-Loop with real devices</p>
+                </div>
+            </label>
+        </div>
+        
+        <div class="form-group" style="margin-top: 30px;">
+            <h3 style="margin-bottom: 15px; color: var(--dark);">Additional Options</h3>
+            
+            <div style="margin-bottom: 10px;">
+                <label>
+                    <input type="checkbox" name="keep_devbenches">
+                    Keep devbenches after test completion
+                </label>
+            </div>
+            
+            <div>
+                <label>
+                    <input type="checkbox" name="reuse_results">
+                    Reuse previous test results if available
+                </label>
+            </div>
+        </div>
+        
+        <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">Start Test</button>
+        </div>
+    </form>
+</div>
+{% endblock %}

app/templates/login.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - ASF TestArena</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-box">
+            <div class="logo">
+                <img src="{{ url_for('static', filename='uploads/icon.png') }}" alt="Logo">
+                <h1>ASF TestArena</h1>
+            </div>
+            
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+            
+            <form method="POST">
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" name="username" class="form-control" required autofocus>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password" class="form-control" required>
+                </div>
+                
+                <button type="submit" class="btn btn-primary">Login</button>
+            </form>
+        </div>
+    </div>
+</body>
+</html>