{% extends "base.html" %}
{% block title %}Debug — Drakkar{% endblock %}

{% block content %}
<!-- ==================== CONFIG SUMMARY ==================== -->
{% if config_summary %}
<div class="mb-6 px-4 py-3 rounded-lg border border-cream-200 font-mono text-xs text-ink-700 break-all select-all" style="background:#f5f3ee;">
    {{ config_summary }}
</div>
{% endif %}

<!-- ==================== TAB BAR ==================== -->
<div class="flex gap-1 mb-6 border-b border-cream-200" role="tablist">
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="metrics" role="tab">Metrics</button>
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="periodic" role="tab">Periodic Tasks</button>
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="trace" role="tab">Message Trace</button>
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="probe" role="tab">Message Probe</button>
    {% if is_cache_enabled() %}
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="cache" role="tab">Cache</button>
    {% endif %}
    <button class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-ink-800 transition-colors" data-tab="databases" role="tab">Databases</button>
</div>

<!-- ==================== METRICS TAB ==================== -->
<div data-tab-panel="metrics">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-xl font-bold text-ink-900">Metrics</h2>
        <div class="flex items-center gap-3">
            <label class="text-xs text-gray-500 flex items-center gap-1">
                <input id="metrics-show-user" type="checkbox" checked class="rounded"> User
            </label>
            <label class="text-xs text-gray-500 flex items-center gap-1">
                <input id="metrics-show-framework" type="checkbox" checked class="rounded"> Framework
            </label>
            <button id="metrics-refresh" class="px-3 py-1.5 text-sm rounded border border-cream-300 text-ink-700 hover:bg-cream-100">Refresh</button>
        </div>
    </div>
    <div id="metrics-list">
        <div class="text-gray-500 text-sm">Loading...</div>
    </div>
</div>

<!-- ==================== PERIODIC TASKS TAB ==================== -->
<div data-tab-panel="periodic">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-xl font-bold text-ink-900">Periodic Tasks</h2>
        <button id="periodic-refresh" class="px-3 py-1.5 text-sm rounded border border-cream-300 text-ink-700 hover:bg-cream-100">Refresh</button>
    </div>
    <div id="periodic-list">
        <div class="text-gray-500 text-sm">Loading...</div>
    </div>
</div>

<!-- ==================== MESSAGE TRACE TAB ==================== -->
<div data-tab-panel="trace">
    <h2 class="text-xl font-bold text-ink-900 mb-3">Message Trace</h2>
    <p class="text-xs text-gray-400 mb-3">Trace a Kafka message through the full pipeline. Search by partition:offset or by label value. Falls back to other workers in the same cluster.</p>
    <div class="flex items-center gap-3 mb-4">
        <label class="text-sm text-gray-500">Partition:Offset</label>
        <input id="trace-input" type="text" placeholder="e.g. 5:42" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-40 focus:border-teal-400 focus:outline-none">
        <button id="trace-btn" class="bg-teal-600 hover:bg-teal-500 text-white px-3 py-1.5 rounded text-sm">Trace</button>
        <span id="trace-status" class="text-sm text-gray-400"></span>
    </div>
    <div id="label-trace-inputs" class="mb-4"></div>
    <div id="trace-result"></div>
</div>

<!-- ==================== MESSAGE PROBE TAB ==================== -->
<!-- Runs a pasted message end-to-end through the handler pipeline with zero
     footprint: no sink writes, no offsets committed, no cache writes, no
     recorder events. Results are rendered client-side below the form. -->
<div data-tab-panel="probe">
    <h2 class="text-xl font-bold text-ink-900 mb-3">Message Probe</h2>
    <p class="text-xs text-gray-400 mb-4">
        Run a pasted message end-to-end through the handler pipeline. Nothing is written to sinks, no offsets committed, no cache writes, no recorder events.
    </p>

    <!-- Input form -->
    <div id="probe-form-wrap" class="mb-4 p-4 rounded border border-cream-200" style="background:#fff;">
        <div class="mb-3">
            <label class="block text-xs text-gray-500 mb-1" for="probe-value">Value</label>
            <textarea id="probe-value" rows="8" placeholder="raw message body (UTF-8 text)"
                      class="w-full bg-white border border-cream-300 rounded px-3 py-2 text-sm font-mono text-ink-700 focus:border-teal-400 focus:outline-none"></textarea>
        </div>
        <div class="flex flex-wrap items-end gap-3 mb-3">
            <div class="flex-1 min-w-[12rem]">
                <label class="block text-xs text-gray-500 mb-1" for="probe-key">Key</label>
                <input id="probe-key" type="text" placeholder="optional"
                       class="w-full bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 focus:border-teal-400 focus:outline-none">
            </div>
            <div class="w-24">
                <label class="block text-xs text-gray-500 mb-1" for="probe-partition">Partition</label>
                <input id="probe-partition" type="number" min="0" value="0"
                       class="w-full bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 focus:border-teal-400 focus:outline-none">
            </div>
            <div class="w-28">
                <label class="block text-xs text-gray-500 mb-1" for="probe-offset">Offset</label>
                <input id="probe-offset" type="number" min="0" value="0"
                       class="w-full bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 focus:border-teal-400 focus:outline-none">
            </div>
            <div class="flex-1 min-w-[12rem]">
                <label class="block text-xs text-gray-500 mb-1" for="probe-topic">Topic</label>
                <input id="probe-topic" type="text" value="{{ kafka_source_topic or '' }}"
                       class="w-full bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 focus:border-teal-400 focus:outline-none">
            </div>
        </div>
        <div class="flex items-center gap-4">
            <label class="text-xs text-gray-500 flex items-center gap-1">
                <input id="probe-use-cache" type="checkbox" class="rounded"> Use cache (read-only)
            </label>
            <button id="probe-run-btn" class="bg-teal-600 hover:bg-teal-500 text-white px-3 py-1.5 rounded text-sm">Run</button>
        </div>
    </div>

    <!-- Status / spinner row (populated during in-flight probes) -->
    <div id="probe-status-row" class="mb-4 text-sm text-gray-500"></div>

    <!-- Results container (populated by renderProbeReport) -->
    <div id="probe-result"></div>

    <!-- Per-task detail sidebar (hidden by default; slides in from the right
         when a row in the Tasks table is clicked). Matches the pattern used
         by the Arrange / Task Results sidebars on /live: fixed position,
         translate-x-full when closed, translate-x-0 when open. Each tab
         has its own sidebar so they can coexist without id clashes. -->
    <div id="probe-task-sidebar"
         class="fixed right-0 top-0 bottom-0 w-[50rem] max-w-[90vw] bg-white border-l border-cream-300 shadow-2xl z-40 overflow-y-auto translate-x-full transition-transform duration-200"
         style="background:#fff;"
         role="dialog" aria-label="Task detail">
        <div id="probe-task-sidebar-content" class="p-4"></div>
    </div>
</div>

{% if is_cache_enabled() %}
<!-- ==================== CACHE TAB ==================== -->
<div data-tab-panel="cache">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-ink-900">Cache</h2>
    </div>

    <!-- Stats cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <div class="p-4 rounded-lg border border-cream-200" style="background:#fff;">
            <div class="text-xs text-gray-500 uppercase tracking-wide">Entries (memory)</div>
            <div class="text-2xl font-bold text-teal-600" id="stat-entries-mem">-</div>
        </div>
        <div class="p-4 rounded-lg border border-cream-200" style="background:#fff;">
            <div class="text-xs text-gray-500 uppercase tracking-wide">Bytes (memory)</div>
            <div class="text-2xl font-bold text-teal-600" id="stat-bytes-mem">-</div>
        </div>
        <div class="p-4 rounded-lg border border-cream-200" style="background:#fff;">
            <div class="text-xs text-gray-500 uppercase tracking-wide">Entries (DB)</div>
            <div class="text-2xl font-bold text-ink-800" id="stat-entries-db">-</div>
        </div>
        <div class="p-4 rounded-lg border border-cream-200" style="background:#fff;">
            <div class="text-xs text-gray-500 uppercase tracking-wide">Bytes (DB)</div>
            <div class="text-2xl font-bold text-ink-800" id="stat-bytes-db">-</div>
        </div>
    </div>

    <!-- Filter bar -->
    <div class="flex flex-wrap items-center gap-3 mb-4">
        <label class="text-sm text-gray-500">Scope</label>
        <select id="cache-filter-scope" class="bg-white border border-cream-300 rounded px-2 py-1 text-sm text-ink-700 focus:border-teal-400 focus:outline-none">
            <option value="">All</option>
            <option value="local">local</option>
            <option value="cluster">cluster</option>
            <option value="global">global</option>
        </select>
        <label class="text-sm text-gray-500">Search</label>
        <input id="cache-filter-search" type="text" placeholder="substring in key" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-48 focus:border-teal-400 focus:outline-none">
        <label class="text-xs text-gray-500 flex items-center gap-1">
            <input id="cache-filter-expired" type="checkbox" class="rounded"> Expired only
        </label>
        <button id="cache-filter-apply" class="bg-teal-600 hover:bg-teal-500 text-white px-3 py-1.5 rounded text-sm">Apply</button>
        <span id="cache-entries-status" class="text-xs text-gray-500 ml-auto"></span>
    </div>

    <!-- Entries table -->
    <div class="rounded-lg border border-cream-200 overflow-hidden" style="background:#fff;">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-gray-400 text-xs border-b border-cream-200" style="background:#f5f3ee;">
                    <th class="py-2 px-3">Key</th>
                    <th class="py-2 px-3">Scope</th>
                    <th class="py-2 px-3">Size</th>
                    <th class="py-2 px-3">Updated</th>
                    <th class="py-2 px-3">Expires</th>
                    <th class="py-2 px-3">Origin</th>
                </tr>
            </thead>
            <tbody id="cache-entries-body">
                <tr><td colspan="6" class="py-4 px-3 text-center text-gray-400">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="flex items-center justify-between mt-3 text-sm">
        <div class="text-gray-500" id="cache-page-info"></div>
        <div class="flex items-center gap-2">
            <button id="cache-page-prev" class="px-3 py-1 rounded border border-cream-300 text-ink-700 hover:bg-cream-100 disabled:opacity-40" disabled>Prev</button>
            <button id="cache-page-next" class="px-3 py-1 rounded border border-cream-300 text-ink-700 hover:bg-cream-100 disabled:opacity-40" disabled>Next</button>
        </div>
    </div>
</div>

<!-- Cache entry detail side panel (fixed-position; rendered once, independent of tab) -->
<div id="cache-detail-panel" class="fixed top-0 right-0 h-full w-full md:w-1/2 lg:w-1/3 bg-white border-l border-cream-200 shadow-lg transform translate-x-full transition-transform z-40 overflow-y-auto" style="background:#fff;">
    <div class="p-4 border-b border-cream-200 flex items-center justify-between" style="background:#f5f3ee;">
        <h3 class="font-semibold text-ink-800">Entry Detail</h3>
        <button onclick="closeCacheDetail()" class="text-gray-400 hover:text-ink-800 text-xl leading-none">&times;</button>
    </div>
    <div class="p-4" id="cache-detail-body">
        <div class="text-gray-400">Select an entry...</div>
    </div>
</div>
{% endif %}

<!-- ==================== DATABASES TAB ==================== -->
<div data-tab-panel="databases">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-xl font-bold text-ink-900">Databases</h2>
        <div class="flex items-center gap-3">
            <button id="btn-merge" disabled
                    class="px-4 py-2 text-sm font-medium rounded disabled:opacity-40"
                    style="background:#2a2a2a;color:white;">
                Merge Selected
            </button>
            <button id="btn-refresh" class="px-3 py-2 text-sm rounded border border-cream-300 text-ink-700 hover:bg-cream-100">
                Refresh
            </button>
        </div>
    </div>

    <div class="flex items-center gap-3 mb-4">
        <label class="text-xs text-gray-500">Worker:</label>
        <select id="db-worker-filter" class="bg-white border border-cream-300 rounded px-2 py-1 text-sm text-ink-700 focus:border-teal-400 focus:outline-none">
            <option value="">All workers</option>
        </select>
        <span id="db-count" class="text-xs text-gray-400 ml-auto"></span>
    </div>
    <div id="db-list" class="space-y-6">
        <div class="text-gray-500">Loading...</div>
    </div>

    <!-- merge result banner -->
    <div id="merge-result" class="hidden mt-4 p-4 rounded border border-green-300 bg-green-50">
        <div class="flex items-center justify-between">
            <div>
                <span class="font-semibold text-green-800" id="merge-msg"></span>
            </div>
            <a id="merge-download" href="#" class="px-3 py-1 text-sm rounded font-medium"
               style="background:#2a2a2a;color:white;">
                Download
            </a>
        </div>
    </div>
</div>

<script>
// === Tab switching ===
// Pure UI show/hide — data for each tab is fetched on initial page load (see
// the IIFE further down). Tab state persists via localStorage and supports
// the legacy ``#trace/P/O`` deep-link which auto-selects the Trace tab.
(function() {
    var AVAILABLE_TABS = Array.from(document.querySelectorAll('[data-tab-panel]'))
        .map(function(p) { return p.dataset.tabPanel; });

    function showTab(name) {
        if (AVAILABLE_TABS.indexOf(name) === -1) name = AVAILABLE_TABS[0] || 'metrics';
        document.querySelectorAll('[data-tab-panel]').forEach(function(p) {
            p.style.display = p.dataset.tabPanel === name ? '' : 'none';
        });
        document.querySelectorAll('.tab-btn').forEach(function(b) {
            var active = b.dataset.tab === name;
            // Active = teal underline + dark text; inactive = transparent border + gray.
            b.classList.toggle('border-teal-500', active);
            b.classList.toggle('text-ink-800', active);
            b.classList.toggle('border-transparent', !active);
            b.classList.toggle('text-gray-500', !active);
        });
        localStorage.setItem('drakkar-debug-tab', name);
    }
    // expose for use from inside other IIFEs (e.g. trace deep-link)
    window.drakkarShowDebugTab = showTab;

    document.querySelectorAll('.tab-btn').forEach(function(b) {
        b.onclick = function() { showTab(b.dataset.tab); };
    });

    // Initial tab: URL hash → localStorage → first available.
    var hash = location.hash.slice(1);
    var initial;
    if (hash.startsWith('trace/')) initial = 'trace';
    else if (hash && AVAILABLE_TABS.indexOf(hash) !== -1) initial = hash;
    else initial = localStorage.getItem('drakkar-debug-tab') || AVAILABLE_TABS[0];
    showTab(initial);
})();

