{# Stats panel: aggregate stats over the current event window.
   Included into tool_calls_table.html via {% include "stats_panel.html" %}.
   `stats` is a BrokerAuditStats dataclass. #}
<div class="broker-audit-stats grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
  <div class="bg-white border border-slate-200 rounded-lg p-3">
    <div class="text-xs text-slate-600 uppercase">Total calls</div>
    <div class="text-2xl font-bold text-slate-800">{{ stats.total_calls }}</div>
  </div>
  <div class="bg-white border border-slate-200 rounded-lg p-3">
    <div class="text-xs text-slate-600 uppercase">Success rate</div>
    <div class="text-2xl font-bold {% if stats.success_rate >= 0.95 %}text-green-700{% elif stats.success_rate >= 0.8 %}text-amber-700{% else %}text-red-700{% endif %}">
      {{ "%.1f"|format(stats.success_rate * 100) }}%
    </div>
    <div class="text-xs text-slate-500">{{ stats.success_count }} / {{ stats.total_calls }} succeeded</div>
  </div>
  <div class="bg-white border border-slate-200 rounded-lg p-3">
    <div class="text-xs text-slate-600 uppercase">Avg latency</div>
    <div class="text-2xl font-bold text-slate-800">{{ "%.1f"|format(stats.avg_duration_ms) }}ms</div>
  </div>
  <div class="bg-white border border-slate-200 rounded-lg p-3">
    <div class="text-xs text-slate-600 uppercase">Top 5 tools</div>
    <ul class="text-xs text-slate-700 mt-1 space-y-0.5">
      {% for tool, count in stats.top_tools %}
      <li class="flex justify-between">
        <span class="font-mono truncate max-w-[10rem]" title="{{ tool }}">{{ tool }}</span>
        <span class="text-slate-500 ml-2">{{ count }} call{{ '' if count == 1 else 's' }}</span>
      </li>
      {% else %}
      <li class="text-slate-400">—</li>
      {% endfor %}
    </ul>
  </div>
</div>