@pikoloo/codex-proxy 1.0.7 → 1.2.2

package/public/js/app.js

@@ -1,5 +1,5 @@
 document.addEventListener('alpine:init', () => {
-    const validTabs = ['dashboard', 'metrics', 'accounts', 'logs', 'settings'];
+    const validTabs = ['dashboard', 'metrics', 'account', 'logs', 'settings'];
     const initialTab = () => {
         const params = new URLSearchParams(window.location.search);
         const requested = params.get('tab') || window.location.hash.replace(/^#/, '');
@@ -7,16 +7,14 @@ document.addEventListener('alpine:init', () => {
     };
 
     Alpine.data('app', () => ({
-        version: '1.0.7',
+        version: '1.2.2',
         connectionStatus: 'connecting',
         activeTab: initialTab(),
-        sidebarOpen: window.innerWidth >= 1024,
         loading: false,
         toast: null,
         currentTime: '',
         
         accounts: [],
-        searchQuery: '',
         stats: { total: 0, active: 0, expired: 0, planType: '-' },
         metricsRange: '24h',
         metricsStatusFilter: '',
@@ -49,10 +47,7 @@ document.addEventListener('alpine:init', () => {
         reasoningLevelOptions: [],
         modelMappingSaving: null,
         reasoningMappingSaving: null,
-        accountStrategy: 'sticky',
-        multiAccountRotationEnabled: false,
         haikuModelSaving: false,
-        strategySaving: false,
         configureClaudeOnStartup: false,
         claudeProxyConfiguring: false,
         claudeProxyStartupSaving: false,
@@ -73,42 +68,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() {
             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',
+        configPath: '~/.codex-claude-proxy/account.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();
@@ -119,10 +155,11 @@ document.addEventListener('alpine:init', () => {
             });
         },
 
-        get filteredAccounts() {
-            if (!this.searchQuery) return this.accounts;
-            const q = this.searchQuery.toLowerCase();
-            return this.accounts.filter(a => a.email.toLowerCase().includes(q));
+        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 metricsTotals() {
@@ -159,14 +196,9 @@ document.addEventListener('alpine:init', () => {
             this.startLogStream();
             this.loadModelMappingsSetting();
             this.loadHaikuModelSetting();
-            this.loadAccountStrategySetting();
             this.loadClaudeProxySetting();
             this.loadMetrics();
 
-            window.addEventListener('resize', () => {
-                this.sidebarOpen = window.innerWidth >= 1024;
-            });
-
             window.addEventListener('message', (event) => {
                 if (event.data && event.data.type === 'oauth-success') {
                     this.showToast(`Account ${event.data.email} added!`, 'success');
@@ -195,9 +227,6 @@ document.addEventListener('alpine:init', () => {
                 nextUrl.hash = '';
             }
             window.history.replaceState({}, '', nextUrl);
-            if (window.innerWidth < 1024) {
-                this.sidebarOpen = false;
-            }
         },
 
         async api(endpoint, options = {}) {
@@ -220,15 +249,15 @@ document.addEventListener('alpine:init', () => {
 
         async refreshAccounts() {
             this.loading = true;
-            const { ok, data } = await this.api('/accounts');
+            const { ok, data } = await this.api('/account');
             
-            if (ok && data.accounts) {
-                this.accounts = data.accounts;
+            if (ok) {
+                this.accounts = data.account ? [data.account] : [];
                 this.stats = {
-                    total: data.total || data.accounts.length,
-                    active: data.accounts.filter(a => a.isActive).length,
-                    expired: data.accounts.filter(a => a.tokenExpired).length,
-                    planType: data.accounts.find(a => a.isActive)?.planType || '-'
+                    total: data.total || this.accounts.length,
+                    active: this.accounts.filter(a => a.isActive).length,
+                    expired: this.accounts.filter(a => a.tokenExpired).length,
+                    planType: this.accounts.find(a => a.isActive)?.planType || '-'
                 };
 
                 await this.refreshAllQuotaData();
@@ -305,6 +334,15 @@ document.addEventListener('alpine:init', () => {
             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`;
@@ -328,16 +366,12 @@ document.addEventListener('alpine:init', () => {
 
         async refreshAllQuotaData() {
             if (!this.accounts.length) return;
-            const { ok, data } = await this.api('/accounts/quota/all');
-            if (!ok || !data?.accounts) return;
-
-            const quotaMap = new Map(
-                data.accounts.map((entry) => [entry.email, entry.quota || null])
-            );
+            const { ok, data } = await this.api('/account/quota');
+            if (!ok || !data?.email) return;
 
             this.accounts = this.accounts.map((account) => ({
                 ...account,
-                quota: quotaMap.has(account.email) ? quotaMap.get(account.email) : account.quota
+                quota: account.email === data.email ? data.quota || null : account.quota
             }));
 
             if (this.selectedAccount?.email) {
@@ -446,8 +480,8 @@ document.addEventListener('alpine:init', () => {
         },
 
         async startOAuth() {
-            await this.api('/accounts/oauth/cleanup', { method: 'POST' });
-            const { ok, data } = await this.api('/accounts/add', { method: 'POST' });
+            await this.api('/account/oauth/cleanup', { method: 'POST' });
+            const { ok, data } = await this.api('/account/add', { method: 'POST' });
             
             if (ok && data.oauth_url) {
                 const width = 500, height = 700;
@@ -456,8 +490,8 @@ document.addEventListener('alpine:init', () => {
                 window.open(data.oauth_url, 'ChatGPT Login', `width=${width},height=${height},left=${left},top=${top}`);
                 
                 const checkAdded = setInterval(async () => {
-                    const { ok, data } = await this.api('/accounts');
-                    if (ok && data.accounts?.length > this.accounts.length) {
+                    const { ok, data } = await this.api('/account');
+                    if (ok && data.account) {
                         clearInterval(checkAdded);
                         this.showAddModal = false;
                         this.refreshAccounts();
@@ -471,8 +505,8 @@ document.addEventListener('alpine:init', () => {
         },
 
         async startManualOAuth() {
-            await this.api('/accounts/oauth/cleanup', { method: 'POST' });
-            const { ok, data } = await this.api('/accounts/add', { method: 'POST' });
+            await this.api('/account/oauth/cleanup', { method: 'POST' });
+            const { ok, data } = await this.api('/account/add', { method: 'POST' });
             
             if (ok && data.oauth_url) {
                 this.oauthManualUrl = data.oauth_url;
@@ -487,7 +521,7 @@ document.addEventListener('alpine:init', () => {
         async submitManualOAuth() {
             if (!this.oauthManualCode) return;
             
-            const { ok, data } = await this.api('/accounts/add/manual', {
+            const { ok, data } = await this.api('/account/add/manual', {
                 method: 'POST',
                 body: JSON.stringify({
                     code: this.oauthManualCode,
@@ -515,7 +549,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         async importFromCodex() {
-            const { ok, data } = await this.api('/accounts/import', { method: 'POST' });
+            const { ok, data } = await this.api('/account/import', { method: 'POST' });
             if (ok && data.success) {
                 this.showToast(data.message, 'success');
                 this.showAddModal = false;
@@ -525,21 +559,8 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
-        async switchAccount(email) {
-            const { ok, data } = await this.api('/accounts/switch', {
-                method: 'POST',
-                body: JSON.stringify({ email })
-            });
-            if (ok && data.success) {
-                this.showToast(data.message, 'success');
-                this.refreshAccounts();
-            } else {
-                this.showToast(data?.message || 'Failed to switch', 'error');
-            }
-        },
-
         async refreshToken(email) {
-            const { ok, data } = await this.api(`/accounts/${encodeURIComponent(email)}/refresh`, { method: 'POST' });
+            const { ok, data } = await this.api('/account/refresh', { method: 'POST' });
             if (ok && data.success) {
                 this.showToast(data.message, 'success');
                 this.refreshAccounts();
@@ -548,24 +569,13 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
-        async refreshAllTokens() {
-            this.showToast('Refreshing all tokens...', 'info');
-            const { ok, data } = await this.api('/accounts/refresh/all', { method: 'POST' });
-            if (ok) {
-                this.showToast(data.message, 'success');
-                this.refreshAccounts();
-            } else {
-                this.showToast(data?.message || 'Failed', 'error');
-            }
-        },
-
         confirmDelete(email) {
             this.deleteTarget = email;
             this.showDeleteModal = true;
         },
 
         async executeDelete() {
-            const { ok, data } = await this.api(`/accounts/${encodeURIComponent(this.deleteTarget)}`, { method: 'DELETE' });
+            const { ok, data } = await this.api('/account', { method: 'DELETE' });
             this.showDeleteModal = false;
             if (ok && data.success) {
                 this.showToast(data.message, 'success');
@@ -582,20 +592,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;
             }
         },
 
@@ -725,31 +749,6 @@ 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;
-            }
-        },
-
-        async setAccountStrategy(strategy) {
-            if (!this.multiAccountRotationEnabled || this.strategySaving || this.accountStrategy === strategy) return;
-            this.strategySaving = true;
-            const { ok, data } = await this.api('/settings/account-strategy', {
-                method: 'POST',
-                body: JSON.stringify({ accountStrategy: strategy })
-            });
-            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');
-            } else {
-                this.showToast(data?.error || 'Failed to update strategy', 'error');
-            }
-        },
-
         async loadClaudeProxySetting() {
             const { ok, data } = await this.api('/settings/claude-proxy');
             if (ok && typeof data?.configureClaudeOnStartup === 'boolean') {
@@ -802,11 +801,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) {
@@ -816,6 +820,8 @@ document.addEventListener('alpine:init', () => {
             };
             
             this.logEventSource.onerror = () => {
+                this.logStreamStatus = 'disconnected';
+                if (this.logEventSource) this.logEventSource.close();
                 setTimeout(() => this.startLogStream(), 3000);
             };
         },
@@ -833,6 +839,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 = {};