(function() {
    // === Periodic Tasks ===
    var periodicListEl = document.getElementById('periodic-list');
    var periodicRefreshBtn = document.getElementById('periodic-refresh');

    function fmtAgo(ts) {
        if (!ts) return '-';
        var secs = Math.floor(Date.now() / 1000 - ts);
        if (secs < 60) return secs + 's ago';
        if (secs < 3600) return Math.floor(secs / 60) + 'm ago';
        if (secs < 86400) return Math.floor(secs / 3600) + 'h ago';
        return Math.floor(secs / 86400) + 'd ago';
    }

    function renderPeriodic(tasks) {
        periodicListEl.textContent = '';
        if (!tasks.length) {
            var empty = document.createElement('div');
            empty.className = 'text-gray-500 text-sm py-4 text-center';
            empty.textContent = 'No periodic task runs recorded yet';
            periodicListEl.appendChild(empty);
            return;
        }

        var table = document.createElement('table');
        table.className = 'w-full text-sm';
        var thead = document.createElement('thead');
        var headTr = document.createElement('tr');
        headTr.className = 'text-left text-gray-400 text-xs border-b border-cream-200';
        ['Task', 'Last Run', 'Duration', 'Status', 'OK', 'Errors', 'Recent'].forEach(function(col) {
            var th = document.createElement('th');
            th.className = 'py-2 px-3';
            th.textContent = col;
            headTr.appendChild(th);
        });
        thead.appendChild(headTr);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        tasks.forEach(function(t) {
            var tr = document.createElement('tr');
            tr.className = 'border-b border-cream-100 hover:bg-cream-50';

            var tdName = document.createElement('td');
            tdName.className = 'py-2 px-3 font-mono text-xs font-semibold';
            var nameSpan = document.createElement('span');
            nameSpan.textContent = t.name;
            tdName.appendChild(nameSpan);
            // system=true tasks are framework-internal loops (cache.flush,
            // cache.sync, cache.cleanup, etc.). A small grey [system] pill
            // distinguishes them from user-defined @periodic handler methods
            // without changing the table shape.
            if (t.system) {
                var pill = document.createElement('span');
                pill.className = 'inline-block ml-1 px-2 py-0 text-[10px] rounded bg-gray-200 text-gray-700 font-medium';
                pill.textContent = 'system';
                pill.title = 'Framework-internal periodic loop';
                tdName.appendChild(pill);
            }

            var tdLast = document.createElement('td');
            tdLast.className = 'py-2 px-3 text-xs text-gray-500';
            tdLast.textContent = fmtAgo(t.last_run_ts);
            if (t.last_run_ts) tdLast.title = new Date(t.last_run_ts * 1000).toISOString();

            var tdDur = document.createElement('td');
            tdDur.className = 'py-2 px-3 font-mono text-xs';
            tdDur.textContent = t.last_duration != null ? t.last_duration.toFixed(3) + 's' : '-';

            var tdStatus = document.createElement('td');
            tdStatus.className = 'py-2 px-3 text-xs font-semibold';
            if (t.last_status === 'ok') {
                tdStatus.style.color = '#059669';
                tdStatus.textContent = 'ok';
            } else {
                tdStatus.style.color = '#dc2626';
                tdStatus.textContent = 'error';
                if (t.last_error) tdStatus.title = t.last_error;
            }

            var tdOk = document.createElement('td');
            tdOk.className = 'py-2 px-3 font-mono text-xs';
            tdOk.style.color = '#059669';
            tdOk.textContent = t.total_ok;

            var tdErr = document.createElement('td');
            tdErr.className = 'py-2 px-3 font-mono text-xs';
            tdErr.style.color = t.total_error > 0 ? '#dc2626' : '#6b7280';
            tdErr.textContent = t.total_error;

            // sparkline: last 20 runs as colored dots
            var tdRecent = document.createElement('td');
            tdRecent.className = 'py-2 px-3';
            if (t.recent && t.recent.length) {
                var runs = t.recent.slice().reverse(); // oldest first
                runs.forEach(function(r) {
                    var dot = document.createElement('span');
                    dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:2px;';
                    dot.style.background = r.status === 'ok' ? '#34d399' : '#f87171';
                    dot.title = (r.status === 'ok' ? 'ok' : 'error: ' + (r.error || '?')) + ' (' + (r.duration ? r.duration.toFixed(3) + 's' : '?') + ')';
                    tdRecent.appendChild(dot);
                });
            }

            tr.append(tdName, tdLast, tdDur, tdStatus, tdOk, tdErr, tdRecent);
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        periodicListEl.appendChild(table);
    }

    function loadPeriodic() {
        fetch('/api/debug/periodic').then(function(r) { return r.json(); }).then(renderPeriodic)
        .catch(function() {
            periodicListEl.textContent = '';
            var err = document.createElement('div');
            err.className = 'text-red-500 text-sm';
            err.textContent = 'Failed to load periodic tasks';
            periodicListEl.appendChild(err);
        });
    }

    periodicRefreshBtn.onclick = loadPeriodic;

    // === Trace ===
    var traceInput = document.getElementById('trace-input');
    var traceBtn = document.getElementById('trace-btn');
    var traceStatus = document.getElementById('trace-status');
    var traceResult = document.getElementById('trace-result');

    var evtColors = {consumed:'#2563eb', arranged:'#0d9488', task_started:'#d97706', task_completed:'#059669', task_failed:'#dc2626', task_complete:'#7c3aed', message_complete:'#a855f7', window_complete:'#c084fc', produced:'#9333ea', committed:'#6b7280'};

    function fmtTimeMs(ts) { return ts ? new Date(ts * 1000).toISOString().substring(11, 23) : ''; }
    function durColor(d) { return d > 1 ? '#dc2626' : d > 0.1 ? '#d97706' : '#059669'; }

    function loadTrace() {
        var input = traceInput.value.trim();
        var m = input.match(/^(\d+)[:\s/](\d+)$/);
        if (!m) {
            traceStatus.textContent = 'format: partition:offset';
            return;
        }
        var p = m[1], o = m[2];
        history.replaceState(null, '', '#trace/' + p + '/' + o);
        traceStatus.textContent = 'loading...';
        traceResult.textContent = '';

        fetch('/api/debug/trace?partition=' + p + '&offset=' + o)
            .then(function(r) { return r.json(); })
            .then(function(events) {
                traceResult.textContent = '';
                if (!events.length) {
                    var msg = document.createElement('p');
                    msg.className = 'text-gray-400 py-4 text-center';
                    msg.textContent = 'No events found for ' + p + ':' + o + ' in any cluster worker';
                    traceResult.appendChild(msg);
                    traceStatus.textContent = '';
                    return;
                }

                var workerName = events[0].worker_name || '?';
                traceStatus.textContent = events.length + ' events from ' + workerName;

                var table = document.createElement('table');
                table.className = 'w-full text-sm';
                var thead = document.createElement('thead');
                var headTr = document.createElement('tr');
                headTr.className = 'text-left text-gray-400 border-b border-cream-200';
                var cols = ['Time', 'Worker', 'Event', 'Task ID', 'Duration', 'Details'];
                for (var ci = 0; ci < cols.length; ci++) {
                    var th = document.createElement('th');
                    th.className = 'py-2 px-3';
                    th.textContent = cols[ci];
                    headTr.appendChild(th);
                }
                thead.appendChild(headTr);
                table.appendChild(thead);

                var tbody = document.createElement('tbody');
                for (var ei = 0; ei < events.length; ei++) {
                    var ev = events[ei];
                    var tr = document.createElement('tr');
                    tr.className = 'border-b border-cream-100 trace-row';
                    if (ev.task_id) tr.setAttribute('data-task-id', ev.task_id);
                    tr.addEventListener('mouseenter', function() {
                        var tid = this.getAttribute('data-task-id');
                        if (!tid) return;
                        document.querySelectorAll('.trace-row').forEach(function(row) {
                            if (row.getAttribute('data-task-id') === tid) row.style.background = '#e0f2fe';
                            else row.style.background = '';
                        });
                    });
                    tr.addEventListener('mouseleave', function() {
                        document.querySelectorAll('.trace-row').forEach(function(row) { row.style.background = ''; });
                    });

                    // time
                    var td1 = document.createElement('td');
                    td1.className = 'py-2 px-3 text-xs font-mono';
                    td1.textContent = fmtTimeMs(ev.ts);
                    // worker
                    var td2 = document.createElement('td');
                    td2.className = 'py-2 px-3 text-xs font-mono text-gray-500';
                    td2.textContent = ev.worker_name || '?';
                    // event
                    var td3 = document.createElement('td');
                    td3.className = 'py-2 px-3 font-mono text-xs font-semibold';
                    td3.style.color = evtColors[ev.event] || '#6b7280';
                    td3.textContent = ev.event;
                    // task id
                    var td4 = document.createElement('td');
                    td4.className = 'py-2 px-3 font-mono text-xs';
                    if (ev.task_id) {
                        var ta = document.createElement('a');
                        ta.href = '/task/' + encodeURIComponent(ev.task_id.split(':r')[0]);
                        ta.className = 'text-teal-600 hover:underline';
                        ta.textContent = ev.task_id;
                        td4.appendChild(ta);
                    }
                    // duration
                    var td5 = document.createElement('td');
                    td5.className = 'py-2 px-3 font-mono text-xs';
                    if (ev.duration) {
                        td5.style.color = durColor(ev.duration);
                        td5.textContent = ev.duration.toFixed(3) + 's';
                    }
                    // details
                    var td6 = document.createElement('td');
                    td6.className = 'py-2 px-3 text-xs text-gray-500 max-w-lg truncate expandable cursor-pointer';
                    td6.title = 'Click to expand';
                    var details = [];
                    if (ev.args) details.push('args: ' + ev.args);
                    if (ev.exit_code !== null && ev.exit_code !== undefined) details.push('exit: ' + ev.exit_code);
                    if (ev.pid) details.push('pid: ' + ev.pid);
                    if (ev.stdout_size) details.push('stdout: ' + ev.stdout_size + 'b');
                    if (ev.metadata) {
                        try {
                            var metaObj = typeof ev.metadata === 'string' ? JSON.parse(ev.metadata) : ev.metadata;
                            if (metaObj.env) {
                                var envParts = Object.keys(metaObj.env).map(function(k) { return k + '=' + metaObj.env[k]; });
                                if (envParts.length) details.push('env: ' + envParts.join(', '));
                            }
                            details.push(typeof ev.metadata === 'string' ? ev.metadata : JSON.stringify(ev.metadata));
                        } catch(x) { details.push(ev.metadata); }
                    }
                    if (ev.labels) {
                        try {
                            var lblObj = typeof ev.labels === 'string' ? JSON.parse(ev.labels) : ev.labels;
                            var lblParts = Object.keys(lblObj).map(function(k) { return k + '=' + lblObj[k]; });
                            if (lblParts.length) details.push('labels: ' + lblParts.join(', '));
                        } catch(x) {}
                    }
                    td6.setAttribute('data-full', details.join('\n'));
                    td6.textContent = details.join(' | ');

                    tr.append(td1, td2, td3, td4, td5, td6);
                    tbody.appendChild(tr);
                }
                table.appendChild(tbody);
                traceResult.appendChild(table);
            })
            .catch(function(err) {
                traceStatus.textContent = 'error: ' + err.message;
            });
    }

    traceBtn.onclick = loadTrace;
    traceInput.addEventListener('keydown', function(ev) {
        if (ev.key === 'Enter') loadTrace();
    });

    // === Label Trace ===
    var labelTraceContainer = document.getElementById('label-trace-inputs');

    function renderTraceEvents(events, statusMsg) {
        // shared renderer used by both partition:offset and label trace
        traceResult.textContent = '';
        if (!events.length) {
            var msg = document.createElement('p');
            msg.className = 'text-gray-400 py-4 text-center';
            msg.textContent = statusMsg || 'No events found';
            traceResult.appendChild(msg);
            traceStatus.textContent = '';
            return;
        }

        var workerName = events[0].worker_name || '?';
        traceStatus.textContent = events.length + ' events from ' + workerName;

        var table = document.createElement('table');
        table.className = 'w-full text-sm';
        var thead = document.createElement('thead');
        var headTr = document.createElement('tr');
        headTr.className = 'text-left text-gray-400 border-b border-cream-200';
        ['Time', 'Worker', 'Event', 'Task ID', 'Duration', 'Details'].forEach(function(col) {
            var th = document.createElement('th');
            th.className = 'py-2 px-3';
            th.textContent = col;
            headTr.appendChild(th);
        });
        thead.appendChild(headTr);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        for (var ei = 0; ei < events.length; ei++) {
            var ev = events[ei];
            var tr = document.createElement('tr');
            tr.className = 'border-b border-cream-100 trace-row';
            if (ev.task_id) tr.setAttribute('data-task-id', ev.task_id);
            tr.addEventListener('mouseenter', function() {
                var tid = this.getAttribute('data-task-id');
                if (!tid) return;
                document.querySelectorAll('.trace-row').forEach(function(row) {
                    if (row.getAttribute('data-task-id') === tid) row.style.background = '#e0f2fe';
                    else row.style.background = '';
                });
            });
            tr.addEventListener('mouseleave', function() {
                document.querySelectorAll('.trace-row').forEach(function(row) { row.style.background = ''; });
            });

            var td1 = document.createElement('td');
            td1.className = 'py-2 px-3 text-xs font-mono';
            td1.textContent = fmtTimeMs(ev.ts);
            var td2 = document.createElement('td');
            td2.className = 'py-2 px-3 text-xs font-mono text-gray-500';
            td2.textContent = ev.worker_name || '?';
            var td3 = document.createElement('td');
            td3.className = 'py-2 px-3 font-mono text-xs font-semibold';
            td3.style.color = evtColors[ev.event] || '#6b7280';
            td3.textContent = ev.event;
            var td4 = document.createElement('td');
            td4.className = 'py-2 px-3 font-mono text-xs';
            if (ev.task_id) {
                var ta = document.createElement('a');
                ta.href = '/task/' + encodeURIComponent(ev.task_id.split(':r')[0]);
                ta.className = 'text-teal-600 hover:underline';
                ta.textContent = ev.task_id;
                td4.appendChild(ta);
            }
            var td5 = document.createElement('td');
            td5.className = 'py-2 px-3 font-mono text-xs';
            if (ev.duration) {
                td5.style.color = durColor(ev.duration);
                td5.textContent = ev.duration.toFixed(3) + 's';
            }
            var td6 = document.createElement('td');
            td6.className = 'py-2 px-3 text-xs text-gray-500 max-w-lg truncate expandable cursor-pointer';
            td6.title = 'Click to expand';
            var details = [];
            if (ev.args) details.push('args: ' + ev.args);
            if (ev.exit_code !== null && ev.exit_code !== undefined) details.push('exit: ' + ev.exit_code);
            if (ev.pid) details.push('pid: ' + ev.pid);
            if (ev.stdout_size) details.push('stdout: ' + ev.stdout_size + 'b');
            if (ev.metadata) {
                try {
                    var metaObj2 = typeof ev.metadata === 'string' ? JSON.parse(ev.metadata) : ev.metadata;
                    if (metaObj2.env) {
                        var envParts2 = Object.keys(metaObj2.env).map(function(k) { return k + '=' + metaObj2.env[k]; });
                        if (envParts2.length) details.push('env: ' + envParts2.join(', '));
                    }
                    details.push(typeof ev.metadata === 'string' ? ev.metadata : JSON.stringify(ev.metadata));
                } catch(x) { details.push(ev.metadata); }
            }
            if (ev.labels) {
                try {
                    var lblObj = typeof ev.labels === 'string' ? JSON.parse(ev.labels) : ev.labels;
                    var lblParts = Object.keys(lblObj).map(function(k) { return k + '=' + lblObj[k]; });
                    if (lblParts.length) details.push('labels: ' + lblParts.join(', '));
                } catch(x) {}
            }
            td6.setAttribute('data-full', details.join('\n'));
            td6.textContent = details.join(' | ');

            tr.append(td1, td2, td3, td4, td5, td6);
            tbody.appendChild(tr);
        }
        table.appendChild(tbody);
        traceResult.appendChild(table);
    }

    function loadLabelTrace(key, value) {
        traceStatus.textContent = 'searching by ' + key + '=' + value + '...';
        traceResult.textContent = '';
        fetch('/api/debug/trace-by-label?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value))
            .then(function(r) { return r.json(); })
            .then(function(events) {
                renderTraceEvents(events, 'No events found for ' + key + '=' + value + ' in any cluster worker');
            })
            .catch(function(err) {
                traceStatus.textContent = 'error: ' + err.message;
            });
    }

    function buildLabelInputs(keys) {
        labelTraceContainer.textContent = '';
        if (!keys.length) return;

        keys.forEach(function(key) {
            var row = document.createElement('div');
            row.className = 'flex items-center gap-3 mb-2';
            var lbl = document.createElement('label');
            lbl.className = 'text-sm text-gray-500';
            lbl.textContent = key;
            lbl.style.minWidth = '120px';
            var inp = document.createElement('input');
            inp.type = 'text';
            inp.placeholder = 'search by ' + key;
            inp.className = 'bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-56 focus:border-teal-400 focus:outline-none';
            inp.dataset.labelKey = key;
            var btn = document.createElement('button');
            btn.className = 'bg-teal-600 hover:bg-teal-500 text-white px-3 py-1.5 rounded text-sm';
            btn.textContent = 'Trace';
            btn.onclick = function() {
                var val = inp.value.trim();
                if (val) loadLabelTrace(key, val);
            };
            inp.addEventListener('keydown', function(ev) {
                if (ev.key === 'Enter') {
                    var val = inp.value.trim();
                    if (val) loadLabelTrace(key, val);
                }
            });
            row.append(lbl, inp, btn);
            labelTraceContainer.appendChild(row);
        });
    }

    fetch('/api/debug/label-keys').then(function(r) { return r.json(); }).then(buildLabelInputs).catch(function() {});

    // === Databases ===
    var listEl = document.getElementById('db-list');
    var mergeBtn = document.getElementById('btn-merge');
    var refreshBtn = document.getElementById('btn-refresh');
    var mergeResult = document.getElementById('merge-result');
    var mergeMsg = document.getElementById('merge-msg');
    var mergeDownload = document.getElementById('merge-download');
    var dbWorkerFilter = document.getElementById('db-worker-filter');
    var dbCountEl = document.getElementById('db-count');
    var selected = new Set();
    var allDatabases = [];
    var dbSortCol = 'last_event_ts';
    var dbSortAsc = false;

    function updateMergeBtn() {
        mergeBtn.disabled = selected.size < 2;
    }

    function formatSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1048576).toFixed(1) + ' MB';
    }

    function formatTs(ts) {
        if (!ts) return '-';
        var d = new Date(ts * 1000);
        return d.toISOString().replace('T', ' ').slice(0, 19);
    }

    var dbColumns = [
        {key: '', label: '', css: 'px-4 py-2 w-8', sortable: false},
        {key: 'filename', label: 'File', css: 'px-2 py-2', sortable: true},
        {key: 'worker_name', label: 'Worker', css: 'px-2 py-2', sortable: true},
        {key: 'event_count', label: 'Events', css: 'px-2 py-2 text-right', sortable: true},
        {key: 'first_event_ts', label: 'First', css: 'px-2 py-2', sortable: true},
        {key: 'last_event_ts', label: 'Last', css: 'px-2 py-2', sortable: true},
        {key: 'size_bytes', label: 'Size', css: 'px-2 py-2 text-right', sortable: true},
        {key: '', label: '', css: 'px-2 py-2 w-8', sortable: false}
    ];

    function sortIndicator(key) {
        if (dbSortCol !== key) return '';
        return dbSortAsc ? ' ▲' : ' ▼';
    }

    function makeHeaderRow() {
        var tr = document.createElement('tr');
        tr.className = 'text-left text-gray-500 text-xs border-b border-cream-100';
        dbColumns.forEach(function(col) {
            var th = document.createElement('th');
            th.className = col.css;
            if (col.sortable) {
                th.className += ' cursor-pointer hover:text-ink-700 select-none';
                th.textContent = col.label + sortIndicator(col.key);
                th.onclick = function() {
                    if (dbSortCol === col.key) { dbSortAsc = !dbSortAsc; }
                    else { dbSortCol = col.key; dbSortAsc = true; }
                    renderDatabases();
                };
            } else {
                th.textContent = col.label;
            }
            tr.appendChild(th);
        });
        return tr;
    }

    function getFilteredDatabases() {
        var worker = dbWorkerFilter.value;
        return allDatabases.filter(function(db) {
            if (db.event_count === 0) return false;
            if (worker && (db.worker_name || '') !== worker) return false;
            return true;
        });
    }

    function sortDatabases(list) {
        var col = dbSortCol;
        var asc = dbSortAsc;
        return list.slice().sort(function(a, b) {
            var va = a[col], vb = b[col];
            if (va == null) va = '';
            if (vb == null) vb = '';
            if (typeof va === 'string') {
                var cmp = va.localeCompare(vb);
                return asc ? cmp : -cmp;
            }
            return asc ? va - vb : vb - va;
        });
    }

    function renderDatabases() {
        var filtered = sortDatabases(getFilteredDatabases());
        listEl.textContent = '';

        var hidden = allDatabases.length - allDatabases.filter(function(db) { return db.event_count > 0; }).length;
        dbCountEl.textContent = filtered.length + ' of ' + allDatabases.length + ' files'
            + (hidden ? ' (' + hidden + ' empty hidden)' : '');

        if (!filtered.length) {
            var empty = document.createElement('div');
            empty.className = 'text-gray-500 py-8 text-center';
            empty.textContent = allDatabases.length ? 'No databases match filters' : 'No database files found';
            listEl.appendChild(empty);
            return;
        }

        // group by cluster
        var groups = {};
        var order = [];
        filtered.forEach(function(db) {
            var cluster = db.cluster_name || '';
            if (!(cluster in groups)) {
                groups[cluster] = [];
                order.push(cluster);
            }
            groups[cluster].push(db);
        });
        order.sort(function(a, b) {
            if (a && !b) return -1;
            if (!a && b) return 1;
            return a.localeCompare(b);
        });

        order.forEach(function(cluster) {
            var panel = document.createElement('div');
            panel.className = 'rounded-lg border border-cream-200 overflow-hidden';
            panel.style.background = '#fff';

            var header = document.createElement('div');
            header.className = 'px-4 py-3 border-b border-cream-200 flex items-center justify-between';
            header.style.background = '#f5f3ee';
            var title = document.createElement('span');
            title.className = 'font-semibold text-ink-800';
            title.textContent = (cluster || 'Unclustered') + ' (' + groups[cluster].length + ')';
            header.appendChild(title);

            var selectAll = document.createElement('label');
            selectAll.className = 'text-xs text-gray-500 flex items-center gap-1 cursor-pointer';
            var saCheckbox = document.createElement('input');
            saCheckbox.type = 'checkbox';
            saCheckbox.className = 'rounded';
            saCheckbox.dataset.cluster = cluster;
            saCheckbox.onchange = function() {
                groups[cluster].forEach(function(db) {
                    if (saCheckbox.checked) selected.add(db.filename);
                    else selected.delete(db.filename);
                });
                panel.querySelectorAll('input[data-file]').forEach(function(cb) {
                    cb.checked = saCheckbox.checked;
                });
                updateMergeBtn();
            };
            selectAll.appendChild(saCheckbox);
            selectAll.appendChild(document.createTextNode(' select all'));
            header.appendChild(selectAll);
            panel.appendChild(header);

            var table = document.createElement('table');
            table.className = 'w-full text-sm';
            var thead = document.createElement('thead');
            thead.appendChild(makeHeaderRow());
            table.appendChild(thead);

            var tbody = document.createElement('tbody');
            groups[cluster].forEach(function(db) {
                var tr = document.createElement('tr');
                tr.className = 'border-b border-cream-50 hover:bg-cream-50';

                var tdCb = document.createElement('td');
                tdCb.className = 'px-4 py-2';
                var cb = document.createElement('input');
                cb.type = 'checkbox';
                cb.className = 'rounded';
                cb.dataset.file = db.filename;
                cb.checked = selected.has(db.filename);
                cb.onchange = function() {
                    if (cb.checked) selected.add(db.filename);
                    else selected.delete(db.filename);
                    updateMergeBtn();
                };
                tdCb.appendChild(cb);
                tr.appendChild(tdCb);

                var tdFile = document.createElement('td');
                tdFile.className = 'px-2 py-2 font-mono text-xs';
                tdFile.textContent = db.filename;
                tr.appendChild(tdFile);

                var tdWorker = document.createElement('td');
                tdWorker.className = 'px-2 py-2 font-mono text-xs';
                tdWorker.textContent = db.worker_name || '-';
                tr.appendChild(tdWorker);

                var tdCount = document.createElement('td');
                tdCount.className = 'px-2 py-2 text-right font-mono cursor-default';
                tdCount.textContent = db.event_count.toLocaleString();
                if (db.event_counts && Object.keys(db.event_counts).length) {
                    var parts = [];
                    Object.keys(db.event_counts).sort().forEach(function(k) {
                        parts.push(k + ': ' + db.event_counts[k]);
                    });
                    tdCount.title = parts.join('\n');
                }
                tr.appendChild(tdCount);

                var tdFirst = document.createElement('td');
                tdFirst.className = 'px-2 py-2 text-xs text-gray-500';
                tdFirst.textContent = formatTs(db.first_event_ts);
                tr.appendChild(tdFirst);

                var tdLast = document.createElement('td');
                tdLast.className = 'px-2 py-2 text-xs text-gray-500';
                tdLast.textContent = formatTs(db.last_event_ts);
                tr.appendChild(tdLast);

                var tdSize = document.createElement('td');
                tdSize.className = 'px-2 py-2 text-right text-xs text-gray-500';
                tdSize.textContent = formatSize(db.size_bytes);
                tr.appendChild(tdSize);

                var tdDl = document.createElement('td');
                tdDl.className = 'px-2 py-2';
                var dlLink = document.createElement('a');
                dlLink.href = '/debug/download/' + encodeURIComponent(db.filename);
                dlLink.className = 'text-gray-400 hover:text-ink-700';
                dlLink.title = 'Download';
                var dlSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                dlSvg.setAttribute('width', '16'); dlSvg.setAttribute('height', '16');
                dlSvg.setAttribute('viewBox', '0 0 24 24'); dlSvg.setAttribute('fill', 'none');
                dlSvg.setAttribute('stroke', 'currentColor'); dlSvg.setAttribute('stroke-width', '2');
                var p1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                p1.setAttribute('d', 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4');
                var p2 = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
                p2.setAttribute('points', '7 10 12 15 17 10');
                var p3 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                p3.setAttribute('x1', '12'); p3.setAttribute('y1', '15');
                p3.setAttribute('x2', '12'); p3.setAttribute('y2', '3');
                dlSvg.append(p1, p2, p3);
                dlLink.appendChild(dlSvg);
                tdDl.appendChild(dlLink);
                tr.appendChild(tdDl);

                tbody.appendChild(tr);
            });
            table.appendChild(tbody);
            panel.appendChild(table);
            listEl.appendChild(panel);
        });
    }

    function populateWorkerFilter() {
        var workers = {};
        allDatabases.forEach(function(db) {
            var w = db.worker_name || '';
            if (w) workers[w] = true;
        });
        var prev = dbWorkerFilter.value;
        dbWorkerFilter.textContent = '';
        var allOpt = document.createElement('option');
        allOpt.value = '';
        allOpt.textContent = 'All workers';
        dbWorkerFilter.appendChild(allOpt);
        Object.keys(workers).sort().forEach(function(w) {
            var opt = document.createElement('option');
            opt.value = w;
            opt.textContent = w;
            dbWorkerFilter.appendChild(opt);
        });
        dbWorkerFilter.value = prev;
    }

    function loadDatabases() {
        listEl.textContent = '';
        var loading = document.createElement('div');
        loading.className = 'text-gray-500';
        loading.textContent = 'Loading...';
        listEl.appendChild(loading);
        fetch('/api/debug/databases').then(function(r) { return r.json(); }).then(function(data) {
            allDatabases = data;
            populateWorkerFilter();
            renderDatabases();
        }).catch(function() {
            listEl.textContent = '';
            var err = document.createElement('div');
            err.className = 'text-red-500';
            err.textContent = 'Failed to load databases';
            listEl.appendChild(err);
        });
    }

    refreshBtn.onclick = loadDatabases;
    dbWorkerFilter.onchange = renderDatabases;

    mergeBtn.onclick = function() {
        if (selected.size < 2) return;
        mergeBtn.disabled = true;
        mergeBtn.textContent = 'Merging...';
        mergeResult.classList.add('hidden');
        fetch('/api/debug/merge', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({filenames: Array.from(selected)})
        }).then(function(r) { return r.json(); }).then(function(data) {
            mergeBtn.textContent = 'Merge Selected';
            updateMergeBtn();
            if (data.error) {
                alert('Merge failed: ' + data.error);
                return;
            }
            mergeMsg.textContent = 'Merged ' + data.event_count + ' events from '
                + data.worker_count + ' workers'
                + (data.cluster_name ? ' (' + data.cluster_name + ')' : '');
            mergeDownload.href = '/debug/download/' + encodeURIComponent(data.filename);
            mergeResult.classList.remove('hidden');
            loadDatabases();
        }).catch(function(err) {
            mergeBtn.textContent = 'Merge Selected';
            updateMergeBtn();
            alert('Merge failed: ' + err);
        });
    };

    // === Metrics ===
    var metricsListEl = document.getElementById('metrics-list');
    var metricsShowUser = document.getElementById('metrics-show-user');
    var metricsShowFramework = document.getElementById('metrics-show-framework');
    var metricsRefreshBtn = document.getElementById('metrics-refresh');
    var metricsData = [];

    var typeColors = {counter:'#2563eb', gauge:'#059669', histogram:'#d97706', info:'#7c3aed', summary:'#9333ea'};
    var sourceColors = {framework:'#6b7280', user:'#0d9488'};

    function fmtVal(v) {
        if (v === 0) return '0';
        if (v >= 1e6) return (v / 1e6).toFixed(1) + 'M';
        if (v >= 1e3) return (v / 1e3).toFixed(1) + 'K';
        if (Number.isInteger(v)) return v.toString();
        return v < 0.01 ? v.toExponential(2) : v.toFixed(3);
    }

    function renderMetrics() {
        metricsListEl.textContent = '';
        var showUser = metricsShowUser.checked;
        var showFw = metricsShowFramework.checked;
        var filtered = metricsData.filter(function(m) {
            if (m.source === 'user' && !showUser) return false;
            if (m.source === 'framework' && !showFw) return false;
            return true;
        });

        if (!filtered.length) {
            var empty = document.createElement('div');
            empty.className = 'text-gray-500 text-sm py-4 text-center';
            empty.textContent = metricsData.length ? 'All metrics hidden by filters' : 'No metrics registered';
            metricsListEl.appendChild(empty);
            return;
        }

        // group by source
        var groups = {user: [], framework: []};
        filtered.forEach(function(m) { groups[m.source].push(m); });

        ['user', 'framework'].forEach(function(source) {
            var items = groups[source];
            if (!items.length) return;

            var section = document.createElement('div');
            section.className = 'mb-4';

            var hdr = document.createElement('div');
            hdr.className = 'text-xs font-semibold uppercase tracking-wide mb-2';
            hdr.style.color = sourceColors[source];
            hdr.textContent = source + ' metrics (' + items.length + ')';
            section.appendChild(hdr);

            var table = document.createElement('table');
            table.className = 'w-full text-sm';
            var thead = document.createElement('thead');
            var headTr = document.createElement('tr');
            headTr.className = 'text-left text-gray-400 text-xs border-b border-cream-200';
            ['Name', 'Type', 'Description', 'Values'].forEach(function(col) {
                var th = document.createElement('th');
                th.className = 'py-2 px-3';
                th.textContent = col;
                headTr.appendChild(th);
            });
            thead.appendChild(headTr);
            table.appendChild(thead);

            var tbody = document.createElement('tbody');
            items.forEach(function(m) {
                var tr = document.createElement('tr');
                tr.className = 'border-b border-cream-50 hover:bg-cream-50';

                var tdName = document.createElement('td');
                tdName.className = 'py-2 px-3 font-mono text-xs';
                tdName.textContent = m.name;

                var tdType = document.createElement('td');
                tdType.className = 'py-2 px-3 text-xs font-semibold';
                tdType.style.color = typeColors[m.type] || '#6b7280';
                tdType.textContent = m.type;

                var tdHelp = document.createElement('td');
                tdHelp.className = 'py-2 px-3 text-xs text-gray-500 max-w-xs truncate';
                tdHelp.title = m.help;
                tdHelp.textContent = m.help;

                var tdVals = document.createElement('td');
                tdVals.className = 'py-2 px-3 font-mono text-xs';
                if (!m.samples.length) {
                    tdVals.textContent = '-';
                } else if (m.samples.length === 1 && !Object.keys(m.samples[0].labels).length) {
                    tdVals.textContent = fmtVal(m.samples[0].value);
                } else {
                    m.samples.forEach(function(s) {
                        var line = document.createElement('div');
                        var lblStr = Object.keys(s.labels).map(function(k) { return k + '=' + s.labels[k]; }).join(',');
                        var suffix = s.name.replace(m.name, '').replace(/^_/, '');
                        var prefix = '';
                        if (suffix) prefix = suffix + ' ';
                        if (lblStr) prefix += '{' + lblStr + '} ';
                        line.textContent = prefix + fmtVal(s.value);
                        tdVals.appendChild(line);
                    });
                }

                tr.append(tdName, tdType, tdHelp, tdVals);
                tbody.appendChild(tr);
            });
            table.appendChild(tbody);
            section.appendChild(table);
            metricsListEl.appendChild(section);
        });
    }

    function loadMetrics() {
        fetch('/api/debug/metrics').then(function(r) { return r.json(); }).then(function(data) {
            metricsData = data;
            renderMetrics();
        }).catch(function() {
            metricsListEl.textContent = '';
            var err = document.createElement('div');
            err.className = 'text-red-500 text-sm';
            err.textContent = 'Failed to load metrics';
            metricsListEl.appendChild(err);
        });
    }

    metricsRefreshBtn.onclick = loadMetrics;
    metricsShowUser.onchange = renderMetrics;
    metricsShowFramework.onchange = renderMetrics;

    // === Boot ===
    loadMetrics();
    loadPeriodic();
    loadDatabases();

    // Handle #trace/P/O deep links — activates the Trace tab and runs the
    // trace immediately. Works both on initial page load and later hashchange.
    function initFromHash() {
        var hash = location.hash.slice(1);
        if (hash.startsWith('trace/')) {
            var parts = hash.split('/');
            if (parts.length >= 3) {
                if (window.drakkarShowDebugTab) window.drakkarShowDebugTab('trace');
                traceInput.value = parts[1] + ':' + parts[2];
                loadTrace();
            }
        }
    }
    initFromHash();
    window.addEventListener('hashchange', initFromHash);
})();

{% if is_cache_enabled() %}
// === Cache tab ===
// Runs only when the cache feature is enabled. Scoped IDs (``cache-*``)
// prevent collision with other tab IDs; the detail side panel lives at
// document root so its fixed positioning is unaffected by the tab's
// display:none toggling.
(function() {
    var statEntriesMem = document.getElementById('stat-entries-mem');
    var statBytesMem = document.getElementById('stat-bytes-mem');
    var statEntriesDb = document.getElementById('stat-entries-db');
    var statBytesDb = document.getElementById('stat-bytes-db');

    var filterScope = document.getElementById('cache-filter-scope');
    var filterSearch = document.getElementById('cache-filter-search');
    var filterExpired = document.getElementById('cache-filter-expired');
    var applyBtn = document.getElementById('cache-filter-apply');

    var entriesBody = document.getElementById('cache-entries-body');
    var entriesStatus = document.getElementById('cache-entries-status');
    var pageInfo = document.getElementById('cache-page-info');
    var pagePrev = document.getElementById('cache-page-prev');
    var pageNext = document.getElementById('cache-page-next');

    var detailPanel = document.getElementById('cache-detail-panel');
    var detailBody = document.getElementById('cache-detail-body');

    var PAGE_SIZE = 200;
    var offset = 0;
    var total = 0;

    function formatBytes(n) {
        if (n == null) return '-';
        if (n < 1024) return n + ' B';
        if (n < 1048576) return (n / 1024).toFixed(1) + ' KB';
        return (n / 1048576).toFixed(1) + ' MB';
    }

    function formatTsMs(ms) {
        if (!ms) return '-';
        return new Date(ms).toISOString().slice(0, 19).replace('T', ' ');
    }

    function loadStats() {
        fetch('/api/debug/cache/stats').then(function(r) { return r.json(); }).then(function(s) {
            statEntriesMem.textContent = s.entries_in_memory != null ? s.entries_in_memory : '-';
            statBytesMem.textContent = formatBytes(s.bytes_in_memory);
            statEntriesDb.textContent = s.entries_in_db != null ? s.entries_in_db : '-';
            statBytesDb.textContent = formatBytes(s.bytes_in_db);
        }).catch(function() {});
    }

    function buildQuery() {
        var params = new URLSearchParams();
        params.set('limit', PAGE_SIZE);
        params.set('offset', offset);
        if (filterScope.value) params.set('scope', filterScope.value);
        if (filterSearch.value.trim()) params.set('search', filterSearch.value.trim());
        if (filterExpired.checked) params.set('expired_only', 'true');
        return params.toString();
    }

    function loadEntries() {
        entriesBody.textContent = '';
        var loading = document.createElement('tr');
        var loadingTd = document.createElement('td');
        loadingTd.setAttribute('colspan', '6');
        loadingTd.className = 'py-4 px-3 text-center text-gray-400';
        loadingTd.textContent = 'Loading...';
        loading.appendChild(loadingTd);
        entriesBody.appendChild(loading);

        fetch('/api/debug/cache/entries?' + buildQuery()).then(function(r) { return r.json(); }).then(function(body) {
            total = body.total || 0;
            renderEntries(body.entries || []);
            updatePagination();
        }).catch(function() {
            entriesBody.textContent = '';
            var err = document.createElement('tr');
            var errTd = document.createElement('td');
            errTd.setAttribute('colspan', '6');
            errTd.className = 'py-4 px-3 text-center text-red-500';
            errTd.textContent = 'Failed to load entries';
            err.appendChild(errTd);
            entriesBody.appendChild(err);
        });
    }

    function renderEntries(entries) {
        entriesBody.textContent = '';
        if (!entries.length) {
            var empty = document.createElement('tr');
            var emptyTd = document.createElement('td');
            emptyTd.setAttribute('colspan', '6');
            emptyTd.className = 'py-4 px-3 text-center text-gray-400';
            emptyTd.textContent = total ? 'No entries on this page' : 'No cache entries';
            empty.appendChild(emptyTd);
            entriesBody.appendChild(empty);
            return;
        }
        var now = Date.now();
        entries.forEach(function(e) {
            var tr = document.createElement('tr');
            tr.className = 'border-b border-cream-100 hover:bg-cream-50 cursor-pointer';
            tr.onclick = function() { openDetail(e.key); };

            var tdKey = document.createElement('td');
            tdKey.className = 'py-2 px-3 font-mono text-xs';
            tdKey.textContent = e.key;
            tdKey.title = e.key;

            var tdScope = document.createElement('td');
            tdScope.className = 'py-2 px-3 text-xs';
            var scopePill = document.createElement('span');
            scopePill.className = 'px-2 py-0.5 rounded text-xs font-semibold';
            if (e.scope === 'local') { scopePill.style.background = '#fef3c7'; scopePill.style.color = '#92400e'; }
            else if (e.scope === 'cluster') { scopePill.style.background = '#dbeafe'; scopePill.style.color = '#1e40af'; }
            else { scopePill.style.background = '#d1fae5'; scopePill.style.color = '#065f46'; }
            scopePill.textContent = e.scope;
            tdScope.appendChild(scopePill);

            var tdSize = document.createElement('td');
            tdSize.className = 'py-2 px-3 font-mono text-xs';
            tdSize.textContent = formatBytes(e.size_bytes);

            var tdUpdated = document.createElement('td');
            tdUpdated.className = 'py-2 px-3 text-xs text-gray-500';
            tdUpdated.textContent = formatTsMs(e.updated_at_ms);

            var tdExpires = document.createElement('td');
            tdExpires.className = 'py-2 px-3 text-xs';
            if (e.expires_at_ms == null) {
                tdExpires.style.color = '#6b7280';
                tdExpires.textContent = 'never';
            } else if (e.expires_at_ms < now) {
                tdExpires.style.color = '#dc2626';
                tdExpires.textContent = 'expired';
                tdExpires.title = formatTsMs(e.expires_at_ms);
            } else {
                tdExpires.style.color = '#6b7280';
                tdExpires.textContent = formatTsMs(e.expires_at_ms);
            }

            var tdOrigin = document.createElement('td');
            tdOrigin.className = 'py-2 px-3 font-mono text-xs text-gray-500';
            tdOrigin.textContent = e.origin_worker_id;

            tr.append(tdKey, tdScope, tdSize, tdUpdated, tdExpires, tdOrigin);
            entriesBody.appendChild(tr);
        });
    }

    function updatePagination() {
        var start = Math.min(offset + 1, total);
        var end = Math.min(offset + PAGE_SIZE, total);
        pageInfo.textContent = total ? (start + '-' + end + ' of ' + total) : '';
        entriesStatus.textContent = total + ' matching entries';
        pagePrev.disabled = offset <= 0;
        pageNext.disabled = offset + PAGE_SIZE >= total;
    }

    // Open state for click-outside-to-close. Flipped in open/close; the
    // document-level click listener below uses it to decide whether a
    // stray click should dismiss the panel. Using a boolean rather than
    // reading panel.style.transform because style-reads depend on the
    // inline vs Tailwind-class state of the element.
    var cacheDetailOpen = false;

    function openDetail(key) {
        detailBody.textContent = '';
        var loading = document.createElement('div');
        loading.className = 'text-gray-400';
        loading.textContent = 'Loading...';
        detailBody.appendChild(loading);
        detailPanel.style.transform = 'translateX(0)';
        cacheDetailOpen = true;

        fetch('/api/debug/cache/entry/' + encodeURIComponent(key)).then(function(r) {
            if (r.status === 404) throw new Error('Entry not found');
            return r.json();
        }).then(function(entry) {
            detailBody.textContent = '';
            var field = function(label, value) {
                var row = document.createElement('div');
                row.className = 'mb-3';
                var lbl = document.createElement('div');
                lbl.className = 'text-xs text-gray-500 uppercase tracking-wide';
                lbl.textContent = label;
                var val = document.createElement('div');
                val.className = 'font-mono text-sm break-all text-ink-800';
                val.textContent = value;
                row.append(lbl, val);
                return row;
            };
            detailBody.appendChild(field('Key', entry.key));
            detailBody.appendChild(field('Scope', entry.scope));
            detailBody.appendChild(field('Size', formatBytes(entry.size_bytes)));
            detailBody.appendChild(field('Created', formatTsMs(entry.created_at_ms)));
            detailBody.appendChild(field('Updated', formatTsMs(entry.updated_at_ms)));
            detailBody.appendChild(field('Expires', entry.expires_at_ms == null ? 'never' : formatTsMs(entry.expires_at_ms)));
            detailBody.appendChild(field('Origin Worker', entry.origin_worker_id));

            var valueLbl = document.createElement('div');
            valueLbl.className = 'text-xs text-gray-500 uppercase tracking-wide mt-2';
            valueLbl.textContent = 'Value';
            detailBody.appendChild(valueLbl);
            var pre = document.createElement('pre');
            pre.className = 'bg-cream-100 p-3 rounded text-xs font-mono break-all whitespace-pre-wrap';
            if (entry.value != null) {
                pre.textContent = JSON.stringify(entry.value, null, 2);
            } else {
                pre.textContent = entry.raw_value || '';
            }
            detailBody.appendChild(pre);
        }).catch(function(err) {
            detailBody.textContent = '';
            var errDiv = document.createElement('div');
            errDiv.className = 'text-red-500';
            errDiv.textContent = err.message || 'Failed to load entry';
            detailBody.appendChild(errDiv);
        });
    }

    window.closeCacheDetail = function() {
        detailPanel.style.transform = 'translateX(100%)';
        cacheDetailOpen = false;
    };

    // Click-outside-to-close for the Cache sidebar. Mirrors the Arrange
    // sidebar pattern in live.html. Clicks inside the panel keep it open
    // (obviously); clicks inside the Cache tab panel — including the
    // entries table, filter bar, and stats cards — also keep it open,
    // so filter changes and row-to-row navigation work naturally. Clicks
    // outside (other tab buttons, nav, page body) dismiss the sidebar.
    document.addEventListener('click', function(ev) {
        if (!cacheDetailOpen) return;
        if (detailPanel.contains(ev.target)) return;
        var tabPanel = document.querySelector('[data-tab-panel="cache"]');
        if (tabPanel && tabPanel.contains(ev.target)) return;
        window.closeCacheDetail();
    });

    applyBtn.onclick = function() {
        offset = 0;
        loadEntries();
    };
    filterSearch.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { offset = 0; loadEntries(); }
    });

    pagePrev.onclick = function() {
        offset = Math.max(0, offset - PAGE_SIZE);
        loadEntries();
    };
    pageNext.onclick = function() {
        offset += PAGE_SIZE;
        loadEntries();
    };

    loadStats();
    loadEntries();
    setInterval(loadStats, 5000);
})();
{% endif %}

