mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Frontend: Token usage and cost dashboard #375

New Issue
Closed
opened 2026-02-15 05:29:30 +00:00 by jason.woltje · 1 comment
jason.woltje commented 2026-02-15 05:29:30 +00:00
Owner
Copy Link

Summary

Add a telemetry dashboard page to the Mosaic Stack web UI that displays aggregated token usage, costs, and prediction accuracy over time. This gives users visibility into their AI spending and helps identify optimization opportunities.

Requirements

Data Source

The telemetry API provides aggregated data. The frontend should query the Mosaic Telemetry API (or proxy through the Stack API) for:

  • Token usage by model/provider over time
  • Cost breakdown by model/provider
  • Task outcome distribution (success/failure/partial/timeout)
  • Quality gate pass rates
  • Prediction accuracy (estimated vs actual)

Dashboard Components

  1. Usage Summary Cards

    • Total tokens used (current period)
    • Total cost (USD, current period)
    • Task count (current period)
    • Average quality gate pass rate

  2. Token Usage Chart

    • Time series: tokens per day/week
    • Breakdown by model and provider
    • Input vs output token split

  3. Cost Chart

    • Time series: cost per day/week
    • Breakdown by model
    • Cumulative cost trend

  4. Task Outcomes

    • Pie/donut chart: success/failure/partial/timeout distribution
    • Quality gate results breakdown

  5. Prediction Accuracy (if data available)

    • Estimated vs actual tokens scatter plot
    • Estimated vs actual cost comparison
    • Accuracy trending over time

Navigation

  • Add "Telemetry" or "Usage" item to sidebar navigation
  • Accessible to workspace admins

Time Range Selector

  • Last 7 days, 30 days, 90 days
  • Custom date range

Design Notes

  • Follow existing Mosaic Stack design patterns (dark theme, card layouts)
  • Reference: docs/research/mosaic-stack-ui/ for UI inspiration
  • Use existing charting library if one is in the project, otherwise recommend lightweight option

Acceptance Criteria

  • Dashboard page accessible from sidebar navigation
  • Usage summary cards with current period data
  • Token usage time series chart
  • Cost breakdown chart
  • Task outcome distribution
  • Time range selector (7d, 30d, 90d, custom)
  • Loading and empty states handled
  • Responsive layout
  • Unit tests for dashboard components
## Summary Add a telemetry dashboard page to the Mosaic Stack web UI that displays aggregated token usage, costs, and prediction accuracy over time. This gives users visibility into their AI spending and helps identify optimization opportunities. ## Requirements ### Data Source The telemetry API provides aggregated data. The frontend should query the Mosaic Telemetry API (or proxy through the Stack API) for: - Token usage by model/provider over time - Cost breakdown by model/provider - Task outcome distribution (success/failure/partial/timeout) - Quality gate pass rates - Prediction accuracy (estimated vs actual) ### Dashboard Components 1. **Usage Summary Cards** - Total tokens used (current period) - Total cost (USD, current period) - Task count (current period) - Average quality gate pass rate 2. **Token Usage Chart** - Time series: tokens per day/week - Breakdown by model and provider - Input vs output token split 3. **Cost Chart** - Time series: cost per day/week - Breakdown by model - Cumulative cost trend 4. **Task Outcomes** - Pie/donut chart: success/failure/partial/timeout distribution - Quality gate results breakdown 5. **Prediction Accuracy** (if data available) - Estimated vs actual tokens scatter plot - Estimated vs actual cost comparison - Accuracy trending over time ### Navigation - Add "Telemetry" or "Usage" item to sidebar navigation - Accessible to workspace admins ### Time Range Selector - Last 7 days, 30 days, 90 days - Custom date range ## Design Notes - Follow existing Mosaic Stack design patterns (dark theme, card layouts) - Reference: `docs/research/mosaic-stack-ui/` for UI inspiration - Use existing charting library if one is in the project, otherwise recommend lightweight option ## Acceptance Criteria - [ ] Dashboard page accessible from sidebar navigation - [ ] Usage summary cards with current period data - [ ] Token usage time series chart - [ ] Cost breakdown chart - [ ] Task outcome distribution - [ ] Time range selector (7d, 30d, 90d, custom) - [ ] Loading and empty states handled - [ ] Responsive layout - [ ] Unit tests for dashboard components
jason.woltje added the web label 2026-02-15 05:29:30 +00:00
jason.woltje added this to the M10-Telemetry (0.0.10) milestone 2026-02-15 05:31:19 +00:00
jason.woltje commented 2026-02-15 08:05:02 +00:00
Author
Owner
Copy Link

Completed in commit 96ca58e on feature/m10-telemetry. Recharts dashboard with summary cards, token usage line chart, cost bar chart, task outcome pie chart, time range selector, loading/empty/error states. PDA-friendly. 14 unit tests.

Completed in commit 96ca58e on feature/m10-telemetry. Recharts dashboard with summary cards, token usage line chart, cost bar chart, task outcome pie chart, time range selector, loading/empty/error states. PDA-friendly. 14 unit tests.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
AI/LLM integration
 api
Backend/API work
 api
auth
Authentication
 database
database
Database/schema work
 devops
Docker/deployment
 docs
Documentation
 frontend
graph
knowledge-module
migration
Data migration
 orchestrator
Orchestrator service (apps/orchestrator/)
 p0
Critical priority
 p1
High priority
 p2
Medium priority
 p3
Low priority
 performance
Performance work
 phase-1
phase-2
phase-3
phase-4
phase-5
plugin
MoltBot plugin work
 search
security
Security-related
 setup
Initial setup
 testing
Testing/QA
 web
Frontend work
No Label web
Milestone
No items
No Milestone M10-Telemetry (0.0.10)
Projects
Clear projects
No project
Assignees
Clear assignees
jason.woltje
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaic/stack#375
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?