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
@@ -1,7 +1,36 @@
|
||||
<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="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">
|
||||
<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">
|
||||
<svg class="w-5 h-5 text-neon-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="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,46 +495,336 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Server Info -->
|
||||
<div x-show="activeTab === 'server'" class="space-y-6 max-w-2xl animate-fade-in">
|
||||
<div class="grid grid-cols-2 gap-4 bg-space-900/30 p-6 rounded-lg border border-space-border/50">
|
||||
<!-- 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 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>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-1">Environment</div>
|
||||
<div class="text-sm font-mono text-gray-300">Production</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>
|
||||
<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>
|
||||
<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" 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="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>
|
||||
<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'))">
|
||||
Reload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user