{% extends "base.html" %}
{% block title %}asiai — History{% endblock %}

{% block content %}
<div class="page-header">
    <h2>History</h2>
    <p>Benchmark performance over time</p>
</div>

<!-- Filters -->
<div class="filter-bar fade-in">
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;">Type:</span>
    <button class="filter-chip active" data-type="" onclick="setBenchType('', this)">throughput</button>
    <button class="filter-chip" data-type="agentic" onclick="setBenchType('agentic', this)">agentic</button>
    <button class="filter-chip" data-type="burst" onclick="setBenchType('burst', this)">burst</button>
    <button class="filter-chip" data-type="code" onclick="setBenchType('code', this)">code</button>
    <button class="filter-chip" data-type="language" onclick="setBenchType('language', this)">language</button>
    <button class="filter-chip" data-type="instruct" onclick="setBenchType('instruct', this)">instruct</button>
    <button class="filter-chip" data-type="thinking-ablation" onclick="setBenchType('thinking-ablation', this)">thinking</button>
</div>
<div class="filter-bar fade-in">
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;" id="hist-node-label" hidden>Node:</span>
    <select id="hist-node" class="range-input" hidden onchange="setHistoryNode(this.value)" title="Data source node"></select>
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;">Time range:</span>
    <button class="filter-chip" data-hours="1" onclick="setTimeRange(1, this)">1h</button>
    <button class="filter-chip" data-hours="24" onclick="setTimeRange(24, this)">24h</button>
    <button class="filter-chip active" data-hours="168" onclick="setTimeRange(168, this)">7d</button>
    <button class="filter-chip" data-hours="720" onclick="setTimeRange(720, this)">30d</button>
    <button class="filter-chip" data-hours="2160" onclick="setTimeRange(2160, this)">90d</button>
    <span class="text-xs text-neutral-500 filter-label" style="margin-left: 1rem; margin-right: 0.5rem;">Custom:</span>
    <input type="datetime-local" id="range-from" class="range-input" title="From">
    <span class="text-xs text-neutral-500">—</span>
    <input type="datetime-local" id="range-to" class="range-input" title="To">
    <button class="filter-chip" id="range-apply-btn" onclick="applyCustomRange()" style="font-weight: 600;">Apply</button>
</div>

<!-- System Metrics -->
<div id="system-charts-section" class="fade-in-delay-1">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">System Metrics</h3>
    <div class="card-grid-3">
        <div class="card">
            <h3 class="card-title">CPU Load</h3>
            <div id="sys-cpu-chart" style="min-height: 200px;"></div>
            <div id="sys-cpu-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No system data</div>
        </div>
        <div class="card">
            <h3 class="card-title">Memory %</h3>
            <div id="sys-mem-chart" style="min-height: 200px;"></div>
            <div id="sys-mem-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No system data</div>
        </div>
        <div class="card" id="sys-gpu-card" style="display: none;">
            <h3 class="card-title">GPU Utilization %</h3>
            <div id="sys-gpu-chart" style="min-height: 200px;"></div>
            <div id="sys-gpu-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No GPU data</div>
        </div>
    </div>
    <div class="card-grid-2 mt-4" id="sys-power-row" style="display: none;">
        <div class="card">
            <h3 class="card-title">Total Power (W)</h3>
            <div id="sys-power-total-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">GPU vs CPU Power (W)</h3>
            <div id="sys-power-breakdown-chart" style="min-height: 200px;"></div>
        </div>
    </div>
</div>

<!-- Engine Activity -->
<div id="engine-activity-section" class="mt-6 fade-in-delay-2" style="display: none;">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">Engine Activity</h3>
    <div class="card-grid-2">
        <div class="card">
            <h3 class="card-title">Connections &amp; Requests</h3>
            <div id="engine-conn-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">KV Cache Usage %</h3>
            <div id="engine-kv-chart" style="min-height: 200px;"></div>
            <div id="engine-kv-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No KV cache data</div>
        </div>
    </div>
</div>

