antigravity-claude-proxy 3.0.1 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/public/css/src/input.css +381 -211
- package/public/css/style.css +1 -1
- package/public/favicon.svg +4 -8
- package/public/index.html +78 -72
- package/public/js/components/dashboard/charts.js +17 -43
- package/public/js/components/dashboard.js +16 -21
- package/public/js/components/models.js +10 -9
- package/public/js/translations/en.js +37 -37
- package/public/js/translations/id.js +36 -36
- package/public/js/translations/pt.js +37 -37
- package/public/js/translations/tr.js +37 -37
- package/public/views/accounts.html +34 -38
- package/public/views/dashboard.html +86 -99
- package/public/views/logs.html +4 -4
- package/public/views/models.html +32 -36
- package/public/views/settings.html +50 -50
|
@@ -1,28 +1,15 @@
|
|
|
1
1
|
<div x-data="dashboard" class="view-container">
|
|
2
2
|
<!-- Compact Header -->
|
|
3
|
-
<div class="flex items-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Dashboard
|
|
8
|
-
</h1>
|
|
9
|
-
<div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
|
|
10
|
-
<span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
|
|
11
|
-
x-text="$store.global.t('systemDesc')">
|
|
12
|
-
CLAUDE PROXY SYSTEM
|
|
13
|
-
</span>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
3
|
+
<div class="flex items-end justify-between gap-4">
|
|
4
|
+
<h1 class="font-display text-[1.5rem] leading-tight font-bold text-white tracking-[-0.01em]" x-text="$store.global.t('dashboard')">
|
|
5
|
+
Dashboard
|
|
6
|
+
</h1>
|
|
16
7
|
|
|
17
8
|
<!-- Compact Status Indicator -->
|
|
18
|
-
<div class="flex items-center gap-2
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</div>
|
|
23
|
-
<span class="text-[10px] font-mono text-gray-500 uppercase tracking-wider" x-text="$store.global.t('live')">Live</span>
|
|
24
|
-
<span class="text-gray-700">•</span>
|
|
25
|
-
<span class="text-[10px] font-mono text-gray-400 tabular-nums"
|
|
9
|
+
<div class="flex items-center gap-2 text-xs whitespace-nowrap flex-shrink-0">
|
|
10
|
+
<span class="w-1.5 h-1.5 bg-neon-green rounded-full"></span>
|
|
11
|
+
<span class="text-gray-500" x-text="$store.global.t('live')">Live</span>
|
|
12
|
+
<span class="font-mono text-gray-400 tabular-nums"
|
|
26
13
|
x-text="new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'})">
|
|
27
14
|
</span>
|
|
28
15
|
</div>
|
|
@@ -34,8 +21,8 @@
|
|
|
34
21
|
x-transition:enter="transition ease-out duration-300"
|
|
35
22
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
|
36
23
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
37
|
-
class="alert
|
|
38
|
-
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-
|
|
24
|
+
class="alert rounded-lg bg-neon-yellow/[0.07] border border-neon-yellow/30">
|
|
25
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-neon-yellow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
39
26
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
40
27
|
</svg>
|
|
41
28
|
<div class="flex-1">
|
|
@@ -43,7 +30,7 @@
|
|
|
43
30
|
<span class="text-gray-400 text-sm ml-1" x-text="'- ' + ($store.global.t('claudeConfigNotAppliedDesc') || 'Apply a preset to use the proxy with Claude Code.')"></span>
|
|
44
31
|
</div>
|
|
45
32
|
<div class="flex items-center gap-2">
|
|
46
|
-
<button type="button" class="btn btn-sm bg-
|
|
33
|
+
<button type="button" class="btn btn-sm bg-neon-yellow hover:bg-[#f6c06a] border-none text-space-950 gap-1.5"
|
|
47
34
|
@click="goToClaudeSettings()"
|
|
48
35
|
:title="$store.global.t('configureNow')">
|
|
49
36
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
@@ -85,43 +72,43 @@
|
|
|
85
72
|
<!-- Stats Grid -->
|
|
86
73
|
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2 lg:gap-3">
|
|
87
74
|
<div
|
|
88
|
-
class="stat bg-space-900
|
|
75
|
+
class="stat bg-space-900 border border-space-border rounded-[10px] p-4 lg:p-5 hover:border-gray-600 hover:bg-space-850 transition-colors duration-150 group relative cursor-pointer min-w-0"
|
|
89
76
|
@click="$store.global.activeTab = 'accounts'"
|
|
90
77
|
:title="$store.global.t('clickToViewAllAccounts')">
|
|
91
78
|
<!-- Icon -->
|
|
92
|
-
<div class="absolute top-
|
|
93
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4
|
|
79
|
+
<div class="absolute top-4 right-4 text-gray-600 group-hover:text-gray-400 transition-colors">
|
|
80
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
|
94
81
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
95
82
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z">
|
|
96
83
|
</path>
|
|
97
84
|
</svg>
|
|
98
85
|
</div>
|
|
99
86
|
<!-- Value -->
|
|
100
|
-
<div class="stat-value text-white
|
|
87
|
+
<div class="stat-value readout text-white text-3xl lg:text-[2.25rem] leading-none font-bold mb-2 truncate" x-text="stats.total"></div>
|
|
101
88
|
<!-- Title -->
|
|
102
|
-
<div class="stat-title text-gray-
|
|
89
|
+
<div class="stat-title text-gray-300 text-[13px] font-medium truncate"
|
|
103
90
|
x-text="$store.global.t('totalAccounts')"></div>
|
|
104
91
|
<!-- Desc -->
|
|
105
|
-
<div class="stat-desc text-
|
|
92
|
+
<div class="stat-desc text-gray-500 text-xs mt-0.5 truncate flex items-center gap-1">
|
|
106
93
|
<span x-text="$store.global.t('linkedAccounts')" class="truncate"></span>
|
|
107
94
|
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
108
95
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
109
96
|
</svg>
|
|
110
97
|
</div>
|
|
111
98
|
<!-- Tiers -->
|
|
112
|
-
<div class="flex items-center gap-1 mt-
|
|
99
|
+
<div class="flex items-center gap-1 mt-3 flex-wrap" x-show="stats.subscription">
|
|
113
100
|
<template x-if="stats.subscription?.ultra > 0">
|
|
114
|
-
<span class="
|
|
101
|
+
<span class="status-pill-ultra">
|
|
115
102
|
<span x-text="stats.subscription.ultra"></span> <span x-text="$store.global.t('tierUltra')">Ultra</span>
|
|
116
103
|
</span>
|
|
117
104
|
</template>
|
|
118
105
|
<template x-if="stats.subscription?.pro > 0">
|
|
119
|
-
<span class="
|
|
106
|
+
<span class="status-pill-pro">
|
|
120
107
|
<span x-text="stats.subscription.pro"></span> <span x-text="$store.global.t('tierPro')">Pro</span>
|
|
121
108
|
</span>
|
|
122
109
|
</template>
|
|
123
110
|
<template x-if="stats.subscription?.free > 0">
|
|
124
|
-
<span class="
|
|
111
|
+
<span class="status-pill-free">
|
|
125
112
|
<span x-text="stats.subscription.free"></span> <span x-text="$store.global.t('tierFree')">Free</span>
|
|
126
113
|
</span>
|
|
127
114
|
</template>
|
|
@@ -129,19 +116,19 @@
|
|
|
129
116
|
</div>
|
|
130
117
|
|
|
131
118
|
<div
|
|
132
|
-
class="stat bg-space-900
|
|
119
|
+
class="stat bg-space-900 border border-space-border rounded-[10px] p-4 lg:p-5 hover:border-gray-600 hover:bg-space-850 transition-colors duration-150 group relative cursor-pointer min-w-0"
|
|
133
120
|
@click="$store.global.activeTab = 'models'"
|
|
134
121
|
:title="$store.global.t('clickToViewModels')">
|
|
135
|
-
<div class="absolute top-
|
|
136
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4
|
|
122
|
+
<div class="absolute top-4 right-4 text-gray-600 group-hover:text-gray-400 transition-colors">
|
|
123
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
|
137
124
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
138
125
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
139
126
|
</svg>
|
|
140
127
|
</div>
|
|
141
|
-
<div class="stat-value text-white
|
|
142
|
-
<div class="stat-title text-gray-
|
|
128
|
+
<div class="stat-value readout text-white text-3xl lg:text-[2.25rem] leading-none font-bold mb-2 truncate" x-text="stats.active"></div>
|
|
129
|
+
<div class="stat-title text-gray-300 text-[13px] font-medium truncate"
|
|
143
130
|
x-text="$store.global.t('active')"></div>
|
|
144
|
-
<div class="stat-desc text-green
|
|
131
|
+
<div class="stat-desc text-neon-green/80 text-xs mt-0.5 truncate flex items-center gap-1">
|
|
145
132
|
<span x-text="$store.global.t('operational')" class="truncate"></span>
|
|
146
133
|
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
147
134
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
@@ -150,19 +137,19 @@
|
|
|
150
137
|
</div>
|
|
151
138
|
|
|
152
139
|
<div
|
|
153
|
-
class="stat bg-space-900
|
|
140
|
+
class="stat bg-space-900 border border-space-border rounded-[10px] p-4 lg:p-5 hover:border-gray-600 hover:bg-space-850 transition-colors duration-150 group relative cursor-pointer min-w-0"
|
|
154
141
|
@click="$store.global.activeTab = 'accounts'"
|
|
155
142
|
:title="$store.global.t('clickToViewLimitedAccounts')">
|
|
156
|
-
<div class="absolute top-
|
|
157
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4
|
|
143
|
+
<div class="absolute top-4 right-4 text-gray-600 group-hover:text-gray-400 transition-colors">
|
|
144
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
|
158
145
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
159
146
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
160
147
|
</svg>
|
|
161
148
|
</div>
|
|
162
|
-
<div class="stat-value text-white
|
|
163
|
-
<div class="stat-title text-gray-
|
|
149
|
+
<div class="stat-value readout text-white text-3xl lg:text-[2.25rem] leading-none font-bold mb-2 truncate" x-text="stats.limited"></div>
|
|
150
|
+
<div class="stat-title text-gray-300 text-[13px] font-medium truncate"
|
|
164
151
|
x-text="$store.global.t('rateLimited')"></div>
|
|
165
|
-
<div class="stat-desc text-
|
|
152
|
+
<div class="stat-desc text-gray-500 text-xs mt-0.5 truncate flex items-center gap-1">
|
|
166
153
|
<span x-text="$store.global.t('cooldown')" class="truncate"></span>
|
|
167
154
|
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
168
155
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
@@ -171,19 +158,19 @@
|
|
|
171
158
|
</div>
|
|
172
159
|
|
|
173
160
|
<div
|
|
174
|
-
class="stat bg-space-900
|
|
161
|
+
class="stat bg-space-900 border border-space-border rounded-[10px] p-4 lg:p-5 hover:border-gray-600 hover:bg-space-850 transition-colors duration-150 group relative cursor-pointer min-w-0"
|
|
175
162
|
@click="$store.global.activeTab = 'models'"
|
|
176
163
|
:title="$store.global.t('clickToViewModels')">
|
|
177
|
-
<div class="absolute top-
|
|
178
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4
|
|
164
|
+
<div class="absolute top-4 right-4 text-gray-600 group-hover:text-gray-400 transition-colors">
|
|
165
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
|
|
179
166
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
180
167
|
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
181
168
|
</svg>
|
|
182
169
|
</div>
|
|
183
|
-
<div class="stat-value text-white
|
|
184
|
-
<div class="stat-title text-gray-
|
|
170
|
+
<div class="stat-value readout text-white text-3xl lg:text-[2.25rem] leading-none font-bold mb-2 truncate" x-text="stats.modelUsage ? stats.modelUsage.limited : 0"></div>
|
|
171
|
+
<div class="stat-title text-gray-300 text-[13px] font-medium truncate"
|
|
185
172
|
x-text="$store.global.t('quotasDepletedTitle')"></div>
|
|
186
|
-
<div class="stat-desc text-
|
|
173
|
+
<div class="stat-desc text-gray-500 text-xs mt-0.5 truncate flex items-center gap-1">
|
|
187
174
|
<span x-text="$store.global.t('outOfTracked', {total: stats.modelUsage ? stats.modelUsage.total : 0})" class="truncate"></span>
|
|
188
175
|
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
189
176
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
@@ -193,29 +180,29 @@
|
|
|
193
180
|
|
|
194
181
|
<!-- Global Quota Chart -->
|
|
195
182
|
<div
|
|
196
|
-
class="stat bg-space-900
|
|
183
|
+
class="stat bg-space-900 border border-space-border rounded-[10px] p-4 h-full flex flex-row sm:flex-col items-center justify-between gap-2 overflow-hidden relative group col-span-2 sm:col-span-1 min-w-0">
|
|
197
184
|
<!-- Chart Container -->
|
|
198
185
|
<div class="h-14 w-14 xl:h-16 xl:w-16 relative flex-shrink-0 self-center">
|
|
199
186
|
<canvas id="quotaChart"></canvas>
|
|
200
187
|
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
201
|
-
<div class="text-
|
|
188
|
+
<div class="readout text-xs font-bold text-white" x-text="stats.overallHealth + '%'">%</div>
|
|
202
189
|
</div>
|
|
203
190
|
</div>
|
|
204
191
|
|
|
205
192
|
<!-- Legend / Info -->
|
|
206
193
|
<div class="flex flex-col justify-center gap-1 flex-grow min-w-0 w-full sm:text-center">
|
|
207
194
|
<div class="flex items-center justify-between sm:justify-center h-full">
|
|
208
|
-
<span class="text-[
|
|
195
|
+
<span class="text-[13px] font-medium text-gray-300 leading-tight whitespace-normal sm:px-1"
|
|
209
196
|
x-text="$store.global.t('globalQuota')">Global Quota</span>
|
|
210
197
|
</div>
|
|
211
198
|
|
|
212
199
|
<!-- Custom Legend -->
|
|
213
200
|
<div class="space-y-0.5 sm:flex sm:flex-col sm:items-center w-full">
|
|
214
|
-
<div class="flex items-center justify-between sm:justify-center sm:gap-2 text-
|
|
201
|
+
<div class="flex items-center justify-between sm:justify-center sm:gap-2 text-xs text-gray-400 cursor-pointer hover:text-white transition-colors group/legend w-full sm:w-auto"
|
|
215
202
|
@click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'claude'; $store.data.computeQuotaRows(); })"
|
|
216
203
|
:title="$store.global.t('clickToFilterClaude')">
|
|
217
204
|
<div class="flex items-center gap-1.5">
|
|
218
|
-
<div class="w-1.5 h-1.5 rounded-full bg-
|
|
205
|
+
<div class="w-1.5 h-1.5 rounded-full bg-family-claude flex-shrink-0"></div>
|
|
219
206
|
<span class="truncate" x-text="$store.global.t('familyClaude')">Claude</span>
|
|
220
207
|
<!-- Hidden arrow on desktop/stacked view to save space -->
|
|
221
208
|
<svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -223,11 +210,11 @@
|
|
|
223
210
|
</svg>
|
|
224
211
|
</div>
|
|
225
212
|
</div>
|
|
226
|
-
<div class="flex items-center justify-between sm:justify-center sm:gap-2 text-
|
|
213
|
+
<div class="flex items-center justify-between sm:justify-center sm:gap-2 text-xs text-gray-400 cursor-pointer hover:text-white transition-colors group/legend w-full sm:w-auto"
|
|
227
214
|
@click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'gemini'; $store.data.computeQuotaRows(); })"
|
|
228
215
|
:title="$store.global.t('clickToFilterGemini')">
|
|
229
216
|
<div class="flex items-center gap-1.5">
|
|
230
|
-
<div class="w-1.5 h-1.5 rounded-full bg-
|
|
217
|
+
<div class="w-1.5 h-1.5 rounded-full bg-family-gemini flex-shrink-0"></div>
|
|
231
218
|
<span class="truncate" x-text="$store.global.t('familyGemini')">Gemini</span>
|
|
232
219
|
<!-- Hidden arrow on desktop/stacked view to save space -->
|
|
233
220
|
<svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -242,41 +229,41 @@
|
|
|
242
229
|
<!-- Usage Trend Chart -->
|
|
243
230
|
<div class="view-card">
|
|
244
231
|
<!-- Header with Stats and Filter -->
|
|
245
|
-
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-
|
|
232
|
+
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-5 mb-6">
|
|
246
233
|
<div class="flex flex-wrap items-center gap-5">
|
|
247
234
|
<div class="flex items-center gap-2.5">
|
|
248
235
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
249
|
-
class="w-4 h-4 text-
|
|
236
|
+
class="w-4 h-4 text-gray-500">
|
|
250
237
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
251
238
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
|
252
239
|
</svg>
|
|
253
|
-
<h3 class="text-
|
|
240
|
+
<h3 class="text-[15px] font-medium text-white whitespace-nowrap"
|
|
254
241
|
x-text="$store.global.t('requestVolume')">Request Volume</h3>
|
|
255
242
|
</div>
|
|
256
243
|
|
|
257
244
|
<!-- Usage Stats Pills -->
|
|
258
|
-
<div class="flex flex-wrap gap-
|
|
259
|
-
<div class="
|
|
245
|
+
<div class="flex flex-wrap items-baseline gap-x-5 gap-y-1 text-xs">
|
|
246
|
+
<div class="whitespace-nowrap">
|
|
260
247
|
<span class="text-gray-500" x-text="$store.global.t('totalColon')">Total:</span>
|
|
261
|
-
<span class="text-white ml-1 font-
|
|
248
|
+
<span class="text-white ml-1 font-mono font-medium" x-text="usageStats.total"></span>
|
|
262
249
|
</div>
|
|
263
|
-
<div class="
|
|
250
|
+
<div class="whitespace-nowrap">
|
|
264
251
|
<span class="text-gray-500" x-text="$store.global.t('todayColon')">Today:</span>
|
|
265
|
-
<span class="text-
|
|
252
|
+
<span class="text-white ml-1 font-mono font-medium" x-text="usageStats.today"></span>
|
|
266
253
|
</div>
|
|
267
|
-
<div class="
|
|
254
|
+
<div class="whitespace-nowrap">
|
|
268
255
|
<span class="text-gray-500" x-text="$store.global.t('hour1Colon')">1H:</span>
|
|
269
|
-
<span class="text-
|
|
256
|
+
<span class="text-white ml-1 font-mono font-medium" x-text="usageStats.thisHour"></span>
|
|
270
257
|
</div>
|
|
271
258
|
</div>
|
|
272
259
|
</div>
|
|
273
260
|
|
|
274
|
-
<div class="flex items-center gap-2
|
|
261
|
+
<div class="flex items-center gap-2 w-full sm:w-auto justify-start sm:justify-end flex-wrap lg:flex-nowrap lg:whitespace-nowrap lg:flex-shrink-0">
|
|
275
262
|
<!-- Time Range Dropdown -->
|
|
276
263
|
<div class="relative flex-1 sm:flex-none">
|
|
277
264
|
<button @click="showTimeRangeDropdown = !showTimeRangeDropdown; showDisplayModeDropdown = false; showModelFilter = false"
|
|
278
265
|
class="filter-control">
|
|
279
|
-
<svg class="w-3.5 h-3.5
|
|
266
|
+
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
280
267
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
281
268
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
282
269
|
</svg>
|
|
@@ -291,22 +278,22 @@
|
|
|
291
278
|
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
|
292
279
|
x-transition:leave="transition ease-in duration-75"
|
|
293
280
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
294
|
-
class="absolute right-0 mt-1 w-36 bg-space-
|
|
281
|
+
class="absolute right-0 mt-1 w-36 bg-space-850 border border-space-border rounded-lg shadow-[0_12px_32px_-12px_rgba(0,0,0,0.7)] z-50 py-1"
|
|
295
282
|
style="display: none;">
|
|
296
283
|
<button @click="setTimeRange('1h')" class="filter-control-item"
|
|
297
|
-
:class="timeRange === '1h' ? 'text-
|
|
284
|
+
:class="timeRange === '1h' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
298
285
|
x-text="$store.global.t('last1Hour')"></button>
|
|
299
286
|
<button @click="setTimeRange('6h')" class="filter-control-item"
|
|
300
|
-
:class="timeRange === '6h' ? 'text-
|
|
287
|
+
:class="timeRange === '6h' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
301
288
|
x-text="$store.global.t('last6Hours')"></button>
|
|
302
289
|
<button @click="setTimeRange('24h')" class="filter-control-item"
|
|
303
|
-
:class="timeRange === '24h' ? 'text-
|
|
290
|
+
:class="timeRange === '24h' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
304
291
|
x-text="$store.global.t('last24Hours')"></button>
|
|
305
292
|
<button @click="setTimeRange('7d')" class="filter-control-item"
|
|
306
|
-
:class="timeRange === '7d' ? 'text-
|
|
293
|
+
:class="timeRange === '7d' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
307
294
|
x-text="$store.global.t('last7Days')"></button>
|
|
308
295
|
<button @click="setTimeRange('all')" class="filter-control-item"
|
|
309
|
-
:class="timeRange === 'all' ? 'text-
|
|
296
|
+
:class="timeRange === 'all' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
310
297
|
x-text="$store.global.t('allTime')"></button>
|
|
311
298
|
</div>
|
|
312
299
|
</div>
|
|
@@ -314,8 +301,8 @@
|
|
|
314
301
|
<!-- Display Mode Dropdown -->
|
|
315
302
|
<div class="relative flex-1 sm:flex-none">
|
|
316
303
|
<button @click="showDisplayModeDropdown = !showDisplayModeDropdown; showTimeRangeDropdown = false; showModelFilter = false"
|
|
317
|
-
class="
|
|
318
|
-
<svg class="w-3 h-3
|
|
304
|
+
class="filter-control">
|
|
305
|
+
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
319
306
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
320
307
|
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
321
308
|
</svg>
|
|
@@ -330,13 +317,13 @@
|
|
|
330
317
|
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
|
331
318
|
x-transition:leave="transition ease-in duration-75"
|
|
332
319
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
333
|
-
class="absolute right-0 mt-1 w-32 bg-space-
|
|
320
|
+
class="absolute right-0 mt-1 w-32 bg-space-850 border border-space-border rounded-lg shadow-[0_12px_32px_-12px_rgba(0,0,0,0.7)] z-50 py-1"
|
|
334
321
|
style="display: none;">
|
|
335
322
|
<button @click="setDisplayMode('family')" class="filter-control-item"
|
|
336
|
-
:class="displayMode === 'family' ? 'text-
|
|
323
|
+
:class="displayMode === 'family' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
337
324
|
x-text="$store.global.t('family')"></button>
|
|
338
325
|
<button @click="setDisplayMode('model')" class="filter-control-item"
|
|
339
|
-
:class="displayMode === 'model' ? 'text-
|
|
326
|
+
:class="displayMode === 'model' ? 'text-white bg-space-800' : 'text-gray-400'"
|
|
340
327
|
x-text="$store.global.t('model')"></button>
|
|
341
328
|
</div>
|
|
342
329
|
</div>
|
|
@@ -344,8 +331,8 @@
|
|
|
344
331
|
<!-- Filter Dropdown -->
|
|
345
332
|
<div class="relative flex-1 sm:flex-none min-w-[120px]">
|
|
346
333
|
<button @click="showModelFilter = !showModelFilter; showTimeRangeDropdown = false; showDisplayModeDropdown = false"
|
|
347
|
-
class="
|
|
348
|
-
<svg class="w-3 h-3
|
|
334
|
+
class="filter-control">
|
|
335
|
+
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
349
336
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
350
337
|
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" />
|
|
351
338
|
</svg>
|
|
@@ -362,24 +349,24 @@
|
|
|
362
349
|
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
|
363
350
|
x-transition:leave="transition ease-in duration-75"
|
|
364
351
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
365
|
-
class="absolute right-0 mt-1 w-72 bg-space-
|
|
352
|
+
class="absolute right-0 mt-1 w-72 bg-space-850 border border-space-border rounded-lg shadow-[0_12px_32px_-12px_rgba(0,0,0,0.7)] z-50 overflow-hidden"
|
|
366
353
|
style="display: none;">
|
|
367
354
|
|
|
368
355
|
<!-- Header -->
|
|
369
356
|
<div
|
|
370
|
-
class="flex items-center justify-between px-3 py-2 border-b border-space-border
|
|
371
|
-
<span class="text-
|
|
357
|
+
class="flex items-center justify-between px-3 py-2 border-b border-space-border">
|
|
358
|
+
<span class="text-xs text-gray-500"
|
|
372
359
|
x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')"></span>
|
|
373
360
|
<div class="flex gap-1">
|
|
374
|
-
<button @click="autoSelectTopN(5)" class="text-
|
|
361
|
+
<button @click="autoSelectTopN(5)" class="text-xs text-neon-purple hover:underline"
|
|
375
362
|
:title="$store.global.t('smartTitle')" x-text="$store.global.t('frequentModels')">
|
|
376
363
|
Smart
|
|
377
364
|
</button>
|
|
378
365
|
<span class="text-gray-600">|</span>
|
|
379
|
-
<button @click="selectAll()" class="text-
|
|
366
|
+
<button @click="selectAll()" class="text-xs text-gray-300 hover:underline"
|
|
380
367
|
x-text="$store.global.t('all')">All</button>
|
|
381
368
|
<span class="text-gray-600">|</span>
|
|
382
|
-
<button @click="deselectAll()" class="text-
|
|
369
|
+
<button @click="deselectAll()" class="text-xs text-gray-500 hover:underline"
|
|
383
370
|
x-text="$store.global.t('none')">None</button>
|
|
384
371
|
</div>
|
|
385
372
|
</div>
|
|
@@ -404,7 +391,7 @@
|
|
|
404
391
|
</label>
|
|
405
392
|
|
|
406
393
|
<!-- Family Section Header (Model Mode) -->
|
|
407
|
-
<div class="flex items-center gap-2 px-2 py-1 text-
|
|
394
|
+
<div class="flex items-center gap-2 px-2 py-1 text-xs text-gray-500 font-medium"
|
|
408
395
|
x-show="displayMode === 'model'">
|
|
409
396
|
<div class="w-1.5 h-1.5 rounded-full"
|
|
410
397
|
:style="'background-color:' + getFamilyColor(family)"></div>
|
|
@@ -446,12 +433,12 @@
|
|
|
446
433
|
</div>
|
|
447
434
|
|
|
448
435
|
<!-- Dynamic Legend -->
|
|
449
|
-
<div class="flex flex-wrap gap-
|
|
436
|
+
<div class="flex flex-wrap gap-x-4 gap-y-1.5 mb-4"
|
|
450
437
|
x-show="displayMode === 'family' ? selectedFamilies.length > 0 : Object.values(selectedModels).flat().length > 0">
|
|
451
438
|
<!-- Family Mode Legend -->
|
|
452
439
|
<template x-if="displayMode === 'family'">
|
|
453
440
|
<template x-for="family in selectedFamilies" :key="family">
|
|
454
|
-
<div class="flex items-center gap-1.5 text-
|
|
441
|
+
<div class="flex items-center gap-1.5 text-xs font-mono"
|
|
455
442
|
x-show="!activeFamilies || activeFamilies.has(family)">
|
|
456
443
|
<div class="w-2 h-2 rounded-full" :style="'background-color:' + getFamilyColor(family)"></div>
|
|
457
444
|
<span class="text-gray-400"
|
|
@@ -463,7 +450,7 @@
|
|
|
463
450
|
<template x-if="displayMode === 'model'">
|
|
464
451
|
<template x-for="family in families" :key="'legend-' + family">
|
|
465
452
|
<template x-for="(model, modelIndex) in (selectedModels[family] || [])" :key="family + ':' + model">
|
|
466
|
-
<div class="flex items-center gap-1.5 text-
|
|
453
|
+
<div class="flex items-center gap-1.5 text-xs font-mono"
|
|
467
454
|
x-show="!activeModelKeys || activeModelKeys.has(family + ':' + model)">
|
|
468
455
|
<div class="w-2 h-2 rounded-full"
|
|
469
456
|
:style="'background-color:' + getModelColor(family, modelIndex)"></div>
|
|
@@ -475,14 +462,14 @@
|
|
|
475
462
|
</div>
|
|
476
463
|
|
|
477
464
|
<!-- Chart -->
|
|
478
|
-
<div class="h-
|
|
465
|
+
<div class="h-56 w-full relative">
|
|
479
466
|
<canvas id="usageTrendChart"></canvas>
|
|
480
467
|
|
|
481
468
|
<!-- Overall Loading State -->
|
|
482
469
|
<div x-show="!stats.hasTrendData"
|
|
483
|
-
class="absolute inset-0 flex items-center justify-center bg-space-900/
|
|
470
|
+
class="absolute inset-0 flex items-center justify-center bg-space-900/80 z-10"
|
|
484
471
|
style="display: none;">
|
|
485
|
-
<div class="text-xs
|
|
472
|
+
<div class="text-xs text-gray-500 flex items-center gap-2">
|
|
486
473
|
<span class="loading loading-spinner loading-xs"></span>
|
|
487
474
|
<span x-text="$store.global.t('syncing')">SYNCING...</span>
|
|
488
475
|
</div>
|
|
@@ -499,7 +486,7 @@
|
|
|
499
486
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
500
487
|
</svg>
|
|
501
488
|
</div>
|
|
502
|
-
<div class="text-xs
|
|
489
|
+
<div class="text-xs text-gray-500 text-center">
|
|
503
490
|
<p x-text="$store.global.t('noDataTracked')">No data tracked yet</p>
|
|
504
491
|
<p class="text-[10px] opacity-60 mt-1" x-text="'[' + getTimeRangeLabel() + ']'"></p>
|
|
505
492
|
</div>
|
|
@@ -510,7 +497,7 @@
|
|
|
510
497
|
<div x-show="stats.hasTrendData && hasFilteredTrendData && (displayMode === 'family' ? selectedFamilies.length === 0 : Object.values(selectedModels).flat().length === 0)"
|
|
511
498
|
class="absolute inset-0 flex items-center justify-center bg-space-900/30 z-10"
|
|
512
499
|
style="display: none;">
|
|
513
|
-
<div class="text-xs
|
|
500
|
+
<div class="text-xs text-gray-500"
|
|
514
501
|
x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')">
|
|
515
502
|
</div>
|
|
516
503
|
</div>
|
package/public/views/logs.html
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<!-- Filters -->
|
|
30
|
-
<div class="hidden md:flex gap-3 text-[
|
|
30
|
+
<div class="hidden md:flex gap-3 text-[11px] font-mono font-bold uppercase select-none">
|
|
31
31
|
<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}">
|
|
32
32
|
<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>
|
|
33
33
|
</label>
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
|
|
46
46
|
<!-- Right: Controls -->
|
|
47
47
|
<div class="flex items-center gap-4 shrink-0">
|
|
48
|
-
<div class="text-[
|
|
48
|
+
<div class="text-[11px] font-mono text-gray-600 hidden lg:block">
|
|
49
49
|
<span x-text="filteredLogs.length"></span>/<span x-text="logs.length"></span>
|
|
50
50
|
</div>
|
|
51
51
|
<label class="cursor-pointer flex items-center gap-2">
|
|
52
|
-
<span class="text-[
|
|
52
|
+
<span class="text-[11px] font-mono text-gray-500 uppercase hidden sm:inline-block"
|
|
53
53
|
x-text="$store.global.t('autoScroll')">Auto-Scroll</span>
|
|
54
54
|
<input type="checkbox" class="toggle toggle-xs toggle-success" x-model="isAutoScroll">
|
|
55
55
|
</label>
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|
|
78
78
|
<!-- Level: Tag Style -->
|
|
79
79
|
<div class="w-14 shrink-0 flex items-center">
|
|
80
|
-
<span class="px-1.5 py-0.5 rounded-[2px] text-[
|
|
80
|
+
<span class="px-1.5 py-0.5 rounded-[2px] text-[11px] font-bold uppercase tracking-wider leading-none border"
|
|
81
81
|
:class="{
|
|
82
82
|
'bg-blue-500/10 text-blue-400 border-blue-500/20': log.level === 'INFO',
|
|
83
83
|
'bg-yellow-500/10 text-yellow-400 border-yellow-500/20': log.level === 'WARN',
|