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

feat(webui): improve UI display logic for models and accounts pages

Browse Source
This commit is contained in:
Wha1eChai
2026-01-09 21:48:55 +08:00
parent 8e221e3fc7
commit 40d3d3f3b6
2 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/index.html
View File

@@ -256,15 +256,15 @@
<!-- Add Account Modal --> <!-- Add Account Modal -->
<dialog id="add_account_modal" class="modal backdrop-blur-sm"> <dialog id="add_account_modal" class="modal backdrop-blur-sm">
<div class="modal-box bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)]"> <div class="modal-box max-w-md w-full bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)] p-6">
<h3 class="font-bold text-lg text-white" x-text="$store.global.t('addAccount')">Add New Account</h3> <h3 class="font-bold text-lg text-white mb-4" x-text="$store.global.t('addAccount')">Add New Account</h3>
<div class="py-6 flex flex-col gap-4"> <div class="flex flex-col gap-4">
<p class="text-sm text-gray-400" x-text="$store.global.t('connectGoogleDesc')">Connect a Google <p class="text-sm text-gray-400 leading-relaxed" x-text="$store.global.t('connectGoogleDesc')">Connect a Google
Workspace account to increase your API quota limit. Workspace account to increase your API quota limit.
The account will be used to proxy Claude requests via Antigravity.</p> The account will be used to proxy Claude requests via Antigravity.</p>
<button class="btn btn-primary flex items-center justify-center gap-3 h-12" @click="addAccountWeb"> <button class="btn btn-primary flex items-center justify-center gap-3 h-11" @click="addAccountWeb">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"> <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path <path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"> d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z">
@@ -282,23 +282,26 @@
<span x-text="$store.global.t('connectGoogle')">Connect Google Account</span> <span x-text="$store.global.t('connectGoogle')">Connect Google Account</span>
</button> </button>
<div class="divider text-xs text-gray-600 uppercase" x-text="$store.global.t('or')">OR</div> <div class="text-center mt-2">
<p class="text-xs text-gray-500 mb-2" x-text="$store.global.t('or')">OR</p>
<div class="collapse collapse-arrow bg-space-800 border border-space-border/50"> <details class="group">
<input type="checkbox" /> <summary class="text-xs text-gray-400 hover:text-neon-cyan cursor-pointer transition-colors inline-flex items-center gap-1">
<div class="collapse-title text-sm font-medium text-gray-400" <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
x-text="$store.global.t('useCliCommand')"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
Use CLI Command </svg>
</div> <span x-text="$store.global.t('useCliCommand')">Use CLI Command</span>
<div class="collapse-content"> </summary>
<div class="mockup-code bg-black text-gray-300 border border-space-border scale-90 -ml-4 mt-2"> <div class="mt-3 p-3 bg-black/50 rounded border border-space-border/30 font-mono text-xs text-gray-300">
<pre data-prefix="$"><code>npm run accounts:add</code></pre> <div class="flex items-center gap-2">
<span class="text-gray-600">$</span>
<code>npm run accounts:add</code>
</div> </div>
</div> </div>
</details>
</div> </div>
</div> </div>
<div class="modal-action"> <div class="modal-action mt-6">
<form method="dialog"> <form method="dialog">
<button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button> <button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
</form> </form>

27
public/views/models.html
View File

@@ -42,7 +42,8 @@
<!-- Custom Select --> <!-- Custom Select -->
<div class="relative w-full md:w-64 h-9"> <div class="relative w-full md:w-64 h-9">
<select <select
class="appearance-none w-full h-full bg-space-800 border border-space-border text-gray-300 rounded-lg pl-4 pr-10 focus:outline-none focus:border-neon-purple focus:ring-1 focus:ring-neon-purple transition-all truncate text-xs" class="w-full h-full bg-space-800 border border-space-border text-gray-300 rounded-lg pl-4 pr-10 focus:outline-none focus:border-neon-purple focus:ring-1 focus:ring-neon-purple transition-all truncate text-xs cursor-pointer"
style="appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none;"
x-model="$store.data.filters.account" @change="$store.data.computeQuotaRows()"> x-model="$store.data.filters.account" @change="$store.data.computeQuotaRows()">
<option value="all" x-text="$store.global.t('allAccounts')">All Accounts</option> <option value="all" x-text="$store.global.t('allAccounts')">All Accounts</option>
<template x-for="acc in $store.data.accounts" :key="acc.email"> <template x-for="acc in $store.data.accounts" :key="acc.email">
@@ -143,17 +144,35 @@
<div <div
class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70"> class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
<div <div
x-text="$store.global.t('activeCount', {count: row.quotaInfo.filter(q => q.pct > 0).length})"> x-text="$store.global.t('activeCount', {count: row.quotaInfo?.filter(q => q.pct > 0).length || 0})">
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-1 justify-end max-w-[200px]"> <!-- Account Status Indicators -->
<template x-for="q in row.quotaInfo" :key="q.fullEmail"> <div class="flex flex-wrap gap-1 justify-end max-w-[200px]" x-data="{ maxVisible: 12 }">
<template x-if="!row.quotaInfo || row.quotaInfo.length === 0">
<div class="text-[10px] text-gray-600 italic">No data</div>
</template>
<template x-if="row.quotaInfo && row.quotaInfo.length > 0">
<div class="flex flex-wrap gap-1 justify-end">
<!-- Visible accounts (limited to maxVisible) -->
<template x-for="(q, idx) in row.quotaInfo.slice(0, maxVisible)" :key="q.fullEmail">
<div class="tooltip tooltip-left" :data-tip="`${q.fullEmail} (${q.pct}%)`"> <div class="tooltip tooltip-left" :data-tip="`${q.fullEmail} (${q.pct}%)`">
<div class="w-3 h-3 rounded-[2px] transition-all hover:scale-125 cursor-help" <div class="w-3 h-3 rounded-[2px] transition-all hover:scale-125 cursor-help"
:class="q.pct > 50 ? 'bg-neon-green opacity-80' : (q.pct > 0 ? 'bg-yellow-500 opacity-80' : 'bg-red-900 opacity-50')"> :class="q.pct > 50 ? 'bg-neon-green opacity-80' : (q.pct > 0 ? 'bg-yellow-500 opacity-80' : 'bg-red-900 opacity-50')">
</div> </div>
</div> </div>
</template> </template>
<!-- Overflow indicator -->
<template x-if="row.quotaInfo.length > maxVisible">
<div class="tooltip tooltip-left"
:data-tip="row.quotaInfo.slice(maxVisible).map(q => `${q.fullEmail} (${q.pct}%)`).join('\n')">
<div class="w-3 h-3 rounded-[2px] bg-gray-700/50 border border-gray-600 flex items-center justify-center cursor-help hover:bg-gray-600/70 transition-colors">
<span class="text-[8px] text-gray-400 font-bold leading-none" x-text="`+${row.quotaInfo.length - maxVisible}`"></span>
</div>
</div>
</template>
</div>
</template>
</div> </div>
</div> </div>
</td> </td>