sleepy/odysseus
1
0
Fork
You've already forked odysseus
 0
Code Issues 9 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Feat: Add Token Usage Dashboard/Analytics #330

Merged
zapulam merged 5 commits from zapulam/feature/add_usage_dashboard into main 2026-06-01 20:29:54 +02:00
Conversation 4 Commits 5 Files changed 8 +3001
zapulam commented 2026-06-01 09:13:36 +02:00 (Migrated from github.com)
Copy link

Hey Felix,
I added a token usage dashboard, by day and by model, figured this would be pretty useful for those curious on token consumption. Added it as a new button on the side nav under the "Theme" button which opens a new modal. I seeded some older messages to make it usable. Spend would also be cool to track for non-hosting folks, just gets a bit weird to get the actual cost nailed down with cached tokens (different providers do it a bit differently I think), but its doable.

https://github.com/user-attachments/assets/f8e81adb-8c1e-48d2-a3a0-cbd3d69a07cc

https://github.com/user-attachments/assets/7cffea5c-9400-436b-bedf-cf77f30a08f6

https://github.com/user-attachments/assets/352ce4eb-9984-4bd0-afed-faa22efed668

Changed Areas

  • routes/usage_routes.py
    • Adds /api/usage/tokens aggregation for daily token/message usage.
    • Supports admin user filtering and timezone-aware date bucketing.
    • Returns per-user daily data for moving average overlays.
  • static/js/usage.js
    • Adds the Usage modal, chart rendering, date range picker, user filtering, tooltips, legend toggles, and responsive behavior.
    • Prevents future date selection.
    • Keeps the date picker visible outside narrow modal bounds.
  • static/css/usage.css
    • Adds dedicated styling for the Usage modal, toolbar, summary cards, chart, tooltip, legend, and range picker.
  • static/index.html / static/app.js
    • Adds the Usage SideNav entry and wires it to the modal.
  • tests/test_usage_routes.py
    • Adds/updates coverage for usage aggregation, message counts, token bucketing, user scoping, and admin filtering behavior.

Testing

Automated checks run:

  • python -m pytest tests/test_usage_routes.py -q
    • 5 passed
    • One existing SQLAlchemy deprecation warning from core/database.py.
  • node --check static/js/usage.js
    • Passed.
  • Linter diagnostics for edited usage files
    • No errors found.

Manual UI checks performed:

  • Opened Usage from the SideNav.
  • Verified default range is Last 30 days.
  • Verified preset range changes reload the chart.
  • Verified custom date range picker opens, clamps to the viewport, and does not allow dates after today.
  • Verified admin user dropdown filters usage by user.
  • Verified Input/Output legend toggles hide and show bars.
  • Verified 7-day average toggle renders the moving average line across the chart.
  • Verified chart hover highlights the full date column and shows tooltip details.
  • Verified narrow modal/window behavior keeps controls usable and prevents chart horizontal scrolling.
Hey Felix, I added a token usage dashboard, by day and by model, figured this would be pretty useful for those curious on token consumption. Added it as a new button on the side nav under the "Theme" button which opens a new modal. I seeded some older messages to make it usable. Spend would also be cool to track for non-hosting folks, just gets a bit weird to get the actual cost nailed down with cached tokens (different providers do it a bit differently I think), but its doable. https://github.com/user-attachments/assets/f8e81adb-8c1e-48d2-a3a0-cbd3d69a07cc https://github.com/user-attachments/assets/7cffea5c-9400-436b-bedf-cf77f30a08f6 https://github.com/user-attachments/assets/352ce4eb-9984-4bd0-afed-faa22efed668 ## Changed Areas - `routes/usage_routes.py` - Adds `/api/usage/tokens` aggregation for daily token/message usage. - Supports admin user filtering and timezone-aware date bucketing. - Returns per-user daily data for moving average overlays. - `static/js/usage.js` - Adds the Usage modal, chart rendering, date range picker, user filtering, tooltips, legend toggles, and responsive behavior. - Prevents future date selection. - Keeps the date picker visible outside narrow modal bounds. - `static/css/usage.css` - Adds dedicated styling for the Usage modal, toolbar, summary cards, chart, tooltip, legend, and range picker. - `static/index.html` / `static/app.js` - Adds the Usage SideNav entry and wires it to the modal. - `tests/test_usage_routes.py` - Adds/updates coverage for usage aggregation, message counts, token bucketing, user scoping, and admin filtering behavior. ## Testing Automated checks run: - `python -m pytest tests/test_usage_routes.py -q` - `5 passed` - One existing SQLAlchemy deprecation warning from `core/database.py`. - `node --check static/js/usage.js` - Passed. - Linter diagnostics for edited usage files - No errors found. Manual UI checks performed: - Opened Usage from the SideNav. - Verified default range is Last 30 days. - Verified preset range changes reload the chart. - Verified custom date range picker opens, clamps to the viewport, and does not allow dates after today. - Verified admin user dropdown filters usage by user. - Verified Input/Output legend toggles hide and show bars. - Verified 7-day average toggle renders the moving average line across the chart. - Verified chart hover highlights the full date column and shows tooltip details. - Verified narrow modal/window behavior keeps controls usable and prevents chart horizontal scrolling.
👍 1
TanmayDoesAI commented 2026-06-01 09:49:17 +02:00 (Migrated from github.com)
Copy link

This is really cool, I would suggest if we could also have a way for seeing usage by model, like we could filter it, and also see like the top 3 4 most used models, that sounds like the perfect extension to this.

This is really cool, I would suggest if we could also have a way for seeing usage by model, like we could filter it, and also see like the top 3 4 most used models, that sounds like the perfect extension to this.
🚀 1
zapulam commented 2026-06-01 15:45:57 +02:00 (Migrated from github.com)
Copy link

@TanmayDoesAI Good idea! I'll add that in

@TanmayDoesAI Good idea! I'll add that in
zapulam commented 2026-06-01 16:10:38 +02:00 (Migrated from github.com)
Copy link

Edit: Updated PR with Model tab for individual model metrics and filter by model on the daily page

Edit: Updated PR with Model tab for individual model metrics and filter by model on the daily page
sleepy merged commit b4b438a28a into main 2026-06-01 20:29:54 +02:00
sleepy commented 2026-06-01 20:29:54 +02:00
Owner
Copy link

Merged via squash. Usage dashboard with daily + model charts, lazy-loaded CSS, dead code removed, admin-only user scoping enforced. All review feedback addressed.

Merged via squash. Usage dashboard with daily + model charts, lazy-loaded CSS, dead code removed, admin-only user scoping enforced. All review feedback addressed.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
area:chat

   
area:core

   
area:llm

   
area:routes

   
area:tools

   
bug
Something isn't working

  
documentation
Improvements or additions to documentation

  
duplicate
This issue or pull request already exists

  
enhancement
New feature or request

  
good first issue
Good for newcomers

  
help wanted
Extra attention is needed

  
invalid
This doesn't seem right

  
question
Further information is requested

  
refactor

   
wontfix
This will not be worked on

No labels
area:chat
area:core
area:llm
area:routes
area:tools
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
refactor
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
sleepy/odysseus!330
No description provided.