{% extends "base.html" %}
{% block title %}minitrail — traces{% endblock %}

{% block content %}
{% if not traces %}
<div class="text-center py-20 text-gray-500">
  <p class="text-xl mb-2">No traces found</p>
  <p class="text-sm">
    Run your instrumented script to generate traces.
  </p>
</div>
{% else %}
<h1 class="text-xl font-semibold mb-4">Pipeline Runs</h1>
<div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800 text-left text-gray-500 dark:text-gray-400">
        <th class="py-2 pr-4 font-medium">Timestamp</th>
        <th class="py-2 pr-4 font-medium">Trace ID</th>
        <th class="py-2 pr-4 font-medium text-right">Spans</th>
        <th class="py-2 pr-4 font-medium text-right">Tokens (in/out)</th>
        <th class="py-2 pr-4 font-medium text-right">Cost</th>
        <th class="py-2 pr-4 font-medium text-right">Duration</th>
        <th class="py-2 font-medium">Status</th>
      </tr>
    </thead>
    <tbody>
      {% for t in traces %}
      <tr class="border-b border-gray-100 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-900 transition-colors">
        <td class="py-2.5 pr-4">
          <a href="/traces/{{ t.trace_id }}"
             class="text-blue-600 dark:text-blue-400 hover:underline">
            {{ t.timestamp[:19] if t.timestamp else "\u2014" }}
          </a>
        </td>
        <td class="py-2.5 pr-4 font-mono text-xs text-gray-500">
          {{ t.trace_id[:16] }}...
        </td>
        <td class="py-2.5 pr-4 text-right tabular-nums">{{ t.span_count }}</td>
        <td class="py-2.5 pr-4 text-right tabular-nums text-xs">
          {{ fmt_tokens(t.total_input_tokens) }} / {{ fmt_tokens(t.total_output_tokens) }}
        </td>
        <td class="py-2.5 pr-4 text-right tabular-nums font-medium text-emerald-600 dark:text-emerald-400">
          {{ format_cost(t.total_cost) }}
        </td>
        <td class="py-2.5 pr-4 text-right tabular-nums">
          {{ format_duration(t.duration_ms) if t.duration_ms is not none else "\u2014" }}
        </td>
        <td class="py-2.5">
          {% if t.has_errors %}
          <span class="inline-block px-2 py-0.5 text-xs font-medium rounded bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">
            Error
          </span>
          {% else %}
          <span class="inline-block px-2 py-0.5 text-xs font-medium rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
            OK
          </span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endblock %}