{% comment %}
Full-width, chronological agent trajectory timeline for one repetition.
Context: rep (see infra.ui._rep_view). Renders only when rep.agentic_timeline
is present; every row anchor is unique even for repeated span ids
(suffixes -2, -3, …), and finding/judge jump links resolve through them.
The "Focus" button toggles a wide mode that pushes the app chrome aside.
{% endcomment %}
{% if rep.agentic_timeline %}
<div class="bg-surface-raised rounded-xl border border-violet-900/40 p-4 agentic-focusable">
  <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
    <div class="min-w-0">
      <h3 class="text-sm font-semibold text-violet-300">Trajectory timeline</h3>
      <p class="text-xs text-gray-500">{% if rep.agentic_timeline.captured > rep.agentic_timeline.total %}{{ rep.agentic_timeline.total }} of {{ rep.agentic_timeline.captured }} captured spans (judge evidence subset){% else %}{{ rep.agentic_timeline.total }} step{{ rep.agentic_timeline.total|pluralize }}{% endif %}, in execution order · click a step for its arguments and result</p>
    </div>
    <button type="button" data-tl-focus
            class="tl-focus-btn px-3 py-1.5 rounded-lg bg-surface-overlay text-gray-400 text-xs font-medium hover:text-accent transition-colors"
            title="Expand the timeline to full viewport width">⤢ Focus</button>
  </div>
  <ol class="agentic-timeline relative space-y-0">
    {% for s in rep.agentic_timeline.rows %}
    <li id="trace-span-{{ rep.index }}-{{ s.anchor }}" data-anchor="{{ s.anchor }}" class="agentic-tl-row group relative flex gap-3 pb-4 scroll-mt-20 last:pb-0">
      <!-- Vertical connector line + node icon -->
      <div class="flex flex-col items-center shrink-0 w-8 pt-1">
        <span class="w-7 h-7 rounded-full bg-surface-overlay border border-gray-700 flex items-center justify-center text-sm" title="{{ s.kind }}">{{ s.icon }}</span>
        {% if not forloop.last %}<span class="w-px flex-1 bg-gray-700/60 mt-1"></span>{% endif %}
      </div>
      <details class="agentic-tl-card min-w-0 flex-1 rounded-lg border {{ s.card_border_class }} bg-surface-overlay/40 group-open:border-violet-800/50">
        <summary class="cursor-pointer select-none flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2">
          <span class="shrink-0 px-1.5 py-0.5 rounded bg-surface-overlay/60 border border-gray-800 text-[10px] uppercase tracking-wide {{ s.tone }}" title="{{ s.kind }}{% if s.is_redundant_rerun %} — redundant re-run by Open WebUI (identical input, no tool call){% endif %}">{{ s.label|default:s.kind|default:"STEP" }}</span>
          {% if s.is_error %}<span class="shrink-0 px-1.5 py-0.5 rounded bg-red-950 border border-red-800/60 text-[10px] uppercase tracking-wide text-red-300" title="This step failed{% if s.error_type %}: {{ s.error_type }}{% endif %}">error</span>{% endif %}
          {% if s.user_input %}<span class="shrink-0 text-sm leading-none" title="Input ends with the user's message: this call received the user's turn" aria-label="User message as input">👤</span>{% endif %}
          {% if s.llm_role == "reply" %}<span class="shrink-0 px-1.5 py-0.5 rounded bg-emerald-950 border border-emerald-800/60 text-[10px] uppercase tracking-wide text-emerald-300" title="The model answered in text: the assistant's reply for this turn">reply</span>
          {% elif s.llm_role == "retrieval step" %}<span class="shrink-0 px-1.5 py-0.5 rounded bg-emerald-950/60 border border-emerald-900/60 text-[10px] uppercase tracking-wide text-emerald-300/80" title="A model call made by the retrieval that follows, for example rewriting the question into a search query: part of that retrieval, not a reply">for retrieval</span>
          {% elif s.llm_role == "tool call" %}<span class="shrink-0 px-1.5 py-0.5 rounded bg-amber-950 border border-amber-800/60 text-[10px] uppercase tracking-wide text-amber-300" title="The model asked for a tool instead of answering">tool call</span>{% endif %}
          <span class="min-w-0 truncate text-sm text-gray-200 {{ s.name_class }}" title="{{ s.name }}{% if s.is_redundant_rerun %} (duplicate of an earlier identical call){% endif %}">{{ s.name }}</span>
          {% if s.is_redundant_rerun %}
          <span class="shrink-0 text-[10px] italic text-red-400/70" title="Open WebUI invoked the model again with the exact same input; this is a redundant re-run, not a distinct step">↻ duplicate call</span>
          {% endif %}
          {% if s.redundant_reason %}<span class="shrink-0 px-1.5 py-0.5 rounded bg-amber-950 border border-amber-800/60 text-[10px] uppercase tracking-wide text-amber-300" title="{{ s.redundant_reason }}">redundant</span>{% endif %}
          {% if s.is_tool_decision and s.decision_detail %}
          <span class="min-w-0 truncate text-xs text-amber-300/90 font-mono" title="Model decided to invoke: {{ s.decision_detail }}">{{ s.decision_detail }}</span>
          {% elif s.arguments %}<span class="min-w-0 truncate text-xs font-mono text-gray-400" title="{{ s.arguments }}">{{ s.arguments }}</span>
          {% elif s.tool_name %}<span class="min-w-0 truncate text-xs text-gray-500" title="{{ s.tool_name }}">· {{ s.tool_name }}</span>{% endif %}
          <span class="ml-auto shrink-0 flex items-center gap-2 text-[11px] text-gray-500 tabular-nums">
            {% if s.duration_ms > 0 %}<span title="Duration of this step">({{ s.duration_ms }} ms)</span>{% endif %}
            {% if s.offset_ms is not None %}<span title="Time since the first captured step">{{ s.offset_ms }} ms</span>{% endif %}
          </span>
          {% if s.kb_chips %}
          <div class="kb-sources basis-full flex flex-wrap items-center gap-1 min-w-0" data-kb-sources title="Knowledge sources observed on this retrieval step">
            <span class="shrink-0 text-[11px] text-emerald-300/90">📚 {{ s.kb_chips|length }} source{{ s.kb_chips|length|pluralize }}</span>
            {% if s.kb_hosts %}<span class="shrink-0 mr-1 text-[10px] text-gray-500">· {{ s.kb_hosts|join:", " }}{% if s.kb_hosts_more %} +{{ s.kb_hosts_more }}{% endif %}</span>{% endif %}
            {% for c in s.kb_chips %}
            {% if c.href %}<a href="{{ c.href }}" target="_blank" rel="noopener noreferrer"{% else %}<span{% endif %}
              class="kb-chip{% if forloop.counter > s.kb_visible %} hidden{% endif %} inline-flex min-w-0 max-w-[20rem] items-center gap-1 rounded-full border px-2 py-px text-[11px] {% if c.redacted %}border-amber-800/60 text-amber-300/80{% elif c.href %}border-emerald-800/50 bg-emerald-950/30 text-emerald-200 hover:border-emerald-500 hover:text-white{% else %}border-gray-700 text-gray-300{% endif %}{% if c.seen_in %} opacity-50{% endif %}"
              title="{{ c.tooltip }}">
              {% if c.ext %}<span class="shrink-0 rounded bg-gray-800 px-1 text-[9px] text-gray-400">{{ c.ext }}</span>{% endif %}
              <span class="truncate">{{ c.label }}{% if c.sublabel %} <span class="text-gray-500">› {{ c.sublabel }}</span>{% endif %}</span>
              {% if c.seen_in %}<span class="shrink-0 text-[9px] text-gray-500">↺</span>{% endif %}
            {% if c.href %}</a>{% else %}</span>{% endif %}
            {% endfor %}
            {% if s.kb_hidden %}<button type="button" class="kb-more shrink-0 rounded-full border border-gray-700 px-2 py-px text-[11px] text-gray-400 hover:text-gray-200">+{{ s.kb_hidden }} more</button>{% endif %}
          </div>
          {% endif %}
        </summary>
        <div class="space-y-2 border-t border-gray-800/70 px-3 py-2.5">
          {% if s.content_blocks %}
          {% for label, value in s.content_blocks %}
          <div class="min-w-0">
            <p class="mb-1 text-[10px] uppercase tracking-wide text-gray-500">{{ label }}</p>
            <pre class="agentic-tl-excerpt max-h-52 overflow-auto whitespace-pre-wrap break-words rounded bg-surface p-2 text-[11px] text-gray-300">{{ value }}</pre>
          </div>
          {% endfor %}
          {% else %}
          <p class="text-xs text-gray-500">No content was captured for this step.</p>
          {% endif %}
          <details class="min-w-0">
            <summary class="cursor-pointer select-none text-[10px] uppercase tracking-wide text-gray-500 hover:text-gray-300">Raw span JSON</summary>
            <pre class="mt-1 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-surface p-2 text-[11px] text-gray-400">{{ s.raw_json }}</pre>
          </details>
        </div>
      </details>
    </li>
    {% endfor %}
  </ol>
  <script>
  // Source chips live inside a <summary>: keep link clicks from toggling the step,
  // and let "+N more" reveal the hidden chips instead.
  (function() {
    if (window.__kbChipsBound) return;
    window.__kbChipsBound = true;
    document.addEventListener('click', function(e) {
      var box = e.target.closest && e.target.closest('[data-kb-sources]');
      if (!box) return;
      var more = e.target.closest('.kb-more');
      if (more) {
        e.preventDefault();
        box.querySelectorAll('.kb-chip.hidden').forEach(function(c) { c.classList.remove('hidden'); });
        more.remove();
      } else if (e.target.closest('a')) {
        e.stopPropagation();
      } else {
        e.preventDefault();
      }
    }, true);
  })();
  // Focus mode: push the app chrome aside so the timeline owns the viewport.
  (function() {
    var btn = document.querySelector('[data-tl-focus][data-rep="{{ rep.index }}"]');
    if (!btn) {
      var all = document.querySelectorAll('.tl-focus-btn');
      btn = all.length === 1 ? all[0] : null;
    }
    if (!btn || btn.__bound) return;
    btn.__bound = true;
    btn.addEventListener('click', function() {
      var on = document.documentElement.classList.toggle('agentic-focus-mode');
      btn.textContent = on ? '✕ Exit focus' : '⤢ Focus';
      btn.setAttribute('aria-pressed', String(on));
    });
  })();
  </script>
</div>
{% endif %}