{% extends "base.html" %}
{% block title %}Live — Drakkar Debug{% endblock %}
{% block head %}<style>#tl-viewport::-webkit-scrollbar { display: none; }</style>{% endblock %}

{% block content %}
<div class="flex items-center gap-3 mb-1">
    <h1 class="text-2xl font-bold text-ink-900">Live Pipeline</h1>
    <span id="ws-badge" class="text-xs px-2 py-0.5 rounded" style="background:#fecaca;color:#991b1b;border:1px solid #fca5a5;">WS: connecting</span>
    <span id="freeze-toggle" class="text-xs px-2 py-0.5 rounded cursor-pointer select-none" style="background:#f5f3ee;color:#6b7280;border:1px solid #ddd9ce;" onclick="toggleFreeze()">Live</span>
    <span class="text-gray-500 text-sm ml-auto">Pool: <span id="v-pool">{{ pool_active }} / {{ pool_max }}</span> slots, <span id="v-waiting" style="color:#b45309;">{{ pool_waiting }}</span> waiting</span>
</div>
<p id="tab-hint" class="text-xs text-gray-400 mb-3" style="line-height:1.4;"></p>

<!-- Tab bar. The three completion-hook tabs are rendered only when the
     user's handler overrides the corresponding hook (detected at startup
     via hook_flags — see debug_server.hook_flags). -->
<div class="flex border-b border-cream-200 mb-4" id="tab-bar">
    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="arrange" style="color:#6b7280;border-bottom:2px solid transparent;">Arrange</button>
    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="execute" style="color:#6b7280;border-bottom:2px solid transparent;">Executors</button>
    {% if hook_flags.task_complete %}
    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="task-results" style="color:#6b7280;border-bottom:2px solid transparent;">Task Results</button>
    {% endif %}
    {% if hook_flags.message_complete %}
    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="message-results" style="color:#6b7280;border-bottom:2px solid transparent;">Message Results</button>
    {% endif %}
    {% if hook_flags.window_complete %}
    <button class="tab-btn px-4 py-2 text-sm font-medium" data-tab="window-results" style="color:#6b7280;border-bottom:2px solid transparent;">Window Results</button>
    {% endif %}
</div>

<!-- ==================== ARRANGE TAB ==================== -->
<div class="tab-panel" id="panel-arrange" style="display:none;">
    <div class="flex items-center justify-between mb-3">
        <p class="text-gray-500 text-sm">
            Recent arrange() calls
            <span id="arrange-total" class="text-teal-600"></span>
            <span class="text-gray-400 text-xs" id="arrange-cap-hint"></span>
        </p>
    </div>
    <!-- Filter bar. Applies to the list; the sidebar detail is unaffected. -->
    <div class="flex flex-wrap items-center gap-3 mb-3">
        <label class="text-sm text-gray-500">Partition</label>
        <select id="arrange-filter-partition" 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>
        </select>
        <label class="text-sm text-gray-500">Search</label>
        <input id="arrange-filter-search" type="text" placeholder="labels, offsets, task_id substring" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-64 focus:border-teal-400 focus:outline-none">
        <label class="text-xs text-gray-500 flex items-center gap-1">
            <input id="arrange-filter-issues" type="checkbox" class="rounded"> Issues only
        </label>
        <span id="arrange-filter-matched" class="text-xs text-gray-400 ml-auto"></span>
    </div>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-400 border-b border-cream-200">
                <th class="py-2 px-3">Partition</th>
                <th class="py-2 px-3">Msgs</th>
                <th class="py-2 px-3 w-40">Progress</th>
                <th class="py-2 px-3">Tasks</th>
                <th class="py-2 px-3">Arrange</th>
                <th class="py-2 px-3">Batch</th>
                <th class="py-2 px-3">Time</th>
                <th class="py-2 px-3">Labels</th>
            </tr>
        </thead>
        <tbody id="arrange-body"></tbody>
    </table>
</div>

<!-- Batch detail side panel (rendered once at document root, independent of
     tab visibility — fixed position slides in/out). Listing data and sidebar
     data both come from the same in-memory state (recentArranges + allTasks)
     so they stay consistent. -->
<div id="arrange-detail-panel" class="fixed top-0 right-0 h-full w-full md:w-1/2 lg:w-2/5 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" id="arrange-detail-title">Batch</h3>
        <button onclick="closeArrangeDetail()" class="text-gray-400 hover:text-ink-800 text-xl leading-none">&times;</button>
    </div>
    <div class="p-4" id="arrange-detail-body">
        <div class="text-gray-400">Select a batch to view details...</div>
    </div>
</div>

<!-- ==================== EXECUTORS TAB ==================== -->
<div class="tab-panel" id="panel-execute" style="display:none;">
    <div class="w-full bg-cream-200 rounded-full h-3 mb-4">
        {% set pct = (pool_active / pool_max * 100) if pool_max > 0 else 0 %}
        <div id="v-pool-bar" class="h-3 rounded-full transition-all {% if pct > 80 %}bg-red-400{% elif pct > 50 %}bg-amber-400{% else %}bg-emerald-400{% endif %}"
             style="width: {{ pct }}%"></div>
    </div>

    <h2 class="text-lg font-semibold mb-2 text-ink-800">Timeline <span class="text-sm font-normal text-gray-400">(last 10 min, 2 sec delayed{% if ws_min_duration_ms > 0 %}, tasks &ge; {{ ws_min_duration_ms }}ms{% endif %})</span></h2>
    <div class="flex items-center gap-3 mb-2">
        <div class="flex items-center gap-1">
            <label class="text-xs text-gray-400">Zoom:</label>
            <button onclick="zoomIn()" class="bg-cream-200 hover:bg-cream-300 px-2 py-0.5 rounded text-sm font-bold">+</button>
            <span id="zoom-label" class="text-xs text-gray-400 w-10 text-center">2x</span>
            <button onclick="zoomOut()" class="bg-cream-200 hover:bg-cream-300 px-2 py-0.5 rounded text-sm font-bold">-</button>
            <button onclick="zoomReset()" class="bg-cream-200 hover:bg-cream-300 px-2 py-0.5 rounded text-xs ml-1">Reset</button>
        </div>
        <button onclick="scrollToEnd()" class="bg-cream-200 hover:bg-cream-300 px-2 py-1 rounded text-xs">Now &rarr;</button>
        <div class="text-xs text-gray-500 ml-auto">
            <span class="inline-block w-3 h-3 rounded mr-1" style="background:#34d399;"></span>completed
            <span class="inline-block w-3 h-3 rounded mr-1 ml-2" style="background:#fbbf24;"></span>running
            <span class="inline-block w-3 h-3 rounded mr-1 ml-2" style="background:#f87171;"></span>failed
        </div>
    </div>
    <div class="bg-white rounded-lg border border-cream-200 p-2 mb-6">
        <div id="tl-viewport" style="position:relative; overflow-x:scroll; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;">
            <div id="tl-inner" style="position:relative; min-height:100px;">
                <div id="tl-axis" style="position:relative; height:18px; border-bottom:1px solid #ddd9ce;"></div>
                <div id="tl-lanes" style="position:relative;"></div>
            </div>
        </div>
        <!-- Hover detail area. Height sized to comfortably fit all rows of
             per-task info (status line, CLI, stdin, labels, env) without
             truncation; overflow stays hidden so very-long CLI args still
             clamp instead of stretching the timeline card. -->
        <div id="tl-hover" class="border-t border-cream-200 px-3 py-2 text-xs font-mono text-gray-500" style="height:9em; overflow:hidden; background:#f9f8f5;">
            <span class="text-gray-400">hover over a task bar to see details</span>
        </div>
    </div>

    <!-- Finished list. The former "Running" list was removed — it updated
         too fast (WS events) and showed stale entries during recorder-flush
         lag. The Timeline bars and the lane viewport already convey "what's
         running right now" in a more stable way. -->
    <div class="mb-4">
        <h2 class="text-lg font-semibold">
            Finished <span id="finished-count" class="text-sm font-normal text-gray-400">(0)</span>
        </h2>
        <table class="w-full text-sm mt-2">
            <thead><tr class="text-left text-gray-400 border-b border-cream-200">
                <th class="py-2 px-3">Task ID</th><th class="py-2 px-3">Partition</th><th class="py-2 px-3">Labels</th><th class="py-2 px-3">Status</th><th class="py-2 px-3">Duration</th><th class="py-2 px-3">Time</th><th class="py-2 px-3">CLI Args</th><th class="py-2 px-3">Stdin</th>
            </tr></thead>
            <tbody id="finished-body"></tbody>
        </table>
    </div>
</div>

{% if hook_flags.task_complete %}
<!-- ==================== TASK RESULTS TAB ==================== -->
<div class="tab-panel" id="panel-task-results" style="display:none;">
    <div class="flex items-center justify-between mb-3">
        <p class="text-gray-500 text-sm">
            Recent <code class="text-purple-600">on_task_complete()</code> calls
            <span id="task-results-total" class="text-teal-600"></span>
        </p>
    </div>
    <div class="flex flex-wrap items-center gap-3 mb-3">
        <label class="text-sm text-gray-500">Partition</label>
        <select id="task-results-filter-partition" 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>
        </select>
        <label class="text-sm text-gray-500">Search</label>
        <input id="task-results-filter-search" type="text" placeholder="task_id or offset substring" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-64 focus:border-teal-400 focus:outline-none">
        <label class="text-xs text-gray-500 flex items-center gap-1">
            <input id="task-results-filter-failed" type="checkbox" class="rounded"> Failed only
        </label>
        <span id="task-results-matched" class="text-xs text-gray-400 ml-auto"></span>
    </div>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-400 border-b border-cream-200">
                <th class="py-2 px-3">Time</th>
                <th class="py-2 px-3">Task ID</th>
                <th class="py-2 px-3">Source</th>
                <th class="py-2 px-3">Exec</th>
                <th class="py-2 px-3">Hook</th>
                <th class="py-2 px-3">Outputs</th>
                <th class="py-2 px-3">Status</th>
            </tr>
        </thead>
        <tbody id="task-results-body"></tbody>
    </table>
</div>
<!-- Task Results detail sidebar -->
<div id="task-results-detail-panel" class="fixed top-0 right-0 h-full w-full md:w-1/2 lg:w-2/5 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" id="task-results-detail-title">Task result</h3>
        <button onclick="closeTaskResultsDetail()" class="text-gray-400 hover:text-ink-800 text-xl leading-none">&times;</button>
    </div>
    <div class="p-4" id="task-results-detail-body">
        <div class="text-gray-400">Select a row to view details...</div>
    </div>
</div>
{% endif %}

{% if hook_flags.message_complete %}
<!-- ==================== MESSAGE RESULTS TAB ==================== -->
<div class="tab-panel" id="panel-message-results" style="display:none;">
    <div class="flex items-center justify-between mb-3">
        <p class="text-gray-500 text-sm">
            Recent <code class="text-purple-600">on_message_complete()</code> calls
            <span id="message-results-total" class="text-teal-600"></span>
        </p>
    </div>
    <div class="flex flex-wrap items-center gap-3 mb-3">
        <label class="text-sm text-gray-500">Partition</label>
        <select id="message-results-filter-partition" 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>
        </select>
        <label class="text-sm text-gray-500">Search</label>
        <input id="message-results-filter-search" type="text" placeholder="offset substring" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-64 focus:border-teal-400 focus:outline-none">
        <label class="text-xs text-gray-500 flex items-center gap-1">
            <input id="message-results-filter-issues" type="checkbox" class="rounded"> Issues only
        </label>
        <span id="message-results-matched" class="text-xs text-gray-400 ml-auto"></span>
    </div>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-400 border-b border-cream-200">
                <th class="py-2 px-3">Time</th>
                <th class="py-2 px-3">Source</th>
                <th class="py-2 px-3" title="on_message_complete() hook runtime">Hook</th>
                <th class="py-2 px-3" title="Wall-clock time from Kafka poll (consumed event) to on_message_complete finish — includes arrange, task queue wait, subprocess exec, hook runtime">End-to-end</th>
                <th class="py-2 px-3">Tasks (ok / fail / replaced)</th>
                <th class="py-2 px-3">Outputs</th>
            </tr>
        </thead>
        <tbody id="message-results-body"></tbody>
    </table>
</div>
<!-- Message Results detail sidebar -->
<div id="message-results-detail-panel" class="fixed top-0 right-0 h-full w-full md:w-1/2 lg:w-2/5 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" id="message-results-detail-title">Message result</h3>
        <button onclick="closeMessageResultsDetail()" class="text-gray-400 hover:text-ink-800 text-xl leading-none">&times;</button>
    </div>
    <div class="p-4" id="message-results-detail-body">
        <div class="text-gray-400">Select a row to view details...</div>
    </div>
</div>
{% endif %}

{% if hook_flags.window_complete %}
<!-- ==================== WINDOW RESULTS TAB ==================== -->
<div class="tab-panel" id="panel-window-results" style="display:none;">
    <div class="flex items-center justify-between mb-3">
        <p class="text-gray-500 text-sm">
            Recent <code class="text-purple-600">on_window_complete()</code> calls
            <span id="window-results-total" class="text-teal-600"></span>
        </p>
    </div>
    <div class="flex flex-wrap items-center gap-3 mb-3">
        <label class="text-sm text-gray-500">Partition</label>
        <select id="window-results-filter-partition" 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>
        </select>
        <label class="text-sm text-gray-500">Search</label>
        <input id="window-results-filter-search" type="text" placeholder="window id substring" class="bg-white border border-cream-300 rounded px-3 py-1.5 text-sm font-mono text-ink-700 w-64 focus:border-teal-400 focus:outline-none">
        <span id="window-results-matched" class="text-xs text-gray-400 ml-auto"></span>
    </div>
    <table class="w-full text-sm">
        <thead>
            <tr class="text-left text-gray-400 border-b border-cream-200">
                <th class="py-2 px-3">Time</th>
                <th class="py-2 px-3">Partition</th>
                <th class="py-2 px-3">Window #</th>
                <th class="py-2 px-3">Duration</th>
                <th class="py-2 px-3">Tasks</th>
                <th class="py-2 px-3">Outputs</th>
            </tr>
        </thead>
        <tbody id="window-results-body"></tbody>
    </table>
