feat: Add Web UI for account and quota management
## Summary Add an optional Web UI for managing accounts and monitoring quotas. WebUI is implemented as a modular plugin with minimal changes to server.js (only 5 lines added). ## New Features - Dashboard: Real-time model quota visualization with Chart.js - Accounts: OAuth-based account management (add/enable/disable/refresh/remove) - Logs: Live server log streaming via SSE with search and level filtering - Settings: System configuration with 4 tabs - Interface: Language (EN/zh_CN), polling interval, log buffer size, display options - Claude CLI: Proxy connection config, model selection, alias overrides (~/.claude.json) - Models: Model visibility and ordering management - Server Info: Runtime info and account config reload ## Technical Changes - Add src/webui/index.js as modular plugin (all WebUI routes encapsulated) - Add src/config.js for centralized configuration (~/.config/antigravity-proxy/config.json) - Add authMiddleware for optional password protection (WEBUI_PASSWORD env var) - Enhance logger with EventEmitter for SSE log streaming - Make constants configurable via config.json - Merge with main v1.2.6 (model fallback, cross-model thinking) - server.js changes: only 5 lines added to import and mount WebUI module ## Bug Fixes - Fix Alpine.js $watch error in settings-store.js (not supported in store init) - Fix "OK" label to "SUCCESS" in logs filter - Add saveSettings() calls to settings toggles for proper persistence - Improve Claude CLI config robustness (handle empty/invalid JSON files) - Add safety check for empty config.env in claude-config component - Improve config.example.json instructions with clear Windows/macOS/Linux paths ## New Files - src/webui/index.js - WebUI module with all API routes - public/ - Complete Web UI frontend (Alpine.js + TailwindCSS + DaisyUI) - src/config.js - Configuration management - src/utils/claude-config.js - Claude CLI settings helper - tests/frontend/ - Frontend test suite ## API Endpoints Added - GET/POST /api/config - Server configuration - GET/POST /api/claude/config - Claude CLI configuration - POST /api/models/config - Model alias/hidden settings - GET /api/accounts - Account list with status - POST /api/accounts/:email/toggle - Enable/disable account - POST /api/accounts/:email/refresh - Refresh account token - DELETE /api/accounts/:email - Remove account - GET /api/logs - Log history - GET /api/logs/stream - Live log streaming (SSE) - GET /api/auth/url - OAuth URL generation - GET /oauth/callback - OAuth callback handler ## Backward Compatibility - Default port remains 8080 - All existing CLI/API functionality unchanged - WebUI is entirely optional - Can be disabled by removing mountWebUI() call
This commit is contained in:
@@ -1,15 +1,18 @@
|
||||
/**
|
||||
* Logger Utility
|
||||
*
|
||||
*
|
||||
* Provides structured logging with colors and debug support.
|
||||
* Simple ANSI codes used to avoid dependencies.
|
||||
*/
|
||||
|
||||
import { EventEmitter } from 'events';
|
||||
import util from 'util';
|
||||
|
||||
const COLORS = {
|
||||
RESET: '\x1b[0m',
|
||||
BRIGHT: '\x1b[1m',
|
||||
DIM: '\x1b[2m',
|
||||
|
||||
|
||||
RED: '\x1b[31m',
|
||||
GREEN: '\x1b[32m',
|
||||
YELLOW: '\x1b[33m',
|
||||
@@ -20,14 +23,17 @@ const COLORS = {
|
||||
GRAY: '\x1b[90m'
|
||||
};
|
||||
|
||||
class Logger {
|
||||
class Logger extends EventEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
this.isDebugEnabled = false;
|
||||
this.history = [];
|
||||
this.maxHistory = 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set debug mode
|
||||
* @param {boolean} enabled
|
||||
* @param {boolean} enabled
|
||||
*/
|
||||
setDebug(enabled) {
|
||||
this.isDebugEnabled = !!enabled;
|
||||
@@ -40,19 +46,44 @@ class Logger {
|
||||
return new Date().toISOString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get log history
|
||||
*/
|
||||
getHistory() {
|
||||
return this.history;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format and print a log message
|
||||
* @param {string} level
|
||||
* @param {string} color
|
||||
* @param {string} message
|
||||
* @param {...any} args
|
||||
* @param {string} level
|
||||
* @param {string} color
|
||||
* @param {string} message
|
||||
* @param {...any} args
|
||||
*/
|
||||
print(level, color, message, ...args) {
|
||||
// Format: [TIMESTAMP] [LEVEL] Message
|
||||
const timestamp = `${COLORS.GRAY}[${this.getTimestamp()}]${COLORS.RESET}`;
|
||||
const timestampStr = this.getTimestamp();
|
||||
const timestamp = `${COLORS.GRAY}[${timestampStr}]${COLORS.RESET}`;
|
||||
const levelTag = `${color}[${level}]${COLORS.RESET}`;
|
||||
|
||||
console.log(`${timestamp} ${levelTag} ${message}`, ...args);
|
||||
|
||||
// Format the message with args similar to console.log
|
||||
const formattedMessage = util.format(message, ...args);
|
||||
|
||||
console.log(`${timestamp} ${levelTag} ${formattedMessage}`);
|
||||
|
||||
// Store structured log
|
||||
const logEntry = {
|
||||
timestamp: timestampStr,
|
||||
level,
|
||||
message: formattedMessage
|
||||
};
|
||||
|
||||
this.history.push(logEntry);
|
||||
if (this.history.length > this.maxHistory) {
|
||||
this.history.shift();
|
||||
}
|
||||
|
||||
this.emit('log', logEntry);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -98,7 +129,7 @@ class Logger {
|
||||
log(message, ...args) {
|
||||
console.log(message, ...args);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Print a section header
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user