<!-- Charts (throughput view) -->
<div class="card-grid-2 mt-6 fade-in-delay-2" id="bench-charts-row">
    <div class="card">
        <h3 class="card-title">Throughput (tok/s)</h3>
        <div id="history-tok-chart" style="min-height: 300px;"></div>
        <div id="tok-chart-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 4rem 0;">No benchmark data — run a benchmark first</div>
    </div>
    <div class="card">
        <h3 class="card-title">Time to First Token (ms)</h3>
        <div id="history-ttft-chart" style="min-height: 300px;"></div>
        <div id="ttft-chart-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 4rem 0;">No benchmark data — run a benchmark first</div>
    </div>
</div>

<!-- Process Metrics -->
<div id="process-metrics-section" class="mt-6 fade-in-delay-2" style="display: none;">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">Process Metrics (Benchmark Runs)</h3>
    <div class="card-grid">
        <div class="card">
            <h3 class="card-title">Engine CPU %</h3>
            <div id="proc-cpu-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">Engine RSS (Memory)</h3>
            <div id="proc-rss-chart" style="min-height: 200px;"></div>
        </div>
    </div>
</div>

<!-- Bench runs (non-throughput types) -->
<div id="bench-runs-section" class="mt-6 fade-in-delay-2" style="display: none;">
    <div class="card">
        <h3 class="card-title" id="runs-chart-title">Score over time</h3>
        <p class="text-neutral-500 text-xs" style="margin-top: -0.25rem;">
            Scores are only comparable within one label — red points carry failed quality gates.
        </p>
        <div id="runs-chart" style="min-height: 300px;"></div>
        <div id="runs-chart-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 4rem 0;">No runs of this type in this time range</div>
    </div>
    <div class="card mt-4">
        <h3 class="card-title">Runs</h3>
        <div class="overflow-x-auto">
            <table class="results-table" id="runs-table">
                <thead>
                    <tr>
                        <th class="text-left">Date</th>
                        <th class="text-left">Engine</th>
                        <th class="text-left">Model</th>
                        <th class="text-right">Score</th>
                        <th class="text-left">Label</th>
                        <th class="text-right">Gates</th>
                        <th class="text-left">Versions</th>
                        <th class="text-left"></th>
                    </tr>
                </thead>
                <tbody id="runs-tbody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Data table -->
