Real-Time OpenClaw Token Monitoring Dashboard

OpenClaw Token Dashboard is a professional monitoring and model management interface designed for developers using the OpenClaw AI token service. It provides real-time visibility into token consumption, AI model usage, and cost analysis through a futuristic cyberpunk-themed interface. This project solves the critical need for transparent, instant token tracking and seamless model switching in multi-provider AI workflows.

Core Features

Real-Time Monitoring — Token usage updates every second, with live Gateway status and quota visualization via circular progress indicators across all configured AI providers (Anthropic, Google, OpenAI)
Intelligent Model Switching — One-click model switching in the UI without manual config editing; automatic recommendations for models with sufficient quota; cooldown countdown timers; automatic Gateway restart after switching
Data Analytics — Daily/weekly/monthly token consumption statistics, automated cost estimation per model, 7-day usage trend graphs, and rate limit monitoring (RPM/TPM)
Cyberpunk UI/UX — Neon aesthetic with deep black backgrounds, neon pink (#ff0080) and electric cyan (#00f0ff) accents, glowing borders, flowing animations, and scanning line effects
Responsive Design — Five breakpoints supporting desktop, tablet, and mobile; auto-adjusting layouts (4-column to 1-column), touch-friendly controls, and mobile-optimized typography
QR Code Mobile Access — Automated IP detection with QR code generation for instant mobile dashboard access on the same WiFi network

Getting Started

Graphical Launch (Recommended)

Double-click the "Start Dashboard.command" file. On first launch, right-click and select "Open" to confirm. The launcher automatically checks your environment, installs dependencies (first run only), starts the Gateway, opens your browser to http://localhost:3737, and displays mobile access instructions.

Terminal Launch

Run npm install (first time only), then execute ./start.sh or node backend/server.js from the project directory.

Accessing the Dashboard

Desktop: Navigate to http://localhost:3737
Mobile: Use the generated QR code or enter http://YOUR_IP:3737 (e.g., http://192.168.1.100:3737) on any device connected to the same WiFi

Who This Is For

AI developers managing multiple token providers who need transparent, real-time consumption tracking and the ability to switch models when quotas are exhausted or service limits are reached. Teams running Telegram bots, API services, or multi-model deployments benefit from instant model switching without manual configuration. Cost-conscious teams tracking per-model expenses will appreciate the automated cost estimation and historical trend analysis. The responsive design supports monitoring from desktops, tablets, and phones—essential for remote and on-the-go developers.

Technical Architecture

The backend uses Express.js to serve API endpoints for overview data, model status, rate limits, historical data, and cost analysis. A SQLite database (openclaw-tokens.db) stores token consumption records, and the pricing.js utility calculates model-specific costs. The frontend is built with vanilla JavaScript, HTML, and CSS—no framework dependencies—enabling fast load times and minimal resource overhead. The cyberpunk theme uses CSS animations (neon glow, pulsing halos, scanning lines) and Lucide Icons for polished, professional visuals.

Key API Endpoints

GET /api/overview?period=today|week|month — Usage summary
GET /api/models — Model quota status
GET /api/rate-limits — Rate limit utilization
GET /api/history?days=7 — Historical consumption data
GET /api/cost?period=today|week|month — Cost breakdown
POST /api/switch-model — Trigger model switching with automatic Gateway restart
GET /api/health — Service health status

Use Cases

Budget Management — Monitor token spending in real-time to prevent unexpected cost overruns
High-Availability Operations — Switch between models when one hits rate limits or quota exhaustion, maintaining service continuity
Cost Optimization — Identify which models consume most tokens and adjust usage strategies accordingly
Troubleshooting — Check Gateway status, rate limit status, and provider health to diagnose integration issues quickly

System Requirements

Node.js ≥ 14.0.0
OpenClaw installed and configured locally
macOS, Linux, or Windows (with terminal support)
Modern web browser (desktop or mobile)

Project Structure

The dashboard organizes code into backend/ (Express server, data collection, SQLite database) and frontend/ (HTML, cyberpunk CSS, JavaScript logic). Helper scripts include "Start Dashboard.command" for graphical launching, "Package for Sharing.command" for distribution, and "Mobile Access Guide.html" with QR code generation. Comprehensive documentation covers deployment, theme customization, features checklist, and troubleshooting.

Theme & Customization

The default cyberpunk theme features neon pink, electric cyan, and fluorescent green accents on a deep black grid background. Animated elements include flowing header lines (3-second cycle), pulsing Gateway status indicators (2-second breath), rotating button halos on hover, and scanning lines on card interaction. An alternative purple gradient theme is available via simple CSS file swap. Full theme documentation and color specifications are provided in CYBERPUNK_THEME.md.

Sharing & Distribution

Double-click "Package for Sharing.command" to automatically create a distributable archive containing the launcher, mobile access guide, quick-start documentation, and full source code. Recipients only need to double-click the launcher—no terminal knowledge required.

Resources & Documentation

README_FOR_FRIEND.md — Quick-start guide for non-technical users
DEPLOYMENT_GUIDE.md — Complete setup and configuration instructions
FEATURES_CHECKLIST.md — Comprehensive feature inventory
UPGRADE_NOTES.md — Detailed feature explanations
CYBERPUNK_THEME.md — Theme colors and animation specifications
Mobile Access Guide.html — Interactive QR code and mobile setup instructions

Created: 2026 | Language: JavaScript (36.9%), CSS (28.0%), Shell (26.9%), HTML (8.2%) | Repository: github.com/jacky6658/openclaw-token-dashboard

Read original