{% extends "base.html" %}
{% block content %}
<section class="run-summary-header">
  <div class="run-summary-topline">
    <div class="run-summary-title">
      <p class="eyebrow">{{ 'Run in progress' if run.is_active else 'Completed run' }}</p>
      <h1>Run: {{ run.name }}</h1>
      {% if run.notes %}<p class="muted">{{ run.notes }}</p>{% endif %}
    </div>
    <div class="run-summary-side">
      <div class="detail-meta">
        <span>Started <strong><time class="local-time" datetime="{{ run.started_at | utc_iso }}" data-local-time="full">{{ run.started_at | utc_fallback }}</time></strong></span>
        <span>Ended <strong>{% if run.ended_at %}<time class="local-time" datetime="{{ run.ended_at | utc_iso }}" data-local-time="full">{{ run.ended_at | utc_fallback }}</time>{% else %}active{% endif %}</strong></span>
      </div>
      {% if run.is_active %}
      <form class="run-summary-action" method="post" action="/admin/runs/end">
        <button class="button danger" type="submit">End run</button>
      </form>
      {% endif %}
    </div>
  </div>
  <div class="run-stat-strip">
    <span><small>Requests</small><strong>{{ stats.request_count | compact_number }}</strong></span>
    <span><small>LLM wall time</small><strong>{{ stats.llm_wall_time_ms | duration_ms }}</strong></span>
    <span><small>Run open</small><strong>{{ stats.run_open_duration_ms | duration_ms }}</strong></span>
    <span><small>Request duration</small><strong>{{ stats.total_request_duration_ms | duration_ms }}</strong></span>
    <span><small>Input tokens</small><strong>{{ stats.tokens.input | compact_number }}</strong></span>
    <span><small>Output tokens</small><strong>{{ stats.tokens.output | compact_number }}</strong></span>
    <span><small>Total tokens</small><strong>{{ stats.tokens.total | compact_number }}</strong></span>
    <span><small>Estimated cost</small><strong>{{ stats.cost_usd | usd }}</strong></span>
    <span><small>Output tok/s</small><strong>{{ stats.throughput.output_observed | compact_rate }}</strong></span>
  </div>
</section>

<section class="panel what-if-panel" data-what-if-panel data-api-url="{{ what_if_api_url }}">
  <header>
    <h2>What-if cost</h2>
    <span data-what-if-count>Loading</span>
  </header>
  <form class="what-if-form" data-what-if-form>
    <label class="what-if-picker">
      <span>Compare model</span>
      <input
        data-what-if-input
        list="what-if-model-options"
        name="what_if_model"
        autocomplete="off"
        placeholder="Search models or providers"
      >
    </label>
    <datalist id="what-if-model-options" data-what-if-options></datalist>
    <button class="button primary compact-button" type="submit">Compare</button>
  </form>
  <p class="muted what-if-hint">Models/providers like OpenAI, Anthropic, Gemini, Qwen</p>
  <p class="muted what-if-message" data-what-if-message hidden></p>
  <div class="table-shell compact-table">
    <table class="model-routes-table what-if-table">
      <thead>
        <tr>
          <th>Scenario</th>
          <th>Input Tokens</th>
          <th>Cached Input</th>
          <th>Output Tokens</th>
          <th>Input / 1M</th>
          <th>Cached / 1M</th>
          <th>Output / 1M</th>
          <th>Input Cost</th>
          <th>Output Cost</th>
          <th>Total Cost</th>
          <th>Included</th>
          <th>Missing Usage</th>
        </tr>
      </thead>
      <tbody data-what-if-scenarios>
        <tr>
          <td class="empty" colspan="12">Loading comparisons...</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<section class="split">
  <article class="panel">
    <header><h2>Models</h2></header>
    <div class="breakdown-list">
      {% for item in stats.models %}
      <span><strong>{{ item.count | compact_number }}</strong>{{ item.label }}</span>
      {% else %}
      <p class="muted">No model usage yet.</p>
      {% endfor %}
    </div>
  </article>
  <article class="panel">
    <header><h2>Endpoints</h2></header>
    <div class="breakdown-list">
      {% for item in stats.endpoints %}
      <span><strong>{{ item.count | compact_number }}</strong>{{ item.label }}</span>
      {% else %}
      <p class="muted">No endpoint usage yet.</p>
      {% endfor %}
    </div>
  </article>
</section>

<section class="split">
  <article class="panel">
    <header><h2>Status Codes</h2></header>
    <div class="breakdown-list">
      {% for item in stats.statuses %}
      <span><strong>{{ item.count | compact_number }}</strong>{{ item.label }}</span>
      {% else %}
      <p class="muted">No status codes yet.</p>
      {% endfor %}
    </div>
  </article>
  <article class="panel">
    <header><h2>Signals</h2></header>
    <div class="breakdown-list">
      <span><strong>{{ stats.signals.streams | compact_number }}</strong>Streams</span>
      <span><strong>{{ stats.signals.images | compact_number }}</strong>Images</span>
      <span><strong>{{ stats.signals.tools | compact_number }}</strong>Tools</span>
      <span><strong>{{ stats.signals.errors | compact_number }}</strong>Errors</span>
    </div>
  </article>
</section>

<section class="page-heading compact-heading">
  <div>
    <p class="eyebrow">Requests</p>
    <h2>Run traffic</h2>
  </div>
  <a class="button ghost" href="/admin?run={{ run.id }}">Open in browser</a>
</section>

{% set show_run = false %}
{% include "_requests_table.html" %}
{% endblock %}