static/app.js

// OpenGrid Control Room
const API = window.location.origin;
const AGENT_COLORS = ['#e2e8f0','#ff69b4','#ff6347','#32cd32','#9370db','#ffa500'];
const AGENT_NAMES = ['Bengaluru','Mysuru','Kalburagi','Hassan','Tumakuru','Bagalkot'];

// Real Karnataka state boundary path (source: @svg-maps/india)
const KARNATAKA_PATH = "m 124.338,505.46021 -0.617,-0.44733 0.776,-0.16422 -0.063,-0.8604 1.544,-0.77275 0.48,-0.70223 0.476,0.96821 0.881,0.0413 1.521,-0.74857 0.512,-1.53442 -0.938,-0.17228 0.62,-0.86141 0.404,0.86745 0.379,-0.0181 -0.412,-1.05888 1.641,-3.03861 -0.711,-0.35364 -0.968,0.47151 -0.458,-0.38889 1.391,-1.25837 1.141,0.50879 -0.068,-1.30269 0.567,-0.8997 -0.205,-0.93495 -1.688,-0.57629 -0.027,-0.50476 -1.422,-0.24583 -0.407,0.51987 0.312,-0.51181 -0.538,-0.73446 0.051,-1.1828 0.369,-0.24886 0.389,0.56622 0.156,-0.64581 -0.554,-0.135 -0.079,-1.12941 -0.891,-0.14911 0.075,-0.95309 -0.652,0.58133 -0.327,-0.41207 0.683,-0.18639 -0.196,-0.9007 0.79,0.92891 0.32,-1.12336 0.758,-0.0786 -0.063,0.39998 0.572,0.23676 0.284,-1.11026 1.444,-0.57126 0.104,-1.2241 0.432,0.74655 1.118,-0.14407 0.474,1.77622 1.304,-0.51987 0.135,-0.67805 0.996,0.0504 -0.625,-0.72439 0.746,-0.8191 0.043,-0.88055 3.282,-1.21706 1.441,0.0192 -0.248,-1.88302 1.091,-0.48057 0.066,-0.60249 -0.842,-0.44329 0.238,-0.33752 1.924,-0.0121 0.034,0.3486 1.225,-0.50375 1.062,1.64625 1.016,0 -0.135,0.69014 0.684,0.0373 1.401,-0.74252 0.119,-1.76514 1.19,0.0494 1.035,-0.52289 0.759,0.28311 0.772,-0.47957 0.515,0.92992 1.629,-0.45438 0.114,-0.9672 0.706,0.10276 0.024,0.73447 0.719,0.40703 0.619,-0.20251 -0.049,-1.65431 -0.596,-0.0151 0.725,-0.57931 0.002,-0.68712 -1.057,-1.6664 0.714,-0.83722 -0.047,-1.16568 -1.129,-0.91884 0.15,-0.85738 -0.592,-0.16422 -0.131,-0.72741 0.78,-0.19646 0.414,-1.88201 0.878,0.4302 0.285,0.99642 0.96,-0.20352 1.367,1.13646 0.469,-1.15761 0.779,0.81405 0.529,-0.69215 0.134,1.39841 0.785,0.64883 2.583,-0.66294 0.506,0.53196 0.889,-0.79693 0.877,0.55916 0.264,0.96015 -0.072,-1.13243 1.508,-0.56823 0.659,0.96922 1.418,-0.42618 0.181,0.86343 0.616,-0.0262 0.552,-1.2634 -0.964,-0.12593 0.234,-1.3037 -0.827,0.0463 -0.06,-0.80197 0.926,-0.54304 -0.661,-0.0191 0.474,-0.61155 -0.546,-0.44733 -0.175,-1.14955 1.758,-0.20553 0.273,-0.88459 1.268,-0.35766 -0.062,-1.16265 0.781,-0.0373 0.001,-0.96115 1.038,-0.0242 -0.001,1.27348 0.863,-1.45483 1.02,1.77017 0.573,0.1743 0.159,-1.01455 0.617,-0.24079 -0.249,-0.98735 0.985,-0.11384 0.532,-0.86746 -1.061,-0.67301 0.067,-0.90271 1.3,0.65386 2.379,-1.03067 0.026,-2.60337 0.773,-0.14206 -0.16,-0.75159 0.445,-0.51584 -0.957,-0.41912 0.661,-1.51628 0.707,-0.0796 0.755,0.56923 0.186,-0.46546 0.52,0.69316 1.072,-0.008 -0.279,-0.93496 1.14,-0.47453 0.43,-1.41956 0.746,0.0645 -0.226,-0.76772 1.039,-1.27851 -0.101,-0.84126 1.616,-0.99742 0.517,0.51987 0.577,-0.38386 0.002,1.03772 0.845,0.269 -1.074,1.7198 1.624,0.0917 0.607,1.02866 0.938,-0.40804 -0.015,-0.62465 0.847,0.33953 0,0 1.11,0.2952 -0.81,1.70972 0.701,1.07298 0.059,1.15661 -1.148,1.00649 0.974,0.96115 1.129,0.37378 0.151,0.52592 -0.197,0.50576 -0.424,-0.25087 -0.15,1.209 -0.657,-0.11788 0.241,0.83219 -0.501,-0.0524 -0.482,1.20598 -0.497,-0.19243 -0.316,0.55916 -0.134,0.41509 1.287,0.40501 -0.083,0.37479 -2.338,1.22814 -0.218,2.41597 1.049,0.33349 0.243,0.55815 0.54,-0.71029 0.439,0.5229 0.867,-0.29319 0.04,0.66193 1.965,0.59442 -0.034,0.72036 -0.752,-0.18336 0.098,-0.48461 -0.258,0.59946 -0.617,0.134 -0.007,0.56521 -0.783,-0.21964 -0.013,0.54203 -1.307,0.0504 0.531,0.50879 -0.157,0.70222 -0.605,0.39595 -0.995,-0.35968 -0.368,1.80544 0.429,0.27202 -1.552,1.23318 0.386,0.24079 -0.812,1.03369 2.148,1.26239 0.77,2.12078 -0.963,2.15403 0.372,2.84517 -0.704,-0.0887 -0.296,1.50218 0.909,0.0564 -0.037,0.73648 -1.015,0.33852 0.343,0.5511 0.763,-0.2025 -0.109,1.3712 -1.522,0.41509 0.5,1.0357 -0.758,0.15516 -0.268,0.58132 -1.458,-0.16019 -0.097,0.3899 -1.189,0.12191 1.036,1.42158 1.22,0.50879 1.44,0.37176 1.732,-0.28613 2.033,0.83622 -0.027,1.10724 -0.53,-0.23676 -0.653,0.7657 -0.682,-0.11284 -0.286,0.39393 0.025,0.55614 0.46,0.0212 -0.568,1.41352 0.064,0.93395 0.476,0.26698 -0.391,1.59084 0.405,0.6186 -0.014,1.7742 0,0 -5.454,-0.80499 -2.208,0.37379 -1.622,0.9007 -0.915,1.47195 0.871,0.1884 -0.433,1.93137 1.711,1.64222 -0.184,0.7385 -0.728,-0.6045 -1.092,0.41408 -0.056,2.91167 -1.145,-0.13803 -0.032,0.3355 1.193,1.21202 0.715,2.46333 1.007,-0.11788 0.12,0.81406 0.68,0.0907 0.34,0.5773 -0.906,0.82212 0.78,0.59543 -0.01,0.97425 -0.536,0.13601 0.459,0.48158 -1.574,2.61647 -0.792,-0.11788 0.123,-0.51583 -0.967,-0.008 -0.395,0.4171 -2.2,-0.39796 -1.67,-1.34803 -0.475,0.42113 0.216,1.18784 -0.435,1.01455 1.342,0.40904 0.765,-0.2821 -0.329,3.46982 -1.432,0.53599 0.371,0.96821 -0.793,2.87338 0.828,1.60897 0.583,0.10075 0.893,1.1828 2.16,-0.21258 -0.62,0.71835 -0.046,0.98633 -0.596,-0.30325 -0.627,0.50375 -0.084,0.94805 1.486,1.13344 -0.528,0.47251 0.271,0.69316 2.34,0.0121 0.538,0.65286 0.623,-0.0846 0.143,-1.60595 0.842,-1.08709 1.67,0.57729 1.03,-0.43423 -0.033,1.19086 1.667,0.1471 -0.081,0.84932 0.594,0.82615 0.668,-0.43524 -0.852,-1.8004 0.223,-0.64278 1.187,0.32743 0.259,0.81305 0.87,0.009 0.087,2.61143 -2.317,-0.3093 -0.272,0.77174 -0.606,0.11284 -0.067,0.61155 0.946,-0.48662 0.12,0.32643 -1.45,1.73995 1.197,0.3365 -0.162,0.82514 1.151,0.008 -0.48,0.70525 0.413,0.58032 -0.744,0.63372 -0.03,-0.38487 -0.881,0.0242 0.114,-1.85279 -0.843,-0.91682 -3.478,0.71734 -0.549,-1.09213 -2.039,-0.23978 -0.322,-0.96921 0.241,-1.61301 -1.637,-0.35766 -0.098,0.50577 -0.954,0.14911 -0.162,0.60449 0.907,0.0826 1.005,1.33896 -0.919,0.91884 2.193,2.09761 0.114,0.60853 -0.502,0.0876 -1.023,1.70468 0.506,1.54953 0.395,0.21158 0.313,-0.83522 0.706,0.70324 0.737,-0.47554 1.493,0.134 -0.091,-1.42461 -0.803,-0.6186 0.809,-0.16422 -0.137,-0.92488 0.441,-0.37983 0.037,1.24325 0.547,-0.46042 0.138,0.42617 0.467,-0.72339 0.348,1.19691 1.182,-0.38386 0.274,0.68006 0.826,-0.4302 1.362,0.2277 -0.332,0.77476 1.021,0.0474 -0.161,2.61646 0.695,-0.0846 0.092,-0.58435 0.522,0.45539 0.154,-1.25535 0.762,0.59141 0.828,-0.58536 0.537,0.3496 0.324,-0.16926 -0.55,-0.43624 0.809,-0.44028 0.442,-0.0363 -0.136,0.54505 0.666,-0.19746 0.276,0.6186 0.086,-1.24527 1.374,-0.48259 -0.051,-0.49669 1.082,-0.53297 -0.447,-1.03671 0.25,-0.56723 1.438,0.0796 0.515,0.73345 1.148,-1.15156 0.243,1.23519 -0.745,0.2831 0.044,1.30169 0.444,-0.005 0.406,-0.89566 1.102,0.18941 0.07,-0.73145 1.516,0.98937 0.098,1.37926 -0.697,0.93798 0.512,0.50173 -0.084,0.55715 -0.865,-0.0816 -0.12,0.4574 0.469,0.68309 1.57,-0.28815 0.1,0.54506 0.7,0.15616 -0.224,1.28859 0.93,-0.66394 3.414,0.19545 -0.746,4.80576 0.884,0.48965 -0.636,0.26497 0.508,0.35262 0.695,-0.33146 0.241,0.44632 0.749,-0.20553 1.027,1.12638 0.729,-0.94402 0.457,0.80499 -0.184,1.24425 -0.581,0.36573 0.589,0.66091 -1.263,0.79391 0.402,0.47957 -0.545,0.33751 0.056,0.62163 -1.11,0.45639 0.133,1.46793 -0.738,-0.11486 0.275,1.46087 -1.203,0.11788 -0.689,-0.70726 -0.886,1.73994 -1.298,-0.005 -0.428,2.03715 0,0 -2.093,-0.37478 -1.548,-1.55457 -0.666,-0.0756 -0.281,1.08406 -0.42,-0.004 -0.75,-1.15459 -0.435,0.7657 -0.326,-0.17833 0.528,-0.73245 -0.35,-0.48057 -2.781,0.95812 0.306,1.00952 -1.425,2.63964 -0.578,-0.20956 -0.533,0.52994 -0.504,-0.54002 -1.339,0.35666 0.157,0.78484 -0.582,1.35407 0.177,1.09314 0.583,0.15515 -0.649,0.67402 1.043,-0.19042 -0.107,1.47699 -0.34,1.17273 -1.279,1.50318 -1.518,0.46849 -0.095,1.27851 5.457,0.74958 0.881,1.32285 -1.654,2.04924 -0.607,1.53744 -3.686,0.12292 -0.157,1.20799 -0.505,-0.269 0.073,1.05888 -0.775,1.89308 -1.251,-0.60147 -0.699,0.42415 -0.864,-0.84327 -0.902,-0.0877 -0.308,0.39997 -2.601,0.44129 0.136,1.076 -0.789,-0.26195 -0.316,-1.11429 -0.716,0.26598 0.195,-0.41106 -0.57,-0.40803 -0.663,0.0413 -0.276,0.76872 -1.254,-0.38788 -1.49,2.97816 0.469,0.90473 -0.285,0.58435 -0.435,-0.48562 -1.471,-0.28512 -3.897,0.009 -0.412,-1.29161 -0.758,-0.58939 -1.106,0.91783 -0.584,-0.0897 0,0 -0.566,-0.89365 0.471,-0.34255 -0.235,-0.77678 -1.521,0.48561 -1.318,-1.56061 -1.12,0.0746 -0.722,-1.36415 -1.59,0.27001 -0.003,-2.55803 -2.375,1.01354 -2.464,-0.37278 -1.096,-0.93294 -0.517,-1.86185 -1.73,0.19444 -0.323,-0.81909 -0.82,0.19545 -0.572,-1.09817 -1.219,-0.17933 -1.97,-2.90361 -1.331,-0.005 0.047,-1.72382 -1.168,-0.86343 0.021,-0.95712 1.17,-0.18034 -0.168,-0.78686 -1.542,0.8725 -0.125,-0.73447 -1.125,-0.59946 -0.09,-0.98634 1.068,-0.45136 -1.071,-0.56823 -1.126,1.05183 -0.449,-1.34098 -0.885,0.17329 -0.339,-0.3496 0.161,-0.92388 -1.351,-0.46042 -0.063,0.67401 -0.739,0.13602 0.039,-1.17374 -0.891,0.11788 0.106,-0.29318 -0.574,-0.15012 0.499,-0.65689 -0.342,-0.6448 -2.621,0.77376 0,0 -0.965,-2.10365 -2.634,-10.6573 -0.512,-6.16488 -1.337,-5.02237 -0.768,-1.72786 -0.809,-0.39594 -0.627,-1.24728 -0.64,-3.47486 -0.611,-0.87048 -1.843,-6.03994 0.826,-0.61357 -0.599,-0.48662 -0.181,0.68611 -0.971,0.0302 -0.313,-1.75002 -0.524,-0.54808 0.32,-0.28814 -0.384,-1.61905 -0.669,-0.71633 -0.622,0.65084 -2.291,-1.75103 0.587,-0.13299 0.157,-0.89768 -0.396,-0.0121 -0.308,-1.05989 0,0 0.879,-0.538 0.754,0.24986 -0.068,-0.91279 0.831,0.64278 1.22,-0.98231 -0.176,-0.52289 0.851,-1.06593 -0.502,-1.21605 0.235,-1.02664 0.676,-0.8876 -0.318,-0.85033 -1.029,-0.74857 1.761,-0.76671 -0.278,-1.61602 -0.957,-0.46446 -0.003,-1.18481 -0.548,-1.00952 0.647,-0.7939 -0.69,-0.86645 0.298,-0.95108 -0.278,-0.97123 -0.496,-0.26799 -0.384,0.38083 -0.483,-0.69517 -0.35,0.62969 -0.986,0.0383 z";

