feat(accounts): show error tooltip on status badge hover

Hover the unauthorized/error status badge to reveal the full error
message in a tooltip styled like the usage log status code popover.

Author: james-6-23

frontend/src/components/StatusBadge.tsx

@@ -1,9 +1,11 @@
 import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useTranslation } from 'react-i18next'
 
 interface StatusBadgeProps {
   status?: string | null
   detail?: string | null
+  errorMessage?: string | null
 }
 
 const statusConfig: Record<string, { variant: 'default' | 'secondary' | 'destructive' | 'outline'; dotColor: string }> = {
@@ -18,13 +20,18 @@ const statusConfig: Record<string, { variant: 'default' | 'secondary' | 'destruc
   paused: { variant: 'outline', dotColor: 'bg-blue-500' },
 }
 
-export default function StatusBadge({ status, detail }: StatusBadgeProps) {
+export default function StatusBadge({ status, detail, errorMessage }: StatusBadgeProps) {
   const { t } = useTranslation()
   const key = status ?? 'unknown'
   const config = statusConfig[key] ?? { variant: 'outline' as const, dotColor: 'bg-gray-400' }
+  const trimmedError = errorMessage?.trim() ?? ''
+  const showErrorTooltip = key === 'unauthorized' || key === 'error'
 
-  return (
-    <Badge variant={config.variant} className="gap-1.5 text-[13px]">
+  const badge = (
+    <Badge
+      variant={config.variant}
+      className={`gap-1.5 text-[13px] ${showErrorTooltip ? 'cursor-help ring-1 ring-inset ring-current/10' : ''}`}
+    >
       <span className={`size-1.5 rounded-full ${config.dotColor}`} />
       {t(`status.${key}`, { defaultValue: t('status.unknown', { defaultValue: key }) })}
       {detail && (
@@ -35,4 +42,36 @@ export default function StatusBadge({ status, detail }: StatusBadgeProps) {
       )}
     </Badge>
   )
+
+  if (!showErrorTooltip) {
+    return badge
+  }
+
+  const message = trimmedError || t('usage.statusErrorEmpty')
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            tabIndex={0}
+            aria-label={message}
+            className="inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {badge}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent
+          side="right"
+          sideOffset={8}
+          className="max-w-[360px] rounded-lg border border-slate-700 bg-slate-950 px-3 py-2.5 text-xs text-slate-50 shadow-xl"
+        >
+          <div className="space-y-1.5">
+            <div className="font-semibold text-slate-300">{t('usage.statusErrorDetails')}</div>
+            <div className="whitespace-pre-wrap break-words leading-relaxed text-slate-50">{message}</div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
 }

frontend/src/pages/Accounts.tsx

@@ -3074,6 +3074,7 @@ export default function Accounts() {
                                         getAccountRateLimitWindow(account) ??
                                         undefined
                                       }
+                                      errorMessage={account.error_message}
                                     />
                                     <AccountStatusCountdown account={account} />
                                   </div>
@@ -6124,6 +6125,7 @@ function AccountMobileCard({
               <StatusBadge
                 status={account.status}
                 detail={getAccountRateLimitWindow(account) ?? undefined}
+                errorMessage={account.error_message}
               />
             </div>
           </div>