commons-proxy 2.0.0

package/public/js/components/logs-viewer.js

@@ -0,0 +1,100 @@
+/**
+ * Logs Viewer Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.logsViewer = () => ({
+    logs: [],
+    isAutoScroll: true,
+    eventSource: null,
+    searchQuery: '',
+    filters: {
+        INFO: true,
+        WARN: true,
+        ERROR: true,
+        SUCCESS: true,
+        DEBUG: false
+    },
+
+    get filteredLogs() {
+        const query = this.searchQuery.trim();
+        if (!query) {
+            return this.logs.filter(log => this.filters[log.level]);
+        }
+
+        // Try regex first, fallback to plain text search
+        let matcher;
+        try {
+            const regex = new RegExp(query, 'i');
+            matcher = (msg) => regex.test(msg);
+        } catch (e) {
+            // Invalid regex, fallback to case-insensitive string search
+            const lowerQuery = query.toLowerCase();
+            matcher = (msg) => msg.toLowerCase().includes(lowerQuery);
+        }
+
+        return this.logs.filter(log => {
+            // Level Filter
+            if (!this.filters[log.level]) return false;
+
+            // Search Filter
+            return matcher(log.message);
+        });
+    },
+
+    init() {
+        this.startLogStream();
+
+        this.$watch('isAutoScroll', (val) => {
+            if (val) this.scrollToBottom();
+        });
+
+        // Watch filters to maintain auto-scroll if enabled
+        this.$watch('searchQuery', () => { if(this.isAutoScroll) this.$nextTick(() => this.scrollToBottom()) });
+        this.$watch('filters', () => { if(this.isAutoScroll) this.$nextTick(() => this.scrollToBottom()) });
+    },
+
+    startLogStream() {
+        if (this.eventSource) this.eventSource.close();
+
+        const password = Alpine.store('global').webuiPassword;
+        const url = password
+            ? `/api/logs/stream?history=true&password=${encodeURIComponent(password)}`
+            : '/api/logs/stream?history=true';
+
+        this.eventSource = new EventSource(url);
+        this.eventSource.onmessage = (event) => {
+            try {
+                const log = JSON.parse(event.data);
+                this.logs.push(log);
+
+                // Limit log buffer
+                const limit = Alpine.store('settings')?.logLimit || window.AppConstants.LIMITS.DEFAULT_LOG_LIMIT;
+                if (this.logs.length > limit) {
+                    this.logs = this.logs.slice(-limit);
+                }
+
+                if (this.isAutoScroll) {
+                    this.$nextTick(() => this.scrollToBottom());
+                }
+            } catch (e) {
+                if (window.UILogger) window.UILogger.debug('Log parse error:', e.message);
+            }
+        };
+
+        this.eventSource.onerror = () => {
+            if (window.UILogger) window.UILogger.debug('Log stream disconnected, reconnecting...');
+            setTimeout(() => this.startLogStream(), 3000);
+        };
+    },
+
+    scrollToBottom() {
+        const container = document.getElementById('logs-container');
+        if (container) container.scrollTop = container.scrollHeight;
+    },
+
+    clearLogs() {
+        this.logs = [];
+    }
+});

package/public/js/components/models.js

@@ -0,0 +1,36 @@
+/**
+ * Models Component
+ * Displays model quota/status list
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.models = () => ({
+    init() {
+        // Ensure data is fetched when this tab becomes active (skip initial trigger)
+        this.$watch('$store.global.activeTab', (val, oldVal) => {
+            if (val === 'models' && oldVal !== undefined) {
+                // Trigger recompute to ensure filters are applied
+                this.$nextTick(() => {
+                    Alpine.store('data').computeQuotaRows();
+                });
+            }
+        });
+
+        // Initial compute if already on models tab
+        if (this.$store.global.activeTab === 'models') {
+            this.$nextTick(() => {
+                Alpine.store('data').computeQuotaRows();
+            });
+        }
+    },
+
+    /**
+     * Update model configuration (delegates to shared utility)
+     * @param {string} modelId - The model ID to update
+     * @param {object} configUpdates - Configuration updates (pinned, hidden)
+     */
+    async updateModelConfig(modelId, configUpdates) {
+        return window.ModelConfigUtils.updateModelConfig(modelId, configUpdates);
+    }
+});

package/public/js/components/server-config.js