// === Message Probe tab ===
// Submits the form to /api/debug/probe and renders the returned DebugReport.
// The stub ``renderProbeReport`` just dumps the JSON — later tasks (7-10)
// replace it with per-section rich rendering.
(function() {
    var form = document.getElementById('probe-form-wrap');
    if (!form) return;

    var valueEl = document.getElementById('probe-value');
    var keyEl = document.getElementById('probe-key');
    var partitionEl = document.getElementById('probe-partition');
    var offsetEl = document.getElementById('probe-offset');
    var topicEl = document.getElementById('probe-topic');
    var useCacheEl = document.getElementById('probe-use-cache');
    var runBtn = document.getElementById('probe-run-btn');
    var statusRow = document.getElementById('probe-status-row');
    var resultEl = document.getElementById('probe-result');

    function setError(message) {
        // Red banner above the results container; any previous error is replaced.
        resultEl.textContent = '';
        var banner = document.createElement('div');
        banner.className = 'p-3 rounded border border-red-300 text-sm text-red-700';
        banner.style.background = '#fef2f2';
        banner.textContent = message;
        resultEl.appendChild(banner);
    }

    function setBusy(busy) {
        runBtn.disabled = busy;
        runBtn.classList.toggle('opacity-60', busy);
        statusRow.textContent = busy ? 'Running probe...' : '';
    }

    function validate() {
        // Value is required; partition/offset must be non-negative integers.
        // Topic is optional and sent as empty string when blank.
        if (!valueEl.value) return 'Value is required';
        var p = Number(partitionEl.value);
        if (!Number.isInteger(p) || p < 0) return 'Partition must be a non-negative integer';
        var o = Number(offsetEl.value);
        if (!Number.isInteger(o) || o < 0) return 'Offset must be a non-negative integer';
        return null;
    }

    runBtn.addEventListener('click', function() {
        var err = validate();
        if (err) { setError(err); return; }

        var body = {
            value: valueEl.value,
            key: keyEl.value || null,
            partition: Number(partitionEl.value),
            offset: Number(offsetEl.value),
            topic: topicEl.value || '',
            use_cache: !!useCacheEl.checked
        };

        // Stash the submitted body on ``window`` so the toolbar's Re-run /
        // Edit-and-re-run buttons and the post-run chip can reference the
        // last-submitted input across IIFEs.
        window._probeLastInput = body;

        setBusy(true);
        resultEl.textContent = '';

        fetch('/api/debug/probe', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(body)
        }).then(function(r) {
            if (!r.ok) {
                // Surface the server message verbatim so validation errors
                // (422) and unexpected 500s are both visible in the UI.
                return r.text().then(function(t) {
                    throw new Error('HTTP ' + r.status + ': ' + t);
                });
            }
            return r.json();
        }).then(function(report) {
            setBusy(false);
            renderProbeReport(report);
        }).catch(function(e) {
            setBusy(false);
            setError('Probe failed — ' + (e && e.message ? e.message : e));
        });
    });
})();

// === Message Probe — rendering helpers ===
// These helpers mirror the ones used in live.html but live here so the probe
// renderer is self-contained. All strings are written via ``textContent`` so
// we never interpolate HTML from user-supplied data (stdin/stdout/stderr).
//
// Kafka-UI deep-link helpers (``makeKafkaUiIcon``, ``buildKafkaUiUrl``,
// ``KAFKA_UI_BASE``, ``KAFKA_UI_CLUSTER``, ``KAFKA_SOURCE_TOPIC``,
// ``KAFKA_SVG_PATH``) live in base.html so every page shares a single
// definition — see that file.

function probeDurSec(sec) {
    // Formats a duration value for display. Returns '-' when null/undefined.
    if (sec == null) return '-';
    if (sec < 1) return (sec * 1000).toFixed(0) + 'ms';
    return sec.toFixed(2) + 's';
}

function probeDurColor(d) {
    // Green under 100ms, orange under 1s, red beyond.
    if (d == null) return '#6b7280';
    return d > 1 ? '#dc2626' : d > 0.1 ? '#d97706' : '#059669';
}

function probeShortTaskId(tid) {
    // Short display of task_id — first 8 chars of the id portion (strips any
    // retry suffix like ``:r1``). Full id is exposed via title tooltip.
    if (!tid) return '-';
    var base = tid.split(':r')[0];
    return base.length > 10 ? base.slice(0, 10) + '...' : base;
}

function probePreviewText(text, maxLen) {
    // Collapses newlines/whitespace for a single-line preview and truncates.
    if (text == null || text === '') return '';
    var s = String(text).replace(/\s+/g, ' ').trim();
    if (s.length > maxLen) s = s.slice(0, maxLen) + '...';
    return s;
}

