{% extends "base.html" %}

{% block title %}Live Feed — Agent Wasp{% endblock %}

{% block page_css %}
<style id="page-dyn-style" nonce="{{ request.state.csp_nonce }}">
[data-ds="1"] { animation-delay:0.3s; }
[data-ds="2"] { animation-delay:0.3s; }
[data-ds="3"] { animation-delay:0.6s; }
[data-ds="4"] { height:56px; }
[data-ds="5"] { height: calc(100vh - 370px); min-height: 420px; }
</style>
{% endblock %}

{% block content %}

<!-- ── Header ─────────────────────────────────────────────────────────────── -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div class="flex items-center gap-3">
        <!-- Cluster of 3 pulsing live dots -->
        <div class="flex items-center gap-1">
            <div class="relative flex h-2.5 w-2.5">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-70"></span>
                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-success"></span>
            </div>
            <div class="relative flex h-2 w-2" data-ds="1">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-50" data-ds="2"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 bg-success/70"></span>
            </div>
            <div class="relative flex h-1.5 w-1.5">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-35" data-ds="3"></span>
                <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-success/50"></span>
            </div>
        </div>
        <div>
            <h1 class="text-2xl font-bold tracking-tight leading-tight flex items-center gap-2">
                Live Feed
                <span id="hdr-live-dot" class="inline-flex items-center gap-1 text-xs font-normal text-success/70 font-mono">
                    <span class="relative flex h-1.5 w-1.5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-success"></span>
                    </span>
                    LIVE
                </span>
            </h1>
            <p class="text-xs text-base-content/40 font-mono mt-0.5">Real-time audit stream · polls every 2s</p>
        </div>
    </div>
    <div class="flex items-center gap-2">
        <span id="status-pill" class="pill pill-warning pill-sm">
            <span class="pill-pulse"></span>Connecting…
        </span>
        <button id="btn-pause" class="btn btn-ghost btn-xs gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6"/>
            </svg>
            Pause
        </button>
        <button id="btn-live-clear" class="btn btn-ghost btn-xs gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
            </svg>
            Clear
        </button>
        <button id="btn-live-export" class="btn btn-ghost btn-xs gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            Export
        </button>
    </div>
</div>

<!-- ── Stats bar ─────────────────────────────────────────────────────────── -->
<div class="flex flex-wrap gap-2 mb-4">
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Session events</span>
        <span id="stat-total" class="font-bold font-mono text-sm text-primary">0</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Errors</span>
        <span id="stat-errors" class="font-bold font-mono text-sm text-success">0</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Rate</span>
        <span id="stat-rate" class="font-bold font-mono text-sm text-accent">—</span>
        <span class="text-base-content/30 text-xs">/min</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2">
        <span class="text-base-content/40 text-xs">Connected</span>
        <span id="stat-uptime" class="font-bold font-mono text-sm text-base-content/60">—</span>
    </div>
    <div class="bg-base-200 rounded-xl px-4 py-2.5 flex items-center gap-2 ml-auto">
        <span class="text-base-content/40 text-xs">Queued</span>
        <span id="stat-queued" class="font-bold font-mono text-sm text-warning">0</span>
    </div>
</div>

<!-- ── Rolling activity chart ─────────────────────────────────────────────── -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-4 overflow-hidden">
    <div class="flex items-center justify-between px-4 pt-3 pb-2">
        <div class="flex items-center gap-2">
            <svg class="h-3.5 w-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            <span class="text-xs font-semibold text-base-content/70">Activity — last 60s</span>
        </div>
        <div class="flex items-center gap-3 text-xs text-base-content/30">
            <span class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-sm bg-success/70"></span>ok</span>
            <span class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-sm bg-warning/70"></span>some errors</span>
            <span class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-sm bg-error/70"></span>errors</span>
            <span id="chart-peak" class="font-mono text-base-content/20 ml-1">peak —</span>
        </div>
    </div>
    <!-- SVG full-width, no horizontal padding -->
    <svg id="live-chart" xmlns="http://www.w3.org/2000/svg" class="w-full block" data-ds="4"></svg>
</div>

