Ultra-fast, cross-platform Claude Code Max usage dashboard with dragon-inspired design, advanced background services, multi-language support, and real-time analytics
Dragon UI is a high-performance desktop application that provides comprehensive analytics and monitoring for Claude Code Max usage with built-in SQLite database, advanced worker architecture, and complete internationalization support. Built with Electron + React + TypeScript for maximum performance and user experience.
npm install -g dragon-ui-claudeRun Dragon UI:
# Electron GUI (default)
dragon-ui-claude
# CLI version
dragon-ui-claude-cli
🏠 Dashboard Overview
📊 Projects Analytics
⚡ Sessions Monitoring
📅 Monthly Usage Tracking
📆 Daily Usage Analytics
🔴 Live Session Monitoring
⚙️ Advanced Settings & Configuration
💻 CLI Interface
# Install globally via npm
npm install -g dragon-ui-claude
# Run Dragon UI (Electron GUI - default)
dragon-ui-claude
# Run CLI version
dragon-ui-claude-cli
# Or run without installing
npx dragon-ui-claude # GUI version
npx dragon-ui-claude-cli # CLI versionWhy Dragon UI? The fastest, most comprehensive Claude Code Max usage dashboard with real-time analytics, dual interface options (GUI + CLI), multi-language support, and intelligent automation. No configuration needed - just install and run!
- Electron GUI - Beautiful desktop application with dragon-inspired design and animations
- CLI Interface - Powerful command-line interface for terminal enthusiasts and server environments
- Same Data - Both interfaces share the same SQLite database and features
- Live Updates - Real-time data synchronization across both interfaces
- Settings Sync - Preferences and configurations work across GUI and CLI
- Interactive Navigation - Number-based commands (0-6) for easy page switching
- Colored Output - Beautiful terminal colors with monochrome fallback option
- ASCII Tables - Professional data presentation with minimal and detailed table styles
- Live Dashboard - Real-time updates with configurable refresh intervals (1-60 seconds)
- Settings Management - Toggle colors, table styles, and refresh rates on the fly
- Complete Analytics - All GUI features available in CLI: Overview, Projects, Sessions, Monthly, Daily, Active
- Smart Formatting - Currency, numbers, dates, and durations formatted for terminal display
- Help System - Built-in help and navigation assistance
- Dragon-Inspired Design - Beautiful dark/light themes with dragon scale patterns and flame effects
- Real-time Analytics - Live dashboard with comprehensive usage statistics
- Multi-Language Support - 9 languages with instant switching (EN, DE, FR, ES, IT, PT, NL, JA, ZH)
- Multi-Currency - 12 currencies with real-time conversion and live exchange rates
- Advanced Charts - Activity charts, financial trends, usage patterns with Chart.js
- Smart Animations - Smooth transitions with accessibility support and reduce-motion detection
- Responsive Layout - Adapts beautifully to different screen sizes and orientations
- SQLite Database - Lightning-fast local database with advanced queries and caching
- Worker Thread Processing - Heavy calculations in separate threads for smooth UI
- Background Data Collector - Smart async data fetching with user-configurable intervals
- RAM Cache Service - Ultra-fast in-memory data storage (<1ms access)
- Smart Intervals - User-defined refresh rates (30s to 1h)
- Concurrent Processing - Parallel data updates for maximum performance
- Smart Rebuild Caching - Avoids unnecessary native module rebuilds (10x faster startup)
- Auto-Detection System - Automatically detects when rebuilds are actually needed
- Dual Cache Strategy - Separate caches for development and production environments
- Version-Aware Rebuilds - Only rebuilds when Electron version changes
- Zero-Config Setup - Works out of the box with intelligent fallbacks
- Background Optimization - Cache management happens transparently
- 9 Languages Supported - English, German, French, Spanish, Italian, Portuguese, Dutch, Japanese, Chinese
- Live Language Switching - Change language instantly without restart
- Complete Translation - Every UI element, page, and feature fully translated
- Dynamic Loading - Languages loaded on demand for optimal performance
- 12 Currencies Supported - USD, EUR, GBP, JPY, CHF, CAD, AUD, CNY, KRW, INR, BRL, MXN
- Real-time Exchange Rates - Live conversion with 5 API fallbacks
- Auto-Update - Background currency rate updates
- 8 Timezones Supported - Auto, UTC, EST, PST, GMT, CET, JST, AEST
- Auto-Detection - Automatically uses system timezone
- Live Time Display - Real-time clock with selected timezone
- 12h/24h Format - Customizable time format preference
- Real-time cost tracking - Monitor current period expenses with live updates
- Session usage metrics - Track active and historical sessions with detailed breakdowns
- Daily usage trends - Beautiful charts showing usage patterns with chronological sorting
- Project breakdown - Per-project cost analysis with intelligent project grouping
- Billing cycle tracking - Custom billing periods with accurate cost attribution
- Overview - Cost statistics, active days, models used, real-time activity tracking
- Projects - Project-wise cost breakdown with smart folder detection and custom paths
- Sessions - Active session monitoring, detailed history, token burn rate analysis
- Monthly - Month-over-month trends, budget planning, billing cycle support
- Daily - Granular daily breakdown, activity rates, pattern recognition
- Active Session - Live session tracking with duration and performance metrics
- SQLite Integration - Fast, reliable local database storage
- Database Operations - Clear, refresh, and manage your data easily
- Data Export - Export usage data in CSV or JSON formats for analysis
- Lightning-fast Queries - Optimized SQL for instant results
- Data Integrity - ACID compliance with transaction support
- Dual themes - Dark mode and light mode with system preference detection
- Dragon aesthetics - Subtle dragon scale patterns and flame effects
- Advanced animations - Smooth transitions with comprehensive disable option
- Compact mode - Space-efficient layout for smaller screens
- Accessibility -
prefers-reduced-motionsupport and high contrast modes - Responsive Design - Adapts beautifully to different screen sizes
- Built-in Analytics - Direct Claude usage tracking, no external dependencies
- Cross-platform - Windows, macOS, Linux support via Electron
- Ultra-fast startup - Background services with preload optimization
- Type-safe - Full TypeScript implementation with strict typing
- Real-time updates - Live data streaming without page refreshes
- Worker Architecture - Heavy computations in background threads
- Multi-Language: 9 languages with live switching (EN, DE, FR, ES, IT, PT, NL, JA, ZH)
- Multi-Currency: 12 currencies with real-time conversion (USD, EUR, GBP, JPY, etc.)
- Global Timezones: 8 supported zones with live clock (Auto, UTC, EST, PST, GMT, CET, JST, AEST)
- Appearance: Dark/light themes, compact mode (50%-100% scale), animations, dragon effects, dev tools toggle
- Billing & Refresh: Custom billing cycles, auto-refresh intervals (30s-1h)
- Project Management: Claude project detection, custom paths, SSH support
- Data Tools: Modern database dialogs, CSV/JSON export, backup capabilities
- Auto-Setup: Zero-config installation with intelligent native module rebuilds
- Ultra-Fast: <3s startup, <1ms data access, ~80MB memory usage
- Technology: React 18 + TypeScript + Vite + SQLite + Electron 28
- Smart Caching: 10x faster startup after first installation
# Clone and setup
git clone https://github.com/KingchenC/dragon-ui
cd dragon-ui && npm install
# Development - GUI
npm run dev # Vite dev server
npm run electron # Launch Electron
# Development - CLI
node cli/index.cjs # Test CLI directly
npm run start # Build and run GUI
dragon-ui-claude-cli # Test CLI after install
# Building & Distribution
npm run build # Production build
npm run dist # Create installer/DMG/AppImage
# CLI Testing Commands
node cli/index.cjs --help # Show CLI help
node cli/index.cjs --no-color # Test without colors
node cli/index.cjs --minimal # Test minimal tables- Node.js: 18+ (20+ recommended)
- OS: Windows 10/11, macOS 10.14+, Ubuntu 18.04+
- Memory: 2GB RAM minimum
Dragon UI includes intelligent auto-repair for common issues:
- ✅ Native modules - Auto-detects and rebuilds when needed
- ✅ Dependencies - Automatically installs missing modules
- ✅ Build issues - Auto-builds on first run
- ✅ Startup optimization - Smart caching prevents unnecessary rebuilds
Manual fix: npm install -g dragon-ui-claude@latest
Dragon UI is open-source and welcomes contributions! Whether you're fixing bugs, adding features, or improving translations, every contribution matters.
Quick Start:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
Check out our open issues to get started!
MIT License - see LICENSE file for details.
- Built with inspiration from the amazing Claude development community
- Electron - Fantastic cross-platform desktop framework
- React - Modern UI framework
- Tailwind CSS - Utility-first CSS framework
- SQLite - Reliable, fast local database
Built with 🐲 and ❤️ by KingchenC
Ultra-fast Claude Code Max Usage Dashboard • Cross-platform • Multi-language • Database-powered