function probeMakeCard(titleText) {
    // Rounded bordered card matching the existing debug-tab card style.
    // Returns {card, body} — caller appends content into body.
    var card = document.createElement('div');
    card.className = 'mb-4 rounded-lg border border-cream-200';
    card.style.background = '#fff';
    var head = document.createElement('div');
    head.className = 'px-4 py-2 border-b border-cream-200 flex items-center gap-3';
    head.style.background = '#f5f3ee';
    var h = document.createElement('h3');
    h.className = 'font-semibold text-ink-800 text-sm';
    h.textContent = titleText;
    head.appendChild(h);
    card.appendChild(head);
    var body = document.createElement('div');
    body.className = 'p-4';
    card.appendChild(body);
    return {card: card, body: body, head: head};
}

function probeMakeErrorBanner(errObj) {
    // Red banner + scrollable traceback. errObj is a ProbeError dict.
    var wrap = document.createElement('div');
    wrap.className = 'p-3 rounded border border-red-300 text-xs text-red-700';
    wrap.style.background = '#fef2f2';
    var title = document.createElement('div');
    title.className = 'font-semibold mb-2';
    title.textContent = (errObj.exception_class || 'Error') + ': ' + (errObj.message || '');
    wrap.appendChild(title);
    if (errObj.traceback) {
        var pre = document.createElement('pre');
        pre.className = 'text-xs font-mono whitespace-pre-wrap';
        pre.style.cssText = 'max-height:240px;overflow-y:auto;background:#fff;padding:8px;border-radius:4px;color:#7f1d1d;';
        pre.textContent = errObj.traceback;
        wrap.appendChild(pre);
    }
    return wrap;
}

function probeMakeField(label, valueNode) {
    // Two-column field row used by section A. ``valueNode`` is either a
    // string (wrapped in <span>) or a DOM node.
    var row = document.createElement('div');
    row.className = 'flex gap-3 py-1 text-xs';
    var lbl = document.createElement('div');
    lbl.className = 'text-gray-500 uppercase tracking-wide';
    lbl.style.minWidth = '10rem';
    lbl.textContent = label;
    var val = document.createElement('div');
    val.className = 'font-mono text-ink-800 flex-1';
    if (typeof valueNode === 'string' || typeof valueNode === 'number') {
        val.textContent = String(valueNode);
    } else if (valueNode instanceof Node) {
        val.appendChild(valueNode);
    }
    row.append(lbl, val);
    return row;
}

function probeStatusColor(status) {
    // Matches the colored-number style used elsewhere in the UI.
    if (status === 'done') return '#059669';
    if (status === 'failed') return '#dc2626';
    if (status === 'replaced') return '#6b7280';
    if (status === 'retried') return '#d97706';
    return '#6b7280';
}

function probeMakeStatusCounts(counts) {
    // Inline ``done / failed / replaced`` colored counts. ``counts`` is
    // {done: N, failed: N, replaced: N, retried: N} — zeros are rendered
    // in muted style so row alignment stays consistent.
    var wrap = document.createElement('span');
    wrap.className = 'font-mono text-xs';
    function part(n, label, color) {
        var s = document.createElement('span');
        s.style.cssText = 'color:' + color + ';margin-right:10px;' + (n ? 'font-weight:700;' : 'opacity:0.5;');
        s.textContent = n + ' ' + label;
        wrap.appendChild(s);
    }
    part(counts.done || 0, 'done', '#059669');
    part(counts.failed || 0, 'failed', '#dc2626');
    part(counts.replaced || 0, 'replaced', '#6b7280');
    if (counts.retried) part(counts.retried, 'retried', '#d97706');
    return wrap;
}

// Currently-selected task from the sidebar. Declared at module scope so
// helpers (scroll-to-row, the task-detail body builders) can reference it
// without re-threading the task entry through each call site.
var probeSelectedTask = null;

// === Task-detail sidebar helpers ===

function probeExitCodeLabel(exitCode) {
    // Short interpretation for the exit-code line in the sidebar header.
    // Matches POSIX conventions used elsewhere in the codebase: 0 = ok,
    // 124 = GNU timeout, negative = signaled (|N| is the signal number —
    // e.g. -9 is SIGKILL). Anything else is ``error``.
    if (exitCode == null) return '(none)';
    if (exitCode === 0) return 'ok';
    if (exitCode === 124) return 'timeout';
    if (exitCode < 0) return 'signal (' + exitCode + ')';
    return 'error';
}

function probeMakeScrollablePreBlock(title, content, opts) {
    // Card-style block for long textual fields (stdin/stdout/stderr/result
    // JSON). Content is always written via ``textContent`` — NEVER innerHTML
    // — because probe input can contain arbitrary bytes (null chars, ANSI
    // escapes, etc.) that must not be parsed as HTML. See the XSS notes in
    // the plan's "Critical" section.
    opts = opts || {};
    var wrap = document.createElement('div');
    wrap.className = 'mb-3 rounded border border-cream-200';
    wrap.style.background = '#fff';

    var head = document.createElement('div');
    head.className = 'px-3 py-2 border-b border-cream-200 flex items-center gap-2';
    head.style.background = '#f5f3ee';
    var h = document.createElement('h4');
    h.className = 'font-semibold text-ink-800 text-xs';
    h.textContent = title;
    head.appendChild(h);

    var count = document.createElement('span');
    count.className = 'text-xs text-gray-500 font-mono';
    var contentStr = content == null ? '' : String(content);
    count.textContent = '(' + contentStr.length + ' chars)';
    head.appendChild(count);

    // Copy button — uses navigator.clipboard so the raw bytes (including
    // control chars) are preserved. Falls back silently on older browsers.
    if (contentStr.length > 0) {
        var copyBtn = document.createElement('button');
        copyBtn.className = 'ml-auto px-2 py-0.5 rounded text-xs border border-cream-300 hover:bg-cream-100 text-ink-700';
        copyBtn.textContent = 'Copy';
        copyBtn.onclick = function(ev) {
            ev.stopPropagation();
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(contentStr).then(function() {
                    copyBtn.textContent = 'Copied';
                    setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1200);
                }).catch(function() {
                    copyBtn.textContent = 'Failed';
                    setTimeout(function() { copyBtn.textContent = 'Copy'; }, 1200);
                });
            }
        };
        head.appendChild(copyBtn);
    }
    wrap.appendChild(head);

    if (!contentStr && opts.emptyLabel) {
        var empty = document.createElement('div');
        empty.className = 'p-3 text-xs italic text-gray-400';
        empty.textContent = opts.emptyLabel;
        wrap.appendChild(empty);
    } else {
        var pre = document.createElement('pre');
        pre.className = 'p-3 overflow-auto whitespace-pre-wrap font-mono text-xs max-h-96';
        // Default light background; caller can override (e.g. stderr red tint).
        pre.style.background = opts.bgClass ? '' : '#fafaf7';
        if (opts.bgClass) pre.classList.add(opts.bgClass);
        // textContent only — never innerHTML. Preserves raw bytes safely.
        pre.textContent = contentStr;
        wrap.appendChild(pre);
    }
    return wrap;
}

function probeMakeSidebarLinkToTask(labelPrefix, targetTaskId) {
    // Link that scrolls the row with data-task-id=targetTaskId into view.
    // Used for parent_task_id / retry_of / replacement_for cross-refs.
    var a = document.createElement('a');
    a.href = 'javascript:void(0)';
    a.className = 'text-xs text-teal-600 hover:underline font-mono';
    a.textContent = labelPrefix + ' ' + probeShortTaskId(targetTaskId);
    a.title = labelPrefix + ' ' + targetTaskId;
    a.onclick = function(ev) {
        ev.stopPropagation();
        // Walk all task rows and match by dataset equality rather than
        // interpolating ``targetTaskId`` into a CSS selector string —
        // this avoids needing to escape quotes/backslashes that could
        // appear in a user-crafted task_id.
        var rows = document.querySelectorAll('tr[data-task-id]');
        var row = null;
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].dataset.taskId === targetTaskId) { row = rows[i]; break; }
        }
        if (row && row.scrollIntoView) {
            row.scrollIntoView({behavior: 'smooth', block: 'center'});
            // Brief highlight so the eye can find the jumped-to row.
            var orig = row.style.background;
            row.style.background = '#fef3c7';
            setTimeout(function() { row.style.background = orig; }, 1200);
        }
    };
    return a;
}

function openTaskSidebar(taskEntry) {
    probeSelectedTask = taskEntry;
    var panel = document.getElementById('probe-task-sidebar');
    var content = document.getElementById('probe-task-sidebar-content');
    if (!panel || !content) return;
    content.replaceChildren();

    // --- Header row: close button + title + precomputed badge ---
    var headerRow = document.createElement('div');
    headerRow.className = 'flex items-center justify-between mb-3 pb-2 border-b border-cream-200';

    var titleWrap = document.createElement('div');
    titleWrap.className = 'flex items-center gap-2';
    var title = document.createElement('h3');
    title.className = 'font-semibold text-ink-800 text-sm font-mono';
    title.textContent = probeShortTaskId(taskEntry.task_id);
    title.title = taskEntry.task_id || '';
    titleWrap.appendChild(title);

    if (taskEntry.precomputed) {
        var precompBadge = document.createElement('span');
        precompBadge.className = 'px-2 py-0.5 rounded text-xs';
        precompBadge.style.cssText = 'background:#d1fae5;color:#065f46;font-weight:600;';
        precompBadge.textContent = 'precomp';
        titleWrap.appendChild(precompBadge);
    }

    // Status badge — colored matching the table.
    if (taskEntry.status) {
        var statusBadge = document.createElement('span');
        statusBadge.className = 'px-2 py-0.5 rounded text-xs font-semibold';
        statusBadge.style.cssText = 'background:#f5f3ee;color:' + probeStatusColor(taskEntry.status) + ';';
        statusBadge.textContent = taskEntry.status;
        titleWrap.appendChild(statusBadge);
    }
    headerRow.appendChild(titleWrap);

    var closeBtn = document.createElement('button');
    closeBtn.className = 'text-gray-400 hover:text-ink-800 text-xl leading-none';
    closeBtn.setAttribute('aria-label', 'Close');
    // Unicode multiplication sign; textContent avoids any HTML parsing.
    closeBtn.textContent = '×';
    closeBtn.onclick = function(ev) { ev.stopPropagation(); closeTaskSidebar(); };
    headerRow.appendChild(closeBtn);
    content.appendChild(headerRow);

    // --- Cross-reference links (parent / retry / replacement) ---
    if (taskEntry.parent_task_id || taskEntry.retry_of || taskEntry.replacement_for) {
        var linkRow = document.createElement('div');
        linkRow.className = 'mb-3 flex flex-wrap gap-3';
        if (taskEntry.parent_task_id) {
            linkRow.appendChild(probeMakeSidebarLinkToTask('parent:', taskEntry.parent_task_id));
        }
        if (taskEntry.retry_of) {
            linkRow.appendChild(probeMakeSidebarLinkToTask('retry of:', taskEntry.retry_of));
        }
        if (taskEntry.replacement_for) {
            linkRow.appendChild(probeMakeSidebarLinkToTask('replacement for:', taskEntry.replacement_for));
        }
        content.appendChild(linkRow);
    }

    // --- Metadata card (labels, source_offsets, exit code) ---
    var metaCard = document.createElement('div');
    metaCard.className = 'mb-3 p-3 rounded border border-cream-200';
    metaCard.style.background = '#f9f8f5';
    var metaGrid = document.createElement('div');
    metaGrid.className = 'grid grid-cols-[8rem_1fr] gap-x-3 gap-y-1 text-xs';

    function metaRow(label, valNode) {
        var l = document.createElement('div');
        l.className = 'text-gray-500 uppercase tracking-wide';
        l.textContent = label;
        var v = document.createElement('div');
        v.className = 'font-mono text-ink-800';
        if (typeof valNode === 'string' || typeof valNode === 'number') {
            v.textContent = String(valNode);
        } else if (valNode instanceof Node) {
            v.appendChild(valNode);
        }
        metaGrid.appendChild(l);
        metaGrid.appendChild(v);
    }

    // task_id full — copy-friendly.
    metaRow('task_id', taskEntry.task_id || '-');

    // labels as inline k=v list.
    var labels = taskEntry.labels || {};
    var labelKeys = Object.keys(labels);
    if (labelKeys.length === 0) {
        var noneLbl = document.createElement('span');
        noneLbl.style.color = '#9ca3af';
        noneLbl.textContent = '(none)';
        metaRow('labels', noneLbl);
    } else {
        metaRow('labels', labelKeys.map(function(k) { return k + '=' + labels[k]; }).join(' '));
    }

    // source_offsets — inline list; partition comes from the probe input
    // (ProbeTaskEntry doesn't carry a per-task partition).
    var offsets = taskEntry.source_offsets || [];
    if (offsets.length === 0) {
        var noneOff = document.createElement('span');
        noneOff.style.color = '#9ca3af';
        noneOff.textContent = '(none)';
        metaRow('source_offsets', noneOff);
    } else {
        var offsetsWrap = document.createElement('span');
        offsetsWrap.className = 'inline-flex flex-wrap items-center gap-2';
        offsets.forEach(function(off, i) {
            if (i > 0) {
                var sep = document.createElement('span');
                sep.className = 'text-gray-400';
                sep.textContent = ',';
                offsetsWrap.appendChild(sep);
            }
            var n = document.createElement('span');
            n.textContent = String(off);
            offsetsWrap.appendChild(n);
        });
        metaRow('source_offsets', offsetsWrap);
    }

    // exit code + short interpretation.
    var exitVal = document.createElement('span');
    if (taskEntry.exit_code == null) {
        exitVal.textContent = '(none)';
        exitVal.style.color = '#9ca3af';
    } else {
        exitVal.textContent = String(taskEntry.exit_code) + '  (' + probeExitCodeLabel(taskEntry.exit_code) + ')';
        exitVal.style.color = taskEntry.exit_code === 0 ? '#059669' : '#dc2626';
    }
    metaRow('exit_code', exitVal);

    metaCard.appendChild(metaGrid);
    content.appendChild(metaCard);

    // --- Duration breakdown card ---
    var durCard = document.createElement('div');
    durCard.className = 'mb-3 p-3 rounded border border-cream-200';
    durCard.style.background = '#f9f8f5';
    var durHead = document.createElement('div');
    durHead.className = 'text-xs text-gray-500 uppercase tracking-wide mb-1';
    durHead.textContent = 'duration';
    durCard.appendChild(durHead);
    var durBody = document.createElement('div');
    durBody.className = 'text-xs font-mono text-ink-800';
    function durLine(label, sec) {
        var line = document.createElement('div');
        line.className = 'flex gap-3';
        var l = document.createElement('span');
        l.className = 'text-gray-500';
        l.style.minWidth = '10rem';
        l.textContent = label;
        var v = document.createElement('span');
        v.textContent = probeDurSec(sec);
        v.style.color = probeDurColor(sec);
        line.append(l, v);
        durBody.appendChild(line);
    }
    durLine('subprocess', taskEntry.duration_seconds);
    durLine('on_task_complete', taskEntry.on_task_complete_duration);
    durCard.appendChild(durBody);
    content.appendChild(durCard);

    // --- stdin / stdout / stderr — scrollable pre blocks, raw text only ---
    content.appendChild(probeMakeScrollablePreBlock('stdin', taskEntry.stdin, {emptyLabel: '(empty)'}));
    content.appendChild(probeMakeScrollablePreBlock('stdout', taskEntry.stdout, {emptyLabel: '(empty)'}));
    // stderr gets a red-tinted background when non-empty; when empty we
    // surface the neutral ``(empty)`` label to keep the layout consistent.
    var stderrBlock;
    if (taskEntry.stderr) {
        stderrBlock = probeMakeScrollablePreBlock('stderr', taskEntry.stderr, {emptyLabel: '(empty)'});
        // Paint the last child (the <pre>) with the red tint.
        var pre = stderrBlock.querySelector('pre');
        if (pre) {
            pre.style.background = '#fef2f2';
            pre.style.color = '#991b1b';
        }
    } else {
        stderrBlock = probeMakeScrollablePreBlock('stderr', '', {emptyLabel: '(empty)'});
    }
    content.appendChild(stderrBlock);

    // --- subprocess exception (if any) ---
    if (taskEntry.subprocess_exception) {
        var excBlock = probeMakeScrollablePreBlock('subprocess exception', taskEntry.subprocess_exception, {});
        content.appendChild(excBlock);
    }

    // --- on_task_complete result (pretty JSON) ---
    var resultJson = '';
    if (taskEntry.on_task_complete_result != null) {
        try { resultJson = JSON.stringify(taskEntry.on_task_complete_result, null, 2); }
        catch (e) { resultJson = String(taskEntry.on_task_complete_result); }
    }
    content.appendChild(probeMakeScrollablePreBlock('on_task_complete result', resultJson, {emptyLabel: '(no result)'}));

    // --- on_task_complete error (red banner with traceback) ---
    if (taskEntry.on_task_complete_error) {
        var errBanner = document.createElement('div');
        errBanner.className = 'mb-3 p-3 rounded border border-red-300 text-xs text-red-700';
        errBanner.style.background = '#fef2f2';
        var errTitle = document.createElement('div');
        errTitle.className = 'font-semibold mb-2';
        errTitle.textContent = 'on_task_complete raised';
        errBanner.appendChild(errTitle);
        var errPre = document.createElement('pre');
        errPre.className = 'text-xs font-mono whitespace-pre-wrap';
        errPre.style.cssText = 'max-height:240px;overflow-y:auto;background:#fff;padding:8px;border-radius:4px;color:#7f1d1d;';
        errPre.textContent = taskEntry.on_task_complete_error;
        errBanner.appendChild(errPre);
        content.appendChild(errBanner);
    }

    // Slide panel into view.
    panel.classList.remove('translate-x-full');
    panel.classList.add('translate-x-0');
}

