{% extends "base.html" %}
{% block title %}Usage · relaybay{% endblock %}
{% block crumbs %}<span class="crumb-sep">/</span><span class="crumb">Usage</span>{% endblock %}
{%- macro numbers(total) -%}
<td class="num">{{ "{:,}".format(total.tokens) }}</td>
<td class="num">{{ "{:,}".format(total.input) }}</td>
<td class="num">{{ "{:,}".format(total.output) }}</td>
<td class="num">{{ "{:,}".format(total.cache_read) }}</td>
<td class="num">{{ "{:,}".format(total.cache_write) }}</td>
<td class="num">{{ "{:,}".format(total.messages) }}</td>
{%- endmacro %}
{%- macro headers() -%}
<th class="num">Tokens</th><th class="num">Input</th><th class="num">Output</th><th class="num">Cache read</th><th class="num">Cache write</th><th class="num">Messages</th>
{%- endmacro %}
{%- macro summary(title, label, items) %}
<details class="usage-summary">
  <summary>{{ title }} ({{ items|length }})</summary>
  <div class="usage-table-wrap">
    <table class="usage-table">
      <thead><tr><th>{{ label }}</th>{{ headers() }}</tr></thead>
      <tbody>{% for name, total in items %}<tr><td>{{ name }}</td>{{ numbers(total) }}</tr>{% endfor %}</tbody>
    </table>
  </div>
