chris/OSVauco
1
0
Fork 0
Code Issues 1 Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(CG3e): add token usage card to billing dashboard

Browse Source
This commit is contained in:
Chris Christiansen 2026-06-09 20:09:29 +00:00
parent 33482aee2c
commit d2cf63a0d6
1 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
static/billing-dashboard.html
View File

@ -411,6 +411,19 @@ footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:cente
</div>
</div>
<!-- CG3e: Tokenbruk per agent -->
<div class="card" style="margin-top:12px">
<div class="card-hdr">
<span class="card-title">⚡ Tokenbruk per agent</span>
<span class="card-sub">Siste 30 dager</span>
</div>
<div id="token-usage-body">
<div class="empty-state">
<span class="material-symbols-outlined">bolt</span>
Laster tokendata...
</div>
</div>
</div>
</main>
</div>
@ -822,6 +835,36 @@ if ('serviceWorker' in navigator) {
});
});
}
// CG3e: hent tokenbruk
(function(){
fetch('/billing/tokens/summary')
.then(r=>r.ok?r.json():Promise.reject(r.status))
.then(data=>{
const body=document.getElementById('token-usage-body');
if(!data.rows||!data.rows.length){
body.innerHTML='<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';
return;
}
body.innerHTML=`<table style="width:100%;border-collapse:collapse;font-size:13px">
<thead><tr style="color:var(--muted);font-size:11px;text-align:left">
<th style="padding:6px 0">Agent</th>
<th>Modell</th>
<th style="text-align:right">Tokens</th>
<th style="text-align:right">Kost (USD)</th>
</tr></thead>
<tbody>${data.rows.map(r=>`<tr style="border-top:1px solid var(--border)">
<td style="padding:7px 0">${r.agent_name}</td>
<td style="color:var(--muted)">${r.model_name}</td>
<td style="text-align:right;font-family:var(--mono)">${r.total_tokens.toLocaleString()}</td>
<td style="text-align:right;font-family:var(--mono)">$${r.total_cost_usd.toFixed(4)}</td>
</tr>`).join('')}</tbody>
</table>`;
})
.catch(()=>{
document.getElementById('token-usage-body').innerHTML=
'<div class="empty-state"><span class="material-symbols-outlined">bolt</span>Ingen tokendata ennå</div>';
});
})();
</script>
</body>