function closeTaskSidebar() {
    probeSelectedTask = null;
    var panel = document.getElementById('probe-task-sidebar');
    if (!panel) return;
    panel.classList.add('translate-x-full');
    panel.classList.remove('translate-x-0');
}

// Click-outside-to-close. We only react when the click lands inside the
// probe tab panel but outside the sidebar itself — clicks elsewhere on the
// page (e.g. switching tabs) don't immediately close the sidebar, matching
// the Arrange sidebar pattern in live.html.
document.addEventListener('click', function(ev) {
    var panel = document.getElementById('probe-task-sidebar');
    if (!panel) return;
    if (panel.classList.contains('translate-x-full')) return;  // already closed
    if (panel.contains(ev.target)) return;  // click inside sidebar
    var probePanel = document.querySelector('[data-tab-panel="probe"]');
    if (!probePanel || !probePanel.contains(ev.target)) return;  // outside tab scope
    closeTaskSidebar();
});

// ESC closes the sidebar. The row onclick's stopPropagation covers the
// open path; keydown runs at the document level so it works regardless of
// focus (the sidebar is a dialog, not an input).
document.addEventListener('keydown', function(ev) {
    if (ev.key !== 'Escape') return;
    var panel = document.getElementById('probe-task-sidebar');
    if (!panel) return;
    if (!panel.classList.contains('translate-x-full')) closeTaskSidebar();
});

// === Message Probe — Section A: Input & deserialization ===
function renderProbeSectionInput(report) {
    var card = probeMakeCard('Input');
    card.card.id = 'probe-section-input';
    var input = report.input || {};

    // Deserialize errors take the entire card — downstream fields are not
    // useful when the payload couldn't be parsed at all.
    if (report.deserialize_error) {
        card.body.appendChild(probeMakeErrorBanner(report.deserialize_error));
        return card.card;
    }

    // Partition:offset line with optional Kafka-UI icon.
    var posWrap = document.createElement('span');
    posWrap.className = 'inline-flex items-center';
    var posText = document.createElement('span');
    posText.textContent = 'P' + input.partition + ':' + input.offset;
    posWrap.appendChild(posText);
    var kIcon = makeKafkaUiIcon(input.topic || KAFKA_SOURCE_TOPIC, input.partition, input.offset);
    if (kIcon) posWrap.appendChild(kIcon);
    card.body.appendChild(probeMakeField('partition:offset', posWrap));

    card.body.appendChild(probeMakeField('topic', input.topic || '(none)'));
    card.body.appendChild(probeMakeField('key', input.key == null || input.key === '' ? '(none)' : input.key));

    // Timestamp echoed back as ISO-8601 for readability.
    var tsText = '-';
    if (input.timestamp) {
        try { tsText = new Date(input.timestamp).toISOString(); }
        catch (e) { tsText = String(input.timestamp); }
    }
    card.body.appendChild(probeMakeField('timestamp', tsText));

    // Value preview — first 600 chars, scrollable <pre>.
    var valuePre = document.createElement('pre');
    valuePre.className = 'text-xs font-mono whitespace-pre-wrap bg-cream-100 p-2 rounded';
    valuePre.style.cssText = 'max-height:120px;overflow-y:auto;';
    var valueStr = input.value == null ? '' : String(input.value);
    valuePre.textContent = valueStr.length > 600 ? valueStr.slice(0, 600) + '...' : valueStr;
    card.body.appendChild(probeMakeField('value (preview)', valuePre));

    card.body.appendChild(probeMakeField('message_label', report.message_label == null ? '(none)' : report.message_label));

    // Parsed payload as pretty JSON in a scrollable <pre>.
    var payloadPre = document.createElement('pre');
    payloadPre.className = 'text-xs font-mono whitespace-pre-wrap bg-cream-100 p-2 rounded';
    payloadPre.style.cssText = 'max-height:240px;overflow-y:auto;';
    if (report.parsed_payload == null) {
        payloadPre.textContent = '(no parsed payload)';
        payloadPre.style.color = '#6b7280';
    } else {
        try { payloadPre.textContent = JSON.stringify(report.parsed_payload, null, 2); }
        catch (e) { payloadPre.textContent = String(report.parsed_payload); }
    }
    card.body.appendChild(probeMakeField('parsed_payload', payloadPre));

    return card.card;
}

// === Message Probe — Section B: Arrange ===
function renderProbeSectionArrange(report) {
    var card = probeMakeCard('Arrange');
    card.card.id = 'probe-section-arrange';
    var arrange = report.arrange || {};
    var tasks = report.tasks || [];

    if (arrange.error) {
        // Short summary first, then full traceback from the errors[] panel.
        var summary = document.createElement('div');
        summary.className = 'text-xs text-red-700 mb-2';
        summary.textContent = 'arrange raised: ' + arrange.error;
        card.body.appendChild(summary);
        // Find the full traceback in errors[] if present.
        var arrangeErr = (report.errors || []).filter(function(e) { return e.stage === 'arrange'; })[0];
        if (arrangeErr) card.body.appendChild(probeMakeErrorBanner(arrangeErr));
        return card.card;
    }

    var durMs = arrange.duration_seconds != null ? (arrange.duration_seconds * 1000).toFixed(1) + ' ms' : '-';
    var summaryLine = document.createElement('div');
    summaryLine.className = 'text-sm text-ink-800';
    summaryLine.textContent = tasks.length + ' task' + (tasks.length === 1 ? '' : 's') + ' generated · duration ' + durMs;
    card.body.appendChild(summaryLine);

    // Neutral note when arrange returned no tasks (message is effectively skipped).
    if (tasks.length === 0) {
        var note = document.createElement('div');
        note.className = 'mt-2 text-xs text-gray-500 italic';
        note.textContent = 'arrange returned no tasks — message would be skipped';
        card.body.appendChild(note);
    }
    return card.card;
}

// === Message Probe — Section C: Tasks table ===
function renderProbeSectionTasks(report) {
    var card = probeMakeCard('Tasks');
    card.card.id = 'probe-section-tasks';
    var tasks = report.tasks || [];

    // Count badge + status counts in the card header (next to the title).
    var countBadge = document.createElement('span');
    countBadge.className = 'px-2 py-0.5 rounded text-xs';
    countBadge.style.cssText = 'background:#e0f2fe;color:#1e40af;font-weight:600;';
    countBadge.textContent = tasks.length + ' task' + (tasks.length === 1 ? '' : 's');
    card.head.appendChild(countBadge);

    // Aggregate status counts across the task list.
    var counts = {done: 0, failed: 0, replaced: 0, retried: 0};
    for (var i = 0; i < tasks.length; i++) {
        var st = tasks[i].status;
        if (counts[st] != null) counts[st]++;
        // "retried" is inferred — a row with retry_of set signals a retry.
        if (tasks[i].retry_of) counts.retried++;
    }
    card.head.appendChild(probeMakeStatusCounts(counts));

    if (tasks.length === 0) {
        var empty = document.createElement('div');
        empty.className = 'text-xs text-gray-500 italic';
        empty.textContent = 'No tasks to render';
        card.body.appendChild(empty);
        return card.card;
    }

    var table = document.createElement('table');
    table.className = 'w-full text-sm';
    var thead = document.createElement('thead');
    var headTr = document.createElement('tr');
    headTr.className = 'text-left text-gray-400 text-xs border-b border-cream-200';
    var cols = ['#', 'task_id', 'labels', 'status', 'exit', 'precomputed', 'duration', 'stdout', 'stderr'];
    cols.forEach(function(c) {
        var th = document.createElement('th');
        th.className = 'py-2 px-3';
        th.textContent = c;
        headTr.appendChild(th);
    });
    thead.appendChild(headTr);
    table.appendChild(thead);

    var tbody = document.createElement('tbody');
    tasks.forEach(function(t, idx) {
        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-50 hover:bg-cream-50 cursor-pointer';
        // data-task-id lets the sidebar's parent/retry/replacement links
        // scroll the corresponding row back into view via querySelector.
        if (t.task_id) tr.setAttribute('data-task-id', t.task_id);
        (function(entry) {
            // ev.stopPropagation() prevents the document-level click listener
            // (used by the sidebar's close-on-outside pattern) from closing
            // the freshly opened sidebar — see feedback/dom_orphaned_target.
            tr.onclick = function(ev) { ev.stopPropagation(); openTaskSidebar(entry); };
        })(t);

        // # (1-based row index)
        var td0 = document.createElement('td');
        td0.className = 'py-2 px-3 text-xs text-gray-500 font-mono';
        td0.textContent = String(idx + 1);
        tr.appendChild(td0);

        // task_id — shortened with full id in tooltip.
        var td1 = document.createElement('td');
        td1.className = 'py-2 px-3 font-mono text-xs';
        td1.textContent = probeShortTaskId(t.task_id);
        td1.title = t.task_id || '';
        tr.appendChild(td1);

        // labels — compact ``k=v`` list.
        var td2 = document.createElement('td');
        td2.className = 'py-2 px-3 font-mono text-xs text-gray-600';
        var labelKeys = t.labels ? Object.keys(t.labels) : [];
        if (labelKeys.length === 0) {
            td2.textContent = '(none)';
            td2.style.color = '#9ca3af';
        } else {
            td2.textContent = labelKeys.map(function(k) { return k + '=' + t.labels[k]; }).join(' ');
        }
        tr.appendChild(td2);

        // status — colored, bold.
        var td3 = document.createElement('td');
        td3.className = 'py-2 px-3 text-xs font-semibold';
        td3.style.color = probeStatusColor(t.status);
        td3.textContent = t.status || '-';
        tr.appendChild(td3);

        // exit — red when nonzero.
        var td4 = document.createElement('td');
        td4.className = 'py-2 px-3 font-mono text-xs';
        if (t.exit_code == null) {
            td4.textContent = '-';
            td4.style.color = '#9ca3af';
        } else {
            td4.textContent = String(t.exit_code);
            td4.style.color = t.exit_code === 0 ? '#059669' : '#dc2626';
        }
        tr.appendChild(td4);

        // precomputed badge.
        var td5 = document.createElement('td');
        td5.className = 'py-2 px-3 text-xs';
        if (t.precomputed) {
            var badge = document.createElement('span');
            badge.className = 'px-2 py-0.5 rounded text-xs';
            badge.style.cssText = 'background:#d1fae5;color:#065f46;font-weight:600;';
            badge.textContent = 'precomp';
            td5.appendChild(badge);
        }
        tr.appendChild(td5);

        // duration.
        var td6 = document.createElement('td');
        td6.className = 'py-2 px-3 font-mono text-xs';
        td6.textContent = probeDurSec(t.duration_seconds);
        td6.style.color = probeDurColor(t.duration_seconds);
        tr.appendChild(td6);

        // stdout preview — italic gray when empty.
        var td7 = document.createElement('td');
        td7.className = 'py-2 px-3 font-mono text-xs';
        td7.style.maxWidth = '18rem';
        td7.style.overflow = 'hidden';
        td7.style.textOverflow = 'ellipsis';
        td7.style.whiteSpace = 'nowrap';
        if (!t.stdout) {
            td7.textContent = '(empty)';
            td7.style.fontStyle = 'italic';
            td7.style.color = '#9ca3af';
        } else {
            td7.textContent = probePreviewText(t.stdout, 120);
            td7.title = t.stdout.length > 120 ? t.stdout.slice(0, 500) : t.stdout;
        }
        tr.appendChild(td7);

        // stderr preview — red-tinted background when non-empty.
        var td8 = document.createElement('td');
        td8.className = 'py-2 px-3 font-mono text-xs';
        td8.style.maxWidth = '18rem';
        td8.style.overflow = 'hidden';
        td8.style.textOverflow = 'ellipsis';
        td8.style.whiteSpace = 'nowrap';
        if (!t.stderr) {
            td8.textContent = '(empty)';
            td8.style.fontStyle = 'italic';
            td8.style.color = '#9ca3af';
        } else {
            td8.textContent = probePreviewText(t.stderr, 120);
            td8.title = t.stderr.length > 120 ? t.stderr.slice(0, 500) : t.stderr;
            td8.style.background = '#fef2f2';
            td8.style.color = '#991b1b';
        }
        tr.appendChild(td8);

        tbody.appendChild(tr);
    });
    table.appendChild(tbody);
    card.body.appendChild(table);
    return card.card;
}

// === Message Probe — Sections D/E: on_message_complete / on_window_complete ===

function probeCountSinkRecordsByType(collectResult) {
    // Walks a CollectResult (pydantic dump: {kafka: [...], postgres: [...],
    // mongo: [...], http: [...], redis: [...], files: [...]}) and returns
    // a map {kafka: N, mongo: N, ...} including only sink types that have
    // at least one payload. Used by the inline summary on sections D/E so
    // the operator sees "kafka: 3 · mongo: 1" without drilling into the JSON.
    if (!collectResult) return {};
    var out = {};
    var types = ['kafka', 'postgres', 'mongo', 'http', 'redis', 'files'];
    for (var i = 0; i < types.length; i++) {
        var list = collectResult[types[i]];
        if (list && list.length) out[types[i]] = list.length;
    }
    return out;
}

function probeMakeSinkSummaryLine(counts) {
    // Renders "kafka: 3 · mongo: 1" as a single text node; empty map →
    // "no sink records". Colored neutrally (same weight as other meta lines).
    var keys = Object.keys(counts);
    if (keys.length === 0) return 'no sink records';
    keys.sort();
    return keys.map(function(k) { return k + ': ' + counts[k]; }).join(' · ');
}

function probeMakeStatusDot(isError) {
    // Small inline dot: green = success, red = error. Uses a span with
    // fixed size + border-radius so CSS-disabled printers still render it.
    var dot = document.createElement('span');
    dot.className = 'inline-block rounded-full';
    dot.style.cssText = 'width:8px;height:8px;margin-right:6px;vertical-align:middle;background:' + (isError ? '#dc2626' : '#059669') + ';';
    return dot;
}