</details>
{%- endmacro %}
{% block content %}
<main class="page usage-page" id="live" hx-ext="sse" sse-connect="/events" data-last-event-id="{{ last_event_id }}">
  <h1>Usage</h1>
  {% if message %}<p class="form-ok" role="status">{{ message }}</p>{% endif %}
  {% if error %}<p class="form-error" role="alert">{{ error }}</p>{% endif %}
  <form class="board-tools" method="get" action="/usage">
    <label class="field-inline">Project
      <select name="project">
        <option value="">All projects</option>
        {% for p in nav.projects %}<option value="{{ p.slug }}"{% if p.slug == project_filter %} selected{% endif %}>{{ p.name }}</option>{% endfor %}
      </select>
    </label>
    <label class="field-inline">Session
      <select name="session">
        <option value="">All sessions</option>
        {% for id, name in sessions %}<option value="{{ id }}"{% if id == session_filter %} selected{% endif %}>{{ name }}</option>{% endfor %}
      </select>
    </label>
    <label class="field-inline">Model
      <select name="model">
        <option value="">All models</option>
        {% for m in models %}<option value="{{ m }}"{% if m == model_filter %} selected{% endif %}>{{ m }}</option>{% endfor %}
      </select>
    </label>
    <label class="field-inline">Period
      <select name="days">
        {% for d in days_choices %}<option value="{{ d }}"{% if d == report.days %} selected{% endif %}>{{ "Last %d days"|format(d) if d else "All" }}</option>{% endfor %}
      </select>
    </label>
    <label class="field-inline">By
      <select name="group">
        <option value="day"{% if report.group == "day" %} selected{% endif %}>Day</option>
        <option value="week"{% if report.group == "week" %} selected{% endif %}>Week</option>
      </select>
    </label>
    <button type="submit" class="btn">Show</button>
  </form>

  <p class="muted usage-note">Tokens read from the Claude Code transcripts the hooks report. relaybay knows neither prices nor quotas. Subagents count to their session. "unknown" means the data does not say.</p>
  {% if not usage_enabled %}<p class="form-warning">Reading is off (<code>usage_enabled = false</code>): this is what was read before.</p>{% endif %}
  {% if report.unknown_lines %}<p class="form-warning">{{ "{:,}".format(report.unknown_lines) }} transcript line(s) were not understood and are not counted.</p>{% endif %}
  {% if report.capped_files %}<p class="form-warning">{{ report.capped_files }} subagent transcript(s) over the limit per session are not counted.</p>{% endif %}
  {% if report.unread_files %}<p class="form-warning">{{ report.unread_files }} transcript file(s) could not be read at the last pass.</p>{% endif %}

  <section class="panel" aria-labelledby="budgets-title">
    <h2 id="budgets-title">Budgets</h2>
    <p class="muted usage-note">Tokens as in the total above, cache reads included. The day is the UTC day. A budget warns at 80% and at 100%; only one set to <em>Stop agents</em> stops them, at their next tool call, and only you release that. Budgets lag: they are checked after each read of the transcripts, at least once a minute. A session on several tasks counts in full on each; a task counts from the moment a session was bound to it, from version 0.8 on.</p>
    {% if not usage_enabled %}<p class="form-warning">Budgets are blind: reading is off (<code>usage_enabled = false</code>), so no new tokens count against them.</p>{% endif %}
    {% include "_budgets.html" %}
    <form class="board-tools" method="post" action="/usage/budgets">
      <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_token }}">
      <label class="field-inline">For
        <select name="scope">
          <option value="all">All projects</option>
          <option value="project">A project</option>
          <option value="task">A task</option>
        </select>
      </label>
      <label class="field-inline">Project
        <select name="project">
          <option value="">-</option>
          {% for p in nav.projects %}<option value="{{ p.slug }}">{{ p.name }}</option>{% endfor %}
        </select>
      </label>
      <label class="field-inline">Task <input type="text" name="task" maxlength="100" placeholder="acme-shop-12"></label>
      <label class="field-inline">Period
        <select name="period">
          <option value="day">UTC day</option>
          <option value="total">Total</option>
        </select>
      </label>
      <label class="field-inline">Limit, tokens <input type="text" name="max_tokens" inputmode="numeric" maxlength="20" required></label>
      <label class="field-inline">When exceeded
        <select name="action">
          <option value="warn" selected>Warn</option>
          <option value="stop">Stop agents</option>
        </select>
      </label>
      <button type="submit" class="btn">Save budget</button>
    </form>
  </section>

  {% if not report.rows %}
  <div class="empty">
    <p>No usage for this filter.</p>
    <p>Usage appears after the Claude Code hooks of a session report its transcript ({{ report.files }} file(s) tracked so far); the reader looks at them in the background.</p>
  </div>
  {% else %}
  <figure class="usage-chart">
    <figcaption>Tokens per {{ report.group }} · most in one {{ report.group }}: {{ "{:,}".format(chart.top) }}</figcaption>
    <svg viewBox="0 0 {{ chart.width }} {{ chart.height }}" preserveAspectRatio="none" role="img" aria-label="Tokens per {{ report.group }}; the table below has the numbers">
      <line class="usage-baseline" x1="0" x2="{{ chart.width }}" y1="{{ chart.height - 0.5 }}" y2="{{ chart.height - 0.5 }}"/>
      {% for bar in chart.bars %}
      <g class="usage-bar-group">
        <title>{{ bar.title }}</title>
        <rect class="usage-hit" x="{{ bar.hit_x }}" y="0" width="{{ bar.hit_width }}" height="{{ chart.height }}"/>
        {% if bar.height %}<rect class="usage-bar" x="{{ bar.x }}" y="{{ bar.y }}" width="{{ bar.width }}" height="{{ bar.height }}" rx="1.5"/>{% endif %}
      </g>
      {% endfor %}
    </svg>
    <div class="usage-axis muted"><span>{{ chart.first }}</span><span>{{ chart.last }}</span></div>
  </figure>

  {{ summary("By project", "Project", report.by_project) }}
  {{ summary("By session", "Session", report.by_session) }}
  {{ summary("By model", "Model", report.by_model) }}

  <div class="usage-table-wrap">
    <table class="usage-table">
      <thead><tr><th>{{ "Day" if report.group == "day" else "Week of" }}</th><th>Session</th><th>Project</th><th>Model</th>{{ headers() }}</tr></thead>
      <tbody>
        {% for row in shown_rows %}
        <tr>
          <td class="usage-period">{{ row.period }}</td>
          <td>{% if row.session_id is not none %}<a href="/usage?session={{ row.session_id }}">{{ row.session }}</a>{% else %}{{ row.session }}{% endif %}</td>
          <td>{{ row.project }}</td>
          <td><code>{{ row.model }}</code></td>
          {{ numbers(row.total) }}
        </tr>
        {% endfor %}
      </tbody>
      <tfoot><tr><th colspan="4">Total</th>{{ numbers(report.total) }}</tr></tfoot>
    </table>
  </div>
  {% if report.rows|length > shown_rows|length %}<p class="muted">Showing the newest {{ shown_rows|length }} of {{ report.rows|length }} rows; the total counts them all. Narrow the filter to see the rest.</p>{% endif %}
  {% endif %}
</main>
{% endblock %}