From 502b30a589c8aef948e8d58ffc543fcb4e0248ad Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Thu, 15 Jan 2026 13:04:17 -0500
Subject: [PATCH] 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
---
 .../components/account/flow-viz/account-card.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/account/flow-viz/account-card.tsx b/ui/src/components/account/flow-viz/account-card.tsx
index 1b07c358..7f7d2bd7 100644
--- a/ui/src/components/account/flow-viz/account-card.tsx
+++ b/ui/src/components/account/flow-viz/account-card.tsx
@@ -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>
       )}