function probeRenderHookResultCard(title, cardId, stageResult, errors, fallbackNote) {
    // Shared shape for sections D (on_message_complete) and E
    // (on_window_complete). Both stages have identical rendering — a
    // one-line summary, optional error banner, optional sink-count line,
    // and the pretty-printed CollectResult JSON.
    //
    // - ``stageResult``: the ProbeStageResult dict from the report, or null
    //   when the stage did not run (e.g. upstream failure).
    // - ``errors``: report.errors[] — scanned for a matching traceback when
    //   ``stageResult.error`` is set.
    // - ``fallbackNote``: gray note shown when stageResult is null (stage
    //   did not run).
    var card = probeMakeCard(title);
    card.card.id = cardId;

    if (!stageResult) {
        var note = document.createElement('div');
        note.className = 'text-xs text-gray-500 italic';
        note.textContent = fallbackNote;
        card.body.appendChild(note);
        return card.card;
    }

    // Summary line: status dot + duration + sink-record-by-type count.
    var summaryLine = document.createElement('div');
    summaryLine.className = 'text-xs text-ink-800 mb-2 flex items-center gap-2';
    summaryLine.appendChild(probeMakeStatusDot(!!stageResult.error));
    var durSpan = document.createElement('span');
    durSpan.className = 'font-mono';
    durSpan.textContent = 'duration ' + probeDurSec(stageResult.duration_seconds);
    durSpan.style.color = probeDurColor(stageResult.duration_seconds);
    summaryLine.appendChild(durSpan);

    var sep = document.createElement('span');
    sep.className = 'text-gray-400';
    sep.textContent = '·';
    summaryLine.appendChild(sep);

    var countsText = document.createElement('span');
    countsText.className = 'text-gray-600 font-mono';
    countsText.textContent = probeMakeSinkSummaryLine(probeCountSinkRecordsByType(stageResult.collect_result));
    summaryLine.appendChild(countsText);
    card.body.appendChild(summaryLine);

    // Error banner — one-line error + full traceback from the errors[] list
    // so the operator gets the same info that section I will show.
    if (stageResult.error) {
        // Match the stage identifier used by the runner. Card ids are
        // kebab-case suffixes of ``probe-section-``; the runner's stage
        // tags are snake_case and prefixed ``on_`` for hook stages. The
        // card ids for hook stages intentionally OMIT the ``on_`` prefix
        // for brevity, so we add it back here for the lookup.
        var stageKey = cardId.replace('probe-section-', '').replace(/-/g, '_');
        if (stageKey === 'message_complete' || stageKey === 'window_complete') {
            stageKey = 'on_' + stageKey;
        }
        var match = (errors || []).filter(function(e) { return e.stage === stageKey; })[0];
        if (match) {
            card.body.appendChild(probeMakeErrorBanner(match));
        } else {
            // Fall back to a short banner when the full traceback isn't in
            // errors[] for some reason (shouldn't happen, but defensive).
            var shortBanner = document.createElement('div');
            shortBanner.className = 'p-3 rounded border border-red-300 text-xs text-red-700 mb-2';
            shortBanner.style.background = '#fef2f2';
            shortBanner.textContent = stageResult.error;
            card.body.appendChild(shortBanner);
        }
    }

    // Full CollectResult JSON — scrollable pre block so large results
    // don't blow out the page. Displays ``(no result)`` when the hook
    // returned None.
    var crJson = '';
    if (stageResult.collect_result != null) {
        try { crJson = JSON.stringify(stageResult.collect_result, null, 2); }
        catch (e) { crJson = String(stageResult.collect_result); }
    }
    card.body.appendChild(probeMakeScrollablePreBlock('CollectResult', crJson, {emptyLabel: '(no result)'}));

    return card.card;
}

function renderProbeSectionOnMessageComplete(report) {
    // Section D — on_message_complete card.
    return probeRenderHookResultCard(
        'on_message_complete',
        'probe-section-message-complete',
        report.on_message_complete,
        report.errors,
        'on_message_complete did not run (previous stage failed)'
    );
}

function renderProbeSectionOnWindowComplete(report) {
    // Section E — on_window_complete card. Same shape as D.
    return probeRenderHookResultCard(
        'on_window_complete',
        'probe-section-window-complete',
        report.on_window_complete,
        report.errors,
        'on_window_complete did not run (previous stage failed)'
    );
}

// === Message Probe — Section F: Planned sink outputs ===

function probeGroupPlannedSinksByType(planned) {
    // Groups PlannedSinkRecord entries by ``sink_type`` preserving first-seen
    // order. Returns an array of {sink_type, records} objects so the caller
    // can iterate with a stable ordering (insertion order in the JSON).
    var order = [];
    var groups = {};
    for (var i = 0; i < planned.length; i++) {
        var rec = planned[i];
        if (!(rec.sink_type in groups)) {
            groups[rec.sink_type] = [];
            order.push(rec.sink_type);
        }
        groups[rec.sink_type].push(rec);
    }
    order.sort();  // alphabetical for stable display
    return order.map(function(st) { return {sink_type: st, records: groups[st]}; });
}

function probePayloadPreview(payload) {
    // 200-char single-line preview of a payload. JSON.stringify so dicts
    // render readably; newlines collapsed to spaces. The cell also has
    // ``max-width: 48rem`` + CSS ellipsis on top, so the visible width
    // is what the column can accommodate; the longer cap here means
    // hover-tooltip + click-to-expand show meaningfully more content.
    if (payload == null) return '';
    var s;
    try { s = JSON.stringify(payload); }
    catch (e) { s = String(payload); }
    s = s.replace(/\s+/g, ' ');
    if (s.length > 200) s = s.slice(0, 200) + '...';
    return s;
}