let state = {
    sessionId: null, task: 'task_karnataka', step: 0, done: false,
    numAgents: 0, zoneInfo: {}, observations: {}, taskConfigs: {},
    rewardHistory: [], freqHistory: [], perAgentRewards: {},
    totalReward: 0, autoRunning: false, autoTimer: null,
    safetyTotal: 0, lastOversight: null, mapScale: 1, alarms: []
};

// --- Init ---
function isKarnatakaTask(taskId) {
    return taskId.includes('karnataka');
}

function buildTaskButtons(tasks) {
    const procContainer = document.getElementById('proceduralTasks');
    const kaContainer = document.getElementById('karnatakaTasks');
    procContainer.innerHTML = '';
    kaContainer.innerHTML = '';

    // Display-friendly names
    const nameMap = {
        'task_easy': 'Easy', 'task_medium': 'Medium', 'task_hard': 'Hard',
        'task_karnataka': 'Full ★',
        'karnataka_easy': 'Easy', 'karnataka_medium': 'Medium', 'karnataka_hard': 'Hard',
    };

    tasks.forEach(t => {
        const btn = document.createElement('button');
        btn.className = 'task-btn' + (t.id === state.task ? ' active' : '');
        if (isKarnatakaTask(t.id)) btn.classList.add('ka');
        btn.dataset.task = t.id;
        const label = nameMap[t.id] || t.id.replace('task_','').replace('karnataka_','');
        btn.innerHTML = `<span class="task-name">${label}</span><span class="task-info">${t.num_buses}b · ${t.num_agents}a</span>`;
        btn.addEventListener('click', () => {
            document.querySelectorAll('.task-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            state.task = t.id;
            // Destroy map so it reinitializes with correct bounds
            if (leafletMap) { leafletMap.remove(); leafletMap = null; mapLayers = {lines:null,nodes:null,badges:null}; }
            mapFitted = false;
            resetEpisode();
        });
        if (t.id.startsWith('task_') && !t.id.includes('karnataka')) {
            procContainer.appendChild(btn);
        } else {
            kaContainer.appendChild(btn);
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    fetch(`${API}/tasks`).then(r=>r.json()).then(d=>{
        d.forEach(t => state.taskConfigs[t.id] = t);
        buildTaskButtons(d);
        resetEpisode();
        setTimeout(() => document.getElementById('loading').classList.add('hidden'), 800);
    });
});

// --- API Calls ---
async function resetEpisode() {
    stopAutoRun();
    state.step = 0; state.done = false; state.totalReward = 0;
    state.rewardHistory = []; state.freqHistory = []; state.safetyTotal = 0;
    state.alarms = [];
    mapFitted = false;
    document.getElementById('alarmLog').innerHTML = '';
    document.getElementById('simStatus').textContent = 'RUNNING';
    try {
        const r = await fetch(`${API}/reset_multi?task_id=${state.task}`, {method:'POST'});
        const d = await r.json();
        state.sessionId = d.session_id;
        state.numAgents = d.num_agents;
        state.zoneInfo = d.zone_info;
        state.observations = d.observations;
        state.perAgentRewards = {};
        for (let i = 0; i < d.num_agents; i++) state.perAgentRewards[i] = [];
        updateAll();
    } catch(e) { showAlert('critical', 'Reset failed: ' + e.message); }
}

async function stepEpisode() {
    if (!state.sessionId || state.done) return;
    const actions = {};
    for (let i = 0; i < state.numAgents; i++) {
        const obs = state.observations[String(i)];
        actions[String(i)] = generateHeuristicAction(i, obs);
    }
    try {
        const r = await fetch(`${API}/step_multi?session_id=${state.sessionId}`, {
            method: 'POST', headers: {'Content-Type':'application/json'},
            body: JSON.stringify({agent_actions: actions})
        });
        const d = await r.json();
        state.step++;
        state.observations = d.observations;
        state.totalReward += d.team_reward;
        state.rewardHistory.push(d.team_reward);
        state.lastOversight = d.oversight_report;
        state.done = d.done;
        const freq = getAvgFreq(d.observations);
        state.freqHistory.push(freq);
        // safety_reports is a string-keyed dict {"0": {...}, "1": {...}}, not an array
        Object.values(d.safety_reports || {}).forEach(sr => { if (sr.was_corrected) state.safetyTotal++; });
        for (const [aid, rew] of Object.entries(d.rewards)) {
            if (!state.perAgentRewards[aid]) state.perAgentRewards[aid] = [];
            state.perAgentRewards[aid].push(rew.value);
        }
        if (d.done) {
            document.getElementById('simStatus').textContent = d.info.is_blackout ? 'BLACKOUT' : 'COMPLETE';
            stopAutoRun();
        }
        updateAll(d);
    } catch(e) { showAlert('critical', 'Step failed: ' + e.message); stopAutoRun(); }
}

async function getGrade() {
    if (!state.sessionId) return;
    try {
        const r = await fetch(`${API}/grader?session_id=${state.sessionId}`);
        const d = await r.json();
        document.getElementById('episodeScore').textContent = d.score.toFixed(4);
        document.getElementById('episodeScore').style.color =
            d.score > 0.7 ? 'var(--status-normal)' : d.score > 0.4 ? 'var(--status-warning)' : 'var(--status-critical)';
    } catch(e) { showAlert('warning', 'Grade failed: ' + e.message); }
}

// --- Heuristic Agent ---
function generateHeuristicAction(agentId, obs) {
    if (!obs) return {bus_adjustments: [], topology_actions: []};
    const freq = obs.grid_frequency || 50;
    const error = 50.0 - freq;
    const buses = obs.local_buses || [];
    const adjs = [];
    buses.forEach(b => {
        // Exclude slack — physics solver overwrites its injection; adjusting it wastes the action
        if (b.type === 'battery' || b.type === 'generator') {
            let delta = error * 8;
            delta = Math.max(-15, Math.min(15, delta));
            if (Math.abs(delta) > 0.5) adjs.push({bus_id: b.id, delta: Math.round(delta*10)/10});
        }
    });
    return {bus_adjustments: adjs, topology_actions: []};
}

// --- Auto Run ---
function toggleAutoRun() {
    if (state.autoRunning) { stopAutoRun(); }
    else { state.autoRunning = true; document.getElementById('btnAutoRun').classList.add('active'); autoStep(); }
}
function stopAutoRun() {
    state.autoRunning = false;
    if (state.autoTimer) clearTimeout(state.autoTimer);
    document.getElementById('btnAutoRun').classList.remove('active');
}
async function autoStep() {
    if (!state.autoRunning || state.done) { stopAutoRun(); return; }
    await stepEpisode();
    if (state.autoRunning && !state.done) state.autoTimer = setTimeout(autoStep, 200);
}

// --- UI Updates ---
function updateAll(stepData) {
    updateHeader();
    updateFrequency();
    updateSystemSummary();
    updateOversight();
    updateAgentCards(stepData);
    updateLeaderboard();
    updateGridMap();
    updateCharts();
    updateAlarmLog(stepData);
}

function getAvgFreq(obs) {
    let sum=0, n=0;
    for (const o of Object.values(obs||state.observations)) { sum += (o.grid_frequency||50); n++; }
    return n ? sum/n : 50;
}

function updateHeader() {
    const maxSteps = state.taskConfigs[state.task]?.max_steps || 50;
    document.getElementById('headerStep').textContent = `${state.step} / ${maxSteps}`;
    document.getElementById('headerAgents').textContent = `${state.numAgents} Active`;
    document.getElementById('headerReward').textContent = state.totalReward.toFixed(2);
    document.getElementById('headerEpisode').textContent = state.task.replace('task_','').toUpperCase();
    const freq = getAvgFreq();
    const el = document.getElementById('headerFreq');
    el.textContent = freq.toFixed(2) + ' Hz';
    el.className = 'value ' + freqClass(freq);
    document.getElementById('totalSteps').textContent = state.step;
    document.getElementById('blackoutStatus').textContent = state.done && document.getElementById('simStatus').textContent==='BLACKOUT' ? 'Yes' : 'No';
}

function updateFrequency() {
    const freq = getAvgFreq();
    const cls = freqClass(freq);
    const colors = {normal:'#4a7c59', warning:'#c4a45e', critical:'#7c203a'};
    const col = colors[cls];

    // ── Geometry ──────────────────────────────────────────────
    const W = 240, H = 140;
    const cx = W / 2, cy = 118;
    const rOuter = 96, rInner = 78, rTickIn = 72, rTickOut = 78, rLabel = 60;
    const minF = 49, maxF = 51;
    const pct = Math.max(0, Math.min(1, (freq - minF) / (maxF - minF)));
    const startA = Math.PI, endA = 0;
    const angleOf = f => startA - ((f - minF) / (maxF - minF)) * (startA - endA);
    const needleA = angleOf(freq);

    const polar = (cx0, cy0, r, a) => [cx0 + r * Math.cos(a), cy0 - r * Math.sin(a)];

    // ── Build SVG ──────────────────────────────────────────────
    let svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" class="freq-svg">`;

    svg += `
        <defs>
            <linearGradient id="needle-grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="${col}" stop-opacity="1"/>
                <stop offset="100%" stop-color="${col}" stop-opacity="0.3"/>
            </linearGradient>
        </defs>
    `;

    // Outer subtle ring
    {
        const [x1, y1] = polar(cx, cy, rOuter, startA);
        const [x2, y2] = polar(cx, cy, rOuter, endA);
        svg += `<path d="M${x1},${y1} A${rOuter},${rOuter} 0 0,1 ${x2},${y2}" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>`;
    }

    // Background arc track
    {
        const [x1, y1] = polar(cx, cy, (rOuter + rInner) / 2, startA);
        const [x2, y2] = polar(cx, cy, (rOuter + rInner) / 2, endA);
        svg += `<path d="M${x1},${y1} A${(rOuter+rInner)/2},${(rOuter+rInner)/2} 0 0,1 ${x2},${y2}" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="${rOuter - rInner}" stroke-linecap="butt"/>`;
    }

    // Colored zone segments
    const segs = [
        {f: 49.00, t: 49.50, c: '#7c203a'},
        {f: 49.50, t: 49.85, c: '#c4a45e'},
        {f: 49.85, t: 50.15, c: '#4a7c59'},
        {f: 50.15, t: 50.50, c: '#c4a45e'},
        {f: 50.50, t: 51.00, c: '#7c203a'},
    ];
    const rMid = (rOuter + rInner) / 2;
    const segW = 2; // Very thin track
    segs.forEach(s => {
        const a1 = angleOf(s.f), a2 = angleOf(s.t);
        const [x1, y1] = polar(cx, cy, rMid, a1);
        const [x2, y2] = polar(cx, cy, rMid, a2);
        const isActive = freq >= s.f && freq < s.t;
        const opacity = isActive ? 1 : 0.3;
        svg += `<path d="M${x1},${y1} A${rMid},${rMid} 0 0,0 ${x2},${y2}" fill="none" stroke="${s.c}" stroke-width="${segW}" opacity="${opacity}" />`;
    });

    // Tick marks at every 0.25 Hz, major at 0.5 Hz
    for (let f = minF; f <= maxF + 0.0001; f += 0.25) {
        const major = Math.abs(f - Math.round(f * 2) / 2) < 0.001 && Math.abs((f * 2) % 1) < 0.001;
        const isHalf = Math.abs(f * 2 - Math.round(f * 2)) < 0.001;
        const a = angleOf(f);
        const inner = isHalf ? rTickIn - 4 : rTickIn;
        const outer = isHalf ? rTickOut + 2 : rTickOut;
        const [x1, y1] = polar(cx, cy, inner, a);
        const [x2, y2] = polar(cx, cy, outer, a);
        svg += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${isHalf ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,255,0.25)'}" stroke-width="${isHalf ? 1.5 : 1}"/>`;
    }

    // Scale labels
    [
        {f: 49.0, txt: '49'},
        {f: 49.5, txt: '49.5'},
        {f: 50.0, txt: '50'},
        {f: 50.5, txt: '50.5'},
        {f: 51.0, txt: '51'},
    ].forEach(({f, txt}) => {
        const a = angleOf(f);
        const [x, y] = polar(cx, cy, rLabel, a);
        let anchor = 'middle';
        if (f === 49.0) anchor = 'start';
        if (f === 51.0) anchor = 'end';
        const yOff = (f === 49.0 || f === 51.0) ? 0 : 4;
        svg += `<text x="${x}" y="${y + yOff}" text-anchor="${anchor}" fill="#a3a3a3" font-family="'Bespoke Stencil', sans-serif" font-size="10" font-weight="400" letter-spacing="0.5">${txt}</text>`;
    });

    // Needle (Razor sharp minimalist line)
    const tipR = rInner - 2;
    const [tipX, tipY] = polar(cx, cy, tipR, needleA);
    
    svg += `<line x1="${cx}" y1="${cy}" x2="${tipX}" y2="${tipY}" stroke="${col}" stroke-width="1.2" stroke-linecap="butt" opacity="0.9"/>`;

    // Minimalist Hub
    svg += `<circle cx="${cx}" cy="${cy}" r="3" fill="#000" stroke="${col}" stroke-width="1.2"/>`;

    svg += '</svg>';
    document.getElementById('freqArc').innerHTML = svg;

    // ── Numeric readout ───────────────────────────────────────
    const valEl = document.getElementById('freqValueBig');
    valEl.textContent = freq.toFixed(2);
    valEl.className = `freq-value-big ${cls}`;

    // ── Delta chip ────────────────────────────────────────────
    const delta = freq - 50;
    const sign = delta > 0.001 ? '+' : (delta < -0.001 ? '−' : '±');
    const arrow = delta > 0.001 ? '▲' : (delta < -0.001 ? '▼' : '●');
    const chip = document.getElementById('freqDeltaChip');
    document.getElementById('freqDeltaText').textContent = `${sign}${Math.abs(delta).toFixed(3)} Hz`;
    document.getElementById('freqDeltaArrow').textContent = arrow;
    chip.className = `freq-delta-chip ${cls}`;

    // ── Grid condition badge ──────────────────────────────────
    const gc = document.getElementById('gridCondition');
    const labelEl = document.getElementById('gridConditionLabel');
    const dev = Math.abs(delta);
    if (dev < 0.15) { labelEl.textContent = 'NORMAL'; gc.className = 'grid-condition normal'; }
    else if (dev < 0.3) { labelEl.textContent = 'CONSERVATIVE'; gc.className = 'grid-condition conservative'; }
    else if (dev < 0.5) { labelEl.textContent = 'ALERT'; gc.className = 'grid-condition alert'; }
    else { labelEl.textContent = 'EMERGENCY'; gc.className = 'grid-condition emergency'; }
}

function freqClass(f) { return Math.abs(f-50)<0.5?'normal':Math.abs(f-50)<1?'warning':'critical'; }

function updateSystemSummary() {
    let gen=0, load=0, lines=0, overloaded=0, totalLines=0;
    for (const obs of Object.values(state.observations)) {
        gen += obs.zone_gen_mw || 0;
        load += obs.zone_load_mw || 0;
        (obs.internal_lines||[]).concat(obs.boundary_lines||[]).forEach(l => {
            totalLines++; if(l.connected) lines++;
            if(l.connected && l.rho > 1) overloaded++;
        });
    }
    document.getElementById('totalGen').textContent = gen.toFixed(1) + ' MW';
    document.getElementById('totalLoad').textContent = load.toFixed(1) + ' MW';
    document.getElementById('netBalance').textContent = (gen-load).toFixed(1) + ' MW';
    document.getElementById('linesConnected').textContent = `${lines} / ${totalLines}`;
    const olEl = document.getElementById('linesOverloaded');
    olEl.textContent = overloaded;
    olEl.style.color = overloaded > 0 ? 'var(--status-critical)' : 'var(--status-normal)';
}

function updateOversight() {
    const o = state.lastOversight;
    if (!o) return;
    const cs = document.getElementById('coordScore');
    cs.textContent = o.coordination_score.toFixed(2);
    cs.style.color = o.coordination_score > 0.7 ? 'var(--status-normal)' : o.coordination_score > 0.4 ? 'var(--status-warning)' : 'var(--status-critical)';
    document.getElementById('conflicts').textContent = o.conflicting_actions_detected;
    document.getElementById('safetyCorrTotal').textContent = state.safetyTotal;
    document.getElementById('selfishActions').textContent = o.selfish_actions_detected;
}

function updateAlarmLog(stepData) {
    if (!stepData) return;
    const logEl = document.getElementById('alarmLog');
    let newAlarms = [];
    const timeStr = `T+${String(state.step).padStart(2,'0')}s`;

    // Check frequency
    const freq = getAvgFreq();
    if (Math.abs(freq - 50) > 0.5) {
        newAlarms.push({t: timeStr, msg: `FREQ DEVIATION: ${freq.toFixed(2)} Hz`, type: Math.abs(freq-50)>1?'crit':'warn'});
    }

    // Check lines and safety
    for (const [aid, obs] of Object.entries(state.observations)) {
        (obs.internal_lines||[]).concat(obs.boundary_lines||[]).forEach(l => {
            if (l.rho > 1.0) newAlarms.push({t: timeStr, msg: `OVERLOAD: Line ${l.id} at ${(l.rho*100).toFixed(0)}%`, type: 'crit'});
            else if (l.rho > 0.9) newAlarms.push({t: timeStr, msg: `CONGESTION: Line ${l.id} at ${(l.rho*100).toFixed(0)}%`, type: 'warn'});
        });
        const sr = stepData.safety_reports?.[aid];
        if (sr && sr.was_corrected) {
            newAlarms.push({t: timeStr, msg: `AGENT ${aid} SAFETY CORRECTED`, type: 'warn'});
        }
    }

    if (state.done && document.getElementById('simStatus').textContent==='BLACKOUT') {
         newAlarms.push({t: timeStr, msg: `SYSTEM COLLAPSE - BLACKOUT`, type: 'crit'});
    }

    if (newAlarms.length > 0) {
        state.alarms = [...newAlarms, ...state.alarms].slice(0, 50); // Keep last 50
        logEl.innerHTML = state.alarms.map(a => `<div class="alarm-entry ${a.type}"><span class="alarm-time">[${a.t}]</span>${a.msg}</div>`).join('');
    }
}

function updateAgentCards(stepData) {
    const container = document.getElementById('agentCards');
    container.innerHTML = '';
    for (let i = 0; i < state.numAgents; i++) {
        const obs = state.observations[String(i)];
        const zi = state.zoneInfo[String(i)] || {};
        const sr = stepData?.safety_reports?.[String(i)];
        const rew = stepData?.rewards?.[String(i)];
        const cumReward = (state.perAgentRewards[i]||[]).reduce((a,b)=>a+b,0);
        const wasCorrected = sr?.was_corrected || false;
        const cardClass = wasCorrected ? 'warning' : 'active';
        const html = `
        <div class="agent-card ${cardClass}">
            <div class="agent-header">
                <div class="agent-name">
                    <span class="agent-dot" style="background:${AGENT_COLORS[i]}"></span>
                    Agent ${i} - ${zi.zone_name||AGENT_NAMES[i]}
                </div>
                <span class="agent-status-badge ${wasCorrected?'corrected':'active'}">${wasCorrected?'Corrected':'Safe'}</span>
            </div>
            <div class="agent-metrics">
                <div class="agent-metric">
                    <div class="label">Step Reward</div>
                    <div class="value" style="color:${(rew?.value||0)>=0?'var(--status-normal)':'var(--status-critical)'}">${(rew?.value||0).toFixed(2)}</div>
                </div>
                <div class="agent-metric">
                    <div class="label">Cumulative</div>
                    <div class="value">${cumReward.toFixed(1)}</div>
                </div>
                <div class="agent-metric">
                    <div class="label">Zone Load</div>
                    <div class="value">${(obs?.zone_load_mw||0).toFixed(0)} MW</div>
                </div>
                <div class="agent-metric">
                    <div class="label">Zone Gen</div>
                    <div class="value">${(obs?.zone_gen_mw||0).toFixed(0)} MW</div>
                </div>
            </div>
            <div class="safety-shield ${wasCorrected?'corrected':'safe'}">
                ${wasCorrected?'&#9888; Safety Corrected':'&#9635; Safety OK'}
                ${sr?.blocked_topology_actions ? ` | ${sr.blocked_topology_actions} blocked` : ''}
            </div>
            <div class="sparkline-container"><svg id="spark${i}"></svg></div>
        </div>`;
        container.innerHTML += html;
    }
    // Draw sparklines
    for (let i = 0; i < state.numAgents; i++) {
        drawSparkline(`spark${i}`, state.perAgentRewards[i]||[], AGENT_COLORS[i]);
    }
}

function updateLeaderboard() {
    const lb = document.getElementById('leaderboard');
    const agents = [];
    for (let i = 0; i < state.numAgents; i++) {
        const cum = (state.perAgentRewards[i]||[]).reduce((a,b)=>a+b,0);
        const zi = state.zoneInfo[String(i)] || {};
        agents.push({id:i, name: zi.zone_name||AGENT_NAMES[i], score: cum});
    }
    agents.sort((a,b) => b.score - a.score);
    lb.innerHTML = agents.map((a,idx) => `
        <li>
            <span class="agent-label">
                <span class="agent-dot" style="background:${AGENT_COLORS[a.id]};width:6px;height:6px;border-radius:50%;display:inline-block;"></span>
                ${['#1','#2','#3'][idx]||'  '} ${a.name}
            </span>
            <span class="score" style="color:${AGENT_COLORS[a.id]}">${a.score.toFixed(1)}</span>
        </li>`).join('');
}

// --- Grid Map (Leaflet) ---
let leafletMap = null;
let mapLayers = { lines: null, nodes: null, badges: null };
let mapFitted = false;

function initLeafletMap() {
    const container = document.getElementById('gridMap');
    if (leafletMap) return;
    
    const isKa = isKarnatakaTask(state.task);
    // Karnataka bounds: tight crop around the state
    const kaBounds = [[11.5, 73.8], [18.5, 79.0]];
    
    const mapOpts = {
        center: isKa ? [14.5, 76.5] : [15, 76],
        zoom: isKa ? 7 : 6,
        zoomControl: true,
        attributionControl: false,
        minZoom: isKa ? 6 : 3,
        maxZoom: 15,
        preferCanvas: true,
    };
    // Lock panning for Karnataka tasks
    if (isKa) {
        mapOpts.maxBounds = L.latLngBounds(kaBounds).pad(0.15);
        mapOpts.maxBoundsViscosity = 1.0;
    }

    leafletMap = L.map(container, mapOpts);
    
    if (isKa) {
        // Real map tiles for Karnataka tasks (no labels — keeps the canvas clean)
        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
            subdomains: 'abcd',
            maxZoom: 19,
        }).addTo(leafletMap);

        L.control.attribution({position: 'bottomright', prefix: false})
            .addAttribution('© <a href="https://carto.com/">CARTO</a>')
            .addTo(leafletMap);

        leafletMap.fitBounds(kaBounds, { padding: [20, 20] });
    }
    // Procedural grids: no tiles — plain dark background via CSS

    // Layer groups for easy clearing
    mapLayers.lines = L.layerGroup().addTo(leafletMap);
    mapLayers.nodes = L.layerGroup().addTo(leafletMap);
    mapLayers.badges = L.layerGroup().addTo(leafletMap);
    
    // Fix Leaflet size after container is fully rendered
    setTimeout(() => {
        if (!leafletMap) return;
        leafletMap.invalidateSize();
        if (isKa) {
            leafletMap.fitBounds(kaBounds, { padding: [20, 20] });
        } else {
            mapFitted = false;
            updateGridMap();
        }
    }, 250);
}

function updateGridMap() {
    if (!leafletMap) initLeafletMap();
    
    // Clear previous layers
    mapLayers.lines.clearLayers();
    mapLayers.nodes.clearLayers();
    mapLayers.badges.clearLayers();

    const typeIcons = {slack:'S',generator:'G',load:'L',battery:'B',solar:'PV',wind:'W'};
    const typeColors = {slack:'#00e5a0',generator:'#f5a623',load:'#e94560',battery:'#e2e8f0',solar:'#ffeb3b',wind:'#64ffda'};

    // Collect buses — merge static config with runtime state
    let allBuses = [];
    const taskCfg = state.taskConfigs[state.task];
    const runtimeState = {};
    for (const obs of Object.values(state.observations)) {
        (obs.local_buses||[]).forEach(b => { runtimeState[b.id] = b; });
    }
    if (taskCfg && taskCfg.buses) {
        allBuses = taskCfg.buses.map(b => {
            const rt = runtimeState[b.id];
            return {...b, p_injection: rt ? rt.p_injection : (b.base_p || 0)};
        });
    } else {
        allBuses = Object.values(runtimeState);
    }

    const hasGPS = allBuses.some(b => b.lat !== undefined && b.lon !== undefined);
    
    // For non-GPS tasks, generate fake positions around Karnataka center
    const busPositions = {};
    const isKaMap = isKarnatakaTask(state.task);
    const zones = isKaMap ? [
        {id:0, lat:16.8, lon:76.8, color:AGENT_COLORS[0], label:'Kalaburagi'},
        {id:1, lat:15.2, lon:75.2, color:AGENT_COLORS[1], label:'Hubballi'},
        {id:2, lat:12.8, lon:75.5, color:AGENT_COLORS[2], label:'Mysuru'},
        {id:3, lat:13.2, lon:77.5, color:AGENT_COLORS[3], label:'Bengaluru'},
    ] : [
        {id:0, lat:17, lon:74, color:AGENT_COLORS[0], label:'Zone Alpha'},
        {id:1, lat:17, lon:78, color:AGENT_COLORS[1], label:'Zone Beta'},
        {id:2, lat:13, lon:74, color:AGENT_COLORS[2], label:'Zone Gamma'},
        {id:3, lat:13, lon:78, color:AGENT_COLORS[3], label:'Zone Delta'},
    ];

    allBuses.forEach((b, idx) => {
        const aid = findAgent(b.id);
        let lat, lon;
        if (hasGPS && b.lat !== undefined && b.lon !== undefined) {
            lat = b.lat;
            lon = b.lon;
        } else {
            // Fallback: spread around zone center
            const zd = zones[aid >= 0 && aid < zones.length ? aid : 0];
            const zBuses = allBuses.filter(bb => findAgent(bb.id) === aid);
            const zi = zBuses.indexOf(b);
            const a = (zi / Math.max(zBuses.length, 1)) * Math.PI * 2;
            const radius = isKaMap ? 0.3 : 1.2; // Spread out more for procedural grids
            lat = zd.lat + Math.cos(a) * radius;
            lon = zd.lon + Math.sin(a) * radius;
        }
        busPositions[b.id] = {lat, lon, bus: b, agent: aid};
    });

    // Pre-build a map of line connections from task configuration
    const lineConfigMap = {};
    if (taskCfg && taskCfg.lines) {
        taskCfg.lines.forEach(l => {
            lineConfigMap[l.id] = { from: l.from, to: l.to };
        });
    }

    // Draw transmission lines
    const drawnLines = new Set();
    for (const obs of Object.values(state.observations)) {
        (obs.internal_lines||[]).concat(obs.boundary_lines||[]).forEach(l => {
            if (drawnLines.has(l.id)) return;
            drawnLines.add(l.id);
            
            let fromId, toId;
            if (lineConfigMap[l.id]) {
                fromId = lineConfigMap[l.id].from;
                toId = lineConfigMap[l.id].to;
            } else {
                // Fallback for older grids with L_{from}_{to} naming
                const parts = l.id.replace('L_','').split('_');
                fromId = parseInt(parts[0]);
                toId = parseInt(parts[1]);
            }
            
            const from = busPositions[fromId];
            const to = busPositions[toId];
            if (!from || !to) return;

            const lc = !l.connected ? '#4a5568' : l.rho > 1 ? '#ff1744' : l.rho > 0.8 ? '#ff9100' : '#e91e63';
            const w = !l.connected ? 2 : l.rho > 1 ? 6 : l.rho > 0.8 ? 5 : 3.5;

            // Glow layer for overloaded/congested lines
            if (l.connected && l.rho > 0.8) {
                const glow = L.polyline(
                    [[from.lat, from.lon], [to.lat, to.lon]],
                    { color: lc, weight: w + 6, opacity: 0.15, dashArray: null, interactive: false }
                );
                mapLayers.lines.addLayer(glow);
            }

            const polyline = L.polyline(
                [[from.lat, from.lon], [to.lat, to.lon]],
                { color: lc, weight: w, dashArray: l.connected ? '12 6' : '4 6', opacity: 0.95 }
            );
            // Show tooltip with flow info
            const flowStr = l.connected ? `${l.flow.toFixed(0)} MW · ${(l.rho*100).toFixed(0)}% load` : 'Disconnected';
            polyline.bindTooltip(`<b>${l.id}</b><br>${flowStr}`, {
                permanent: false, className: 'leaflet-tooltip-dark', direction: 'center'
            });

            // Permanent label only for *high* flow (declutter)
            if (l.connected && Math.abs(l.flow) > 55) {
                const midLat = (from.lat + to.lat) / 2;
                const midLon = (from.lon + to.lon) / 2;
                const flowLabel = L.divIcon({
                    className: 'line-flow-label',
                    html: `<span class="line-flow-pill" style="--flow-color:${lc}">${Math.abs(l.flow).toFixed(0)}<small>MW</small></span>`,
                    iconSize: [44, 14],
                    iconAnchor: [22, 7],
                });
                L.marker([midLat, midLon], { icon: flowLabel, interactive: false }).addTo(mapLayers.lines);
            }

            mapLayers.lines.addLayer(polyline);
        });
    }
    // Ensure lines are visible above tiles
    if (drawnLines.size > 0) {
        mapLayers.lines.eachLayer(l => { if (l.bringToFront) l.bringToFront(); });
    }

    // Draw bus markers
    for (const [bid, pos] of Object.entries(busPositions)) {
        const b = pos.bus;
        const col = AGENT_COLORS[pos.agent] || '#4a5568';
        const fill = typeColors[b.type] || '#666';
        const r = b.type === 'slack' ? 10 : b.type === 'load' ? 6 : 8;
        const inj = (b.p_injection !== undefined ? b.p_injection : 0);
        const busLabel = b.name || `${b.type} ${b.id}`;
        const icon = typeIcons[b.type] || '?';

        // Outer ring (zone color)
        const outerRing = L.circleMarker([pos.lat, pos.lon], {
            radius: r + 4, fillColor: 'transparent', fillOpacity: 0,
            color: col, weight: 1.5, opacity: 0.4
        });
        mapLayers.nodes.addLayer(outerRing);

        // Inner node
        const marker = L.circleMarker([pos.lat, pos.lon], {
            radius: r, fillColor: fill, fillOpacity: 0.9,
            color: col, weight: 1, opacity: 0.6
        });

        // Rich tooltip
        const tooltipHtml = `
            <div style="font-family:'JetBrains Mono',monospace;font-size:11px;min-width:120px;">
                <b style="color:${fill}">${icon}</b> <b>${busLabel}</b><br>
                <span style="color:#888">Type:</span> ${b.type}<br>
                <span style="color:#888">Injection:</span> <b>${inj.toFixed(1)} MW</b><br>
                <span style="color:#888">Zone:</span> ${state.zoneInfo[String(pos.agent)]?.zone_name || 'Agent ' + pos.agent}
            </div>`;
        marker.bindTooltip(tooltipHtml, { className: 'leaflet-tooltip-dark', direction: 'top', offset: [0, -r] });
        mapLayers.nodes.addLayer(marker);

        // Bus name label hidden by default — visible on hover via tooltip.
        // Only show MW pill for buses with non-trivial injection (declutter)
        if (Math.abs(inj) >= 45) {
            const sign = inj > 0 ? '+' : (inj < 0 ? '−' : '');
            const cls = inj > 0 ? 'pos' : (inj < 0 ? 'neg' : 'zero');
            const mwIcon = L.divIcon({
                className: 'bus-mw-icon',
                html: `<span class="bus-mw-pill ${cls}">${sign}${Math.abs(inj).toFixed(0)}<small>MW</small></span>`,
                iconSize: [50, 16],
                iconAnchor: [25, -r - 4],
            });
            L.marker([pos.lat, pos.lon], { icon: mwIcon, interactive: false }).addTo(mapLayers.nodes);
        }
    }

    // Zone badges — compact pills floating above each region cluster
    zones.slice(0, state.numAgents).forEach(z => {
        const zi = state.zoneInfo[String(z.id)] || {};
        const rawName = zi.zone_name || z.label || AGENT_NAMES[z.id] || '';
        const name = rawName.replace(/_Region$/i, '').replace(/_/g, ' ');
        const cum = (state.perAgentRewards[z.id] || []).reduce((a, b) => a + b, 0);
        const cumStr = (cum >= 0 ? '+' : '') + cum.toFixed(1);
        const cumCls = cum > 0.5 ? 'pos' : cum < -0.5 ? 'neg' : 'neutral';

        const badgeIcon = L.divIcon({
            className: 'zone-badge-leaflet',
            html: `<div class="zone-pill" style="--zc:${z.color}">
                <span class="zone-pill-bar"></span>
                <span class="zone-pill-name">${name}</span>
                <span class="zone-pill-pts ${cumCls}">${cumStr}</span>
            </div>`,
            iconSize: [130, 22],
            iconAnchor: [65, 60],
        });
        L.marker([z.lat, z.lon], { icon: badgeIcon, interactive: false }).addTo(mapLayers.badges);
    });

    // Fit map to bus extent on first data load
    if (!mapFitted && allBuses.length > 0) {
        const lats = allBuses.filter(b => b.lat).map(b => b.lat);
        const lons = allBuses.filter(b => b.lon).map(b => b.lon);
        if (lats.length > 0) {
            leafletMap.fitBounds([
                [Math.min(...lats) - 0.5, Math.min(...lons) - 0.5],
                [Math.max(...lats) + 0.5, Math.max(...lons) + 0.5]
            ]);
            mapFitted = true;
        }
    }

    // Populate agent legend
    const legendContainer = document.getElementById('agentLegendContainer');
    if (legendContainer && state.numAgents > 0) {
        legendContainer.style.display = 'block';
        let legendHtml = `<div class="legend-title" style="margin-top:2px;">Zones / Agents</div>`;
        for (let i = 0; i < state.numAgents; i++) {
            const zi = state.zoneInfo[String(i)] || {};
            const name = zi.zone_name || AGENT_NAMES[i];
            legendHtml += `<div class="legend-item"><span class="legend-dot" style="background:${AGENT_COLORS[i]};"></span> ${name}</div>`;
        }
        legendContainer.innerHTML = legendHtml;
    } else if (legendContainer) {
        legendContainer.style.display = 'none';
    }
}

function showBusTooltip(e, node) {
    const tt = document.getElementById('busTooltip');
    const zi = state.zoneInfo[node.dataset.agent]||{};
    document.getElementById('ttTitle').textContent = `Bus ${node.dataset.bus} (${node.dataset.type})`;
    document.getElementById('ttType').textContent = node.dataset.type;
    document.getElementById('ttInj').textContent = node.dataset.inj + ' MW';
    document.getElementById('ttZone').textContent = zi.zone_name || 'Zone ' + node.dataset.agent;
    tt.style.left = (e.clientX + 12) + 'px';
    tt.style.top = (e.clientY - 20) + 'px';
    tt.classList.add('visible');
}
function hideBusTooltip() { document.getElementById('busTooltip').classList.remove('visible'); }

function findAgent(busId) {
    for (const [aid, zi] of Object.entries(state.zoneInfo)) {
        if ((zi.bus_ids||[]).includes(busId)) return parseInt(aid);
    }
    return -1;
}

// --- Charts ---
function drawSparkline(id, data, color) {
    const el = document.getElementById(id);
    if (!el || !data.length) return;
    const w = el.clientWidth||120, h = el.clientHeight||22;
    const min = Math.min(...data), max = Math.max(...data);
    const range = max-min || 1;
    const pts = data.slice(-30).map((v,i,a) => `${(i/(a.length-1||1))*w},${h-(((v-min)/range)*h*0.8+h*0.1)}`).join(' ');
    el.innerHTML = `<polyline points="${pts}" fill="none" stroke="${color}" stroke-width="1.5" opacity="0.8"/>`;
}

function updateCharts() {
    drawChart('rewardChart', state.rewardHistory, '#ffd700', 'Reward');
    drawChart('freqChart', state.freqHistory, '#00e5a0', 'Hz', 49, 51);
    updateGenMix();
}

// ── Smooth Catmull–Rom → Bezier path generator ────────────────
function smoothPath(points) {
    if (points.length < 2) return '';
    if (points.length === 2) return `M${points[0][0]},${points[0][1]} L${points[1][0]},${points[1][1]}`;
    let d = `M${points[0][0]},${points[0][1]}`;
    for (let i = 0; i < points.length - 1; i++) {
        const p0 = points[i - 1] || points[i];
        const p1 = points[i];
        const p2 = points[i + 1];
        const p3 = points[i + 2] || p2;
        const tension = 0.18;
        const c1x = p1[0] + (p2[0] - p0[0]) * tension;
        const c1y = p1[1] + (p2[1] - p0[1]) * tension;
        const c2x = p2[0] - (p3[0] - p1[0]) * tension;
        const c2y = p2[1] - (p3[1] - p1[1]) * tension;
        d += ` C${c1x.toFixed(2)},${c1y.toFixed(2)} ${c2x.toFixed(2)},${c2y.toFixed(2)} ${p2[0].toFixed(2)},${p2[1].toFixed(2)}`;
    }
    return d;
}

function drawChart(containerId, data, color, label, fixedMin, fixedMax) {
    const el = document.getElementById(containerId);
    if (!el) return;
    const W = el.clientWidth || 300, H = el.clientHeight || 140;

    if (!data.length) {
        el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">
            <text x="${W/2}" y="${H/2}" text-anchor="middle" fill="var(--text-muted)" font-size="11" font-family="Inter, sans-serif">Waiting for data…</text>
        </svg>`;
        return;
    }

    const pad = {t: 14, r: 24, b: 22, l: 38};
    const cw = W - pad.l - pad.r;
    const ch = H - pad.t - pad.b;

    // Y range — auto with sensible padding, or fixed
    let min, max;
    if (fixedMin !== undefined) {
        min = fixedMin; max = fixedMax;
    } else {
        const dmin = Math.min(...data), dmax = Math.max(...data);
        const dr = (dmax - dmin) || 1;
        min = dmin - dr * 0.12;
        max = dmax + dr * 0.12;
    }
    const range = (max - min) || 1;

    const xOf = i => pad.l + (i / (data.length - 1 || 1)) * cw;
    const yOf = v => pad.t + ch - ((v - min) / range) * ch;
    const points = data.map((v, i) => [xOf(i), yOf(v)]);

    const last = data[data.length - 1];
    const lastX = points[points.length - 1][0];
    const lastY = points[points.length - 1][1];

    const isFreq = containerId === 'freqChart';
    const isReward = containerId === 'rewardChart';

    const gradId = `${containerId}-grad`;
    const glowId = `${containerId}-glow`;

    let svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="chart-svg">`;

    svg += `<defs>
        <linearGradient id="${gradId}" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="${color}" stop-opacity="0.35"/>
            <stop offset="60%" stop-color="${color}" stop-opacity="0.08"/>
            <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
        </linearGradient>
        <filter id="${glowId}" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="2" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <clipPath id="${containerId}-clip">
            <rect x="${pad.l}" y="${pad.t}" width="${cw}" height="${ch}"/>
        </clipPath>
    </defs>`;

    // Plot area background
    svg += `<rect x="${pad.l}" y="${pad.t}" width="${cw}" height="${ch}" fill="rgba(255,255,255,0.015)" rx="3"/>`;

    // Frequency safe-zone shading
    if (isFreq) {
        const safeLo = 49.85, safeHi = 50.15;
        const warnLo = 49.5, warnHi = 50.5;
        if (warnLo > min && warnHi < max) {
            svg += `<rect x="${pad.l}" y="${yOf(warnHi)}" width="${cw}" height="${yOf(warnLo) - yOf(warnHi)}" fill="rgba(255,215,0,0.04)"/>`;
        }
        if (safeLo > min && safeHi < max) {
            svg += `<rect x="${pad.l}" y="${yOf(safeHi)}" width="${cw}" height="${yOf(safeLo) - yOf(safeHi)}" fill="rgba(0,229,160,0.06)"/>`;
        }
    }

    // Horizontal grid lines + Y labels
    const ySteps = 4;
    for (let i = 0; i <= ySteps; i++) {
        const y = pad.t + (ch * i) / ySteps;
        const v = max - (range * i) / ySteps;
        const isEdge = i === 0 || i === ySteps;
        svg += `<line x1="${pad.l}" y1="${y}" x2="${W - pad.r}" y2="${y}" stroke="rgba(255,255,255,${isEdge ? 0.08 : 0.04})" stroke-width="1" stroke-dasharray="${isEdge ? '' : '2,4'}"/>`;
        svg += `<text x="${pad.l - 6}" y="${y + 3}" text-anchor="end" fill="var(--text-muted)" font-size="9" font-family="JetBrains Mono, monospace" font-weight="500">${v.toFixed(isFreq ? 1 : 2)}</text>`;
    }

    // Nominal line for frequency
    if (isFreq && 50 > min && 50 < max) {
        const y50 = yOf(50);
        svg += `<line x1="${pad.l}" y1="${y50}" x2="${W - pad.r}" y2="${y50}" stroke="rgba(0,229,160,0.35)" stroke-width="1" stroke-dasharray="3,3"/>`;
        svg += `<text x="${W - pad.r + 3}" y="${y50 + 3}" fill="rgba(0,229,160,0.6)" font-size="8" font-family="JetBrains Mono, monospace" font-weight="600">50</text>`;
    }

    // Zero line for reward
    if (isReward && 0 > min && 0 < max) {
        const y0 = yOf(0);
        svg += `<line x1="${pad.l}" y1="${y0}" x2="${W - pad.r}" y2="${y0}" stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="3,3"/>`;
    }

    // X axis labels (step indices)
    const xLabels = Math.min(5, data.length);
    for (let i = 0; i < xLabels; i++) {
        const di = Math.round((i / (xLabels - 1 || 1)) * (data.length - 1));
        const x = xOf(di);
        svg += `<text x="${x}" y="${H - 6}" text-anchor="middle" fill="var(--text-muted)" font-size="9" font-family="JetBrains Mono, monospace">${di}</text>`;
    }

    // Smooth area fill
    const linePath = smoothPath(points);
    svg += `<path d="${linePath} L${lastX},${pad.t + ch} L${pad.l},${pad.t + ch} Z" fill="url(#${gradId})" clip-path="url(#${containerId}-clip)"/>`;

    // Smooth line
    svg += `<path d="${linePath}" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" filter="url(#${glowId})"/>`;

    // Last-point marker + value badge
    svg += `<circle cx="${lastX}" cy="${lastY}" r="3.5" fill="${color}" stroke="#0a0a0a" stroke-width="1.5"/>`;
    svg += `<circle cx="${lastX}" cy="${lastY}" r="6" fill="${color}" opacity="0.25"/>`;
    const badgeText = isFreq ? `${last.toFixed(2)}` : last.toFixed(2);
    const badgeW = badgeText.length * 6 + 10;
    let bx = lastX + 8;
    if (bx + badgeW > W - 2) bx = lastX - badgeW - 8;
    svg += `<rect x="${bx}" y="${lastY - 8}" width="${badgeW}" height="16" rx="3" fill="${color}" opacity="0.95"/>`;
    svg += `<text x="${bx + badgeW/2}" y="${lastY + 3}" text-anchor="middle" fill="#0a0a0a" font-size="9" font-family="JetBrains Mono, monospace" font-weight="700">${badgeText}</text>`;

    svg += '</svg>';
    el.innerHTML = svg;
}

function updateGenMix() {
    const el = document.getElementById('genMixChart');
    if (!el) return;
    const W = el.clientWidth || 300, H = el.clientHeight || 140;

    const types = {};
    for (const obs of Object.values(state.observations)) {
        (obs.local_buses || []).forEach(b => {
            if (b.p_injection > 0) types[b.type] = (types[b.type] || 0) + b.p_injection;
        });
    }
    const entries = Object.entries(types).sort((a, b) => b[1] - a[1]);
    const total = entries.reduce((s, [, v]) => s + v, 0);

    if (total <= 0) {
        el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg">
            <text x="${W/2}" y="${H/2}" text-anchor="middle" fill="var(--text-muted)" font-size="11" font-family="Inter, sans-serif">No generation yet</text>
        </svg>`;
        return;
    }

    const colors = {
        slack: '#00e5a0', generator: '#f5a623', solar: '#ffeb3b',
        wind: '#64ffda', battery: '#9aa6b2',
    };
    const labels = {
        slack: 'Slack', generator: 'Gen', solar: 'Solar',
        wind: 'Wind', battery: 'Battery',
    };

    const donutSize = Math.min(H - 16, W * 0.55, 130);
    const cx = donutSize / 2 + 12;
    const cy = H / 2;
    const rOuter = donutSize / 2;
    const rInner = rOuter * 0.62;
    const gap = 0.012;

    let svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" class="chart-svg">`;
    svg += `<defs>
        <filter id="genmix-glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="1.5" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
    </defs>`;

    // Track ring
    svg += `<circle cx="${cx}" cy="${cy}" r="${(rOuter + rInner) / 2}" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="${rOuter - rInner}"/>`;

    let startA = -Math.PI / 2;
    entries.forEach(([type, val]) => {
        const pct = val / total;
        const sweep = pct * Math.PI * 2;
        const aStart = startA + (entries.length > 1 ? gap / 2 : 0);
        const aEnd = startA + sweep - (entries.length > 1 ? gap / 2 : 0);
        if (aEnd <= aStart) { startA += sweep; return; }
        const rMid = (rOuter + rInner) / 2;
        const x1 = cx + rMid * Math.cos(aStart), y1 = cy + rMid * Math.sin(aStart);
        const x2 = cx + rMid * Math.cos(aEnd), y2 = cy + rMid * Math.sin(aEnd);
        const large = (aEnd - aStart) > Math.PI ? 1 : 0;
        svg += `<path d="M${x1},${y1} A${rMid},${rMid} 0 ${large},1 ${x2},${y2}" fill="none" stroke="${colors[type] || '#666'}" stroke-width="${rOuter - rInner}" stroke-linecap="butt" opacity="0.92"/>`;
        startA += sweep;
    });

    // Center readout
    svg += `<text x="${cx}" y="${cy - 4}" text-anchor="middle" fill="var(--text-primary)" font-family="JetBrains Mono, monospace" font-size="18" font-weight="700">${total.toFixed(0)}</text>`;
    svg += `<text x="${cx}" y="${cy + 11}" text-anchor="middle" fill="var(--text-muted)" font-size="9" font-family="JetBrains Mono, monospace" letter-spacing="1.5">MW</text>`;

    // Legend on the right
    const legendX = donutSize + 28;
    const lineH = 16;
    const legendStart = cy - (entries.length * lineH) / 2 + 4;
    entries.forEach(([type, val], i) => {
        const pct = (val / total) * 100;
        const ly = legendStart + i * lineH;
        svg += `<rect x="${legendX}" y="${ly - 7}" width="9" height="9" rx="2" fill="${colors[type] || '#666'}"/>`;
        svg += `<text x="${legendX + 14}" y="${ly}" fill="var(--text-secondary)" font-size="10" font-family="Inter, sans-serif" font-weight="500">${labels[type] || type}</text>`;
        svg += `<text x="${W - 6}" y="${ly}" text-anchor="end" fill="var(--text-primary)" font-size="10" font-family="JetBrains Mono, monospace" font-weight="600">${pct.toFixed(0)}%</text>`;
    });

    svg += '</svg>';
    el.innerHTML = svg;
}

// --- Alerts ---
function showAlert(type, msg) {
    const el = document.getElementById('alertBanner');
    el.className = `alert-banner ${type} visible`;
    document.getElementById('alertText').textContent = msg;
    setTimeout(() => el.classList.remove('visible'), 5000);
}
function dismissAlert() { document.getElementById('alertBanner').classList.remove('visible'); }

// --- Map Controls ---
function zoomMap(factor) { state.mapScale *= factor; updateGridMap(); }
function resetMapView() { state.mapScale = 1; updateGridMap(); }