From 40d3d3f3b646e1af3567ef1c83b4084e35bf9526 Mon Sep 17 00:00:00 2001
From: Wha1eChai <whaleora@gmail.com>
Date: Fri, 9 Jan 2026 21:48:55 +0800
Subject: [PATCH] feat(webui): improve UI display logic for models and accounts
 pages

---
 public/index.html        | 39 +++++++++++++++++++++------------------
 public/views/models.html | 35 +++++++++++++++++++++++++++--------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/public/index.html b/public/index.html
index 12d8de7..5c01db3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -256,15 +256,15 @@
 
     <!-- Add Account Modal -->
     <dialog id="add_account_modal" class="modal backdrop-blur-sm">
-        <div class="modal-box bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)]">
-            <h3 class="font-bold text-lg text-white" x-text="$store.global.t('addAccount')">Add New Account</h3>
+        <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 mb-4" x-text="$store.global.t('addAccount')">Add New Account</h3>
 
-            <div class="py-6 flex flex-col gap-4">
-                <p class="text-sm text-gray-400" x-text="$store.global.t('connectGoogleDesc')">Connect a Google
+            <div class="flex flex-col gap-4">
+                <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.
                     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">
                         <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">
@@ -282,23 +282,26 @@
                     <span x-text="$store.global.t('connectGoogle')">Connect Google Account</span>
                 </button>
 
-                <div class="divider text-xs text-gray-600 uppercase" x-text="$store.global.t('or')">OR</div>
-
-                <div class="collapse collapse-arrow bg-space-800 border border-space-border/50">
-                    <input type="checkbox" />
-                    <div class="collapse-title text-sm font-medium text-gray-400"
-                        x-text="$store.global.t('useCliCommand')">
-                        Use CLI Command
-                    </div>
-                    <div class="collapse-content">
-                        <div class="mockup-code bg-black text-gray-300 border border-space-border scale-90 -ml-4 mt-2">
-                            <pre data-prefix="$"><code>npm run accounts:add</code></pre>
+                <div class="text-center mt-2">
+                    <p class="text-xs text-gray-500 mb-2" x-text="$store.global.t('or')">OR</p>
+                    <details class="group">
+                        <summary class="text-xs text-gray-400 hover:text-neon-cyan cursor-pointer transition-colors inline-flex items-center gap-1">
+                            <svg class="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                            </svg>
+                            <span x-text="$store.global.t('useCliCommand')">Use CLI Command</span>
+                        </summary>
+                        <div class="mt-3 p-3 bg-black/50 rounded border border-space-border/30 font-mono text-xs text-gray-300">
+                            <div class="flex items-center gap-2">
+                                <span class="text-gray-600">$</span>
+                                <code>npm run accounts:add</code>
+                            </div>
                         </div>
-                    </div>
+                    </details>
                 </div>
             </div>
 
-            <div class="modal-action">
+            <div class="modal-action mt-6">
                 <form method="dialog">
                     <button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
                 </form>
diff --git a/public/views/models.html b/public/views/models.html
index 1cf5b49..ed3a0e9 100644
--- a/public/views/models.html
+++ b/public/views/models.html
@@ -42,7 +42,8 @@
             <!-- Custom Select -->
             <div class="relative w-full md:w-64 h-9">
                 <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()">
                     <option value="all" x-text="$store.global.t('allAccounts')">All Accounts</option>
                     <template x-for="acc in $store.data.accounts" :key="acc.email">
@@ -143,15 +144,33 @@
                                 <div
                                     class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
                                     <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 class="flex flex-wrap gap-1 justify-end max-w-[200px]">
-                                    <template x-for="q in row.quotaInfo" :key="q.fullEmail">
-                                        <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"
-                                                :class="q.pct > 50 ? 'bg-neon-green opacity-80' : (q.pct > 0 ? 'bg-yellow-500 opacity-80' : 'bg-red-900 opacity-50')">
-                                            </div>
+                                <!-- Account Status Indicators -->
+                                <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="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')">
+                                                    </div>
+                                                </div>
+                                            </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>