<div class="mt-6 fade-in-delay-3">
    <div class="card" id="bench-data-card">
        <h3 class="card-title">Benchmark Data</h3>
        <div class="overflow-x-auto">
            <table class="results-table" id="history-table">
                <thead>
                    <tr>
                        <th class="text-left">Date</th>
                        <th class="text-left">Engine</th>
                        <th class="text-left">Model</th>
                        <th class="text-left">Prompt</th>
                        <th class="text-right">tok/s</th>
                        <th class="text-right">TTFT</th>
                        <th class="text-right">TTFT Client</th>
                        <th class="text-right">Duration</th>
                    </tr>
                </thead>
                <tbody id="history-tbody">
                </tbody>
            </table>
        </div>
        <div id="history-empty" class="text-neutral-400 text-sm" style="display: none; padding: 1rem 0;">
            No benchmark data in this time range
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var currentHours = 168;
    var currentType = '';   // '' = throughput (legacy view); else a bench_runs type
    var runsChart = null;
    var customSince = 0;
    var customUntil = 0;
    var tokChart = null;
    var ttftChart = null;
    var sysCpuChart = null;
    var sysMemChart = null;
    var sysGpuChart = null;
    var sysPowerTotalChart = null;
    var sysPowerBreakdownChart = null;
    var engineConnChart = null;
    var engineKvChart = null;
    var procCpuChart = null;
    var procRssChart = null;

    function setBenchType(type, btn) {
        currentType = type || '';
        document.querySelectorAll('.filter-chip[data-type]').forEach(function(c) {
            c.classList.remove('active');
        });
        btn.classList.add('active');
        // bench_runs lives in the LOCAL db only for now — the fleet read
        // proxy whitelists digit-only params (widened in the É3 lot).
        var nodeSel = document.getElementById('hist-node');
        if (currentType && nodeSel && nodeSel.value) {
            nodeSel.value = '';
            historyNode = '';
        }
        if (nodeSel) nodeSel.disabled = !!currentType;
        applyTypeVisibility();
        loadData();
    }

    function applyTypeVisibility() {
        var throughput = !currentType;
        document.getElementById('bench-runs-section').style.display = throughput ? 'none' : '';
        document.getElementById('bench-charts-row').style.display = throughput ? '' : 'none';
        document.getElementById('bench-data-card').style.display = throughput ? '' : 'none';
        document.getElementById('process-metrics-section').style.display =
            throughput ? '' : 'none';
    }

    function setTimeRange(hours, btn) {
        currentHours = hours;
        customSince = 0;
        customUntil = 0;
        document.getElementById('range-from').value = '';
        document.getElementById('range-to').value = '';
        document.querySelectorAll('.filter-chip[data-hours], #range-apply-btn').forEach(
            function(c) { c.classList.remove('active'); }
        );
        btn.classList.add('active');
        loadData();
    }

    function applyCustomRange() {
        var fromEl = document.getElementById('range-from');
        var toEl = document.getElementById('range-to');
        if (!fromEl.value) return;
        customSince = Math.floor(new Date(fromEl.value).getTime() / 1000);
        customUntil = toEl.value ? Math.floor(new Date(toEl.value).getTime() / 1000) : 0;
        document.querySelectorAll('.filter-chip[data-hours]').forEach(function(c) {
            c.classList.remove('active');
        });
        document.getElementById('range-apply-btn').classList.add('active');
        loadData();
    }

    function buildQuery() {
        if (customSince > 0) {
            var q = 'since=' + customSince;
            if (customUntil > 0) q += '&until=' + customUntil;
            return q;
        }
        return 'hours=' + currentHours;
    }

    // ── per-node data source (fleet read proxy) ──────────────────
    // '' = this node (direct local API); a nickname routes every fetch
    // through the hub's read proxy. The picker only appears when a
    // fleet is configured (2+ known nodes or 1 remote node).
    var historyNode = '';

    function apiUrl(endpoint, qs) {
        var base = historyNode
            ? '/api/v1/fleet/' + encodeURIComponent(historyNode) + '/'
            : '/api/';
        return base + endpoint + (qs ? '?' + qs : '');
    }

    function setHistoryNode(nick) {
        historyNode = nick || '';
        loadData();
    }

    function initNodePicker() {
        fetch('/api/v1/fleet/nodes')
            .then(function(res) { return res.ok ? res.json() : null; })
            .then(function(data) {
                var nodes = data && Array.isArray(data.nodes) ? data.nodes : [];
                if (!nodes.length) return;
                var sel = document.getElementById('hist-node');
                var optLocal = document.createElement('option');
                optLocal.value = '';
                optLocal.textContent = 'this node';
                sel.appendChild(optLocal);
                nodes.forEach(function(n) {
                    if (!n || !n.nickname) return;
                    var opt = document.createElement('option');
                    opt.value = n.nickname;
                    opt.textContent = n.nickname;
                    sel.appendChild(opt);
                });
                sel.hidden = false;
                document.getElementById('hist-node-label').hidden = false;
            })
            .catch(function() { /* no fleet — picker stays hidden */ });
    }

    function loadData() {
        var qs = buildQuery();
        if (currentType) {
            var requestedType = currentType;
            fetch('/api/bench-runs?type=' + encodeURIComponent(requestedType) + '&' + qs)
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    if (requestedType !== currentType) return; // stale response
                    var runs = data && Array.isArray(data.runs) ? data.runs : [];
                    renderRunsChart(runs);
                    renderRunsTable(runs);
                })
                .catch(function(err) { console.error('Failed to load bench runs:', err); });
        }
        fetch(apiUrl('benchmarks', qs))
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                if (!Array.isArray(rows)) rows = [];
                renderCharts(rows);
                renderTable(rows);
            })
            .catch(function(err) {
                console.error('Failed to load benchmarks:', err);
            });

        fetch(apiUrl('history', qs))
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                if (!Array.isArray(rows)) rows = [];
                renderSystemCharts(rows);
            })
            .catch(function(err) {
                console.error('Failed to load system history:', err);
            });

        fetch(apiUrl('engine-history', qs))
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                if (!Array.isArray(rows)) rows = [];
                renderEngineActivity(rows);
            })
            .catch(function(err) {
                console.error('Failed to load engine history:', err);
            });

        fetch(apiUrl('benchmark-process', qs))
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                if (!Array.isArray(rows)) rows = [];
                renderProcessMetrics(rows);
            })
            .catch(function(err) {
                console.error('Failed to load process metrics:', err);
            });
    }

    function renderSystemCharts(rows) {
        // Destroy existing charts
        if (sysCpuChart) { sysCpuChart.destroy(); sysCpuChart = null; }
        if (sysMemChart) { sysMemChart.destroy(); sysMemChart = null; }
        if (sysGpuChart) { sysGpuChart.destroy(); sysGpuChart = null; }

        var cpuData = [];
        var memData = [];
        var gpuData = [];
        var gpuRendererData = [];
        var gpuTilerData = [];

        rows.forEach(function(r) {
            var tsMs = r.ts * 1000;
            cpuData.push([tsMs, r.cpu_load_1]);
            if (r.mem_total > 0) {
                memData.push([tsMs, Math.round((r.mem_used / r.mem_total) * 100)]);
            }
            if (r.gpu_utilization_pct >= 0) {
                gpuData.push([tsMs, r.gpu_utilization_pct]);
            }
            if (r.gpu_renderer_pct >= 0) {
                gpuRendererData.push([tsMs, r.gpu_renderer_pct]);
            }
            if (r.gpu_tiler_pct >= 0) {
                gpuTilerData.push([tsMs, r.gpu_tiler_pct]);
            }
        });

        var cpuEl = document.getElementById('sys-cpu-chart');
        var cpuEmpty = document.getElementById('sys-cpu-empty');
        if (cpuData.length > 0) {
            cpuEl.style.display = '';
            cpuEmpty.style.display = 'none';
            sysCpuChart = createTimeChart('sys-cpu-chart',
                [{ name: 'CPU Load', data: cpuData }],
                { height: 200, yTitle: 'Load', yFormatter: function(v) { return v.toFixed(1); } });
        } else {
            cpuEl.style.display = 'none';
            cpuEmpty.style.display = 'block';
        }

        var memEl = document.getElementById('sys-mem-chart');
        var memEmpty = document.getElementById('sys-mem-empty');
        if (memData.length > 0) {
            memEl.style.display = '';
            memEmpty.style.display = 'none';
            sysMemChart = createTimeChart('sys-mem-chart',
                [{ name: 'Memory %', data: memData }],
                { height: 200, yTitle: '%', yFormatter: function(v) { return v.toFixed(0) + '%'; } });
        } else {
            memEl.style.display = 'none';
            memEmpty.style.display = 'block';
        }

        var gpuCard = document.getElementById('sys-gpu-card');
        var gpuEl = document.getElementById('sys-gpu-chart');
        var gpuEmpty = document.getElementById('sys-gpu-empty');
        if (gpuData.length > 0) {
            gpuCard.style.display = '';
            gpuEl.style.display = '';
            gpuEmpty.style.display = 'none';
            var gpuSeries = [{ name: 'GPU %', data: gpuData }];
            if (gpuRendererData.length > 0) {
                gpuSeries.push({ name: 'Renderer', data: gpuRendererData });
            }
            if (gpuTilerData.length > 0) {
                gpuSeries.push({ name: 'Tiler', data: gpuTilerData });
            }
            sysGpuChart = createTimeChart('sys-gpu-chart',
                gpuSeries,
                { height: 200, yTitle: '%', yFormatter: function(v) { return v.toFixed(0) + '%'; } });
        } else {
            gpuCard.style.display = 'none';
        }

        // Power charts
        if (sysPowerTotalChart) { sysPowerTotalChart.destroy(); sysPowerTotalChart = null; }
        if (sysPowerBreakdownChart) { sysPowerBreakdownChart.destroy(); sysPowerBreakdownChart = null; }

        var powerTotalData = [];
        var powerGpuData = [];
        var powerCpuData = [];

        rows.forEach(function(r) {
            var tsMs = r.ts * 1000;
            if (r.power_total_watts >= 0) {
                powerTotalData.push([tsMs, r.power_total_watts]);
            }
            if (r.power_gpu_watts >= 0) {
                powerGpuData.push([tsMs, r.power_gpu_watts]);
            }
            if (r.power_cpu_watts >= 0) {
                powerCpuData.push([tsMs, r.power_cpu_watts]);
            }
        });

        var powerRow = document.getElementById('sys-power-row');
        if (powerTotalData.length > 0) {
            powerRow.style.display = '';
            sysPowerTotalChart = createTimeChart('sys-power-total-chart',
                [{ name: 'Total Power', data: powerTotalData }],
                { height: 200, yTitle: 'W', colors: ['#f59e0b'],
                  yFormatter: function(v) { return v.toFixed(1) + ' W'; } });
            if (powerGpuData.length > 0 || powerCpuData.length > 0) {
                var breakdownSeries = [];
                if (powerGpuData.length > 0) breakdownSeries.push({ name: 'GPU', data: powerGpuData });
                if (powerCpuData.length > 0) breakdownSeries.push({ name: 'CPU', data: powerCpuData });
                sysPowerBreakdownChart = createTimeChart('sys-power-breakdown-chart',
                    breakdownSeries,
                    { height: 200, yTitle: 'W', colors: ['#8b5cf6', '#06b6d4'],
                      yFormatter: function(v) { return v.toFixed(1) + ' W'; } });
            }
        } else {
            powerRow.style.display = 'none';
        }
    }

    function renderCharts(rows) {
        // Group by engine for time series
        var engineData = {};
        rows.forEach(function(r) {
            if (!engineData[r.engine]) {
                engineData[r.engine] = { tok_s: [], ttft: [], ttft_client: [] };
            }
            engineData[r.engine].tok_s.push([r.ts * 1000, r.tok_per_sec]);
            engineData[r.engine].ttft.push([r.ts * 1000, r.ttft_ms]);
            if (r.ttft_client_ms && r.ttft_client_ms > 0) {
                engineData[r.engine].ttft_client.push([r.ts * 1000, r.ttft_client_ms]);
            }
        });

        var tokSeries = Object.keys(engineData).map(function(name) {
            return { name: name, data: engineData[name].tok_s };
        });
        var ttftSeries = Object.keys(engineData).map(function(name) {
            return { name: name, data: engineData[name].ttft };
        });
        // Add client TTFT as lighter series
        Object.keys(engineData).forEach(function(name) {
            if (engineData[name].ttft_client.length > 0) {
                ttftSeries.push({ name: name + ' (client)', data: engineData[name].ttft_client });
            }
        });

        // Destroy existing charts
        if (tokChart) { tokChart.destroy(); tokChart = null; }
        if (ttftChart) { ttftChart.destroy(); ttftChart = null; }

        var tokEmpty = document.getElementById('tok-chart-empty');
        var ttftEmpty = document.getElementById('ttft-chart-empty');
        var tokEl = document.getElementById('history-tok-chart');
        var ttftEl = document.getElementById('history-ttft-chart');

        if (tokSeries.length > 0) {
            tokEl.style.display = '';
            ttftEl.style.display = '';
            tokEmpty.style.display = 'none';
            ttftEmpty.style.display = 'none';
            tokChart = createTimeChart('history-tok-chart', tokSeries, {
                yTitle: 'tok/s',
                yFormatter: function(v) { return v.toFixed(1); },
            });
            ttftChart = createTimeChart('history-ttft-chart', ttftSeries, {
                yTitle: 'ms',
                yFormatter: function(v) { return v.toFixed(0) + ' ms'; },
            });
        } else {
            tokEl.style.display = 'none';
            ttftEl.style.display = 'none';
            tokEmpty.style.display = 'block';
            ttftEmpty.style.display = 'block';
        }
    }

    function renderTable(rows) {
        var tbody = document.getElementById('history-tbody');
        var emptyMsg = document.getElementById('history-empty');
        tbody.textContent = '';

        if (!rows || rows.length === 0) {
            emptyMsg.style.display = 'block';
            return;
        }
        emptyMsg.style.display = 'none';

        // Show most recent first, limit to 100
        var sorted = rows.slice().sort(function(a, b) { return b.ts - a.ts; }).slice(0, 100);

        sorted.forEach(function(r) {
            var tr = document.createElement('tr');

            var tdDate = document.createElement('td');
            tdDate.style.fontFamily = 'var(--font-sans)';
            tdDate.textContent = new Date(r.ts * 1000).toLocaleString();
            tr.appendChild(tdDate);

            var tdEngine = document.createElement('td');
            tdEngine.style.fontFamily = 'var(--font-sans)';
            tdEngine.textContent = r.engine;
            tr.appendChild(tdEngine);

            var tdModel = document.createElement('td');
            tdModel.style.fontFamily = 'var(--font-sans)';
            tdModel.textContent = r.model;
            tr.appendChild(tdModel);

            var tdPrompt = document.createElement('td');
            tdPrompt.style.fontFamily = 'var(--font-sans)';
            var promptText = r.prompt_type;
            if (r.context_size > 0) {
                var ctxLabel = r.context_size >= 1024
                    ? Math.floor(r.context_size / 1024) + 'K'
                    : r.context_size.toString();
                promptText += ' (' + ctxLabel + ' ctx)';
            }
            tdPrompt.textContent = promptText;
            tr.appendChild(tdPrompt);

            var tdTok = document.createElement('td');
            tdTok.className = 'text-right';
            tdTok.textContent = r.tok_per_sec.toFixed(1);
            tr.appendChild(tdTok);

            var tdTtft = document.createElement('td');
            tdTtft.className = 'text-right';
            tdTtft.textContent = r.ttft_ms.toFixed(0) + ' ms';
            tr.appendChild(tdTtft);

            var tdTtftClient = document.createElement('td');
            tdTtftClient.className = 'text-right';
            if (r.ttft_client_ms && r.ttft_client_ms > 0 && Math.abs(r.ttft_client_ms - r.ttft_ms) > 10) {
                tdTtftClient.textContent = r.ttft_client_ms.toFixed(0) + ' ms';
            } else {
                tdTtftClient.textContent = '\u2014';
            }
            tr.appendChild(tdTtftClient);

            var tdDur = document.createElement('td');
            tdDur.className = 'text-right';
            tdDur.textContent = (r.total_duration_ms / 1000).toFixed(1) + ' s';
            tr.appendChild(tdDur);

            tbody.appendChild(tr);
        });
    }

    function renderEngineActivity(rows) {
        if (engineConnChart) { engineConnChart.destroy(); engineConnChart = null; }
        if (engineKvChart) { engineKvChart.destroy(); engineKvChart = null; }

        var section = document.getElementById('engine-activity-section');
        if (!rows || rows.length === 0) {
            section.style.display = 'none';
            return;
        }
        section.style.display = '';

        // Group by engine
        var byEngine = {};
        rows.forEach(function(r) {
            if (!byEngine[r.engine]) {
                byEngine[r.engine] = { conn: [], req: [], kv: [] };
            }
            var tsMs = r.ts * 1000;
            var totalConn = (r.tcp_connections || 0) + (r.requests_processing || 0);
            byEngine[r.engine].conn.push([tsMs, r.tcp_connections || 0]);
            byEngine[r.engine].req.push([tsMs, r.requests_processing || 0]);
            if (r.kv_cache_usage_ratio >= 0) {
                byEngine[r.engine].kv.push([tsMs, Math.round(r.kv_cache_usage_ratio * 100)]);
            }
        });

        var connSeries = [];
        var kvSeries = [];
        Object.keys(byEngine).forEach(function(eng) {
            connSeries.push({ name: eng + ' TCP', data: byEngine[eng].conn });
            if (byEngine[eng].req.some(function(p) { return p[1] > 0; })) {
                connSeries.push({ name: eng + ' processing', data: byEngine[eng].req });
            }
            if (byEngine[eng].kv.length > 0) {
                kvSeries.push({ name: eng, data: byEngine[eng].kv });
            }
        });

        if (connSeries.length > 0) {
            engineConnChart = createTimeChart('engine-conn-chart', connSeries, {
                height: 200, yTitle: 'Count',
                yFormatter: function(v) { return v.toFixed(0); },
            });
        }
        if (kvSeries.length > 0) {
            engineKvChart = createTimeChart('engine-kv-chart', kvSeries, {
                height: 200, yTitle: '%',
                yFormatter: function(v) { return v.toFixed(0) + '%'; },
            });
        }
    }

    function renderProcessMetrics(rows) {
        if (procCpuChart) { procCpuChart.destroy(); procCpuChart = null; }
        if (procRssChart) { procRssChart.destroy(); procRssChart = null; }

        var section = document.getElementById('process-metrics-section');
        // The fetch resolves async: never resurface the section while a
        // non-throughput type view is active (applyTypeVisibility hid it).
        if (!rows || rows.length === 0 || currentType) {
            section.style.display = 'none';
            return;
        }
        section.style.display = '';

        var byEngine = {};
        rows.forEach(function(r) {
            if (!byEngine[r.engine]) {
                byEngine[r.engine] = { cpu: [], rss: [] };
            }
            var tsMs = r.ts * 1000;
            if (r.proc_cpu_pct > 0) {
                byEngine[r.engine].cpu.push([tsMs, r.proc_cpu_pct]);
            }
            if (r.proc_rss_bytes > 0) {
                byEngine[r.engine].rss.push([tsMs, Math.round(r.proc_rss_bytes / (1024 * 1024))]);
            }
        });

        var cpuSeries = [];
        var rssSeries = [];
        Object.keys(byEngine).forEach(function(eng) {
            if (byEngine[eng].cpu.length > 0) {
                cpuSeries.push({ name: eng, data: byEngine[eng].cpu });
            }
            if (byEngine[eng].rss.length > 0) {
                rssSeries.push({ name: eng, data: byEngine[eng].rss });
            }
        });

        if (cpuSeries.length > 0) {
            procCpuChart = createTimeChart('proc-cpu-chart', cpuSeries, {
                height: 200, yTitle: '%',
                yFormatter: function(v) { return v.toFixed(0) + '%'; },
            });
        }
        if (rssSeries.length > 0) {
            procRssChart = createTimeChart('proc-rss-chart', rssSeries, {
                height: 200, yTitle: 'MB',
                yFormatter: function(v) { return v.toFixed(0) + ' MB'; },
            });
        }
    }

    function renderRunsChart(runs) {
        if (runsChart) { runsChart.destroy(); runsChart = null; }
        var chartEl = document.getElementById('runs-chart');
        var emptyEl = document.getElementById('runs-chart-empty');
        var scored = runs.filter(function(r) {
            return typeof r.score_primary === 'number';
        });
        if (!scored.length) {
            chartEl.style.display = 'none';
            emptyEl.style.display = 'block';
            return;
        }
        chartEl.style.display = '';
        emptyEl.style.display = 'none';

        // One series per (model × score_label): scores are only comparable
        // within one label, so the label is part of the series name.
        var byKey = {};
        scored.forEach(function(r) {
            var key = r.model + ' · ' + (r.score_label || '?');
            if (!byKey[key]) byKey[key] = [];
            byKey[key].push(r);
        });
        var series = [];
        var discrete = [];
        var title = '';
        Object.keys(byKey).sort().forEach(function(key, si) {
            var pts = byKey[key].slice().sort(function(a, b) { return a.ts - b.ts; });
            series.push({ name: key, data: pts.map(function(r) {
                return [r.ts * 1000, r.score_primary];
            }) });
            pts.forEach(function(r, di) {
                if (r.gates_failed > 0) {
                    discrete.push({ seriesIndex: si, dataPointIndex: di,
                                    fillColor: '#ef4444', strokeColor: '#ef4444', size: 5 });
                }
            });
            if (!title) title = byKey[key][0].score_label || '';
        });
        document.getElementById('runs-chart-title').textContent =
            'Score over time' + (title ? ' — ' + title : '');
        runsChart = createTimeChart('runs-chart', series, {
            yTitle: 'score',
            yFormatter: function(v) { return v.toFixed(2); },
            markers: { size: 3, discrete: discrete },
        });
    }

    function renderRunsTable(runs) {
        var tbody = document.getElementById('runs-tbody');
        tbody.textContent = '';
        runs.forEach(function(r) {
            var tr = document.createElement('tr');
            function td(text, cls) {
                var cell = document.createElement('td');
                cell.textContent = text;
                if (cls) cell.className = cls;
                tr.appendChild(cell);
                return cell;
            }
            td(new Date(r.ts * 1000).toLocaleString());
            td(r.engine || '—');
            td(r.model || '—');
            td(typeof r.score_primary === 'number' ? r.score_primary.toFixed(2) : '—',
               'text-right');
            td(r.score_label || '—');
            var gates = td(String(r.gates_failed || 0), 'text-right');
            if (r.gates_failed > 0) gates.style.color = 'var(--red, #ef4444)';
            td([r.engine_version, r.asiai_version && ('asiai ' + r.asiai_version)]
                .filter(Boolean).join(' · ') || '—');
            var tdBtn = document.createElement('td');
            var btn = document.createElement('button');
            btn.className = 'filter-chip';
            btn.textContent = 'payload';
            btn.addEventListener('click', function() { toggleRunPayload(r.id, tr, btn); });
            tdBtn.appendChild(btn);
            tr.appendChild(tdBtn);
            tbody.appendChild(tr);
        });
    }

    function toggleRunPayload(runId, tr, btn) {
        var next = tr.nextElementSibling;
        if (next && next.dataset.payloadRow === String(runId)) {
            next.remove();
            btn.classList.remove('active');
            return;
        }
        if (btn.disabled) return; // fetch already in flight
        btn.disabled = true;
        fetch('/api/bench-runs/' + encodeURIComponent(runId))
            .then(function(res) { return res.ok ? res.json() : null; })
            .then(function(run) {
                btn.disabled = false;
                if (!run) return;
                var row = document.createElement('tr');
                row.dataset.payloadRow = String(runId);
                var cell = document.createElement('td');
                cell.colSpan = 8;
                var pre = document.createElement('pre');
                pre.style.cssText =
                    'max-height:320px;overflow:auto;font-size:0.7rem;' +
                    'background:var(--bg-elevated);padding:0.75rem;border-radius:0.4rem;';
                pre.textContent = JSON.stringify(run.payload, null, 2);
                cell.appendChild(pre);
                row.appendChild(cell);
                tr.insertAdjacentElement('afterend', row);
                btn.classList.add('active');
            })
            .catch(function(err) {
                btn.disabled = false;
                console.error('Failed to load payload:', err);
            });
    }

    // Cleanup: destroy all charts when leaving page
    function cleanupHistory() {
        [tokChart, ttftChart, runsChart, sysCpuChart, sysMemChart, sysGpuChart,
         engineConnChart, engineKvChart, procCpuChart, procRssChart].forEach(function(c) {
            if (c) { c.destroy(); }
        });
        tokChart = ttftChart = sysCpuChart = sysMemChart = sysGpuChart = null;
        engineConnChart = engineKvChart = procCpuChart = procRssChart = null;
    }
    window.addEventListener('pagehide', cleanupHistory);
    window.addEventListener('beforeunload', cleanupHistory);

    // Initial load
    initNodePicker();
    loadData();
</script>
{% endblock %}