fix(ui): improve paused account display in Live Account Monitor

- Add Pause icon with amber color for paused accounts
- Show styled "PAUSED" badge instead of plain error text
- Distinguish paused state from other errors visually
This commit is contained in:
kaitranntt
2026-01-15 13:04:17 -05:00
parent a931bc9745
commit 502b30a589
@@ -10,7 +10,7 @@ import {
getMinClaudeQuota,
} from '@/lib/utils';
import { PRIVACY_BLUR_CLASS } from '@/contexts/privacy-context';
import { GripVertical, Loader2, Clock } from 'lucide-react';
import { GripVertical, Loader2, Clock, Pause } from 'lucide-react';
import { useAccountQuota } from '@/hooks/use-cliproxy-stats';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -202,9 +202,16 @@ export function AccountCard({
</Tooltip>
</TooltipProvider>
) : quota?.error ? (
<div className="text-[8px] text-muted-foreground/60 truncate" title={quota.error}>
{quota.error.length > 20 ? `${quota.error.slice(0, 18)}...` : quota.error}
</div>
quota.error === 'Account is paused' ? (
<div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
<Pause className="w-3 h-3" />
<span className="text-[9px] font-medium uppercase tracking-wide">Paused</span>
</div>
) : (
<div className="text-[8px] text-muted-foreground/60 truncate" title={quota.error}>
{quota.error.length > 20 ? `${quota.error.slice(0, 18)}...` : quota.error}
</div>
)
) : null}
</div>
)}