@@ -0,0 +1,349 @@
+/**
+ * Server Config Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.serverConfig = () => ({
+    serverConfig: {},
+    loading: false,
+    advancedExpanded: false,
+    debounceTimers: {}, // Store debounce timers for each config field
+
+    init() {
+        // Initial fetch if this is the active sub-tab
+        if (this.activeTab === 'server') {
+            this.fetchServerConfig();
+        }
+
+        // Watch local activeTab (from parent settings scope, skip initial trigger)
+        this.$watch('activeTab', (tab, oldTab) => {
+            if (tab === 'server' && oldTab !== undefined) {
+                this.fetchServerConfig();
+            }
+        });
+    },
+
+    async fetchServerConfig() {
+        const password = Alpine.store('global').webuiPassword;
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (!response.ok) throw new Error('Failed to fetch config');
+            const data = await response.json();
+            this.serverConfig = data.config || {};
+        } catch (e) {
+            console.error('Failed to fetch server config:', e);
+        }
+    },
+
+
+
+    // Password management
+    passwordDialog: {
+        show: false,
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+    },
+
+    showPasswordDialog() {
+        this.passwordDialog = {
+            show: true,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    hidePasswordDialog() {
+        this.passwordDialog = {
+            show: false,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    async changePassword() {
+        const store = Alpine.store('global');
+        const { oldPassword, newPassword, confirmPassword } = this.passwordDialog;
+
+        if (newPassword !== confirmPassword) {
+            store.showToast(store.t('passwordsNotMatch'), 'error');
+            return;
+        }
+        if (newPassword.length < 6) {
+            store.showToast(store.t('passwordTooShort'), 'error');
+            return;
+        }
+
+        try {
+            const { response } = await window.utils.request('/api/config/password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ oldPassword, newPassword })
+            }, store.webuiPassword);
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || store.t('failedToChangePassword'));
+            }
+
+            // Update stored password
+            store.webuiPassword = newPassword;
+            store.showToast(store.t('passwordChangedSuccess'), 'success');
+            this.hidePasswordDialog();
+        } catch (e) {
+            store.showToast(store.t('failedToChangePassword') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Debug Mode with instant save
+    async toggleDebug(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousValue = this.serverConfig.debug;
+        this.serverConfig.debug = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ debug: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('debugModeToggled', { status }), 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateDebugMode'));
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.debug = previousValue;
+            store.showToast(store.t('failedToUpdateDebugMode') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Token Cache with instant save
+    async toggleTokenCache(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousValue = this.serverConfig.persistTokenCache;
+        this.serverConfig.persistTokenCache = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ persistTokenCache: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('tokenCacheToggled', { status }), 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateTokenCache'));
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.persistTokenCache = previousValue;
+            store.showToast(store.t('failedToUpdateTokenCache') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Generic debounced save method for numeric configs with validation
+    async saveConfigField(fieldName, value, displayName, validator = null) {
+        const store = Alpine.store('global');
+
+        // Validate input if validator provided
+        if (validator) {
+            const validation = window.Validators.validate(value, validator, true);
+            if (!validation.isValid) {
+                // Rollback to previous value
+                this.serverConfig[fieldName] = this.serverConfig[fieldName];
+                return;
+            }
+            value = validation.value;
+        } else {
+            value = parseInt(value);
+        }
+
+        // Clear existing timer for this field
+        if (this.debounceTimers[fieldName]) {
+            clearTimeout(this.debounceTimers[fieldName]);
+        }
+
+        // Optimistic update
+        const previousValue = this.serverConfig[fieldName];
+        this.serverConfig[fieldName] = value;
+
+        // Set new timer
+        this.debounceTimers[fieldName] = setTimeout(async () => {
+            try {
+                const payload = {};
+                payload[fieldName] = value;
+
+                const { response, newPassword } = await window.utils.request('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                }, store.webuiPassword);
+
+                if (newPassword) store.webuiPassword = newPassword;
+
+                const data = await response.json();
+                if (data.status === 'ok') {
+                    store.showToast(store.t('fieldUpdated', { displayName, value }), 'success');
+                    await this.fetchServerConfig(); // Confirm server state
+                } else {
+                    throw new Error(data.error || store.t('failedToUpdateField', { displayName }));
+                }
+            } catch (e) {
+                // Rollback on error
+                this.serverConfig[fieldName] = previousValue;
+                store.showToast(store.t('failedToUpdateField', { displayName }) + ': ' + e.message, 'error');
+            }
+        }, window.AppConstants.INTERVALS.CONFIG_DEBOUNCE);
+    },
+
+    // Individual toggle methods for each Advanced Tuning field with validation
+    toggleMaxRetries(value) {
+        const { MAX_RETRIES_MIN, MAX_RETRIES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxRetries', value, 'Max Retries',
+            (v) => window.Validators.validateRange(v, MAX_RETRIES_MIN, MAX_RETRIES_MAX, 'Max Retries'));
+    },
+
+    toggleRetryBaseMs(value) {
+        const { RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('retryBaseMs', value, 'Retry Base Delay',
+            (v) => window.Validators.validateRange(v, RETRY_BASE_MS_MIN, RETRY_BASE_MS_MAX, 'Retry Base Delay'));
+    },
+
+    toggleRetryMaxMs(value) {
+        const { RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('retryMaxMs', value, 'Retry Max Delay',
+            (v) => window.Validators.validateRange(v, RETRY_MAX_MS_MIN, RETRY_MAX_MS_MAX, 'Retry Max Delay'));
+    },
+
+    toggleDefaultCooldownMs(value) {
+        const { DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('defaultCooldownMs', value, 'Default Cooldown',
+            (v) => window.Validators.validateTimeout(v, DEFAULT_COOLDOWN_MIN, DEFAULT_COOLDOWN_MAX));
+    },
+
+    toggleMaxWaitBeforeErrorMs(value) {
+        const { MAX_WAIT_MIN, MAX_WAIT_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxWaitBeforeErrorMs', value, 'Max Wait Threshold',
+            (v) => window.Validators.validateTimeout(v, MAX_WAIT_MIN, MAX_WAIT_MAX));
+    },
+
+    toggleMaxAccounts(value) {
+        const { MAX_ACCOUNTS_MIN, MAX_ACCOUNTS_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxAccounts', value, 'Max Accounts',
+            (v) => window.Validators.validateRange(v, MAX_ACCOUNTS_MIN, MAX_ACCOUNTS_MAX, 'Max Accounts'));
+    },
+
+    toggleRateLimitDedupWindowMs(value) {
+        const { RATE_LIMIT_DEDUP_MIN, RATE_LIMIT_DEDUP_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('rateLimitDedupWindowMs', value, 'Rate Limit Dedup Window',
+            (v) => window.Validators.validateTimeout(v, RATE_LIMIT_DEDUP_MIN, RATE_LIMIT_DEDUP_MAX));
+    },
+
+    toggleMaxConsecutiveFailures(value) {
+        const { MAX_CONSECUTIVE_FAILURES_MIN, MAX_CONSECUTIVE_FAILURES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxConsecutiveFailures', value, 'Max Consecutive Failures',
+            (v) => window.Validators.validateRange(v, MAX_CONSECUTIVE_FAILURES_MIN, MAX_CONSECUTIVE_FAILURES_MAX, 'Max Consecutive Failures'));
+    },
+
+    toggleExtendedCooldownMs(value) {
+        const { EXTENDED_COOLDOWN_MIN, EXTENDED_COOLDOWN_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('extendedCooldownMs', value, 'Extended Cooldown',
+            (v) => window.Validators.validateTimeout(v, EXTENDED_COOLDOWN_MIN, EXTENDED_COOLDOWN_MAX));
+    },
+
+    toggleMaxCapacityRetries(value) {
+        const { MAX_CAPACITY_RETRIES_MIN, MAX_CAPACITY_RETRIES_MAX } = window.AppConstants.VALIDATION;
+        this.saveConfigField('maxCapacityRetries', value, 'Max Capacity Retries',
+            (v) => window.Validators.validateRange(v, MAX_CAPACITY_RETRIES_MIN, MAX_CAPACITY_RETRIES_MAX, 'Max Capacity Retries'));
+    },
+
+    // Toggle Account Selection Strategy
+    async toggleStrategy(strategy) {
+        const store = Alpine.store('global');
+        const validStrategies = ['sticky', 'round-robin', 'hybrid'];
+
+        if (!validStrategies.includes(strategy)) {
+            store.showToast(store.t('invalidStrategy'), 'error');
+            return;
+        }
+
+        // Optimistic update
+        const previousValue = this.serverConfig.accountSelection?.strategy || 'hybrid';
+        if (!this.serverConfig.accountSelection) {
+            this.serverConfig.accountSelection = {};
+        }
+        this.serverConfig.accountSelection.strategy = strategy;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ accountSelection: { strategy } })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const strategyLabel = this.getStrategyLabel(strategy);
+                store.showToast(store.t('strategyUpdated', { strategy: strategyLabel }), 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || store.t('failedToUpdateStrategy'));
+            }
+        } catch (e) {
+            // Rollback on error
+            if (!this.serverConfig.accountSelection) {
+                this.serverConfig.accountSelection = {};
+            }
+            this.serverConfig.accountSelection.strategy = previousValue;
+            store.showToast(store.t('failedToUpdateStrategy') + ': ' + e.message, 'error');
+        }
+    },
+
+    // Get display label for a strategy
+    getStrategyLabel(strategy) {
+        const store = Alpine.store('global');
+        const labels = {
+            'sticky': store.t('strategyStickyLabel'),
+            'round-robin': store.t('strategyRoundRobinLabel'),
+            'hybrid': store.t('strategyHybridLabel')
+        };
+        return labels[strategy] || strategy;
+    },
+
+    // Get description for current strategy
+    currentStrategyDescription() {
+        const store = Alpine.store('global');
+        const strategy = this.serverConfig.accountSelection?.strategy || 'hybrid';
+        const descriptions = {
+            'sticky': store.t('strategyStickyDesc'),
+            'round-robin': store.t('strategyRoundRobinDesc'),
+            'hybrid': store.t('strategyHybridDesc')
+        };
+        return descriptions[strategy] || '';
+    }
+});

package/public/js/config/constants.js

@@ -0,0 +1,102 @@
+/**
+ * Application Constants
+ * Centralized configuration values and magic numbers
+ */
+window.AppConstants = window.AppConstants || {};
+
+/**
+ * Time intervals (in milliseconds)
+ */
+window.AppConstants.INTERVALS = {
+    // Dashboard refresh interval (5 minutes)
+    DASHBOARD_REFRESH: 300000,
+
+    // OAuth message handler timeout (5 minutes)
+    OAUTH_MESSAGE_TIMEOUT: 300000,
+
+    // Server config debounce delay
+    CONFIG_DEBOUNCE: 500,
+
+    // General short delay (for UI transitions)
+    SHORT_DELAY: 2000
+};
+
+/**
+ * Data limits and quotas
+ */
+window.AppConstants.LIMITS = {
+    // Default log limit
+    DEFAULT_LOG_LIMIT: 2000,
+
+    // Minimum quota value
+    MIN_QUOTA: 100,
+
+    // Percentage base (for calculations)
+    PERCENTAGE_BASE: 100
+};
+
+/**
+ * Validation ranges
+ */
+window.AppConstants.VALIDATION = {
+    // Port range
+    PORT_MIN: 1,
+    PORT_MAX: 65535,
+
+    // Timeout range (0 - 5 minutes)
+    TIMEOUT_MIN: 0,
+    TIMEOUT_MAX: 300000,
+
+    // Log limit range
+    LOG_LIMIT_MIN: 100,
+    LOG_LIMIT_MAX: 10000,
+
+    // Retry configuration ranges
+    MAX_RETRIES_MIN: 0,
+    MAX_RETRIES_MAX: 20,
+
+    RETRY_BASE_MS_MIN: 100,
+    RETRY_BASE_MS_MAX: 10000,
+
+    RETRY_MAX_MS_MIN: 1000,
+    RETRY_MAX_MS_MAX: 60000,
+
+    // Cooldown range (0 - 10 minutes)
+    DEFAULT_COOLDOWN_MIN: 0,
+    DEFAULT_COOLDOWN_MAX: 600000,
+
+    // Max wait threshold (1 - 30 minutes)
+    MAX_WAIT_MIN: 60000,
+    MAX_WAIT_MAX: 1800000,
+
+    // Max accounts range (1 - 100)
+    MAX_ACCOUNTS_MIN: 1,
+    MAX_ACCOUNTS_MAX: 100,
+
+    // Rate limit dedup window (1 - 30 seconds)
+    RATE_LIMIT_DEDUP_MIN: 1000,
+    RATE_LIMIT_DEDUP_MAX: 30000,
+
+    // Consecutive failures (1 - 10)
+    MAX_CONSECUTIVE_FAILURES_MIN: 1,
+    MAX_CONSECUTIVE_FAILURES_MAX: 10,
+
+    // Extended cooldown (10 seconds - 5 minutes)
+    EXTENDED_COOLDOWN_MIN: 10000,
+    EXTENDED_COOLDOWN_MAX: 300000,
+
+    // Capacity retries (1 - 10)
+    MAX_CAPACITY_RETRIES_MIN: 1,
+    MAX_CAPACITY_RETRIES_MAX: 10
+};
+
+/**
+ * UI Constants
+ */
+window.AppConstants.UI = {
+    // Toast auto-dismiss duration
+    TOAST_DURATION: 3000,
+
+    // Loading spinner delay
+    LOADING_DELAY: 200
+};