</div>
<!-- Window Results detail sidebar -->
<div id="window-results-detail-panel" class="fixed top-0 right-0 h-full w-full md:w-1/2 lg:w-2/5 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" id="window-results-detail-title">Window result</h3>
        <button onclick="closeWindowResultsDetail()" class="text-gray-400 hover:text-ink-800 text-xl leading-none">&times;</button>
    </div>
    <div class="p-4" id="window-results-detail-body">
        <div class="text-gray-400">Select a row to view details...</div>
    </div>
</div>
{% endif %}

<script>
// === Tab management ===
var tabHints = {
    arrange: 'Arrange is called after message polling for each partition. It receives a batch of messages and creates executor Tasks with CLI params to run.',
    execute: 'Executors run CPU-bound Tasks as subprocesses with prepared CLI args, capturing stdout/stderr. Limited by the pool semaphore.',
    'task-results': 'on_task_complete() runs after each task\'s subprocess exits. One row per call — shows exec runtime, hook runtime, and the number of sink payloads dispatched.',
    'message-results': 'on_message_complete() runs after every task derived from one source message reaches a terminal state. Rows aggregate the message\'s fan-out outcomes.',
    'window-results': 'on_window_complete() runs after every task in one arrange() window finishes. Rows summarize the whole window.',
};

function switchTab(name) {
    // Fall back to Executors if the requested tab isn't rendered — happens
    // when a hash-deep-link points at a completion-hook tab the current
    // handler doesn't implement, or an old bookmarked ``#collect`` URL.
    if (!document.querySelector('[data-tab="' + name + '"]')) {
        name = 'execute';
    }
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
    document.querySelectorAll('.tab-btn').forEach(function(b) {
        b.style.color = '#6b7280'; b.style.borderBottom = '2px solid transparent';
    });
    var panel = document.getElementById('panel-' + name);
    var btn = document.querySelector('[data-tab="' + name + '"]');
    if (panel) panel.style.display = 'block';
    if (btn) { btn.style.color = '#1a1a1a'; btn.style.borderBottom = '2px solid #0d9488'; }
    var hint = document.getElementById('tab-hint');
    if (hint) hint.textContent = tabHints[name] || '';
    var hash = name;
    history.replaceState(null, '', '#' + hash);
}

document.querySelectorAll('.tab-btn').forEach(function(btn) {
    btn.addEventListener('click', function() { switchTab(btn.dataset.tab); });
});

// === Shared state ===
var MAX_LANES = {{ pool_max }};
var TIMELINE_MINUTES = 10;
var TIMELINE_DELAY = 2; // seconds behind real time for smooth rendering
var LANE_H = 22, LANE_GAP = 2, BASE_PX_PER_SEC = 8;
var zoomLevel = 2;
var hoveredTask = null;
var frozen = false;

function fmtStdin(t) {
    if (!t.stdin_size) return '-';
    return t.stdin_lines + ' lines, ' + formatSize(t.stdin_size);
}
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 toggleFreeze() {
    if (!frozen) {
        frozen = true;
        var btn = document.getElementById('freeze-toggle');
        if (btn) { btn.textContent = 'Frozen'; btn.style.background = '#dbeafe'; btn.style.color = '#1e40af'; btn.style.border = '1px solid #93c5fd'; }
    } else {
        // unfreeze — reload to catch up with current live state
        location.reload();
    }
}

var allTasks = {};
var recentArranges = [];
// Three completion-hook result feeds. Only the arrays whose hook the
// handler actually implements are populated — the others stay empty and
// their tabs aren't rendered. Server-side ``hook_flags`` in live.html
// context gates both the tabs and the client-side feature toggle below.
var recentTaskResults = [];
var recentMessageResults = [];
var recentWindowResults = [];
var MAX_HISTORY = {{ max_ui_rows }};
var arrangeTotal = 0, taskResultsTotal = 0, messageResultsTotal = 0, windowResultsTotal = 0;
var HOOK_FLAGS = {
    task_complete: {{ 'true' if hook_flags.task_complete else 'false' }},
    message_complete: {{ 'true' if hook_flags.message_complete else 'false' }},
    window_complete: {{ 'true' if hook_flags.window_complete else 'false' }},
};
// Per-tab sidebar open-state flags — used by the click-outside-to-close
// handlers further down. Only one of the three is open at any moment.
var selectedTaskResultKey = null;
var selectedMessageResultKey = null;
var selectedWindowResultKey = null;
// Per-tab filter state. Each tab has its own dropdown/search/toggle set;
// applying a filter never mutates the underlying feed arrays, only the
// rendered subset.
var taskResultsFilter = { partition: '', search: '', failedOnly: false };
var messageResultsFilter = { partition: '', search: '', issuesOnly: false };
var windowResultsFilter = { partition: '', search: '' };

// 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.

// === Helpers ===
function scrollToEnd() { tlFollowing = true; }
function fmtTime(ts) { return new Date(ts * 1000).toISOString().substring(11, 19); }
function fmtTimeMs(ts) { return ts ? new Date(ts * 1000).toISOString().substring(11, 23) : ''; }
function barColor(s) { return s === 'completed' ? '#34d399' : s === 'failed' ? '#f87171' : '#fbbf24'; }
function statusCss(s) { return s === 'completed' ? 'color:#059669' : s === 'failed' ? 'color:#dc2626' : 'color:#d97706'; }
function durColor(d) { return d > 1 ? '#dc2626' : d > 0.1 ? '#d97706' : '#059669'; }
function baseTaskId(tid) { return tid ? tid.split(':r')[0] : tid; }
function zoomIn() { zoomLevel = Math.min(zoomLevel * 2, 64); document.getElementById('zoom-label').textContent = zoomLevel + 'x'; rebuildAxis(); }
function zoomOut() { zoomLevel = Math.max(zoomLevel / 2, 0.25); document.getElementById('zoom-label').textContent = zoomLevel + 'x'; rebuildAxis(); }
function zoomReset() { zoomLevel = 2; document.getElementById('zoom-label').textContent = '2x'; rebuildAxis(); }

// === Timeline ===
function showTaskDetail(t) {
    hoveredTask = t;
    var el = document.getElementById('tl-hover');
    el.textContent = '';
    var dur = t.duration ? t.duration.toFixed(3) + 's' : 'running';
    var line1 = [
        {l:'Task', v:t.task_id}, {l:'Slot', v:t.slot != null ? '#'+t.slot : '-'}, {l:'PID', v:t.pid||'-'}, {l:'P', v:t.partition},
        {l:'Status', v:t.status, s:statusCss(t.status)}, {l:'Duration', v:dur},
        {l:'Start', v:fmtTimeMs(t.start_ts)}, {l:'End', v:t.end_ts ? fmtTimeMs(t.end_ts) : 'running'},
    ];
    for (var i = 0; i < line1.length; i++) {
        var p = line1[i];
        var lbl = document.createElement('span');
        lbl.style.cssText = 'color:#9ca3af;margin-right:2px;'; lbl.textContent = p.l + ':';
        el.appendChild(lbl);
        var val = document.createElement('span');
        if (p.s) val.style.cssText = p.s;
        val.style.marginRight = '12px'; val.textContent = p.v;
        el.appendChild(val);
    }
    el.appendChild(document.createElement('br'));
    var cliLbl = document.createElement('span');
    cliLbl.style.cssText = 'color:#9ca3af;margin-right:2px;'; cliLbl.textContent = 'CLI:';
    el.appendChild(cliLbl);
    var cliVal = document.createElement('span');
    cliVal.style.cssText = 'color:#6b7280;margin-right:12px;'; cliVal.textContent = t.args || '-';
    el.appendChild(cliVal);
    if (t.stdin_size) {
        var stdinLbl = document.createElement('span');
        stdinLbl.style.cssText = 'color:#9ca3af;margin-right:2px;'; stdinLbl.textContent = 'Stdin:';
        el.appendChild(stdinLbl);
        var stdinVal = document.createElement('span');
        stdinVal.style.color = '#6b7280'; stdinVal.textContent = fmtStdin(t);
        el.appendChild(stdinVal);
    }
    if (t.labels && Object.keys(t.labels).length) {
        el.appendChild(document.createElement('br'));
        Object.keys(t.labels).forEach(function(k) {
            var tag = document.createElement('span');
            tag.style.cssText = 'display:inline-block;background:#f0fdfa;border:1px solid #99f6e4;color:#0d9488;padding:0 6px;border-radius:3px;margin-right:6px;font-size:11px;';
            tag.textContent = k + '=' + t.labels[k];
            el.appendChild(tag);
        });
    }
    if (t.env && Object.keys(t.env).length) {
        el.appendChild(document.createElement('br'));
        var envLbl = document.createElement('span');
        envLbl.style.cssText = 'color:#9ca3af;margin-right:4px;font-size:11px;';
        envLbl.textContent = 'env:';
        el.appendChild(envLbl);
        Object.keys(t.env).forEach(function(k) {
            var tag = document.createElement('span');
            tag.style.cssText = 'display:inline-block;background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:0 6px;border-radius:3px;margin-right:6px;font-size:11px;';
            tag.textContent = k + '=' + t.env[k];
            el.appendChild(tag);
        });
    }
}
function clearTaskDetail() {
    hoveredTask = null;
    var el = document.getElementById('tl-hover');
    el.textContent = '';
    var hint = document.createElement('span');
    hint.style.color = '#9ca3af'; hint.textContent = 'hover over a task bar to see details';
    el.appendChild(hint);
}

// === Timeline — persistent DOM elements, no rebuild ===
// Bars are created once and never destroyed (except on age-out).
// rAF loop updates: canvas width, running bar widths, scroll position.
// Axis ticks are rebuilt only on zoom change (cheap).

var tlAnchor = 0;       // fixed time reference for pixel positions
var tlFollowing = true;  // auto-follow the right edge
var taskBars = {};       // task_id -> {el: DOM element, task: task object}
var lastZoom = 0;        // detect zoom changes to rebuild axis
var laneStripesBuilt = false;

function tlPx(ts) {
    // convert a unix timestamp to pixel position relative to anchor
    return (ts - tlAnchor) * BASE_PX_PER_SEC * zoomLevel;
}
function tlEdgePx() {
    return (Date.now() / 1000 - TIMELINE_DELAY - tlAnchor) * BASE_PX_PER_SEC * zoomLevel;
}

function ensureAnchor() {
    var now = Date.now() / 1000 - TIMELINE_DELAY;
    var newAnchor = Math.floor((now - TIMELINE_MINUTES * 60) / 30) * 30;
    if (tlAnchor === 0 || newAnchor > tlAnchor + 30) {
        tlAnchor = newAnchor;
        return true; // anchor changed — need full axis rebuild
    }
    return false;
}

function buildLaneStripes() {
    var lanesDiv = document.getElementById('tl-lanes');
    if (!lanesDiv || laneStripesBuilt) return;
    lanesDiv.style.height = (MAX_LANES * (LANE_H + LANE_GAP)) + 'px';
    for (var i = 0; i < MAX_LANES; i++) {
        var y = i * (LANE_H + LANE_GAP);
        if (i % 2 === 0) {
            var stripe = document.createElement('div');
            stripe.style.cssText = 'position:absolute;left:0;width:100%;background:rgba(0,0,0,0.02);pointer-events:none;';
            stripe.style.top = y + 'px'; stripe.style.height = LANE_H + 'px';
            lanesDiv.appendChild(stripe);
        }
        var label = document.createElement('div');
        label.style.cssText = 'position:absolute;left:2px;font-size:10px;color:#9ca3af;font-family:monospace;pointer-events:none;z-index:1;';
        label.style.top = y + 'px'; label.style.lineHeight = LANE_H + 'px';
        label.textContent = '#' + i;
        lanesDiv.appendChild(label);
    }
    laneStripesBuilt = true;
}

function rebuildAxis() {
    var axis = document.getElementById('tl-axis');
    if (!axis) return;
    axis.replaceChildren();
    var pxPerSec = BASE_PX_PER_SEC * zoomLevel;
    var now = Date.now() / 1000 - TIMELINE_DELAY;
    var canvasW = (now - tlAnchor) * pxPerSec;
    axis.style.width = Math.ceil(canvasW) + 'px';

    var tick = 30;
    if (pxPerSec >= 16) tick = 10; if (pxPerSec >= 32) tick = 5;
    if (pxPerSec < 4) tick = 60; if (pxPerSec < 1) tick = 120;
    for (var t = Math.ceil(tlAnchor / tick) * tick; t <= now; t += tick) {
        var x = (t - tlAnchor) * pxPerSec;
        var line = document.createElement('div');
        line.style.cssText = 'position:absolute;top:0;width:1px;height:100%;background:#e5e7eb;';
        line.style.left = x + 'px'; axis.appendChild(line);
        var lbl = document.createElement('div');
        lbl.style.cssText = 'position:absolute;top:2px;font-size:9px;color:#9ca3af;font-family:monospace;transform:translateX(-50%);';
        lbl.style.left = x + 'px'; lbl.textContent = fmtTime(t);
        axis.appendChild(lbl);
    }
    lastZoom = zoomLevel;
}

// Create or update a single task bar DOM element
function ensureBar(task) {
    var id = task.task_id;
    if (!task.start_ts) return;

    var lane = task.slot != null ? task.slot : 0;
    task.lane = lane;

    var entry = taskBars[id];
    if (!entry) {
        // create new bar
        var el = document.createElement('a');
        el.href = '/task/' + encodeURIComponent(id);
        el.style.cssText = 'position:absolute;border-radius:3px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.15);z-index:2;';
        el.style.height = LANE_H + 'px';
        el.style.top = (lane * (LANE_H + LANE_GAP)) + 'px';
        (function(t) {
            el.addEventListener('mouseenter', function() { showTaskDetail(t); });
            el.addEventListener('mouseleave', clearTaskDetail);
        })(task);
        var lanesDiv = document.getElementById('tl-lanes');
        if (lanesDiv) lanesDiv.appendChild(el);
        entry = {el: el, task: task};
        taskBars[id] = entry;
    }

    // update color (may change on completion/failure/retry)
    entry.el.style.backgroundColor = barColor(task.status);
    entry.task = task;
}

