feat(webui): Enhance dashboard, global styles, and settings module
## Dashboard Enhancements
- Add Request Volume trend chart with Chart.js line graph
- Support Family/Model display modes for aggregation levels
- Show Total/Today/1H usage statistics
- Hierarchical filter dropdown with Smart select (Top 5 by 24h usage)
- Persist chart preferences to localStorage
- Improve account health detection logic
- Core models (sonnet/opus/pro/flash) require >5% quota to be healthy
- Dynamic quota ring chart supporting any model family
- Unify table styles with standard-table class
## Global Style Refactoring
- Add CSS variable system for theming
- Space color scale (950/900/850/800/border)
- Neon accent colors (purple/green/cyan/yellow/red)
- Text hierarchy (main/dim/muted/bright)
- Chart palette (16 colors)
- Add unified component classes
- .view-container for consistent page layouts
- .section-header/.section-title/.section-desc
- .standard-table for table styling
- Update scrollbar, nav-item, progress-bar to use theme variables
## Settings Module Extensions
- Add model mapping column in Models tab
- Enhance model selectors with family color indicators
- Support horizontal scroll for tabs on narrow screens
- Add defaultCooldownMs and maxWaitBeforeErrorMs config options
## New Module
- Add src/modules/usage-stats.js for request tracking
- Track /v1/messages and /v1/chat/completions endpoints
- Hierarchical storage: { hour: { family: { model: count } } }
- Auto-save every minute, 30-day retention
- GET /api/stats/history endpoint for dashboard chart
## Backend Changes
- Add direct account manipulation helpers (bypass AccountManager)
- Add POST /api/config/password endpoint for WebUI password change
- Auto-reload AccountManager after account operations
- Use CSS variables in OAuth callback pages
## Other
- Update .gitignore for runtime data directory
- Add i18n keys for new UI elements (EN/zh_CN)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Wha1eChai
4
.gitignore
vendored
4
.gitignore
vendored
@@ -16,6 +16,10 @@ log.txt
|
||||
|
||||
# Local config (may contain tokens)
|
||||
.claude/
|
||||
.deepvcode/
|
||||
|
||||
# Runtime data
|
||||
data/
|
||||
|
||||
# Test artifacts
|
||||
tests/utils/*.png
|
||||
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
@@ -1,14 +1,15 @@
|
||||
{
|
||||
"name": "antigravity-claude-proxy",
|
||||
"version": "1.0.2",
|
||||
"version": "1.2.6",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "antigravity-claude-proxy",
|
||||
"version": "1.0.2",
|
||||
"version": "1.2.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"async-mutex": "^0.5.0",
|
||||
"better-sqlite3": "^12.5.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2"
|
||||
@@ -39,6 +40,15 @@
|
||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/async-mutex": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.5.0.tgz",
|
||||
"integrity": "sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
@@ -1304,6 +1314,12 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/tunnel-agent": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
|
||||
|
||||
@@ -63,8 +63,8 @@ document.addEventListener('alpine:init', () => {
|
||||
|
||||
// Chart Defaults
|
||||
if (typeof Chart !== 'undefined') {
|
||||
Chart.defaults.color = '#71717a';
|
||||
Chart.defaults.borderColor = '#27272a';
|
||||
Chart.defaults.color = window.utils.getThemeColor('--color-text-dim');
|
||||
Chart.defaults.borderColor = window.utils.getThemeColor('--color-space-border');
|
||||
Chart.defaults.font.family = '"JetBrains Mono", monospace';
|
||||
}
|
||||
|
||||
@@ -111,8 +111,12 @@ document.addEventListener('alpine:init', () => {
|
||||
|
||||
const messageHandler = (event) => {
|
||||
if (event.data?.type === 'oauth-success') {
|
||||
const action = reAuthEmail ? 're-authenticated' : 'added';
|
||||
Alpine.store('global').showToast(`Account ${event.data.email} ${action} successfully`, 'success');
|
||||
const actionKey = reAuthEmail ? 'reauthenticated' : 'added';
|
||||
const action = Alpine.store('global').t(actionKey);
|
||||
const successfully = Alpine.store('global').t('successfully');
|
||||
const msg = `${Alpine.store('global').t('accounts')} ${event.data.email} ${action} ${successfully}`;
|
||||
|
||||
Alpine.store('global').showToast(msg, 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
document.getElementById('add_account_modal')?.close();
|
||||
}
|
||||
@@ -120,10 +124,10 @@ document.addEventListener('alpine:init', () => {
|
||||
window.addEventListener('message', messageHandler);
|
||||
setTimeout(() => window.removeEventListener('message', messageHandler), 300000);
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Failed to get auth URL', 'error');
|
||||
Alpine.store('global').showToast(data.error || Alpine.store('global').t('failedToGetAuthUrl'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Failed to start OAuth flow: ' + e.message, 'error');
|
||||
Alpine.store('global').showToast(Alpine.store('global').t('failedToStartOAuth') + ': ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -1,3 +1,43 @@
|
||||
:root {
|
||||
--color-space-950: #050505;
|
||||
--color-space-900: #0a0a0a;
|
||||
--color-space-850: #121212;
|
||||
--color-space-800: #171717;
|
||||
--color-space-border: #27272a;
|
||||
--color-neon-purple: #a855f7;
|
||||
--color-neon-green: #22c55e;
|
||||
--color-neon-cyan: #06b6d4;
|
||||
--color-neon-yellow: #eab308;
|
||||
--color-neon-red: #ef4444;
|
||||
--color-text-main: #d1d5db; /* gray-300 */
|
||||
--color-text-dim: #71717a; /* zinc-400 */
|
||||
--color-text-muted: #6b7280; /* gray-500 */
|
||||
--color-text-bright: #ffffff;
|
||||
|
||||
/* Gradient Accents */
|
||||
--color-green-400: #4ade80;
|
||||
--color-yellow-400: #facc15;
|
||||
--color-red-400: #f87171;
|
||||
|
||||
/* Chart Colors */
|
||||
--color-chart-1: #a855f7;
|
||||
--color-chart-2: #c084fc;
|
||||
--color-chart-3: #e879f9;
|
||||
--color-chart-4: #d946ef;
|
||||
--color-chart-5: #22c55e;
|
||||
--color-chart-6: #4ade80;
|
||||
--color-chart-7: #86efac;
|
||||
--color-chart-8: #10b981;
|
||||
--color-chart-9: #06b6d4;
|
||||
--color-chart-10: #f59e0b;
|
||||
--color-chart-11: #ef4444;
|
||||
--color-chart-12: #ec4899;
|
||||
--color-chart-13: #8b5cf6;
|
||||
--color-chart-14: #14b8a6;
|
||||
--color-chart-15: #f97316;
|
||||
--color-chart-16: #6366f1;
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -13,12 +53,11 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #3f3f46;
|
||||
border-radius: 3px;
|
||||
@apply bg-space-800 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #52525b;
|
||||
@apply bg-space-border;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@@ -43,32 +82,30 @@
|
||||
|
||||
/* Utility */
|
||||
.glass-panel {
|
||||
background: rgba(23, 23, 23, 0.7);
|
||||
background: theme('colors.space.900 / 70%');
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid theme('colors.white / 8%');
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, transparent 100%);
|
||||
border-left: 3px solid #a855f7;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, theme('colors.neon.purple / 15%') 0%, transparent 100%);
|
||||
@apply border-l-4 border-neon-purple text-white;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s;
|
||||
@apply border-l-4 border-transparent transition-all duration-200;
|
||||
}
|
||||
|
||||
.progress-gradient-success::-webkit-progress-value {
|
||||
background-image: linear-gradient(to right, #22c55e, #4ade80);
|
||||
background-image: linear-gradient(to right, var(--color-neon-green), var(--color-green-400));
|
||||
}
|
||||
|
||||
.progress-gradient-warning::-webkit-progress-value {
|
||||
background-image: linear-gradient(to right, #eab308, #facc15);
|
||||
background-image: linear-gradient(to right, var(--color-neon-yellow), var(--color-yellow-400));
|
||||
}
|
||||
|
||||
.progress-gradient-error::-webkit-progress-value {
|
||||
background-image: linear-gradient(to right, #dc2626, #f87171);
|
||||
background-image: linear-gradient(to right, var(--color-neon-red), var(--color-red-400));
|
||||
}
|
||||
|
||||
/* Dashboard Grid */
|
||||
@@ -80,13 +117,40 @@
|
||||
|
||||
/* Tooltip Customization */
|
||||
.tooltip:before {
|
||||
background-color: #171717 !important; /* space-800 */
|
||||
border: 1px solid #27272a; /* space-border */
|
||||
color: #e5e7eb !important;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
@apply bg-space-800 border border-space-border text-gray-200 font-mono text-xs;
|
||||
}
|
||||
|
||||
.tooltip-left:before {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Refactored Global Utilities */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* View Containers */
|
||||
.view-container {
|
||||
@apply max-w-7xl mx-auto p-6 space-y-6 animate-fade-in;
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
@apply flex justify-between items-center mb-6;
|
||||
}
|
||||
.section-title {
|
||||
@apply text-2xl font-bold text-white tracking-tight;
|
||||
}
|
||||
.section-desc {
|
||||
@apply text-gray-500 text-sm;
|
||||
}
|
||||
|
||||
/* Component Unification */
|
||||
.standard-table {
|
||||
@apply table w-full border-separate border-spacing-0;
|
||||
}
|
||||
.standard-table thead {
|
||||
@apply bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border;
|
||||
}
|
||||
.standard-table tbody tr {
|
||||
@apply hover:bg-white/5 transition-colors border-b border-space-border/30 last:border-0;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="black" class="dark">
|
||||
<html lang="en" data-theme="antigravity" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -26,18 +26,36 @@
|
||||
colors: {
|
||||
// Deep Space Palette
|
||||
space: {
|
||||
950: '#050505', // Almost black
|
||||
900: '#0a0a0a',
|
||||
800: '#171717',
|
||||
border: '#27272a'
|
||||
950: 'var(--color-space-950)', // Deep background
|
||||
900: 'var(--color-space-900)', // Panel background
|
||||
850: 'var(--color-space-850)', // Hover states
|
||||
800: 'var(--color-space-800)', // UI elements
|
||||
border: 'var(--color-space-border)'
|
||||
},
|
||||
neon: {
|
||||
purple: '#a855f7',
|
||||
cyan: '#06b6d4',
|
||||
green: '#22c55e'
|
||||
purple: 'var(--color-neon-purple)',
|
||||
cyan: 'var(--color-neon-cyan)',
|
||||
green: 'var(--color-neon-green)',
|
||||
yellow: 'var(--color-neon-yellow)',
|
||||
red: 'var(--color-neon-red)'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
daisyui: {
|
||||
themes: [{
|
||||
antigravity: {
|
||||
"primary": "var(--color-neon-purple)", // Neon Purple
|
||||
"secondary": "var(--color-neon-green)", // Neon Green
|
||||
"accent": "var(--color-neon-cyan)", // Neon Cyan
|
||||
"neutral": "var(--color-space-800)", // space-800
|
||||
"base-100": "var(--color-space-950)", // space-950
|
||||
"info": "var(--color-neon-cyan)",
|
||||
"success": "var(--color-neon-green)",
|
||||
"warning": "var(--color-neon-yellow)",
|
||||
"error": "var(--color-neon-red)",
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -96,8 +114,8 @@
|
||||
class="w-8 h-8 rounded bg-gradient-to-br from-neon-purple to-blue-600 flex items-center justify-center text-white font-bold shadow-[0_0_15px_rgba(168,85,247,0.4)]">
|
||||
AG</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-bold tracking-wide text-white">ANTIGRAVITY</span>
|
||||
<span class="text-[10px] text-gray-500 font-mono tracking-wider">CLAUDE PROXY SYSTEM</span>
|
||||
<span class="text-sm font-bold tracking-wide text-white" x-text="$store.global.t('systemName')">ANTIGRAVITY</span>
|
||||
<span class="text-[10px] text-gray-500 font-mono tracking-wider" x-text="$store.global.t('systemDesc')">CLAUDE PROXY SYSTEM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,14 +129,14 @@
|
||||
:class="connectionStatus === 'connected' ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : (connectionStatus === 'connecting' ? 'bg-yellow-500 animate-pulse' : 'bg-red-500')">
|
||||
</div>
|
||||
<span
|
||||
x-text="connectionStatus === 'connected' ? 'ONLINE' : (connectionStatus === 'disconnected' ? 'OFFLINE' : 'CONNECTING')"></span>
|
||||
x-text="$store.global.connectionStatus === 'connected' ? $store.global.t('online') : ($store.global.connectionStatus === 'disconnected' ? $store.global.t('offline') : $store.global.t('connecting'))"></span>
|
||||
</div>
|
||||
|
||||
<div class="h-4 w-px bg-space-border"></div>
|
||||
|
||||
<!-- Refresh Button -->
|
||||
<button class="btn btn-ghost btn-xs btn-square text-gray-400 hover:text-white hover:bg-white/5"
|
||||
@click="fetchData" :disabled="loading" title="Refresh Data">
|
||||
@click="fetchData" :disabled="loading" :title="$store.global.t('refreshData')">
|
||||
<svg class="w-4 h-4" :class="{'animate-spin': loading}" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
@@ -133,7 +151,7 @@
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="w-64 bg-space-900 border-r border-space-border flex flex-col pt-6 pb-4">
|
||||
<div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest">Main</div>
|
||||
<div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest" x-text="$store.global.t('main')">Main</div>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<button
|
||||
class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
|
||||
@@ -157,7 +175,7 @@
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="px-4 mt-8 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest">System</div>
|
||||
<div class="px-4 mt-8 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest" x-text="$store.global.t('system')">System</div>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<button
|
||||
class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
|
||||
@@ -193,7 +211,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 overflow-auto bg-space-950 p-6 relative">
|
||||
<div class="flex-1 overflow-auto bg-space-950 relative">
|
||||
|
||||
<!-- Views Container -->
|
||||
<!-- Dashboard -->
|
||||
@@ -220,37 +238,33 @@
|
||||
<!-- Add Account Modal -->
|
||||
<dialog id="add_account_modal" class="modal backdrop-blur-sm">
|
||||
<div class="modal-box bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)]">
|
||||
<h3 class="font-bold text-lg text-white" x-text="t('addNode')">Add New Account</h3>
|
||||
<h3 class="font-bold text-lg text-white" x-text="$store.global.t('addNode')">Add New Account</h3>
|
||||
|
||||
<div class="py-6 flex flex-col gap-4">
|
||||
<p class="text-sm text-gray-400">Connect a Google Workspace account to increase your API quota limit.
|
||||
<p class="text-sm text-gray-400" x-text="$store.global.t('connectGoogleDesc')">Connect a Google Workspace account to increase your API quota limit.
|
||||
The account will be used to proxy Claude requests via Antigravity.</p>
|
||||
|
||||
<button
|
||||
class="btn btn-primary bg-white text-black hover:bg-gray-200 border-none flex items-center justify-center gap-3 h-12"
|
||||
class="btn btn-primary flex items-center justify-center gap-3 h-12"
|
||||
@click="addAccountWeb">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
fill="#4285F4"></path>
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
|
||||
<path
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
fill="#34A853"></path>
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
|
||||
<path
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
fill="#FBBC05"></path>
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
|
||||
<path
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
fill="#EA4335"></path>
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
|
||||
</svg>
|
||||
<span x-text="t('connectGoogle')">Connect Google Account</span>
|
||||
<span x-text="$store.global.t('connectGoogle')">Connect Google Account</span>
|
||||
</button>
|
||||
|
||||
<div class="divider text-xs text-gray-600">OR</div>
|
||||
<div class="divider text-xs text-gray-600 uppercase" x-text="$store.global.t('or')">OR</div>
|
||||
|
||||
<div class="collapse collapse-arrow bg-space-800 border border-space-border/50">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-sm font-medium text-gray-400">
|
||||
<div class="collapse-title text-sm font-medium text-gray-400" x-text="$store.global.t('useCliCommand')">
|
||||
Use CLI Command
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
@@ -263,12 +277,12 @@
|
||||
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-ghost hover:bg-white/10">Close</button>
|
||||
<button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
<button x-text="$store.global.t('close')">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
|
||||
@@ -25,8 +25,8 @@ document.addEventListener('alpine:init', () => {
|
||||
|
||||
// Chart Defaults
|
||||
if (typeof Chart !== 'undefined') {
|
||||
Chart.defaults.color = '#71717a';
|
||||
Chart.defaults.borderColor = '#27272a';
|
||||
Chart.defaults.color = window.utils.getThemeColor('--color-text-dim');
|
||||
Chart.defaults.borderColor = window.utils.getThemeColor('--color-space-border');
|
||||
Chart.defaults.font.family = '"JetBrains Mono", monospace';
|
||||
}
|
||||
|
||||
|
||||
@@ -6,99 +6,105 @@ window.Components = window.Components || {};
|
||||
|
||||
window.Components.accountManager = () => ({
|
||||
async refreshAccount(email) {
|
||||
Alpine.store('global').showToast(`Refreshing ${email}...`, 'info');
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const store = Alpine.store('global');
|
||||
store.showToast(store.t('refreshingAccount', { email }), 'info');
|
||||
const password = store.webuiPassword;
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}/refresh`, { method: 'POST' }, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
Alpine.store('global').showToast(`Refreshed ${email}`, 'success');
|
||||
store.showToast(store.t('refreshedAccount', { email }), 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Refresh failed', 'error');
|
||||
store.showToast(data.error || store.t('refreshFailed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Refresh failed: ' + e.message, 'error');
|
||||
store.showToast(store.t('refreshFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async toggleAccount(email, enabled) {
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const store = Alpine.store('global');
|
||||
const password = store.webuiPassword;
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}/toggle`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ enabled })
|
||||
}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
Alpine.store('global').showToast(`Account ${email} ${enabled ? 'enabled' : 'disabled'}`, 'success');
|
||||
const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
|
||||
store.showToast(store.t('accountToggled', { email, status }), 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Toggle failed', 'error');
|
||||
store.showToast(data.error || store.t('toggleFailed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Toggle failed: ' + e.message, 'error');
|
||||
store.showToast(store.t('toggleFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async fixAccount(email) {
|
||||
Alpine.store('global').showToast(`Re-authenticating ${email}...`, 'info');
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const store = Alpine.store('global');
|
||||
store.showToast(store.t('reauthenticating', { email }), 'info');
|
||||
const password = store.webuiPassword;
|
||||
try {
|
||||
const urlPath = `/api/auth/url?email=${encodeURIComponent(email)}`;
|
||||
const { response, newPassword } = await window.utils.request(urlPath, {}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Failed to get auth URL', 'error');
|
||||
store.showToast(data.error || store.t('authUrlFailed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Failed: ' + e.message, 'error');
|
||||
store.showToast(store.t('authUrlFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async deleteAccount(email) {
|
||||
if (!confirm(Alpine.store('global').t('confirmDelete'))) return;
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const store = Alpine.store('global');
|
||||
if (!confirm(store.t('confirmDelete'))) return;
|
||||
const password = store.webuiPassword;
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}`, { method: 'DELETE' }, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
Alpine.store('global').showToast(`Deleted ${email}`, 'success');
|
||||
store.showToast(store.t('deletedAccount', { email }), 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Delete failed', 'error');
|
||||
store.showToast(data.error || store.t('deleteFailed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Delete failed: ' + e.message, 'error');
|
||||
store.showToast(store.t('deleteFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async reloadAccounts() {
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const store = Alpine.store('global');
|
||||
const password = store.webuiPassword;
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/accounts/reload', { method: 'POST' }, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
Alpine.store('global').showToast('Accounts reloaded', 'success');
|
||||
store.showToast(store.t('accountsReloaded'), 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
} else {
|
||||
Alpine.store('global').showToast(data.error || 'Reload failed', 'error');
|
||||
store.showToast(data.error || store.t('reloadFailed'), 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Reload failed: ' + e.message, 'error');
|
||||
store.showToast(store.t('reloadFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -44,9 +44,9 @@ window.Components.claudeConfig = () => ({
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
Alpine.store('global').showToast('Claude config saved!', 'success');
|
||||
Alpine.store('global').showToast(Alpine.store('global').t('claudeConfigSaved'), 'success');
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Failed to save config: ' + e.message, 'error');
|
||||
Alpine.store('global').showToast(Alpine.store('global').t('saveConfigFailed') + ': ' + e.message, 'error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
@@ -4,17 +4,50 @@
|
||||
*/
|
||||
window.Components = window.Components || {};
|
||||
|
||||
// Helper to get CSS variable values (alias to window.utils.getThemeColor)
|
||||
const getThemeColor = (name) => window.utils.getThemeColor(name);
|
||||
|
||||
// Color palette for different families and models
|
||||
const FAMILY_COLORS = {
|
||||
get claude() { return getThemeColor('--color-neon-purple'); },
|
||||
get gemini() { return getThemeColor('--color-neon-green'); },
|
||||
get other() { return getThemeColor('--color-neon-cyan'); }
|
||||
};
|
||||
|
||||
const MODEL_COLORS = Array.from({ length: 16 }, (_, i) => getThemeColor(`--color-chart-${i + 1}`));
|
||||
|
||||
window.Components.dashboard = () => ({
|
||||
stats: { total: 0, active: 0, limited: 0, overallHealth: 0 },
|
||||
charts: { quotaDistribution: null },
|
||||
stats: { total: 0, active: 0, limited: 0, overallHealth: 0, hasTrendData: false },
|
||||
charts: { quotaDistribution: null, usageTrend: null },
|
||||
|
||||
// Usage stats
|
||||
usageStats: { total: 0, today: 0, thisHour: 0 },
|
||||
historyData: {},
|
||||
|
||||
// Hierarchical model tree: { claude: ['opus-4-5', 'sonnet-4-5'], gemini: ['3-flash'] }
|
||||
modelTree: {},
|
||||
families: [], // ['claude', 'gemini']
|
||||
|
||||
// Display mode: 'family' or 'model'
|
||||
displayMode: 'model',
|
||||
|
||||
// Selection state
|
||||
selectedFamilies: [],
|
||||
selectedModels: {}, // { claude: ['opus-4-5'], gemini: ['3-flash'] }
|
||||
|
||||
showModelFilter: false,
|
||||
|
||||
init() {
|
||||
// Load saved preferences from localStorage
|
||||
this.loadPreferences();
|
||||
|
||||
// Update stats when dashboard becomes active
|
||||
this.$watch('$store.global.activeTab', (val) => {
|
||||
if (val === 'dashboard') {
|
||||
this.$nextTick(() => {
|
||||
this.updateStats();
|
||||
this.updateCharts();
|
||||
this.fetchHistory();
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -32,22 +65,456 @@ window.Components.dashboard = () => ({
|
||||
this.$nextTick(() => {
|
||||
this.updateStats();
|
||||
this.updateCharts();
|
||||
this.fetchHistory();
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh history every 5 minutes
|
||||
setInterval(() => {
|
||||
if (this.$store.global.activeTab === 'dashboard') {
|
||||
this.fetchHistory();
|
||||
}
|
||||
}, 300000);
|
||||
},
|
||||
|
||||
loadPreferences() {
|
||||
try {
|
||||
const saved = localStorage.getItem('dashboard_chart_prefs');
|
||||
if (saved) {
|
||||
const prefs = JSON.parse(saved);
|
||||
this.displayMode = prefs.displayMode || 'model';
|
||||
this.selectedFamilies = prefs.selectedFamilies || [];
|
||||
this.selectedModels = prefs.selectedModels || {};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load dashboard preferences:', e);
|
||||
}
|
||||
},
|
||||
|
||||
savePreferences() {
|
||||
try {
|
||||
localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
|
||||
displayMode: this.displayMode,
|
||||
selectedFamilies: this.selectedFamilies,
|
||||
selectedModels: this.selectedModels
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error('Failed to save dashboard preferences:', e);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchHistory() {
|
||||
try {
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
const { response, newPassword } = await window.utils.request('/api/stats/history', {}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (response.ok) {
|
||||
const history = await response.json();
|
||||
this.historyData = history;
|
||||
this.processHistory(history);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch usage history:', error);
|
||||
this.stats.hasTrendData = true;
|
||||
}
|
||||
},
|
||||
|
||||
processHistory(history) {
|
||||
// Build model tree from hierarchical data
|
||||
const tree = {};
|
||||
let total = 0, today = 0, thisHour = 0;
|
||||
|
||||
const now = new Date();
|
||||
const todayStart = new Date(now);
|
||||
todayStart.setHours(0, 0, 0, 0);
|
||||
const currentHour = new Date(now);
|
||||
currentHour.setMinutes(0, 0, 0);
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const timestamp = new Date(iso);
|
||||
|
||||
// Process each family in the hour data
|
||||
Object.entries(hourData).forEach(([key, value]) => {
|
||||
// Skip metadata keys
|
||||
if (key === '_total' || key === 'total') return;
|
||||
|
||||
// Handle hierarchical format: { claude: { "opus-4-5": 10, "_subtotal": 10 } }
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (!tree[key]) tree[key] = new Set();
|
||||
|
||||
Object.keys(value).forEach(modelName => {
|
||||
if (modelName !== '_subtotal') {
|
||||
tree[key].add(modelName);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Skip old flat format keys (claude, gemini as numbers)
|
||||
});
|
||||
|
||||
// Calculate totals
|
||||
const hourTotal = hourData._total || hourData.total || 0;
|
||||
total += hourTotal;
|
||||
|
||||
if (timestamp >= todayStart) {
|
||||
today += hourTotal;
|
||||
}
|
||||
if (timestamp.getTime() === currentHour.getTime()) {
|
||||
thisHour = hourTotal;
|
||||
}
|
||||
});
|
||||
|
||||
this.usageStats = { total, today, thisHour };
|
||||
|
||||
// Convert Sets to sorted arrays
|
||||
this.modelTree = {};
|
||||
Object.entries(tree).forEach(([family, models]) => {
|
||||
this.modelTree[family] = Array.from(models).sort();
|
||||
});
|
||||
this.families = Object.keys(this.modelTree).sort();
|
||||
|
||||
// Auto-select new families/models that haven't been configured
|
||||
this.autoSelectNew();
|
||||
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
autoSelectNew() {
|
||||
// If no preferences saved, select all
|
||||
if (this.selectedFamilies.length === 0 && Object.keys(this.selectedModels).length === 0) {
|
||||
this.selectedFamilies = [...this.families];
|
||||
this.families.forEach(family => {
|
||||
this.selectedModels[family] = [...(this.modelTree[family] || [])];
|
||||
});
|
||||
this.savePreferences();
|
||||
return;
|
||||
}
|
||||
|
||||
// Add new families/models that appeared
|
||||
this.families.forEach(family => {
|
||||
if (!this.selectedFamilies.includes(family)) {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
(this.modelTree[family] || []).forEach(model => {
|
||||
if (!this.selectedModels[family].includes(model)) {
|
||||
this.selectedModels[family].push(model);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
autoSelectTopN(n = 5) {
|
||||
// Calculate usage for each model over past 24 hours
|
||||
const usage = {};
|
||||
const now = Date.now();
|
||||
const dayAgo = now - 24 * 60 * 60 * 1000;
|
||||
|
||||
Object.entries(this.historyData).forEach(([iso, hourData]) => {
|
||||
const timestamp = new Date(iso).getTime();
|
||||
if (timestamp < dayAgo) return;
|
||||
|
||||
Object.entries(hourData).forEach(([family, familyData]) => {
|
||||
if (typeof familyData === 'object' && family !== '_total') {
|
||||
Object.entries(familyData).forEach(([model, count]) => {
|
||||
if (model !== '_subtotal') {
|
||||
const key = `${family}:${model}`;
|
||||
usage[key] = (usage[key] || 0) + count;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sort by usage and take top N
|
||||
const sorted = Object.entries(usage)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, n);
|
||||
|
||||
// Clear current selection
|
||||
this.selectedFamilies = [];
|
||||
this.selectedModels = {};
|
||||
|
||||
// Select top N models
|
||||
sorted.forEach(([key]) => {
|
||||
const [family, model] = key.split(':');
|
||||
if (!this.selectedFamilies.includes(family)) {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
this.selectedModels[family].push(model);
|
||||
});
|
||||
|
||||
this.savePreferences();
|
||||
this.refreshChart();
|
||||
},
|
||||
|
||||
// Toggle display mode between family and model level
|
||||
setDisplayMode(mode) {
|
||||
this.displayMode = mode;
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Toggle family selection
|
||||
toggleFamily(family) {
|
||||
const index = this.selectedFamilies.indexOf(family);
|
||||
if (index > -1) {
|
||||
this.selectedFamilies.splice(index, 1);
|
||||
} else {
|
||||
this.selectedFamilies.push(family);
|
||||
}
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Toggle model selection within a family
|
||||
toggleModel(family, model) {
|
||||
if (!this.selectedModels[family]) {
|
||||
this.selectedModels[family] = [];
|
||||
}
|
||||
const index = this.selectedModels[family].indexOf(model);
|
||||
if (index > -1) {
|
||||
this.selectedModels[family].splice(index, 1);
|
||||
} else {
|
||||
this.selectedModels[family].push(model);
|
||||
}
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Check if family is selected
|
||||
isFamilySelected(family) {
|
||||
return this.selectedFamilies.includes(family);
|
||||
},
|
||||
|
||||
// Check if model is selected
|
||||
isModelSelected(family, model) {
|
||||
return this.selectedModels[family]?.includes(model) || false;
|
||||
},
|
||||
|
||||
// Select all families and models
|
||||
selectAll() {
|
||||
this.selectedFamilies = [...this.families];
|
||||
this.families.forEach(family => {
|
||||
this.selectedModels[family] = [...(this.modelTree[family] || [])];
|
||||
});
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Deselect all
|
||||
deselectAll() {
|
||||
this.selectedFamilies = [];
|
||||
this.selectedModels = {};
|
||||
this.savePreferences();
|
||||
this.updateTrendChart();
|
||||
},
|
||||
|
||||
// Get color for family
|
||||
getFamilyColor(family) {
|
||||
return FAMILY_COLORS[family] || FAMILY_COLORS.other;
|
||||
},
|
||||
|
||||
// Get color for model (with index for variation within family)
|
||||
getModelColor(family, modelIndex) {
|
||||
const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : 8);
|
||||
return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
|
||||
},
|
||||
|
||||
// Get count of selected items for display
|
||||
getSelectedCount() {
|
||||
if (this.displayMode === 'family') {
|
||||
return `${this.selectedFamilies.length}/${this.families.length}`;
|
||||
}
|
||||
let selected = 0, total = 0;
|
||||
this.families.forEach(family => {
|
||||
const models = this.modelTree[family] || [];
|
||||
total += models.length;
|
||||
selected += (this.selectedModels[family] || []).length;
|
||||
});
|
||||
return `${selected}/${total}`;
|
||||
},
|
||||
|
||||
updateTrendChart() {
|
||||
const ctx = document.getElementById('usageTrendChart');
|
||||
if (!ctx || typeof Chart === 'undefined') return;
|
||||
|
||||
if (this.charts.usageTrend) {
|
||||
this.charts.usageTrend.destroy();
|
||||
}
|
||||
|
||||
const history = this.historyData;
|
||||
const labels = [];
|
||||
const datasets = [];
|
||||
|
||||
if (this.displayMode === 'family') {
|
||||
// Aggregate by family
|
||||
const dataByFamily = {};
|
||||
this.selectedFamilies.forEach(family => {
|
||||
dataByFamily[family] = [];
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
||||
|
||||
this.selectedFamilies.forEach(family => {
|
||||
const familyData = hourData[family];
|
||||
const count = familyData?._subtotal || 0;
|
||||
dataByFamily[family].push(count);
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for families
|
||||
this.selectedFamilies.forEach(family => {
|
||||
const color = this.getFamilyColor(family);
|
||||
const familyKey = 'family' + family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const label = Alpine.store('global').t(familyKey);
|
||||
datasets.push(this.createDataset(
|
||||
label,
|
||||
dataByFamily[family],
|
||||
color,
|
||||
ctx
|
||||
));
|
||||
});
|
||||
} else {
|
||||
// Show individual models
|
||||
const dataByModel = {};
|
||||
|
||||
// Initialize data arrays
|
||||
this.families.forEach(family => {
|
||||
(this.selectedModels[family] || []).forEach(model => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key] = [];
|
||||
});
|
||||
});
|
||||
|
||||
Object.entries(history).forEach(([iso, hourData]) => {
|
||||
const date = new Date(iso);
|
||||
labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
|
||||
|
||||
this.families.forEach(family => {
|
||||
const familyData = hourData[family] || {};
|
||||
(this.selectedModels[family] || []).forEach(model => {
|
||||
const key = `${family}:${model}`;
|
||||
dataByModel[key].push(familyData[model] || 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Build datasets for models
|
||||
this.families.forEach(family => {
|
||||
(this.selectedModels[family] || []).forEach((model, modelIndex) => {
|
||||
const key = `${family}:${model}`;
|
||||
const color = this.getModelColor(family, modelIndex);
|
||||
datasets.push(this.createDataset(model, dataByModel[key], color, ctx));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.charts.usageTrend = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: { labels, datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: getThemeColor('--color-space-950') || 'rgba(24, 24, 27, 0.9)',
|
||||
titleColor: getThemeColor('--color-text-main'),
|
||||
bodyColor: getThemeColor('--color-text-bright'),
|
||||
borderColor: getThemeColor('--color-space-border'),
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + context.parsed.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: { display: false },
|
||||
ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
beginAtZero: true,
|
||||
grid: { display: true, color: getThemeColor('--color-space-border') + '1a' || 'rgba(255,255,255,0.05)' },
|
||||
ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createDataset(label, data, color, ctx) {
|
||||
const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 200);
|
||||
gradient.addColorStop(0, this.hexToRgba(color, 0.3));
|
||||
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
||||
|
||||
return {
|
||||
label,
|
||||
data,
|
||||
borderColor: color,
|
||||
backgroundColor: gradient,
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
pointBackgroundColor: color
|
||||
};
|
||||
},
|
||||
|
||||
hexToRgba(hex, alpha) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
|
||||
updateStats() {
|
||||
const accounts = Alpine.store('data').accounts;
|
||||
let active = 0, limited = 0;
|
||||
|
||||
const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
|
||||
|
||||
accounts.forEach(acc => {
|
||||
if (acc.status === 'ok') {
|
||||
const hasQuota = Object.values(acc.limits || {}).some(l => l && l.remainingFraction > 0);
|
||||
if (hasQuota) active++; else limited++;
|
||||
const limits = Object.entries(acc.limits || {});
|
||||
let hasActiveCore = limits.some(([id, l]) => l && l.remainingFraction > 0.05 && isCore(id));
|
||||
|
||||
if (!hasActiveCore) {
|
||||
const hasAnyCore = limits.some(([id]) => isCore(id));
|
||||
if (!hasAnyCore) {
|
||||
hasActiveCore = limits.some(([_, l]) => l && l.remainingFraction > 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
if (hasActiveCore) active++; else limited++;
|
||||
} else {
|
||||
limited++;
|
||||
}
|
||||
});
|
||||
this.stats = { total: accounts.length, active, limited };
|
||||
this.stats.total = accounts.length;
|
||||
this.stats.active = active;
|
||||
this.stats.limited = limited;
|
||||
},
|
||||
|
||||
updateCharts() {
|
||||
@@ -59,32 +526,70 @@ window.Components.dashboard = () => ({
|
||||
}
|
||||
|
||||
const rows = Alpine.store('data').quotaRows;
|
||||
const familyStats = { claude: { sum: 0, count: 0 }, gemini: { sum: 0, count: 0 }, other: { sum: 0, count: 0 } };
|
||||
|
||||
// Calculate overall system health
|
||||
let totalHealthSum = 0;
|
||||
let totalModelCount = 0;
|
||||
|
||||
// Dynamic family aggregation (supports any model family)
|
||||
const familyStats = {};
|
||||
rows.forEach(row => {
|
||||
const f = familyStats[row.family] ? row.family : 'other';
|
||||
// Use avgQuota if available (new logic), fallback to minQuota (old logic compatibility)
|
||||
const quota = row.avgQuota !== undefined ? row.avgQuota : row.minQuota;
|
||||
|
||||
familyStats[f].sum += quota;
|
||||
familyStats[f].count++;
|
||||
|
||||
totalHealthSum += quota;
|
||||
totalModelCount++;
|
||||
if (!familyStats[row.family]) {
|
||||
familyStats[row.family] = { used: 0, total: 0 };
|
||||
}
|
||||
row.quotaInfo.forEach(info => {
|
||||
familyStats[row.family].used += info.pct;
|
||||
familyStats[row.family].total += 100;
|
||||
});
|
||||
});
|
||||
|
||||
this.stats.overallHealth = totalModelCount > 0 ? Math.round(totalHealthSum / totalModelCount) : 0;
|
||||
// Calculate global health
|
||||
const globalTotal = Object.values(familyStats).reduce((sum, f) => sum + f.total, 0);
|
||||
const globalUsed = Object.values(familyStats).reduce((sum, f) => sum + f.used, 0);
|
||||
this.stats.overallHealth = globalTotal > 0 ? Math.round((globalUsed / globalTotal) * 100) : 0;
|
||||
|
||||
const labels = ['Claude', 'Gemini', 'Other'];
|
||||
const data = [
|
||||
familyStats.claude.count ? Math.round(familyStats.claude.sum / familyStats.claude.count) : 0,
|
||||
familyStats.gemini.count ? Math.round(familyStats.gemini.sum / familyStats.gemini.count) : 0,
|
||||
familyStats.other.count ? Math.round(familyStats.other.sum / familyStats.other.count) : 0,
|
||||
];
|
||||
// Generate chart data dynamically
|
||||
const familyColors = {
|
||||
'claude': getThemeColor('--color-neon-purple'),
|
||||
'gemini': getThemeColor('--color-neon-green'),
|
||||
'other': getThemeColor('--color-neon-cyan'),
|
||||
'unknown': '#666666'
|
||||
};
|
||||
|
||||
const families = Object.keys(familyStats).sort();
|
||||
const segmentSize = families.length > 0 ? 100 / families.length : 100;
|
||||
|
||||
const data = [];
|
||||
const colors = [];
|
||||
const labels = [];
|
||||
|
||||
families.forEach(family => {
|
||||
const stats = familyStats[family];
|
||||
const health = stats.total > 0 ? Math.round((stats.used / stats.total) * 100) : 0;
|
||||
const activeVal = (health / 100) * segmentSize;
|
||||
const inactiveVal = segmentSize - activeVal;
|
||||
|
||||
const familyColor = familyColors[family] || familyColors['unknown'];
|
||||
|
||||
// Get translation keys if available, otherwise capitalize
|
||||
const familyName = family.charAt(0).toUpperCase() + family.slice(1);
|
||||
const store = Alpine.store('global');
|
||||
|
||||
// Labels using translations if possible
|
||||
const activeLabel = family === 'claude' ? store.t('claudeActive') :
|
||||
family === 'gemini' ? store.t('geminiActive') :
|
||||
`${familyName} Active`;
|
||||
|
||||
const depletedLabel = family === 'claude' ? store.t('claudeEmpty') :
|
||||
family === 'gemini' ? store.t('geminiEmpty') :
|
||||
`${familyName} Depleted`;
|
||||
|
||||
// Active segment
|
||||
data.push(activeVal);
|
||||
colors.push(familyColor);
|
||||
labels.push(activeLabel);
|
||||
|
||||
// Inactive segment
|
||||
data.push(inactiveVal);
|
||||
colors.push(this.hexToRgba(familyColor, 0.1));
|
||||
labels.push(depletedLabel);
|
||||
});
|
||||
|
||||
this.charts.quotaDistribution = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
@@ -92,24 +597,22 @@ window.Components.dashboard = () => ({
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: ['#a855f7', '#22c55e', '#52525b'],
|
||||
borderColor: '#09090b', // Matches bg-space-900 roughly
|
||||
backgroundColor: colors,
|
||||
borderColor: getThemeColor('--color-space-950'),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
borderRadius: 2
|
||||
borderRadius: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '85%', // Thinner ring
|
||||
cutout: '85%',
|
||||
rotation: -90,
|
||||
circumference: 360,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false // Hide default legend
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false // Disable tooltip for cleaner look, or style it? Let's keep it simple.
|
||||
},
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: false },
|
||||
title: { display: false }
|
||||
},
|
||||
animation: {
|
||||
|
||||
@@ -59,7 +59,8 @@ document.addEventListener('alpine:init', () => {
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
this.connectionStatus = 'disconnected';
|
||||
Alpine.store('global').showToast('Connection Lost', 'error');
|
||||
const store = Alpine.store('global');
|
||||
store.showToast(store.t('connectionLost'), 'error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,8 @@ document.addEventListener('alpine:init', () => {
|
||||
localStorage.setItem('antigravity_settings', JSON.stringify(toSave));
|
||||
|
||||
if (!silent) {
|
||||
Alpine.store('global').showToast('Configuration Saved', 'success');
|
||||
const store = Alpine.store('global');
|
||||
store.showToast(store.t('configSaved'), 'success');
|
||||
}
|
||||
|
||||
// Trigger updates
|
||||
|
||||
@@ -56,7 +56,14 @@ document.addEventListener('alpine:init', () => {
|
||||
delete: "Delete",
|
||||
confirmDelete: "Are you sure you want to remove this account?",
|
||||
connectGoogle: "Connect Google Account",
|
||||
manualReload: "Reload from Disk",
|
||||
reauthenticated: "re-authenticated",
|
||||
added: "added",
|
||||
successfully: "successfully",
|
||||
failedToGetAuthUrl: "Failed to get auth URL",
|
||||
failedToStartOAuth: "Failed to start OAuth flow",
|
||||
family: "Family",
|
||||
model: "Model",
|
||||
activeSuffix: "Active",
|
||||
// Tabs
|
||||
tabInterface: "Interface",
|
||||
tabClaude: "Claude CLI",
|
||||
@@ -104,6 +111,68 @@ document.addEventListener('alpine:init', () => {
|
||||
authToken: "Auth Token",
|
||||
saveConfig: "Save to ~/.claude/settings.json",
|
||||
envVar: "Env",
|
||||
// New Keys
|
||||
systemName: "ANTIGRAVITY",
|
||||
systemDesc: "CLAUDE PROXY SYSTEM",
|
||||
connectGoogleDesc: "Connect a Google Workspace account to increase your API quota limit. The account will be used to proxy Claude requests via Antigravity.",
|
||||
useCliCommand: "Use CLI Command",
|
||||
close: "Close",
|
||||
requestVolume: "Request Volume",
|
||||
filter: "Filter",
|
||||
all: "All",
|
||||
none: "None",
|
||||
noDataTracked: "No data tracked yet",
|
||||
selectFamilies: "Select families to display",
|
||||
selectModels: "Select models to display",
|
||||
noLogsMatch: "No logs match filter",
|
||||
connecting: "CONNECTING",
|
||||
main: "Main",
|
||||
system: "System",
|
||||
refreshData: "Refresh Data",
|
||||
connectionLost: "Connection Lost",
|
||||
lastUpdated: "Last Updated",
|
||||
grepLogs: "grep logs...",
|
||||
noMatchingModels: "No matching models",
|
||||
typeToSearch: "Type to search or select...",
|
||||
or: "OR",
|
||||
refreshingAccount: "Refreshing {email}...",
|
||||
refreshedAccount: "Refreshed {email}",
|
||||
refreshFailed: "Refresh failed",
|
||||
accountToggled: "Account {email} {status}",
|
||||
toggleFailed: "Toggle failed",
|
||||
reauthenticating: "Re-authenticating {email}...",
|
||||
authUrlFailed: "Failed to get auth URL",
|
||||
deletedAccount: "Deleted {email}",
|
||||
deleteFailed: "Delete failed",
|
||||
accountsReloaded: "Accounts reloaded",
|
||||
reloadFailed: "Reload failed",
|
||||
claudeConfigSaved: "Claude configuration saved",
|
||||
saveConfigFailed: "Failed to save configuration",
|
||||
claudeActive: "Claude Active",
|
||||
claudeEmpty: "Claude Empty",
|
||||
geminiActive: "Gemini Active",
|
||||
geminiEmpty: "Gemini Empty",
|
||||
fix: "FIX",
|
||||
synced: "SYNCED",
|
||||
syncing: "SYNCING...",
|
||||
// Additional
|
||||
reloading: "Reloading...",
|
||||
reloaded: "Reloaded",
|
||||
lines: "lines",
|
||||
enabledSeeLogs: "Enabled (See Logs)",
|
||||
production: "Production",
|
||||
configSaved: "Configuration Saved",
|
||||
enterPassword: "Enter Web UI Password:",
|
||||
ready: "READY",
|
||||
familyClaude: "Claude",
|
||||
familyGemini: "Gemini",
|
||||
familyOther: "Other",
|
||||
enabledStatus: "enabled",
|
||||
disabledStatus: "disabled",
|
||||
logLevelInfo: "INFO",
|
||||
logLevelSuccess: "SUCCESS",
|
||||
logLevelWarn: "WARN",
|
||||
logLevelError: "ERR",
|
||||
},
|
||||
zh: {
|
||||
dashboard: "仪表盘",
|
||||
@@ -148,6 +217,14 @@ document.addEventListener('alpine:init', () => {
|
||||
delete: "删除",
|
||||
confirmDelete: "确定要移除此账号吗？",
|
||||
connectGoogle: "连接 Google 账号",
|
||||
reauthenticated: "已重新认证",
|
||||
added: "已添加",
|
||||
successfully: "成功",
|
||||
failedToGetAuthUrl: "获取认证链接失败",
|
||||
failedToStartOAuth: "启动 OAuth 流程失败",
|
||||
family: "系列",
|
||||
model: "模型",
|
||||
activeSuffix: "活跃",
|
||||
manualReload: "重新加载配置",
|
||||
// Tabs
|
||||
tabInterface: "界面设置",
|
||||
@@ -196,14 +273,82 @@ document.addEventListener('alpine:init', () => {
|
||||
authToken: "认证令牌",
|
||||
saveConfig: "保存到 ~/.claude/settings.json",
|
||||
envVar: "环境变量",
|
||||
// New Keys
|
||||
systemName: "ANTIGRAVITY",
|
||||
systemDesc: "CLAUDE 代理系统",
|
||||
connectGoogleDesc: "连接 Google Workspace 账号以增加 API 配额。该账号将用于通过 Antigravity 代理 Claude 请求。",
|
||||
useCliCommand: "使用命令行",
|
||||
close: "关闭",
|
||||
requestVolume: "请求量",
|
||||
filter: "筛选",
|
||||
all: "全选",
|
||||
none: "清空",
|
||||
noDataTracked: "暂无追踪数据",
|
||||
selectFamilies: "选择要显示的系列",
|
||||
selectModels: "选择要显示的模型",
|
||||
noLogsMatch: "没有符合过滤条件的日志",
|
||||
connecting: "正在连接",
|
||||
main: "主菜单",
|
||||
system: "系统",
|
||||
refreshData: "刷新数据",
|
||||
connectionLost: "连接已断开",
|
||||
lastUpdated: "最后更新",
|
||||
grepLogs: "过滤日志...",
|
||||
noMatchingModels: "没有匹配的模型",
|
||||
typeToSearch: "输入以搜索或选择...",
|
||||
or: "或",
|
||||
refreshingAccount: "正在刷新 {email}...",
|
||||
refreshedAccount: "已完成刷新 {email}",
|
||||
refreshFailed: "刷新失败",
|
||||
accountToggled: "账号 {email} 已{status}",
|
||||
toggleFailed: "切换失败",
|
||||
reauthenticating: "正在重新认证 {email}...",
|
||||
authUrlFailed: "获取认证链接失败",
|
||||
deletedAccount: "已删除 {email}",
|
||||
deleteFailed: "删除失败",
|
||||
accountsReloaded: "账号配置已重载",
|
||||
reloadFailed: "重载失败",
|
||||
claudeConfigSaved: "Claude 配置已保存",
|
||||
saveConfigFailed: "保存配置失败",
|
||||
claudeActive: "Claude 活跃",
|
||||
claudeEmpty: "Claude 耗尽",
|
||||
geminiActive: "Gemini 活跃",
|
||||
geminiEmpty: "Gemini 耗尽",
|
||||
fix: "修复",
|
||||
synced: "已同步",
|
||||
syncing: "正在同步...",
|
||||
// Additional
|
||||
reloading: "正在重载...",
|
||||
reloaded: "已重载",
|
||||
lines: "行",
|
||||
enabledSeeLogs: "已启用 (见日志)",
|
||||
production: "生产环境",
|
||||
configSaved: "配置已保存",
|
||||
enterPassword: "请输入 Web UI 密码：",
|
||||
ready: "就绪",
|
||||
familyClaude: "Claude 系列",
|
||||
familyGemini: "Gemini 系列",
|
||||
familyOther: "其他系列",
|
||||
enabledStatus: "已启用",
|
||||
disabledStatus: "已禁用",
|
||||
logLevelInfo: "信息",
|
||||
logLevelSuccess: "成功",
|
||||
logLevelWarn: "警告",
|
||||
logLevelError: "错误",
|
||||
}
|
||||
},
|
||||
|
||||
// Toast Messages
|
||||
toast: null,
|
||||
|
||||
t(key) {
|
||||
return this.translations[this.lang][key] || key;
|
||||
t(key, params = {}) {
|
||||
let str = this.translations[this.lang][key] || key;
|
||||
if (typeof str === 'string') {
|
||||
Object.keys(params).forEach(p => {
|
||||
str = str.replace(`{${p}}`, params[p]);
|
||||
});
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
setLang(l) {
|
||||
|
||||
@@ -13,7 +13,8 @@ window.utils = {
|
||||
let response = await fetch(url, options);
|
||||
|
||||
if (response.status === 401) {
|
||||
const password = prompt('Enter Web UI Password:');
|
||||
const store = Alpine.store('global');
|
||||
const password = prompt(store ? store.t('enterPassword') : 'Enter Web UI Password:');
|
||||
if (password) {
|
||||
// Return new password so caller can update state
|
||||
// This implies we need a way to propagate the new password back
|
||||
@@ -31,11 +32,16 @@ window.utils = {
|
||||
},
|
||||
|
||||
formatTimeUntil(isoTime) {
|
||||
const store = Alpine.store('global');
|
||||
const diff = new Date(isoTime) - new Date();
|
||||
if (diff <= 0) return 'READY';
|
||||
if (diff <= 0) return store ? store.t('ready') : 'READY';
|
||||
const mins = Math.floor(diff / 60000);
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs > 0) return `${hrs}H ${mins % 60}M`;
|
||||
return `${mins}M`;
|
||||
},
|
||||
|
||||
getThemeColor(name) {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<div x-data="accountManager" class="max-w-4xl mx-auto space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div x-data="accountManager" class="view-container">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accessCredentials')">
|
||||
Access
|
||||
Credentials</h2>
|
||||
<p class="text-gray-500 text-sm" x-text="$store.global.t('manageTokens')">Manage OAuth tokens
|
||||
and session
|
||||
states</p>
|
||||
<h2 class="section-title" x-text="$store.global.t('accessCredentials')">
|
||||
Access Credentials
|
||||
</h2>
|
||||
<p class="section-desc" x-text="$store.global.t('manageTokens')">
|
||||
Manage OAuth tokens and session states
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-sm bg-neon-purple hover:bg-purple-600 text-white border-none gap-2"
|
||||
<button class="btn btn-primary btn-sm gap-2"
|
||||
onclick="document.getElementById('add_account_modal').showModal()">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
@@ -18,8 +18,8 @@
|
||||
</div>
|
||||
|
||||
<div class="glass-panel rounded-xl overflow-hidden">
|
||||
<table class="table w-full">
|
||||
<thead class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border">
|
||||
<table class="standard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="pl-6 w-24" x-text="$store.global.t('enabled')">Enabled</th>
|
||||
<th x-text="$store.global.t('identity')">Identity (Email)</th>
|
||||
@@ -28,17 +28,14 @@
|
||||
<th class="text-right pr-6" x-text="$store.global.t('operations')">Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-space-border/50">
|
||||
<tbody>
|
||||
<template x-for="acc in $store.data.accounts" :key="acc.email">
|
||||
<tr class="hover:bg-white/5 transition-colors">
|
||||
<tr>
|
||||
<td class="pl-6">
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="sr-only peer" :checked="acc.enabled !== false"
|
||||
<input type="checkbox"
|
||||
class="toggle toggle-success toggle-sm"
|
||||
:checked="acc.enabled !== false"
|
||||
@change="toggleAccount(acc.email, $el.checked)">
|
||||
<div
|
||||
class="w-9 h-5 bg-space-800 border border-space-border peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-neon-purple rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-400 after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-green/20 peer-checked:border-neon-green peer-checked:after:bg-neon-green peer-checked:after:shadow-[0_0_8px_rgba(34,197,94,0.8)]">
|
||||
</div>
|
||||
</label>
|
||||
</td>
|
||||
<td class="font-medium text-gray-200" x-text="acc.email"></td>
|
||||
<td class="font-mono text-xs text-gray-400" x-text="acc.projectId || '-'"></td>
|
||||
@@ -52,11 +49,12 @@
|
||||
<!-- Fix Button -->
|
||||
<button x-show="acc.status === 'invalid'"
|
||||
class="btn btn-xs bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20 border-none mr-1 px-2 font-mono"
|
||||
@click="fixAccount(acc.email)">
|
||||
@click="fixAccount(acc.email)"
|
||||
x-text="$store.global.t('fix')">
|
||||
FIX
|
||||
</button>
|
||||
<button class="btn btn-xs btn-square btn-ghost text-gray-400 hover:text-white"
|
||||
@click="refreshAccount(acc.email)" title="Refresh Token">
|
||||
@click="refreshAccount(acc.email)" :title="$store.global.t('refreshData')">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div x-data="dashboard" class="space-y-6 animate-fade-in">
|
||||
<div x-data="dashboard" class="view-container">
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="stat-title text-gray-500 font-mono text-xs uppercase tracking-wider"
|
||||
x-text="$store.global.t('totalAccounts')"></div>
|
||||
<div class="stat-value text-white font-mono text-3xl" x-text="stats.total"></div>
|
||||
<div class="stat-desc text-gray-600 text-[10px] mt-1">Registered Nodes</div>
|
||||
<div class="stat-desc text-gray-600 text-[10px] mt-1" x-text="$store.global.t('registeredNodes')">Registered Nodes</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -61,8 +61,7 @@
|
||||
<!-- Legend / Info -->
|
||||
<div class="flex flex-col justify-center gap-2 flex-grow min-w-0 z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono">Global Quota</span>
|
||||
<!-- <span class="text-xs font-bold text-neon-purple" x-text="stats.overallHealth + '%'"></span> -->
|
||||
<span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono" x-text="$store.global.t('globalQuota')">Global Quota</span>
|
||||
</div>
|
||||
|
||||
<!-- Custom Legend -->
|
||||
@@ -72,7 +71,6 @@
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-neon-purple shadow-[0_0_4px_rgba(168,85,247,0.4)]"></div>
|
||||
<span>Claude</span>
|
||||
</div>
|
||||
<!-- <span class="font-mono text-gray-600">--</span> -->
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px] text-gray-400">
|
||||
<div class="flex items-center gap-1.5">
|
||||
@@ -88,6 +86,180 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Trend Chart -->
|
||||
<div class="glass-panel p-4 rounded-lg">
|
||||
<!-- Header with Stats and Filter -->
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-neon-purple">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
<h3 class="text-xs font-mono text-gray-400 uppercase tracking-widest" x-text="$store.global.t('requestVolume')">Request Volume</h3>
|
||||
</div>
|
||||
|
||||
<!-- Usage Stats Pills -->
|
||||
<div class="flex gap-2 text-[10px] font-mono">
|
||||
<div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
|
||||
<span class="text-gray-500">Total:</span>
|
||||
<span class="text-white ml-1" x-text="usageStats.total"></span>
|
||||
</div>
|
||||
<div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
|
||||
<span class="text-gray-500">Today:</span>
|
||||
<span class="text-neon-cyan ml-1" x-text="usageStats.today"></span>
|
||||
</div>
|
||||
<div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
|
||||
<span class="text-gray-500">1H:</span>
|
||||
<span class="text-neon-green ml-1" x-text="usageStats.thisHour"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Display Mode Toggle -->
|
||||
<div class="join">
|
||||
<button @click="setDisplayMode('family')"
|
||||
class="join-item btn btn-xs px-3 border-space-border/50 bg-space-800 text-gray-400 hover:text-white transition-all"
|
||||
:class="{'bg-neon-purple/20 text-neon-purple border-neon-purple/50': displayMode === 'family'}"
|
||||
x-text="$store.global.t('family')">
|
||||
</button>
|
||||
<button @click="setDisplayMode('model')"
|
||||
class="join-item btn btn-xs px-3 border-space-border/50 bg-space-800 text-gray-400 hover:text-white transition-all"
|
||||
:class="{'bg-neon-purple/20 text-neon-purple border-neon-purple/50': displayMode === 'model'}"
|
||||
x-text="$store.global.t('model')">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filter Dropdown -->
|
||||
<div class="relative">
|
||||
<button @click="showModelFilter = !showModelFilter"
|
||||
class="flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-gray-400 bg-space-800 border border-space-border/50 rounded hover:border-neon-purple/50 transition-colors">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
<span>Filter (<span x-text="getSelectedCount()"></span>)</span>
|
||||
<svg class="w-3 h-3 transition-transform" :class="{'rotate-180': showModelFilter}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-show="showModelFilter" @click.outside="showModelFilter = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
class="absolute right-0 mt-1 w-72 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden"
|
||||
style="display: none;">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-3 py-2 border-b border-space-border/50 bg-space-800/50">
|
||||
<span class="text-[10px] font-mono text-gray-500 uppercase" x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')"></span>
|
||||
<div class="flex gap-1">
|
||||
<button @click="autoSelectTopN(5)" class="text-[10px] text-neon-purple hover:underline" title="Select Top 5 most used models (24h)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||||
Smart
|
||||
</button>
|
||||
<span class="text-gray-600">|</span>
|
||||
<button @click="selectAll()" class="text-[10px] text-neon-cyan hover:underline" x-text="$store.global.t('all')">All</button>
|
||||
<span class="text-gray-600">|</span>
|
||||
<button @click="deselectAll()" class="text-[10px] text-gray-500 hover:underline" x-text="$store.global.t('none')">None</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hierarchical List -->
|
||||
<div class="max-h-64 overflow-y-auto p-2 space-y-2">
|
||||
<template x-for="family in families" :key="family">
|
||||
<div class="space-y-1">
|
||||
<!-- Family Header -->
|
||||
<label class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer group"
|
||||
x-show="displayMode === 'family'">
|
||||
<input type="checkbox"
|
||||
:checked="isFamilySelected(family)"
|
||||
@change="toggleFamily(family)"
|
||||
class="checkbox checkbox-xs checkbox-primary">
|
||||
<div class="w-2 h-2 rounded-full flex-shrink-0" :style="'background-color:' + getFamilyColor(family)"></div>
|
||||
<span class="text-xs text-gray-300 font-medium capitalize group-hover:text-white" x-text="family"></span>
|
||||
<span class="text-[10px] text-gray-600 ml-auto" x-text="'(' + (modelTree[family] || []).length + ')'"></span>
|
||||
</label>
|
||||
|
||||
<!-- Family Section Header (Model Mode) -->
|
||||
<div class="flex items-center gap-2 px-2 py-1 text-[10px] text-gray-500 uppercase font-bold"
|
||||
x-show="displayMode === 'model'">
|
||||
<div class="w-1.5 h-1.5 rounded-full" :style="'background-color:' + getFamilyColor(family)"></div>
|
||||
<span x-text="family"></span>
|
||||
</div>
|
||||
|
||||
<!-- Models in Family -->
|
||||
<template x-if="displayMode === 'model'">
|
||||
<div class="ml-4 space-y-0.5">
|
||||
<template x-for="(model, modelIndex) in (modelTree[family] || [])" :key="family + ':' + model">
|
||||
<label class="flex items-center gap-2 px-2 py-1 rounded hover:bg-white/5 cursor-pointer group">
|
||||
<input type="checkbox"
|
||||
:checked="isModelSelected(family, model)"
|
||||
@change="toggleModel(family, model)"
|
||||
class="checkbox checkbox-xs checkbox-primary">
|
||||
<div class="w-2 h-2 rounded-full flex-shrink-0" :style="'background-color:' + getModelColor(family, modelIndex)"></div>
|
||||
<span class="text-xs text-gray-400 truncate group-hover:text-white" x-text="model"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="families.length === 0" class="text-center py-4 text-gray-600 text-xs" x-text="$store.global.t('noDataTracked')">
|
||||
No data tracked yet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Legend -->
|
||||
<div class="flex flex-wrap gap-3 mb-3" x-show="displayMode === 'family' ? selectedFamilies.length > 0 : Object.values(selectedModels).flat().length > 0">
|
||||
<!-- Family Mode Legend -->
|
||||
<template x-if="displayMode === 'family'">
|
||||
<template x-for="family in selectedFamilies" :key="family">
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-mono">
|
||||
<div class="w-2 h-2 rounded-full" :style="'background-color:' + getFamilyColor(family)"></div>
|
||||
<span class="text-gray-400 capitalize" x-text="family"></span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<!-- Model Mode Legend -->
|
||||
<template x-if="displayMode === 'model'">
|
||||
<template x-for="family in families" :key="'legend-' + family">
|
||||
<template x-for="(model, modelIndex) in (selectedModels[family] || [])" :key="family + ':' + model">
|
||||
<div class="flex items-center gap-1.5 text-[10px] font-mono">
|
||||
<div class="w-2 h-2 rounded-full" :style="'background-color:' + getModelColor(family, modelIndex)"></div>
|
||||
<span class="text-gray-400" x-text="model"></span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Chart -->
|
||||
<div class="h-48 w-full relative">
|
||||
<canvas id="usageTrendChart"></canvas>
|
||||
<!-- Loading/Empty State -->
|
||||
<div x-show="!stats.hasTrendData" class="absolute inset-0 flex items-center justify-center bg-space-900/50 backdrop-blur-sm z-10" style="display: none;">
|
||||
<div class="text-xs font-mono text-gray-500 flex items-center gap-2">
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
<span x-text="$store.global.t('syncing')">SYNCING...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- No Selection -->
|
||||
<div x-show="stats.hasTrendData && (displayMode === 'family' ? selectedFamilies.length === 0 : Object.values(selectedModels).flat().length === 0)"
|
||||
class="absolute inset-0 flex items-center justify-center bg-space-900/30 z-10">
|
||||
<div class="text-xs font-mono text-gray-500" x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="flex items-center justify-between gap-4 glass-panel p-2 rounded-lg h-16">
|
||||
<div class="flex items-center gap-4 h-full">
|
||||
@@ -141,9 +313,8 @@
|
||||
|
||||
<!-- Main Table -->
|
||||
<div class="glass-panel rounded-xl overflow-hidden min-h-[400px]">
|
||||
<table class="table w-full" :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
|
||||
<thead
|
||||
class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase tracking-wider border-b border-space-border">
|
||||
<table class="standard-table" :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-8 py-3 pl-4" x-text="$store.global.t('stat')">Stat</th>
|
||||
<th class="py-3" x-text="$store.global.t('modelIdentity')">Model Identity</th>
|
||||
@@ -153,9 +324,9 @@
|
||||
Distribution</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-space-border/50 text-sm">
|
||||
<tbody class="text-sm">
|
||||
<template x-for="row in $store.data.quotaRows" :key="row.modelId">
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<tr class="group">
|
||||
<td class="pl-4">
|
||||
<div class="w-2 h-2 rounded-full transition-all duration-500"
|
||||
:class="row.avgQuota > 0 ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'">
|
||||
@@ -204,14 +375,14 @@
|
||||
<td colspan="5" class="h-64 text-center">
|
||||
<div class="flex flex-col items-center justify-center gap-3">
|
||||
<span class="loading loading-bars loading-md text-neon-purple"></span>
|
||||
<span class="text-xs font-mono text-gray-600 animate-pulse">ESTABLISHING
|
||||
<span class="text-xs font-mono text-gray-600 animate-pulse" x-text="$store.global.t('establishingUplink')">ESTABLISHING
|
||||
UPLINK...</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Empty -->
|
||||
<tr x-show="!$store.data.loading && $store.data.quotaRows.length === 0">
|
||||
<td colspan="5" class="h-64 text-center text-gray-600 font-mono text-xs">
|
||||
<td colspan="5" class="h-64 text-center text-gray-600 font-mono text-xs" x-text="$store.global.t('noSignal')">
|
||||
NO SIGNAL DETECTED
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<div x-data="logsViewer" class="h-full flex flex-col glass-panel rounded-xl overflow-hidden border-space-border">
|
||||
<div x-data="logsViewer" class="view-container h-full flex flex-col">
|
||||
<div class="glass-panel rounded-xl overflow-hidden border-space-border flex flex-col flex-1 min-h-0">
|
||||
<!-- Toolbar -->
|
||||
<div class="bg-space-900 flex flex-wrap gap-y-2 justify-between items-center p-2 px-4 border-b border-space-border select-none min-h-[48px]">
|
||||
<div class="bg-space-900 flex flex-wrap gap-y-2 justify-between items-center p-2 px-4 border-b border-space-border select-none min-h-[48px] shrink-0">
|
||||
|
||||
<!-- Left: Decor & Title -->
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
@@ -21,23 +22,23 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" x-model="searchQuery" placeholder="grep logs..."
|
||||
<input type="text" x-model="searchQuery" :placeholder="$store.global.t('grepLogs')"
|
||||
class="w-full h-7 bg-space-950 border border-space-border rounded text-xs font-mono pl-7 pr-2 focus:border-neon-purple focus:outline-none transition-colors placeholder-gray-700 text-gray-300">
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="hidden md:flex gap-3 text-[10px] font-mono font-bold uppercase select-none">
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-blue-400 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.INFO}">
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-info rounded-[2px] w-3 h-3 border-blue-400/50" x-model="filters.INFO"> INFO
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-info rounded-[2px] w-3 h-3 border-blue-400/50" x-model="filters.INFO"> <span x-text="$store.global.t('logLevelInfo')">INFO</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-neon-green opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.SUCCESS}">
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-success rounded-[2px] w-3 h-3 border-neon-green/50" x-model="filters.SUCCESS"> SUCCESS
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-success rounded-[2px] w-3 h-3 border-neon-green/50" x-model="filters.SUCCESS"> <span x-text="$store.global.t('logLevelSuccess')">SUCCESS</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-yellow-400 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.WARN}">
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-warning rounded-[2px] w-3 h-3 border-yellow-400/50" x-model="filters.WARN"> WARN
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-warning rounded-[2px] w-3 h-3 border-yellow-400/50" x-model="filters.WARN"> <span x-text="$store.global.t('logLevelWarn')">WARN</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-red-500 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.ERROR}">
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-error rounded-[2px] w-3 h-3 border-red-500/50" x-model="filters.ERROR"> ERR
|
||||
<input type="checkbox" class="checkbox checkbox-xs checkbox-error rounded-[2px] w-3 h-3 border-red-500/50" x-model="filters.ERROR"> <span x-text="$store.global.t('logLevelError')">ERR</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,7 +62,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Log Content -->
|
||||
<div id="logs-container" class="flex-1 overflow-auto p-4 font-mono text-xs space-y-0.5 bg-[#050505]">
|
||||
<div id="logs-container" class="flex-1 overflow-auto p-4 font-mono text-xs space-y-0.5 bg-space-950">
|
||||
<template x-for="(log, idx) in filteredLogs" :key="idx">
|
||||
<div class="hover:bg-white/5 rounded px-2 py-0.5 -mx-2 break-words leading-tight flex gap-3 group">
|
||||
<span class="text-gray-600 w-16 shrink-0 select-none group-hover:text-gray-500"
|
||||
@@ -78,8 +79,10 @@
|
||||
</template>
|
||||
<!-- Blinking Cursor -->
|
||||
<div class="h-4 w-2 bg-gray-500 animate-pulse mt-1 inline-block" x-show="filteredLogs.length === logs.length && !searchQuery"></div>
|
||||
<div x-show="filteredLogs.length === 0 && logs.length > 0" class="text-gray-600 italic mt-4 text-center">
|
||||
<div x-show="filteredLogs.length === 0 && logs.length > 0" class="text-gray-600 italic mt-4 text-center"
|
||||
x-text="$store.global.t('noLogsMatch')">
|
||||
No logs match filter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,34 @@
|
||||
<div x-data="{ activeTab: 'ui' }" class="glass-panel rounded-xl border border-space-border flex flex-col h-[calc(100vh-140px)] overflow-hidden">
|
||||
<div x-data="{
|
||||
activeTab: 'ui',
|
||||
// Helper function to update model config with authentication
|
||||
async updateModelConfig(modelId, configUpdates) {
|
||||
const store = Alpine.store('global');
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ modelId, config: configUpdates })
|
||||
}, store.webuiPassword);
|
||||
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update model config');
|
||||
}
|
||||
|
||||
// Optimistic update
|
||||
Alpine.store('data').modelConfig[modelId] = {
|
||||
...Alpine.store('data').modelConfig[modelId],
|
||||
...configUpdates
|
||||
};
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
} catch (e) {
|
||||
store.showToast('Failed to update model config: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
}" class="view-container">
|
||||
<!-- Header & Tabs -->
|
||||
<div class="glass-panel rounded-xl border border-space-border flex flex-col overflow-hidden">
|
||||
<div class="bg-space-900/50 border-b border-space-border px-8 pt-8 pb-0 shrink-0">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-bold text-white flex items-center gap-2">
|
||||
@@ -13,30 +42,30 @@
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-6">
|
||||
<div class="flex gap-6 overflow-x-auto">
|
||||
<button @click="activeTab = 'ui'"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
|
||||
:class="activeTab === 'ui' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
|
||||
<span x-text="$store.global.t('tabInterface')">Interface</span>
|
||||
</button>
|
||||
<button @click="activeTab = 'claude'"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
|
||||
:class="activeTab === 'claude' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||||
<span x-text="$store.global.t('tabClaude')">Claude CLI</span>
|
||||
</button>
|
||||
<button @click="activeTab = 'models'"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
|
||||
:class="activeTab === 'models' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||||
<span x-text="$store.global.t('tabModels')">Models</span>
|
||||
</button>
|
||||
<button @click="activeTab = 'server'"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
|
||||
class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
|
||||
:class="activeTab === 'server' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>
|
||||
<span x-text="$store.global.t('tabServer')">Server Info</span>
|
||||
<span x-text="$store.global.t('tabServer')">Server</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,8 +103,7 @@
|
||||
</label>
|
||||
<input type="range" min="10" max="300" class="range range-xs range-primary"
|
||||
x-model="$store.settings.refreshInterval"
|
||||
@change="$store.settings.saveSettings(true)"
|
||||
style="--range-shdw: #a855f7">
|
||||
@change="$store.settings.saveSettings(true)">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>10s</span>
|
||||
<span>300s</span>
|
||||
@@ -87,12 +115,11 @@
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300" x-text="$store.global.t('logBufferSize')">Log Buffer Size</span>
|
||||
<span class="label-text-alt font-mono text-neon-purple"
|
||||
x-text="$store.settings.logLimit + ' lines'"></span>
|
||||
x-text="$store.settings.logLimit + ' ' + $store.global.t('lines')"></span>
|
||||
</label>
|
||||
<input type="range" min="500" max="5000" step="500" class="range range-xs range-secondary"
|
||||
x-model="$store.settings.logLimit"
|
||||
@change="$store.settings.saveSettings(true)"
|
||||
style="--range-shdw: #22c55e">
|
||||
@change="$store.settings.saveSettings(true)">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>500</span>
|
||||
<span>5000</span>
|
||||
@@ -141,12 +168,12 @@
|
||||
<div x-show="activeTab === 'claude'" x-data="claudeConfig" class="space-y-6 max-w-3xl animate-fade-in">
|
||||
<div class="alert bg-space-900/50 border-space-border text-sm shadow-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span class="text-gray-400">Settings below directly modify <code class="text-neon-cyan font-mono">~/.claude/settings.json</code>. Restart Claude CLI to apply.</span>
|
||||
<span class="text-gray-400" x-text="$store.global.t('claudeSettingsAlert')">Settings below directly modify <code class="text-neon-cyan font-mono">~/.claude/settings.json</code>. Restart Claude CLI to apply.</span>
|
||||
</div>
|
||||
|
||||
<!-- Base URL -->
|
||||
<div class="card bg-space-900/30 border border-space-border/50 p-5">
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-2">Proxy Connection</label>
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-2" x-text="$store.global.t('proxyConnection')">Proxy Connection</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<div class="text-[11px] text-gray-400 mb-1 font-mono">ANTHROPIC_BASE_URL</div>
|
||||
@@ -163,18 +190,18 @@
|
||||
|
||||
<!-- Models Selection -->
|
||||
<div class="card bg-space-900/30 border border-space-border/50 p-5">
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-2">Model Selection</label>
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-2" x-text="$store.global.t('modelSelection')">Model Selection</label>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Primary -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider">Primary Model</label>
|
||||
<label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider" x-text="$store.global.t('primaryModel')">Primary Model</label>
|
||||
<div class="relative w-full" x-data="{ open: false }">
|
||||
<input type="text" x-model="config.env.ANTHROPIC_MODEL"
|
||||
@focus="open = true"
|
||||
@click.away="open = false"
|
||||
class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-white focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
|
||||
placeholder="Type to search or select...">
|
||||
:placeholder="$store.global.t('typeToSearch')">
|
||||
<div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
|
||||
|
||||
<ul x-show="open"
|
||||
@@ -185,14 +212,15 @@
|
||||
<template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_MODEL?.toLowerCase() || ''))" :key="modelId">
|
||||
<li>
|
||||
<a @mousedown.prevent="config.env.ANTHROPIC_MODEL = modelId; open = false"
|
||||
class="font-mono text-xs py-2 hover:bg-space-800 hover:text-neon-cyan border-b border-space-border/30 last:border-0"
|
||||
class="font-mono text-xs py-2 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
|
||||
:class="config.env.ANTHROPIC_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
|
||||
<span x-text="modelId"></span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<li x-show="$store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_MODEL?.toLowerCase() || '')).length === 0">
|
||||
<span class="text-xs text-gray-500 italic py-2">No matching models</span>
|
||||
<span class="text-xs text-gray-500 italic py-2" x-text="$store.global.t('noMatchingModels')">No matching models</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -201,13 +229,13 @@
|
||||
|
||||
<!-- Sub-agent -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider">Sub-agent Model</label>
|
||||
<label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider" x-text="$store.global.t('subAgentModel')">Sub-agent Model</label>
|
||||
<div class="relative w-full" x-data="{ open: false }">
|
||||
<input type="text" x-model="config.env.CLAUDE_CODE_SUBAGENT_MODEL"
|
||||
@focus="open = true"
|
||||
@click.away="open = false"
|
||||
class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-white focus:bg-space-800 focus:border-neon-purple pr-8 placeholder-gray-600"
|
||||
placeholder="Type to search or select...">
|
||||
:placeholder="$store.global.t('typeToSearch')">
|
||||
<div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
|
||||
|
||||
<ul x-show="open"
|
||||
@@ -218,14 +246,15 @@
|
||||
<template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.CLAUDE_CODE_SUBAGENT_MODEL?.toLowerCase() || ''))" :key="modelId">
|
||||
<li>
|
||||
<a @mousedown.prevent="config.env.CLAUDE_CODE_SUBAGENT_MODEL = modelId; open = false"
|
||||
class="font-mono text-xs py-2 hover:bg-space-800 hover:text-neon-purple border-b border-space-border/30 last:border-0"
|
||||
class="font-mono text-xs py-2 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
|
||||
:class="config.env.CLAUDE_CODE_SUBAGENT_MODEL === modelId ? 'text-neon-purple bg-space-800/50' : 'text-gray-300'">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
|
||||
<span x-text="modelId"></span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<li x-show="$store.data.models.filter(m => m.toLowerCase().includes(config.env.CLAUDE_CODE_SUBAGENT_MODEL?.toLowerCase() || '')).length === 0">
|
||||
<span class="text-xs text-gray-500 italic py-2">No matching models</span>
|
||||
<span class="text-xs text-gray-500 italic py-2" x-text="$store.global.t('noMatchingModels')">No matching models</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -233,19 +262,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider text-xs font-mono text-gray-600 my-2">ALIAS OVERRIDES</div>
|
||||
<div class="divider text-xs font-mono text-gray-600 my-2" x-text="$store.global.t('aliasOverrides')">ALIAS OVERRIDES</div>
|
||||
|
||||
<!-- Overrides -->
|
||||
<div class="space-y-4">
|
||||
<!-- Opus -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Opus Alias</label>
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('opusAlias')">Opus Alias</label>
|
||||
<div class="relative w-full" x-data="{ open: false }">
|
||||
<input type="text" x-model="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL"
|
||||
@focus="open = true"
|
||||
@click.away="open = false"
|
||||
class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
|
||||
placeholder="Search...">
|
||||
:placeholder="$store.global.t('searchPlaceholder')">
|
||||
<div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
|
||||
<ul x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
@@ -255,8 +284,9 @@
|
||||
<template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_OPUS_MODEL?.toLowerCase() || ''))" :key="modelId">
|
||||
<li>
|
||||
<a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL = modelId; open = false"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
|
||||
:class="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
|
||||
<span x-text="modelId"></span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -266,13 +296,13 @@
|
||||
</div>
|
||||
<!-- Sonnet -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Sonnet Alias</label>
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('sonnetAlias')">Sonnet Alias</label>
|
||||
<div class="relative w-full" x-data="{ open: false }">
|
||||
<input type="text" x-model="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL"
|
||||
@focus="open = true"
|
||||
@click.away="open = false"
|
||||
class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
|
||||
placeholder="Search...">
|
||||
:placeholder="$store.global.t('searchPlaceholder')">
|
||||
<div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
|
||||
<ul x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
@@ -282,8 +312,9 @@
|
||||
<template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_SONNET_MODEL?.toLowerCase() || ''))" :key="modelId">
|
||||
<li>
|
||||
<a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL = modelId; open = false"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
|
||||
:class="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
|
||||
<span x-text="modelId"></span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -293,13 +324,13 @@
|
||||
</div>
|
||||
<!-- Haiku -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Haiku Alias</label>
|
||||
<label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('haikuAlias')">Haiku Alias</label>
|
||||
<div class="relative w-full" x-data="{ open: false }">
|
||||
<input type="text" x-model="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL"
|
||||
@focus="open = true"
|
||||
@click.away="open = false"
|
||||
class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
|
||||
placeholder="Search...">
|
||||
:placeholder="$store.global.t('searchPlaceholder')">
|
||||
<div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
|
||||
<ul x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
@@ -309,8 +340,9 @@
|
||||
<template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL?.toLowerCase() || ''))" :key="modelId">
|
||||
<li>
|
||||
<a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL = modelId; open = false"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
|
||||
class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
|
||||
:class="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
|
||||
<span x-text="modelId"></span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -325,7 +357,7 @@
|
||||
<button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white px-6 gap-2"
|
||||
@click="saveClaudeConfig" :disabled="loading">
|
||||
<svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
|
||||
<span x-show="!loading">Write to Config</span>
|
||||
<span x-show="!loading" x-text="$store.global.t('writeToConfig')">Write to Config</span>
|
||||
<span x-show="loading" class="loading loading-spinner loading-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -334,31 +366,34 @@
|
||||
<!-- Tab 2.5: Models Configuration -->
|
||||
<div x-show="activeTab === 'models'" class="space-y-6 max-w-3xl animate-fade-in">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-400">Manage visibility and ordering of models in the dashboard.</div>
|
||||
<div class="text-sm text-gray-400" x-text="$store.global.t('modelsDesc')">Manage visibility and ordering of models in the dashboard.</div>
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer gap-2">
|
||||
<span class="label-text text-xs text-gray-500">Show Hidden Models</span>
|
||||
<span class="label-text text-xs text-gray-500" x-text="$store.global.t('showHidden')">Show Hidden Models</span>
|
||||
<input type="checkbox" class="toggle toggle-xs toggle-primary" x-model="$store.settings.showHiddenModels" @change="$store.settings.saveSettings(true)">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Models List -->
|
||||
<div class="bg-space-900/30 border border-space-border/50 rounded-lg overflow-hidden">
|
||||
<table class="table table-sm w-full">
|
||||
<thead class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase tracking-wider border-b border-space-border/50">
|
||||
<div class="glass-panel rounded-lg overflow-hidden">
|
||||
<table class="standard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="pl-4">Model ID</th>
|
||||
<th>Alias</th>
|
||||
<th class="text-right pr-4">Actions</th>
|
||||
<th class="pl-4" x-text="$store.global.t('modelId')">Model ID</th>
|
||||
<th x-text="$store.global.t('alias')">Alias</th>
|
||||
<th>Mapping (Target Model ID)</th>
|
||||
<th class="text-right pr-4" x-text="$store.global.t('actions')">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-space-border/30">
|
||||
<tbody>
|
||||
<template x-for="modelId in $store.data.models" :key="modelId">
|
||||
<tr class="hover:bg-white/5 transition-colors group"
|
||||
x-data="{
|
||||
isEditing: false,
|
||||
isEditingAlias: false,
|
||||
isEditingMapping: false,
|
||||
newAlias: '',
|
||||
newMapping: '',
|
||||
// Use getters for reactivity - accessing store directly ensures updates are reflected immediately
|
||||
get config() { return $store.data.modelConfig[modelId] || {} },
|
||||
get isPinned() { return !!this.config.pinned },
|
||||
@@ -369,40 +404,50 @@
|
||||
return (family === 'other' || family === 'unknown');
|
||||
}
|
||||
}"
|
||||
x-init="newAlias = config.alias || ''"
|
||||
x-init="newAlias = config.alias || ''; newMapping = config.mapping || ''"
|
||||
>
|
||||
<td class="pl-4 font-mono text-xs text-gray-300" x-text="modelId"></td>
|
||||
<td>
|
||||
<div x-show="!isEditing" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditing = true; newAlias = config.alias || ''">
|
||||
<div x-show="!isEditingAlias" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditingAlias = true; newAlias = config.alias || ''">
|
||||
<span x-text="config.alias || '-'" :class="{'text-gray-600 italic': !config.alias}"></span>
|
||||
<svg class="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
|
||||
</div>
|
||||
<div x-show="isEditing" class="flex items-center gap-1">
|
||||
<div x-show="isEditingAlias" class="flex items-center gap-1">
|
||||
<input type="text" x-model="newAlias"
|
||||
class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-purple w-32"
|
||||
class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-purple w-24"
|
||||
@keydown.enter="
|
||||
$store.data.modelConfig[modelId] = { ...config, alias: newAlias };
|
||||
fetch('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ modelId, config: { alias: newAlias } })
|
||||
});
|
||||
isEditing = false;
|
||||
$store.data.computeQuotaRows();
|
||||
await updateModelConfig(modelId, { alias: newAlias });
|
||||
isEditingAlias = false;
|
||||
"
|
||||
@keydown.escape="isEditing = false"
|
||||
@keydown.escape="isEditingAlias = false"
|
||||
>
|
||||
<button class="btn btn-xs btn-ghost btn-square text-green-500" @click="
|
||||
$store.data.modelConfig[modelId] = { ...config, alias: newAlias };
|
||||
fetch('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ modelId, config: { alias: newAlias } })
|
||||
});
|
||||
isEditing = false;
|
||||
$store.data.computeQuotaRows();
|
||||
await updateModelConfig(modelId, { alias: newAlias });
|
||||
isEditingAlias = false;
|
||||
"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></button>
|
||||
<button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditing = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
<button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditingAlias = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div x-show="!isEditingMapping" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditingMapping = true; newMapping = config.mapping || ''">
|
||||
<span x-text="config.mapping || '-'" :class="{'text-gray-600 italic': !config.mapping}"></span>
|
||||
<svg class="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
|
||||
</div>
|
||||
<div x-show="isEditingMapping" class="flex items-center gap-1">
|
||||
<input type="text" x-model="newMapping"
|
||||
class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-cyan w-32"
|
||||
placeholder="e.g. claude-3-opus-20240229"
|
||||
@keydown.enter="
|
||||
await updateModelConfig(modelId, { mapping: newMapping });
|
||||
isEditingMapping = false;
|
||||
"
|
||||
@keydown.escape="isEditingMapping = false"
|
||||
>
|
||||
<button class="btn btn-xs btn-ghost btn-square text-green-500" @click="
|
||||
await updateModelConfig(modelId, { mapping: newMapping });
|
||||
isEditingMapping = false;
|
||||
"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></button>
|
||||
<button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditingMapping = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right pr-4">
|
||||
@@ -410,18 +455,8 @@
|
||||
<!-- Pin Toggle -->
|
||||
<button class="btn btn-xs btn-circle transition-colors"
|
||||
:class="isPinned ? 'bg-neon-purple/20 text-neon-purple border-neon-purple/50 hover:bg-neon-purple/30' : 'btn-ghost text-gray-600 hover:text-gray-300'"
|
||||
@click="
|
||||
const newVal = !isPinned;
|
||||
// Optimistic update
|
||||
$store.data.modelConfig[modelId] = { ...config, pinned: newVal };
|
||||
fetch('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ modelId, config: { pinned: newVal } })
|
||||
});
|
||||
$store.data.computeQuotaRows();
|
||||
"
|
||||
title="Pin to top">
|
||||
@click="await updateModelConfig(modelId, { pinned: !isPinned })"
|
||||
:title="$store.global.t('pinToTop')">
|
||||
<!-- Solid Icon when Pinned -->
|
||||
<svg x-show="isPinned" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
|
||||
@@ -435,19 +470,8 @@
|
||||
<!-- Hide Toggle -->
|
||||
<button class="btn btn-xs btn-circle transition-colors"
|
||||
:class="isHidden ? 'bg-red-500/20 text-red-400 border-red-500/50 hover:bg-red-500/30' : 'btn-ghost text-gray-400 hover:text-white'"
|
||||
@click="
|
||||
const currentHidden = isHidden;
|
||||
const newVal = !currentHidden;
|
||||
// Optimistic update
|
||||
$store.data.modelConfig[modelId] = { ...config, hidden: newVal };
|
||||
fetch('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ modelId, config: { hidden: newVal } })
|
||||
});
|
||||
$store.data.computeQuotaRows();
|
||||
"
|
||||
title="Toggle Visibility">
|
||||
@click="await updateModelConfig(modelId, { hidden: !isHidden })"
|
||||
:title="$store.global.t('toggleVisibility')">
|
||||
<svg x-show="!isHidden" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
@@ -462,7 +486,7 @@
|
||||
</template>
|
||||
<!-- Empty State -->
|
||||
<tr x-show="!$store.data.models.length">
|
||||
<td colspan="3" class="text-center py-8 text-gray-600 text-xs font-mono">
|
||||
<td colspan="3" class="text-center py-8 text-gray-600 text-xs font-mono" x-text="$store.global.t('noModels')">
|
||||
NO MODELS DETECTED
|
||||
</td>
|
||||
</tr>
|
||||
@@ -471,49 +495,339 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Server Info -->
|
||||
<div x-show="activeTab === 'server'" class="space-y-6 max-w-2xl animate-fade-in">
|
||||
<!-- Tab 3: Server Info & Configuration -->
|
||||
<div x-show="activeTab === 'server'" x-data="{
|
||||
serverConfig: {},
|
||||
loading: false,
|
||||
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);
|
||||
}
|
||||
},
|
||||
async saveServerConfig() {
|
||||
this.loading = true;
|
||||
const store = Alpine.store('global');
|
||||
// Ensure all numeric fields are properly typed
|
||||
const payload = {
|
||||
debug: !!this.serverConfig.debug,
|
||||
maxRetries: parseInt(this.serverConfig.maxRetries || 5),
|
||||
retryBaseMs: parseInt(this.serverConfig.retryBaseMs || 1000),
|
||||
retryMaxMs: parseInt(this.serverConfig.retryMaxMs || 30000),
|
||||
persistTokenCache: !!this.serverConfig.persistTokenCache,
|
||||
defaultCooldownMs: parseInt(this.serverConfig.defaultCooldownMs || 60000),
|
||||
maxWaitBeforeErrorMs: parseInt(this.serverConfig.maxWaitBeforeErrorMs || 120000)
|
||||
};
|
||||
|
||||
try {
|
||||
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;
|
||||
|
||||
if (!response.ok) throw new Error('Failed to save config');
|
||||
store.showToast(store.t('configSaved'), 'success');
|
||||
await this.fetchServerConfig();
|
||||
} catch (e) {
|
||||
store.showToast('Failed to save config: ' + e.message, 'error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}" x-init="$watch('activeTab', value => { if(value === 'server') fetchServerConfig() }); fetchServerConfig()" class="space-y-6 max-w-2xl animate-fade-in">
|
||||
|
||||
<!-- Read-Only Info & System Status -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="text-xs uppercase text-gray-500 font-bold tracking-wider">System Information</div>
|
||||
<button @click="fetchServerConfig()" class="btn btn-xs btn-ghost text-neon-cyan gap-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 bg-space-900/30 p-6 rounded-lg border border-space-border/50">
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-1">Port</div>
|
||||
<div class="text-xs text-gray-500 mb-1" x-text="$store.global.t('port')">Port</div>
|
||||
<div class="text-sm font-mono text-neon-cyan" x-text="$store.settings.port || '-'"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-1">UI Version</div>
|
||||
<div class="text-xs text-gray-500 mb-1" x-text="$store.global.t('uiVersion')">UI Version</div>
|
||||
<div class="text-sm font-mono text-neon-cyan" x-text="$store.global.version"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-1">Debug Mode</div>
|
||||
<div class="text-sm text-gray-300">Enabled (See Logs)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-1">Environment</div>
|
||||
<div class="text-sm font-mono text-gray-300">Production</div>
|
||||
|
||||
<div class="divider border-space-border/50 text-xs uppercase text-gray-500 font-semibold">Runtime Configuration</div>
|
||||
|
||||
<!-- Editable Configuration -->
|
||||
<div class="space-y-6">
|
||||
<!-- Debug Mode -->
|
||||
<div class="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-space-border cursor-pointer group"
|
||||
:class="serverConfig.debug ? 'border-neon-purple/50 bg-neon-purple/5 shadow-[0_0_15px_rgba(168,85,247,0.1)]' : 'border-space-border/50'"
|
||||
@click="serverConfig.debug = !serverConfig.debug">
|
||||
<label class="label cursor-pointer pointer-events-none">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="label-text font-medium transition-colors"
|
||||
:class="serverConfig.debug ? 'text-neon-purple' : 'text-gray-300'">Debug Mode</span>
|
||||
<span class="text-xs text-gray-500">Enable detailed logging (See Logs tab)</span>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle toggle-primary" x-model="serverConfig.debug">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Retry Configuration -->
|
||||
<div class="card bg-space-900/30 border border-space-border/50 p-5">
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-3">Network Retry Settings</label>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Max Retries -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Max Retries</span>
|
||||
<span class="label-text-alt font-mono text-neon-purple" x-text="serverConfig.maxRetries || 5"></span>
|
||||
</label>
|
||||
<input type="range" min="1" max="20" class="range range-xs range-primary"
|
||||
x-model="serverConfig.maxRetries">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>1</span>
|
||||
<span>20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retry Base Ms -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Retry Base Delay (ms)</span>
|
||||
<span class="label-text-alt font-mono text-neon-cyan" x-text="(serverConfig.retryBaseMs || 1000) + 'ms'"></span>
|
||||
</label>
|
||||
<input type="range" min="100" max="10000" step="100" class="range range-xs range-secondary"
|
||||
x-model="serverConfig.retryBaseMs">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>100ms</span>
|
||||
<span>10s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retry Max Ms -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Retry Max Delay (ms)</span>
|
||||
<span class="label-text-alt font-mono text-neon-green" x-text="(serverConfig.retryMaxMs || 30000) + 'ms'"></span>
|
||||
</label>
|
||||
<input type="range" min="1000" max="120000" step="1000" class="range range-xs range-accent"
|
||||
x-model="serverConfig.retryMaxMs">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>1s</span>
|
||||
<span>120s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Cache Persistence -->
|
||||
<div class="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-space-border cursor-pointer group"
|
||||
:class="serverConfig.persistTokenCache ? 'border-neon-green/50 bg-neon-green/5 shadow-[0_0_15px_rgba(34,197,94,0.1)]' : 'border-space-border/50'"
|
||||
@click="serverConfig.persistTokenCache = !serverConfig.persistTokenCache">
|
||||
<label class="label cursor-pointer pointer-events-none">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="label-text font-medium transition-colors"
|
||||
:class="serverConfig.persistTokenCache ? 'text-neon-green' : 'text-gray-300'">Persist Token Cache</span>
|
||||
<span class="text-xs text-gray-500">Save OAuth tokens to disk for faster restarts</span>
|
||||
</div>
|
||||
<input type="checkbox" class="toggle toggle-secondary" x-model="serverConfig.persistTokenCache">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Account Cooldown & Limits -->
|
||||
<div class="card bg-space-900/30 border border-space-border/50 p-5">
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-3">Account Rate Limiting & Timeouts</label>
|
||||
<div class="space-y-6">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Default Cooldown Time</span>
|
||||
<span class="label-text-alt font-mono text-neon-cyan" x-text="Math.round((serverConfig.defaultCooldownMs || 60000) / 1000) + 's'"></span>
|
||||
</label>
|
||||
<input type="range" min="1000" max="300000" step="1000" class="range range-xs range-accent"
|
||||
x-model="serverConfig.defaultCooldownMs">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>1s</span>
|
||||
<span>5min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Max Wait Threshold (Sticky)</span>
|
||||
<span class="label-text-alt font-mono text-neon-purple" x-text="Math.round((serverConfig.maxWaitBeforeErrorMs || 120000) / 1000) + 's'"></span>
|
||||
</label>
|
||||
<input type="range" min="0" max="600000" step="10000" class="range range-xs range-primary"
|
||||
x-model="serverConfig.maxWaitBeforeErrorMs">
|
||||
<div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
|
||||
<span>0s</span>
|
||||
<span>10min</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-600 mt-2">Maximum time to wait for a sticky account to reset before failing or switching.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="flex justify-end pt-2">
|
||||
<button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white px-6 gap-2"
|
||||
@click="saveServerConfig()" :disabled="loading">
|
||||
<svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
|
||||
<span x-show="!loading">Save Configuration</span>
|
||||
<span x-show="loading" class="loading loading-spinner loading-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert bg-blue-500/10 border-blue-500/20 text-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-blue-400 shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<div class="text-blue-200">
|
||||
Server settings are read-only. Modify <code class="font-mono bg-blue-500/20 px-1 rounded">config.json</code> or <code class="font-mono bg-blue-500/20 px-1 rounded">.env</code> and restart the server to change.
|
||||
Some changes may require server restart. Config is saved to <code class="font-mono bg-blue-500/20 px-1 rounded">~/.config/antigravity-proxy/config.json</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Reload -->
|
||||
<!-- Security & Advanced -->
|
||||
<div class="pt-6 border-t border-space-border/30">
|
||||
<h4 class="text-sm font-bold text-white mb-4">Danger Zone / Advanced</h4>
|
||||
<h4 class="text-sm font-bold text-white mb-4" x-text="$store.global.t('dangerZone')">Danger Zone / Advanced</h4>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Change Password -->
|
||||
<div class="flex items-center justify-between p-4 border border-space-border/50 rounded-lg bg-space-900/20"
|
||||
x-data="{
|
||||
showPasswordDialog: false,
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
async changePassword() {
|
||||
const store = Alpine.store('global');
|
||||
if (this.newPassword !== this.confirmPassword) {
|
||||
store.showToast('Passwords do not match', 'error');
|
||||
return;
|
||||
}
|
||||
if (this.newPassword.length < 6) {
|
||||
store.showToast('Password must be at least 6 characters', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { response, newPassword: updatedPassword } = await window.utils.request('/api/config/password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
oldPassword: this.oldPassword,
|
||||
newPassword: this.newPassword
|
||||
})
|
||||
}, store.webuiPassword);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Failed to change password');
|
||||
}
|
||||
|
||||
// Update stored password
|
||||
store.webuiPassword = this.newPassword;
|
||||
store.showToast('Password changed successfully', 'success');
|
||||
this.showPasswordDialog = false;
|
||||
this.oldPassword = '';
|
||||
this.newPassword = '';
|
||||
this.confirmPassword = '';
|
||||
} catch (e) {
|
||||
store.showToast('Failed to change password: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
}">
|
||||
<div>
|
||||
<div class="font-medium text-gray-300 text-sm">Change WebUI Password</div>
|
||||
<div class="text-xs text-gray-500">Update the password for accessing this dashboard</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline border-space-border hover:bg-yellow-500 hover:text-black hover:border-yellow-500 text-gray-400"
|
||||
@click="showPasswordDialog = true">
|
||||
Change Password
|
||||
</button>
|
||||
|
||||
<!-- Password Dialog -->
|
||||
<div x-show="showPasswordDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]" @click.self="showPasswordDialog = false">
|
||||
<div class="bg-space-900 border border-space-border rounded-lg p-6 max-w-md w-full mx-4" @click.stop>
|
||||
<h3 class="text-lg font-bold text-white mb-4">Change WebUI Password</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Current Password</span>
|
||||
</label>
|
||||
<input type="password" x-model="oldPassword"
|
||||
class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
|
||||
placeholder="Leave empty if no password set">
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">New Password</span>
|
||||
</label>
|
||||
<input type="password" x-model="newPassword"
|
||||
class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
|
||||
placeholder="At least 6 characters">
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300">Confirm New Password</span>
|
||||
</label>
|
||||
<input type="password" x-model="confirmPassword"
|
||||
class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
|
||||
placeholder="Re-enter new password"
|
||||
@keydown.enter="changePassword()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<button class="btn btn-sm btn-ghost text-gray-400" @click="showPasswordDialog = false; oldPassword = ''; newPassword = ''; confirmPassword = ''">Cancel</button>
|
||||
<button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white" @click="changePassword()">
|
||||
Change Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reload Config -->
|
||||
<div class="flex items-center justify-between p-4 border border-space-border/50 rounded-lg bg-space-900/20">
|
||||
<div>
|
||||
<div class="font-medium text-gray-300 text-sm">Reload Account Config</div>
|
||||
<div class="text-xs text-gray-500">Force reload accounts.json from disk</div>
|
||||
<div class="font-medium text-gray-300 text-sm" x-text="$store.global.t('reloadConfigTitle')">Reload Account Config</div>
|
||||
<div class="text-xs text-gray-500" x-text="$store.global.t('reloadConfigDesc')">Force reload accounts.json from disk</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline border-space-border hover:bg-white hover:text-black hover:border-white text-gray-400"
|
||||
@click="Alpine.store('global').showToast('Reloading...', 'info'); fetch('/api/accounts/reload', {method: 'POST'}).then(() => Alpine.store('global').showToast('Reloaded', 'success'))">
|
||||
@click="async () => {
|
||||
const store = Alpine.store('global');
|
||||
store.showToast(store.t('reloading'), 'info');
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/accounts/reload', { method: 'POST' }, store.webuiPassword);
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
if (response.ok) {
|
||||
store.showToast(store.t('reloaded'), 'success');
|
||||
Alpine.store('data').fetchData();
|
||||
} else {
|
||||
throw new Error('Failed to reload');
|
||||
}
|
||||
} catch (e) {
|
||||
store.showToast(store.t('reloadFailed') + ': ' + e.message, 'error');
|
||||
}
|
||||
}"
|
||||
x-text="$store.global.t('reload')">
|
||||
Reload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,6 +39,9 @@ export function getAvailableAccounts(accounts, modelId = null) {
|
||||
return accounts.filter(acc => {
|
||||
if (acc.isInvalid) return false;
|
||||
|
||||
// WebUI: Skip disabled accounts
|
||||
if (acc.enabled === false) return false;
|
||||
|
||||
if (modelId && acc.modelRateLimits && acc.modelRateLimits[modelId]) {
|
||||
const limit = acc.modelRateLimits[modelId];
|
||||
if (limit.isRateLimited && limit.resetTime > Date.now()) {
|
||||
|
||||
@@ -19,6 +19,9 @@ import { clearExpiredLimits, getAvailableAccounts } from './rate-limits.js';
|
||||
function isAccountUsable(account, modelId) {
|
||||
if (!account || account.isInvalid) return false;
|
||||
|
||||
// WebUI: Skip disabled accounts
|
||||
if (account.enabled === false) return false;
|
||||
|
||||
if (modelId && account.modelRateLimits && account.modelRateLimits[modelId]) {
|
||||
const limit = account.modelRateLimits[modelId];
|
||||
if (limit.isRateLimited && limit.resetTime > Date.now()) {
|
||||
|
||||
@@ -27,6 +27,7 @@ export async function loadAccounts(configPath = ACCOUNT_CONFIG_PATH) {
|
||||
const accounts = (config.accounts || []).map(acc => ({
|
||||
...acc,
|
||||
lastUsed: acc.lastUsed || null,
|
||||
enabled: acc.enabled !== false, // Default to true if not specified
|
||||
// Reset invalid flag on startup - give accounts a fresh chance to refresh
|
||||
isInvalid: false,
|
||||
invalidReason: null,
|
||||
@@ -107,6 +108,7 @@ export async function saveAccounts(configPath, accounts, settings, activeIndex)
|
||||
accounts: accounts.map(acc => ({
|
||||
email: acc.email,
|
||||
source: acc.source,
|
||||
enabled: acc.enabled !== false, // Persist enabled state
|
||||
dbPath: acc.dbPath || null,
|
||||
refreshToken: acc.source === 'oauth' ? acc.refreshToken : undefined,
|
||||
apiKey: acc.source === 'manual' ? acc.apiKey : undefined,
|
||||
|
||||
@@ -12,6 +12,8 @@ const DEFAULT_CONFIG = {
|
||||
retryBaseMs: 1000,
|
||||
retryMaxMs: 30000,
|
||||
persistTokenCache: false,
|
||||
defaultCooldownMs: 60000, // 1 minute
|
||||
maxWaitBeforeErrorMs: 120000, // 2 minutes
|
||||
modelMapping: {}
|
||||
};
|
||||
|
||||
|
||||
175
src/modules/usage-stats.js
Normal file
175
src/modules/usage-stats.js
Normal file
@@ -0,0 +1,175 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
// Persistence path
|
||||
const DATA_DIR = path.join(process.cwd(), 'data');
|
||||
const HISTORY_FILE = path.join(DATA_DIR, 'usage-history.json');
|
||||
|
||||
// In-memory storage
|
||||
// Structure: { "YYYY-MM-DDTHH:00:00.000Z": { "claude": { "model-name": count, "_subtotal": count }, "_total": count } }
|
||||
let history = {};
|
||||
let isDirty = false;
|
||||
|
||||
/**
|
||||
* Extract model family from model ID
|
||||
* @param {string} modelId - The model identifier (e.g., "claude-opus-4-5-thinking")
|
||||
* @returns {string} The family name (claude, gemini, or other)
|
||||
*/
|
||||
function getFamily(modelId) {
|
||||
const lower = (modelId || '').toLowerCase();
|
||||
if (lower.includes('claude')) return 'claude';
|
||||
if (lower.includes('gemini')) return 'gemini';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract short model name (without family prefix)
|
||||
* @param {string} modelId - The model identifier
|
||||
* @param {string} family - The model family
|
||||
* @returns {string} Short model name
|
||||
*/
|
||||
function getShortName(modelId, family) {
|
||||
if (family === 'other') return modelId;
|
||||
// Remove family prefix (e.g., "claude-opus-4-5" -> "opus-4-5")
|
||||
return modelId.replace(new RegExp(`^${family}-`, 'i'), '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure data directory exists and load history
|
||||
*/
|
||||
function load() {
|
||||
try {
|
||||
if (!fs.existsSync(DATA_DIR)) {
|
||||
fs.mkdirSync(DATA_DIR, { recursive: true });
|
||||
}
|
||||
if (fs.existsSync(HISTORY_FILE)) {
|
||||
const data = fs.readFileSync(HISTORY_FILE, 'utf8');
|
||||
history = JSON.parse(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[UsageStats] Failed to load history:', err);
|
||||
history = {};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save history to disk
|
||||
*/
|
||||
function save() {
|
||||
if (!isDirty) return;
|
||||
try {
|
||||
fs.writeFileSync(HISTORY_FILE, JSON.stringify(history, null, 2));
|
||||
isDirty = false;
|
||||
} catch (err) {
|
||||
console.error('[UsageStats] Failed to save history:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prune old data (keep last 30 days)
|
||||
*/
|
||||
function prune() {
|
||||
const now = new Date();
|
||||
const cutoff = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
|
||||
|
||||
let pruned = false;
|
||||
Object.keys(history).forEach(key => {
|
||||
if (new Date(key) < cutoff) {
|
||||
delete history[key];
|
||||
pruned = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (pruned) isDirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Track a request by model ID using hierarchical structure
|
||||
* @param {string} modelId - The specific model identifier
|
||||
*/
|
||||
function track(modelId) {
|
||||
const now = new Date();
|
||||
// Round down to nearest hour
|
||||
now.setMinutes(0, 0, 0);
|
||||
const key = now.toISOString();
|
||||
|
||||
if (!history[key]) {
|
||||
history[key] = { _total: 0 };
|
||||
}
|
||||
|
||||
const hourData = history[key];
|
||||
const family = getFamily(modelId);
|
||||
const shortName = getShortName(modelId, family);
|
||||
|
||||
// Initialize family object if needed
|
||||
if (!hourData[family]) {
|
||||
hourData[family] = { _subtotal: 0 };
|
||||
}
|
||||
|
||||
// Increment model-specific count
|
||||
hourData[family][shortName] = (hourData[family][shortName] || 0) + 1;
|
||||
|
||||
// Increment family subtotal
|
||||
hourData[family]._subtotal = (hourData[family]._subtotal || 0) + 1;
|
||||
|
||||
// Increment global total
|
||||
hourData._total = (hourData._total || 0) + 1;
|
||||
|
||||
isDirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup Express Middleware
|
||||
* @param {import('express').Application} app
|
||||
*/
|
||||
function setupMiddleware(app) {
|
||||
load();
|
||||
|
||||
// Auto-save every minute
|
||||
setInterval(() => {
|
||||
save();
|
||||
prune();
|
||||
}, 60 * 1000);
|
||||
|
||||
// Save on exit
|
||||
process.on('SIGINT', () => { save(); process.exit(); });
|
||||
process.on('SIGTERM', () => { save(); process.exit(); });
|
||||
|
||||
// Request interceptor
|
||||
// Track both Anthropic (/v1/messages) and OpenAI compatible (/v1/chat/completions) endpoints
|
||||
const TRACKED_PATHS = ['/v1/messages', '/v1/chat/completions'];
|
||||
|
||||
app.use((req, res, next) => {
|
||||
if (req.method === 'POST' && TRACKED_PATHS.includes(req.path)) {
|
||||
const model = req.body?.model;
|
||||
if (model) {
|
||||
track(model);
|
||||
}
|
||||
}
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup API Routes
|
||||
* @param {import('express').Application} app
|
||||
*/
|
||||
function setupRoutes(app) {
|
||||
app.get('/api/stats/history', (req, res) => {
|
||||
// Sort keys to ensure chronological order
|
||||
const sortedKeys = Object.keys(history).sort();
|
||||
const sortedData = {};
|
||||
sortedKeys.forEach(key => {
|
||||
sortedData[key] = history[key];
|
||||
});
|
||||
res.json(sortedData);
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
setupMiddleware,
|
||||
setupRoutes,
|
||||
track,
|
||||
getFamily,
|
||||
getShortName
|
||||
};
|
||||
@@ -10,6 +10,7 @@ import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { sendMessage, sendMessageStream, listModels, getModelQuotas } from './cloudcode/index.js';
|
||||
import { mountWebUI } from './webui/index.js';
|
||||
import { config } from './config.js';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
@@ -18,6 +19,7 @@ import { REQUEST_BODY_LIMIT } from './constants.js';
|
||||
import { AccountManager } from './account-manager/index.js';
|
||||
import { formatDuration } from './utils/helpers.js';
|
||||
import { logger } from './utils/logger.js';
|
||||
import usageStats from './modules/usage-stats.js';
|
||||
|
||||
// Parse fallback flag directly from command line args to avoid circular dependency
|
||||
const args = process.argv.slice(2);
|
||||
@@ -63,6 +65,9 @@ async function ensureInitialized() {
|
||||
app.use(cors());
|
||||
app.use(express.json({ limit: REQUEST_BODY_LIMIT }));
|
||||
|
||||
// Setup usage statistics middleware
|
||||
usageStats.setupMiddleware(app);
|
||||
|
||||
// Mount WebUI (optional web interface for account management)
|
||||
mountWebUI(app, __dirname, accountManager);
|
||||
|
||||
@@ -423,6 +428,7 @@ app.get('/account-limits', async (req, res) => {
|
||||
timestamp: new Date().toLocaleString(),
|
||||
totalAccounts: allAccounts.length,
|
||||
models: sortedModels,
|
||||
modelConfig: config.modelMapping || {},
|
||||
accounts: accountLimits.map(acc => ({
|
||||
email: acc.email,
|
||||
status: acc.status,
|
||||
@@ -535,23 +541,19 @@ app.post('/v1/messages', async (req, res) => {
|
||||
await ensureInitialized();
|
||||
|
||||
|
||||
const {
|
||||
model,
|
||||
messages,
|
||||
max_tokens,
|
||||
stream,
|
||||
system,
|
||||
tools,
|
||||
tool_choice,
|
||||
thinking,
|
||||
top_p,
|
||||
top_k,
|
||||
temperature
|
||||
} = req.body;
|
||||
// Resolve model mapping if configured
|
||||
let requestedModel = model || 'claude-3-5-sonnet-20241022';
|
||||
const modelMapping = config.modelMapping || {};
|
||||
if (modelMapping[requestedModel] && modelMapping[requestedModel].mapping) {
|
||||
const targetModel = modelMapping[requestedModel].mapping;
|
||||
logger.info(`[Server] Mapping model ${requestedModel} -> ${targetModel}`);
|
||||
requestedModel = targetModel;
|
||||
}
|
||||
|
||||
const modelId = requestedModel;
|
||||
|
||||
// Optimistic Retry: If ALL accounts are rate-limited for this model, reset them to force a fresh check.
|
||||
// If we have some available accounts, we try them first.
|
||||
const modelId = model || 'claude-3-5-sonnet-20241022';
|
||||
if (accountManager.isAllRateLimited(modelId)) {
|
||||
logger.warn(`[Server] All accounts rate-limited for ${modelId}. Resetting state for optimistic retry.`);
|
||||
accountManager.resetAllRateLimits();
|
||||
@@ -570,7 +572,7 @@ app.post('/v1/messages', async (req, res) => {
|
||||
|
||||
// Build the request object
|
||||
const request = {
|
||||
model: model || 'claude-3-5-sonnet-20241022',
|
||||
model: modelId,
|
||||
messages,
|
||||
max_tokens: max_tokens || 4096,
|
||||
stream,
|
||||
@@ -676,6 +678,8 @@ app.post('/v1/messages', async (req, res) => {
|
||||
/**
|
||||
* Catch-all for unsupported endpoints
|
||||
*/
|
||||
usageStats.setupRoutes(app);
|
||||
|
||||
app.use('*', (req, res) => {
|
||||
if (logger.isDebugEnabled) {
|
||||
logger.debug(`[API] 404 Not Found: ${req.method} ${req.originalUrl}`);
|
||||
|
||||
@@ -15,14 +15,87 @@
|
||||
import path from 'path';
|
||||
import express from 'express';
|
||||
import { getPublicConfig, saveConfig, config } from '../config.js';
|
||||
import { DEFAULT_PORT } from '../constants.js';
|
||||
import { DEFAULT_PORT, ACCOUNT_CONFIG_PATH } 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';
|
||||
import { loadAccounts, saveAccounts } from '../account-manager/storage.js';
|
||||
|
||||
// OAuth state storage (state -> { verifier, timestamp })
|
||||
const pendingOAuthStates = new Map();
|
||||
|
||||
/**
|
||||
* WebUI Helper Functions - Direct account manipulation
|
||||
* These functions work around AccountManager's limited API by directly
|
||||
* manipulating the accounts.json config file (non-invasive approach for PR)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Set account enabled/disabled state
|
||||
*/
|
||||
async function setAccountEnabled(email, enabled) {
|
||||
const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
|
||||
const account = accounts.find(a => a.email === email);
|
||||
if (!account) {
|
||||
throw new Error(`Account ${email} not found`);
|
||||
}
|
||||
account.enabled = enabled;
|
||||
await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, activeIndex);
|
||||
logger.info(`[WebUI] Account ${email} ${enabled ? 'enabled' : 'disabled'}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove account from config
|
||||
*/
|
||||
async function removeAccount(email) {
|
||||
const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
|
||||
const index = accounts.findIndex(a => a.email === email);
|
||||
if (index === -1) {
|
||||
throw new Error(`Account ${email} not found`);
|
||||
}
|
||||
accounts.splice(index, 1);
|
||||
// Adjust activeIndex if needed
|
||||
const newActiveIndex = activeIndex >= accounts.length ? Math.max(0, accounts.length - 1) : activeIndex;
|
||||
await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, newActiveIndex);
|
||||
logger.info(`[WebUI] Account ${email} removed`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add new account to config
|
||||
*/
|
||||
async function addAccount(accountData) {
|
||||
const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
|
||||
|
||||
// Check if account already exists
|
||||
const existingIndex = accounts.findIndex(a => a.email === accountData.email);
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing account
|
||||
accounts[existingIndex] = {
|
||||
...accounts[existingIndex],
|
||||
...accountData,
|
||||
enabled: true,
|
||||
isInvalid: false,
|
||||
invalidReason: null,
|
||||
addedAt: accounts[existingIndex].addedAt || new Date().toISOString()
|
||||
};
|
||||
logger.info(`[WebUI] Account ${accountData.email} updated`);
|
||||
} else {
|
||||
// Add new account
|
||||
accounts.push({
|
||||
...accountData,
|
||||
enabled: true,
|
||||
isInvalid: false,
|
||||
invalidReason: null,
|
||||
modelRateLimits: {},
|
||||
lastUsed: null,
|
||||
addedAt: new Date().toISOString()
|
||||
});
|
||||
logger.info(`[WebUI] Account ${accountData.email} added`);
|
||||
}
|
||||
|
||||
await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, activeIndex);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auth Middleware - Optional password protection for WebUI
|
||||
* Password can be set via WEBUI_PASSWORD env var or config.json
|
||||
@@ -114,7 +187,11 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
return res.status(400).json({ status: 'error', error: 'enabled must be a boolean' });
|
||||
}
|
||||
|
||||
accountManager.setAccountEnabled(email, enabled);
|
||||
await setAccountEnabled(email, enabled);
|
||||
|
||||
// Reload AccountManager to pick up changes
|
||||
await accountManager.initialize();
|
||||
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: `Account ${email} ${enabled ? 'enabled' : 'disabled'}`
|
||||
@@ -130,7 +207,11 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
app.delete('/api/accounts/:email', async (req, res) => {
|
||||
try {
|
||||
const { email } = req.params;
|
||||
accountManager.removeAccount(email);
|
||||
await removeAccount(email);
|
||||
|
||||
// Reload AccountManager to pick up changes
|
||||
await accountManager.initialize();
|
||||
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: `Account ${email} removed`
|
||||
@@ -145,7 +226,9 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
*/
|
||||
app.post('/api/accounts/reload', async (req, res) => {
|
||||
try {
|
||||
await accountManager.reloadAccounts();
|
||||
// Reload AccountManager from disk
|
||||
await accountManager.initialize();
|
||||
|
||||
const status = accountManager.getStatus();
|
||||
res.json({
|
||||
status: 'ok',
|
||||
@@ -183,7 +266,7 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
*/
|
||||
app.post('/api/config', (req, res) => {
|
||||
try {
|
||||
const { debug, logLevel, maxRetries, retryBaseMs, retryMaxMs, persistTokenCache } = req.body;
|
||||
const { debug, logLevel, maxRetries, retryBaseMs, retryMaxMs, persistTokenCache, defaultCooldownMs, maxWaitBeforeErrorMs } = req.body;
|
||||
|
||||
// Only allow updating specific fields (security)
|
||||
const updates = {};
|
||||
@@ -203,6 +286,12 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
if (typeof persistTokenCache === 'boolean') {
|
||||
updates.persistTokenCache = persistTokenCache;
|
||||
}
|
||||
if (typeof defaultCooldownMs === 'number' && defaultCooldownMs >= 1000 && defaultCooldownMs <= 300000) {
|
||||
updates.defaultCooldownMs = defaultCooldownMs;
|
||||
}
|
||||
if (typeof maxWaitBeforeErrorMs === 'number' && maxWaitBeforeErrorMs >= 0 && maxWaitBeforeErrorMs <= 600000) {
|
||||
updates.maxWaitBeforeErrorMs = maxWaitBeforeErrorMs;
|
||||
}
|
||||
|
||||
if (Object.keys(updates).length === 0) {
|
||||
return res.status(400).json({
|
||||
@@ -232,6 +321,48 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* POST /api/config/password - Change WebUI password
|
||||
*/
|
||||
app.post('/api/config/password', (req, res) => {
|
||||
try {
|
||||
const { oldPassword, newPassword } = req.body;
|
||||
|
||||
// Validate input
|
||||
if (!newPassword || typeof newPassword !== 'string') {
|
||||
return res.status(400).json({
|
||||
status: 'error',
|
||||
error: 'New password is required'
|
||||
});
|
||||
}
|
||||
|
||||
// If current password exists, verify old password
|
||||
if (config.webuiPassword && config.webuiPassword !== oldPassword) {
|
||||
return res.status(403).json({
|
||||
status: 'error',
|
||||
error: 'Invalid current password'
|
||||
});
|
||||
}
|
||||
|
||||
// Save new password
|
||||
const success = saveConfig({ webuiPassword: newPassword });
|
||||
|
||||
if (success) {
|
||||
// Update in-memory config
|
||||
config.webuiPassword = newPassword;
|
||||
res.json({
|
||||
status: 'ok',
|
||||
message: 'Password changed successfully'
|
||||
});
|
||||
} else {
|
||||
throw new Error('Failed to save password to config file');
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('[WebUI] Error changing password:', error);
|
||||
res.status(500).json({ status: 'error', error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* GET /api/settings - Get runtime settings
|
||||
*/
|
||||
@@ -427,24 +558,28 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
const accountData = await completeOAuthFlow(code, storedState.verifier);
|
||||
|
||||
// Add or update the account
|
||||
accountManager.addAccount({
|
||||
await addAccount({
|
||||
email: accountData.email,
|
||||
refreshToken: accountData.refreshToken,
|
||||
projectId: accountData.projectId,
|
||||
source: 'oauth'
|
||||
});
|
||||
|
||||
// Reload AccountManager to pick up the new account
|
||||
await accountManager.initialize();
|
||||
|
||||
// Return a simple HTML page that closes itself or redirects
|
||||
res.send(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Authentication Successful</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: #09090b;
|
||||
color: #e4e4e7;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
background-color: var(--color-space-950);
|
||||
color: var(--color-text-main);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -452,7 +587,7 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
h1 { color: #22c55e; }
|
||||
h1 { color: var(--color-neon-green); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -479,14 +614,16 @@ export function mountWebUI(app, dirname, accountManager) {
|
||||
<html>
|
||||
<head>
|
||||
<title>Authentication Failed</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: #09090b;
|
||||
color: #ef4444;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
background-color: var(--color-space-950);
|
||||
color: var(--color-text-main);
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
h1 { color: var(--color-neon-red); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user