No description
0e46ef084e
## New Features - **Customizable Progress Bar Colors**: Users can now customize the colors for normal, warning, and danger states through a dedicated settings window - **Separate Settings Window**: Settings now open in a frameless, resizable window (500x680px) with live preview of color changes - **CSS Variables**: Converted hardcoded colors to CSS custom properties for dynamic theming ## Files Modified - **main.js**: Added settings window creation, color preference storage (electron-store), and IPC handlers - **preload.js**: Exposed color preference and settings IPC methods to renderer - **app.js**: Implemented color preference loading and live updates from settings window - **styles.css**: Added CSS variables for customizable colors, updated scrollbar styling - **index.html**: Removed unused settings overlay - **.gitignore**: Added CLAUDE_NOTES.md to prevent credential leaks ## Files Added - **src/renderer/settings.html**: Settings window UI with 2-column color picker layout - **src/renderer/settings.js**: Settings window logic and color management - **src/renderer/settings-styles.css**: Settings window styling - **CHANGES.md**: Tracking document for modifications ## Technical Details - Color preferences stored in electron-store with encryption - Live color updates via IPC communication between settings and main windows - Default color scheme: Purple (normal), Orange (warning), Red (danger) - Settings accessible via tray menu or settings button 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| assets | ||
| src/renderer | ||
| .gitignore | ||
| CHANGES.md | ||
| INSTALL.md | ||
| main.js | ||
| package.json | ||
| preload.js | ||
| QUICKSTART.md | ||
| README.md | ||
Claude Usage Widget
A beautiful, standalone Windows desktop widget that displays your Claude.ai usage statistics in real-time.
Features
- 🎯 Real-time Usage Tracking - Monitor both session and weekly usage limits
- 📊 Visual Progress Bars - Clean, gradient progress indicators
- ⏱️ Countdown Timers - Circular timers showing time until reset
- 🔄 Auto-refresh - Updates every 5 minutes automatically
- 🎨 Modern UI - Sleek, draggable widget with dark theme
- 🔒 Secure - Encrypted credential storage
- 📍 Always on Top - Stays visible across all workspaces
- 💾 System Tray - Minimizes to tray for easy access
Installation
Download Pre-built Release
- Download the latest
Claude-Usage-Widget-Setup.exefrom Releases - Run the installer
- Launch "Claude Usage Widget" from Start Menu
Build from Source
Prerequisites:
- Node.js 18+ (Download)
- npm (comes with Node.js)
Steps:
# Clone the repository
git clone https://github.com/yourusername/claude-usage-widget.git
cd claude-usage-widget
# Install dependencies
npm install
# Run in development mode
npm start
# Build installer for Windows
npm run build:win
The installer will be created in the dist/ folder.
Usage
First Launch
- Launch the widget
- Click "Login to Claude" when prompted
- A browser window will open - login to your Claude.ai account
- The widget will automatically capture your session
- Usage data will start displaying immediately
Widget Controls
- Drag - Click and drag the title bar to move the widget
- Refresh - Click the refresh icon to update data immediately
- Minimize - Click the minus icon to hide to system tray
- Close - Click the X to minimize to tray (doesn't exit)
System Tray Menu
Right-click the tray icon for:
- Show/Hide widget
- Refresh usage data
- Re-login (if session expires)
- Settings (coming soon)
- Exit application
Understanding the Display
Current Session
- Progress Bar - Shows usage from 0-100%
- Timer - Time remaining until 5-hour session resets
- Color Coding:
- Purple: Normal usage (0-74%)
- Orange: High usage (75-89%)
- Red: Critical usage (90-100%)
Weekly Limit
- Progress Bar - Shows weekly usage from 0-100%
- Timer - Time remaining until weekly reset (Wednesdays 7:00 AM)
- Same color coding as session usage
Configuration
Auto-start on Windows Boot
- Press
Win + R - Type
shell:startupand press Enter - Create a shortcut to the widget executable in this folder
Custom Refresh Interval
Edit src/renderer/app.js:
const UPDATE_INTERVAL = 5 * 60 * 1000; // Change to your preference (in milliseconds)
Troubleshooting
"Login Required" keeps appearing
- Your Claude.ai session may have expired
- Click "Login to Claude" to re-authenticate
- Check that you're logging into the correct account
Widget not updating
- Check your internet connection
- Click the refresh button manually
- Ensure Claude.ai is accessible in your region
- Try re-logging in from the system tray menu
Widget position not saving
- Window position is now saved automatically when you drag it
- Position will be restored when you restart the app
Build errors
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
Privacy & Security
- Your session credentials are stored locally only using encrypted storage
- No data is sent to any third-party servers
- The widget only communicates with Claude.ai official API
- Session cookies are stored using Electron's secure storage
Technical Details
Built with:
- Electron 28.0.0
- Pure JavaScript (no framework overhead)
- Native Node.js APIs
- electron-store for secure storage
API Endpoint:
https://claude.ai/api/organizations/{org_id}/usage
Storage Location:
%APPDATA%/claude-usage-widget/config.json (encrypted)
Roadmap
- macOS support
- Linux support
- Custom themes
- Notification alerts at usage thresholds
- Remember window position
- Settings panel
- Usage history graphs
- Multiple account support
- Keyboard shortcuts
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - feel free to use and modify as needed.
Disclaimer
This is an unofficial tool and is not affiliated with or endorsed by Anthropic. Use at your own discretion.
Support
If you encounter issues:
- Check the Issues page
- Create a new issue with details about your problem
- Include your OS version and any error messages
Made with ❤️ for the Claude.ai community