// Remove bars for tasks no longer in allTasks
function pruneOldBars() {
    var ids = Object.keys(taskBars);
    for (var i = 0; i < ids.length; i++) {
        if (!allTasks[ids[i]]) {
            var el = taskBars[ids[i]].el;
            if (el.parentNode) el.parentNode.removeChild(el);
            delete taskBars[ids[i]];
        }
    }
}

// rAF loop: update bar positions/widths, canvas size, scroll — 60fps, no DOM rebuild
function animateTimeline() {
    if (frozen) { requestAnimationFrame(animateTimeline); return; }

    var vp = document.getElementById('tl-viewport');
    var inner = document.getElementById('tl-inner');
    if (!vp || !inner) { requestAnimationFrame(animateTimeline); return; }

    ensureAnchor();

    var now = Date.now() / 1000 - TIMELINE_DELAY;
    var pxPerSec = BASE_PX_PER_SEC * zoomLevel;
    var edge = tlEdgePx();
    inner.style.width = Math.ceil(edge) + 'px';

    // update all bar positions and widths
    var cutoffTs = tlAnchor; // don't show bars before anchor
    var ids = Object.keys(taskBars);
    for (var i = 0; i < ids.length; i++) {
        var entry = taskBars[ids[i]];
        var t = entry.task;
        var el = entry.el;
        var endTs = t.end_ts || now;
        var bx = (t.start_ts - tlAnchor) * pxPerSec;
        var bw = Math.max(2, (endTs - t.start_ts) * pxPerSec);

        // hide bars completely outside the visible canvas
        if (bx + bw < 0 || t.start_ts < cutoffTs) {
            el.style.display = 'none';
        } else {
            el.style.display = '';
            el.style.left = bx + 'px';
            el.style.width = bw + 'px';
        }
    }

    // scroll
    var maxScroll = Math.max(0, edge - vp.clientWidth);
    if (vp.scrollLeft > maxScroll) vp.scrollLeft = maxScroll;
    if (tlFollowing) vp.scrollLeft = maxScroll;

    requestAnimationFrame(animateTimeline);
}

// Initial population: create bars for all tasks loaded from API
function initBars() {
    buildLaneStripes();
    var ids = Object.keys(allTasks);
    for (var i = 0; i < ids.length; i++) {
        ensureBar(allTasks[ids[i]]);
    }
}

// detect user scrolling away from the right edge
(function() {
    var vp = document.getElementById('tl-viewport');
    if (!vp) return;
    var userScrolling = false;
    vp.addEventListener('wheel', function() { userScrolling = true; });
    vp.addEventListener('touchstart', function() { userScrolling = true; });
    vp.addEventListener('scroll', function() {
        if (!userScrolling) return;
        userScrolling = false;
        // if user scrolled to the right edge, re-enable following
        var maxScroll = Math.max(0, tlEdgePx() - vp.clientWidth);
        tlFollowing = Math.abs(vp.scrollLeft - maxScroll) < 5;
    });
})();

// === Tab renderers ===

// Arrange-tab state. The list cap is 10 x partition_count so the Live view
// stays stable-sized regardless of how many partitions the broker has
// assigned to this worker. Template passes partition_count in server-side
// context. Floor at 10 so the list is never empty even during startup or
// rebalance when no partitions are assigned yet.
var PARTITION_COUNT = {{ partition_count|default(0) }};
var ARRANGE_CAP = Math.max(10 * PARTITION_COUNT, 10);
// A batch is considered "unsettled" if any of its tasks are still running
// and start_ts is older than this threshold. Used for the "Issues only"
// filter toggle so long-unsettled batches surface even without failures.
var ARRANGE_STUCK_SEC = 30;
var arrangeFilter = { partition: '', search: '', issuesOnly: false };
// Index (into recentArranges) of the currently-open sidebar batch, or -1
// when the panel is closed. We key by ts+partition (a natural composite key
// for an arranged event) so that inserts to the front of recentArranges
// don't misalign the selection.
var selectedArrangeKey = null;

function arrangeKey(a) { return a ? (a.ts + ':' + a.partition) : null; }

// Compute batch-level task stats by looking up each task_id in allTasks.
// Returns {done, running, failed, unknown, oldest_running_sec, settled}.
// "unknown" covers task_ids we haven't seen yet on WS (recorder-flush lag
// or a task that hasn't made it into allTasks) — rendered as neutral bar.
function computeBatchStatus(batch, nowS) {
    var stats = {done: 0, running: 0, failed: 0, unknown: 0, oldest_running_sec: 0};
    var ids = batch.task_ids || [];
    for (var i = 0; i < ids.length; i++) {
        var t = allTasks[ids[i]];
        if (!t) { stats.unknown++; continue; }
        if (t.status === 'completed') stats.done++;
        else if (t.status === 'failed') stats.failed++;
        else if (t.status === 'running') {
            stats.running++;
            var age = nowS - (t.start_ts || batch.ts);
            if (age > stats.oldest_running_sec) stats.oldest_running_sec = age;
        } else { stats.unknown++; }
    }
    stats.total = ids.length;
    stats.settled = (stats.running === 0) && (stats.unknown === 0) && (ids.length > 0);
    return stats;
}

// Batch latency = arrange_ts -> last outcome_ts for the batch, or the
// current clock while still unsettled. Returned in seconds; the caller
// formats (ms vs. s).
function computeBatchLatency(batch, stats, nowS) {
    if (!batch.task_ids || !batch.task_ids.length) return 0;
    if (!stats.settled) return nowS - batch.ts;
    var last = batch.ts;
    for (var i = 0; i < batch.task_ids.length; i++) {
        var t = allTasks[batch.task_ids[i]];
        if (t && t.end_ts && t.end_ts > last) last = t.end_ts;
    }
    return last - batch.ts;
}

function fmtLatency(sec) {
    if (sec < 1) return (sec * 1000).toFixed(0) + 'ms';
    if (sec < 60) return sec.toFixed(1) + 's';
    return (sec / 60).toFixed(1) + 'm';
}

// 60-char stacked progress bar. Green for done, red for failed, amber for
// running, light gray for not-yet-seen. A zero-task batch renders a neutral
// dashed line so the column isn't visually misleading.
function makeProgressBar(stats) {
    var bar = document.createElement('div');
    bar.style.cssText = 'display:flex;height:8px;border-radius:3px;overflow:hidden;background:#f5f3ee;width:100%;';
    if (!stats.total) {
        bar.style.background = 'repeating-linear-gradient(90deg,#f5f3ee,#f5f3ee 4px,#ebe8e0 4px,#ebe8e0 8px)';
        return bar;
    }
    function seg(count, color) {
        if (!count) return;
        var s = document.createElement('div');
        s.style.cssText = 'height:100%;background:' + color + ';flex:' + count + ' 0 0;';
        bar.appendChild(s);
    }
    seg(stats.done, '#34d399');
    seg(stats.running, '#fbbf24');
    seg(stats.failed, '#f87171');
    seg(stats.unknown, '#e5e7eb');
    return bar;
}

// Compact status-count cell. Plain colored numbers, no emoji or symbols —
// the color encodes the category (green=done, orange=running, red=failed,
// grey=unknown). Zero-count categories are omitted so the cell stays
// uncluttered. Hover title gives the plain-English label for each number.
// A trailing ``/ N`` (grey) shows the total so ``12 / 15`` reads naturally.
function makeStatusCounts(stats) {
    var wrap = document.createElement('span');
    wrap.className = 'font-mono text-xs';
    function part(count, color, bold, label) {
        if (!count) return;
        var s = document.createElement('span');
        s.style.cssText = 'color:' + color + ';margin-right:10px;' + (bold ? 'font-weight:700;' : '');
        s.textContent = count;
        s.title = count + ' ' + label;
        wrap.appendChild(s);
    }
    part(stats.done, '#059669', true, 'completed');
    part(stats.running, '#d97706', true, 'running');
    part(stats.failed, '#dc2626', true, 'failed');
    part(stats.unknown, '#9ca3af', false, 'not yet seen (WS lag / outside timeline window)');
    if (stats.total) {
        var tot = document.createElement('span');
        tot.style.cssText = 'color:#9ca3af;';
        tot.textContent = '/ ' + stats.total;
        tot.title = stats.total + ' total tasks in batch';
        wrap.appendChild(tot);
    }
    return wrap;
}

// --- Filter logic ---

function arrangeMatchesFilter(a, stats) {
    if (arrangeFilter.partition !== '' && String(a.partition) !== arrangeFilter.partition) return false;
    if (arrangeFilter.issuesOnly) {
        if (!stats.failed && !(stats.oldest_running_sec > ARRANGE_STUCK_SEC)) return false;
    }
    var q = arrangeFilter.search.trim().toLowerCase();
    if (!q) return true;
    // Substring match across task_ids, offsets (as strings), and labels —
    // one input covers all three because the alphabet spaces don't collide
    // in practice (offsets are digits, task_ids are prefixed, labels are
    // k=v strings).
    var hay = [
        (a.task_ids || []).join(' '),
        (a.offsets || []).join(' '),
        (a.labels || []).join(' '),
    ].join(' ').toLowerCase();
    return hay.indexOf(q) !== -1;
}

function updatePartitionFilterOptions() {
    var sel = document.getElementById('arrange-filter-partition');
    if (!sel) return;
    var seen = {};
    for (var i = 0; i < recentArranges.length; i++) seen[recentArranges[i].partition] = true;
    var partitions = Object.keys(seen).map(function(p) { return Number(p); }).sort(function(a,b) { return a - b; });
    var prev = sel.value;
    // Preserve user's selection across rebuilds unless the partition is gone.
    sel.replaceChildren();
    var all = document.createElement('option'); all.value = ''; all.textContent = 'All';
    sel.appendChild(all);
    for (var j = 0; j < partitions.length; j++) {
        var opt = document.createElement('option');
        opt.value = String(partitions[j]);
        opt.textContent = 'P' + partitions[j];
        sel.appendChild(opt);
    }
    if (prev && partitions.indexOf(Number(prev)) !== -1) sel.value = prev;
}

function renderArranges() {
    var el = document.getElementById('arrange-total');
    if (el) el.textContent = '(total: ' + arrangeTotal + ')';
    var capHint = document.getElementById('arrange-cap-hint');
    if (capHint) {
        capHint.textContent = ' — last ' + ARRANGE_CAP + ' (10 × ' + PARTITION_COUNT + ' partitions)';
    }

    updatePartitionFilterOptions();

    var body = document.getElementById('arrange-body');
    if (!body) return;
    body.replaceChildren();
    var nowS = Date.now() / 1000;

    var visibleCount = 0;
    var capped = recentArranges.slice(0, ARRANGE_CAP);
    for (var i = 0; i < capped.length; i++) {
        var a = capped[i];
        var stats = computeBatchStatus(a, nowS);
        if (!arrangeMatchesFilter(a, stats)) continue;
        visibleCount++;

        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-100 hover:bg-cream-100 cursor-pointer';
        // Highlight the selected row so the sidebar context is obvious.
        if (selectedArrangeKey === arrangeKey(a)) {
            tr.style.background = '#e0f2fe';
        }
        (function(batch) {
            tr.onclick = function(ev) {
                // Stop propagation so the document-level click-outside-
                // to-close listener doesn't see this event. Without this,
                // ``openArrangeDetail`` triggers ``renderArranges`` which
                // rebuilds the tbody — the clicked row becomes detached
                // from the DOM, ``panel.contains(ev.target)`` returns
                // false for the now-orphaned row, and the outside-click
                // handler incorrectly closes the sidebar we just opened.
                ev.stopPropagation();
                openArrangeDetail(batch);
            };
        })(a);

        var td1 = document.createElement('td'); td1.className = 'py-2 px-3 font-mono';
        var link = document.createElement('a');
        link.href = '/partitions/' + a.partition;
        link.className = 'text-teal-600 hover:underline';
        link.textContent = 'P' + a.partition;
        link.onclick = function(ev) { ev.stopPropagation(); };  // let the link work without opening the sidebar
        td1.appendChild(link);

        var td2 = document.createElement('td'); td2.className = 'py-2 px-3 font-mono'; td2.textContent = a.message_count;

        var td3 = document.createElement('td'); td3.className = 'py-2 px-3 w-40';
        td3.appendChild(makeProgressBar(stats));

        var td4 = document.createElement('td'); td4.className = 'py-2 px-3';
        td4.appendChild(makeStatusCounts(stats));

        var td5 = document.createElement('td'); td5.className = 'py-2 px-3 font-mono text-xs';
        td5.style.color = durColor(a.duration);
        td5.textContent = a.duration.toFixed(3) + 's';

        var td6 = document.createElement('td'); td6.className = 'py-2 px-3 font-mono text-xs';
        var latSec = computeBatchLatency(a, stats, nowS);
        td6.textContent = fmtLatency(latSec);
        if (stats.settled) {
            td6.style.color = '#6b7280';
            td6.title = 'Settled: all tasks reached a final status.';
        } else {
            td6.style.color = '#d97706';
            td6.title = 'Unsettled: ' + stats.running + ' running, ' + stats.unknown + ' not yet seen.';
        }

        var td7 = document.createElement('td'); td7.className = 'py-2 px-3 text-gray-400 text-xs'; td7.textContent = fmtTimeMs(a.ts);

        var td8 = document.createElement('td'); td8.className = 'py-2 px-3 font-mono text-xs text-gray-500 max-w-sm truncate';
        td8.title = (a.labels || []).join('\n');
        td8.textContent = (a.labels || []).slice(0, 3).join(', ') + (a.labels.length > 3 ? ' … (' + a.labels.length + ')' : '');

        tr.append(td1, td2, td3, td4, td5, td6, td7, td8);
        body.appendChild(tr);
    }
    if (!visibleCount) {
        var etr = document.createElement('tr'); var etd = document.createElement('td');
        etd.colSpan = 8; etd.className = 'py-3 text-center text-gray-400';
        etd.textContent = recentArranges.length ? 'No batches match the current filter' : 'No arrange() calls yet';
        etr.appendChild(etd); body.appendChild(etr);
    }

    var matchedEl = document.getElementById('arrange-filter-matched');
    if (matchedEl) {
        var rendered = Math.min(recentArranges.length, ARRANGE_CAP);
        matchedEl.textContent = visibleCount + ' of ' + rendered + ' shown';
    }
}

