{% extends "base.html" %}
{% from "_macros.html" import pass_rate_badge, score_badge, download_icon %}
{% block title %}Trajectory · {{ run.run_id }} · SForge{% endblock %}
{% block content %}

<div class="mb-4 flex items-center gap-2 text-sm">
  <a href="/" class="text-slate-400 hover:text-slate-700">&larr; runs</a>
  <span class="text-slate-300">/</span>
  <a href="/run/{{ run.run_id }}/{{ run.task }}" class="text-slate-400 hover:text-slate-700">{{ run.run_id }}</a>
  <span class="text-slate-300">/</span>
  <span class="text-slate-700">trajectory</span>
  <span class="flex-1"></span>
  {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/agent-output", "agent log", "Download raw agent_output.txt (the agent's full conversation log)") }}
  {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/download", "task .tar.gz", "Download entire task dir (logs + submissions + final archive) as .tar.gz") }}
</div>

{% if not trajectory or not display_exchanges %}
<div class="bg-white border border-slate-200 rounded-lg p-10 text-center text-slate-400">
  No agent_output.txt found (or empty) for this run.
</div>
{% else %}

{# Build a lookup: after_idx -> [markers] so we can inline them between exchanges #}
{% set markers_by_idx = {} %}
{% for m in trajectory.markers %}
  {% set _ = markers_by_idx.setdefault(m.after_idx, []).append(m) %}
{% endfor %}

<div class="grid grid-cols-1 lg:grid-cols-4 gap-5">
  <!-- Sticky left nav -->
  <aside class="lg:col-span-1">
    <div class="sticky top-16 bg-white border border-slate-200 rounded-lg p-4 space-y-4 text-sm">
      <div>
        <h3 class="font-semibold mb-2 text-slate-700">Submissions in trajectory</h3>
        {% if trajectory.markers %}
        <ol class="space-y-1">
          {% for m in trajectory.markers %}
          <li>
            <a href="#marker-{{ m.anchor_idx }}"
               class="flex items-center gap-2 rounded px-2 py-1 hover:bg-slate-50">
              <span class="mono text-xs text-slate-500">{{ m.round_label or "round ?" }}</span>
              {% if m.score is not none %}{{ score_badge(m.score) }}{% elif m.pass_rate is not none %}{{ pass_rate_badge(m.pass_rate) }}{% endif %}
            </a>
          </li>
          {% endfor %}
        </ol>
        <p class="text-[11px] text-slate-400 mt-2">
          {{ trajectory.markers|length }} agent-visible submission(s).
          Total in run: {{ run.submissions|length }}.
        </p>
        {% else %}
        <p class="text-xs text-slate-400">No stop-hook submissions detected.</p>
        {% endif %}
      </div>

      <div class="border-t border-slate-100 pt-3">
        <h3 class="font-semibold mb-2 text-slate-700">Meta</h3>
        <dl class="text-xs space-y-1 text-slate-600">
          {% if trajectory.meta.model %}<div><dt class="inline text-slate-400">model:</dt> <dd class="inline mono">{{ trajectory.meta.model }}</dd></div>{% endif %}
          {% if trajectory.meta.claude_code_version %}<div><dt class="inline text-slate-400">cc:</dt> <dd class="inline mono">{{ trajectory.meta.claude_code_version }}</dd></div>{% endif %}
          {% if trajectory.meta.permissionMode %}<div><dt class="inline text-slate-400">perm:</dt> <dd class="inline mono">{{ trajectory.meta.permissionMode }}</dd></div>{% endif %}
          {% if trajectory.meta.session_id %}<div><dt class="inline text-slate-400">session:</dt> <dd class="inline mono break-all">{{ trajectory.meta.session_id }}</dd></div>{% endif %}
        </dl>
        <div class="mt-2 text-xs text-slate-500">
          {{ trajectory.exchanges|length }} exchanges ·
          {{ trajectory.tool_use_count }} tool calls
        </div>
      </div>
    </div>
  </aside>

  <!-- Exchange column -->
  <main id="trajectory-main" class="lg:col-span-3 space-y-3">
    {% for ex in display_exchanges %}
      {% include "_turn.html" %}
      {% set ms = markers_by_idx.get(ex.idx) %}
      {% if ms %}
        {% for m in ms %}
        <div id="marker-{{ m.anchor_idx }}"
             class="scroll-mt-4 bg-emerald-50 border border-emerald-200 rounded-lg p-4">
          <div class="flex items-center gap-3 flex-wrap">
            <span class="chip bg-emerald-200 text-emerald-900">submission</span>
            <span class="mono text-sm font-semibold">{{ m.round_label or "round ?" }}</span>
            {% if m.score is not none %}{{ score_badge(m.score) }}{% elif m.pass_rate is not none %}{{ pass_rate_badge(m.pass_rate) }}{% endif %}
            {% if m.passed is not none and m.total is not none %}
            <span class="text-xs mono text-slate-600">{{ m.passed }}/{{ m.total }} passed</span>
            {% endif %}
            {% if m.best_so_far is not none %}
            <span class="text-xs text-slate-500">best so far: <span class="mono">{% if m.score is not none %}{{ "%.1f"|format(m.best_so_far) }}{% else %}{{ "%.1f"|format(m.best_so_far * 100) }}%{% endif %}</span></span>
            {% endif %}
          </div>
          {% if m.feedback %}
          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-emerald-800 hover:text-emerald-900 select-none">stop-hook feedback</summary>
            <pre class="mt-1 mono text-[11px] bg-white border border-emerald-200 rounded p-2 overflow-auto max-h-[40vh] whitespace-pre-wrap">{{ m.feedback }}</pre>
          </details>
          {% endif %}
          {% set sub_label = marker_submissions.get(m.anchor_idx) %}
          {% if sub_label %}
          <details class="mt-2">
            <summary class="cursor-pointer text-xs text-sky-700 hover:text-sky-900 select-none">code diff ({{ sub_label }})</summary>
            <div hx-get="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ sub_label }}/diff"
                 hx-trigger="intersect once"
                 hx-swap="innerHTML"
                 class="mt-1 overflow-auto max-h-[60vh]">
              <span class="text-xs text-slate-400">Loading diff...</span>
            </div>
          </details>
          {% endif %}
        </div>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </main>
</div>

<!-- Minimap: built client-side from top-level articles + submission markers -->
<div id="minimap" aria-hidden="true">
  <div id="minimap-viewport"></div>
  <div id="minimap-tooltip"></div>
</div>
<style>
  #minimap {
    position: fixed;
    right: 8px;
    top: 72px;
    bottom: 16px;
    width: 6px;
    background: rgba(248, 250, 252, 0.4);
    border: 1px solid rgb(241, 245, 249);
    border-radius: 6px;
    z-index: 40;
    cursor: ns-resize;
    overflow: hidden;
    opacity: 0.35;
    transition: opacity 0.15s, width 0.15s;
  }
  #minimap:hover { opacity: 1; width: 42px; }
  @media (max-width: 1023px) { #minimap { display: none; } }
  .minimap-bar { position: absolute; left: 4px; right: 4px; border-radius: 1px; opacity: 0.5; pointer-events: auto; }
  #minimap:hover .minimap-bar { opacity: 0.9; }
  .minimap-bar:hover { opacity: 1; outline: 1px solid rgba(15, 23, 42, 0.4); }
  .minimap-bar-assistant { background: rgb(129, 140, 248); }
  .minimap-bar-user      { background: rgb(148, 163, 184); }
  .minimap-bar-system    { background: rgb(71, 85, 105); }
  .minimap-marker {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: rgb(16, 185, 129);
    border-top: 1px solid rgba(5, 150, 105, 0.8);
    border-bottom: 1px solid rgba(5, 150, 105, 0.8);
    pointer-events: auto;
    cursor: pointer;
  }
  .minimap-marker:hover { background: rgb(5, 150, 105); }
  #minimap-viewport {
    position: absolute;
    left: 0; right: 0;
    background: rgba(71, 85, 105, 0.15);
    border-top: 1px solid rgba(71, 85, 105, 0.55);
    border-bottom: 1px solid rgba(71, 85, 105, 0.55);
    pointer-events: none;
    z-index: 3;
  }
  #minimap-tooltip {
    position: absolute;
    right: 46px;
    padding: 2px 6px;
    background: rgb(15, 23, 42);
    color: white;
    font-size: 11px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 50;
  }
</style>
<script>
(function () {
  const minimap = document.getElementById("minimap");
  const viewport = document.getElementById("minimap-viewport");
  const tooltip = document.getElementById("minimap-tooltip");
  const main = document.getElementById("trajectory-main");
  if (!minimap || !main) return;

  let bars = [];      // [{el, targetEl, top, height}]
  let markers = [];   // [{el, targetEl, label, top}]

  function rebuild() {
    // Clear existing bars/markers (keep viewport+tooltip)
    bars.forEach(b => b.el.remove());
    markers.forEach(m => m.el.remove());
    bars = [];
    markers = [];

    const docH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) || 1;
    const mapRect = minimap.getBoundingClientRect();
    const mapH = mapRect.height;

    // Top-level articles only (not nested subagent turns that live inside <details>)
    const articles = main.querySelectorAll(":scope > article[id^='ex-']");
    articles.forEach(a => {
      const top = a.offsetTop + main.offsetTop;
      const h = a.offsetHeight;
      const role = a.dataset.role || "assistant";
      const bar = document.createElement("div");
      bar.className = "minimap-bar minimap-bar-" + role;
      bar.style.top = (top / docH * mapH) + "px";
      bar.style.height = Math.max(2, h / docH * mapH) + "px";
      bar.dataset.label = "ex #" + (a.id.split("-")[1]) + " (" + role + ")";
      bar.addEventListener("click", (e) => {
        e.stopPropagation();
        a.scrollIntoView({ behavior: "smooth", block: "start" });
      });
      minimap.appendChild(bar);
      bars.push({ el: bar, targetEl: a });
    });

    // Submission markers (green bars + visible in left nav already)
    const markerEls = main.querySelectorAll(":scope > div[id^='marker-']");
    markerEls.forEach(mEl => {
      const top = mEl.offsetTop + main.offsetTop;
      const line = document.createElement("div");
      line.className = "minimap-marker";
      line.style.top = (top / docH * mapH) + "px";
      // Use the marker's first bold text (round label) as tooltip
      const labelEl = mEl.querySelector(".mono");
      const label = (labelEl ? labelEl.textContent.trim() : "submission");
      line.dataset.label = "▸ " + label;
      line.addEventListener("click", (e) => {
        e.stopPropagation();
        mEl.scrollIntoView({ behavior: "smooth", block: "start" });
      });
      minimap.appendChild(line);
      markers.push({ el: line, targetEl: mEl });
    });

    updateViewport();
  }

  function updateViewport() {
    const docH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) || 1;
    const mapH = minimap.clientHeight;
    const scroll = window.scrollY;
    const winH = window.innerHeight;
    viewport.style.top = (scroll / docH * mapH) + "px";
    viewport.style.height = Math.max(12, winH / docH * mapH) + "px";
  }

  // Drag / click-scrub to scroll
  let dragging = false;
  function scrubTo(clientY) {
    const rect = minimap.getBoundingClientRect();
    const ratio = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
    const docH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) || 1;
    window.scrollTo({ top: ratio * docH - window.innerHeight / 2, behavior: "auto" });
  }
  minimap.addEventListener("mousedown", (e) => {
    if (e.target.classList.contains("minimap-bar") || e.target.classList.contains("minimap-marker")) return;
    dragging = true;
    scrubTo(e.clientY);
    e.preventDefault();
  });
  window.addEventListener("mousemove", (e) => {
    if (dragging) scrubTo(e.clientY);
    // Tooltip hover
    const hovered = document.elementFromPoint(e.clientX, e.clientY);
    if (hovered && (hovered.classList.contains("minimap-bar") || hovered.classList.contains("minimap-marker"))) {
      tooltip.textContent = hovered.dataset.label || "";
      tooltip.style.top = (e.clientY - minimap.getBoundingClientRect().top - 10) + "px";
      tooltip.style.opacity = "1";
    } else {
      tooltip.style.opacity = "0";
    }
  });
  window.addEventListener("mouseup", () => { dragging = false; });
  minimap.addEventListener("mouseleave", () => { tooltip.style.opacity = "0"; });

  // React to layout changes (expand/collapse <details>, window resize)
  window.addEventListener("scroll", updateViewport, { passive: true });
  window.addEventListener("resize", rebuild);
  main.addEventListener("toggle", rebuild, true);  // capture <details> toggle

  // Wait for layout to settle
  requestAnimationFrame(rebuild);
  setTimeout(rebuild, 200);
})();
</script>

{% endif %}

{% endblock %}