feat: add token usage statistics with daily tracking and stats modal

- Add TokenUsageEntry and TokenStats types for daily tracking
- Add state-store methods for recording and retrieving daily usage
- Add /api/token-stats endpoint with daily breakdown and totals
- Add token stats modal with summary cards, 7-day bar chart, and table
- Record tokens periodically (5min) and on session delete
- Make header tokens clickable to open stats modal
- Fix subagents panel toggle icon direction (down when open)
- Increase subagents panel height when expanded

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-25 20:36:04 +01:00
co-authored by Claude Opus 4.5
parent 74e8dd27dd
commit 28fd933252
8 changed files with 530 additions and 3 deletions
+23
View File
@@ -756,6 +756,29 @@
<!-- Help Button -->
<button class="help-btn" onclick="app.showHelp()" title="Keyboard shortcuts (Ctrl+?)">?</button>
<!-- Token Stats Modal -->
<div class="modal" id="tokenStatsModal">
<div class="modal-backdrop" onclick="app.closeTokenStats()"></div>
<div class="modal-content token-stats-modal">
<div class="modal-header">
<h3>Token Usage Statistics</h3>
<button class="modal-close" onclick="app.closeTokenStats()">&times;</button>
</div>
<div class="modal-body">
<div class="stats-summary" id="statsSummary"></div>
<div class="stats-chart-container">
<div class="stats-chart-label">Last 7 Days</div>
<div class="stats-chart" id="statsChart"></div>
<div class="stats-chart-days" id="statsChartDays"></div>
</div>
<div class="stats-table-container">
<div class="stats-table-label">Daily Breakdown</div>
<div class="stats-table" id="statsTable"></div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>