Skip to content

feat: add TokenMeter desktop app with usage tracking, tray UI, and i18n support#1

Merged
shixy96 merged 7 commits intomainfrom
feat/initial-tokenmeter-app
Feb 2, 2026
Merged

feat: add TokenMeter desktop app with usage tracking, tray UI, and i18n support#1
shixy96 merged 7 commits intomainfrom
feat/initial-tokenmeter-app

Conversation

@shixy96
Copy link
Copy Markdown
Owner

@shixy96 shixy96 commented Feb 2, 2026

Summary

TokenMeter is a Tauri 2 + React desktop application for real-time API usage tracking and monitoring.

Features

Backend (Rust)

  • ccusage CLI integration: Fetch usage data from external ccusage command
  • Custom provider support: Execute JS scripts via boa_engine for data transformation
  • Pricing service: Integration with models.dev API for model pricing with fuzzy matching
  • System tray: Real-time usage display in menu bar with customizable format

Frontend (React)

  • Dashboard: Usage charts and statistics visualization
  • Provider Editor: Add, edit, delete, and test custom providers
  • Settings: Configure refresh interval, menu bar format, budget thresholds, language preference
  • TanStack Query: Data caching and auto-polling

Internationalization (i18n)

  • Multi-language support: English and Chinese translations
  • i18next integration: React-i18next for seamless language switching
  • Persistent preference: Language setting saved to config and restored on app launch
  • Complete coverage: All UI text including dashboard, providers, settings, and tray menu

Tray Window

  • Native tray integration: System tray icon with real-time usage display
  • Tray popup window: Quick access to usage summary without opening main window
  • Budget threshold warnings: Visual alerts when usage approaches or exceeds budget limits
  • Customizable display format: Configure what metrics to show in menu bar

Infrastructure

  • CI/CD workflows: GitHub Actions for build and release
  • Test suite: 46 unit tests covering core functionality
  • Claude Code skills: Development workflow automation

Technical Stack

  • Tauri 2.x (Rust backend)
  • React 18 + TypeScript
  • TanStack Query
  • shadcn/ui components
  • boa_engine (JS execution)
  • i18next + react-i18next

Testing

cargo test                           # Run all Rust tests
cargo run --example test_ccusage     # Verify ccusage integration
cargo run --example test_provider    # Verify provider scripts
npm run lint                         # Frontend linting

- Implement Rust backend with ccusage CLI integration for usage data
- Add custom provider support with JS script execution (boa_engine)
- Create React frontend with Dashboard, ProviderEditor, and Settings
- Set up TanStack Query for data management and auto-polling
- Add system tray with real-time usage display
- Include pricing service with models.dev API integration
- Add comprehensive test suite (46 unit tests)
- Configure CI/CD workflows for build and release
- Add Claude Code skills and agents for development workflow
- Added a new tray window configuration in tauri.conf.json for the TokenMeter Tray.
- Removed unused App.css file to streamline styles.
- Implemented Tray component to display usage statistics and controls.
- Created DailyBarChart component for visualizing daily usage costs.
- Updated Dashboard component to use new color variables and improved loading indicators.
- Introduced ModelIcon component for rendering model-specific icons.
- Enhanced useUsageData hook to allow background refetching of usage data.
- Refactored index.css to implement a new warm apricot color theme and added glassmorphism effects.
- Added utility function for formatting dates in a short format.
- Modified main.tsx to conditionally render the App or Tray based on the window label.
… translations

- Implemented i18n using i18next for language management.
- Added language selection in settings with support for system, English, and Chinese.
- Translated various components and UI elements to support English and Chinese.
- Created JSON files for English and Chinese translations for common, dashboard, providers, settings, and tray.
- Updated ProviderEditor and Settings components to utilize translations.
- Added hooks for managing language preferences and configuration events.
- Enhanced theme management to synchronize with language changes.
@shixy96 shixy96 changed the title feat: add TokenMeter Tauri 2 + React desktop app for API usage tracking feat: add TokenMeter desktop app with usage tracking, tray UI, and i18n support Feb 2, 2026
@shixy96 shixy96 merged commit dc1646a into main Feb 2, 2026
2 checks passed
@shixy96 shixy96 deleted the feat/initial-tokenmeter-app branch February 2, 2026 08:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant