torbjorn/antigravity-claude-proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webui): Enhance dashboard, global styles, and settings module

Browse Source 
## 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
2026-01-08 19:04:43 +08:00
parent 85f7d3bae7
commit 217053839f
24 changed files with 1898 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/js/app-init.js
View File

@@ -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';
}

60
public/js/components/account-manager.js
View File

@@ -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');
}
}
});

4
public/js/components/claude-config.js
View File

@@ -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;
}

575
public/js/components/dashboard.js
View File

@@ -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: {

3
public/js/data-store.js
View File

@@ -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;
}

3
public/js/settings-store.js
View File

@@ -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

151
public/js/store.js
View File

@@ -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) {

10
public/js/utils.js
View File

@@ -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();
}
};