{% load json_filters %}
{% comment %}
One judged conversation on the scenario result page: a repetition, or the
whole result of a single-rep run. Context: rep (see infra.ui._rep_view).
{% endcomment %}
<div class="space-y-4">
  
  <!-- Unified response assessment card -->
  {% if rep.summary or rep.agentic_overview or rep.agentic_findings %}
  <div class="bg-surface-raised rounded-xl border p-4 {% if rep.severity == 'pass' %}border-emerald-900/50{% elif rep.severity == 'fail' or rep.severity == 'unsafe' %}border-red-900/50{% elif rep.severity == 'inconclusive' %}border-amber-900/50{% else %}border-gray-800{% endif %}">
    <div class="flex flex-wrap items-center gap-2 mb-1">
      <h3 class="text-sm font-semibold text-gray-300 shrink-0">Response assessment</h3>
      {% include "partials/severity_badge.html" with sev=rep.severity %}
      {% if rep.agentic_trace_completeness %}
      {% with tc=rep.agentic_trace_completeness %}
      <span class="ml-auto min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-gray-500">
        {% if tc.complete %}
        <span class="text-emerald-300/90">Trace complete{% if tc.captured_kinds %} · {{ tc.captured_kinds|join:", " }}{% endif %}{% if tc.span_count is not None %} · {{ tc.span_count }} span{{ tc.span_count|pluralize }}{% endif %}</span>
        {% else %}
        <span class="text-amber-300/90">Trace incomplete{% if tc.missing_reason %} — {{ tc.missing_reason|truncatechars:80 }}{% endif %}</span>
        {% endif %}
        {% if tc.total_steps is not None %}<span>{{ tc.total_steps }} step{{ tc.total_steps|pluralize }}</span>{% endif %}
        {% if tc.tool_calls is not None %}<span>{{ tc.tool_calls }} tool call{{ tc.tool_calls|pluralize }}</span>{% endif %}
        {% if tc.errors %}<span class="text-red-300">{{ tc.errors }} error{{ tc.errors|pluralize }}</span>{% endif %}
      </span>
      {% endwith %}
      {% endif %}
    </div>
    {% if judge_ref %}
    <p class="text-[11px] text-gray-500 mb-2">
      {% if rep.agentic_overview or rep.agentic_findings %}Agentic-aware judge{% else %}Judge{% endif %} · <a href="{{ judge_ref.url }}" target="_blank" class="text-gray-400 underline hover:text-gray-300">{{ judge_ref.name }} v{{ judge_ref.version }}</a>
    </p>
    {% endif %}
    {% if rep.summary %}
    <p class="text-sm text-gray-300 whitespace-pre-wrap mb-3">{{ rep.summary }}</p>
    {% endif %}

    <!-- Deterministic checks summary + findings -->
    {% if rep.agentic_overview or rep.agentic_findings %}
    <div class="mt-2">
      <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2">
        <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Deterministic checks</h4>
        {% if rep.agentic_overview %}
        <span class="text-xs text-gray-400"><span class="font-semibold text-emerald-300">{{ rep.agentic_overview.n_passed }}</span>/{{ rep.agentic_overview.n_checks }} pass{% if rep.agentic_overview.n_failed %} · <span class="font-semibold text-red-300">{{ rep.agentic_overview.n_failed }}</span> fail{% endif %}{% if rep.agentic_overview.n_inconclusive %} · <span class="font-semibold text-amber-300">{{ rep.agentic_overview.n_inconclusive }}</span> inconclusive{% endif %}</span>
        {% endif %}
      </div>
      {% if rep.agentic_overview and rep.agentic_overview.first_failure %}
      <p class="mb-2 text-xs break-words text-red-300/90">First failure: {{ rep.agentic_overview.first_failure }}</p>
      {% elif rep.agentic_overview and rep.agentic_overview.first_inconclusive %}
      <p class="mb-2 text-xs break-words text-amber-300/90">Needs more evidence: {{ rep.agentic_overview.first_inconclusive }}</p>
      {% endif %}
      {% if rep.agentic_findings %}
      <p class="text-[11px] text-gray-500 mb-2">Chips jump to the evidence step</p>
      <style>
        /* Collapsed verdict cards: fixed height; the content stays visible and fades only at the bottom edge. */
        .agentic-finding-card { height: 6rem; overflow: hidden; }
        .agentic-finding-card:not([open]) { -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 70%, transparent 100%); }
        .agentic-finding-card[open] { height: auto; overflow: visible; }
      </style>
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2.5">
        {% for f in rep.agentic_findings %}
        <details class="agentic-finding-card min-w-0 rounded-lg border px-3 py-2.5 {% if f.status == 'FAIL' or f.status == 'ERROR' %}border-red-900/50 bg-red-950/20{% elif f.status == 'INCONCLUSIVE' %}border-amber-900/50 bg-amber-950/10{% else %}border-gray-800 bg-surface-overlay/30{% endif %}" data-severity="{{ f.severity }}" data-status="{{ f.status }}">
          <summary class="cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
            <div class="flex flex-wrap items-start gap-2 min-w-0">
              <span class="shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold {% if f.status == 'PASS' %}bg-emerald-900/40 text-emerald-300{% elif f.status == 'INCONCLUSIVE' %}bg-amber-900/40 text-amber-300{% else %}bg-red-900/40 text-red-300{% endif %}">{{ f.status }}</span>
              {% if f.severity %}<span class="shrink-0 px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wide {% if f.severity == 'critical' %}bg-red-950 text-red-300{% elif f.severity == 'high' %}bg-orange-950 text-orange-300{% elif f.severity == 'medium' %}bg-amber-950 text-amber-300{% else %}bg-gray-800 text-gray-400{% endif %}">{{ f.severity }}</span>{% endif %}
              <span class="min-w-0 flex-1 text-xs text-gray-200 break-words" title="{{ f.id }}">{{ f.title }}</span>
            </div>
            <p class="mt-1 text-xs text-gray-300 break-words">{% if f.summary %}{{ f.summary }}{% else %}—{% endif %}</p>
            <div class="mt-1.5 space-y-1.5">
              {% if f.expected or f.observed %}
              <div class="text-[11px] text-gray-500">
                {% if f.expected %}<p><span class="font-semibold text-gray-400">Expected:</span> {{ f.expected }}</p>{% endif %}
                {% if f.observed %}<p><span class="font-semibold text-gray-400">Observed:</span> {{ f.observed }}</p>{% endif %}
              </div>
              {% endif %}
              {% if f.spans %}
              <div class="flex flex-wrap items-center gap-1">
                {% for sp in f.spans|slice:":3" %}
                <a href="#trace-span-{{ rep.index }}-{{ sp.anchor }}" class="agentic-span-link inline-flex items-center gap-1 max-w-full rounded bg-surface-overlay/70 border border-gray-800 px-1.5 py-0.5 text-[10px] text-violet-300 hover:text-violet-200" title="{{ sp.span_id }}">
                  <span aria-hidden="true">⌖</span><span class="truncate">{{ sp.label|default:sp.span_id }}</span>
                </a>
                {% endfor %}
                {% if f.spans|length > 3 %}<span class="text-[10px] text-gray-500">+{{ f.spans|length|add:"-3" }} more</span>{% endif %}
              </div>
              {% endif %}
            </div>
          </summary>
          <div class="mt-2 space-y-1.5 border-t border-gray-800/60 pt-2">
            {% if f.reason %}<p class="text-[11px] text-gray-400 break-words">{{ f.reason }}</p>{% endif %}
            {% if f.spans|length > 3 %}
            <div class="flex flex-wrap gap-1">
              {% for sp in f.spans|slice:"3:" %}
              <a href="#trace-span-{{ rep.index }}-{{ sp.anchor }}" class="agentic-span-link inline-flex items-center gap-1 max-w-full rounded bg-surface-overlay/70 border border-gray-800 px-1.5 py-0.5 text-[10px] text-violet-300 hover:text-violet-200" title="{{ sp.span_id }}">
                <span aria-hidden="true">⌖</span><span class="truncate">{{ sp.label|default:sp.span_id }}</span>
              </a>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          <span class="hidden" data-agentic-check-evidence="{{ f.evidence_span_ids|join:' ' }}"></span>
        </details>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endif %}
    {% if rep.agentic_judge %}
    <div class="border-t border-gray-800/70 mt-3 pt-3">
      {% include "partials/agentic_judge.html" %}
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% if rep.decision %}
  {# A decision model's structured answer: the chosen option, how confident it
     was, and the probability it gave every option. Only decision targets
     (SimpleAudit DecisionTarget) produce this; chat replies have no such block. #}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex flex-wrap items-center gap-3 mb-2">
      <h3 class="text-sm font-semibold text-gray-300">Decision answer</h3>
      <span class="px-2 py-0.5 rounded-full text-xs bg-indigo-900/40 text-indigo-200 font-mono">{{ rep.decision.choice }}</span>
      {% if rep.decision.confidence_percent is not None %}
      <span class="text-xs text-gray-400" title="Calibrated confidence reported by the decision model">confidence {{ rep.decision.confidence_percent }}%</span>
      {% endif %}
    </div>
    {% if rep.decision.options %}
    <dl class="space-y-1.5 text-xs">
      {% for opt in rep.decision.options %}
      <div class="flex items-center gap-2">
        <dt class="w-28 shrink-0 truncate font-mono {% if opt.option == rep.decision.choice %}text-indigo-200{% else %}text-gray-400{% endif %}" title="{{ opt.option }}">{{ opt.option }}</dt>
        <dd class="flex-1 min-w-0 flex items-center gap-2">
          <div class="flex-1 h-1.5 rounded bg-gray-800 overflow-hidden">
            <div class="h-full {% if opt.option == rep.decision.choice %}bg-indigo-400{% else %}bg-gray-600{% endif %}" style="width: {{ opt.percent }}%"></div>
          </div>
          <span class="w-12 text-right tabular-nums {% if opt.option == rep.decision.choice %}text-indigo-200{% else %}text-gray-500{% endif %}">{{ opt.percent }}%</span>
        </dd>
      </div>
      {% endfor %}
    </dl>
    {% endif %}
  </div>
  {% endif %}

  {% if rep.has_grade and not rep.agentic_overview and not rep.agentic_findings %}
  
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <div class="flex flex-wrap items-center gap-3 mb-2">
      <h3 class="text-sm font-semibold text-gray-300">{% if rep.agentic_overview or rep.agentic_findings %}Response grade{% else %}Judge grade{% endif %}</h3>
      {% if rep.grade.score %}<span class="text-lg font-bold text-gray-100" title="Judge score (1–10); severity is derived from it">{{ rep.grade.score }}<span class="text-xs font-normal text-gray-500">/10</span></span>{% endif %}
      {% if rep.grade.abstained is not None %}<span class="px-2 py-0.5 rounded-full text-xs {% if rep.grade.abstained %}bg-sky-900/40 text-sky-300{% else %}bg-gray-800 text-gray-300{% endif %}">{% if rep.grade.abstained %}abstained{% else %}answered{% endif %}</span>{% endif %}
      {% if not rep.summary %}{% include "partials/severity_badge.html" with sev=rep.severity %}{% endif %}
    </div>
    {% if rep.grade.fields %}
    <dl class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-2 text-xs">
      {% for label, value in rep.grade.fields %}<div class="min-w-0"><dt class="text-gray-500">{{ label }}</dt><dd class="text-gray-200 truncate" title="{{ value }}">{{ value }}</dd></div>{% endfor %}
    </dl>
    {% endif %}
    {% for label, value in rep.grade.notes %}
    <p class="mt-3 text-[11px] uppercase tracking-wide text-gray-500">{{ label }}</p>
    <p class="text-sm text-gray-300 whitespace-pre-wrap break-words">{{ value }}</p>
    {% endfor %}
    {% for label, value in rep.grade.json_notes %}
    <details class="mt-3">
      <summary class="cursor-pointer text-[11px] uppercase tracking-wide text-gray-500 hover:text-gray-300">{{ label }}</summary>
      <pre class="mt-1 max-h-64 overflow-auto rounded-lg bg-surface p-3 text-[11px] text-gray-400">{{ value }}</pre>
    </details>
    {% endfor %}
  </div>
  {% endif %}

  {% if rep.issues or rep.positives or rep.recommendations %}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="bg-surface-raised rounded-xl border {% if rep.issues %}border-red-900/40{% else %}border-gray-800{% endif %} p-4">
      <h3 class="text-sm font-semibold {% if rep.issues %}text-red-300{% else %}text-gray-400{% endif %} mb-2">Issues found ({{ rep.issues|length }})</h3>
      {% if rep.issues %}
      <ul class="space-y-1.5">{% for x in rep.issues %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-red-400 shrink-0">•</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None.</p>{% endif %}
    </div>
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <h3 class="text-sm font-semibold text-emerald-300 mb-2">Positive behaviours ({{ rep.positives|length }})</h3>
      {% if rep.positives %}
      <ul class="space-y-1.5">{% for x in rep.positives %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-emerald-400 shrink-0">✓</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None recorded.</p>{% endif %}
    </div>
    <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <h3 class="text-sm font-semibold text-gray-300 mb-2">Recommendations ({{ rep.recommendations|length }})</h3>
      {% if rep.recommendations %}
      <ul class="space-y-1.5">{% for x in rep.recommendations %}<li class="text-sm text-gray-200 flex gap-2"><span class="text-gray-500 shrink-0">→</span><span>{{ x }}</span></li>{% endfor %}</ul>
      {% else %}<p class="text-xs text-gray-500">None.</p>{% endif %}
    </div>
  </div>
  {% endif %}

  {% if rep.conversation %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-3">Conversation <span class="text-gray-500 font-normal">({{ rep.turns }} turn{{ rep.turns|pluralize }})</span></h3>
    <div class="space-y-3">
      {% for m in rep.conversation %}
      <div class="flex {% if m.is_target %}justify-end{% endif %}">
        <div class="max-w-[92%] md:max-w-[80%] rounded-xl px-3 py-2.5 {% if m.is_target %}bg-blue-950/40 border border-blue-900/40{% else %}bg-surface-overlay/70 border border-gray-800{% endif %}">
          <p class="text-[10px] uppercase tracking-wide font-semibold mb-1 {% if m.is_target %}text-blue-400{% else %}text-gray-500{% endif %}">{{ m.speaker }}{% if m.turn %} · turn {{ m.turn }}{% endif %}</p>
          <p class="text-sm text-gray-200 whitespace-pre-wrap break-words">{{ m.content }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if rep.rationale %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-2">Judge rationale</h3>
    <p class="text-sm text-gray-300 whitespace-pre-wrap">{{ rep.rationale }}</p>
  </div>
  {% endif %}


  {% include "partials/agentic_timeline.html" %}

  {% if rep.tokens or rep.other %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    {% if rep.tokens %}
    <h3 class="text-sm font-semibold text-gray-300 mb-2">Token usage <span class="text-gray-500 font-normal">({{ rep.total_tokens }} total)</span></h3>
    <div class="grid grid-cols-3 gap-3 text-center">
      {% for t in rep.tokens %}
      <div class="rounded-lg bg-surface-overlay/50 px-2 py-2">
        <p class="text-[10px] uppercase text-gray-500">{{ t.role }}</p>
        <p class="text-xs text-gray-300 mt-0.5">{{ t.input|default:"0" }} in · {{ t.output|default:"0" }} out</p>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% if rep.other %}
    <div class="{% if rep.tokens %}mt-3 pt-3 border-t border-gray-800{% endif %} space-y-1.5">
      {% for key, value in rep.other.items %}
      <div class="flex items-start gap-2 text-xs"><span class="text-gray-500 shrink-0 min-w-[120px]">{{ key }}</span><span class="text-gray-300 break-all">{{ value }}</span></div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% if rep.images %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-4">
    <h3 class="text-sm font-semibold text-gray-300 mb-3">Attached image{{ rep.images|length|pluralize }}</h3>
    <div class="flex flex-wrap gap-3">
      {% for uri in rep.images %}
      <div class="max-w-[16rem]">
        <img data-img-uri="{{ uri }}" alt="attached image"
             class="file-preview-img max-h-40 rounded border border-gray-800 cursor-pointer bg-surface-overlay"
             onerror="this.style.display='none'">
        <div class="text-[10px] text-gray-500 font-mono truncate mt-1" title="{{ uri }}">{{ uri }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% include "partials/agentic_raw.html" %}
</div>
<script>
// Evidence-link clicks expand the target span's detail (idempotent).
(function() {
  if (window.__traceSpanExpandBound) return;
  window.__traceSpanExpandBound = true;
  function expandTarget(el) {
    if (!el) return;
    // Expand all <details> within or at the anchor element so the user
    // sees tool args AND raw span JSON immediately.
    var targets = [];
    if (el.tagName === 'DETAILS') targets.push(el);
    if (el.querySelectorAll) {
      var inner = el.querySelectorAll('details');
      for (var i = 0; i < inner.length; i++) targets.push(inner[i]);
    }
    if (!targets.length && el.closest) {
      var parent = el.closest('details');
      if (parent) targets.push(parent);
    }
    for (var j = 0; j < targets.length; j++) targets[j].open = true;
  }
  function expandFromHash() {
    var id = window.location.hash.slice(1);
    if (!id || !id.startsWith('trace-span-')) return;
    expandTarget(document.getElementById(id));
  }
  document.addEventListener('click', function(e) {
    var a = e.target.closest ? e.target.closest('a[href^="#trace-span-"]') : null;
    if (!a) return;
    expandTarget(document.getElementById(a.getAttribute('href').slice(1)));
  });
  if (window.location.hash) {
    expandFromHash();
    window.addEventListener('hashchange', expandFromHash);
  }
})();
</script>