@pikoloo/codex-proxy 1.0.6 → 1.1.0

package/public/js/app.js

@@ -1,5 +1,5 @@
 document.addEventListener('alpine:init', () => {
-    const validTabs = ['dashboard', 'accounts', 'logs', 'settings'];
+    const validTabs = ['dashboard', 'metrics', 'accounts', 'logs', 'settings'];
     const initialTab = () => {
         const params = new URLSearchParams(window.location.search);
         const requested = params.get('tab') || window.location.hash.replace(/^#/, '');
@@ -7,10 +7,9 @@ document.addEventListener('alpine:init', () => {
     };
 
     Alpine.data('app', () => ({
-        version: '1.0.5',
+        version: '1.0.7',
         connectionStatus: 'connecting',
         activeTab: initialTab(),
-        sidebarOpen: window.innerWidth >= 1024,
         loading: false,
         toast: null,
         currentTime: '',
@@ -18,12 +17,41 @@ document.addEventListener('alpine:init', () => {
         accounts: [],
         searchQuery: '',
         stats: { total: 0, active: 0, expired: 0, planType: '-' },
+        metricsRange: '24h',
+        metricsStatusFilter: '',
+        metricsLoading: false,
+        metricsError: '',
+        metricsSummary: {
+            totals: {
+                requestCount: 0,
+                successCount: 0,
+                errorCount: 0,
+                inputTokens: 0,
+                outputTokens: 0,
+                cacheReadInputTokens: 0,
+                totalTokens: 0,
+                averageDurationMs: 0
+            },
+            byModel: [],
+            byAccount: [],
+            timeline: []
+        },
+        metricsRecent: [],
+        metricsStorage: null,
 
         haikuKiloModel: 'minimax/minimax-m2.5:free',
-        accountStrategy: 'sticky',
-        multiAccountRotationEnabled: false,
+        modelMappings: { opus: 'gpt-5.5', sonnet: 'gpt-5.5', haiku: 'gpt-5.4-mini' },
+        modelMappingDefaults: { opus: 'gpt-5.5', sonnet: 'gpt-5.5', haiku: 'gpt-5.4-mini' },
+        reasoningMappings: { opus: 'high', sonnet: 'medium', haiku: 'low' },
+        reasoningMappingDefaults: { opus: 'high', sonnet: 'medium', haiku: 'low' },
+        openAiModelOptions: [],
+        reasoningLevelOptions: [],
+        modelMappingSaving: null,
+        reasoningMappingSaving: null,
         haikuModelSaving: false,
-        strategySaving: false,
+        configureClaudeOnStartup: false,
+        claudeProxyConfiguring: false,
+        claudeProxyStartupSaving: false,
         kiloEnabled: false,
         kiloModels: [],
         kiloModelsLoading: false,
@@ -41,43 +69,83 @@ document.addEventListener('alpine:init', () => {
         
         testPrompt: 'Say hello',
         testResponse: '',
+        testStatus: 'idle',
+        testError: '',
+        testMeta: null,
         testing: false,
 
         haikuTestPrompt: 'Say hello',
         haikuTestResponse: '',
+        haikuTestStatus: 'idle',
+        haikuTestError: '',
+        haikuTestMeta: null,
         haikuTesting: false,
 
         haikuModelLabel() {
-            if (!this.kiloEnabled) return 'gpt-5.4-mini';
-            const model = this.kiloModels.find(m => m.id === this.haikuKiloModel);
-            return model ? model.name : this.haikuKiloModel;
+            return this.modelOptionName(this.modelMappings?.haiku || 'gpt-5.4-mini');
+        },
+
+        get testStatusText() {
+            const labels = {
+                idle: 'Ready',
+                running: 'Sending request',
+                success: 'Response received',
+                error: 'Request failed'
+            };
+            return labels[this.testStatus] || 'Ready';
+        },
+
+        get haikuTestStatusText() {
+            const labels = {
+                idle: 'Ready',
+                running: 'Sending Haiku request',
+                success: 'Response received',
+                error: 'Request failed'
+            };
+            return labels[this.haikuTestStatus] || 'Ready';
         },
 
         async testHaikuChat() {
             if (!this.haikuTestPrompt.trim()) return;
+            const startedAt = Date.now();
             this.haikuTesting = true;
             this.haikuTestResponse = '';
-            const { ok, data } = await this.api('/v1/chat/completions', {
-                method: 'POST',
-                body: JSON.stringify({
-                    model: 'claude-haiku-4',
-                    messages: [{ role: 'user', content: this.haikuTestPrompt }]
-                })
-            });
-            this.haikuTesting = false;
-            if (ok && data.choices) {
-                this.haikuTestResponse = data.choices[0].message.content;
-            } else {
-                this.haikuTestResponse = data?.error?.message || 'Request failed';
+            this.haikuTestStatus = 'running';
+            this.haikuTestError = '';
+            this.haikuTestMeta = null;
+
+            try {
+                const { ok, data, error } = await this.api('/v1/chat/completions', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        model: 'claude-haiku-4',
+                        messages: [{ role: 'user', content: this.haikuTestPrompt }]
+                    })
+                });
+                const durationMs = Date.now() - startedAt;
+                this.haikuTestMeta = { durationMs, usage: data?.usage || null };
+
+                if (ok && data.choices) {
+                    this.haikuTestResponse = data.choices[0].message.content;
+                    this.haikuTestStatus = 'success';
+                } else {
+                    this.haikuTestError = data?.error?.message || error || 'Request failed';
+                    this.haikuTestResponse = this.haikuTestError;
+                    this.haikuTestStatus = 'error';
+                }
+            } finally {
+                this.haikuTesting = false;
             }
         },
         
         configPath: '~/.codex-claude-proxy/accounts.json',
+        serverUrl: window.location.origin,
         
         logs: [],
         logSearchQuery: '',
         logFilters: { INFO: true, SUCCESS: true, WARN: true, ERROR: true, DEBUG: false },
         logEventSource: null,
+        logStreamStatus: 'connecting',
 
         get filteredLogs() {
             const query = this.logSearchQuery.trim().toLowerCase();
@@ -88,12 +156,44 @@ document.addEventListener('alpine:init', () => {
             });
         },
 
+        get logLevelCounts() {
+            return this.logs.reduce((counts, log) => {
+                counts[log.level] = (counts[log.level] || 0) + 1;
+                return counts;
+            }, { INFO: 0, SUCCESS: 0, WARN: 0, ERROR: 0, DEBUG: 0 });
+        },
+
         get filteredAccounts() {
             if (!this.searchQuery) return this.accounts;
             const q = this.searchQuery.toLowerCase();
             return this.accounts.filter(a => a.email.toLowerCase().includes(q));
         },
 
+        get metricsTotals() {
+            return this.metricsSummary?.totals || {
+                requestCount: 0,
+                successCount: 0,
+                errorCount: 0,
+                inputTokens: 0,
+                outputTokens: 0,
+                cacheReadInputTokens: 0,
+                totalTokens: 0,
+                averageDurationMs: 0
+            };
+        },
+
+        get metricsTimelineMax() {
+            return Math.max(1, ...this.metricsSummary.timeline.map((entry) => Number(entry.totalTokens) || 0));
+        },
+
+        get metricsModelMax() {
+            return Math.max(1, ...this.metricsSummary.byModel.map((entry) => Number(entry.totalTokens) || 0));
+        },
+
+        get metricsAccountMax() {
+            return Math.max(1, ...this.metricsSummary.byAccount.map((entry) => Number(entry.totalTokens) || 0));
+        },
+
         init() {
             this.updateTime();
             setInterval(() => this.updateTime(), 1000);
@@ -101,12 +201,10 @@ document.addEventListener('alpine:init', () => {
             this.checkHealth();
             setInterval(() => this.checkHealth(), 30000);
             this.startLogStream();
+            this.loadModelMappingsSetting();
             this.loadHaikuModelSetting();
-            this.loadAccountStrategySetting();
-
-            window.addEventListener('resize', () => {
-                this.sidebarOpen = window.innerWidth >= 1024;
-            });
+            this.loadClaudeProxySetting();
+            this.loadMetrics();
 
             window.addEventListener('message', (event) => {
                 if (event.data && event.data.type === 'oauth-success') {
@@ -124,6 +222,9 @@ document.addEventListener('alpine:init', () => {
         setActiveTab(tab) {
             if (!validTabs.includes(tab)) return;
             this.activeTab = tab;
+            if (tab === 'metrics') {
+                this.loadMetrics();
+            }
             const nextUrl = new URL(window.location.href);
             if (tab === 'dashboard') {
                 nextUrl.searchParams.delete('tab');
@@ -133,9 +234,6 @@ document.addEventListener('alpine:init', () => {
                 nextUrl.hash = '';
             }
             window.history.replaceState({}, '', nextUrl);
-            if (window.innerWidth < 1024) {
-                this.sidebarOpen = false;
-            }
         },
 
         async api(endpoint, options = {}) {
@@ -174,6 +272,105 @@ document.addEventListener('alpine:init', () => {
             this.loading = false;
         },
 
+        refreshCurrentView() {
+            if (this.activeTab === 'metrics') {
+                return this.loadMetrics();
+            }
+            return this.refreshAccounts();
+        },
+
+        async loadMetrics() {
+            this.metricsLoading = true;
+            this.metricsError = '';
+            const params = new URLSearchParams({ range: this.metricsRange });
+            if (this.metricsStatusFilter) {
+                params.set('status', this.metricsStatusFilter);
+            }
+
+            const [summary, recent, storage] = await Promise.all([
+                this.api(`/api/metrics/summary?${params.toString()}`),
+                this.api(`/api/metrics/recent?${params.toString()}&limit=50`),
+                this.api('/api/metrics/storage')
+            ]);
+
+            if (summary.ok && summary.data?.summary) {
+                this.metricsSummary = summary.data.summary;
+            } else {
+                this.metricsError = summary.data?.error || summary.error || 'Failed to load metrics';
+            }
+
+            if (recent.ok && Array.isArray(recent.data?.events)) {
+                this.metricsRecent = recent.data.events;
+            }
+
+            if (storage.ok && storage.data?.storage) {
+                this.metricsStorage = storage.data.storage;
+            }
+
+            this.metricsLoading = false;
+        },
+
+        setMetricsRange(range) {
+            if (this.metricsRange === range) return;
+            this.metricsRange = range;
+            this.loadMetrics();
+        },
+
+        setMetricsStatusFilter(status) {
+            if (this.metricsStatusFilter === status) return;
+            this.metricsStatusFilter = status;
+            this.loadMetrics();
+        },
+
+        metricBarWidth(value, maxValue) {
+            const valueNumber = Number(value) || 0;
+            const maxNumber = Number(maxValue) || 1;
+            return Math.max(2, Math.min(100, Math.round((valueNumber / maxNumber) * 100)));
+        },
+
+        formatTokenCount(value) {
+            const number = Number(value) || 0;
+            if (number >= 1000000) return `${(number / 1000000).toFixed(1)}M`;
+            if (number >= 1000) return `${(number / 1000).toFixed(1)}K`;
+            return String(number);
+        },
+
+        formatDuration(value) {
+            const number = Number(value) || 0;
+            if (number >= 1000) return `${(number / 1000).toFixed(1)}s`;
+            return `${number}ms`;
+        },
+
+        formatUsageSummary(usage) {
+            if (!usage) return '';
+            const input = Number(usage.prompt_tokens ?? usage.input_tokens) || 0;
+            const output = Number(usage.completion_tokens ?? usage.output_tokens) || 0;
+            const total = Number(usage.total_tokens ?? (input + output)) || 0;
+            if (total <= 0) return '';
+            return `${this.formatTokenCount(total)} tokens (${this.formatTokenCount(input)} in, ${this.formatTokenCount(output)} out)`;
+        },
+
+        formatBytes(value) {
+            const number = Number(value) || 0;
+            if (number >= 1024 * 1024) return `${(number / (1024 * 1024)).toFixed(1)} MB`;
+            if (number >= 1024) return `${(number / 1024).toFixed(1)} KB`;
+            return `${number} B`;
+        },
+
+        formatMetricTime(value) {
+            if (!value) return '-';
+            const date = new Date(value);
+            if (Number.isNaN(date.getTime())) return '-';
+            return date.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+        },
+
+        metricsStatusClass(status) {
+            const code = Number(status) || 0;
+            if (code >= 200 && code < 400) return 'metrics-status-success';
+            if (code >= 400) return 'metrics-status-error';
+            return 'metrics-status-muted';
+        },
+
         async refreshAllQuotaData() {
             if (!this.accounts.length) return;
             const { ok, data } = await this.api('/accounts/quota/all');
@@ -430,20 +627,34 @@ document.addEventListener('alpine:init', () => {
 
         async testChat() {
             if (!this.testPrompt.trim()) return;
+            const startedAt = Date.now();
             this.testing = true;
             this.testResponse = '';
-            const { ok, data } = await this.api('/v1/chat/completions', {
-                method: 'POST',
-                body: JSON.stringify({
-                    model: 'gpt-5.5',
-                    messages: [{ role: 'user', content: this.testPrompt }]
-                })
-            });
-            this.testing = false;
-            if (ok && data.choices) {
-                this.testResponse = data.choices[0].message.content;
-            } else {
-                this.testResponse = data?.error?.message || 'Request failed';
+            this.testStatus = 'running';
+            this.testError = '';
+            this.testMeta = null;
+
+            try {
+                const { ok, data, error } = await this.api('/v1/chat/completions', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        model: 'gpt-5.5',
+                        messages: [{ role: 'user', content: this.testPrompt }]
+                    })
+                });
+                const durationMs = Date.now() - startedAt;
+                this.testMeta = { durationMs, usage: data?.usage || null };
+
+                if (ok && data.choices) {
+                    this.testResponse = data.choices[0].message.content;
+                    this.testStatus = 'success';
+                } else {
+                    this.testError = data?.error?.message || error || 'Request failed';
+                    this.testResponse = this.testError;
+                    this.testStatus = 'error';
+                }
+            } finally {
+                this.testing = false;
             }
         },
 
@@ -493,47 +704,131 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
-        async loadAccountStrategySetting() {
-            const { ok, data } = await this.api('/settings/account-strategy');
-            if (ok && data?.accountStrategy) {
-                this.accountStrategy = data.accountStrategy;
-                this.multiAccountRotationEnabled = data.rotationEnabled === true;
-            }
+        modelOptionName(modelId) {
+            const option = this.openAiModelOptions.find((model) => model.id === modelId);
+            return option ? option.name : modelId;
+        },
+
+        modelMappingLabel(alias) {
+            const labels = { opus: 'Opus', sonnet: 'Sonnet', haiku: 'Haiku' };
+            return labels[alias] || alias;
         },
 
-        async setAccountStrategy(strategy) {
-            if (!this.multiAccountRotationEnabled || this.strategySaving || this.accountStrategy === strategy) return;
-            this.strategySaving = true;
-            const { ok, data } = await this.api('/settings/account-strategy', {
+        async loadModelMappingsSetting() {
+            const { ok, data } = await this.api('/settings/model-mappings');
+            if (!ok || !data?.modelMappings) return;
+
+            this.modelMappings = data.modelMappings;
+            this.modelMappingDefaults = data.defaults || this.modelMappingDefaults;
+            this.reasoningMappings = data.reasoningMappings || this.reasoningMappings;
+            this.reasoningMappingDefaults = data.reasoningDefaults || this.reasoningMappingDefaults;
+            this.openAiModelOptions = Array.isArray(data.models) ? data.models : [];
+            this.reasoningLevelOptions = Array.isArray(data.reasoningLevels) ? data.reasoningLevels : [];
+        },
+
+        async setModelMapping(alias, model) {
+            if (this.modelMappingSaving || !alias || !model) return;
+
+            const previous = this.modelMappings[alias];
+            if (previous === model) return;
+
+            this.modelMappings = { ...this.modelMappings, [alias]: model };
+            this.modelMappingSaving = alias;
+            const { ok, data } = await this.api('/settings/model-mappings', {
                 method: 'POST',
-                body: JSON.stringify({ accountStrategy: strategy })
+                body: JSON.stringify({ modelMappings: { [alias]: model } })
             });
-            this.strategySaving = false;
-            if (ok && data?.accountStrategy) {
-                this.accountStrategy = data.accountStrategy;
-                this.multiAccountRotationEnabled = data.rotationEnabled === true;
-                this.showToast(`Account strategy set to ${data.accountStrategy === 'sticky' ? 'Sticky' : 'Round-Robin'}`, 'success');
+            this.modelMappingSaving = null;
+
+            if (ok && data?.modelMappings) {
+                this.modelMappings = data.modelMappings;
+                this.modelMappingDefaults = data.defaults || this.modelMappingDefaults;
+                this.reasoningMappings = data.reasoningMappings || this.reasoningMappings;
+                this.reasoningMappingDefaults = data.reasoningDefaults || this.reasoningMappingDefaults;
+                this.openAiModelOptions = Array.isArray(data.models) ? data.models : this.openAiModelOptions;
+                this.reasoningLevelOptions = Array.isArray(data.reasoningLevels) ? data.reasoningLevels : this.reasoningLevelOptions;
+                this.showToast(`${this.modelMappingLabel(alias)} now maps to ${this.modelOptionName(data.modelMappings[alias])}`, 'success');
             } else {
-                this.showToast(data?.error || 'Failed to update strategy', 'error');
+                this.modelMappings = { ...this.modelMappings, [alias]: previous };
+                this.showToast(data?.error || 'Failed to update model mapping', 'error');
             }
         },
 
-        async setClaudeCodeProxyTestConfig() {
-            const { ok, data, error } = await this.api('/claude/config/set', {
+        reasoningOptionName(reasoningId) {
+            const option = this.reasoningLevelOptions.find((level) => level.id === reasoningId);
+            return option ? option.name : reasoningId;
+        },
+
+        async setReasoningMapping(alias, reasoning) {
+            if (this.reasoningMappingSaving || !alias || !reasoning) return;
+
+            const previous = this.reasoningMappings[alias];
+            if (previous === reasoning) return;
+
+            this.reasoningMappings = { ...this.reasoningMappings, [alias]: reasoning };
+            this.reasoningMappingSaving = alias;
+            const { ok, data } = await this.api('/settings/model-mappings', {
                 method: 'POST',
-                body: JSON.stringify({
-                    apiUrl: 'http://localhost:8081',
-                    apiKey: 'test'
-                })
+                body: JSON.stringify({ reasoningMappings: { [alias]: reasoning } })
             });
+            this.reasoningMappingSaving = null;
+
+            if (ok && data?.reasoningMappings) {
+                this.reasoningMappings = data.reasoningMappings;
+                this.reasoningMappingDefaults = data.reasoningDefaults || this.reasoningMappingDefaults;
+                this.reasoningLevelOptions = Array.isArray(data.reasoningLevels) ? data.reasoningLevels : this.reasoningLevelOptions;
+                this.showToast(`${this.modelMappingLabel(alias)} reasoning set to ${this.reasoningOptionName(data.reasoningMappings[alias])}`, 'success');
+            } else {
+                this.reasoningMappings = { ...this.reasoningMappings, [alias]: previous };
+                this.showToast(data?.error || 'Failed to update reasoning level', 'error');
+            }
+        },
+
+        async loadClaudeProxySetting() {
+            const { ok, data } = await this.api('/settings/claude-proxy');
+            if (ok && typeof data?.configureClaudeOnStartup === 'boolean') {
+                this.configureClaudeOnStartup = data.configureClaudeOnStartup;
+            }
+        },
+
+        async configureClaudeProxy() {
+            if (this.claudeProxyConfiguring) return;
+            this.claudeProxyConfiguring = true;
+            const { ok, data, error } = await this.api('/claude/config/proxy', { method: 'POST' });
+            this.claudeProxyConfiguring = false;
 
             if (ok && data?.success) {
-                this.showToast('Updated Claude Code settings.json (API URL + API key).', 'success');
+                this.showToast(data.message || 'Claude Code configured to use this proxy.', 'success');
             } else {
                 this.showToast(data?.error || error || 'Failed to update Claude Code settings.json', 'error');
             }
         },
 
+        async setConfigureClaudeOnStartup(enabled) {
+            if (this.claudeProxyStartupSaving) return;
+            const previous = this.configureClaudeOnStartup;
+            this.configureClaudeOnStartup = enabled;
+            this.claudeProxyStartupSaving = true;
+            const { ok, data, error } = await this.api('/settings/claude-proxy', {
+                method: 'POST',
+                body: JSON.stringify({ configureClaudeOnStartup: enabled })
+            });
+            this.claudeProxyStartupSaving = false;
+
+            if (ok && typeof data?.configureClaudeOnStartup === 'boolean') {
+                this.configureClaudeOnStartup = data.configureClaudeOnStartup;
+                this.showToast(
+                    data.configureClaudeOnStartup
+                        ? 'Claude Code will be configured on proxy startup.'
+                        : 'Startup Claude Code configuration disabled.',
+                    'success'
+                );
+            } else {
+                this.configureClaudeOnStartup = previous;
+                this.showToast(data?.error || error || 'Failed to update startup setting', 'error');
+            }
+        },
+
         showToast(message, type = 'success') {
             this.toast = { message, type };
             setTimeout(() => { this.toast = null; }, 3000);
@@ -541,11 +836,16 @@ document.addEventListener('alpine:init', () => {
 
         startLogStream() {
             if (this.logEventSource) this.logEventSource.close();
-            
+
+            this.logStreamStatus = 'connecting';
             this.logEventSource = new EventSource('/api/logs/stream?history=true');
+            this.logEventSource.onopen = () => {
+                this.logStreamStatus = 'connected';
+            };
             this.logEventSource.onmessage = (event) => {
                 try {
                     const log = JSON.parse(event.data);
+                    this.logStreamStatus = 'connected';
                     this.logs.unshift(log);
                     
                     if (this.logs.length > 500) {
@@ -555,6 +855,8 @@ document.addEventListener('alpine:init', () => {
             };
             
             this.logEventSource.onerror = () => {
+                this.logStreamStatus = 'disconnected';
+                if (this.logEventSource) this.logEventSource.close();
                 setTimeout(() => this.startLogStream(), 3000);
             };
         },
@@ -572,6 +874,22 @@ document.addEventListener('alpine:init', () => {
             return message;
         },
 
+        formatLogTime(timestamp) {
+            if (!timestamp) return '--:--:--';
+            const date = new Date(timestamp);
+            if (Number.isNaN(date.getTime())) return '--:--:--';
+            return date.toLocaleTimeString([], { hour12: false });
+        },
+
+        logStreamStatusText() {
+            const labels = {
+                connecting: 'Connecting',
+                connected: 'Live',
+                disconnected: 'Reconnecting'
+            };
+            return labels[this.logStreamStatus] || 'Unknown';
+        },
+
         getLogDetails(message) {
             if (!message) return null;
             const details = {};