diff --git a/frontend/costs.html b/frontend/costs.html
new file mode 100644
index 0000000..5cf6466
--- /dev/null
+++ b/frontend/costs.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+ Cost Dashboard - Luke at the Roost
+
+
+
+
+
+
+
+
+
+
+
Cost Over Time
+
+
+
+
Cost by Model
+
+
+
+
+
+
Cost by Category
+
+
+
+
Cost Per Session
+
+
+
+
+
+
Most Expensive Calls
+
+
+ | Model | Category | Caller | Tokens | Cost | Latency |
|---|
+
+
+
+
+
Sessions
+
+
+ | Date | LLM | TTS | Total | Calls | |
|---|
+
+
+
+
Session Detail:
+
+
+
+
+
+
+
Most Expensive Calls
+
+ | Category | Model | Caller | Cost | Tokens | Latency |
|---|
+
+
+
+
+ | ${shortenModel(d.model)} |
+ ${d.category} |
+ ${d.caller_name || '\u2014'} |
+ ${(d.prompt_tokens + d.completion_tokens).toLocaleString()} |
+ ${formatCost(d.cost)} |
+ ${d.latency_ms.toFixed(0)}ms |
+
+ `).join('');
+}
+
+function renderSessionsTable(data) {
+ const tbody = document.querySelector('#sessions-table tbody');
+ tbody.innerHTML = data.map(d => `
+
+ | ${formatDate(d.started_at)} |
+ ${formatCost(d.llm_cost)} |
+ ${formatCost(d.tts_cost)} |
+ ${formatCost(d.total_cost)} |
+ ${d.total_llm_calls} |
+ |
+
+ `).join('');
+
+ tbody.querySelectorAll('.view-btn').forEach(btn => {
+ btn.addEventListener('click', e => {
+ e.stopPropagation();
+ showSessionDetail(btn.dataset.session);
+ });
+ });
+ tbody.querySelectorAll('.clickable').forEach(row => {
+ row.addEventListener('click', () => showSessionDetail(row.dataset.session));
+ });
+}
+
+// --- Session Detail ---
+
+async function showSessionDetail(sessionId) {
+ try {
+ const detail = await fetch(`/api/costs/session/${sessionId}`).then(r => r.json());
+
+ document.getElementById('detail-session-id').textContent = sessionId;
+
+ populateDetailTable('#detail-caller-table tbody', detail.by_caller,
+ d => `${d.caller_name} | ${d.calls} | ${formatCost(d.cost)} | `);
+
+ populateDetailTable('#detail-category-table tbody', detail.by_category,
+ d => `${d.category} | ${d.calls} | ${formatCost(d.cost)} | `);
+
+ populateDetailTable('#detail-model-table tbody', detail.by_model,
+ d => `${shortenModel(d.model)} | ${d.calls} | ${formatCost(d.cost)} | `);
+
+ populateDetailTable('#detail-expensive-table tbody', detail.expensive_calls,
+ d => `${d.category} | ${shortenModel(d.model)} | ${d.caller_name || '\u2014'} | ` +
+ `${formatCost(d.cost)} | ${(d.prompt_tokens + d.completion_tokens).toLocaleString()} | ` +
+ `${d.latency_ms.toFixed(0)}ms | `);
+
+ document.querySelectorAll('.costs-main > section:not(.session-detail)').forEach(
+ s => s.style.display = 'none');
+ document.getElementById('session-detail').classList.remove('hidden');
+ } catch (e) {
+ console.error('Detail load error:', e);
+ }
+}
+
+function populateDetailTable(selector, data, rowFn) {
+ const tbody = document.querySelector(selector);
+ tbody.innerHTML = data.map(d => `${rowFn(d)}
`).join('');
+}
+
+function closeDetail() {
+ document.getElementById('session-detail').classList.add('hidden');
+ document.querySelectorAll('.costs-main > section:not(.session-detail)').forEach(
+ s => s.style.display = '');
+}
+
+// --- Init ---
+
+document.addEventListener('DOMContentLoaded', () => {
+ document.querySelectorAll('.period-tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ document.querySelector('.period-tab.active').classList.remove('active');
+ tab.classList.add('active');
+ currentPeriod = tab.dataset.period;
+ loadDashboard();
+ });
+ });
+ document.getElementById('close-detail').addEventListener('click', closeDetail);
+ loadDashboard();
+});