// === Arrange sidebar (batch detail) ===
//
// Renders the summary card + message tree for the currently-selected batch.
// Called both on row click (initial render) and from the 1s ticker so the
// live latency + per-task state stay fresh without re-fetching.

function findArrangeByKey(key) {
    for (var i = 0; i < recentArranges.length; i++) {
        if (arrangeKey(recentArranges[i]) === key) return recentArranges[i];
    }
    return null;
}

function openArrangeDetail(batch) {
    selectedArrangeKey = arrangeKey(batch);
    var panel = document.getElementById('arrange-detail-panel');
    if (panel) panel.style.transform = 'translateX(0)';
    renderArrangeDetail();
    renderArranges();  // re-render to highlight the selected row
}

function closeArrangeDetail() {
    selectedArrangeKey = null;
    var panel = document.getElementById('arrange-detail-panel');
    if (panel) panel.style.transform = 'translateX(100%)';
    renderArranges();
}
window.closeArrangeDetail = closeArrangeDetail;

// Click-outside-to-close for the Arrange sidebar. We use the bubbling
// click phase so a row's own onclick (openArrangeDetail) runs first and
// sets selectedArrangeKey — then this handler sees target inside
// #panel-arrange and does NOT close, so the sidebar stays open for the
// newly-selected row. Clicks outside the Arrange tab (nav bar, other
// tab buttons, page body) close the sidebar.
document.addEventListener('click', function(ev) {
    if (!selectedArrangeKey) return;
    var panel = document.getElementById('arrange-detail-panel');
    if (panel && panel.contains(ev.target)) return;
    var tabPanel = document.getElementById('panel-arrange');
    if (tabPanel && tabPanel.contains(ev.target)) return;
    closeArrangeDetail();
});

function percentile(sorted, p) {
    if (!sorted.length) return 0;
    var idx = Math.min(Math.floor(p * sorted.length), sorted.length - 1);
    return sorted[idx];
}

function renderArrangeDetail() {
    if (!selectedArrangeKey) return;
    var batch = findArrangeByKey(selectedArrangeKey);
    var body = document.getElementById('arrange-detail-body');
    var title = document.getElementById('arrange-detail-title');
    if (!body) return;
    if (!batch) {
        // Batch aged out of recentArranges (FIFO) while the sidebar was open.
        body.replaceChildren();
        var msg = document.createElement('div');
        msg.className = 'text-gray-400';
        msg.textContent = 'Batch aged out of the live list.';
        body.appendChild(msg);
        if (title) title.textContent = 'Batch';
        return;
    }
    var nowS = Date.now() / 1000;
    var stats = computeBatchStatus(batch, nowS);
    var latSec = computeBatchLatency(batch, stats, nowS);

    if (title) title.textContent = 'Batch P' + batch.partition + ' @ ' + fmtTimeMs(batch.ts);

    body.replaceChildren();

    // --- Summary card ---
    var summary = document.createElement('div');
    summary.className = 'mb-4 p-3 rounded border border-cream-200';
    summary.style.background = '#f9f8f5';
    var grid = document.createElement('div');
    grid.className = 'grid grid-cols-2 gap-x-4 gap-y-1 text-xs font-mono';
    function kv(k, v, color) {
        var kSpan = document.createElement('span');
        kSpan.className = 'text-gray-500';
        kSpan.textContent = k;
        var vSpan = document.createElement('span');
        vSpan.textContent = v;
        if (color) vSpan.style.color = color;
        grid.appendChild(kSpan); grid.appendChild(vSpan);
    }
    kv('msgs', batch.message_count);
    kv('tasks', stats.total);
    var fan = batch.message_count ? (stats.total / batch.message_count).toFixed(2) + '×' : '—';
    kv('fan-out', fan);
    kv('arrange', batch.duration.toFixed(3) + 's', durColor(batch.duration));
    kv('batch latency', fmtLatency(latSec), stats.settled ? '#6b7280' : '#d97706');

    // p50/p95 over EXECUTED task durations (skip still-running ones).
    var durs = [];
    var ids = batch.task_ids || [];
    for (var k = 0; k < ids.length; k++) {
        var t = allTasks[ids[k]];
        if (t && t.duration != null) durs.push(t.duration);
    }
    durs.sort(function(a, b) { return a - b; });
    if (durs.length) {
        kv('exec p50', percentile(durs, 0.5).toFixed(3) + 's');
        kv('exec p95', percentile(durs, 0.95).toFixed(3) + 's');
    }
    if (!stats.settled) {
        kv('oldest running', stats.oldest_running_sec > 0 ? fmtLatency(stats.oldest_running_sec) : '—');
    }
    summary.appendChild(grid);

    // Status line.
    var statusLine = document.createElement('div');
    statusLine.className = 'mt-2';
    statusLine.appendChild(makeStatusCounts(stats));
    var barWrap = document.createElement('div');
    barWrap.className = 'mt-2';
    barWrap.appendChild(makeProgressBar(stats));
    summary.appendChild(statusLine);
    summary.appendChild(barWrap);

    body.appendChild(summary);

    // --- Messages tree ---
    var msgHeader = document.createElement('div');
    msgHeader.className = 'text-xs uppercase tracking-wide text-gray-500 mb-2';
    msgHeader.textContent = 'Messages (' + (batch.offsets || []).length + ')';
    body.appendChild(msgHeader);

    var offsets = batch.offsets || [];
    if (!offsets.length) {
        var noMsg = document.createElement('div');
        noMsg.className = 'text-gray-400 text-xs';
        noMsg.textContent = '(no offsets recorded)';
        body.appendChild(noMsg);
    }

    // Pre-compute per-offset task mapping. Three cases per task_id:
    //
    // 1. task in allTasks AND its source_offsets overlap this batch's
    //    offsets: render under each overlapping message. Fan-in case gets
    //    a "shared(N)" badge where N = count of other messages the task
    //    also covers (within this batch — we only count overlap here).
    //
    // 2. task in allTasks but its source_offsets do NOT overlap this
    //    batch's offsets: unusual but legal (the task was mapped to
    //    offsets outside the recorded arrange-metadata offsets list —
    //    e.g. a user's arrange() returned a task with source_offsets for
    //    a different window). Render in a separate "Other tasks" block
    //    with the task's actual offsets listed.
    //
    // 3. task NOT in allTasks (pruned after 10min timeline window, or
    //    WS/sync never caught up): we genuinely don't know its offsets.
    //    Render in a "Unknown tasks" block, no offset attribution —
    //    attaching it to offsets[0] was misleading because clicking the
    //    link could reveal a completely different partition/offset in
    //    the task-detail page (which queries the recorder's 24h history).
    var offsetSet = Object.create(null);
    for (var oi = 0; oi < offsets.length; oi++) offsetSet[offsets[oi]] = true;

    var taskByOffset = {};    // offset -> array of {task_id, task, shared}
    var otherTasks = [];      // task in allTasks but no offset overlap
    var unknownTasks = [];    // task not in allTasks

    for (var ti = 0; ti < ids.length; ti++) {
        var t2 = allTasks[ids[ti]];
        if (!t2) {
            unknownTasks.push({task_id: ids[ti], task: null});
            continue;
        }
        var covered = Array.isArray(t2.source_offsets) ? t2.source_offsets : [];
        // Intersect with this batch's offsets — the task only belongs under
        // a message row if its source_offsets includes that message's offset.
        var hits = [];
        for (var ci = 0; ci < covered.length; ci++) {
            if (offsetSet[covered[ci]]) hits.push(covered[ci]);
        }
        if (!hits.length) {
            // Task exists but doesn't overlap any of the batch's offsets.
            // Could mean: recorder metadata was truncated, or the user's
            // arrange() emitted source_offsets that aren't in the arranged
            // event's offsets list. Render separately so the sidebar is
            // honest about where the task sits.
            otherTasks.push({task_id: ids[ti], task: t2});
            continue;
        }
        var sharedCount = Math.max(0, hits.length - 1);
        for (var hi = 0; hi < hits.length; hi++) {
            (taskByOffset[hits[hi]] = taskByOffset[hits[hi]] || []).push({
                task_id: ids[ti], task: t2, shared: sharedCount,
            });
        }
    }

    for (var mi = 0; mi < offsets.length; mi++) {
        var off = offsets[mi];
        var msgBox = document.createElement('div');
        msgBox.className = 'mb-3 p-2 rounded border border-cream-200';
        msgBox.style.background = '#fff';

        var head = document.createElement('div');
        head.className = 'flex items-center justify-between mb-1';
        var left = document.createElement('div');
        left.className = 'text-sm font-mono';
        var offLabel = document.createElement('span');
        offLabel.style.color = '#6b7280';
        offLabel.textContent = 'Offset ';
        var offLink = document.createElement('a');
        offLink.href = '/debug#trace/' + batch.partition + '/' + off;
        offLink.className = 'text-teal-600 hover:underline';
        offLink.textContent = off;
        offLink.title = 'Open message trace in Debug view';
        left.append(offLabel, offLink);
        var kIcon = makeKafkaUiIcon(KAFKA_SOURCE_TOPIC, batch.partition, off);
        if (kIcon) left.appendChild(kIcon);
        head.appendChild(left);
        msgBox.appendChild(head);

        var taskList = document.createElement('div');
        taskList.className = 'space-y-1';
        var tasksForMsg = taskByOffset[off] || [];
        if (!tasksForMsg.length) {
            // Two distinct empty cases worth telling apart:
            //   (a) The whole batch produced zero tasks — arrange() returned [].
            //       Rare but legitimate (e.g. a message was filtered at the user's
            //       arrange() layer).
            //   (b) The batch does have tasks, but none list this message's
            //       offset in their source_offsets — common with fan-in where a
            //       single task covers one representative offset and the others
            //       land in "Other tasks" below.
            var noTasks = document.createElement('div');
            noTasks.className = 'text-xs text-gray-400';
            if (!ids.length) {
                noTasks.textContent = '(arrange() returned no tasks for this batch)';
            } else {
                noTasks.textContent = '(no tasks list this offset as a source — see "Other tasks" below)';
            }
            taskList.appendChild(noTasks);
        }
        for (var tix = 0; tix < tasksForMsg.length; tix++) {
            var te = tasksForMsg[tix];
            var row = document.createElement('div');
            row.className = 'flex items-center gap-2 text-xs font-mono';

            var dot = document.createElement('span');
            dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;';
            var status = te.task ? te.task.status : 'unknown';
            dot.style.background = status === 'completed' ? '#34d399'
                : status === 'failed' ? '#f87171'
                : status === 'running' ? '#fbbf24'
                : '#e5e7eb';
            row.appendChild(dot);

            var tLink = document.createElement('a');
            tLink.href = '/task/' + encodeURIComponent(baseTaskId(te.task_id));
            tLink.className = 'text-ink-800 hover:underline';
            tLink.textContent = te.task_id;
            row.appendChild(tLink);

            var stat = document.createElement('span');
            stat.style.cssText = statusCss(status);
            stat.textContent = status;
            row.appendChild(stat);

            var dur = document.createElement('span');
            dur.className = 'text-gray-500';
            if (te.task && te.task.duration != null) {
                dur.textContent = te.task.duration.toFixed(3) + 's';
            } else if (te.task && te.task.start_ts) {
                dur.textContent = (nowS - te.task.start_ts).toFixed(1) + 's running';
            } else {
                dur.textContent = '—';
            }
            row.appendChild(dur);

            if (te.shared > 0) {
                var shared = document.createElement('span');
                shared.className = 'text-gray-400';
                shared.textContent = 'shared(' + te.shared + ')';
                shared.title = 'This task covers ' + (te.shared + 1) + ' messages (fan-in).';
                row.appendChild(shared);
            }

            taskList.appendChild(row);
        }
        msgBox.appendChild(taskList);
        body.appendChild(msgBox);
    }

    // --- Tasks that don't map to any message in this batch ---
    //
    // "Other tasks" = task is in allTasks (we know its state) but its
    // source_offsets don't overlap the batch's offsets. Usually means
    // the arranged-event metadata was recorded with a truncated offsets
    // list or the user's arrange() returned tasks whose source_offsets
    // don't match the messages that triggered the call — either way the
    // sidebar shouldn't silently attribute them to one of the visible
    // messages.
    //
    // "Unknown tasks" = task is not in allTasks. Either pruned after the
    // 10-minute timeline window, or WS/sync hasn't delivered the
    // task_started event yet. We don't know its partition/offsets at all.
    // Clicking into the task-detail page queries the recorder's 24h DB
    // and shows the authoritative data.

    function renderAuxTaskSection(heading, items, subtitle) {
        if (!items.length) return;
        var box = document.createElement('div');
        box.className = 'mt-4 p-2 rounded border border-cream-200';
        box.style.background = '#fff';

        var hdr = document.createElement('div');
        hdr.className = 'text-xs uppercase tracking-wide text-gray-500 mb-1';
        hdr.textContent = heading + ' (' + items.length + ')';
        box.appendChild(hdr);

        if (subtitle) {
            var sub = document.createElement('div');
            sub.className = 'text-xs text-gray-400 mb-2';
            sub.textContent = subtitle;
            box.appendChild(sub);
        }

        var list = document.createElement('div');
        list.className = 'space-y-1';
        for (var i = 0; i < items.length; i++) {
            var it = items[i];
            var row = document.createElement('div');
            row.className = 'flex items-center gap-2 text-xs font-mono';

            var dot = document.createElement('span');
            dot.style.cssText = 'display:inline-block;width:8px;height:8px;border-radius:50%;';
            var status = it.task ? it.task.status : 'unknown';
            dot.style.background = status === 'completed' ? '#34d399'
                : status === 'failed' ? '#f87171'
                : status === 'running' ? '#fbbf24'
                : '#e5e7eb';
            row.appendChild(dot);

            var tLink = document.createElement('a');
            tLink.href = '/task/' + encodeURIComponent(baseTaskId(it.task_id));
            tLink.className = 'text-ink-800 hover:underline';
            tLink.textContent = it.task_id;
            row.appendChild(tLink);

            var stat = document.createElement('span');
            stat.style.cssText = statusCss(status);
            stat.textContent = status;
            row.appendChild(stat);

            if (it.task && Array.isArray(it.task.source_offsets) && it.task.source_offsets.length) {
                var off = document.createElement('span');
                off.className = 'text-gray-500';
                off.textContent = 'source offsets: ' + it.task.source_offsets.join(', ');
                row.appendChild(off);
            }
            list.appendChild(row);
        }
        box.appendChild(list);
        body.appendChild(box);
    }

    renderAuxTaskSection(
        'Other tasks',
        otherTasks,
        "In this batch's task_ids, but their source_offsets don't overlap the message offsets above.",
    );
    renderAuxTaskSection(
        'Unknown tasks',
        unknownTasks,
        'No live state (pruned after the 10-minute timeline window, or not yet delivered via WS). Click through for authoritative data from the recorder.',
    );
}

