{% extends 'base.html' %}
{% block title %}Overview · Brain{% endblock %}
{% block body %}
<h1>Overview</h1>
<p class="muted">Token figures come from local logs. Limits come from Codex logs and the Claude status line snapshot.</p>

<div class="grid-cards">
  {% for x in totals %}
  <div class="card">
    <span class="badge {{ x.agent }}">{{ x.agent }}</span>
    <div class="stat-label stat-gap">Today</div>
    <div class="stat-value" data-tokens="{{ x.today or 0 }}">{{ x.today or 0 }}</div>
    <div class="muted meta"><span>7d <span class="mono" data-tokens="{{ x.week or 0 }}">{{ x.week or 0 }}</span></span>
      <span>30d <span class="mono" data-tokens="{{ x.month or 0 }}">{{ x.month or 0 }}</span></span></div>
  </div>
  {% endfor %}
</div>

<div class="card panel-tokens" id="tokens">
  <div class="tok-block">
    <h3>Today</h3>
    <div class="tok-big" id="tok-today">0</div>
    <div class="tok-split" id="tok-today-split"></div>
  </div>
  <div class="tok-block">
    <h3>7 days</h3>
    <div class="tok-big" id="tok-week">0</div>
    <div class="tok-split" id="tok-week-split"></div>
  </div>
  <div class="tok-block tok-spark">
    <h3>Last 24 h <span class="hint">tokens / hour</span></h3>
    <svg id="spark" preserveAspectRatio="none" role="img" aria-label="Tokens per hour, last 24 hours"></svg>
  </div>
  <div class="tok-block tok-models">
    <h3>Models today
      <span class="hint seg-legend"><span><span class="sw s-in"></span>in</span> <span><span class="sw s-out"></span>out</span> <span><span class="sw s-cr"></span>cache r</span> <span><span class="sw s-cw"></span>cache w</span></span>
    </h3>
    <ul id="models"></ul>
  </div>
</div>

{% for board in boards %}
<div class="card">
  <h2><a href="/memory/{{ board.id }}">{{ board.title }}</a></h2>
  {% if board.status_as_of %}<p class="muted">Status as of {{ board.status_as_of }}.</p>{% endif %}
  <table>
    <thead><tr><th>Section</th><th>#</th><th>Task</th><th>Title</th><th>Phase</th></tr></thead>
    <tbody>
    {% for entry in board.entries %}
      <tr><td><span class="badge">{{ entry.section }}</span></td><td class="mono">{{ entry.n }}</td><td class="mono">{{ entry.task }}</td><td>{{ entry.title }}</td><td>{{ entry.phase }}</td></tr>
    {% else %}
      <tr><td colspan="5" class="muted">No task entries.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endfor %}

<h2>Daily tokens, last 30 days</h2>
<div class="card"><svg id="chart" class="chart" role="img" aria-label="Daily tokens per agent, last 30 days"></svg></div>

<h2>Limits</h2>
<table>
  <thead><tr><th>Agent</th><th>Window</th><th class="num">Used</th><th>Resets</th><th>As of</th></tr></thead>
  <tbody>
  {% for x in limits %}
    <tr>
      <td><span class="badge {{ x.agent }}">{{ x.agent }}</span></td>
      <td title="{{ x.label }}{% if x.window_minutes %}, {{ x.window_minutes }} min{% endif %}">{{ x | window_label }}</td>
      <td class="num">{{ x.used_percent }}%</td>
      <td class="mono">{% if x.resets_at %}<time datetime="{{ x.resets_at }}" title="{{ x.resets_at }}">{{ x.resets_at | when }}</time>{% else %}—{% endif %}</td>
      <td><time data-rel datetime="{{ x.as_of }}">{{ x.as_of }}</time>{% if x.stale %} <span class="badge">stale</span>{% endif %}</td>
    </tr>
  {% else %}
    <tr><td colspan="5" class="muted">No limit data yet.</td></tr>
  {% endfor %}
  </tbody>
</table>

<h2>Top projects by tokens</h2>
<table>
  <thead><tr><th>Project</th><th class="num">Tokens</th></tr></thead>
  <tbody>
  {% for x in projects %}
    <tr>
      <td class="mono">{{ x.project }}</td>
      <td class="num" data-tokens="{{ x.tokens }}">{{ x.tokens }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endblock %}
{% block scripts %}
<script nonce="{{ csp_nonce }}">
  (function () {
    const d = {{ daily | tojson }};
    const days = [...new Set(d.map(x => x.day))];
    const rows = days.map(day => {
      const series = {};
      d.filter(x => x.day === day).forEach(x => { series[x.agent] = x.tokens || 0; });
      return { x: day, series };
    });
    devmem.barChart(document.querySelector('#chart'), rows, devmem.agentColors);
    const tokens = {{ tokens | tojson }};
    devmem.renderTokens(tokens);
    window.addEventListener('resize', () => devmem.renderSpark(tokens.hourly || {}));
  })();
</script>
{% endblock %}