<!-- ── Filters ────────────────────────────────────────────────────────────── -->
<div class="card bg-base-100 shadow-sm wasp-accent mb-4">
    <div class="card-body py-3 px-5">
        <div class="flex flex-wrap gap-3 items-end">
            <div class="form-control">
                <label class="label py-0 pb-1"><span class="label-text text-xs">Event Type</span></label>
                <select id="filter-event-type" class="select select-bordered select-sm w-48">
                    <option value="">All types</option>
                    {% for et in event_types %}
                    <option value="{{ et }}">{{ et }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-control">
                <label class="label py-0 pb-1"><span class="label-text text-xs">Source</span></label>
                <select id="filter-source" class="select select-bordered select-sm w-36">
                    <option value="">All sources</option>
                    {% for s in sources %}
                    <option value="{{ s }}">{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-control justify-end pb-0.5">
                <label class="label cursor-pointer gap-2 py-1">
                    <span class="label-text text-xs">Errors only</span>
                    <input type="checkbox" id="filter-errors-only" class="checkbox checkbox-xs checkbox-error">
                </label>
            </div>
            <div class="ml-auto flex items-center gap-2 self-center">
                <span id="filter-indicator" class="hidden px-2 py-0.5 rounded bg-primary/10 text-primary text-xs font-mono">filtered</span>
                <button id="btn-clear-filters" class="hidden btn btn-ghost btn-xs text-base-content/40 hover:text-base-content">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Clear filters
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ── Event stream ───────────────────────────────────────────────────────── -->
<div class="card bg-base-100 shadow-sm wasp-accent overflow-hidden">
    <div class="card-body p-0">
        <div id="feed-container"
             class="overflow-y-auto font-mono text-xs"
             data-ds="5">

            <!-- Sticky header row -->
            <div class="sticky top-0 z-10 bg-base-200/90 backdrop-blur-sm flex gap-2 px-4 py-2
                        text-base-content/40 font-sans font-semibold text-xs uppercase tracking-widest
                        border-b border-base-300/50">
                <span class="w-[115px] shrink-0">Time</span>
                <span class="w-[130px] shrink-0">Event</span>
                <span class="w-[75px] shrink-0">Source</span>
                <span class="flex-1 min-w-0">Message</span>
                <span class="w-[60px] shrink-0 text-right">Latency</span>
            </div>

            <!-- Events list -->
            <div id="event-list" class="divide-y divide-base-300/20"></div>

            <!-- Empty state -->
            <div id="empty-state" class="flex flex-col items-center justify-center py-20 text-base-content/25">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                <p class="text-sm font-sans">Waiting for events…</p>
                <p class="text-xs mt-1 font-sans">New audit events appear here in real time</p>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script nonce="{{ request.state.csp_nonce }}">
(function () {
'use strict';

var MAX_EVENTS   = 300;
var BUCKETS      = 12;          // 12 buckets × 5s = 60s rolling window
var BUCKET_MS    = 5000;
var paused       = false;
var eventSource  = null;
var totalCount   = 0;
var errorCount   = 0;
var pendingQueue = [];
var eventTimes   = [];   // {t, isError} for rate + chart
var connectTime  = null;

// Rolling chart buckets: array of {total, errors} (oldest→newest, index 0 = oldest)
var chartBuckets = Array.from({length: BUCKETS}, function() { return {total:0, errors:0}; });
var sessionEvents = [];  // [{t, isError}] for export

var list       = document.getElementById('event-list');
var emptyState = document.getElementById('empty-state');

// ── Stat elements ──────────────────────────────────────────────────────────
var statTotal   = document.getElementById('stat-total');
var statErrors  = document.getElementById('stat-errors');
var statRate    = document.getElementById('stat-rate');
var statUptime  = document.getElementById('stat-uptime');
var statQueued  = document.getElementById('stat-queued');
var statusPill  = document.getElementById('status-pill');
var filterBadge = document.getElementById('filter-indicator');

// ── Helpers ───────────────────────────────────────────────────────────────
function escHtml(s) {
    return String(s || '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

function formatTime(isoStr) {
    try {
        var d = new Date(isoStr);
        return d.toLocaleTimeString('en-GB', {hour12: false}) + '.' +
               String(d.getMilliseconds()).padStart(3, '0');
    } catch (_) { return (isoStr || '').slice(11, 23); }
}

function formatUptime(ms) {
    var s = Math.floor(ms / 1000);
    if (s < 60)   return s + 's';
    if (s < 3600) return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
    return Math.floor(s / 3600) + 'h ' + Math.floor((s % 3600) / 60) + 'm';
}

// ── Status pill ────────────────────────────────────────────────────────────
var hdrLiveDot = document.getElementById('hdr-live-dot');
function setStatus(state) {
    statusPill.className = 'pill pill-sm';
    if (state === 'live') {
        statusPill.classList.add('pill-success');
        statusPill.innerHTML = '<span class="pill-pulse"></span>Live';
        if (hdrLiveDot) hdrLiveDot.style.opacity = '1';
    } else if (state === 'paused') {
        statusPill.classList.add('pill-warning');
        statusPill.innerHTML = '<span class="pill-pulse"></span>Paused';
        if (hdrLiveDot) hdrLiveDot.style.opacity = '0.3';
    } else if (state === 'connecting') {
        statusPill.classList.add('pill-warning');
        statusPill.innerHTML = '<span class="pill-pulse"></span>Connecting…';
        if (hdrLiveDot) hdrLiveDot.style.opacity = '0.5';
    } else {
        statusPill.classList.add('pill-danger');
        statusPill.innerHTML = '<span class="pill-pulse"></span>Disconnected';
        if (hdrLiveDot) hdrLiveDot.style.opacity = '0.15';
    }
}

// ── Rolling chart ─────────────────────────────────────────────────────────
var chartEl   = document.getElementById('live-chart');
var chartPeak = document.getElementById('chart-peak');

// Color per bucket — uses DaisyUI CSS vars to match the legend exactly
function bucketColor(total, errors) {
    if (total === 0)    return null;
    if (errors === 0)   return {fill: 'oklch(var(--su))'};   // success green
    var errRatio = errors / total;
    if (errRatio < 0.5) return {fill: 'oklch(var(--wa))'};   // warning amber
    return                     {fill: 'oklch(var(--er))'};   // error red
}

function renderChart() {
    if (!chartEl) return;
    var W = chartEl.clientWidth || 600;
    var H = 56, padT = 3, padB = 16;
    var chartH = H - padT - padB;
    var n    = chartBuckets.length;
    var slot = W / n;               // each bar's total slot
    var gap  = Math.max(2, slot * 0.15);  // 15% gap, min 2px
    var barW = slot - gap;
    var startX = gap / 2;           // half-gap left margin

    chartEl.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
    var realMax  = Math.max.apply(null, chartBuckets.map(function(b){ return b.total; }));
    var maxTotal = realMax < 1 ? 1 : realMax;

    if (chartPeak) chartPeak.textContent = realMax > 0 ? 'peak ' + realMax : 'peak —';

    var html = '';

    chartBuckets.forEach(function(b, i) {
        var x    = startX + i * slot;
        var cx   = x + barW / 2;
        var isLast = i === n - 1;
        var col  = bucketColor(b.total, b.errors);

        if (!col) {
            // Empty bucket — faint baseline
            html += '<rect x="' + x.toFixed(1) + '" y="' + (padT + chartH - 2) + '" width="' + barW.toFixed(1) + '" height="2" rx="1" fill="rgba(255,255,255,0.06)"/>';
        } else {
            var totalH  = Math.max(4, (b.total / maxTotal) * chartH);
            var opacity = isLast ? 1 : 0.3 + (i / (n - 1)) * 0.6;
            var y       = padT + chartH - totalH;

            // Glow halo on current bucket
            if (isLast) {
                html += '<rect x="' + (x - 2).toFixed(1) + '" y="' + (y - 2).toFixed(1) + '" width="' + (barW + 4).toFixed(1) + '" height="' + (totalH + 4).toFixed(1) + '" rx="4" fill="' + col.fill + '" opacity="0.15"/>';
            }
            html += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '"' +
                    ' width="' + barW.toFixed(1) + '" height="' + totalH.toFixed(1) + '" rx="2"' +
                    ' fill="' + col.fill + '" opacity="' + opacity.toFixed(2) + '">' +
                    '<title>' + b.total + ' events' + (b.errors ? ', ' + b.errors + ' errors' : '') + '</title></rect>';
        }

        // Time labels on first, middle, last
        if (i === 0 || i === n - 1 || i === Math.floor(n / 2)) {
            var label = i === n - 1 ? 'now' : '-' + ((n - 1 - i) * BUCKET_MS / 1000) + 's';
            html += '<text x="' + cx.toFixed(1) + '" y="' + (H - 3) + '"' +
                    ' text-anchor="middle" font-size="8" fill="rgba(255,255,255,0.22)">' + label + '</text>';
        }
    });

    chartEl.innerHTML = html;
}

function advanceChart() {
    // Rotate buckets: drop oldest, add fresh bucket at end
    chartBuckets.shift();
    chartBuckets.push({total: 0, errors: 0});
    renderChart();
}

// Advance chart every BUCKET_MS
setInterval(advanceChart, BUCKET_MS);
// Wait for layout so clientWidth is correct
requestAnimationFrame(function() { setTimeout(renderChart, 50); });

// ── Rate + uptime ticker ──────────────────────────────────────────────────
function updateTicker() {
    var now = Date.now();
    // Rate: events in last 60s
    eventTimes = eventTimes.filter(function(e) { return now - e.t < 60000; });
    var rate = eventTimes.length;
    if (statRate) statRate.textContent = rate;

    // Uptime
    if (statUptime && connectTime) {
        statUptime.textContent = formatUptime(now - connectTime);
    }

    // Queued
    if (statQueued) statQueued.textContent = pendingQueue.length;
}
setInterval(updateTicker, 3000);

// ── Build stream URL ──────────────────────────────────────────────────────
function buildStreamUrl() {
    var et  = document.getElementById('filter-event-type').value;
    var src = document.getElementById('filter-source').value;
    var err = document.getElementById('filter-errors-only').checked;
    var params = [];
    if (et)  params.push('event_type=' + encodeURIComponent(et));
    if (src) params.push('source='     + encodeURIComponent(src));
    if (err) params.push('errors_only=true');
    var isFiltered = params.length > 0;
    if (filterBadge) filterBadge.classList.toggle('hidden', !isFiltered);
    var clearBtn = document.getElementById('btn-clear-filters');
    if (clearBtn) clearBtn.classList.toggle('hidden', !isFiltered);
    return '/live/stream' + (params.length ? '?' + params.join('&') : '');
}

// ── Add event row ─────────────────────────────────────────────────────────
function addEvent(ev) {
    emptyState.classList.add('hidden');

    totalCount++;
    if (ev.has_error) errorCount++;
    var now = Date.now();
    eventTimes.push({t: now, isError: ev.has_error});
    sessionEvents.push(ev);

    // Feed latest chart bucket (last element)
    chartBuckets[chartBuckets.length - 1].total++;
    if (ev.has_error) chartBuckets[chartBuckets.length - 1].errors++;
    renderChart();

    if (statTotal)  statTotal.textContent  = totalCount;
    if (statErrors) {
        statErrors.textContent = errorCount;
        statErrors.className = 'font-bold font-mono text-sm ' + (errorCount > 0 ? 'text-error' : 'text-success');
    }

    // Safety classification
    var actionLower = (ev.action || '').toLowerCase();
    var typeLower   = (ev.event_type || '').toLowerCase();
    var isSafetyBlock = actionLower.includes('soft_gate_blocked') || actionLower.includes('high_risk_blocked') ||
                        typeLower.includes('gate_block') || typeLower.includes('safety_block');
    var isSafetyWarn  = !isSafetyBlock && (actionLower.includes('soft_gate_warn') ||
                        typeLower.includes('gate_warn') || actionLower === 'self_improve');

    // Row classes
    var rowCls = 'flex gap-2 px-4 py-1.5 hover:bg-base-200/40 transition-colors items-start wasp-event-enter';
    if (isSafetyBlock)    rowCls += ' border-l-4 border-error bg-error/5 wasp-risk-pulse';
    else if (isSafetyWarn) rowCls += ' border-l-4 border-warning bg-warning/5 wasp-warn-pulse';
    else if (ev.has_error) rowCls += ' border-l-2 border-error/60';

    // Event type color
    var etColor = isSafetyBlock ? 'text-error font-bold' :
                  isSafetyWarn  ? 'text-warning font-semibold' :
                  ev.has_error  ? 'text-error' :
                  typeLower.includes('telegram') || typeLower.includes('message') ? 'text-success/80' :
                  typeLower.includes('skill')    ? 'text-info/80' :
                  typeLower.includes('security') ? 'text-warning/80' :
                  typeLower.includes('scheduled')? 'text-base-content/35' :
                                                   'text-primary/70';

    // Latency color
    var latColor = ev.latency_ms > 5000 ? 'text-error' :
                   ev.latency_ms > 2000 ? 'text-warning' :
                   ev.latency_ms > 0    ? 'text-success/60' : 'text-base-content/20';

    // Message: prefer input_summary for telegram/message events, otherwise action
    var isUserEvent = typeLower.includes('telegram') || typeLower.includes('message');
    var msgRaw = (isUserEvent && ev.input) ? ev.input :
                 ev.action ? ev.action.replace(/^scheduler\.|^skill\./, '') : '';
    var errTag = isSafetyBlock
        ? ' <span class="pill-blocked">BLOCKED</span>'
        : isSafetyWarn
        ? ' <span class="pill-gate">GATE</span>'
        : ev.has_error
        ? ' <span class="pill-err">ERR</span>'
        : '';

    var row = document.createElement('div');
    row.className = rowCls;
    row.title = ev.has_error ? (ev.error || '') : ev.action || '';
    row.innerHTML =
        '<span class="w-[115px] shrink-0 text-base-content/40 tabular-nums" title="' + escHtml(ev.ts) + '">' + escHtml(formatTime(ev.ts)) + '</span>' +
        '<span class="w-[130px] shrink-0 truncate ' + etColor + '" title="' + escHtml(ev.event_type) + '">' + escHtml(ev.event_type) + errTag + '</span>' +
        '<span class="w-[75px] shrink-0 text-base-content/35 truncate" title="' + escHtml(ev.source) + '">' + escHtml(ev.source) + '</span>' +
        '<span class="flex-1 min-w-0 text-base-content/60 truncate">' + escHtml(msgRaw) + '</span>' +
        '<span class="w-[60px] shrink-0 tabular-nums text-right ' + latColor + '">' + (ev.latency_ms || '—') + (ev.latency_ms ? 'ms' : '') + '</span>';

    // Prepend (newest at top)
    list.insertBefore(row, list.firstChild);

    // Trim old rows
    while (list.children.length > MAX_EVENTS) {
        list.removeChild(list.lastChild);
    }
}

// ── SSE stream ────────────────────────────────────────────────────────────
function startStream() {
    if (eventSource) { eventSource.close(); eventSource = null; }
    setStatus('connecting');
    connectTime = null;

    eventSource = new EventSource(buildStreamUrl());

    eventSource.onmessage = function(e) {
        try {
            var data = JSON.parse(e.data);
            if (data.type === 'connected') {
                connectTime = Date.now();
                setStatus(paused ? 'paused' : 'live');
                return;
            }
            if (data.type === 'poll_error') {
                console.warn('[live] Server-side poll error — stream continuing');
                return;
            }
            if (paused) {
                pendingQueue.push(data);
                if (pendingQueue.length > MAX_EVENTS) pendingQueue.shift();
                if (statQueued) statQueued.textContent = pendingQueue.length;
            } else {
                addEvent(data);
            }
        } catch (e) { console.warn('[live] SSE event parse error:', e.message); }
    };

    eventSource.onerror = function() {
        setStatus('disconnected');
        setTimeout(function() { if (!paused) startStream(); }, 5000);
    };
}

// ── Controls ──────────────────────────────────────────────────────────────
window.togglePause = function() {
    paused = !paused;
    var btn = document.getElementById('btn-pause');
    if (paused) {
        setStatus('paused');
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg> Resume';
    } else {
        setStatus('live');
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6"/></svg> Pause';
        pendingQueue.forEach(addEvent);
        pendingQueue = [];
        if (statQueued) statQueued.textContent = '0';
    }
};

window.clearFeed = function() {
    list.innerHTML = '';
    emptyState.classList.remove('hidden');
    totalCount = 0; errorCount = 0;
    eventTimes = []; pendingQueue = []; sessionEvents = [];
    chartBuckets = Array.from({length: BUCKETS}, function() { return {total:0, errors:0}; });
    renderChart();
    if (statTotal)  statTotal.textContent  = '0';
    if (statErrors) { statErrors.textContent = '0'; statErrors.className = 'font-bold font-mono text-sm text-success'; }
    if (statQueued) statQueued.textContent  = '0';
};

window.exportSession = function() {
    if (!sessionEvents.length) { WaspToast.show('No events to export yet.', 'info'); return; }
    var blob = new Blob([JSON.stringify(sessionEvents, null, 2)], {type: 'application/json'});
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'live-session-' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.json';
    a.click();
    URL.revokeObjectURL(a.href);
};

window.applyFilters = function() {
    clearFeed();
    startStream();
};

window.clearFilters = function() {
    document.getElementById('filter-event-type').value = '';
    document.getElementById('filter-source').value = '';
    document.getElementById('filter-errors-only').checked = false;
    clearFeed();
    startStream();
};

// Start
startStream();
// Bind controls
var _lBtnPause = document.getElementById('btn-pause');
var _lBtnClear = document.getElementById('btn-live-clear');
var _lBtnExport = document.getElementById('btn-live-export');
var _lBtnClearFilters = document.getElementById('btn-clear-filters');
var _lFEType = document.getElementById('filter-event-type');
var _lFSource = document.getElementById('filter-source');
var _lFErrors = document.getElementById('filter-errors-only');
if (_lBtnPause) _lBtnPause.addEventListener('click', togglePause);
if (_lBtnClear) _lBtnClear.addEventListener('click', clearFeed);
if (_lBtnExport) _lBtnExport.addEventListener('click', exportSession);
if (_lBtnClearFilters) _lBtnClearFilters.addEventListener('click', clearFilters);
if (_lFEType) _lFEType.addEventListener('change', applyFilters);
if (_lFSource) _lFSource.addEventListener('change', applyFilters);
if (_lFErrors) _lFErrors.addEventListener('change', applyFilters);
})();
</script>
{% endblock %}