// === Completion-hook tabs: Task Results / Message Results / Window Results ===
//
// Each feed is a flat reverse-chronological list capped at MAX_HISTORY and
// rendered into its own <tbody>. WS events prepend; the 5s resync reloads
// the latest N via the dedicated endpoint. Sidebars open on row click and
// fetch per-row sink-type breakdown on demand via /api/live/sink-breakdown.
// None of this code runs if the handler doesn't implement the corresponding
// hook (HOOK_FLAGS gates loads + WS handling; the templates gate the DOM).

function durSec(sec) {
    if (sec == null) return '-';
    if (sec < 1) return (sec * 1000).toFixed(0) + 'ms';
    return sec.toFixed(2) + 's';
}

// Shared helper — ``ok / fail / replaced`` numbers with bold colored style,
// matching the Arrange tab's makeStatusCounts aesthetic. Zero-count segments
// still render (padded) so the column aligns visually row-to-row.
function makeTaskBreakdown(succeeded, failed, replaced) {
    var wrap = document.createElement('span');
    wrap.className = 'font-mono text-xs';
    function part(n, color, bold) {
        var s = document.createElement('span');
        s.style.cssText = 'color:' + color + ';margin-right:8px;' + (bold && n ? 'font-weight:700;' : '');
        s.textContent = n;
        wrap.appendChild(s);
    }
    part(succeeded || 0, '#059669', true);
    part(failed || 0, '#dc2626', true);
    part(replaced || 0, '#d97706', true);
    return wrap;
}

// Renders a ``kafka.results: 3 · postgres.main: 1 · redis.cache: 1`` line
// from a {sink_name: count} map. Returns an empty span when the map is
// empty — the caller can append without a feature flag.
function makeSinkBreakdown(counts) {
    var wrap = document.createElement('span');
    wrap.className = 'font-mono text-xs';
    var keys = counts ? Object.keys(counts).sort() : [];
    if (!keys.length) {
        var muted = document.createElement('span');
        muted.className = 'text-gray-400';
        muted.textContent = '(no sink outputs)';
        wrap.appendChild(muted);
        return wrap;
    }
    keys.forEach(function(k, i) {
        var s = document.createElement('span');
        s.style.cssText = 'color:#0d9488;margin-right:10px;';
        s.textContent = k + ': ';
        var n = document.createElement('span');
        n.style.cssText = 'color:#1a1a1a;font-weight:600;';
        n.textContent = counts[k];
        s.appendChild(n);
        wrap.appendChild(s);
    });
    return wrap;
}

async function fetchSinkBreakdown(partition, offsets) {
    if (partition == null || !offsets || !offsets.length) return {};
    try {
        var r = await fetch('/api/live/sink-breakdown', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({partition: partition, offsets: offsets}),
        });
        if (!r.ok) return {};
        return await r.json();
    } catch(ex) {
        return {};
    }
}

// --- Task Results tab ---

function taskResultKey(r) { return r ? (r.ts + ':' + r.task_id) : null; }

// Common helper: populate a partition <select> with distinct partitions
// from the feed array, preserving the user's current selection unless the
// partition no longer exists.
function updateResultsPartitionFilter(selectId, feed) {
    var sel = document.getElementById(selectId);
    if (!sel) return;
    var seen = {};
    for (var i = 0; i < feed.length; i++) {
        if (feed[i].partition != null) seen[feed[i].partition] = true;
    }
    var parts = Object.keys(seen).map(function(p) { return Number(p); }).sort(function(a, b) { return a - b; });
    var prev = sel.value;
    sel.replaceChildren();
    var all = document.createElement('option'); all.value = ''; all.textContent = 'All';
    sel.appendChild(all);
    for (var j = 0; j < parts.length; j++) {
        var o = document.createElement('option');
        o.value = String(parts[j]);
        o.textContent = 'P' + parts[j];
        sel.appendChild(o);
    }
    if (prev && parts.indexOf(Number(prev)) !== -1) sel.value = prev;
}

// Format source offsets compactly: "P5:142" for single, "P5:142+2" for
// fan-in (first offset + count of remaining). Hover title shows full list.
function makeSourceCell(partition, offsets) {
    var td = document.createElement('td');
    td.className = 'py-2 px-3 font-mono text-xs';
    if (partition == null) {
        td.textContent = '-';
        return td;
    }
    if (!offsets || !offsets.length) {
        // No source offsets (task_started not found in the recorder's
        // current retention window). Fall back to partition-only link.
        var p = document.createElement('a');
        p.href = '/partitions/' + partition;
        p.className = 'text-teal-600 hover:underline';
        p.textContent = 'P' + partition;
        p.onclick = function(ev) { ev.stopPropagation(); };
        td.appendChild(p);
        return td;
    }
    var firstOffset = offsets[0];
    var traceLink = document.createElement('a');
    traceLink.href = '/debug#trace/' + partition + '/' + firstOffset;
    traceLink.className = 'text-teal-600 hover:underline';
    traceLink.textContent = 'P' + partition + ':' + firstOffset;
    traceLink.onclick = function(ev) { ev.stopPropagation(); };
    traceLink.title = offsets.length > 1
        ? 'covers offsets: ' + offsets.join(', ')
        : 'offset ' + firstOffset;
    td.appendChild(traceLink);
    if (offsets.length > 1) {
        var more = document.createElement('span');
        more.className = 'text-gray-400';
        more.style.marginLeft = '4px';
        more.textContent = '+' + (offsets.length - 1);
        more.title = 'Fan-in — additional offsets: ' + offsets.slice(1).join(', ');
        td.appendChild(more);
    }
    var kIcon = makeKafkaUiIcon(KAFKA_SOURCE_TOPIC, partition, firstOffset);
    if (kIcon) {
        kIcon.onclick = function(ev) { ev.stopPropagation(); };
        td.appendChild(kIcon);
    }
    return td;
}

function taskResultMatchesFilter(r) {
    if (taskResultsFilter.partition !== '' && String(r.partition) !== taskResultsFilter.partition) return false;
    if (taskResultsFilter.failedOnly && r.status !== 'failed') return false;
    var q = taskResultsFilter.search.trim().toLowerCase();
    if (!q) return true;
    var hay = [
        r.task_id || '',
        (r.source_offsets || []).join(' '),
    ].join(' ').toLowerCase();
    return hay.indexOf(q) !== -1;
}

function renderTaskResults() {
    if (!HOOK_FLAGS.task_complete) return;
    var el = document.getElementById('task-results-total');
    if (el) el.textContent = '(' + taskResultsTotal + ')';
    updateResultsPartitionFilter('task-results-filter-partition', recentTaskResults);
    var body = document.getElementById('task-results-body');
    if (!body) return;
    body.replaceChildren();
    var visible = 0;
    for (var i = 0; i < recentTaskResults.length; i++) {
        var r = recentTaskResults[i];
        if (!taskResultMatchesFilter(r)) continue;
        visible++;

        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-100 hover:bg-cream-100 cursor-pointer';
        if (selectedTaskResultKey === taskResultKey(r)) tr.style.background = '#e0f2fe';
        (function(row) {
            tr.onclick = function(ev) { ev.stopPropagation(); openTaskResultDetail(row); };
        })(r);

        var td1 = document.createElement('td'); td1.className = 'py-2 px-3 text-xs text-gray-500';
        td1.textContent = fmtTimeMs(r.ts);

        var td2 = document.createElement('td'); td2.className = 'py-2 px-3 font-mono text-xs';
        var taskLink = document.createElement('a');
        taskLink.href = '/task/' + encodeURIComponent(baseTaskId(r.task_id || ''));
        taskLink.className = 'text-purple-600 hover:underline';
        taskLink.textContent = r.task_id || '-';
        taskLink.onclick = function(ev) { ev.stopPropagation(); };
        td2.appendChild(taskLink);

        var td3 = makeSourceCell(r.partition, r.source_offsets);

        var td4 = document.createElement('td'); td4.className = 'py-2 px-3 font-mono text-xs';
        td4.textContent = durSec(r.exec_duration);
        if (r.exec_duration != null) td4.style.color = durColor(r.exec_duration);

        var td5 = document.createElement('td'); td5.className = 'py-2 px-3 font-mono text-xs';
        td5.textContent = durSec(r.hook_duration);
        if (r.hook_duration != null) td5.style.color = durColor(r.hook_duration);

        var td6 = document.createElement('td'); td6.className = 'py-2 px-3 font-mono text-xs font-semibold';
        td6.textContent = r.output_message_count != null ? r.output_message_count : '-';

        var td7 = document.createElement('td'); td7.className = 'py-2 px-3 font-mono text-xs font-semibold';
        // Status pulled from the paired task_completed/task_failed event.
        // ``null`` means we couldn't find it in the batch lookup — happens
        // when the subprocess event is outside the row's retention window
        // or was filtered out. Surface as "?" rather than fabricating.
        if (r.status === 'completed') { td7.style.color = '#059669'; td7.textContent = 'completed'; }
        else if (r.status === 'failed') { td7.style.color = '#dc2626'; td7.textContent = 'failed' + (r.exit_code != null ? ' (' + r.exit_code + ')' : ''); }
        else { td7.style.color = '#9ca3af'; td7.textContent = '?'; }

        tr.append(td1, td2, td3, td4, td5, td6, td7);
        body.appendChild(tr);
    }
    if (!visible) {
        var etr = document.createElement('tr'); var etd = document.createElement('td');
        etd.colSpan = 7; etd.className = 'py-3 text-center text-gray-400';
        etd.textContent = recentTaskResults.length
            ? 'No rows match the current filter'
            : 'No on_task_complete() calls yet';
        etr.appendChild(etd); body.appendChild(etr);
    }
    var matched = document.getElementById('task-results-matched');
    if (matched) matched.textContent = visible + ' of ' + recentTaskResults.length + ' shown';
}

