{% extends "base.html" %}
{% block title %}Trajectory · Goal #{{ goal.id }} · Maverick{% endblock %}
{% block content %}
<style>
  .timeline {
    position: relative; padding-left: 2rem; margin: 0;
    border-left: 2px solid var(--border); list-style: none;
  }
  .timeline li {
    position: relative; padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border);
  }
  .timeline li:last-child { border-bottom: 0; }
  .timeline li::before {
    content: ""; position: absolute; left: -2.45rem; top: 1.1rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--panel); border: 2px solid var(--border);
  }
  .timeline li.tool::before    { border-color: var(--accent); }
  .timeline li.error::before   { border-color: var(--danger); }
  .timeline li.thinking::before{ border-color: var(--warn); }
  .ev-meta { color: var(--muted); font-size: 0.85em; }
  .ev-agent { color: var(--text); margin: 0 0.4rem; }
  .ev-kind { color: var(--accent); }
  .ev-content {
    margin-top: 0.4rem; white-space: pre-wrap; word-break: break-word;
    background: var(--panel); padding: 0.4rem 0.6rem; border-radius: 4px;
    font: 12px/1.5 ui-monospace, SFMono-Regular, monospace;
  }
  .controls {
    display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;
  }
  .controls input[type="range"] { flex: 1; }
  .controls button {
    background: var(--panel); color: var(--text); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer;
  }
  .controls button:hover { border-color: var(--accent); }
  .filters {
    display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .filters label { color: var(--muted); font-size: 0.85em; }
  .filters select {
    background: var(--panel); color: var(--text); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.3rem 0.5rem;
  }
  .filters select:hover { border-color: var(--accent); }
</style>
<p class="muted"><a href="/goals">← all goals</a> · <a href="/goals/{{ goal.id }}/plan">plan tree</a></p>
<h2>Trajectory · Goal #{{ goal.id }}: {{ goal.title }}</h2>

<div class="panel">
  <div class="controls" role="group" aria-label="Trajectory playback controls">
    <button id="rev-all" type="button" aria-label="Jump to start" title="Jump to start">⇤</button>
    <button id="step-back" type="button" aria-label="Step back" title="Step back">←</button>
    <input id="scrub" type="range" min="0" max="{{ events|length }}" value="{{ events|length }}"
           aria-label="Scrub through events" />
    <button id="step-fwd" type="button" aria-label="Step forward" title="Step forward">→</button>
    <button id="rev-end" type="button" aria-label="Jump to end" title="Jump to end">⇥</button>
    <span id="counter" class="muted" aria-live="polite">{{ events|length }} / {{ events|length }} events</span>
  </div>
  <div class="filters" role="group" aria-label="Trajectory filters">
    <label for="filter-agent">Agent</label>
    <select id="filter-agent" class="filter-agent" aria-label="Filter by agent">
      <option value="">All agents</option>
      {% for agent in events | map(attribute="agent") | unique | sort %}
        <option value="{{ agent }}">{{ agent }}</option>
      {% endfor %}
    </select>
    <label for="filter-severity">Severity</label>
    <select id="filter-severity" class="filter-severity" aria-label="Filter by severity">
      <option value="">All severities</option>
      {% for kind in events | map(attribute="kind") | unique | sort %}
        <option value="{{ kind }}">{{ kind }}</option>
      {% endfor %}
    </select>
  </div>
  <ul class="timeline" id="timeline">
    {% for ev in events %}
      <li data-idx="{{ loop.index0 }}" data-agent="{{ ev.agent }}" data-kind="{{ ev.kind }}" class="{{ ev.kind }}">
        <span class="ev-meta">
          [{{ ev.ts | datetime }}]
          <span class="ev-agent">{{ ev.agent }}</span>
          <span class="ev-kind">{{ ev.kind }}</span>
        </span>
        {% if ev.content %}
          <div class="ev-content">{{ ev.content[:2000] }}{% if ev.content|length > 2000 %}…{% endif %}</div>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>

<script>
  // Trajectory replay: hide events past the scrubber position so users
  // can step through the run after the fact.
  (function() {
    const tl = document.getElementById("timeline");
    const items = Array.from(tl.querySelectorAll("li"));
    const scrub = document.getElementById("scrub");
    const counter = document.getElementById("counter");
    const agentFilter = document.getElementById("filter-agent");
    const sevFilter = document.getElementById("filter-severity");
    const total = items.length;

    function apply(n) {
      const agent = agentFilter.value;
      const sev = sevFilter.value;
      items.forEach((li, i) => {
        const matches =
          (!agent || li.dataset.agent === agent) &&
          (!sev || li.dataset.kind === sev);
        li.style.display = i < n && matches ? "" : "none";
      });
      counter.textContent = `${n} / ${total} events`;
    }
    function refresh() { apply(parseInt(scrub.value, 10)); }
    scrub.addEventListener("input", refresh);
    agentFilter.addEventListener("change", refresh);
    sevFilter.addEventListener("change", refresh);
    document.getElementById("step-back").onclick = () => {
      scrub.value = Math.max(0, parseInt(scrub.value, 10) - 1);
      scrub.dispatchEvent(new Event("input"));
    };
    document.getElementById("step-fwd").onclick = () => {
      scrub.value = Math.min(total, parseInt(scrub.value, 10) + 1);
      scrub.dispatchEvent(new Event("input"));
    };
    document.getElementById("rev-all").onclick = () => {
      scrub.value = 0; scrub.dispatchEvent(new Event("input"));
    };
    document.getElementById("rev-end").onclick = () => {
      scrub.value = total; scrub.dispatchEvent(new Event("input"));
    };
    // Keyboard: left/right arrow step, Home/End jump. Ignored when the
    // user is typing in a field.
    document.addEventListener("keydown", (e) => {
      const tag = (e.target.tagName || "").toLowerCase();
      if (tag === "input" && e.target.id !== "scrub") return;
      if (tag === "textarea" || tag === "select") return;
      if (e.key === "ArrowLeft") { document.getElementById("step-back").click(); }
      else if (e.key === "ArrowRight") { document.getElementById("step-fwd").click(); }
      else if (e.key === "Home") { document.getElementById("rev-all").click(); }
      else if (e.key === "End") { document.getElementById("rev-end").click(); }
    });
  })();
</script>
{% endblock %}