{% extends "base.html" %}
{% block title %}Timeline — Rustvello Monitor{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="/static/css/timeline.css">
<style>
  #invocation-details-panel .detail-label { font-weight: 600; color: #495057; min-width: 110px; display: inline-block; }
  #invocation-details-panel .detail-value { word-break: break-all; }
  .timeline-filter-bar .form-label { font-size: 11px; margin-bottom: 2px; font-weight: 600; }
  .timeline-filter-bar .form-select,
  .timeline-filter-bar .form-control { font-size: 12px; padding: 4px 8px; }
  .invocation-highlight { filter: brightness(1.12); }
  .runner-highlight { filter: brightness(1.15); }
  .ft-hover .ft-node:not(.ft-related) { opacity: 0.3; }
  .ft-hover .ft-edge:not(.ft-related) { opacity: 0.15; }
  .timeline-runner-info { font-size: 11px; }
  .timeline-zoom-active { cursor: crosshair; user-select: none; }
  .timeline-zoom-dragging { cursor: col-resize; }
  .timeline-zoom-selection { fill: rgba(13, 110, 253, 0.18); stroke: #0d6efd; stroke-width: 1; pointer-events: none; }
  .overlap-highlight { r: 6; stroke: #1e293b; stroke-width: 2.5; }
  #overlap-tooltip {
    position: fixed; display: none; z-index: 2000; pointer-events: none;
    background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 6px 10px;
    font-size: 11px; line-height: 1.6; max-width: 320px;
  }
  #overlap-tooltip .ot-row { display: flex; align-items: center; gap: 6px; }
  #overlap-tooltip .ot-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
  #overlap-tooltip .ot-status { font-weight: 600; }
  #overlap-tooltip .ot-inv { font-size: 10px; color: #6c757d; font-family: monospace; }
</style>
{% endblock %}
{% block content %}
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="h4 mb-0 text-primary">
      <span class="material-icons align-middle me-2" style="font-size: 28px">timeline</span>
      Invocation Timeline
    </h2>
    <a href="/invocations" class="btn btn-sm btn-outline-secondary">
      <span class="material-icons align-middle" style="font-size: 16px">list_alt</span>
      Back to List
    </a>
  </div>

  <section class="timeline-filter-bar mb-2" aria-label="Timeline filters">
    <div class="monitor-filter-header">
      <button class="timeline-filter-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#timeline-filter-fields" aria-expanded="false" aria-controls="timeline-filter-fields">
        <span class="d-inline-flex align-items-center gap-2">
          <span class="material-icons" aria-hidden="true">tune</span>
          <strong>Filters</strong>
        </span>
      </button>
      {% include "components/filter_summary.html" %}
      <span class="material-icons timeline-filter-chevron" aria-hidden="true">expand_more</span>
    </div>
    <div class="collapse" id="timeline-filter-fields">
      <form method="get" action="/invocations/timeline" id="timeline-filter-form" class="timeline-filter-grid">
            <div>
              <label class="form-label" for="time_range">Time Range</label>
              <select name="time_range" id="time_range" class="form-select">
                <option value="1m" {% if current_filters.time_range == "1m" %}selected{% endif %}>1m</option>
                <option value="5m" {% if current_filters.time_range == "5m" %}selected{% endif %}>5m</option>
                <option value="15m" {% if current_filters.time_range == "15m" %}selected{% endif %}>15m</option>
                <option value="1h" {% if current_filters.time_range == "1h" %}selected{% endif %}>1h</option>
                <option value="3h" {% if current_filters.time_range == "3h" %}selected{% endif %}>3h</option>
                <option value="12h" {% if current_filters.time_range == "12h" %}selected{% endif %}>12h</option>
                <option value="1d" {% if current_filters.time_range == "1d" %}selected{% endif %}>1d</option>
                <option value="3d" {% if current_filters.time_range == "3d" %}selected{% endif %}>3d</option>
                <option value="1w" {% if current_filters.time_range == "1w" %}selected{% endif %}>1w</option>
                <option value="custom" {% if current_filters.time_range == "custom" %}selected{% endif %}>custom</option>
              </select>
            </div>
            <div id="custom-date-fields" class="timeline-filter-dates" style="{% if current_filters.time_range != "custom" %}display:none{% endif %}">
              <label class="form-label" for="start_date">Start</label>
              <input type="datetime-local" name="start_date" id="start_date" class="form-control" step="0.001" value="{{ current_filters.start_date }}">
              <label class="form-label mt-1" for="end_date">End</label>
              <input type="datetime-local" name="end_date" id="end_date" class="form-control" step="0.001" value="{{ current_filters.end_date }}">
            </div>
            <div>
              <label class="form-label" for="filter_task_id">Task ID</label>
              <select name="task_id" id="filter_task_id" class="form-select">
                <option value="">All Tasks</option>
                {% for tid in all_task_ids %}
                <option value="{{ tid }}" {% if *tid == current_filters.task_id %}selected{% endif %}>{{ tid }}</option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="form-label" for="filter_limit">Limit</label>
              <select name="limit" id="filter_limit" class="form-select">
                <option value="100" {% if current_filters.limit == "100" %}selected{% endif %}>100</option>
                <option value="500" {% if current_filters.limit == "500" %}selected{% endif %}>500</option>
                <option value="1000" {% if current_filters.limit == "1000" %}selected{% endif %}>1000</option>
                <option value="5000" {% if current_filters.limit == "5000" %}selected{% endif %}>5000</option>
                <option value="20000" {% if current_filters.limit == "20000" %}selected{% endif %}>20000</option>
                <option value="50000" {% if current_filters.limit == "50000" %}selected{% endif %}>50000</option>
                <option value="" {% if current_filters.limit == "" %}selected{% endif %}>No limit</option>
              </select>
            </div>
            <div>
              <label class="form-label" for="filter_workflow_type">Workflow Type</label>
              <select name="workflow_type" id="filter_workflow_type" class="form-select">
                <option value="">All</option>
                {% for wt in all_workflow_types %}
                <option value="{{ wt }}" {% if *wt == current_filters.workflow_type %}selected{% endif %}>{{ wt }}</option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="form-label" for="filter_workflow_id">Workflow ID</label>
              <input type="text" name="workflow_id" id="filter_workflow_id" class="form-control" value="{{ current_filters.workflow_id }}" placeholder="Workflow ID">
            </div>
            <div>
              <label class="form-label" for="filter_inv_ids">Invocation Scope</label>
              <input type="text" name="inv_ids" id="filter_inv_ids" class="form-control" value="{{ current_filters.inv_ids }}" placeholder="Comma-separated IDs" spellcheck="false" autocomplete="off">
            </div>
            {% if !current_filters.runner_ids.is_empty() %}<input type="hidden" name="runner_ids" value="{{ current_filters.runner_ids }}">{% endif %}
            {% if !selected_invocation.is_empty() %}
            <input type="hidden" name="selected" value="{{ selected_invocation }}">
            {% endif %}
            <button type="submit" class="btn btn-sm btn-primary timeline-filter-apply">
              <span class="material-icons align-middle" style="font-size: 14px">filter_list</span>
              Apply
            </button>
      </form>
    </div>
  </section>

  <div class="timeline-main">
      <div class="card pynmon-card">
        <div class="card-header pynmon-card-header compact-header d-flex justify-content-between align-items-center">
          <span>Timeline</span>
          <div class="d-flex align-items-center gap-2">
            <span class="text-muted" style="font-size: 11px" id="hover-info"></span>
            <button id="timeline-range-zoom" class="btn btn-sm btn-outline-secondary" type="button" aria-label="Select timeline range to zoom" aria-pressed="false" title="Select timeline range to zoom">
              <span class="material-icons align-middle" style="font-size: 15px" aria-hidden="true">zoom_in</span>
            </button>
          </div>
        </div>
        <div class="card-body pynmon-card-body p-2">
          <div id="timeline-container" class="timeline-svg-container" style="overflow-x: auto; overflow-y: auto; width: 100%">
            {{ svg_content|safe }}
          </div>
          {% include "partials/histogram.html" %}
        </div>
      </div>

      <div id="invocation-choice-panel" class="card pynmon-card mt-3 d-none">
        <div class="card-header pynmon-card-header compact-header">Invocations at this point</div>
        <div class="card-body pynmon-card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover pynmon-table mb-0">
              <thead><tr><th>Status</th><th>Task</th><th>Invocation ID</th><th></th></tr></thead>
              <tbody id="invocation-choice-list"></tbody>
            </table>
          </div>
          <nav id="invocation-choice-pagination" class="monitor-pagination d-none" aria-label="Invocations at this point pagination">
            <div class="monitor-pagination-summary" id="invocation-choice-page-info"></div>
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" id="invocation-choice-prev-item"><button type="button" class="page-link" id="invocation-choice-prev">Previous</button></li>
              <li class="page-item active"><span class="page-link" id="invocation-choice-current-page">1</span></li>
              <li class="page-item" id="invocation-choice-next-item"><button type="button" class="page-link" id="invocation-choice-next">Next</button></li>
            </ul>
          </nav>
        </div>
      </div>

      <!-- Invocation Details Panel -->
      <div id="invocation-details-panel" class="card pynmon-card mt-3 d-none">
        <div class="card-header pynmon-card-header compact-header d-flex justify-content-between align-items-center">
          <span>
            <span class="material-icons align-middle me-1" style="font-size: 18px">info</span>
            Invocation Details
          </span>
          <div class="d-flex gap-2">
            <button class="btn btn-sm btn-outline-info" id="panel-zoom-btn" title="Zoom to this invocation's time range">
              <span class="material-icons align-middle" style="font-size: 14px">zoom_in</span>
              Zoom to Invocation
            </button>
            <button class="btn btn-sm btn-outline-success" id="panel-tree-btn" title="Show family tree">
              <span class="material-icons align-middle" style="font-size: 14px">account_tree</span>
              Family Tree
            </button>
            <a href="#" id="panel-view-detail" class="btn btn-sm btn-outline-primary" target="_blank">
              <span class="material-icons align-middle" style="font-size: 14px">open_in_new</span>
              View Full Details
            </a>
            <button class="btn btn-sm btn-outline-secondary" id="panel-close-btn">
              <span class="material-icons align-middle" style="font-size: 14px">close</span>
            </button>
          </div>
        </div>
        <div class="card-body pynmon-card-body" id="panel-body">
          <p class="text-muted">Click an invocation in the timeline to see details.</p>
        </div>
      </div>

      <!-- Family Tree Panel (inline, below details) -->
      <div id="family-tree-panel" class="card pynmon-card mt-3" style="display:none;overflow:hidden;">
        <div id="ft-header" class="card-header pynmon-card-header compact-header d-flex justify-content-between align-items-center" style="cursor:default;user-select:none;">
          <span style="font-size:13px;font-weight:600;color:#495057;white-space:nowrap;">
            <span class="material-icons align-middle me-1" style="font-size:16px">account_tree</span>
            Family Tree
          </span>
          <span style="display:inline-flex;align-items:center;gap:4px;">
            <button id="ft-zoom-out" class="btn btn-sm btn-outline-secondary" style="padding:0 5px;line-height:1.3;font-size:13px" title="Zoom out">&minus;</button>
            <span id="ft-zoom-label" style="font-size:11px;color:#6c757d;min-width:36px;text-align:center">100%</span>
            <button id="ft-zoom-in" class="btn btn-sm btn-outline-secondary" style="padding:0 5px;line-height:1.3;font-size:13px" title="Zoom in">&plus;</button>
            <button id="ft-float-btn" class="btn btn-sm btn-outline-secondary" style="padding:0 6px;line-height:1.4;font-size:14px" title="Toggle floating window">
              <span class="material-icons align-middle" style="font-size:14px">open_in_new</span>
            </button>
            <button id="ft-collapse-btn" class="btn btn-sm btn-outline-secondary" style="padding:0 6px;line-height:1.4;font-size:14px" title="Collapse / Expand">&#x2015;</button>
            <button id="ft-close-btn" class="btn btn-sm btn-outline-secondary" style="padding:0 6px;line-height:1.4;font-size:14px" title="Close">&times;</button>
          </span>
        </div>
        <div id="ft-body" class="card-body pynmon-card-body" style="overflow:auto;padding:0;max-height:60vh;">
          <span class="text-muted" style="font-size:12px;padding:8px;display:inline-block">Loading family tree&hellip;</span>
        </div>
      </div>
  </div>
</div>

<div id="overlap-tooltip"></div>

<script>
(function() {
  // --- Current invocation tracked for zoom + URL persistence ---
  var currentInvId = null;
  var currentHistory = null;

  // --- Timeline range zoom -------------------------------------------------
  // The SVG carries its own UTC bounds, so the browser can convert a drag
  // selection without guessing from CSS dimensions or server-side state.
  var rangeZoom = { enabled: false, dragging: false, startX: 0, currentX: 0 };
  var timelineContainer = document.getElementById('timeline-container');
  var rangeZoomButton = document.getElementById('timeline-range-zoom');

  function timelineSvg() {
    return timelineContainer && timelineContainer.querySelector('svg');
  }

  function timelineBounds(svg) {
    if (!svg || !svg.dataset.timelineStart || !svg.dataset.timelineEnd) return null;
    var start = new Date(svg.dataset.timelineStart);
    var end = new Date(svg.dataset.timelineEnd);
    var left = Number(svg.dataset.timelineLeft);
    var right = Number(svg.dataset.timelineRight);
    if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime()) ||
        !Number.isFinite(left) || !Number.isFinite(right) || right <= left) return null;
    return { start: start, end: end, left: left, right: right, width: right - left };
  }

  function clientToTimelineX(svg, event) {
    var bounds = timelineBounds(svg);
    var matrix = svg && svg.getScreenCTM && svg.getScreenCTM();
    if (!bounds || !matrix) return null;
    var point = svg.createSVGPoint();
    point.x = event.clientX;
    point.y = event.clientY;
    var svgPoint;
    try { svgPoint = point.matrixTransform(matrix.inverse()); } catch (error) { return null; }
    return Math.max(bounds.left, Math.min(bounds.right, svgPoint.x));
  }

  function updateRangeSelection(svg, startX, currentX) {
    var rect = svg.querySelector('#timeline-zoom-selection');
    if (!rect) {
      rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.id = 'timeline-zoom-selection';
      rect.setAttribute('y', '0');
      rect.setAttribute('height', String(svg.viewBox.baseVal.height || 0));
      rect.setAttribute('class', 'timeline-zoom-selection');
      svg.appendChild(rect);
    }
    rect.setAttribute('x', Math.min(startX, currentX).toFixed(1));
    rect.setAttribute('width', Math.abs(currentX - startX).toFixed(1));
  }

  function clearRangeSelection() {
    var rect = document.getElementById('timeline-zoom-selection');
    if (rect) rect.remove();
  }

  function setRangeZoomEnabled(enabled) {
    rangeZoom.enabled = enabled;
    rangeZoom.dragging = false;
    if (rangeZoomButton) {
      rangeZoomButton.classList.toggle('active', enabled);
      rangeZoomButton.setAttribute('aria-pressed', enabled ? 'true' : 'false');
    }
    if (timelineContainer) {
      timelineContainer.classList.toggle('timeline-zoom-active', enabled);
      timelineContainer.classList.remove('timeline-zoom-dragging');
    }
    if (!enabled) clearRangeSelection();
  }

  function zoomToRange(svg, startX, endX) {
    var bounds = timelineBounds(svg);
    if (!bounds || Math.abs(endX - startX) < 8) return;
    var left = Math.min(startX, endX);
    var right = Math.max(startX, endX);
    var duration = bounds.end.getTime() - bounds.start.getTime();
    var start = new Date(bounds.start.getTime() + duration * ((left - bounds.left) / bounds.width));
    var end = new Date(bounds.start.getTime() + duration * ((right - bounds.left) / bounds.width));
    if (end <= start) return;
    var params = new URLSearchParams(window.location.search);
    params.set('time_range', 'custom');
    params.set('start_date', start.toISOString().slice(0, 23));
    params.set('end_date', end.toISOString().slice(0, 23));
    window.location.href = RustvelloMonitoringLinks.timelineFromCurrent(Object.fromEntries(params));
  }

  if (rangeZoomButton && timelineContainer) {
    var initialSvg = timelineSvg();
    if (!timelineBounds(initialSvg)) rangeZoomButton.disabled = true;
    rangeZoomButton.addEventListener('click', function() {
      if (!rangeZoomButton.disabled) setRangeZoomEnabled(!rangeZoom.enabled);
    });
    timelineContainer.addEventListener('pointerdown', function(event) {
      if (!rangeZoom.enabled || event.button !== 0) return;
      var svg = timelineSvg();
      var x = clientToTimelineX(svg, event);
      if (x === null) return;
      event.preventDefault();
      event.stopPropagation();
      rangeZoom.dragging = true;
      rangeZoom.startX = x;
      rangeZoom.currentX = x;
      timelineContainer.classList.add('timeline-zoom-dragging');
      if (timelineContainer.setPointerCapture) timelineContainer.setPointerCapture(event.pointerId);
      updateRangeSelection(svg, x, x);
    });
    timelineContainer.addEventListener('pointermove', function(event) {
      if (!rangeZoom.dragging) return;
      var svg = timelineSvg();
      var x = clientToTimelineX(svg, event);
      if (x === null) return;
      event.preventDefault();
      rangeZoom.currentX = x;
      updateRangeSelection(svg, rangeZoom.startX, x);
    });
    timelineContainer.addEventListener('pointerup', function(event) {
      if (!rangeZoom.dragging) return;
      var svg = timelineSvg();
      var x = clientToTimelineX(svg, event) || rangeZoom.currentX;
      event.preventDefault();
      event.stopPropagation();
      if (timelineContainer.releasePointerCapture) timelineContainer.releasePointerCapture(event.pointerId);
      timelineContainer.classList.remove('timeline-zoom-dragging');
      rangeZoom.dragging = false;
      if (Math.abs(x - rangeZoom.startX) >= 8) {
        setRangeZoomEnabled(false);
        zoomToRange(svg, rangeZoom.startX, x);
      } else {
        clearRangeSelection();
      }
    });
    timelineContainer.addEventListener('pointercancel', function() {
      rangeZoom.dragging = false;
      timelineContainer.classList.remove('timeline-zoom-dragging');
      clearRangeSelection();
    });
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape' && rangeZoom.enabled) setRangeZoomEnabled(false);
    });
  }

  // --- Filter form: show/hide custom date fields ---
  var timeRangeSelect = document.getElementById('time_range');
  var customFields = document.getElementById('custom-date-fields');
  if (timeRangeSelect) {
    timeRangeSelect.addEventListener('change', function() {
      customFields.style.display = this.value === 'custom' ? '' : 'none';
    });
  }

  // --- Status class mapping ---
  function getStatusClass(status) {
    var map = {
      'Registered': 'bg-secondary',
      'Pending': 'bg-warning text-dark', 'PendingRecovery': 'bg-warning text-dark',
      'Running': 'bg-info', 'RunningRecovery': 'bg-info',
      'Success': 'bg-success', 'Failed': 'bg-danger', 'Killed': 'bg-danger',
      'Paused': 'bg-primary',
      'Retry': 'bg-secondary', 'Rerouted': 'bg-info',
      'ConcurrencyControlled': 'bg-warning', 'ConcurrencyControlledFinal': 'bg-danger'
    };
    return map[status] || 'bg-secondary';
  }

  function formatUTCDate(isoStr) {
    if (!isoStr) return '—';
    try {
      var d = new Date(isoStr);
      var ms = d.getUTCMilliseconds().toString().padStart(3, '0');
      return d.toISOString().replace('T', ' ').substring(0, 19) + '.' + ms + ' UTC';
    } catch(e) { return isoStr; }
  }

  function calculateDuration(history) {
    if (!history || history.length < 2) return 'N/A';
    var ms = new Date(history[history.length - 1].timestamp) - new Date(history[0].timestamp);
    if (ms < 1000) return ms + 'ms';
    if (ms < 60000) return (ms / 1000).toFixed(2) + 's';
    if (ms < 3600000) return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + 's';
    return Math.floor(ms / 3600000) + 'h ' + Math.floor((ms % 3600000) / 60000) + 'm';
  }

  // --- Cross-highlight helpers ---
  var timelineElementsByInvocation = new Map();
  var timelineElements = document.querySelectorAll('#timeline-container [data-invocation-id]');
  timelineElements.forEach(function(element) {
    var id = element.getAttribute('data-invocation-id');
    if (!id) return;
    if (!timelineElementsByInvocation.has(id)) timelineElementsByInvocation.set(id, []);
    timelineElementsByInvocation.get(id).push(element);
  });
  window.rustvelloTimelineElements = timelineElementsByInvocation;

  function setTimeCursor(startValue, endValue, visible) {
    var start = new Date(startValue);
    var end = new Date(endValue || startValue);
    var timestamp = (start.getTime() + end.getTime()) / 2;
    document.querySelectorAll('#timeline-container svg, .histogram-svg-container svg').forEach(function(svg) {
      var startAttr = svg.dataset.timelineStart || svg.dataset.histogramStart;
      var endAttr = svg.dataset.timelineEnd || svg.dataset.histogramEnd;
      var left = Number(svg.dataset.timelineLeft || svg.dataset.histogramLeft);
      var right = Number(svg.dataset.timelineRight || svg.dataset.histogramRight);
      var rangeStart = new Date(startAttr).getTime();
      var rangeEnd = new Date(endAttr).getTime();
      var cursor = svg.querySelector('.linked-time-cursor');
      if (!visible || !Number.isFinite(timestamp) || rangeEnd <= rangeStart) {
        if (cursor) cursor.remove();
        return;
      }
      if (!cursor) {
        cursor = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        cursor.setAttribute('class', 'linked-time-cursor');
        svg.appendChild(cursor);
      }
      var x = left + (timestamp - rangeStart) / (rangeEnd - rangeStart) * (right - left);
      cursor.setAttribute('x1', x.toFixed(1));
      cursor.setAttribute('x2', x.toFixed(1));
      cursor.setAttribute('y1', '0');
      cursor.setAttribute('y2', String(svg.viewBox.baseVal.height));
    });
  }
  window.rustvelloSetTimeCursor = setTimeCursor;

  var histogramScroll = document.querySelector('.histogram-svg-container');
  if (timelineContainer && histogramScroll) {
    var syncingScroll = false;
    function syncHorizontalScroll(source, target) {
      if (syncingScroll) return;
      syncingScroll = true;
      target.scrollLeft = source.scrollLeft;
      window.requestAnimationFrame(function() { syncingScroll = false; });
    }
    timelineContainer.addEventListener('scroll', function() {
      syncHorizontalScroll(timelineContainer, histogramScroll);
    }, { passive: true });
    histogramScroll.addEventListener('scroll', function() {
      syncHorizontalScroll(histogramScroll, timelineContainer);
    }, { passive: true });
  }

  function highlightInvocation(invId, on) {
    if (on === undefined) on = true;
    // Timeline SVG
    (timelineElementsByInvocation.get(String(invId)) || []).forEach(function(el) {
      el.classList.toggle('invocation-highlight', on);
    });
    // Family tree
    var ftBody = document.getElementById('ft-body');
    if (ftBody) {
      ftBody.querySelectorAll('.ft-node[data-inv-id="' + invId + '"] rect').forEach(function(el) {
        if (on) el.classList.add('invocation-highlight');
        else el.classList.remove('invocation-highlight');
      });
      ftBody.querySelectorAll('.ft-node[data-inv-id="' + invId + '"] text').forEach(function(el) {
        if (on) el.classList.add('invocation-highlight');
        else el.classList.remove('invocation-highlight');
      });
    }
  }
  function unhighlightInvocation(invId) { highlightInvocation(invId, false); }

  function highlightRunner(runnerId, on) {
    if (on === undefined) on = true;
    var container = document.getElementById('timeline-container');
    if (!container) return;
    container.querySelectorAll('[data-runner-id="' + runnerId + '"]').forEach(function(el) {
      if (on) el.classList.add('runner-highlight');
      else el.classList.remove('runner-highlight');
    });
  }
  function unhighlightRunner(runnerId) { highlightRunner(runnerId, false); }

  // Make these available globally for family tree panel
  window.highlightInvocation = highlightInvocation;
  window.unhighlightInvocation = unhighlightInvocation;
  window.currentInvocationId = null;

  // --- Overlap detection helpers ---
  var overlapTooltip = document.getElementById('overlap-tooltip');
  var overlapHighlighted = [];
  var OVERLAP_RADIUS = 8; // px threshold to consider dots as overlapping
  var circleSpatialIndex = new Map();

  document.querySelectorAll('#timeline-container circle[data-invocation-id]').forEach(function(circle) {
    var cx = parseFloat(circle.getAttribute('cx'));
    var cy = parseFloat(circle.getAttribute('cy'));
    var key = Math.floor(cx / OVERLAP_RADIUS) + ':' + Math.floor(cy / OVERLAP_RADIUS);
    if (!circleSpatialIndex.has(key)) circleSpatialIndex.set(key, []);
    circleSpatialIndex.get(key).push(circle);
  });

  function findNearbyCircles(target) {
    if (target.tagName !== 'circle') return [target];
    var svg = target.ownerSVGElement;
    if (!svg) return [target];
    var cx = parseFloat(target.getAttribute('cx'));
    var cy = parseFloat(target.getAttribute('cy'));
    var nearby = [];
    var cellX = Math.floor(cx / OVERLAP_RADIUS);
    var cellY = Math.floor(cy / OVERLAP_RADIUS);
    for (var xOffset = -1; xOffset <= 1; xOffset++) {
      for (var yOffset = -1; yOffset <= 1; yOffset++) {
        var candidates = circleSpatialIndex.get((cellX + xOffset) + ':' + (cellY + yOffset)) || [];
        for (var i = 0; i < candidates.length; i++) {
          var c = candidates[i];
          var dx = parseFloat(c.getAttribute('cx')) - cx;
          var dy = parseFloat(c.getAttribute('cy')) - cy;
          if (dx * dx + dy * dy <= OVERLAP_RADIUS * OVERLAP_RADIUS) nearby.push(c);
        }
      }
    }
    return nearby;
  }

  function showOverlapTooltip(circles, mouseX, mouseY) {
    if (!overlapTooltip || circles.length < 2) {
      hideOverlapTooltip();
      return;
    }
    var html = '';
    for (var i = 0; i < circles.length; i++) {
      var c = circles[i];
      var status = c.getAttribute('data-status') || '?';
      var color = c.getAttribute('fill') || '#6c757d';
      var invId = c.getAttribute('data-invocation-id') || '';
      var taskKey = c.getAttribute('data-task-key') || '';
      html += '<div class="ot-row">';
      html += '<span class="ot-dot" style="background:' + color + '"></span>';
      html += '<span class="ot-status">' + status + '</span>';
      if (invId) html += '<span class="ot-inv">' + invId.substring(0, 8) + '</span>';
      if (taskKey) html += '<span style="font-size:10px;color:#495057">' + taskKey + '</span>';
      html += '</div>';
    }
    overlapTooltip.innerHTML = html;
    overlapTooltip.style.display = 'block';
    // Position near cursor, offset to avoid being under mouse
    var tipW = overlapTooltip.offsetWidth;
    var tipH = overlapTooltip.offsetHeight;
    var left = mouseX + 14;
    var top = mouseY - tipH / 2;
    // Keep within viewport
    if (left + tipW > window.innerWidth - 8) left = mouseX - tipW - 14;
    if (top < 4) top = 4;
    if (top + tipH > window.innerHeight - 4) top = window.innerHeight - tipH - 4;
    overlapTooltip.style.left = left + 'px';
    overlapTooltip.style.top = top + 'px';
  }

  function hideOverlapTooltip() {
    if (overlapTooltip) overlapTooltip.style.display = 'none';
  }

  function clearOverlapHighlights() {
    for (var i = 0; i < overlapHighlighted.length; i++) {
      overlapHighlighted[i].classList.remove('overlap-highlight');
    }
    overlapHighlighted = [];
  }

  // --- SVG interaction: hover + click ---
  var container = document.getElementById('timeline-container');
  var hoverInfo = document.getElementById('hover-info');

  if (container) {
    container.addEventListener('mouseover', function(e) {
      var el = e.target.closest('[data-invocation-id]');
      if (el) {
        var invId = el.getAttribute('data-invocation-id');
        highlightInvocation(invId);
        var elementStart = el.getAttribute('data-start') || el.getAttribute('data-timestamp');
        var elementEnd = el.getAttribute('data-end') || elementStart;
        if (elementStart) setTimeCursor(elementStart, elementEnd, true);
        if (hoverInfo) hoverInfo.textContent = 'Invocation: ' + invId.substring(0, 12) + '...';

        // Overlap detection for circle elements
        if (el.tagName === 'circle') {
          clearOverlapHighlights();
          var nearby = findNearbyCircles(el);
          if (nearby.length > 1) {
            for (var i = 0; i < nearby.length; i++) {
              nearby[i].classList.add('overlap-highlight');
              var nInvId = nearby[i].getAttribute('data-invocation-id');
              if (nInvId !== invId) highlightInvocation(nInvId);
            }
            overlapHighlighted = nearby;
            showOverlapTooltip(nearby, e.clientX, e.clientY);
          }
        }
      }
      var runnerEl = e.target.closest('.runner-label[data-runner-id]');
      if (runnerEl) highlightRunner(runnerEl.getAttribute('data-runner-id'));
    });
    container.addEventListener('mouseout', function(e) {
      var el = e.target.closest('[data-invocation-id]');
      if (el) {
        var invId = el.getAttribute('data-invocation-id');
        // Don't un-highlight the currently selected invocation
        if (invId !== currentInvId) unhighlightInvocation(invId);
        // Clear overlap highlights for non-selected invocations
        for (var i = 0; i < overlapHighlighted.length; i++) {
          var nInvId = overlapHighlighted[i].getAttribute('data-invocation-id');
          if (nInvId !== currentInvId && nInvId !== invId) unhighlightInvocation(nInvId);
        }
        clearOverlapHighlights();
        hideOverlapTooltip();
        setTimeCursor(null, null, false);
      }
      var runnerEl = e.target.closest('.runner-label[data-runner-id]');
      if (runnerEl) unhighlightRunner(runnerEl.getAttribute('data-runner-id'));
      if (hoverInfo && !e.target.closest('[data-invocation-id]')) hoverInfo.textContent = '';
    });
    container.addEventListener('click', function(e) {
      var atomicEl = e.target.closest('.atomic-service-window[data-atomic-service]');
      if (atomicEl) {
        window.location.href = '/atomic-service';
        return;
      }
      var el = e.target.closest('rect[data-invocation-id], circle[data-invocation-id]');
      if (el) {
        if (el.tagName === 'circle') {
          var nearby = findNearbyCircles(el);
          if (nearby.length > 1) {
            showInvocationChoices(nearby);
            return;
          }
        }
        loadInvocationDetails(el.getAttribute('data-invocation-id'));
        return;
      }
      var runnerEl = e.target.closest('.runner-label[data-runner-id]');
      if (runnerEl) window.location.href = '/runners/' + encodeURIComponent(runnerEl.getAttribute('data-runner-id'));
    });
  }

  // --- Runner context hover in detail panel → highlight SVG lane ---
  document.addEventListener('mouseover', function(e) {
    var ri = e.target.closest('.timeline-runner-info[data-runner-id]');
    if (ri) highlightRunner(ri.getAttribute('data-runner-id'));
  });
  document.addEventListener('mouseout', function(e) {
    var ri = e.target.closest('.timeline-runner-info[data-runner-id]');
    if (ri) unhighlightRunner(ri.getAttribute('data-runner-id'));
  });

  // --- Details panel ---
  var panel = document.getElementById('invocation-details-panel');
  var choicePanel = document.getElementById('invocation-choice-panel');
  var choiceList = document.getElementById('invocation-choice-list');
  var choicePagination = document.getElementById('invocation-choice-pagination');
  var choicePageInfo = document.getElementById('invocation-choice-page-info');
  var choicePrevious = document.getElementById('invocation-choice-prev');
  var choiceNext = document.getElementById('invocation-choice-next');
  var choicePreviousItem = document.getElementById('invocation-choice-prev-item');
  var choiceNextItem = document.getElementById('invocation-choice-next-item');
  var choiceCurrentPage = document.getElementById('invocation-choice-current-page');
  var choiceState = { items: [], page: 0, pageSize: 10 };
  var panelBody = document.getElementById('panel-body');
  var panelLink = document.getElementById('panel-view-detail');
  var panelCloseBtn = document.getElementById('panel-close-btn');
  var panelZoomBtn = document.getElementById('panel-zoom-btn');
  var panelTreeBtn = document.getElementById('panel-tree-btn');

  if (panelCloseBtn) {
    panelCloseBtn.addEventListener('click', function() {
      if (currentInvId) unhighlightInvocation(currentInvId);
      panel.classList.add('d-none');
      currentInvId = null;
      currentHistory = null;
      window.currentInvocationId = null;
    });
  }

  // --- Zoom to Invocation ---
  if (panelZoomBtn) {
    panelZoomBtn.addEventListener('click', function() {
      if (!currentHistory || currentHistory.length === 0) return;
      var times = currentHistory.map(function(h) { return new Date(h.timestamp).getTime(); });
      var minT = Math.min.apply(null, times);
      var maxT = Math.max.apply(null, times);
      var span = maxT - minT;
      if (span < 1) span = 1;
      var fitted = RustvelloMonitoringLinks.fitWindow(minT, maxT, 0.82);
      var startDt = fitted.start;
      var endDt = fitted.end;
      function toLocalInput(d) {
        return d.getUTCFullYear() + '-' +
          String(d.getUTCMonth()+1).padStart(2,'0') + '-' +
          String(d.getUTCDate()).padStart(2,'0') + 'T' +
          String(d.getUTCHours()).padStart(2,'0') + ':' +
          String(d.getUTCMinutes()).padStart(2,'0') + ':' +
          String(d.getUTCSeconds()).padStart(2,'0') + '.' +
          String(d.getUTCMilliseconds()).padStart(3,'0');
      }
      var params = new URLSearchParams(window.location.search);
      params.set('time_range', 'custom');
      params.set('start_date', toLocalInput(startDt));
      params.set('end_date', toLocalInput(endDt));
      if (currentInvId) params.set('selected', currentInvId);
      if (currentInvId) params.set('inv_ids', currentInvId);
      window.location.href = RustvelloMonitoringLinks.timelineFromCurrent(Object.fromEntries(params));
    });
  }

  // --- Family Tree Panel: inline + float toggle + zoom ---
  (function() {
    var ftPanel = document.getElementById('family-tree-panel');
    var ftHeader = document.getElementById('ft-header');
    var ftBody = document.getElementById('ft-body');
    var ftCloseBtn = document.getElementById('ft-close-btn');
    var ftCollapseBtn = document.getElementById('ft-collapse-btn');
    var ftFloatBtn = document.getElementById('ft-float-btn');
    var ftZoomIn = document.getElementById('ft-zoom-in');
    var ftZoomOut = document.getElementById('ft-zoom-out');
    var ftZoomLbl = document.getElementById('ft-zoom-label');
    if (!ftPanel || !ftHeader) return;

    var zoomLevel = 100;
    var naturalW = 0, naturalH = 0;
    var ZOOM_STEP = 15, ZOOM_MIN = 25, ZOOM_MAX = 200;
    var ftCollapsed = false;
    var isFloating = false;
    var dragging = false, dx = 0, dy = 0;
    var resizing = false, resizeDir = '', startX = 0, startY = 0, startRect = {};

    function applyZoom() {
      var svg = ftBody.querySelector('svg');
      if (!svg) return;
      if (!naturalW) {
        var vb = svg.getAttribute('viewBox');
        if (vb) {
          var p = vb.split(/[\s,]+/).map(Number);
          naturalW = p[2]; naturalH = p[3];
        } else {
          naturalW = parseFloat(svg.getAttribute('width')) || 300;
          naturalH = parseFloat(svg.getAttribute('height')) || 200;
        }
      }
      var scale = zoomLevel / 100;
      svg.setAttribute('width', Math.round(naturalW * scale));
      svg.setAttribute('height', Math.round(naturalH * scale));
      svg.style.transform = '';
      ftZoomLbl.textContent = zoomLevel + '%';
    }

    function changeZoom(delta) {
      zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomLevel + delta));
      applyZoom();
    }

    if (ftZoomIn) ftZoomIn.addEventListener('click', function() { changeZoom(ZOOM_STEP); });
    if (ftZoomOut) ftZoomOut.addEventListener('click', function() { changeZoom(-ZOOM_STEP); });

    // Double-click to zoom toward cursor
    ftBody.addEventListener('dblclick', function(e) {
      e.preventDefault();
      var oldZoom = zoomLevel;
      zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomLevel + ZOOM_STEP));
      if (zoomLevel === oldZoom) return;
      var br = ftBody.getBoundingClientRect();
      var curX = e.clientX - br.left + ftBody.scrollLeft;
      var curY = e.clientY - br.top + ftBody.scrollTop;
      applyZoom();
      var ratio = zoomLevel / oldZoom;
      ftBody.scrollLeft = curX * ratio - (e.clientX - br.left);
      ftBody.scrollTop = curY * ratio - (e.clientY - br.top);
    });

    // Ctrl/Meta + mouse wheel to zoom
    ftBody.addEventListener('wheel', function(e) {
      if (!e.ctrlKey && !e.metaKey) return;
      e.preventDefault();
      var oldZoom = zoomLevel;
      var delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
      zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomLevel + delta));
      if (zoomLevel === oldZoom) return;
      var br = ftBody.getBoundingClientRect();
      var curX = e.clientX - br.left + ftBody.scrollLeft;
      var curY = e.clientY - br.top + ftBody.scrollTop;
      applyZoom();
      var ratio = zoomLevel / oldZoom;
      ftBody.scrollLeft = curX * ratio - (e.clientX - br.left);
      ftBody.scrollTop = curY * ratio - (e.clientY - br.top);
    }, { passive: false });

    // Re-apply zoom when body content changes
    var obs = new MutationObserver(function() {
      naturalW = 0; naturalH = 0;
      setTimeout(applyZoom, 30);
    });
    obs.observe(ftBody, { childList: true, subtree: true });

    // Close
    if (ftCloseBtn) ftCloseBtn.addEventListener('click', function() {
      ftPanel.style.display = 'none';
      if (isFloating) toggleFloat();
    });

    // Collapse / Expand
    if (ftCollapseBtn) {
      ftCollapseBtn.addEventListener('click', function() {
        ftCollapsed = !ftCollapsed;
        ftBody.style.display = ftCollapsed ? 'none' : '';
        ftCollapseBtn.innerHTML = ftCollapsed ? '&#x25A1;' : '&#x2015;';
      });
    }

    // --- Float / Dock toggle ---
    function toggleFloat() {
      isFloating = !isFloating;
      if (isFloating) {
        // Switch to floating
        ftPanel.style.position = 'fixed';
        ftPanel.style.bottom = '20px';
        ftPanel.style.right = '20px';
        ftPanel.style.left = 'auto';
        ftPanel.style.top = 'auto';
        ftPanel.style.width = '55vw';
        ftPanel.style.zIndex = '1050';
        ftPanel.style.boxShadow = '0 4px 24px rgba(0,0,0,0.18)';
        ftPanel.style.minWidth = '400px';
        ftPanel.style.maxHeight = '70vh';
        ftPanel.classList.remove('card', 'pynmon-card', 'mt-3');
        ftPanel.style.borderRadius = '8px';
        ftPanel.style.background = '#fff';
        ftPanel.style.border = '1px solid #dee2e6';
        ftHeader.style.cursor = 'move';
        ftFloatBtn.querySelector('.material-icons').textContent = 'picture_in_picture_alt';
        ftFloatBtn.title = 'Dock inline';
      } else {
        // Switch to inline
        ftPanel.style.position = '';
        ftPanel.style.bottom = '';
        ftPanel.style.right = '';
        ftPanel.style.left = '';
        ftPanel.style.top = '';
        ftPanel.style.width = '';
        ftPanel.style.zIndex = '';
        ftPanel.style.boxShadow = '';
        ftPanel.style.minWidth = '';
        ftPanel.style.maxHeight = '';
        ftPanel.style.borderRadius = '';
        ftPanel.style.background = '';
        ftPanel.style.border = '';
        ftPanel.classList.add('card', 'pynmon-card', 'mt-3');
        ftBody.style.maxHeight = '60vh';
        ftHeader.style.cursor = 'default';
        ftFloatBtn.querySelector('.material-icons').textContent = 'open_in_new';
        ftFloatBtn.title = 'Toggle floating window';
      }
    }
    if (ftFloatBtn) ftFloatBtn.addEventListener('click', toggleFloat);

    // Drag (only when floating)
    ftHeader.addEventListener('mousedown', function(e) {
      if (!isFloating || e.target.closest('button')) return;
      dragging = true;
      var r = ftPanel.getBoundingClientRect();
      dx = e.clientX - r.left;
      dy = e.clientY - r.top;
      ftPanel.style.left = r.left + 'px';
      ftPanel.style.top = r.top + 'px';
      ftPanel.style.right = 'auto';
      ftPanel.style.bottom = 'auto';
      ftPanel.style.transition = 'none';
      document.body.style.userSelect = 'none';
      e.preventDefault();
    });
    document.addEventListener('mousemove', function(e) {
      if (!dragging) return;
      ftPanel.style.left = (e.clientX - dx) + 'px';
      ftPanel.style.top = (e.clientY - dy) + 'px';
    });
    document.addEventListener('mouseup', function() {
      if (dragging) { dragging = false; document.body.style.userSelect = ''; }
    });

    // Touch drag (only when floating)
    ftHeader.addEventListener('touchstart', function(e) {
      if (!isFloating || e.target.closest('button')) return;
      var t = e.touches[0];
      dragging = true;
      var r = ftPanel.getBoundingClientRect();
      dx = t.clientX - r.left;
      dy = t.clientY - r.top;
      ftPanel.style.left = r.left + 'px';
      ftPanel.style.top = r.top + 'px';
      ftPanel.style.right = 'auto';
      ftPanel.style.bottom = 'auto';
    }, { passive: true });
    document.addEventListener('touchmove', function(e) {
      if (!dragging) return;
      var t = e.touches[0];
      ftPanel.style.left = (t.clientX - dx) + 'px';
      ftPanel.style.top = (t.clientY - dy) + 'px';
    }, { passive: true });
    document.addEventListener('touchend', function() { dragging = false; });

    // Family tree hover: cross-highlight
    function initFtHover(root) {
      var group = root.querySelector('#ft-group');
      if (!group) return;
      root.querySelectorAll('.ft-node').forEach(function(node) {
        node.addEventListener('mouseenter', function() {
          var id = node.getAttribute('data-inv-id');
          if (!id) return;
          group.classList.add('ft-hover');
          node.classList.add('ft-related');
          group.querySelectorAll('.ft-edge').forEach(function(edge) {
            if (edge.getAttribute('data-parent-id') === id || edge.getAttribute('data-child-id') === id) {
              edge.classList.add('ft-related');
              var otherId = edge.getAttribute('data-parent-id') === id
                ? edge.getAttribute('data-child-id')
                : edge.getAttribute('data-parent-id');
              var other = group.querySelector('.ft-node[data-inv-id="' + otherId + '"]');
              if (other) other.classList.add('ft-related');
            }
          });
          highlightInvocation(id);
        });
        node.addEventListener('mouseleave', function() {
          group.classList.remove('ft-hover');
          group.querySelectorAll('.ft-related').forEach(function(el) { el.classList.remove('ft-related'); });
          var id = node.getAttribute('data-inv-id');
          if (id && id !== currentInvId) unhighlightInvocation(id);
        });
      });
    }

    // --- Client-side focus toggling for family tree nodes ---
    function setFtFocus(newInvId) {
      var ftSvg = ftBody.querySelector('#ft-svg') || ftBody.querySelector('svg');
      if (!ftSvg) return;
      // Remove focus from old node
      var oldFocus = ftSvg.querySelector('.ft-node.ft-focus');
      if (oldFocus) {
        oldFocus.classList.remove('ft-focus');
        var tint = oldFocus.getAttribute('data-status-tint') || '#ffffff';
        var bg = oldFocus.querySelector('.ft-bg');
        if (bg) {
          bg.setAttribute('fill', tint);
          bg.setAttribute('stroke', '#dee2e6');
          bg.setAttribute('stroke-width', '1');
        }
        oldFocus.querySelectorAll('.ft-txt-pri').forEach(function(t) { t.setAttribute('fill', '#212529'); });
        oldFocus.querySelectorAll('.ft-txt-sec').forEach(function(t) { t.setAttribute('fill', '#495057'); });
        oldFocus.querySelectorAll('.ft-txt-mut').forEach(function(t) { t.setAttribute('fill', '#6c757d'); });
        var ring = oldFocus.querySelector('.ft-focus-ring');
        if (ring) ring.setAttribute('display', 'none');
      }
      // Apply focus to new node
      if (!newInvId) return;
      var newNode = ftSvg.querySelector('.ft-node[data-inv-id="' + newInvId + '"]');
      if (!newNode) return;
      newNode.classList.add('ft-focus');
      var color = newNode.getAttribute('data-status-color') || '#6c757d';
      var bg = newNode.querySelector('.ft-bg');
      if (bg) {
        bg.setAttribute('fill', color);
        bg.setAttribute('stroke', '#212529');
        bg.setAttribute('stroke-width', '3');
      }
      newNode.querySelectorAll('.ft-txt-pri').forEach(function(t) { t.setAttribute('fill', '#ffffff'); });
      newNode.querySelectorAll('.ft-txt-sec').forEach(function(t) { t.setAttribute('fill', 'rgba(255,255,255,0.85)'); });
      newNode.querySelectorAll('.ft-txt-mut').forEach(function(t) { t.setAttribute('fill', 'rgba(255,255,255,0.7)'); });
      var ring = newNode.querySelector('.ft-focus-ring');
      if (ring) {
        ring.setAttribute('stroke', color);
        ring.removeAttribute('display');
      }
    }

    // Family tree click: load details for clicked node + update focus
    ftBody.addEventListener('click', function(e) {
      var link = e.target.closest('a.ft-node, .ft-node[data-inv-id]');
      if (!link) return;
      e.preventDefault();
      e.stopImmediatePropagation();
      var invId = link.getAttribute('data-inv-id');
      if (invId) {
        setFtFocus(invId);
        loadInvocationDetails(invId, { skipTree: true });
      }
    });

    // Family tree hover: cross-highlight when hovering tree nodes
    ftBody.addEventListener('mouseover', function(e) {
      var node = e.target.closest('[data-inv-id]');
      if (node) highlightInvocation(node.getAttribute('data-inv-id'));
    });
    ftBody.addEventListener('mouseout', function(e) {
      var node = e.target.closest('[data-inv-id]');
      if (!node) return;
      var id = node.getAttribute('data-inv-id');
      if (id !== currentInvId) unhighlightInvocation(id);
    });

    // Load family tree
    window._ftLoadTree = function(focusId) {
      ftPanel.style.display = 'block';
      ftBody.innerHTML = '<span class="text-muted" style="font-size:12px;padding:8px;display:inline-block">Loading hierarchy&hellip;</span>';
      fetch('/invocations/' + encodeURIComponent(focusId) + '/family-tree')
        .then(function(r) { return r.ok ? r.text() : ''; })
        .then(function(svg) {
          ftBody.innerHTML = svg;
          naturalW = 0; naturalH = 0;
          applyZoom();
          var ftSvg = ftBody.querySelector('#ft-svg') || ftBody.querySelector('svg');
          if (ftSvg) initFtHover(ftSvg);
        })
        .catch(function(err) {
          ftBody.innerHTML = '<p class="text-danger" style="font-size:12px;padding:8px">Failed: ' + err.message + '</p>';
        });
    };
  })();

  // --- Open family tree from details panel ---
  if (panelTreeBtn) {
    panelTreeBtn.addEventListener('click', function() {
      if (!currentInvId) return;
      if (typeof window._ftLoadTree === 'function') window._ftLoadTree(currentInvId);
    });
  }

  // --- Load invocation details ---
  function loadInvocationDetails(invId, opts) {
    opts = opts || {};
    // Un-highlight previously selected invocation
    if (currentInvId) unhighlightInvocation(currentInvId);
    currentInvId = invId;
    window.currentInvocationId = invId;
    panel.classList.remove('d-none');
    panelBody.innerHTML = '<p class="text-muted">Loading...</p>';
    panelLink.href = '/invocations/' + encodeURIComponent(invId);

    // Highlight the selected invocation
    highlightInvocation(invId);

    // Load family tree (unless skipTree)
    if (!opts.skipTree && typeof window._ftLoadTree === 'function') {
      window._ftLoadTree(invId);
    }

    Promise.all([
      fetch('/invocations/' + encodeURIComponent(invId) + '/api').then(function(r) { return r.json(); }),
      fetch('/invocations/' + encodeURIComponent(invId) + '/history').then(function(r) { return r.json(); })
    ]).then(function(results) {
      var apiData = results[0];
      var historyData = results[1];
      currentHistory = historyData;
      renderDetailsPanel(invId, apiData, historyData);
    }).catch(function(err) {
      panelBody.innerHTML = '<p class="text-danger">Failed to load details: ' + err.message + '</p>';
    });
  }
  // Make globally available for family tree click handler
  window.loadInvocationDetails = loadInvocationDetails;

  function showInvocationChoices(elements) {
    if (!choicePanel || !choiceList) return;
    var seen = new Set();
    var choices = elements.filter(function(element) {
      var id = element.getAttribute('data-invocation-id');
      if (!id || seen.has(id)) return false;
      seen.add(id);
      return true;
    });
    if (choices.length < 2) return;
    choiceState.items = choices.map(function(element) {
      return {
        id: element.getAttribute('data-invocation-id'),
        status: element.getAttribute('data-status') || 'Invocation',
        task: element.getAttribute('data-task-key') || 'unknown task'
      };
    });
    choiceState.page = 0;
    renderInvocationChoices();
    choicePanel.classList.remove('d-none');
  }

  function renderInvocationChoices() {
    if (!choiceList) return;
    var start = choiceState.page * choiceState.pageSize;
    var end = Math.min(start + choiceState.pageSize, choiceState.items.length);
    var pageCount = Math.max(1, Math.ceil(choiceState.items.length / choiceState.pageSize));
    choiceList.innerHTML = '';
    choiceState.items.slice(start, end).forEach(function(choice) {
      var row = document.createElement('tr');
      var status = document.createElement('td');
      var statusBadge = document.createElement('span');
      statusBadge.className = 'badge bg-secondary';
      statusBadge.textContent = choice.status;
      status.appendChild(statusBadge);
      var task = document.createElement('td');
      var taskCode = document.createElement('code');
      taskCode.textContent = choice.task;
      task.appendChild(taskCode);
      var id = document.createElement('td');
      var idCode = document.createElement('code');
      idCode.className = 'small text-muted';
      idCode.textContent = choice.id;
      id.appendChild(idCode);
      var action = document.createElement('td');
      var button = document.createElement('button');
      button.type = 'button';
      button.className = 'btn btn-sm btn-outline-primary';
      button.textContent = 'Details';
      button.addEventListener('click', function() { loadInvocationDetails(choice.id); });
      action.appendChild(button);
      row.appendChild(status); row.appendChild(task); row.appendChild(id); row.appendChild(action);
      choiceList.appendChild(row);
    });
    if (choicePagination) choicePagination.classList.toggle('d-none', pageCount <= 1);
    if (choicePageInfo) choicePageInfo.textContent = 'Showing ' + (start + 1) + '-' + end + ' of ' + choiceState.items.length;
    var previousDisabled = choiceState.page === 0;
    var nextDisabled = choiceState.page + 1 >= pageCount;
    if (choicePrevious) choicePrevious.disabled = previousDisabled;
    if (choiceNext) choiceNext.disabled = nextDisabled;
    if (choicePreviousItem) choicePreviousItem.classList.toggle('disabled', previousDisabled);
    if (choiceNextItem) choiceNextItem.classList.toggle('disabled', nextDisabled);
    if (choiceCurrentPage) choiceCurrentPage.textContent = String(choiceState.page + 1);
  }

  if (choicePrevious) choicePrevious.addEventListener('click', function() {
    if (choiceState.page > 0) { choiceState.page -= 1; renderInvocationChoices(); }
  });
  if (choiceNext) choiceNext.addEventListener('click', function() {
    if ((choiceState.page + 1) * choiceState.pageSize < choiceState.items.length) { choiceState.page += 1; renderInvocationChoices(); }
  });

  function buildRunnerHtml(h) {
    if (!h.runner_id) return '<span class="text-muted">—</span>';
    var rid = h.runner_id || '';
    var info = h.runner_info;
    var html = '<div data-runner-id="' + rid + '" style="font-size:11px;line-height:1.6">';
    if (info) {
      html += '<div style="display:flex;align-items:center;gap:4px;flex-wrap:wrap">';
      html += '<a href="/runners/' + encodeURIComponent(rid) + '" class="text-decoration-none" title="View runner">';
      html += '<span class="badge bg-secondary" style="font-size:9px">' + (info.runner_cls || 'Runner') + '</span>';
      html += '</a>';
      if (info.runner_language) {
        html += '<span class="badge language-badge language-' + info.runner_language + '" style="font-size:9px">' + info.runner_language + '</span>';
      }
      if (info.executor_kind) {
        html += '<code style="font-size:9px;background:#e9ecef;padding:1px 4px;border-radius:3px;color:#495057">' + info.executor_kind + '</code>';
      }
      html += '<a href="/runners/' + encodeURIComponent(rid) + '" class="text-decoration-none" title="View worker"><code style="font-size:9px;background:#e9ecef;padding:1px 4px;border-radius:3px;color:#0d6efd;cursor:pointer">' + rid.substring(0, 8) + '</code></a>';
      html += '<span style="font-size:10px;color:#495057">' + (info.hostname || '?') + '</span>';
      html += '<code style="font-size:9px;background:#e9ecef;padding:1px 4px;border-radius:3px;color:#495057">pid:' + (info.pid || '?') + '</code>';
      if (info.thread_id) {
        html += '<code style="font-size:9px;background:#e9ecef;padding:1px 4px;border-radius:3px;color:#495057">t:' + info.thread_id + '</code>';
      }
      html += '</div>';
      if (info.parent_runner_cls) {
        html += '<div style="font-size:10px;color:#6c757d;margin-top:2px;padding-left:2px">';
        html += '<span class="material-icons" style="font-size:12px;vertical-align:middle">subdirectory_arrow_right</span> ';
        html += '<span class="badge bg-outline-secondary" style="font-size:8px;border:1px solid #adb5bd;color:#6c757d;background:transparent">' + info.parent_runner_cls + '</span>';
        if (info.parent_runner_id) {
          html += ' <a href="/runners/' + encodeURIComponent(info.parent_runner_id) + '" class="text-decoration-none" style="font-size:9px;color:#0d6efd">' + info.parent_runner_id.substring(0, 8) + '</a>';
        }
        html += '</div>';
      }
    } else {
      html += '<a href="/runners/' + encodeURIComponent(rid) + '" class="text-decoration-none">';
      html += '<code style="font-size:10px;background:#e9ecef;padding:2px 5px;border-radius:3px;color:#0d6efd">' + rid.substring(0, 8) + '</code>';
      html += '</a>';
    }
    html += '</div>';
    return html;
  }

  function renderDetailsPanel(invId, api, history) {
    var status = api.status || '—';
    var statusClass = getStatusClass(status);
    var taskId = api.task_id || '—';
    var callId = api.call_id || '—';
    var parentId = api.parent_invocation_id || null;
    var retries = history.filter(function(h) { return h.status === 'Retry'; }).length;

    var html = '<div class="row">';

    // Summary column
    html += '<div class="col-md-6">';
    html += '<table class="table table-sm" style="font-size: 12px"><tbody>';
    html += '<tr><td class="detail-label">Invocation ID</td><td class="detail-value"><code style="font-size:10px">' + invId + '</code></td></tr>';
    html += '<tr><td class="detail-label">Status</td><td><span class="badge ' + statusClass + '">' + status + '</span></td></tr>';
    // Task — clickable link with language badge
    html += '<tr><td class="detail-label">Task</td><td>';
    if (api.task_language) {
      html += '<span class="badge language-badge language-' + api.task_language + '" style="font-size:8px;margin-right:3px">' + api.task_language + '</span>';
    }
    html += '<a href="/tasks/' + encodeURIComponent(taskId) + '" class="text-decoration-none"><code style="font-size:11px">' + taskId + '</code></a></td></tr>';
    html += '<tr><td class="detail-label">Call ID</td><td><code style="font-size:10px">' + callId + '</code></td></tr>';
    html += '<tr><td class="detail-label">Retries</td><td>' + retries + '</td></tr>';
    // Parent invocation — clickable with hover highlight
    if (parentId) {
      html += '<tr><td class="detail-label">Parent</td><td>';
      html += '<a href="javascript:void(0)" class="parent-inv-link text-decoration-none" data-inv-id="' + parentId + '"';
      html += ' onmouseenter="highlightInvocation(\'' + parentId + '\')"';
      html += ' onmouseleave="unhighlightInvocation(\'' + parentId + '\')"';
      html += '><code style="font-size:10px;color:#0d6efd">' + parentId + '</code></a>';
      html += '</td></tr>';
    }
    // Duration
    html += '<tr><td class="detail-label">Duration</td><td>' + calculateDuration(history) + '</td></tr>';
    // Workflow — clickable links
    if (api.workflow) {
      var wf = api.workflow;
      html += '<tr><td class="detail-label">Workflow</td><td>';
      html += '<a href="/workflows/' + encodeURIComponent(wf.workflow_type) + '" class="text-decoration-none">';
      html += '<span class="badge bg-primary" style="font-size:9px">' + wf.workflow_type + '</span></a> ';
      if (wf.workflow_id) {
        html += '<a href="/workflows/' + encodeURIComponent(wf.workflow_type) + '/' + encodeURIComponent(wf.workflow_id) + '" class="text-decoration-none">';
        html += '<code style="font-size:9px;color:#0d6efd">' + wf.workflow_id + '</code></a>';
        var workflowTimeline = RustvelloMonitoringLinks.timelineFromCurrent({workflow_type: wf.workflow_type, workflow_id: wf.workflow_id, selected: null, inv_ids: null});
        html += ' <a href="' + workflowTimeline + '" class="btn btn-sm btn-outline-success py-0 px-1" title="Open workflow run in timeline">';
        html += '<span class="material-icons align-middle" style="font-size:12px">timeline</span></a>';
      }
      html += '</td></tr>';
    }
    html += '</tbody></table>';
    html += '</div>';

    // History column — vertical timeline (matches standalone detail page)
    html += '<div class="col-md-6">';
    html += '<h6 style="font-size:12px;font-weight:600">Status History</h6>';
    html += '<div style="max-height:400px;overflow-y:auto">';
    html += '<div class="timeline compact-timeline">';
    history.forEach(function(h) {
      var sc = getStatusClass(h.status);
      html += '<div class="timeline-item compact-timeline-item">';
      html += '<div class="timeline-marker ' + sc + '"></div>';
      html += '<div class="timeline-content compact-timeline-content">';
      html += '<div class="timeline-title compact-timeline-title"><span class="badge ' + sc + '" style="font-size:10px">' + h.status + '</span></div>';
      html += '<div class="timeline-date metadata-text" style="font-size:10px">' + formatUTCDate(h.timestamp) + '</div>';
      if (h.runner_id) {
        html += '<div style="margin-top:4px;background:#f8f9fa;padding:6px 8px;border-radius:4px;border-left:3px solid #6c757d">';
        html += buildRunnerHtml(h);
        html += '</div>';
      }
      if (h.message) {
        html += '<div class="timeline-text data-text" style="font-size:10px;margin-top:2px;color:#6c757d">' + h.message + '</div>';
      }
      html += '</div></div>';
    });
    html += '</div></div>';
    html += '</div>';

    html += '</div>';
    panelBody.innerHTML = html;

    // Bind parent link click
    var parentLink = panelBody.querySelector('.parent-inv-link');
    if (parentLink) {
      parentLink.addEventListener('click', function(e) {
        e.preventDefault();
        var pid = this.getAttribute('data-inv-id');
        if (pid) loadInvocationDetails(pid);
      });
    }

    // Removed: panel.scrollIntoView — avoid page jumping on click
  }

  // --- Auto-select invocation from URL ---
  var selectedInvocation = '{{ selected_invocation }}';
  if (selectedInvocation) {
    highlightInvocation(selectedInvocation);
    loadInvocationDetails(selectedInvocation);
    setTimeout(function() {
      var el = document.querySelector('[data-invocation-id="' + selectedInvocation + '"]');
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
    }, 300);
  }
})();
</script>
{% endblock %}