function openTaskResultDetail(r) {
    selectedTaskResultKey = taskResultKey(r);
    var panel = document.getElementById('task-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(0)';
    renderTaskResultDetail(r);
    renderTaskResults();
}
function closeTaskResultsDetail() {
    selectedTaskResultKey = null;
    var panel = document.getElementById('task-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(100%)';
    renderTaskResults();
}
window.closeTaskResultsDetail = closeTaskResultsDetail;

function renderTaskResultDetail(r) {
    var body = document.getElementById('task-results-detail-body');
    var title = document.getElementById('task-results-detail-title');
    if (!body) return;
    if (title) title.textContent = (r.task_id || 'Task') + ' @ ' + fmtTimeMs(r.ts);
    body.replaceChildren();

    var kv = function(label, value, color) {
        var row = document.createElement('div'); row.className = 'mb-2';
        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'; val.textContent = value;
        if (color) val.style.color = color;
        row.append(lbl, val);
        body.appendChild(row);
    };
    kv('Task ID', r.task_id || '-');
    kv('Partition', r.partition != null ? 'P' + r.partition : '-');
    kv('Exec duration', durSec(r.exec_duration), durColor(r.exec_duration || 0));
    kv('Hook duration', durSec(r.hook_duration), durColor(r.hook_duration || 0));
    kv('Outputs', r.output_message_count != null ? String(r.output_message_count) : '-');
    kv('Status', r.status || 'unknown');

    // Sink breakdown block — fetched on open, inserted when ready.
    var sinkHdr = document.createElement('div');
    sinkHdr.className = 'text-xs text-gray-500 uppercase tracking-wide mt-4 mb-1';
    sinkHdr.textContent = 'Sink outputs';
    body.appendChild(sinkHdr);
    var sinkBody = document.createElement('div');
    sinkBody.className = 'mb-3 text-xs text-gray-400';
    sinkBody.textContent = 'loading…';
    body.appendChild(sinkBody);

    var links = document.createElement('div');
    links.className = 'mt-4 flex gap-2';
    var taskLink = document.createElement('a');
    taskLink.href = '/task/' + encodeURIComponent(baseTaskId(r.task_id || ''));
    taskLink.className = 'px-3 py-1 rounded bg-cream-200 hover:bg-cream-300 text-sm text-teal-600';
    taskLink.textContent = 'Open task detail →';
    links.appendChild(taskLink);
    body.appendChild(links);

    // We don't know the source offsets here (would need a task_started
    // lookup). Pull them from the /api/live/arrange-tasks endpoint; that
    // response includes source_offsets.
    fetch('/api/live/arrange-tasks', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({task_ids: [r.task_id]}),
    }).then(function(resp) { return resp.json(); }).then(function(map) {
        var t = map[r.task_id] || {};
        var offsets = Array.isArray(t.source_offsets) ? t.source_offsets : [];
        if (!offsets.length || r.partition == null) {
            sinkBody.replaceChildren();
            sinkBody.appendChild(document.createTextNode('(no source offsets found — task may have aged out of the recorder)'));
            return;
        }
        return fetchSinkBreakdown(r.partition, offsets).then(function(counts) {
            sinkBody.replaceChildren();
            sinkBody.appendChild(makeSinkBreakdown(counts));
        });
    }).catch(function() {
        sinkBody.replaceChildren();
        sinkBody.appendChild(document.createTextNode('(failed to load sink breakdown)'));
    });
}

async function loadTaskResults() {
    if (!HOOK_FLAGS.task_complete) return;
    try {
        var limit = Math.max(10 * PARTITION_COUNT, 30);
        var r = await fetch('/api/live/task-results?limit=' + limit);
        var arr = await r.json();
        recentTaskResults = Array.isArray(arr) ? arr : [];
        taskResultsTotal = recentTaskResults.length;
    } catch(ex) {}
}

// --- Message Results tab ---

function messageResultKey(r) { return r ? (r.ts + ':' + r.partition + ':' + r.offset) : null; }

function messageResultMatchesFilter(r) {
    if (messageResultsFilter.partition !== '' && String(r.partition) !== messageResultsFilter.partition) return false;
    if (messageResultsFilter.issuesOnly && !(r.failed > 0 || r.replaced > 0)) return false;
    var q = messageResultsFilter.search.trim().toLowerCase();
    if (!q) return true;
    var hay = (r.partition + ':' + r.offset).toLowerCase();
    return hay.indexOf(q) !== -1;
}

function renderMessageResults() {
    if (!HOOK_FLAGS.message_complete) return;
    var el = document.getElementById('message-results-total');
    if (el) el.textContent = '(' + messageResultsTotal + ')';
    updateResultsPartitionFilter('message-results-filter-partition', recentMessageResults);
    var body = document.getElementById('message-results-body');
    if (!body) return;
    body.replaceChildren();
    var visible = 0;
    for (var i = 0; i < recentMessageResults.length; i++) {
        var r = recentMessageResults[i];
        if (!messageResultMatchesFilter(r)) continue;
        visible++;
        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-100 hover:bg-cream-100 cursor-pointer';
        if (selectedMessageResultKey === messageResultKey(r)) tr.style.background = '#e0f2fe';
        (function(row) {
            tr.onclick = function(ev) { ev.stopPropagation(); openMessageResultDetail(row); };
        })(r);

        var td1 = document.createElement('td'); td1.className = 'py-2 px-3 text-xs text-gray-500';
        td1.textContent = fmtTimeMs(r.ts);

        var td2 = document.createElement('td'); td2.className = 'py-2 px-3 font-mono text-xs';
        if (r.partition != null && r.offset != null) {
            var offLink = document.createElement('a');
            offLink.href = '/debug#trace/' + r.partition + '/' + r.offset;
            offLink.className = 'text-teal-600 hover:underline';
            offLink.textContent = 'P' + r.partition + ':' + r.offset;
            offLink.onclick = function(ev) { ev.stopPropagation(); };
            td2.appendChild(offLink);
            var kIcon = makeKafkaUiIcon(KAFKA_SOURCE_TOPIC, r.partition, r.offset);
            if (kIcon) { kIcon.onclick = (function(orig) { return function(ev) { ev.stopPropagation(); if (orig) orig(ev); }; })(kIcon.onclick); td2.appendChild(kIcon); }
        } else {
            td2.textContent = '-';
        }

        var td3 = document.createElement('td'); td3.className = 'py-2 px-3 font-mono text-xs';
        td3.textContent = durSec(r.duration);
        if (r.duration != null) td3.style.color = durColor(r.duration);

        // End-to-end latency: consumed -> on_message_complete. Null when
        // the consumed event has aged out of the recorder's retention —
        // rare for recent rows, common after a rotation cycle. Fall back
        // to "-" with a tooltip explaining.
        var td4 = document.createElement('td'); td4.className = 'py-2 px-3 font-mono text-xs font-semibold';
        if (r.end_to_end_duration != null) {
            td4.textContent = durSec(r.end_to_end_duration);
            td4.style.color = durColor(r.end_to_end_duration);
            td4.title = 'Wall-clock: consumed → on_message_complete';
        } else {
            td4.textContent = '-';
            td4.style.color = '#9ca3af';
            td4.title = 'Consumed event not found in current retention window';
        }

        var td5 = document.createElement('td'); td5.className = 'py-2 px-3';
        td5.appendChild(makeTaskBreakdown(r.succeeded, r.failed, r.replaced));

        var td6 = document.createElement('td'); td6.className = 'py-2 px-3 font-mono text-xs font-semibold';
        td6.textContent = r.output_message_count != null ? r.output_message_count : '-';

        tr.append(td1, td2, td3, td4, td5, td6);
        body.appendChild(tr);
    }
    if (!visible) {
        var etr = document.createElement('tr'); var etd = document.createElement('td');
        etd.colSpan = 6; etd.className = 'py-3 text-center text-gray-400';
        etd.textContent = recentMessageResults.length
            ? 'No rows match the current filter'
            : 'No on_message_complete() calls yet';
        etr.appendChild(etd); body.appendChild(etr);
    }
    var matched = document.getElementById('message-results-matched');
    if (matched) matched.textContent = visible + ' of ' + recentMessageResults.length + ' shown';
}

function openMessageResultDetail(r) {
    selectedMessageResultKey = messageResultKey(r);
    var panel = document.getElementById('message-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(0)';
    renderMessageResultDetail(r);
    renderMessageResults();
}
function closeMessageResultsDetail() {
    selectedMessageResultKey = null;
    var panel = document.getElementById('message-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(100%)';
    renderMessageResults();
}
window.closeMessageResultsDetail = closeMessageResultsDetail;

function renderMessageResultDetail(r) {
    var body = document.getElementById('message-results-detail-body');
    var title = document.getElementById('message-results-detail-title');
    if (!body) return;
    if (title) title.textContent = 'P' + r.partition + ':' + r.offset + ' @ ' + fmtTimeMs(r.ts);
    body.replaceChildren();

    var summary = document.createElement('div');
    summary.className = 'mb-4 p-3 rounded border border-cream-200';
    summary.style.background = '#f9f8f5';
    var grid = document.createElement('div');
    grid.className = 'grid grid-cols-2 gap-x-4 gap-y-1 text-xs font-mono';
    function kv(k, v, color) {
        var kS = document.createElement('span'); kS.className = 'text-gray-500'; kS.textContent = k;
        var vS = document.createElement('span'); vS.textContent = v;
        if (color) vS.style.color = color;
        grid.appendChild(kS); grid.appendChild(vS);
    }
    kv('source', 'P' + r.partition + ':' + r.offset);
    kv('hook duration', durSec(r.duration), durColor(r.duration || 0));
    // End-to-end: consumed -> on_message_complete. Surfaces arrange +
    // queue-wait + subprocess + hook time as one number; hook duration
    // alone is just the last step, so the end-to-end is the useful
    // "message went in, result came out" SLI for the operator.
    if (r.end_to_end_duration != null) {
        kv('end-to-end', durSec(r.end_to_end_duration), durColor(r.end_to_end_duration));
    } else {
        kv('end-to-end', '—  (consumed event not in retention)', '#9ca3af');
    }
    kv('tasks', r.task_count != null ? r.task_count : '-');
    kv('outputs', r.output_message_count != null ? r.output_message_count : '-');
    summary.appendChild(grid);
    var stats = document.createElement('div'); stats.className = 'mt-2';
    stats.appendChild(makeTaskBreakdown(r.succeeded, r.failed, r.replaced));
    summary.appendChild(stats);
    body.appendChild(summary);

    var sinkHdr = document.createElement('div');
    sinkHdr.className = 'text-xs text-gray-500 uppercase tracking-wide mt-4 mb-1';
    sinkHdr.textContent = 'Sink outputs';
    body.appendChild(sinkHdr);
    var sinkBody = document.createElement('div');
    sinkBody.className = 'mb-3 text-xs text-gray-400';
    sinkBody.textContent = 'loading…';
    body.appendChild(sinkBody);

    var links = document.createElement('div'); links.className = 'mt-4 flex gap-2';
    var traceLink = document.createElement('a');
    traceLink.href = '/debug#trace/' + r.partition + '/' + r.offset;
    traceLink.className = 'px-3 py-1 rounded bg-cream-200 hover:bg-cream-300 text-sm text-teal-600';
    traceLink.textContent = 'Open trace →';
    links.appendChild(traceLink);
    var kIcon = makeKafkaUiIcon(KAFKA_SOURCE_TOPIC, r.partition, r.offset);
    if (kIcon) links.appendChild(kIcon);
    body.appendChild(links);

    fetchSinkBreakdown(r.partition, [r.offset]).then(function(counts) {
        sinkBody.replaceChildren();
        sinkBody.appendChild(makeSinkBreakdown(counts));
    });
}

async function loadMessageResults() {
    if (!HOOK_FLAGS.message_complete) return;
    try {
        var limit = Math.max(10 * PARTITION_COUNT, 30);
        var r = await fetch('/api/live/message-results?limit=' + limit);
        var arr = await r.json();
        recentMessageResults = Array.isArray(arr) ? arr : [];
        messageResultsTotal = recentMessageResults.length;
    } catch(ex) {}
}

// --- Window Results tab ---

function windowResultKey(r) { return r ? (r.ts + ':' + r.partition + ':' + r.window_id) : null; }

function windowResultMatchesFilter(r) {
    if (windowResultsFilter.partition !== '' && String(r.partition) !== windowResultsFilter.partition) return false;
    var q = windowResultsFilter.search.trim().toLowerCase();
    if (!q) return true;
    return String(r.window_id || '').toLowerCase().indexOf(q) !== -1;
}

function renderWindowResults() {
    if (!HOOK_FLAGS.window_complete) return;
    var el = document.getElementById('window-results-total');
    if (el) el.textContent = '(' + windowResultsTotal + ')';
    updateResultsPartitionFilter('window-results-filter-partition', recentWindowResults);
    var body = document.getElementById('window-results-body');
    if (!body) return;
    body.replaceChildren();
    var visible = 0;
    for (var i = 0; i < recentWindowResults.length; i++) {
        var r = recentWindowResults[i];
        if (!windowResultMatchesFilter(r)) continue;
        visible++;
        var tr = document.createElement('tr');
        tr.className = 'border-b border-cream-100 hover:bg-cream-100 cursor-pointer';
        if (selectedWindowResultKey === windowResultKey(r)) tr.style.background = '#e0f2fe';
        (function(row) {
            tr.onclick = function(ev) { ev.stopPropagation(); openWindowResultDetail(row); };
        })(r);

        var td1 = document.createElement('td'); td1.className = 'py-2 px-3 text-xs text-gray-500';
        td1.textContent = fmtTimeMs(r.ts);

        var td2 = document.createElement('td'); td2.className = 'py-2 px-3 font-mono text-xs';
        if (r.partition != null) {
            var partLink = document.createElement('a');
            partLink.href = '/partitions/' + r.partition;
            partLink.className = 'text-teal-600 hover:underline';
            partLink.textContent = 'P' + r.partition;
            partLink.onclick = function(ev) { ev.stopPropagation(); };
            td2.appendChild(partLink);
        } else {
            td2.textContent = '-';
        }

        var td3 = document.createElement('td'); td3.className = 'py-2 px-3 font-mono text-xs';
        td3.textContent = r.window_id != null ? '#' + r.window_id : '-';

        var td4 = document.createElement('td'); td4.className = 'py-2 px-3 font-mono text-xs';
        td4.textContent = durSec(r.duration);
        if (r.duration != null) td4.style.color = durColor(r.duration);

        var td5 = document.createElement('td'); td5.className = 'py-2 px-3 font-mono text-xs';
        td5.textContent = r.task_count != null ? r.task_count : '-';

        var td6 = document.createElement('td'); td6.className = 'py-2 px-3 font-mono text-xs font-semibold';
        td6.textContent = r.output_message_count != null ? r.output_message_count : '-';

        tr.append(td1, td2, td3, td4, td5, td6);
        body.appendChild(tr);
    }
    if (!visible) {
        var etr = document.createElement('tr'); var etd = document.createElement('td');
        etd.colSpan = 6; etd.className = 'py-3 text-center text-gray-400';
        etd.textContent = recentWindowResults.length
            ? 'No rows match the current filter'
            : 'No on_window_complete() calls yet';
        etr.appendChild(etd); body.appendChild(etr);
    }
    var matched = document.getElementById('window-results-matched');
    if (matched) matched.textContent = visible + ' of ' + recentWindowResults.length + ' shown';
}

function openWindowResultDetail(r) {
    selectedWindowResultKey = windowResultKey(r);
    var panel = document.getElementById('window-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(0)';
    renderWindowResultDetail(r);
    renderWindowResults();
}
function closeWindowResultsDetail() {
    selectedWindowResultKey = null;
    var panel = document.getElementById('window-results-detail-panel');
    if (panel) panel.style.transform = 'translateX(100%)';
    renderWindowResults();
}
window.closeWindowResultsDetail = closeWindowResultsDetail;

function renderWindowResultDetail(r) {
    var body = document.getElementById('window-results-detail-body');
    var title = document.getElementById('window-results-detail-title');
    if (!body) return;
    if (title) title.textContent = 'P' + r.partition + ' window #' + r.window_id + ' @ ' + fmtTimeMs(r.ts);
    body.replaceChildren();

    var summary = document.createElement('div');
    summary.className = 'mb-4 p-3 rounded border border-cream-200';
    summary.style.background = '#f9f8f5';
    var grid = document.createElement('div');
    grid.className = 'grid grid-cols-2 gap-x-4 gap-y-1 text-xs font-mono';
    function kv(k, v, color) {
        var kS = document.createElement('span'); kS.className = 'text-gray-500'; kS.textContent = k;
        var vS = document.createElement('span'); vS.textContent = v;
        if (color) vS.style.color = color;
        grid.appendChild(kS); grid.appendChild(vS);
    }
    kv('partition', r.partition != null ? 'P' + r.partition : '-');
    kv('window id', r.window_id != null ? '#' + r.window_id : '-');
    kv('hook duration', durSec(r.duration), durColor(r.duration || 0));
    kv('tasks', r.task_count != null ? r.task_count : '-');
    kv('outputs', r.output_message_count != null ? r.output_message_count : '-');
    summary.appendChild(grid);
    body.appendChild(summary);

    // Sink breakdown by collecting all message_complete offsets from this
    // partition in the same-ish timeframe as this window_complete. Best
    // effort: we walk our local recentMessageResults cache instead of
    // querying the DB — good enough for the LIVE view where recent
    // events are in memory. If empty, we say so and skip the breakdown.
    var sinkHdr = document.createElement('div');
    sinkHdr.className = 'text-xs text-gray-500 uppercase tracking-wide mt-4 mb-1';
    sinkHdr.textContent = 'Sink outputs';
    body.appendChild(sinkHdr);
    var sinkBody = document.createElement('div');
    sinkBody.className = 'mb-3 text-xs text-gray-400';
    sinkBody.textContent = 'loading…';
    body.appendChild(sinkBody);

    // Approximate offset set: any message_complete on the same partition
    // whose ts is within [r.ts - 60s, r.ts]. 60s is comfortably wider
    // than typical window durations without risking collisions.
    var minTs = r.ts - 60, maxTs = r.ts + 0.5;
    var offsets = [];
    for (var i = 0; i < recentMessageResults.length; i++) {
        var mr = recentMessageResults[i];
        if (mr.partition === r.partition && mr.ts >= minTs && mr.ts <= maxTs && mr.offset != null) {
            offsets.push(mr.offset);
        }
    }
    if (!offsets.length) {
        sinkBody.replaceChildren();
        sinkBody.appendChild(document.createTextNode('(no matching on_message_complete events in the live window — open the trace view for authoritative data)'));
    } else {
        fetchSinkBreakdown(r.partition, offsets).then(function(counts) {
            sinkBody.replaceChildren();
            sinkBody.appendChild(makeSinkBreakdown(counts));
        });
    }
}

async function loadWindowResults() {
    if (!HOOK_FLAGS.window_complete) return;
    try {
        var limit = Math.max(10 * PARTITION_COUNT, 30);
        var r = await fetch('/api/live/window-results?limit=' + limit);
        var arr = await r.json();
        recentWindowResults = Array.isArray(arr) ? arr : [];
        windowResultsTotal = recentWindowResults.length;
    } catch(ex) {}
}

// --- Click-outside-to-close for all three completion-hook sidebars ---
// Same pattern as Arrange/Cache: clicks inside the panel or the tab panel
// itself keep the sidebar open; clicks anywhere else close it.
function wireOutsideClick(panelId, tabPanelId, isOpenFn, closeFn) {
    document.addEventListener('click', function(ev) {
        if (!isOpenFn()) return;
        var panel = document.getElementById(panelId);
        if (panel && panel.contains(ev.target)) return;
        var tabPanel = document.getElementById(tabPanelId);
        if (tabPanel && tabPanel.contains(ev.target)) return;
        closeFn();
    });
}
wireOutsideClick(
    'task-results-detail-panel',
    'panel-task-results',
    function() { return selectedTaskResultKey !== null; },
    function() { closeTaskResultsDetail(); },
);
wireOutsideClick(
    'message-results-detail-panel',
    'panel-message-results',
    function() { return selectedMessageResultKey !== null; },
    function() { closeMessageResultsDetail(); },
);
wireOutsideClick(
    'window-results-detail-panel',
    'panel-window-results',
    function() { return selectedWindowResultKey !== null; },
    function() { closeWindowResultsDetail(); },
);

function makeLabelsTd(labels) {
    var td = document.createElement('td');
    td.className = 'py-2 px-3 text-xs';
    if (labels && Object.keys(labels).length) {
        Object.keys(labels).forEach(function(k) {
            var tag = document.createElement('span');
            tag.style.cssText = 'display:inline-block;background:#f0fdfa;border:1px solid #99f6e4;color:#0d9488;padding:0 3px;border-radius:3px;margin-right:4px;font-family:monospace;';
            tag.textContent = k + '=' + labels[k];
            td.appendChild(tag);
        });
    }
    return td;
}

function renderTaskLists() {
    // Running tasks are conveyed by the Timeline lanes above — the former
    // "Running" section was removed to avoid showing stale rows during
    // recorder-flush lag.
    var finished = [];
    var keys = Object.keys(allTasks);
    for (var i = 0; i < keys.length; i++) {
        var t = allTasks[keys[i]];
        if (t.status === 'completed' || t.status === 'failed') finished.push(t);
    }
    finished.sort(function(a, b) { return (b.end_ts || 0) - (a.end_ts || 0); });

    var fc = document.getElementById('finished-count');
    var fb = document.getElementById('finished-body');
    if (fc) fc.textContent = '(' + finished.length + ')';
    if (fb) {
        fb.replaceChildren();
        for (var fi = 0; fi < finished.slice(0, MAX_HISTORY).length; fi++) {
            var ft = finished[fi];
            var ftr = document.createElement('tr'); ftr.className = 'border-b border-cream-100 hover:bg-cream-100';
            var ftd1 = document.createElement('td'); ftd1.className = 'py-2 px-3 font-mono text-xs';
            var fa1 = document.createElement('a'); fa1.href = '/task/' + encodeURIComponent(baseTaskId(ft.task_id));
            fa1.className = 'hover:underline'; fa1.style.color = ft.status === 'completed' ? '#059669' : '#dc2626';
            fa1.textContent = ft.task_id; ftd1.appendChild(fa1);
            var ftd2 = document.createElement('td'); ftd2.className = 'py-2 px-3 font-mono'; ftd2.textContent = ft.partition;
            var ftdL = makeLabelsTd(ft.labels);
            var ftd3 = document.createElement('td'); ftd3.className = 'py-2 px-3';
            ftd3.style.color = ft.status === 'completed' ? '#059669' : '#dc2626'; ftd3.textContent = ft.status;
            var ftd4 = document.createElement('td'); ftd4.className = 'py-2 px-3 font-mono'; ftd4.textContent = ft.duration ? ft.duration.toFixed(2) + 's' : '';
            var ftd5 = document.createElement('td'); ftd5.className = 'py-2 px-3 text-gray-400 text-xs'; ftd5.textContent = ft.end_ts ? fmtTimeMs(ft.end_ts) : '';
            var ftd6 = document.createElement('td'); ftd6.className = 'py-2 px-3 font-mono text-xs text-gray-500 max-w-md truncate expandable cursor-pointer';
            ftd6.title = 'Click to expand'; ftd6.textContent = ft.args || '';
            var ftd7 = document.createElement('td'); ftd7.className = 'py-2 px-3 font-mono text-xs text-gray-400'; ftd7.textContent = fmtStdin(ft);
            ftr.append(ftd1, ftd2, ftdL, ftd3, ftd4, ftd5, ftd6, ftd7); fb.appendChild(ftr);
        }
        if (!finished.length) {
            var etr2 = document.createElement('tr'); var etd2 = document.createElement('td');
            etd2.colSpan = 8; etd2.className = 'py-3 text-center text-gray-400'; etd2.textContent = 'No finished tasks';
            etr2.appendChild(etd2); fb.appendChild(etr2);
        }
    }
}

// === Data loading ===
// Grace period (seconds) before reconciling a locally-"running" task that the
// server has no record of. Longer than the framework's default task_timeout so
// that genuinely long-running subprocesses don't get falsely reconciled — they
// WOULD appear in the API as 'running' entries and not match this condition.
var STALE_RUNNING_SEC = 180;

async function syncFromAPI() {
    // API sync merges data. It:
    //   - adds tasks from the server we don't know yet (pre-page-load history)
    //   - updates WS-running tasks when the server already has them finished
    //     (WS dropped the completion event — queue full, backgrounded tab, etc.)
    //   - reconciles "stuck running" tasks: local says running but the server
    //     has no record at all AND the start_ts is old enough that the
    //     recorder has definitely flushed — drop them to stop the Running
    //     count drifting upward
    //   - trims tasks that aged out of the timeline window
    try {
        var r = await fetch('/api/recent-tasks?minutes=' + TIMELINE_MINUTES);
        var data = await r.json();
        var tasks = data.tasks || [];

        // Build a lookup of server-known task ids for the reconcile step below.
        var apiIds = Object.create(null);
        for (var i = 0; i < tasks.length; i++) {
            apiIds[tasks[i].task_id] = true;
        }

        for (var i = 0; i < tasks.length; i++) {
            var apiTask = tasks[i];
            var existing = allTasks[apiTask.task_id];
            if (!existing) {
                // new task from API (pre-page-load history) — add it
                allTasks[apiTask.task_id] = apiTask;
            } else if (existing.status === 'running' && apiTask.end_ts) {
                // WS had it as running, API knows it finished — update end state
                existing.end_ts = apiTask.end_ts;
                existing.status = apiTask.status;
                existing.duration = apiTask.duration;
                existing.pid = apiTask.pid || existing.pid;
            }
            // otherwise keep the WS-maintained version (it has fresher data)
        }

        // Reconcile "stuck running" tasks. If local has a task flagged as
        // running but the server's authoritative view has no record of it
        // (task_started event never made it to the DB, or it's already been
        // rotated out of the recent window), AND the start_ts is old enough
        // that it would have flushed long ago, remove it from local state.
        // Without this the Running counter and lane bars creep upward whenever
        // WS drops a task_completed under load (queue full, browser-backgrounded
        // tab throttled, brief disconnect window).
        var staleCutoffTs = Date.now() / 1000 - STALE_RUNNING_SEC;
        var localIds = Object.keys(allTasks);
        for (var j = 0; j < localIds.length; j++) {
            var id = localIds[j];
            var lt = allTasks[id];
            if (
                lt.status === 'running' &&
                !apiIds[id] &&
                lt.start_ts &&
                lt.start_ts < staleCutoffTs
            ) {
                delete allTasks[id];
            }
        }

        // trim tasks that aged out of the visible timeline window
        var cutoff = Date.now() / 1000 - TIMELINE_MINUTES * 60;
        var keys = Object.keys(allTasks);
        for (var k = 0; k < keys.length; k++) {
            var tk = allTasks[keys[k]];
            var endOrStart = tk.end_ts || tk.start_ts;
            if (endOrStart && endOrStart < cutoff) { delete allTasks[keys[k]]; }
        }
    } catch(e) {}
}

// Fetch authoritative task state from the recorder DB for a specific set
// of task_ids. Used by the Arrange tab to fill in state for tasks that
// aged out of the 10-minute timeline window (/api/recent-tasks cut-off)
// or were filtered by ws_min_duration_ms on the WS path. Called both on
// initial load and on every 5s resync; payload is the union of task_ids
// across currently-visible batches.
async function fetchArrangeTaskStates(ids) {
    if (!ids || !ids.length) return {};
    try {
        var r = await fetch('/api/live/arrange-tasks', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({task_ids: ids}),
        });
        if (!r.ok) return {};
        return await r.json();
    } catch(ex) {
        return {};
    }
}

// Collect the union of task_ids from all visible arrange batches. The cap
// at ARRANGE_CAP matches what the sidebar actually renders, so we never
// fetch state for batches the user can't see.
function collectVisibleArrangeTaskIds() {
    var ids = [];
    var seen = Object.create(null);
    var n = Math.min(recentArranges.length, ARRANGE_CAP);
    for (var i = 0; i < n; i++) {
        var batchIds = recentArranges[i].task_ids || [];
        for (var j = 0; j < batchIds.length; j++) {
            var tid = batchIds[j];
            if (!tid || seen[tid]) continue;
            seen[tid] = true;
            ids.push(tid);
        }
    }
    return ids;
}

// Merge rules for DB-sourced task state into allTasks:
//  - Missing in allTasks → insert verbatim
//  - Running in allTasks but DB has end_ts → upgrade to final state
//    (catches WS-dropped completion events + ws_min_duration filtered ones)
//  - Missing source_offsets / partition locally but DB has them → fill in
//  - Otherwise keep WS-maintained state (always fresher than DB flush)
function mergeArrangeTaskStates(states) {
    for (var tid in states) {
        var api = states[tid];
        var existing = allTasks[tid];
        if (!existing) {
            allTasks[tid] = api;
            continue;
        }
        if (existing.status === 'running' && api.end_ts) {
            existing.end_ts = api.end_ts;
            existing.status = api.status;
            existing.duration = api.duration;
            existing.exit_code = api.exit_code;
            if (api.pid) existing.pid = api.pid;
        }
        if (!existing.source_offsets && api.source_offsets) {
            existing.source_offsets = api.source_offsets;
        }
        if (existing.partition == null && api.partition != null) {
            existing.partition = api.partition;
        }
    }
}

async function refreshArrangeTaskStates() {
    var ids = collectVisibleArrangeTaskIds();
    if (!ids.length) return;
    var states = await fetchArrangeTaskStates(ids);
    mergeArrangeTaskStates(states);
}

async function loadArrangeHistory() {
    try {
        var r = await fetch('/api/events?event_types=arranged&limit=' + MAX_HISTORY);
        var events = await r.json();
        for (var i = 0; i < events.length; i++) {
            var e = events[i];
            var meta = {};
            try { meta = JSON.parse(e.metadata || '{}'); } catch(x) {}
            recentArranges.push({
                partition: e.partition,
                message_count: meta.message_count || (meta.offsets ? meta.offsets.length : 0),
                task_count: meta.task_count || 0,
                duration: e.duration || 0,
                ts: e.ts,
                labels: meta.message_labels || [],
                // offsets[] and task_ids[] power the sidebar's message tree
                // and the per-row status aggregation (counts/progress bar).
                // The recorder stores both in arranged.metadata — see
                // drakkar/recorder.py:record_arranged.
                offsets: meta.offsets || [],
                task_ids: meta.task_ids || [],
            });
        }
        arrangeTotal = recentArranges.length;
    } catch(ex) {}
}

// Boot-time loader for all three completion-hook tabs. Each call is a
// single SQL-backed GET — the feeds are independent, so we fire them in
// parallel. Runs regardless of HOOK_FLAGS; the individual loaders
// short-circuit when their flag is off.
async function loadCompletionHookResults() {
    await Promise.all([loadTaskResults(), loadMessageResults(), loadWindowResults()]);
}

// === WebSocket ===
function connectWS() {
    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    var ws = new WebSocket(proto + '//' + location.host + '/ws');
    ws.onopen = function() {
        var b = document.getElementById('ws-badge');
        if (b) { b.textContent = 'WS: connected'; b.style.background = '#d1fae5'; b.style.color = '#065f46'; b.style.border = '1px solid #6ee7b7'; }
        // Any events emitted during the disconnect window are not buffered
        // for us — they were delivered to no-one. Pull fresh state from the
        // DB so the reconcile loop can drop any tasks we think are still
        // running that actually finished while we were offline.
        if (!frozen) {
            syncFromAPI().then(function() {
                var ids = Object.keys(allTasks);
                for (var i = 0; i < ids.length; i++) {
                    if (!taskBars[ids[i]]) ensureBar(allTasks[ids[i]]);
                }
                pruneOldBars();
            });
        }
    };
    ws.onclose = function() {
        var b = document.getElementById('ws-badge');
        if (b) { b.textContent = 'WS: disconnected'; b.style.background = '#fecaca'; b.style.color = '#991b1b'; b.style.border = '1px solid #fca5a5'; }
        setTimeout(connectWS, 3000);
    };
    ws.onmessage = function(msg) {
        if (frozen) return;
        try {
            var e = JSON.parse(msg.data);
            if (e.event === 'task_started') {
                // if this task_id already exists and finished (retry), keep the old bar
                var prev = allTasks[e.task_id];
                if (prev && prev.end_ts) {
                    var retryKey = e.task_id + ':r' + e.ts;
                    allTasks[retryKey] = prev;
                    prev.task_id = retryKey;
                    // move the old bar's DOM entry to the new key
                    if (taskBars[e.task_id]) {
                        taskBars[retryKey] = taskBars[e.task_id];
                        taskBars[retryKey].task = prev;
                        delete taskBars[e.task_id];
                    }
                }
                var wsLabels = null;
                if (e.labels) { try { wsLabels = typeof e.labels === 'string' ? JSON.parse(e.labels) : e.labels; } catch(x) {} }
                var wsEnv = null;
                var wsSourceOffsets = null;
                if (e.metadata) {
                    try {
                        var wsMeta = typeof e.metadata === 'string' ? JSON.parse(e.metadata) : e.metadata;
                        wsEnv = wsMeta.env || null;
                        // source_offsets comes from the recorder's task_started
                        // metadata (see recorder.record_task_started). The
                        // Arrange tab's sidebar uses it to map each task to
                        // the exact messages it covers — essential for fan-in
                        // visualization, and to avoid the "shared(N) badge
                        // on everything" fallback in the sidebar.
                        wsSourceOffsets = Array.isArray(wsMeta.source_offsets) ? wsMeta.source_offsets : null;
                    } catch(x) {}
                }
                allTasks[e.task_id] = {
                    task_id: e.task_id, partition: e.partition, pid: e.pid,
                    start_ts: e.ts, end_ts: null, status: 'running', args: e.args, duration: null,
                    slot: e.slot != null ? e.slot : null,
                    stdin_lines: e.stdin_lines || 0, stdin_size: e.stdin_size || 0,
                    labels: wsLabels,
                    env: wsEnv,
                    source_offsets: wsSourceOffsets,
                };
                ensureBar(allTasks[e.task_id]);
            } else if (e.event === 'task_completed' || e.event === 'task_failed') {
                var t = allTasks[e.task_id];
                if (t) {
                    t.end_ts = e.ts; t.status = e.event === 'task_completed' ? 'completed' : 'failed';
                    t.duration = e.duration; t.pid = e.pid || t.pid;
                    ensureBar(t); // update color
                }
            } else if (e.event === 'arranged') {
                arrangeTotal++;
                // The WS frame forwards the full event including the raw
                // ``metadata`` JSON string — parse it to recover offsets[]
                // and task_ids[] so the sidebar can show the message→task
                // tree without a separate fetch.
                var arrMeta = {};
                if (e.metadata) {
                    try { arrMeta = typeof e.metadata === 'string' ? JSON.parse(e.metadata) : e.metadata; } catch(x) {}
                }
                recentArranges.unshift({
                    partition: e.partition,
                    message_count: e.message_count || (arrMeta.offsets ? arrMeta.offsets.length : 0),
                    task_count: e.task_count || (arrMeta.task_ids ? arrMeta.task_ids.length : 0),
                    duration: e.duration || 0,
                    ts: e.ts,
                    labels: e.message_labels || arrMeta.message_labels || [],
                    offsets: arrMeta.offsets || [],
                    task_ids: arrMeta.task_ids || [],
                });
                if (recentArranges.length > MAX_HISTORY) recentArranges.length = MAX_HISTORY;
                renderArranges();
                // Fan-in batches can arrive with task_ids whose task_started
                // hasn't been delivered yet via WS — or was filtered out by
                // ws_min_duration_ms. Fire a targeted lookup for just this
                // batch's task_ids so the sidebar isn't blank on first open.
                if (arrMeta.task_ids && arrMeta.task_ids.length) {
                    fetchArrangeTaskStates(arrMeta.task_ids).then(function(states) {
                        mergeArrangeTaskStates(states);
                        renderArranges();
                        if (selectedArrangeKey) renderArrangeDetail();
                    });
                }
            } else if (e.event === 'task_complete' && HOOK_FLAGS.task_complete) {
                // on_task_complete() hook finished. WS frame carries
                // duration (hook runtime) + metadata.output_message_count.
                // Exec duration + status land in a separate task_completed/
                // task_failed event — we lookup via allTasks (already
                // populated by the Executors tab's WS handlers).
                var tcMeta = {};
                try { tcMeta = JSON.parse(e.metadata || '{}'); } catch(x) {}
                var paired = allTasks[e.task_id];
                recentTaskResults.unshift({
                    ts: e.ts,
                    task_id: e.task_id,
                    partition: e.partition,
                    hook_duration: e.duration || 0,
                    exec_duration: paired ? paired.duration : null,
                    status: paired ? paired.status : null,
                    exit_code: null,
                    output_message_count: tcMeta.output_message_count || 0,
                });
                if (recentTaskResults.length > MAX_HISTORY) recentTaskResults.length = MAX_HISTORY;
                taskResultsTotal++;
                renderTaskResults();
            } else if (e.event === 'message_complete' && HOOK_FLAGS.message_complete) {
                var mcMeta = {};
                try { mcMeta = JSON.parse(e.metadata || '{}'); } catch(x) {}
                recentMessageResults.unshift({
                    ts: e.ts,
                    partition: e.partition,
                    offset: e.offset,
                    duration: e.duration || 0,
                    // End-to-end duration requires a DB-side join with the
                    // matching consumed event — WS only pushes the
                    // message_complete payload. The next 5s resync calls
                    // /api/live/message-results which computes end-to-end
                    // server-side and overwrites this feed wholesale.
                    end_to_end_duration: null,
                    task_count: mcMeta.task_count || 0,
                    succeeded: mcMeta.succeeded || 0,
                    failed: mcMeta.failed || 0,
                    replaced: mcMeta.replaced || 0,
                    output_message_count: mcMeta.output_message_count || 0,
                });
                if (recentMessageResults.length > MAX_HISTORY) recentMessageResults.length = MAX_HISTORY;
                messageResultsTotal++;
                renderMessageResults();
            } else if (e.event === 'window_complete' && HOOK_FLAGS.window_complete) {
                var wcMeta = {};
                try { wcMeta = JSON.parse(e.metadata || '{}'); } catch(x) {}
                recentWindowResults.unshift({
                    ts: e.ts,
                    partition: e.partition,
                    window_id: wcMeta.window_id,
                    duration: e.duration || 0,
                    task_count: wcMeta.task_count || 0,
                    output_message_count: wcMeta.output_message_count || 0,
                });
                if (recentWindowResults.length > MAX_HISTORY) recentWindowResults.length = MAX_HISTORY;
                windowResultsTotal++;
                renderWindowResults();
            }
            if (e.pool_active !== undefined) {
                var pe = document.getElementById('v-pool');
                if (pe) pe.textContent = e.pool_active + ' / ' + MAX_LANES;
                var we = document.getElementById('v-waiting');
                if (we) we.textContent = e.pool_waiting || 0;
            }
        } catch(err) {}
    };
}

// === Boot ===
function initFromHash() {
    var hash = location.hash.slice(1);
    switchTab(hash || 'execute');
}

// --- Arrange tab: filter wiring + live re-render ticker ---
function initArrangeTab() {
    var partSel = document.getElementById('arrange-filter-partition');
    var searchIn = document.getElementById('arrange-filter-search');
    var issuesCb = document.getElementById('arrange-filter-issues');
    if (partSel) partSel.addEventListener('change', function() {
        arrangeFilter.partition = partSel.value;
        renderArranges();
    });
    if (searchIn) searchIn.addEventListener('input', function() {
        arrangeFilter.search = searchIn.value;
        renderArranges();
    });
    if (issuesCb) issuesCb.addEventListener('change', function() {
        arrangeFilter.issuesOnly = issuesCb.checked;
        renderArranges();
    });
    // 1s ticker: refreshes the progress bar + counts + live latency by
    // re-reading from allTasks (which WS updates in real time). Also keeps
    // the sidebar detail fresh for the currently-selected batch. Guarded
    // by a frozen check and runs only when the Arrange panel is visible to
    // avoid wasted work on other tabs.
    setInterval(function() {
        if (frozen) return;
        var panel = document.getElementById('panel-arrange');
        if (!panel || panel.style.display === 'none') return;
        renderArranges();
        if (selectedArrangeKey) renderArrangeDetail();
    }, 1000);
}

// --- Completion-hook tab filter wiring ---
// Each tab has Partition + Search + (Issues/Failed) controls. Filters
// mutate only the per-tab filter state object; renderers intersect
// filters with the underlying feed at paint time. Input-event listeners
// apply instantly so typing in the search box filters live.
function initCompletionHookTabs() {
    if (HOOK_FLAGS.task_complete) {
        var tp = document.getElementById('task-results-filter-partition');
        var ts = document.getElementById('task-results-filter-search');
        var tf = document.getElementById('task-results-filter-failed');
        if (tp) tp.addEventListener('change', function() {
            taskResultsFilter.partition = tp.value;
            renderTaskResults();
        });
        if (ts) ts.addEventListener('input', function() {
            taskResultsFilter.search = ts.value;
            renderTaskResults();
        });
        if (tf) tf.addEventListener('change', function() {
            taskResultsFilter.failedOnly = tf.checked;
            renderTaskResults();
        });
    }
    if (HOOK_FLAGS.message_complete) {
        var mp = document.getElementById('message-results-filter-partition');
        var ms = document.getElementById('message-results-filter-search');
        var mi = document.getElementById('message-results-filter-issues');
        if (mp) mp.addEventListener('change', function() {
            messageResultsFilter.partition = mp.value;
            renderMessageResults();
        });
        if (ms) ms.addEventListener('input', function() {
            messageResultsFilter.search = ms.value;
            renderMessageResults();
        });
        if (mi) mi.addEventListener('change', function() {
            messageResultsFilter.issuesOnly = mi.checked;
            renderMessageResults();
        });
    }
    if (HOOK_FLAGS.window_complete) {
        var wp = document.getElementById('window-results-filter-partition');
        var ws_ = document.getElementById('window-results-filter-search');
        if (wp) wp.addEventListener('change', function() {
            windowResultsFilter.partition = wp.value;
            renderWindowResults();
        });
        if (ws_) ws_.addEventListener('input', function() {
            windowResultsFilter.search = ws_.value;
            renderWindowResults();
        });
    }
}

(async function() {
    ensureAnchor();
    await Promise.all([syncFromAPI(), loadArrangeHistory(), loadCompletionHookResults()]);
    // Right after loading arranged batches, fetch the authoritative state
    // of their task_ids. Without this, any batch older than 10 minutes
    // would render with "unknown" tasks until the next 5s resync.
    await refreshArrangeTaskStates();
    initFromHash();
    initBars();
    rebuildAxis();
    renderArranges();
    renderTaskResults();
    renderMessageResults();
    renderWindowResults();
    initArrangeTab();
    initCompletionHookTabs();
    connectWS();
    // rAF loop: updates bar positions/widths + scroll at 60fps
    requestAnimationFrame(animateTimeline);
    // task list tables (running/finished) — update every 500ms
    setInterval(function() { if (!frozen) renderTaskLists(); }, 500);
    // prune old bars + API sync + axis ticks every 5s. Also refresh the
    // Arrange tab's task-state lookup AND the three completion-hook feeds
    // so their lists don't stale out if a handler emits at low rate and
    // we happen to miss a WS frame.
    setInterval(function() {
        if (frozen) return;
        rebuildAxis();
        syncFromAPI().then(function() {
            var ids = Object.keys(allTasks);
            for (var i = 0; i < ids.length; i++) {
                if (!taskBars[ids[i]]) ensureBar(allTasks[ids[i]]);
            }
            pruneOldBars();
        });
        refreshArrangeTaskStates();
        // Refresh the completion-hook feeds from their dedicated endpoints.
        // Cheap: one indexed scan per feed, limited to N rows.
        loadTaskResults().then(renderTaskResults);
        loadMessageResults().then(renderMessageResults);
        loadWindowResults().then(renderWindowResults);
    }, 5000);
})();

window.addEventListener('hashchange', initFromHash);

document.addEventListener('keydown', function(ev) {
    if (ev.key === ' ' && ev.target === document.body) {
        ev.preventDefault();
        toggleFreeze();
    }
});
</script>
{% endblock %}