96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ agent_name }} — Usage{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page" id="usage-container">
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
|
|
<h1>Usage</h1>
|
|
<!-- Time range filter -->
|
|
<div style="display:flex;gap:6px">
|
|
<button class="btn" id="usage-range-today" type="button" onclick="setUsageRange('today')">Today</button>
|
|
<button class="btn" id="usage-range-7d" type="button" onclick="setUsageRange('7d')" style="background:var(--accent);color:#fff;border-color:var(--accent)">7 days</button>
|
|
<button class="btn" id="usage-range-30d" type="button" onclick="setUsageRange('30d')">30 days</button>
|
|
<button class="btn" id="usage-range-all" type="button" onclick="setUsageRange('all')">All time</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary cards -->
|
|
<div id="usage-cards" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:32px">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Runs</div>
|
|
<div class="stat-value" id="u-total-runs">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Input tokens</div>
|
|
<div class="stat-value" id="u-input-tokens">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Output tokens</div>
|
|
<div class="stat-value" id="u-output-tokens">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total tokens</div>
|
|
<div class="stat-value" id="u-total-tokens">—</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Est. cost</div>
|
|
<div class="stat-value" id="u-cost">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Per-agent breakdown -->
|
|
<h2 style="font-size:14px;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px">
|
|
By agent
|
|
</h2>
|
|
<div class="table-wrap">
|
|
<table id="usage-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align:left">Agent</th>
|
|
<th style="text-align:left">Model</th>
|
|
<th style="text-align:right">Runs</th>
|
|
<th style="text-align:right">Input</th>
|
|
<th style="text-align:right">Output</th>
|
|
<th style="text-align:right">Total tokens</th>
|
|
<th style="text-align:right">Est. cost</th>
|
|
<th style="min-width:120px"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usage-tbody">
|
|
<tr><td colspan="8" style="text-align:center;color:var(--text-dim);padding:32px">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Chat sessions summary -->
|
|
<h2 style="font-size:14px;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;margin:32px 0 12px">
|
|
Chat sessions
|
|
</h2>
|
|
<div id="usage-chat-section">
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align:left">Source</th>
|
|
<th style="text-align:right">Sessions</th>
|
|
<th style="text-align:right">Input</th>
|
|
<th style="text-align:right">Output</th>
|
|
<th style="text-align:right">Total tokens</th>
|
|
<th style="text-align:right">Est. cost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usage-chat-tbody">
|
|
<tr><td colspan="6" style="text-align:center;color:var(--text-dim);padding:24px">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="usage-no-cost-note" style="font-size:12px;color:var(--text-dim);margin-top:12px;display:none">
|
|
Cost estimates only available for runs recorded after the usage tracking feature was enabled.
|
|
Runs on free or unknown models show no cost.
|
|
</p>
|
|
|
|
</div>
|
|
{% endblock %}
|