{% extends "dashboard/base.html" %}
{% from "partials/_macros.html" import pill, empty_state, relative_time, info_toggle %}
{% from "partials/_charts.html" import bar_histogram %}

{% block page %}
<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Routes</div>
    <h1 class="page-header__title">Routes</h1>
    <p class="page-header__subtitle">Which tier each recent request was routed to, by task type.</p>
  </div>
</div>

{% call info_toggle(key='routes', title="What are route decisions?") %}
  <p>Every chat request through the brains gateway picks a <strong>tier</strong> (e.g. <code>fast</code>, <code>balanced</code>, <code>thorough</code>) based on the inferred task type and the routing policy. This page shows the distribution: which task types you're seeing and which tiers are doing the work.</p>
  <p>Use this to spot routing drift — e.g. trivial tasks landing on the thorough tier (slow + expensive) or hard tasks landing on the fast tier (cheap but low-quality).</p>
{% endcall %}

<div class="split-2" style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4);">
  <div class="panel">
    <div class="panel__header">
      <div>
        <h2 class="panel__title">{{ icon('layers') }} By tier</h2>
        <p class="panel__subtitle">Volume across the {{ routes|length }} most recent requests.</p>
      </div>
    </div>
    {{ bar_histogram(by_tier_chart, height=180) }}
  </div>
  <div class="panel">
    <div class="panel__header">
      <div>
        <h2 class="panel__title">{{ icon('list-checks') }} By task type</h2>
        <p class="panel__subtitle">What kind of work brains is being asked to route.</p>
      </div>
    </div>
    {{ bar_histogram(by_task_chart, height=180) }}
  </div>
</div>

<div class="panel">
  <div class="panel__header">
    <div>
      <h2 class="panel__title">{{ icon('network') }} Recent decisions</h2>
      <p class="panel__subtitle">Latest {{ routes|length }} routing events.</p>
    </div>
  </div>
  {% if routes %}
  <table class="data">
    <thead>
      <tr><th>Time</th><th>Task type</th><th>Tier</th></tr>
    </thead>
    <tbody>
      {% for r in routes %}
      <tr>
        <td>{{ relative_time(r.created_at) }}</td>
        <td>{{ r.task_type }}</td>
        <td><code class="mono">{{ r.model_tier }}</code></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    {{ empty_state(
        'No route decisions yet',
        body='Routes are recorded when a session calls the chat gateway.',
        icon_name='network'
    ) }}
  {% endif %}
</div>
{% endblock %}