Blame for app/static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SupportOps Arena - IT Incident Triage RL Environment</title>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #FFFFFF;
            --bg-secondary: #F0F8FF;
            --bg-card: #FFFFFF;
            --bg-glass: rgba(255,255,255,0.8);
            --gradient-main: linear-gradient(135deg, #FFFFFF 0%, #E0F4FF 40%, #B8E4FF 100%);
            --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(224,244,255,0.6));
            --sky-300: #87CEEB;
            --sky-500: #2196F3;
            --sky-600: #1976D2;
            --text-primary: #0D1B2A;
            --text-secondary: #3A5068;
            --text-muted: #7B9BB5;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
            --info: #3B82F6;
            --border-light: rgba(135, 206, 235, 0.3);
            --shadow-md: 0 4px 20px rgba(33, 150, 243, 0.12);
            --radius-md: 12px;
            --transition-med: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--gradient-main);
            color: var(--text-primary);
            min-height: 100vh;
        }

        h1, h2, h3 {
            font-family: 'Sora', sans-serif;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: var(--gradient-card);
            backdrop-filter: blur(12px);
            padding: 20px 30px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 28px;
            color: var(--sky-600);
        }

        .status-badge {
            padding: 8px 16px;
            background: var(--success);
            color: white;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: var(--gradient-card);
            backdrop-filter: blur(12px);
            border-radius: var(--radius-md);
            padding: 20px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-light);
        }

        .card h2 {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--sky-600);
        }

        .button {
            padding: 10px 20px;
            background: var(--sky-500);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-family: 'DM Sans', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-med);
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .button:hover {
            background: var(--sky-600);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .button-secondary {
            background: var(--text-secondary);
        }

        .button-secondary:hover {
            background: var(--text-primary);
        }

        select, input {
            padding: 10px;
            border: 2px solid var(--border-light);
            border-radius: var(--radius-md);
            font-family: 'DM Sans', sans-serif;
            margin-right: 10px;
            background: white;
        }

        .log-entry {
            padding: 10px;
            margin-bottom: 8px;
            background: white;
            border-left: 4px solid var(--info);
            border-radius: 6px;
            font-family: 'DM Mono', monospace;
            font-size: 13px;
        }

        .log-entry.error {
            border-left-color: var(--danger);
        }

        .log-entry.warn {
            border-left-color: var(--warning);
        }

        .log-entry.info {
            border-left-color: var(--success);
        }

        .action-history {
            max-height: 300px;
            overflow-y: auto;
        }

        .action-item {
            padding: 10px;
            margin-bottom: 8px;
            background: white;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reward {
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .reward.positive {
            background: var(--success);
            color: white;
        }

        .reward.negative {
            background: var(--danger);
            color: white;
        }

        .metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }

        .metric {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: var(--radius-md);
        }

        .metric-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--sky-600);
        }

        .metric-label {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 5px;
        }

        .hidden {
            display: none;
        }

        .loading {
            color: var(--text-muted);
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 SupportOps Arena</h1>
            <div class="status-badge" id="statusBadge">Ready</div>
        </div>

        <div class="card">
            <h2>Environment Controls</h2>
            <div>
                <select id="taskLevel">
                    <option value="easy">Easy - Wi-Fi Connectivity</option>
                    <option value="medium">Medium - VPN Access</option>
                    <option value="hard">Hard - Cross-System Failure</option>
                </select>
                <input type="number" id="seedInput" placeholder="Seed (optional)">
                <button class="button" onclick="resetEnvironment()">Reset Environment</button>
                <button class="button button-secondary" onclick="runBaseline()">Run Baseline Agent</button>
            </div>
        </div>

        <div class="grid">
            <div class="card">
                <h2>Current Ticket</h2>
                <div id="ticketInfo">
                    <p class="loading">Reset environment to start...</p>
                </div>
            </div>

            <div class="card">
                <h2>Observations</h2>
                <div id="observations">
                    <p class="loading">No active episode</p>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>Manual Actions</h2>
            <div id="actionButtons">
                <!-- Action buttons will be populated -->
            </div>
        </div>

        <div class="grid">
            <div class="card">
                <h2>System Logs</h2>
                <div id="systemLogs" style="max-height: 300px; overflow-y: auto;">
                    <p class="loading">No logs yet</p>
                </div>
            </div>

            <div class="card">
                <h2>Action History</h2>
                <div id="actionHistory" class="action-history">
                    <p class="loading">No actions yet</p>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>Episode Metrics</h2>
            <div class="metrics" id="metrics">
                <div class="metric">
                    <div class="metric-value" id="stepsValue">0</div>
                    <div class="metric-label">Steps</div>
                </div>
                <div class="metric">
                    <div class="metric-value" id="rewardValue">0.00</div>
                    <div class="metric-label">Cumulative Reward</div>
                </div>
                <div class="metric">
                    <div class="metric-value" id="diagnosticsValue">0</div>
                    <div class="metric-label">Diagnostics Taken</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let sessionId = null;
        let currentObservation = null;
        let cumulativeReward = 0;

        const actions = [
            'inspect_network', 'inspect_logs', 'check_authentication',
            'check_permissions', 'query_device_status', 'search_internal_kb',
            'contact_user_for_info', 'run_diagnostic_script', 'flush_dns',
            'reconfigure_client', 'restart_service', 'reset_credentials',
            'escalate_ticket', 'resolve_ticket', 'close_without_fix'
        ];

        function updateStatus(text, type = 'success') {
            const badge = document.getElementById('statusBadge');
            badge.textContent = text;
            badge.style.background = type === 'success' ? 'var(--success)' : 
                                    type === 'warning' ? 'var(--warning)' : 
                                    'var(--danger)';
        }

        async function resetEnvironment() {
            const taskLevel = document.getElementById('taskLevel').value;
            const seed = document.getElementById('seedInput').value || null;
            
            updateStatus('Resetting...', 'warning');

            try {
                const response = await fetch('/reset', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        ...(sessionId ? { 'X-Session-ID': sessionId } : {})
                    },
                    body: JSON.stringify({ task_level: taskLevel, seed: seed ? parseInt(seed) : null })
                });

                const data = await response.json();
                sessionId = data.session_id;
                currentObservation = data.observation;
                cumulativeReward = 0;

                updateUI();
                createActionButtons();
                updateStatus('Episode Active', 'success');
            } catch (error) {
                console.error('Reset failed:', error);
                updateStatus('Error', 'error');
            }
        }

        async function takeAction(actionName) {
            if (!sessionId) {
                alert('Please reset environment first');
                return;
            }

            try {
                const response = await fetch('/step', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Session-ID': sessionId
                    },
                    body: JSON.stringify({ action_name: actionName })
                });

                const data = await response.json();
                currentObservation = data.observation;
                cumulativeReward += data.reward;

                updateUI();

                if (data.done) {
                    updateStatus('Episode Complete', 'info');
                    alert(`Episode finished! Final reward: ${cumulativeReward.toFixed(2)}`);
                }
            } catch (error) {
                console.error('Step failed:', error);
                updateStatus('Error', 'error');
            }
        }

        async function runBaseline() {
            updateStatus('Running Baseline...', 'warning');
            
            try {
                const response = await fetch('/baseline/run', { method: 'POST' });
                const data = await response.json();
                
                let message = 'Baseline Complete!\n\n';
                for (const [level, result] of Object.entries(data.results)) {
                    message += `${level}: score=${result.grade_score.toFixed(3)}, steps=${result.steps}\n`;
                }
                
                alert(message);
                updateStatus('Ready', 'success');
            } catch (error) {
                console.error('Baseline failed:', error);
                updateStatus('Error', 'error');
            }
        }

        function updateUI() {
            if (!currentObservation) return;

            // Update ticket info
            document.getElementById('ticketInfo').innerHTML = `
                <p><strong>Ticket ID:</strong> ${currentObservation.ticket_id}</p>
                <p><strong>Summary:</strong> ${currentObservation.ticket_summary}</p>
                <p><strong>Task Level:</strong> ${currentObservation.task_level}</p>
            `;

            // Update observations
            document.getElementById('observations').innerHTML = `
                <p><strong>Network:</strong> ${currentObservation.network_status}</p>
                <p><strong>VPN:</strong> ${currentObservation.vpn_status}</p>
                <p><strong>Auth:</strong> ${currentObservation.auth_status}</p>
                <p><strong>Escalation Allowed:</strong> ${currentObservation.escalation_allowed ? 'Yes' : 'No'}</p>
            `;

            // Update logs
            const logsDiv = document.getElementById('systemLogs');
            logsDiv.innerHTML = '';
            currentObservation.system_logs.forEach(log => {
                const entry = document.createElement('div');
                entry.className = `log-entry ${log.level.toLowerCase()}`;
                entry.textContent = `[${log.timestamp.split('T')[1].split('.')[0]}] ${log.level} ${log.service}: ${log.message}`;
                logsDiv.appendChild(entry);
            });

            // Update action history
            const historyDiv = document.getElementById('actionHistory');
            historyDiv.innerHTML = '';
            currentObservation.action_history.forEach(action => {
                const item = document.createElement('div');
                item.className = 'action-item';
                item.innerHTML = `
                    <span>${action.step}. ${action.action_name}</span>
                    <span class="reward ${action.reward_received >= 0 ? 'positive' : 'negative'}">
                        ${action.reward_received >= 0 ? '+' : ''}${action.reward_received.toFixed(2)}
                    </span>
                `;
                historyDiv.appendChild(item);
            });

            // Update metrics
            document.getElementById('stepsValue').textContent = currentObservation.step_count;
            document.getElementById('rewardValue').textContent = cumulativeReward.toFixed(2);
            document.getElementById('diagnosticsValue').textContent = currentObservation.action_history.length;
        }

        function createActionButtons() {
            const container = document.getElementById('actionButtons');
            container.innerHTML = '';
            
            actions.forEach(action => {
                const btn = document.createElement('button');
                btn.className = 'button button-secondary';
                btn.textContent = action.replace(/_/g, ' ').toUpperCase();
                btn.onclick = () => takeAction(action);
                container.appendChild(btn);
            });
        }

        // Initialize
        updateStatus('Ready', 'success');
    </script>
</body>
</html>