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:
Wha1eChai
84
src/config.js
Normal file
84
src/config.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import { logger } from './utils/logger.js';
|
||||
|
||||
// Default config
|
||||
const DEFAULT_CONFIG = {
|
||||
webuiPassword: '',
|
||||
debug: false,
|
||||
logLevel: 'info',
|
||||
maxRetries: 5,
|
||||
retryBaseMs: 1000,
|
||||
retryMaxMs: 30000,
|
||||
persistTokenCache: false,
|
||||
modelMapping: {}
|
||||
};
|
||||
|
||||
// Config locations
|
||||
const HOME_DIR = os.homedir();
|
||||
const CONFIG_DIR = path.join(HOME_DIR, '.config', 'antigravity-proxy');
|
||||
const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
|
||||
|
||||
// Ensure config dir exists
|
||||
if (!fs.existsSync(CONFIG_DIR)) {
|
||||
try {
|
||||
fs.mkdirSync(CONFIG_DIR, { recursive: true });
|
||||
} catch (err) {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
// Load config
|
||||
let config = { ...DEFAULT_CONFIG };
|
||||
|
||||
function loadConfig() {
|
||||
try {
|
||||
// Env vars take precedence for initial defaults, but file overrides them if present?
|
||||
// Usually Env > File > Default.
|
||||
|
||||
if (fs.existsSync(CONFIG_FILE)) {
|
||||
const fileContent = fs.readFileSync(CONFIG_FILE, 'utf8');
|
||||
const userConfig = JSON.parse(fileContent);
|
||||
config = { ...DEFAULT_CONFIG, ...userConfig };
|
||||
} else {
|
||||
// Try looking in current dir for config.json as fallback
|
||||
const localConfigPath = path.resolve('config.json');
|
||||
if (fs.existsSync(localConfigPath)) {
|
||||
const fileContent = fs.readFileSync(localConfigPath, 'utf8');
|
||||
const userConfig = JSON.parse(fileContent);
|
||||
config = { ...DEFAULT_CONFIG, ...userConfig };
|
||||
}
|
||||
}
|
||||
|
||||
// Environment overrides
|
||||
if (process.env.WEBUI_PASSWORD) config.webuiPassword = process.env.WEBUI_PASSWORD;
|
||||
if (process.env.DEBUG === 'true') config.debug = true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('[Config] Error loading config:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
loadConfig();
|
||||
|
||||
export function getPublicConfig() {
|
||||
return { ...config };
|
||||
}
|
||||
|
||||
export function saveConfig(updates) {
|
||||
try {
|
||||
// Apply updates
|
||||
config = { ...config, ...updates };
|
||||
|
||||
// Save to disk
|
||||
fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf8');
|
||||
return true;
|
||||
} catch (error) {
|
||||
logger.error('[Config] Failed to save config:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export { config };
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
import { homedir, platform, arch } from 'os';
|
||||
import { join } from 'path';
|
||||
import { config } from './config.js';
|
||||
|
||||
/**
|
||||
* Get the Antigravity database path based on the current platform.
|
||||
@@ -59,13 +60,14 @@ export const ANTIGRAVITY_HEADERS = {
|
||||
// Default project ID if none can be discovered
|
||||
export const DEFAULT_PROJECT_ID = 'rising-fact-p41fc';
|
||||
|
||||
export const TOKEN_REFRESH_INTERVAL_MS = 5 * 60 * 1000; // 5 minutes
|
||||
export const REQUEST_BODY_LIMIT = '50mb';
|
||||
// Configurable constants - values from config.json take precedence
|
||||
export const TOKEN_REFRESH_INTERVAL_MS = config?.tokenCacheTtlMs || (5 * 60 * 1000); // From config or 5 minutes
|
||||
export const REQUEST_BODY_LIMIT = config?.requestBodyLimit || '50mb';
|
||||
export const ANTIGRAVITY_AUTH_PORT = 9092;
|
||||
export const DEFAULT_PORT = 8080;
|
||||
export const DEFAULT_PORT = config?.port || 8080;
|
||||
|
||||
// Multi-account configuration
|
||||
export const ACCOUNT_CONFIG_PATH = join(
|
||||
export const ACCOUNT_CONFIG_PATH = config?.accountConfigPath || join(
|
||||
homedir(),
|
||||
'.config/antigravity-proxy/accounts.json'
|
||||
);
|
||||
@@ -74,12 +76,12 @@ export const ACCOUNT_CONFIG_PATH = join(
|
||||
// Uses platform-specific path detection
|
||||
export const ANTIGRAVITY_DB_PATH = getAntigravityDbPath();
|
||||
|
||||
export const DEFAULT_COOLDOWN_MS = 60 * 1000; // 1 minute default cooldown
|
||||
export const MAX_RETRIES = 5; // Max retry attempts across accounts
|
||||
export const MAX_ACCOUNTS = 10; // Maximum number of accounts allowed
|
||||
export const DEFAULT_COOLDOWN_MS = config?.defaultCooldownMs || (60 * 1000); // From config or 1 minute
|
||||
export const MAX_RETRIES = config?.maxRetries || 5; // From config or 5
|
||||
export const MAX_ACCOUNTS = config?.maxAccounts || 10; // From config or 10
|
||||
|
||||
// Rate limit wait thresholds
|
||||
export const MAX_WAIT_BEFORE_ERROR_MS = 120000; // 2 minutes - throw error if wait exceeds this
|
||||
export const MAX_WAIT_BEFORE_ERROR_MS = config?.maxWaitBeforeErrorMs || 120000; // From config or 2 minutes
|
||||
|
||||
// Thinking model constants
|
||||
export const MIN_SIGNATURE_LENGTH = 50; // Minimum valid thinking signature length
|
||||
|
||||
@@ -6,7 +6,13 @@
|
||||
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { sendMessage, sendMessageStream, listModels, getModelQuotas } from './cloudcode/index.js';
|
||||
import { mountWebUI } from './webui/index.js';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
import { forceRefresh } from './auth/token-extractor.js';
|
||||
import { REQUEST_BODY_LIMIT } from './constants.js';
|
||||
import { AccountManager } from './account-manager/index.js';
|
||||
@@ -57,6 +63,9 @@ async function ensureInitialized() {
|
||||
app.use(cors());
|
||||
app.use(express.json({ limit: REQUEST_BODY_LIMIT }));
|
||||
|
||||
// Mount WebUI (optional web interface for account management)
|
||||
mountWebUI(app, __dirname, accountManager);
|
||||
|
||||
/**
|
||||
* Parse error message to extract error type, status code, and user-friendly message
|
||||
*/
|
||||
|
||||
111
src/utils/claude-config.js
Normal file
111
src/utils/claude-config.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Claude CLI Configuration Utility
|
||||
*
|
||||
* Handles reading and writing to the global Claude CLI settings file.
|
||||
* Location: ~/.claude/settings.json (Windows: %USERPROFILE%\.claude\settings.json)
|
||||
*/
|
||||
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import { logger } from './logger.js';
|
||||
|
||||
/**
|
||||
* Get the path to the global Claude CLI settings file
|
||||
* @returns {string} Absolute path to settings.json
|
||||
*/
|
||||
export function getClaudeConfigPath() {
|
||||
return path.join(os.homedir(), '.claude', 'settings.json');
|
||||
}
|
||||
|
||||
/**
|
||||
* Read the global Claude CLI configuration
|
||||
* @returns {Promise<Object>} The configuration object or empty object if file missing
|
||||
*/
|
||||
export async function readClaudeConfig() {
|
||||
const configPath = getClaudeConfigPath();
|
||||
try {
|
||||
const content = await fs.readFile(configPath, 'utf8');
|
||||
if (!content.trim()) return { env: {} };
|
||||
return JSON.parse(content);
|
||||
} catch (error) {
|
||||
if (error.code === 'ENOENT') {
|
||||
logger.warn(`[ClaudeConfig] Config file not found at ${configPath}, returning empty default`);
|
||||
return { env: {} };
|
||||
}
|
||||
if (error instanceof SyntaxError) {
|
||||
logger.error(`[ClaudeConfig] Invalid JSON in config at ${configPath}. Returning safe default.`);
|
||||
return { env: {} };
|
||||
}
|
||||
logger.error(`[ClaudeConfig] Failed to read config at ${configPath}:`, error.message);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the global Claude CLI configuration
|
||||
* Performs a deep merge with existing configuration to avoid losing other settings.
|
||||
*
|
||||
* @param {Object} updates - The partial configuration to merge in
|
||||
* @returns {Promise<Object>} The updated full configuration
|
||||
*/
|
||||
export async function updateClaudeConfig(updates) {
|
||||
const configPath = getClaudeConfigPath();
|
||||
let currentConfig = {};
|
||||
|
||||
// 1. Read existing config
|
||||
try {
|
||||
currentConfig = await readClaudeConfig();
|
||||
} catch (error) {
|
||||
// Ignore ENOENT, otherwise rethrow
|
||||
if (error.code !== 'ENOENT') throw error;
|
||||
}
|
||||
|
||||
// 2. Deep merge updates
|
||||
const newConfig = deepMerge(currentConfig, updates);
|
||||
|
||||
// 3. Ensure .claude directory exists
|
||||
const configDir = path.dirname(configPath);
|
||||
try {
|
||||
await fs.mkdir(configDir, { recursive: true });
|
||||
} catch (error) {
|
||||
// Ignore if exists
|
||||
}
|
||||
|
||||
// 4. Write back to file
|
||||
try {
|
||||
await fs.writeFile(configPath, JSON.stringify(newConfig, null, 2), 'utf8');
|
||||
logger.info(`[ClaudeConfig] Updated config at ${configPath}`);
|
||||
return newConfig;
|
||||
} catch (error) {
|
||||
logger.error(`[ClaudeConfig] Failed to write config:`, error.message);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple deep merge for objects
|
||||
*/
|
||||
function deepMerge(target, source) {
|
||||
const output = { ...target };
|
||||
|
||||
if (isObject(target) && isObject(source)) {
|
||||
Object.keys(source).forEach(key => {
|
||||
if (isObject(source[key])) {
|
||||
if (!(key in target)) {
|
||||
Object.assign(output, { [key]: source[key] });
|
||||
} else {
|
||||
output[key] = deepMerge(target[key], source[key]);
|
||||
}
|
||||
} else {
|
||||
Object.assign(output, { [key]: source[key] });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function isObject(item) {
|
||||
return (item && typeof item === 'object' && !Array.isArray(item));
|
||||
}
|
||||
@@ -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
|
||||
*/
|
||||
|
||||
161
src/utils/retry.js
Normal file
161
src/utils/retry.js
Normal file
@@ -0,0 +1,161 @@
|
||||
/**
|
||||
* Retry Utilities with Exponential Backoff
|
||||
*
|
||||
* Provides retry logic with exponential backoff and jitter
|
||||
* to prevent thundering herd and optimize API quota usage.
|
||||
*/
|
||||
|
||||
import { sleep } from './helpers.js';
|
||||
import { logger } from './logger.js';
|
||||
|
||||
/**
|
||||
* Calculate exponential backoff delay with jitter
|
||||
*
|
||||
* @param {number} attempt - Current attempt number (0-based)
|
||||
* @param {number} baseMs - Base delay in milliseconds
|
||||
* @param {number} maxMs - Maximum delay in milliseconds
|
||||
* @returns {number} Delay in milliseconds
|
||||
*/
|
||||
export function calculateBackoff(attempt, baseMs = 1000, maxMs = 30000) {
|
||||
// Exponential: baseMs * 2^attempt
|
||||
const exponential = baseMs * Math.pow(2, attempt);
|
||||
|
||||
// Cap at max
|
||||
const capped = Math.min(exponential, maxMs);
|
||||
|
||||
// Add random jitter (±25%) to prevent thundering herd
|
||||
const jitter = capped * 0.25 * (Math.random() * 2 - 1);
|
||||
|
||||
return Math.floor(capped + jitter);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retry a function with exponential backoff
|
||||
*
|
||||
* @param {Function} fn - Async function to retry (receives attempt number)
|
||||
* @param {Object} options - Retry options
|
||||
* @param {number} options.maxAttempts - Maximum number of attempts (default: 5)
|
||||
* @param {number} options.baseMs - Base delay in milliseconds (default: 1000)
|
||||
* @param {number} options.maxMs - Maximum delay in milliseconds (default: 30000)
|
||||
* @param {Function} options.shouldRetry - Function to determine if error is retryable
|
||||
* @param {Function} options.onRetry - Callback before each retry (error, attempt, backoffMs)
|
||||
* @returns {Promise<any>} Result from fn
|
||||
* @throws {Error} Last error if all attempts fail
|
||||
*/
|
||||
export async function retryWithBackoff(fn, options = {}) {
|
||||
const {
|
||||
maxAttempts = 5,
|
||||
baseMs = 1000,
|
||||
maxMs = 30000,
|
||||
shouldRetry = () => true,
|
||||
onRetry = null
|
||||
} = options;
|
||||
|
||||
let lastError;
|
||||
|
||||
for (let attempt = 0; attempt < maxAttempts; attempt++) {
|
||||
try {
|
||||
return await fn(attempt);
|
||||
} catch (error) {
|
||||
lastError = error;
|
||||
|
||||
// Check if this is the last attempt
|
||||
if (attempt === maxAttempts - 1) {
|
||||
logger.debug(`[Retry] All ${maxAttempts} attempts exhausted`);
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Check if error is retryable
|
||||
if (!shouldRetry(error, attempt)) {
|
||||
logger.debug(`[Retry] Error not retryable, aborting: ${error.message}`);
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Calculate backoff
|
||||
const backoffMs = calculateBackoff(attempt, baseMs, maxMs);
|
||||
logger.debug(`[Retry] Attempt ${attempt + 1}/${maxAttempts} failed, retrying in ${backoffMs}ms`);
|
||||
|
||||
// Call onRetry callback
|
||||
if (onRetry) {
|
||||
await onRetry(error, attempt, backoffMs);
|
||||
}
|
||||
|
||||
// Wait before retrying
|
||||
await sleep(backoffMs);
|
||||
}
|
||||
}
|
||||
|
||||
// Should never reach here, but just in case
|
||||
throw lastError;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an error is retryable (5xx errors or network issues)
|
||||
*
|
||||
* @param {Error} error - Error to check
|
||||
* @returns {boolean} True if error is retryable
|
||||
*/
|
||||
export function isRetryableError(error) {
|
||||
const message = error.message?.toLowerCase() || '';
|
||||
|
||||
// Network errors
|
||||
if (message.includes('econnrefused') ||
|
||||
message.includes('econnreset') ||
|
||||
message.includes('etimedout') ||
|
||||
message.includes('network') ||
|
||||
message.includes('fetch failed')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 5xx server errors
|
||||
if (message.includes('500') ||
|
||||
message.includes('502') ||
|
||||
message.includes('503') ||
|
||||
message.includes('504')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Rate limits (429) are retryable
|
||||
if (message.includes('429') || message.includes('rate limit')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an error is NOT retryable (4xx client errors except 429)
|
||||
*
|
||||
* @param {Error} error - Error to check
|
||||
* @returns {boolean} True if error should not be retried
|
||||
*/
|
||||
export function isNonRetryableError(error) {
|
||||
const message = error.message?.toLowerCase() || '';
|
||||
|
||||
// Authentication errors (401, 403)
|
||||
if (message.includes('401') ||
|
||||
message.includes('403') ||
|
||||
message.includes('unauthorized') ||
|
||||
message.includes('forbidden')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Bad request (400)
|
||||
if (message.includes('400') || message.includes('bad request')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Not found (404)
|
||||
if (message.includes('404') || message.includes('not found')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export default {
|
||||
calculateBackoff,
|
||||
retryWithBackoff,
|
||||
isRetryableError,
|
||||
isNonRetryableError
|
||||
};
|
||||
502
src/webui/index.js
Normal file
502
src/webui/index.js
Normal file
@@ -0,0 +1,502 @@
|
||||
/**
|
||||
* WebUI Module - Optional web interface for account management
|
||||
*
|
||||
* This module provides a web-based UI for:
|
||||
* - Dashboard with real-time model quota visualization
|
||||
* - Account management (add via OAuth, enable/disable, refresh, remove)
|
||||
* - Live server log streaming with filtering
|
||||
* - Claude CLI configuration editor
|
||||
*
|
||||
* Usage in server.js:
|
||||
* import { mountWebUI } from './webui/index.js';
|
||||
* mountWebUI(app, __dirname, accountManager);
|
||||
*/
|
||||
|
||||
import path from 'path';
|
||||
import express from 'express';
|
||||
import { getPublicConfig, saveConfig, config } from '../config.js';
|
||||
import { DEFAULT_PORT } from '../constants.js';
|
||||
import { readClaudeConfig, updateClaudeConfig, getClaudeConfigPath } from '../utils/claude-config.js';
|
||||
import { logger } from '../utils/logger.js';
|
||||
import { getAuthorizationUrl, completeOAuthFlow } from '../auth/oauth.js';
|
||||
|
||||
// OAuth state storage (state -> { verifier, timestamp })
|
||||
const pendingOAuthStates = new Map();
|
||||
|
||||
/**
|
||||
* Auth Middleware - Optional password protection for WebUI
|
||||
* Password can be set via WEBUI_PASSWORD env var or config.json
|
||||
*/
|
||||
function createAuthMiddleware() {
|
||||
return (req, res, next) => {
|
||||
const password = config.webuiPassword;
|
||||
if (!password) return next();
|
||||
|
||||
// Determine if this path should be protected
|
||||
const isApiRoute = req.path.startsWith('/api/');
|
||||
const isException = req.path === '/api/auth/url' || req.path === '/api/config';
|
||||
const isProtected = (isApiRoute && !isException) || req.path === '/account-limits' || req.path === '/health';
|
||||
|
||||
if (isProtected) {
|
||||
const providedPassword = req.headers['x-webui-password'] || req.query.password;
|
||||
if (providedPassword !== password) {
|
||||
return res.status(401).json({ status: 'error', error: 'Unauthorized: Password required' });
|
||||
}
|
||||
}
|
||||
next();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount WebUI routes and middleware on Express app
|
||||
* @param {Express} app - Express application instance
|
||||
* @param {string} dirname - __dirname of the calling module (for static file path)
|
||||
* @param {AccountManager} accountManager - Account manager instance
|
||||
*/
|
||||
export function mountWebUI(app, dirname, accountManager) {
|
||||
// Apply auth middleware
|
||||
app.use(createAuthMiddleware());
|
||||
|
||||
// Serve static files from public directory
|
||||
app.use(express.static(path.join(dirname, '../public')));
|
||||
|
||||
// ==========================================
|
||||
// Account Management API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* GET /api/accounts - List all accounts with status
|
||||
*/
|
||||
app.get('/api/accounts', async (req, res) => {
|
||||
try {
|
||||
const status = accountManager.getStatus();
|
||||
res.json({
|
||||
status: 'ok',
|
||||
accounts: status.accounts,
|
||||
summary: {
|
||||
total: status.total,
|
||||
available: status.available,
|
||||
rateLimited: status.rateLimited,
|
||||
invalid: status.invalid
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/accounts/:email/refresh - Refresh specific account token
|
||||
*/
|
||||
app.post('/api/accounts/:email/refresh', async (req, res) => {
|
||||
try {
|
||||
const { email } = req.params;
|
||||
accountManager.clearTokenCache(email);
|
||||
accountManager.clearProjectCache(email);
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: `Token cache cleared for ${email}`
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/accounts/:email/toggle - Enable/disable account
|
||||
*/
|
||||
app.post('/api/accounts/:email/toggle', async (req, res) => {
|
||||
try {
|
||||
const { email } = req.params;
|
||||
const { enabled } = req.body;
|
||||
|
||||
if (typeof enabled !== 'boolean') {
|
||||
return res.status(400).json({ status: 'error', error: 'enabled must be a boolean' });
|
||||
}
|
||||
|
||||
accountManager.setAccountEnabled(email, enabled);
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: `Account ${email} ${enabled ? 'enabled' : 'disabled'}`
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* DELETE /api/accounts/:email - Remove account
|
||||
*/
|
||||
app.delete('/api/accounts/:email', async (req, res) => {
|
||||
try {
|
||||
const { email } = req.params;
|
||||
accountManager.removeAccount(email);
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: `Account ${email} removed`
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/accounts/reload - Reload accounts from disk
|
||||
*/
|
||||
app.post('/api/accounts/reload', async (req, res) => {
|
||||
try {
|
||||
await accountManager.reloadAccounts();
|
||||
const status = accountManager.getStatus();
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: 'Accounts reloaded from disk',
|
||||
summary: status.summary
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Configuration API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* GET /api/config - Get server configuration
|
||||
*/
|
||||
app.get('/api/config', (req, res) => {
|
||||
try {
|
||||
const publicConfig = getPublicConfig();
|
||||
res.json({
|
||||
status: 'ok',
|
||||
config: publicConfig,
|
||||
note: 'Edit ~/.config/antigravity-proxy/config.json or use env vars to change these values'
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('[WebUI] Error getting config:', error);
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/config - Update server configuration
|
||||
*/
|
||||
app.post('/api/config', (req, res) => {
|
||||
try {
|
||||
const { debug, logLevel, maxRetries, retryBaseMs, retryMaxMs, persistTokenCache } = req.body;
|
||||
|
||||
// Only allow updating specific fields (security)
|
||||
const updates = {};
|
||||
if (typeof debug === 'boolean') updates.debug = debug;
|
||||
if (logLevel && ['info', 'warn', 'error', 'debug'].includes(logLevel)) {
|
||||
updates.logLevel = logLevel;
|
||||
}
|
||||
if (typeof maxRetries === 'number' && maxRetries >= 1 && maxRetries <= 20) {
|
||||
updates.maxRetries = maxRetries;
|
||||
}
|
||||
if (typeof retryBaseMs === 'number' && retryBaseMs >= 100 && retryBaseMs <= 10000) {
|
||||
updates.retryBaseMs = retryBaseMs;
|
||||
}
|
||||
if (typeof retryMaxMs === 'number' && retryMaxMs >= 1000 && retryMaxMs <= 120000) {
|
||||
updates.retryMaxMs = retryMaxMs;
|
||||
}
|
||||
if (typeof persistTokenCache === 'boolean') {
|
||||
updates.persistTokenCache = persistTokenCache;
|
||||
}
|
||||
|
||||
if (Object.keys(updates).length === 0) {
|
||||
return res.status(400).json({
|
||||
status: 'error',
|
||||
error: 'No valid configuration updates provided'
|
||||
});
|
||||
}
|
||||
|
||||
const success = saveConfig(updates);
|
||||
|
||||
if (success) {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: 'Configuration saved. Restart server to apply some changes.',
|
||||
updates: updates,
|
||||
config: getPublicConfig()
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
status: 'error',
|
||||
error: 'Failed to save configuration file'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('[WebUI] Error updating config:', error);
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* GET /api/settings - Get runtime settings
|
||||
*/
|
||||
app.get('/api/settings', async (req, res) => {
|
||||
try {
|
||||
const settings = accountManager.getSettings ? accountManager.getSettings() : {};
|
||||
res.json({
|
||||
status: 'ok',
|
||||
settings: {
|
||||
...settings,
|
||||
port: process.env.PORT || DEFAULT_PORT
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Claude CLI Configuration API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* GET /api/claude/config - Get Claude CLI configuration
|
||||
*/
|
||||
app.get('/api/claude/config', async (req, res) => {
|
||||
try {
|
||||
const claudeConfig = await readClaudeConfig();
|
||||
res.json({
|
||||
status: 'ok',
|
||||
config: claudeConfig,
|
||||
path: getClaudeConfigPath()
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/claude/config - Update Claude CLI configuration
|
||||
*/
|
||||
app.post('/api/claude/config', async (req, res) => {
|
||||
try {
|
||||
const updates = req.body;
|
||||
if (!updates || typeof updates !== 'object') {
|
||||
return res.status(400).json({ status: 'error', error: 'Invalid config updates' });
|
||||
}
|
||||
|
||||
const newConfig = await updateClaudeConfig(updates);
|
||||
res.json({
|
||||
status: 'ok',
|
||||
config: newConfig,
|
||||
message: 'Claude configuration updated'
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/models/config - Update model configuration (hidden/pinned/alias)
|
||||
*/
|
||||
app.post('/api/models/config', (req, res) => {
|
||||
try {
|
||||
const { modelId, config: newModelConfig } = req.body;
|
||||
|
||||
if (!modelId || typeof newModelConfig !== 'object') {
|
||||
return res.status(400).json({ status: 'error', error: 'Invalid parameters' });
|
||||
}
|
||||
|
||||
// Load current config
|
||||
const currentMapping = config.modelMapping || {};
|
||||
|
||||
// Update specific model config
|
||||
currentMapping[modelId] = {
|
||||
...currentMapping[modelId],
|
||||
...newModelConfig
|
||||
};
|
||||
|
||||
// Save back to main config
|
||||
const success = saveConfig({ modelMapping: currentMapping });
|
||||
|
||||
if (success) {
|
||||
// Update in-memory config reference
|
||||
config.modelMapping = currentMapping;
|
||||
res.json({ status: 'ok', modelConfig: currentMapping[modelId] });
|
||||
} else {
|
||||
throw new Error('Failed to save configuration');
|
||||
}
|
||||
} catch (error) {
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Logs API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* GET /api/logs - Get log history
|
||||
*/
|
||||
app.get('/api/logs', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
logs: logger.getHistory ? logger.getHistory() : []
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* GET /api/logs/stream - Stream logs via SSE
|
||||
*/
|
||||
app.get('/api/logs/stream', (req, res) => {
|
||||
res.setHeader('Content-Type', 'text/event-stream');
|
||||
res.setHeader('Cache-Control', 'no-cache');
|
||||
res.setHeader('Connection', 'keep-alive');
|
||||
|
||||
const sendLog = (log) => {
|
||||
res.write(`data: ${JSON.stringify(log)}\n\n`);
|
||||
};
|
||||
|
||||
// Send recent history if requested
|
||||
if (req.query.history === 'true' && logger.getHistory) {
|
||||
const history = logger.getHistory();
|
||||
history.forEach(log => sendLog(log));
|
||||
}
|
||||
|
||||
// Subscribe to new logs
|
||||
if (logger.on) {
|
||||
logger.on('log', sendLog);
|
||||
}
|
||||
|
||||
// Cleanup on disconnect
|
||||
req.on('close', () => {
|
||||
if (logger.off) {
|
||||
logger.off('log', sendLog);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// OAuth API
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* GET /api/auth/url - Get OAuth URL to start the flow
|
||||
*/
|
||||
app.get('/api/auth/url', (req, res) => {
|
||||
try {
|
||||
const { email } = req.query;
|
||||
const { url, verifier, state } = getAuthorizationUrl(email);
|
||||
|
||||
// Store the verifier temporarily
|
||||
pendingOAuthStates.set(state, { verifier, timestamp: Date.now() });
|
||||
|
||||
// Clean up old states (> 10 mins)
|
||||
const now = Date.now();
|
||||
for (const [key, val] of pendingOAuthStates.entries()) {
|
||||
if (now - val.timestamp > 10 * 60 * 1000) {
|
||||
pendingOAuthStates.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
res.json({ status: 'ok', url });
|
||||
} catch (error) {
|
||||
logger.error('[WebUI] Error generating auth URL:', error);
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* GET /oauth/callback - OAuth callback handler
|
||||
*/
|
||||
app.get('/oauth/callback', async (req, res) => {
|
||||
const { code, state, error } = req.query;
|
||||
|
||||
if (error) {
|
||||
return res.status(400).send(`Authentication failed: ${error}`);
|
||||
}
|
||||
|
||||
if (!code || !state) {
|
||||
return res.status(400).send('Missing code or state parameter');
|
||||
}
|
||||
|
||||
const storedState = pendingOAuthStates.get(state);
|
||||
if (!storedState) {
|
||||
return res.status(400).send('Invalid or expired state parameter. Please try again.');
|
||||
}
|
||||
|
||||
// Remove used state
|
||||
pendingOAuthStates.delete(state);
|
||||
|
||||
try {
|
||||
const accountData = await completeOAuthFlow(code, storedState.verifier);
|
||||
|
||||
// Add or update the account
|
||||
accountManager.addAccount({
|
||||
email: accountData.email,
|
||||
refreshToken: accountData.refreshToken,
|
||||
projectId: accountData.projectId,
|
||||
source: 'oauth'
|
||||
});
|
||||
|
||||
// Return a simple HTML page that closes itself or redirects
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Authentication Successful</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: #09090b;
|
||||
color: #e4e4e7;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
h1 { color: #22c55e; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Authentication Successful</h1>
|
||||
<p>Account ${accountData.email} has been added.</p>
|
||||
<p>You can close this window now.</p>
|
||||
<script>
|
||||
// Notify opener if opened via window.open
|
||||
if (window.opener) {
|
||||
window.opener.postMessage({ type: 'oauth-success', email: '${accountData.email}' }, '*');
|
||||
setTimeout(() => window.close(), 2000);
|
||||
} else {
|
||||
// If redirected in same tab, redirect back to home after delay
|
||||
setTimeout(() => window.location.href = '/', 3000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
} catch (err) {
|
||||
logger.error('[WebUI] OAuth callback error:', err);
|
||||
res.status(500).send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Authentication Failed</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: #09090b;
|
||||
color: #ef4444;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Authentication Failed</h1>
|
||||
<p>${err.message}</p>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
logger.info('[WebUI] Mounted at /');
|
||||
}
|
||||
Reference in New Issue
Block a user