From 476c6d827fbdbca8d8aa8535c9b6c894bb84dd1c Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Thu, 30 Apr 2026 10:32:43 -0400
Subject: [PATCH] fix(ui): improve split quota bar readability

---
 .../account/shared/account-quota-panel.tsx    | 99 ++++++++++++-------
 .../shared/account-quota-panel.test.tsx       | 15 +--
 2 files changed, 70 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/account/shared/account-quota-panel.tsx b/ui/src/components/account/shared/account-quota-panel.tsx
index f35c7bf9..244fc649 100644
--- a/ui/src/components/account/shared/account-quota-panel.tsx
+++ b/ui/src/components/account/shared/account-quota-panel.tsx
@@ -49,6 +49,17 @@ function getQuotaColor(percentage: number): string {
   return 'bg-green-500';
 }
 
+function getQuotaTextColor(percentage: number): string {
+  const clamped = Math.max(0, Math.min(100, percentage));
+  if (clamped <= 20) return 'text-red-600 dark:text-red-400';
+  if (clamped <= 50) return 'text-amber-600 dark:text-amber-400';
+  return 'text-emerald-600 dark:text-emerald-400';
+}
+
+function getDisplayQuotaValue(value: number): number {
+  return Number(formatQuotaPercent(value));
+}
+
 function formatRelativeTime(dateStr: string | undefined): string {
   if (!dateStr) return '';
 
@@ -174,59 +185,66 @@ export function AccountQuotaPanel({
           <Tooltip>
             <TooltipTrigger asChild>
               {mode === 'compact' ? (
-                <div className="space-y-0.5 cursor-help">
-                  <div className="flex items-center justify-between">
-                    <span className="text-[8px] text-muted-foreground/70 uppercase font-bold tracking-tight">
-                      {t('accountCard.quota')}
-                    </span>
-                    <span
-                      className={cn(
-                        'text-[10px] font-mono font-bold',
-                        minQuotaValue > 50
-                          ? 'text-emerald-600 dark:text-emerald-400'
-                          : minQuotaValue > 20
-                            ? 'text-amber-500'
-                            : 'text-red-500'
-                      )}
-                    >
-                      {minQuotaLabel}%
-                    </span>
-                  </div>
+                <div className="cursor-help">
                   {quotaRows.length > 0 ? (
-                    <div className="space-y-0.5">
+                    <div className="space-y-1">
                       {quotaRows.map((row) => (
                         <div
                           key={row.id}
-                          className="grid grid-cols-[2rem_minmax(0,1fr)_2.25rem] items-center gap-1 text-[7px]"
+                          className="grid grid-cols-[2rem_minmax(0,1fr)_2rem] items-center gap-x-1 text-[7px]"
                         >
-                          <span className="font-semibold uppercase text-muted-foreground/75">
+                          <span className="font-semibold uppercase leading-none text-muted-foreground/75">
                             {row.compactLabel}
                           </span>
                           <Progress
-                            value={Math.max(0, Math.min(100, row.value))}
+                            value={getDisplayQuotaValue(row.value)}
                             aria-label={`${row.compactLabel} quota`}
-                            className="h-1"
+                            className="h-1.5"
                             indicatorClassName={getQuotaColor(row.value)}
                           />
-                          <span className="text-right font-mono font-semibold text-foreground/80">
+                          <span
+                            className={cn(
+                              'text-right font-mono text-[10px] font-bold leading-none',
+                              getQuotaTextColor(row.value)
+                            )}
+                          >
                             {formatQuotaPercent(row.value)}%
                           </span>
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <Progress
-                      value={minQuotaValue}
-                      aria-label="Quota"
-                      className="h-1"
-                      indicatorClassName={
-                        minQuotaValue > 50
-                          ? 'bg-emerald-500'
-                          : minQuotaValue > 20
-                            ? 'bg-amber-500'
-                            : 'bg-red-500'
-                      }
-                    />
+                    <div className="space-y-0.5">
+                      <div className="flex items-center justify-between">
+                        <span className="text-[8px] text-muted-foreground/70 uppercase font-bold tracking-tight">
+                          {t('accountCard.quota')}
+                        </span>
+                        <span
+                          className={cn(
+                            'text-[10px] font-mono font-bold',
+                            minQuotaValue > 50
+                              ? 'text-emerald-600 dark:text-emerald-400'
+                              : minQuotaValue > 20
+                                ? 'text-amber-500'
+                                : 'text-red-500'
+                          )}
+                        >
+                          {minQuotaLabel}%
+                        </span>
+                      </div>
+                      <Progress
+                        value={minQuotaValue}
+                        aria-label="Quota"
+                        className="h-1"
+                        indicatorClassName={
+                          minQuotaValue > 50
+                            ? 'bg-emerald-500'
+                            : minQuotaValue > 20
+                              ? 'bg-amber-500'
+                              : 'bg-red-500'
+                        }
+                      />
+                    </div>
                   )}
                 </div>
               ) : (
@@ -265,12 +283,17 @@ export function AccountQuotaPanel({
                             <span className="min-w-0 truncate text-muted-foreground">
                               {row.label}
                             </span>
-                            <span className="shrink-0 font-mono font-semibold text-foreground/80">
+                            <span
+                              className={cn(
+                                'shrink-0 font-mono font-semibold',
+                                getQuotaTextColor(row.value)
+                              )}
+                            >
                               {formatQuotaPercent(row.value)}%
                             </span>
                           </div>
                           <Progress
-                            value={Math.max(0, Math.min(100, row.value))}
+                            value={getDisplayQuotaValue(row.value)}
                             aria-label={`${row.label} quota`}
                             className="h-2"
                             indicatorClassName={getQuotaColor(row.value)}
diff --git a/ui/tests/unit/components/account/shared/account-quota-panel.test.tsx b/ui/tests/unit/components/account/shared/account-quota-panel.test.tsx
index 93741255..be182aa7 100644
--- a/ui/tests/unit/components/account/shared/account-quota-panel.test.tsx
+++ b/ui/tests/unit/components/account/shared/account-quota-panel.test.tsx
@@ -3,6 +3,9 @@ import { describe, expect, it } from 'vitest';
 import { AccountQuotaPanel } from '@/components/account/shared/account-quota-panel';
 import type { ClaudeQuotaResult, CodexQuotaResult, GeminiCliQuotaResult } from '@/lib/api-client';
 
+const NOISY_WEEKLY_REMAINING_PERCENT = 45 - 1e-14;
+const NOISY_WEEKLY_USED_PERCENT = 100 - NOISY_WEEKLY_REMAINING_PERCENT;
+
 function createGeminiFailureQuota(): GeminiCliQuotaResult {
   return {
     success: false,
@@ -37,9 +40,9 @@ function createClaudeQuota(): ClaudeQuotaResult {
         rateLimitType: 'seven_day_sonnet',
         label: 'Weekly usage',
         status: 'allowed',
-        utilization: 0.6,
-        usedPercent: 60,
-        remainingPercent: 40,
+        utilization: NOISY_WEEKLY_USED_PERCENT / 100,
+        usedPercent: NOISY_WEEKLY_USED_PERCENT,
+        remainingPercent: NOISY_WEEKLY_REMAINING_PERCENT,
         resetAt: '2026-05-07T01:00:00.000Z',
       },
     ],
@@ -54,7 +57,7 @@ function createClaudeQuota(): ClaudeQuotaResult {
       weekly: {
         rateLimitType: 'seven_day_sonnet',
         label: 'Weekly usage',
-        remainingPercent: 40,
+        remainingPercent: NOISY_WEEKLY_REMAINING_PERCENT,
         resetAt: '2026-05-07T01:00:00.000Z',
         status: 'allowed',
       },
@@ -137,14 +140,14 @@ describe('AccountQuotaPanel quota bars', () => {
     expect(screen.getByText('5h')).toBeInTheDocument();
     expect(screen.getByText('Week')).toBeInTheDocument();
     expect(screen.getByText('43%')).toBeInTheDocument();
-    expect(screen.getAllByText('40%').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('45%').length).toBeGreaterThan(0);
     expect(screen.getByRole('progressbar', { name: '5h quota' })).toHaveAttribute(
       'aria-valuenow',
       '43'
     );
     expect(screen.getByRole('progressbar', { name: 'Week quota' })).toHaveAttribute(
       'aria-valuenow',
-      '40'
+      '45'
     );
   });