{# SPA partial: task detail loaded into index.html via HTMX OOB swaps.
   Update channels:
   • Initial load: renders all events + starts SSE via JS EventSource.
   • SSE "event": appends event_fragment.html fragments to #phase-events-list.
   • Pipeline OOB: polls /tasks/{id}/pipeline-oob every 2s, swaps OOB attrs.
   • SSE "close": stops streaming, triggers final OOB fetch. #}

{# ── Header OOB swaps ── #}
<span id="task-title" hx-swap-oob="true">{{ task.name }}</span>

<span id="task-id-meta" hx-swap-oob="true">
  <code style="font-size: 11px;">{{ task.id }}</code>
</span>

<span id="task-status-meta" hx-swap-oob="outerHTML"
      class="task-status-pill {{ task.status }}">{{ task.status }}</span>

<span id="task-phase-meta" hx-swap-oob="true">
  {% if task.current_phase %}
  phase <b style="color: var(--text);">{{ task.current_phase }}</b>
  {% else %}
  —
  {% endif %}
</span>

<div id="phase-timeline-placeholder" hx-swap-oob="outerHTML"
     class="phase-timeline" data-current-phase="{{ task.current_phase or '' }}">
  {% include "partials/phase_pipeline.html" %}
</div>

{# ── Events list ───────────────────────────────────────────────────── #}
<div id="phase-events-list" data-last-seq="{{ events|map(attribute='seq')|max if events else 0 }}">

<div class="phase-header-card">
  <div class="phase-header-card-top">
    <span id="phase-status-tag" class="phase-tag {{ task.status }}">{{ task.status }}</span>
    <span id="phase-event-count" style="color: var(--text-muted); font-size: 11px;">
      {% if events|length == 0 and task.status == 'running' %}
      <span class="streaming"><span class="streaming-dot"></span> Waiting for CLI output…</span>
      {% else %}
      {{ events|length }} events
      {% endif %}
    </span>
  </div>
  <div class="phase-goal-label">Goal</div>
  <div class="phase-goal">{{ task.goal }}</div>
</div>

  {% set ns = namespace(current_stage='') %}
  {% set _stage_map = {"research":"Researcher", "plan":"Implementer", "develop":"Implementer",
                        "review":"Verifier", "test":"Verifier",
                        "push":"Push"} %}
  {% for ev in events | reverse %}
    {% set p = ev.payload|from_json %}

    {# ── iter ── #}
    {% if ev.type == 'iter' %}
      {% set _stage = 'Updater' if p.agent == 'updater' else _stage_map.get(p.phase, '') %}
      {% if _stage and _stage != ns.current_stage %}
        {% set ns.current_stage = _stage %}
        <div class="stage-header" data-event-stage="{{ _stage }}" data-event-seq="{{ ev.seq }}">
          <div class="stage-header-line"></div>
          <span class="stage-header-label">{{ _stage }}</span>
          <div class="stage-header-line"></div>
          <span class="stage-header-detail">
            {% if _stage == 'Researcher' %}web search + synthesis
            {% elif _stage == 'Implementer' %}plan + develop
            {% elif _stage == 'Verifier' %}review + test
            {% elif _stage == 'Push' %}finalize
            {% elif _stage == 'Updater' %}correction
            {% endif %}
          </span>
        </div>
      {% endif %}

    {# ── tool ── #}
    {% elif ev.type == 'tool' %}
      <div class="tool-card" data-event-seq="{{ ev.seq }}">
        <div class="tool-header">
          <span class="tool-name">{{ p.name|default('?') }}</span>
          <span class="tool-args">{{ p.args_preview|default('') }}</span>
          <span class="tool-status call">call</span>
        </div>
      </div>

    {# ── tool_result ── #}
    {% elif ev.type == 'tool_result' %}
      <div class="tool-card result" data-event-seq="{{ ev.seq }}">
        <div class="tool-header">
          <span class="tool-name">{{ p.name|default('?') }}</span>
          <span class="tool-status {{ 'success' if p.ok else 'fail' }}">
            {{ 'ok' if p.ok else 'fail' }}
          </span>
        </div>
        {% if p.snippet is defined and p.snippet %}
          <div class="tool-content">{{ p.snippet }}</div>
        {% endif %}
      </div>

    {# ── thinking ── #}
    {% elif ev.type == 'thinking' %}
      <div class="thinking-block collapsed" data-event-seq="{{ ev.seq }}">
        <div class="thinking-label" onclick="this.closest('.thinking-block').classList.toggle('collapsed')">Thinking</div>
        <div class="thinking-text">{{ p.content|default('') }}</div>
      </div>

    {# ── output ── #}
    {% elif ev.type == 'output' %}
      <div class="output-block" data-event-seq="{{ ev.seq }}">
        <div class="output-content">{{ p.content|default('') }}</div>
      </div>

    {# ── verdict ── #}
    {% elif ev.type == 'verdict' %}
      {% set v = p.verdict|default('') %}
      <div class="verdict-slim {{ 'fail' if 'FAIL' in v else 'pass' }}"
           data-event-seq="{{ ev.seq }}">
        {{ '✗' if 'FAIL' in v else '✔' }} {{ v }}
      </div>

    {# ── complete / exit ── #}
    {% elif ev.type == 'complete' %}
      <div class="verdict-slim pass" data-event-seq="{{ ev.seq }}">✔ Complete</div>
    {% elif ev.type == 'exit' %}
      <div class="exit-code" data-event-seq="{{ ev.seq }}">⏹ exit {{ p.code|default('?') }}</div>

    {# ── error ── #}
    {% elif ev.type == 'error' %}
      <div class="verdict-slim fail" data-event-seq="{{ ev.seq }}">
        ✗ {{ p.message|default('error') }}
      </div>

    {# ── usage ── #}
    {% elif ev.type == 'usage' %}
      <div class="usage-line" data-event-seq="{{ ev.seq }}">
        <span class="usage-label">Tokens</span>
        <span class="usage-value">{{ p.total|default(0) }}</span>
        <span class="usage-detail">prompt {{ p.prompt_tokens|default(0) }} + completion {{ p.completion_tokens|default(0) }}</span>
      </div>

    {% endif %}
  {% endfor %}
</div>

{# ── Pipeline OOB poller — updates phase status pills + timeline ── #}
{% if task.status not in ('done', 'failed') %}
<div id="phase-pipeline-poll"
     hx-get="/tasks/{{ task.id }}/pipeline-oob"
     hx-trigger="every 2s"
     hx-swap="none"
     style="display:none"></div>
{% endif %}

{# ── SSE script: raw EventSource for zero-flicker streaming ── #}
{% if task.status not in ('done', 'failed') %}
<script>
(function() {
  var taskId = "{{ task.id }}";
  var list = document.getElementById('phase-events-list');
  if (!list) return;

  var lastSeq = parseInt(list.getAttribute('data-last-seq')) || 0;
  var eventCount = {{ events|length }};
  var es = new EventSource('/events/' + taskId);

  es.addEventListener('event', function(e) {
    var html = e.data;
    if (!html) return;

    // Prepend the HTML fragment after the header card (newest stays on top)
    var header = list.querySelector('.phase-header-card');
    if (header) {
      header.insertAdjacentHTML('afterend', html);
    } else {
      list.insertAdjacentHTML('afterbegin', html);
    }

    // Update seq tracking
    var matches = html.match(/data-event-seq="(\d+)"/g);
    if (matches) {
      matches.forEach(function(m) {
        var s = parseInt(m.match(/\d+/)[0]);
        if (s > lastSeq) lastSeq = s;
      });
      list.setAttribute('data-last-seq', lastSeq);
    }

    eventCount++;
    // Update event count in the header
    var cnt = document.getElementById('phase-event-count');
    if (cnt) cnt.textContent = eventCount + ' events';

    // Smart auto-scroll: only follows if user hasn't scrolled down
    if (typeof _maybeScrollToTop === 'function') {
      _maybeScrollToTop();
    }
  });

  es.addEventListener('close', function() {
    es.close();

    // Kill the pipeline poller — it will be replaced by OOB response
    var poller = document.getElementById('phase-pipeline-poll');
    if (poller) poller.remove();

    // Trigger final pipeline OOB fetch (kills poller via OOB swap)
    list.insertAdjacentHTML('afterend',
      '<div hx-get="/tasks/' + taskId + '/pipeline-oob" hx-trigger="load" hx-swap="none"></div>');
    htmx.process(list.parentElement);

    // Update event count
    var cnt = document.getElementById('phase-event-count');
    if (cnt) cnt.textContent = eventCount + ' events';

    // Final scroll to top (user was following the stream at the top)
    if (typeof _maybeScrollToTop === 'function') {
      setTimeout(_maybeScrollToTop, 100);
    }
  });

  es.addEventListener('error', function() {
    // Only clean up if connection is truly closed (not a transient error)
    if (es.readyState === EventSource.CLOSED) {
      var poller = document.getElementById('phase-pipeline-poll');
      if (poller) poller.remove();
    }
  });
})();
</script>
{% endif %}