function probeCapitalize(str) {
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function probeMakeSinkSubCard(sinkType, records) {
    // Renders one sub-section per sink type with a header (capitalized +
    // count badge) and a table of destination/origin_stage/payload preview.
    // Rows are clickable — a detail row below each summary toggles to show
    // the full payload JSON in a scrollable pre.
    var wrap = document.createElement('div');
    wrap.className = 'mb-4 rounded border border-cream-200';
    wrap.style.background = '#fff';

    var head = document.createElement('div');
    head.className = 'px-3 py-2 border-b border-cream-200 flex items-center gap-2';
    head.style.background = '#f5f3ee';
    var h = document.createElement('h4');
    h.className = 'font-semibold text-ink-800 text-xs';
    h.textContent = probeCapitalize(sinkType);
    head.appendChild(h);
    var countBadge = document.createElement('span');
    countBadge.className = 'px-2 py-0.5 rounded text-xs';
    countBadge.style.cssText = 'background:#e0f2fe;color:#1e40af;font-weight:600;';
    countBadge.textContent = records.length + ' record' + (records.length === 1 ? '' : 's');
    head.appendChild(countBadge);
    wrap.appendChild(head);

    var table = document.createElement('table');
    table.className = 'w-full text-sm';
    var thead = document.createElement('thead');
    var headTr = document.createElement('tr');
    headTr.className = 'text-left text-gray-400 text-xs border-b border-cream-200';
    ['destination', 'origin stage', 'payload preview'].forEach(function(c) {
        var th = document.createElement('th');
        th.className = 'py-2 px-3';
        th.textContent = c;
        headTr.appendChild(th);
    });
    thead.appendChild(headTr);
    table.appendChild(thead);

    var tbody = document.createElement('tbody');
    records.forEach(function(rec) {
        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-50 hover:bg-cream-50 cursor-pointer';

        // Detail row — initially hidden. Click on the summary row toggles it.
        var detailTr = document.createElement('tr');
        detailTr.className = 'probe-sink-detail-row';
        detailTr.style.display = 'none';
        var detailTd = document.createElement('td');
        detailTd.setAttribute('colspan', '3');
        detailTd.className = 'px-3 py-2';
        detailTd.style.background = '#fafaf7';

        // Full JSON payload in a scrollable pre (reuses existing helper).
        var payloadJson = '';
        if (rec.payload != null) {
            try { payloadJson = JSON.stringify(rec.payload, null, 2); }
            catch (e) { payloadJson = String(rec.payload); }
        }
        detailTd.appendChild(probeMakeScrollablePreBlock('payload', payloadJson, {emptyLabel: '(no payload)'}));

        // Extras — type-specific metadata (kafka key, sink instance, ttl).
        // Only shown when non-empty; kept compact as a single code line.
        if (rec.extras && Object.keys(rec.extras).length) {
            var extrasWrap = document.createElement('div');
            extrasWrap.className = 'mt-2 text-xs font-mono text-gray-600';
            var extrasLabel = document.createElement('span');
            extrasLabel.className = 'text-gray-500 uppercase tracking-wide mr-2';
            extrasLabel.textContent = 'extras';
            extrasWrap.appendChild(extrasLabel);
            var extrasVal = document.createElement('span');
            try { extrasVal.textContent = JSON.stringify(rec.extras); }
            catch (e) { extrasVal.textContent = String(rec.extras); }
            extrasWrap.appendChild(extrasVal);
            detailTd.appendChild(extrasWrap);
        }
        detailTr.appendChild(detailTd);

        // Summary row onclick — toggle the detail row display.
        tr.onclick = function(ev) {
            ev.stopPropagation();
            detailTr.style.display = detailTr.style.display === 'none' ? '' : 'none';
        };

        // destination cell + optional Kafka-UI icon for kafka sinks.
        var tdDest = document.createElement('td');
        tdDest.className = 'py-2 px-3 font-mono text-xs';
        tdDest.textContent = rec.destination || '-';
        if (sinkType === 'kafka') {
            // The runner resolves the Kafka sink instance name to its
            // configured topic and stores it in ``extras.topic`` (null
            // when the mapping is missing — sink not in config). Prefer
            // that for the UI deep-link so the operator opens the real
            // output topic rather than the sink instance name. Falls
            // back to destination when extras.topic is absent (which
            // usually means destination already IS the topic).
            var kafkaTopic = (rec.extras && rec.extras.topic) || rec.destination || KAFKA_SOURCE_TOPIC;
            var icon = makeKafkaUiIcon(kafkaTopic, 0, 0);
            if (icon) tdDest.appendChild(icon);
        }
        tr.appendChild(tdDest);

        var tdOrigin = document.createElement('td');
        tdOrigin.className = 'py-2 px-3 font-mono text-xs text-gray-600';
        tdOrigin.textContent = rec.origin_stage || '-';
        tr.appendChild(tdOrigin);

        var tdPreview = document.createElement('td');
        tdPreview.className = 'py-2 px-3 font-mono text-xs text-gray-600';
        tdPreview.style.maxWidth = '32rem';
        tdPreview.style.overflow = 'hidden';
        tdPreview.style.textOverflow = 'ellipsis';
        tdPreview.style.whiteSpace = 'nowrap';
        tdPreview.textContent = probePayloadPreview(rec.payload);
        tr.appendChild(tdPreview);

        tbody.appendChild(tr);
        tbody.appendChild(detailTr);
    });
    table.appendChild(tbody);
    wrap.appendChild(table);
    return wrap;
}

function renderProbeSectionSinks(report) {
    // Section F — Planned sink outputs. Shows what would have been written
    // to each sink type, grouped by type. ``probe-sink-detail-row`` siblings
    // toggle to reveal full payload JSON on row click.
    var card = probeMakeCard('Planned sink outputs');
    card.card.id = 'probe-section-sinks';

    var planned = report.planned_sink_payloads || [];

    // Total count badge next to the title — parallels the Tasks card style.
    var totalBadge = document.createElement('span');
    totalBadge.className = 'px-2 py-0.5 rounded text-xs';
    totalBadge.style.cssText = 'background:#e0f2fe;color:#1e40af;font-weight:600;';
    totalBadge.textContent = planned.length + ' record' + (planned.length === 1 ? '' : 's');
    card.head.appendChild(totalBadge);

    if (planned.length === 0) {
        var note = document.createElement('div');
        note.className = 'text-xs text-gray-500 italic';
        note.textContent = 'No sink records would have been produced';
        card.body.appendChild(note);
        return card.card;
    }

    var groups = probeGroupPlannedSinksByType(planned);
    for (var i = 0; i < groups.length; i++) {
        card.body.appendChild(probeMakeSinkSubCard(groups[i].sink_type, groups[i].records));
    }
    return card.card;
}

// === Message Probe — Section G: Cache calls ===

function probeCacheOutcomeColor(outcome) {
    // Colors for the outcome cell: green hit, grey miss, blue suppressed.
    if (outcome === 'hit') return '#059669';
    if (outcome === 'miss') return '#6b7280';
    if (outcome === 'suppressed') return '#1e40af';
    return '#6b7280';
}

function probeShortCacheKey(key) {
    // First 40 chars of a cache key; callers also attach the full key via
    // the cell's ``title`` attribute so the operator can hover to see it.
    if (!key) return '';
    return key.length > 80 ? key.slice(0, 80) + '...' : key;
}

function renderProbeSectionCacheCalls(report) {
    // Section G — Cache calls table. Every call made through the
    // DebugCacheProxy during the probe is listed, in order. Writes are
    // always ``suppressed`` (the proxy never touches the live cache). The
    // header summarises counts from ``cache_summary``.
    var card = probeMakeCard('Cache calls');
    card.card.id = 'probe-section-cache-calls';
    var calls = report.cache_calls || [];
    var summary = report.cache_summary || {};

    var summaryBadge = document.createElement('span');
    summaryBadge.className = 'px-2 py-0.5 rounded text-xs font-mono';
    summaryBadge.style.cssText = 'background:#e0f2fe;color:#1e40af;font-weight:600;';
    var parts = [
        (summary.calls || 0) + ' call' + ((summary.calls || 0) === 1 ? '' : 's'),
        (summary.hits || 0) + ' hit' + ((summary.hits || 0) === 1 ? '' : 's'),
        (summary.misses || 0) + ' miss' + ((summary.misses || 0) === 1 ? '' : 'es'),
        (summary.writes_suppressed || 0) + ' writes suppressed'
    ];
    summaryBadge.textContent = parts.join(' · ');  // middle-dot separator
    card.head.appendChild(summaryBadge);

    if (calls.length === 0) {
        var empty = document.createElement('div');
        empty.className = 'text-xs text-gray-500 italic';
        empty.textContent = 'No cache calls';
        card.body.appendChild(empty);
        return card.card;
    }

    var table = document.createElement('table');
    table.className = 'w-full text-sm';
    var thead = document.createElement('thead');
    var headTr = document.createElement('tr');
    headTr.className = 'text-left text-gray-400 text-xs border-b border-cream-200';
    ['ms from start', 'origin stage', 'op', 'key', 'scope', 'outcome', 'value preview'].forEach(function(c) {
        var th = document.createElement('th');
        th.className = 'py-2 px-3';
        th.textContent = c;
        headTr.appendChild(th);
    });
    thead.appendChild(headTr);
    table.appendChild(thead);

    var tbody = document.createElement('tbody');
    calls.forEach(function(call) {
        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-50 hover:bg-cream-50';

        var tdMs = document.createElement('td');
        tdMs.className = 'py-1.5 px-3 font-mono text-xs text-gray-600';
        tdMs.textContent = call.ms_since_start == null ? '-' : call.ms_since_start.toFixed(1);
        tr.appendChild(tdMs);

        var tdOrigin = document.createElement('td');
        tdOrigin.className = 'py-1.5 px-3 font-mono text-xs text-gray-600';
        tdOrigin.textContent = call.origin_stage || '-';
        tr.appendChild(tdOrigin);

        var tdOp = document.createElement('td');
        tdOp.className = 'py-1.5 px-3 font-mono text-xs';
        tdOp.textContent = call.op || '-';
        tr.appendChild(tdOp);

        // Full key exposed via the title attribute so hover reveals it; the
        // cell itself renders a short form to keep the row compact.
        var tdKey = document.createElement('td');
        tdKey.className = 'py-1.5 px-3 font-mono text-xs';
        tdKey.textContent = probeShortCacheKey(call.key);
        tdKey.title = call.key || '';
        tr.appendChild(tdKey);

        var tdScope = document.createElement('td');
        tdScope.className = 'py-1.5 px-3 font-mono text-xs text-gray-600';
        tdScope.textContent = call.scope || '-';
        tr.appendChild(tdScope);

        var tdOutcome = document.createElement('td');
        tdOutcome.className = 'py-1.5 px-3 font-mono text-xs font-semibold';
        tdOutcome.style.color = probeCacheOutcomeColor(call.outcome);
        tdOutcome.textContent = call.outcome || '-';
        tr.appendChild(tdOutcome);

        var tdPreview = document.createElement('td');
        tdPreview.className = 'py-1.5 px-3 font-mono text-xs text-gray-600';
        tdPreview.style.maxWidth = '48rem';
        tdPreview.style.overflow = 'hidden';
        tdPreview.style.textOverflow = 'ellipsis';
        tdPreview.style.whiteSpace = 'nowrap';
        tdPreview.textContent = call.value_preview == null ? '' : String(call.value_preview);
        tdPreview.title = call.value_preview == null ? '' : String(call.value_preview);
        tr.appendChild(tdPreview);

        tbody.appendChild(tr);
    });
    table.appendChild(tbody);
    card.body.appendChild(table);
    return card.card;
}

// === Message Probe — Section H: Timeline waterfall ===

function probeTimelineBarColor(kind, status) {
    // Color palette for the waterfall bars. ``kind`` is the row type;
    // ``status`` is only consulted for task rows (matches the Tasks table
    // colored statuses). Defaults keep the UI usable if unexpected values
    // show up in a partial report.
    if (kind === 'arrange') return '#3b82f6';
    if (kind === 'task') {
        if (status === 'failed') return '#dc2626';
        if (status === 'replaced') return '#6b7280';
        // "retried" is inferred via the retry_of field — surfaced as orange.
        if (status === 'retried') return '#f97316';
        return '#059669';  // done (default)
    }
    if (kind === 'message_complete') return '#8b5cf6';
    if (kind === 'window_complete') return '#ec4899';
    return '#6b7280';
}

function probeBuildTimelineSegments(report) {
    // Returns an ordered list of {label, kind, duration, status, targetId}
    // segments. Durations are in seconds. Missing fields are skipped so the
    // rendering stays faithful to actually-executed stages.
    var segs = [];
    var arrange = report.arrange || {};
    if (arrange.duration_seconds != null) {
        segs.push({
            label: 'arrange',
            kind: 'arrange',
            duration: arrange.duration_seconds,
            targetId: 'probe-section-arrange'
        });
    }
    var tasks = report.tasks || [];
    tasks.forEach(function(t) {
        // Sum subprocess + on_task_complete so the bar represents the whole
        // task-level time even for precomputed tasks (where subprocess
        // duration is 0 but the hook still ran).
        var d = 0;
        if (t.duration_seconds != null) d += t.duration_seconds;
        if (t.on_task_complete_duration != null) d += t.on_task_complete_duration;
        // retried status is inferred — same rule used by Section C header counts.
        var status = t.retry_of ? 'retried' : (t.status || 'done');
        segs.push({
            label: probeShortTaskId(t.task_id),
            kind: 'task',
            duration: d,
            status: status,
            taskId: t.task_id || '',
            targetId: 'probe-section-tasks'
        });
    });
    var mc = report.on_message_complete;
    if (mc && mc.duration_seconds != null) {
        segs.push({
            label: 'on_message_complete',
            kind: 'message_complete',
            duration: mc.duration_seconds,
            targetId: 'probe-section-message-complete'
        });
    }
    var wc = report.on_window_complete;
    if (wc && wc.duration_seconds != null) {
        segs.push({
            label: 'on_window_complete',
            kind: 'window_complete',
            duration: wc.duration_seconds,
            targetId: 'probe-section-window-complete'
        });
    }
    return segs;
}

function renderProbeSectionTimeline(report) {
    // Section H — horizontal stacked bars. Each bar's width is proportional
    // to the stage's duration / total-wallclock. A minimum width keeps very
    // short bars visible; labels elide inside narrow bars (full text stays
    // available via the ``title`` tooltip).
    var card = probeMakeCard('Timeline');
    card.card.id = 'probe-section-timeline';

    var timing = report.timing || {};
    var total = timing.total_wallclock;
    var segs = probeBuildTimelineSegments(report);

    var totalBadge = document.createElement('span');
    totalBadge.className = 'ml-auto font-mono text-xs text-gray-600';
    totalBadge.textContent = 'total ' + (total != null ? (total * 1000).toFixed(1) + ' ms' : '-');
    card.head.appendChild(totalBadge);

    if (segs.length === 0 || !total || total <= 0) {
        var empty = document.createElement('div');
        empty.className = 'text-xs text-gray-500 italic';
        empty.textContent = 'No timing data recorded';
        card.body.appendChild(empty);
        return card.card;
    }

    var barRow = document.createElement('div');
    barRow.className = 'flex w-full overflow-hidden rounded border border-cream-200';
    barRow.style.cssText = 'height:32px;background:#faf8f3;';

    segs.forEach(function(seg) {
        var pct = Math.max(2, (seg.duration / total) * 100);  // 2% floor so tiny bars show
        var bar = document.createElement('div');
        bar.className = 'flex items-center justify-center text-white text-xs font-mono cursor-pointer';
        bar.style.cssText = 'flex:0 0 auto;width:' + pct.toFixed(2) + '%;'
            + 'background:' + probeTimelineBarColor(seg.kind, seg.status) + ';'
            + 'border-right:1px solid rgba(0,0,0,0.06);overflow:hidden;white-space:nowrap;padding:0 4px;';
        bar.title = seg.label + ' — ' + probeDurSec(seg.duration);
        bar.textContent = seg.label + ' ' + probeDurSec(seg.duration);

        // Click a bar → scroll the related section into view. For tasks
        // we prefer to scroll the corresponding row so the row highlight
        // from ``probeMakeSidebarLinkToTask`` kicks in. We match by
        // dataset equality so arbitrary task_id values don't need to be
        // escaped into a CSS selector.
        bar.onclick = (function(s) {
            return function(ev) {
                ev.stopPropagation();
                var target = null;
                if (s.kind === 'task' && s.taskId) {
                    var rows = document.querySelectorAll('tr[data-task-id]');
                    for (var i = 0; i < rows.length; i++) {
                        if (rows[i].dataset.taskId === s.taskId) { target = rows[i]; break; }
                    }
                }
                if (!target) target = document.getElementById(s.targetId);
                if (target && target.scrollIntoView) {
                    target.scrollIntoView({behavior: 'smooth', block: 'center'});
                }
            };
        })(seg);

        barRow.appendChild(bar);
    });
    card.body.appendChild(barRow);

    // Legend row — keeps the color→stage mapping explicit without cluttering
    // the bar labels. Only entries that actually appear in the timeline are
    // rendered so a task-only probe doesn't show a window_complete legend.
    var legend = document.createElement('div');
    legend.className = 'mt-3 flex flex-wrap gap-3 text-xs text-gray-600';
    var kindsSeen = {};
    segs.forEach(function(s) { kindsSeen[s.kind] = true; });
    var legendEntries = [
        {kind: 'arrange', label: 'arrange'},
        {kind: 'task', label: 'task'},
        {kind: 'message_complete', label: 'on_message_complete'},
        {kind: 'window_complete', label: 'on_window_complete'}
    ];
    legendEntries.forEach(function(e) {
        if (!kindsSeen[e.kind]) return;
        var item = document.createElement('span');
        item.className = 'inline-flex items-center gap-1';
        var swatch = document.createElement('span');
        swatch.style.cssText = 'display:inline-block;width:10px;height:10px;border-radius:2px;'
            + 'background:' + probeTimelineBarColor(e.kind);
        item.appendChild(swatch);
        var lbl = document.createElement('span');
        lbl.textContent = e.label;
        item.appendChild(lbl);
        legend.appendChild(item);
    });
    card.body.appendChild(legend);

    return card.card;
}

// === Message Probe — Section I: Errors panel ===

function renderProbeSectionErrors(report) {
    // Section I — aggregated error list with collapsible tracebacks. Returns
    // null when ``report.errors`` is empty so ``renderProbeReport`` can skip
    // the section entirely without rendering an empty card.
    var errors = report.errors || [];
    if (errors.length === 0) return null;

    var card = probeMakeCard('Errors');
    card.card.id = 'probe-section-errors';

    var badge = document.createElement('span');
    badge.className = 'px-2 py-0.5 rounded text-xs';
    badge.style.cssText = 'background:#fee2e2;color:#991b1b;font-weight:600;';
    badge.textContent = errors.length + ' error' + (errors.length === 1 ? '' : 's');
    card.head.appendChild(badge);

    errors.forEach(function(err) {
        var entry = document.createElement('div');
        entry.className = 'mb-3 rounded border border-red-200';
        entry.style.background = '#fff';

        // Summary row — clicking it toggles the traceback block below.
        var summary = document.createElement('div');
        summary.className = 'px-3 py-2 flex items-center gap-2 cursor-pointer hover:bg-red-50';

        var stageSpan = document.createElement('span');
        stageSpan.className = 'font-mono text-xs text-gray-700';
        stageSpan.style.minWidth = '11rem';
        stageSpan.textContent = err.stage || '-';
        summary.appendChild(stageSpan);

        var classSpan = document.createElement('span');
        classSpan.className = 'font-mono text-xs font-semibold text-red-700';
        classSpan.textContent = err.exception_class || 'Error';
        summary.appendChild(classSpan);

        var msgSpan = document.createElement('span');
        msgSpan.className = 'text-xs text-red-700';
        var fullMsg = err.message == null ? '' : String(err.message);
        msgSpan.textContent = fullMsg.length > 160 ? fullMsg.slice(0, 160) + '...' : fullMsg;
        msgSpan.title = fullMsg;
        summary.appendChild(msgSpan);

        var tbLines = err.traceback ? err.traceback.split('\n').length : 0;
        var tbHint = document.createElement('span');
        tbHint.className = 'ml-auto text-xs text-gray-500 font-mono';
        tbHint.textContent = '(' + tbLines + ' traceback line' + (tbLines === 1 ? '' : 's') + ')';
        summary.appendChild(tbHint);
        entry.appendChild(summary);

        // Traceback block — scrollable <pre>, textContent only. User-
        // controlled data (exception messages can include handler input)
        // must never be injected as innerHTML.
        var tb = probeMakeScrollablePreBlock('traceback', err.traceback || '', {emptyLabel: '(no traceback)'});
        tb.style.borderTop = '1px solid #fecaca';
        tb.style.borderRadius = '0 0 4px 4px';
        tb.style.display = 'none';
        entry.appendChild(tb);

        summary.onclick = function(ev) {
            ev.stopPropagation();
            tb.style.display = tb.style.display === 'none' ? '' : 'none';
        };

        card.body.appendChild(entry);
    });
    return card.card;
}

// === Message Probe — Toolbar (sticky top of results) ===

function renderProbeToolbar(report) {
    // Sticky toolbar rendered above all result sections. Offers three
    // actions: download the full DebugReport as JSON, re-run the last
    // probe unchanged, and re-expand the input form for edits.
    var bar = document.createElement('div');
    bar.id = 'probe-result-toolbar';
    bar.className = 'sticky top-0 z-10 mb-3 px-3 py-2 flex items-center gap-2 rounded border border-cream-200';
    bar.style.cssText = 'background:#fffdf7;';

    var dlBtn = document.createElement('button');
    dlBtn.type = 'button';
    dlBtn.className = 'px-3 py-1 rounded text-xs border border-cream-300 bg-white hover:bg-cream-100 text-ink-700';
    dlBtn.textContent = 'Download JSON';
    dlBtn.onclick = function(ev) {
        ev.stopPropagation();
        // Build a timestamped filename (probe-report-YYYYMMDD-HHMMSS.json)
        // and trigger a browser download via a temporary anchor + Blob URL.
        var now = new Date();
        function pad(n) { return n < 10 ? '0' + n : '' + n; }
        var ts = now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate())
            + '-' + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds());
        var fname = 'probe-report-' + ts + '.json';
        var body;
        try { body = JSON.stringify(report, null, 2); }
        catch (e) { body = String(report); }
        var blob = new Blob([body], {type: 'application/json'});
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = fname;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(function() { URL.revokeObjectURL(url); }, 2000);
    };
    bar.appendChild(dlBtn);

    var rerunBtn = document.createElement('button');
    rerunBtn.type = 'button';
    rerunBtn.className = 'px-3 py-1 rounded text-xs border border-cream-300 bg-white hover:bg-cream-100 text-ink-700';
    rerunBtn.textContent = 'Re-run';
    rerunBtn.onclick = function(ev) {
        ev.stopPropagation();
        var runBtn = document.getElementById('probe-run-btn');
        if (runBtn && !runBtn.disabled) runBtn.click();
    };
    bar.appendChild(rerunBtn);

    var editBtn = document.createElement('button');
    editBtn.type = 'button';
    editBtn.className = 'px-3 py-1 rounded text-xs border border-cream-300 bg-white hover:bg-cream-100 text-ink-700';
    editBtn.textContent = 'Edit & re-run';
    editBtn.onclick = function(ev) {
        ev.stopPropagation();
        expandProbeFormFromChip();
    };
    bar.appendChild(editBtn);

    return bar;
}

// === Message Probe — input form chip ===

function collapseProbeFormToChip(lastInput) {
    // Hides the input form and renders a compact one-line chip summarising
    // the submitted probe. An Edit link expands the form back. Called from
    // ``renderProbeReport`` after a successful render.
    var form = document.getElementById('probe-form-wrap');
    if (!form) return;
    form.style.display = 'none';

    var chip = document.getElementById('probe-form-chip');
    if (!chip) {
        chip = document.createElement('div');
        chip.id = 'probe-form-chip';
        chip.className = 'mb-4 px-3 py-2 flex items-center gap-3 rounded border border-cream-200';
        chip.style.background = '#fffdf7';
        form.parentNode.insertBefore(chip, form);
    }
    chip.replaceChildren();

    // Summary text built from the last submitted input; falls back to DOM
    // lookups when the module-level variable wasn't populated (e.g. the
    // caller didn't store it before invoking this helper).
    var inp = lastInput || {};
    var partition = inp.partition != null ? inp.partition : 0;
    var offset = inp.offset != null ? inp.offset : 0;
    var topic = inp.topic || '';
    var key = inp.key == null || inp.key === '' ? '(none)' : inp.key;
    var useCache = !!inp.use_cache;

    var summary = document.createElement('span');
    summary.className = 'font-mono text-xs text-ink-700';
    summary.textContent = 'P' + partition + ':' + offset
        + '  topic=' + (topic || '(none)')
        + '  key=' + key
        + '  (use_cache: ' + (useCache ? 'yes' : 'no') + ')';
    chip.appendChild(summary);

    var editLink = document.createElement('a');
    editLink.href = 'javascript:void(0)';
    editLink.className = 'ml-auto text-xs text-teal-600 hover:underline';
    editLink.textContent = 'Edit';
    editLink.onclick = function(ev) {
        ev.stopPropagation();
        expandProbeFormFromChip();
    };
    chip.appendChild(editLink);

    chip.style.display = '';
}

function expandProbeFormFromChip() {
    // Inverse of ``collapseProbeFormToChip`` — hides the chip and restores
    // the editable form. Does NOT clear existing form values: the user may
    // want to tweak one field and re-submit.
    var form = document.getElementById('probe-form-wrap');
    var chip = document.getElementById('probe-form-chip');
    if (form) form.style.display = '';
    if (chip) chip.style.display = 'none';
}

function renderProbeReport(report) {
    // Renders the DebugReport as a stack of cards:
    //   A. Input & deserialization
    //   B. Arrange
    //   C. Tasks table
    //   D. on_message_complete
    //   E. on_window_complete
    //   F. Planned sink outputs
    //   G. Cache calls
    //   H. Timeline waterfall
    //   I. Errors panel (only when errors[] is non-empty)
    // A sticky toolbar above the sections offers Download JSON / Re-run /
    // Edit & re-run. After rendering, the input form collapses to a chip.
    var container = document.getElementById('probe-result');
    container.replaceChildren();

    if (!report) return;

    if (report.truncated) {
        var warn = document.createElement('div');
        warn.className = 'mb-3 p-2 rounded border border-orange-300 text-xs text-orange-800';
        warn.style.background = '#fff7ed';
        warn.textContent = 'Partial report — the probe did not reach every stage (timeout or upstream failure).';
        container.appendChild(warn);
    }

    container.appendChild(renderProbeToolbar(report));
    container.appendChild(renderProbeSectionInput(report));
    container.appendChild(renderProbeSectionArrange(report));
    container.appendChild(renderProbeSectionTasks(report));
    container.appendChild(renderProbeSectionOnMessageComplete(report));
    container.appendChild(renderProbeSectionOnWindowComplete(report));
    container.appendChild(renderProbeSectionSinks(report));
    container.appendChild(renderProbeSectionCacheCalls(report));
    container.appendChild(renderProbeSectionTimeline(report));
    var errorsCard = renderProbeSectionErrors(report);
    if (errorsCard) container.appendChild(errorsCard);

    // ``window._probeLastInput`` is populated by the Run-button IIFE just
    // before each fetch — see the click handler above.
    collapseProbeFormToChip(window._probeLastInput);
}
</script>
{% endblock %}