-
-
- {t('accountCard.quota')}
-
- 50
- ? 'text-emerald-600 dark:text-emerald-400'
- : minQuotaValue > 20
- ? 'text-amber-500'
- : 'text-red-500'
- )}
- >
- {minQuotaLabel}%
-
-
- {compactQuotaRows.length > 0 && (
-
- {compactQuotaRows.map((row) => (
-
- {row.label} {row.value}%
-
- ))}
-
- )}
-
-
50
- ? 'bg-emerald-500'
- : minQuotaValue > 20
- ? 'bg-amber-500'
- : 'bg-red-500'
- )}
- style={{ width: `${minQuotaValue}%` }}
- />
-
-
-
-
-
-
-
-
- ) : quota?.success ? (
-
- {t('accountCard.quotaUnavailable')}
-
- ) : failureInfo ? (
-
-
-
-
-
- {failureInfo.label}
-
-
-
-
-
{failureInfo.summary}
- {failureInfo.actionHint && (
-
{failureInfo.actionHint}
- )}
- {failureInfo.technicalDetail && (
-
- {failureInfo.technicalDetail}
-
- )}
- {failureInfo.rawDetail && (
-
- {failureInfo.rawDetail}
-
- )}
-
- ) : null}
-
void;
- onPauseToggle?: (accountId: string, paused: boolean) => void;
+ onPauseToggle?: (accountIds: string[], paused: boolean) => void;
isPausingAccount?: boolean;
}
diff --git a/ui/src/components/account/shared/account-quota-panel.tsx b/ui/src/components/account/shared/account-quota-panel.tsx
new file mode 100644
index 00000000..95c4fb57
--- /dev/null
+++ b/ui/src/components/account/shared/account-quota-panel.tsx
@@ -0,0 +1,330 @@
+import {
+ cn,
+ formatQuotaPercent,
+ getCodexQuotaBreakdown,
+ getProviderMinQuota,
+ getProviderResetTime,
+ getQuotaFailureInfo,
+ isClaudeQuotaResult,
+ isCodexQuotaResult,
+} from '@/lib/utils';
+import { QuotaTooltipContent } from '@/components/shared/quota-tooltip-content';
+import type { UnifiedQuotaResult } from '@/hooks/use-cliproxy-stats';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+ AlertCircle,
+ AlertTriangle,
+ CheckCircle2,
+ Clock,
+ HelpCircle,
+ KeyRound,
+ Loader2,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+type AccountSurfaceMode = 'compact' | 'detailed';
+
+interface AccountQuotaPanelProps {
+ provider: string;
+ quota?: UnifiedQuotaResult;
+ quotaLoading?: boolean;
+ runtimeLastUsed?: string;
+ mode: AccountSurfaceMode;
+ className?: string;
+}
+
+function getQuotaColor(percentage: number): string {
+ const clamped = Math.max(0, Math.min(100, percentage));
+ if (clamped <= 20) return 'bg-destructive';
+ if (clamped <= 50) return 'bg-yellow-500';
+ return 'bg-green-500';
+}
+
+function formatRelativeTime(dateStr: string | undefined): string {
+ if (!dateStr) return '';
+
+ try {
+ const date = new Date(dateStr);
+ const diff = Date.now() - date.getTime();
+ if (diff < 0) return 'just now';
+
+ const minutes = Math.floor(diff / (1000 * 60));
+ const hours = Math.floor(diff / (1000 * 60 * 60));
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+ if (days > 0) return `${days}d ago`;
+ if (hours > 0) return `${hours}h ago`;
+ if (minutes > 0) return `${minutes}m ago`;
+ return 'just now';
+ } catch {
+ return '';
+ }
+}
+
+function isRecentlyUsed(lastUsedAt: string | undefined): boolean {
+ if (!lastUsedAt) return false;
+
+ try {
+ return Date.now() - new Date(lastUsedAt).getTime() < 60 * 60 * 1000;
+ } catch {
+ return false;
+ }
+}
+
+export function AccountQuotaPanel({
+ provider,
+ quota,
+ quotaLoading,
+ runtimeLastUsed,
+ mode,
+ className,
+}: AccountQuotaPanelProps) {
+ const { t } = useTranslation();
+ const normalizedProvider = provider.toLowerCase();
+ const isCodexProvider = normalizedProvider === 'codex';
+ const isClaudeProvider = normalizedProvider === 'claude' || normalizedProvider === 'anthropic';
+ const minQuota = getProviderMinQuota(provider, quota);
+ const resetTime = getProviderResetTime(provider, quota);
+ const minQuotaLabel = minQuota !== null ? formatQuotaPercent(minQuota) : null;
+ const minQuotaValue = minQuotaLabel !== null ? Number(minQuotaLabel) : null;
+ const failureInfo = getQuotaFailureInfo(quota);
+ const FailureIcon =
+ failureInfo?.label === 'Reauth'
+ ? KeyRound
+ : failureInfo?.tone === 'warning'
+ ? AlertTriangle
+ : AlertCircle;
+
+ const codexBreakdown =
+ isCodexProvider && quota && isCodexQuotaResult(quota)
+ ? getCodexQuotaBreakdown(quota.windows)
+ : null;
+ const compactQuotaRows = isCodexProvider
+ ? [
+ { label: '5h', value: codexBreakdown?.fiveHourWindow?.remainingPercent ?? null },
+ {
+ label: mode === 'compact' ? 'Wk' : 'Weekly',
+ value: codexBreakdown?.weeklyWindow?.remainingPercent ?? null,
+ },
+ ]
+ : isClaudeProvider && quota && isClaudeQuotaResult(quota)
+ ? [
+ {
+ label: '5h',
+ value:
+ quota.coreUsage?.fiveHour?.remainingPercent ??
+ quota.windows.find((window) => window.rateLimitType === 'five_hour')
+ ?.remainingPercent ??
+ null,
+ },
+ {
+ label: mode === 'compact' ? 'Wk' : 'Weekly',
+ value:
+ quota.coreUsage?.weekly?.remainingPercent ??
+ quota.windows.find((window) =>
+ [
+ 'seven_day',
+ 'seven_day_opus',
+ 'seven_day_sonnet',
+ 'seven_day_oauth_apps',
+ 'seven_day_cowork',
+ ].includes(window.rateLimitType)
+ )?.remainingPercent ??
+ null,
+ },
+ ]
+ : [];
+ const quotaRows = compactQuotaRows.filter(
+ (row): row is { label: string; value: number } => row.value !== null
+ );
+
+ if (quotaLoading) {
+ return (
+
+
+ {mode === 'compact' ? t('accountCard.quotaLoading') : 'Loading quota...'}
+
+ );
+ }
+
+ if (minQuotaValue !== null) {
+ return (
+
+
+
+
+ {mode === 'compact' ? (
+
+
+
+ {t('accountCard.quota')}
+
+ 50
+ ? 'text-emerald-600 dark:text-emerald-400'
+ : minQuotaValue > 20
+ ? 'text-amber-500'
+ : 'text-red-500'
+ )}
+ >
+ {minQuotaLabel}%
+
+
+ {quotaRows.length > 0 && (
+
+ {quotaRows.map((row) => (
+
+ {row.label} {row.value}%
+
+ ))}
+
+ )}
+
+
50
+ ? 'bg-emerald-500'
+ : minQuotaValue > 20
+ ? 'bg-amber-500'
+ : 'bg-red-500'
+ )}
+ style={{ width: `${minQuotaValue}%` }}
+ />
+
+
+ ) : (
+
+
+ {isRecentlyUsed(runtimeLastUsed) ? (
+ <>
+
+
+ Active · {formatRelativeTime(runtimeLastUsed)}
+
+
+ ) : runtimeLastUsed ? (
+ <>
+
+
+ Last used {formatRelativeTime(runtimeLastUsed)}
+
+
+ ) : (
+ <>
+
+ Not used yet
+
+ )}
+
+ {quotaRows.length > 0 ? (
+
+ {quotaRows.map((row) => (
+
+
+ {row.label}
+
+
+
{row.value}%
+
+ ))}
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ {t('accountCard.quotaUnavailable')}
+
+ ) : (
+
+
+
+ {t('accountCard.quotaUnavailable')}
+
+
+ );
+ }
+
+ if (!failureInfo) {
+ return null;
+ }
+
+ const failureClass =
+ failureInfo.tone === 'warning'
+ ? 'text-amber-600 dark:text-amber-400 border-amber-500/50'
+ : failureInfo.tone === 'destructive'
+ ? 'text-destructive border-destructive/50'
+ : 'text-muted-foreground/70 border-muted-foreground/50';
+
+ return (
+
+
+
+ {mode === 'compact' ? (
+
+
+ {failureInfo.label}
+
+ ) : (
+
+
+
+ {failureInfo.label}
+
+
+ )}
+
+
+
+
{failureInfo.summary}
+ {failureInfo.actionHint && (
+
{failureInfo.actionHint}
+ )}
+ {failureInfo.technicalDetail && (
+
+ {failureInfo.technicalDetail}
+
+ )}
+ {failureInfo.rawDetail && (
+
+ {failureInfo.rawDetail}
+
+ )}
+
+
+
+ {beforeIdentity}
+ {!isCompact && (
+
+
+
+
+ {showTierBadge && (
+
+ {tier === 'ultra' ? 'U' : 'P'}
+
+ )}
+
+ )}
+
+
+
+
+ {title}
+
+ {isCompact && (compactMetaBadges ?? defaultCompactMetaBadges)}
+ {!isCompact && identity.audienceLabel && (
+
+ {identity.audienceLabel}
+
+ )}
+ {!isCompact && identity.detailLabel && (
+
+ {identity.detailLabel}
+
+ )}
+ {!isCompact && isDefault && (
+
+
+ Default
+
+ )}
+ {!isCompact && paused && (
+
+
+ Paused
+
+ )}
+
+
+ {bodySlot &&
{bodySlot}
}
+
+
+
+ {headerEnd && (
+
+ {headerEnd}
+
+ )}
+
+
+ {footerSlot}
+
+ {showQuota && (
+
+ )}
+
+
+
+ {projectId}
+
+
+
+
+ GCP Project ID (read-only)
+
+
+
+ );
}
-}
-/**
- * Check if account was used recently (within last hour = token likely refreshed)
- */
-function isRecentlyUsed(lastUsedAt: string | undefined): boolean {
- if (!lastUsedAt) return false;
- try {
- const lastUsed = new Date(lastUsedAt);
- const now = new Date();
- const diff = now.getTime() - lastUsed.getTime();
- return diff < 60 * 60 * 1000; // Within last hour
- } catch {
- return false;
- }
+ return (
+
+
+
+
+
+
+
+
Missing Project ID
+
This may cause errors. Remove the account and re-add it to fetch the project ID.
+
+ {selectable && (
+
+ )}
+ {onPauseToggle && (
+
+
+
+
+
+
+ {account.paused ? 'Resume account' : 'Pause account'}
+
+
+
+ )}
+
-
-
- {/* Selection checkbox for bulk actions */}
- {selectable && (
-
- )}
- {/* Pause/Resume toggle button - visible left of avatar */}
- {onPauseToggle && (
-
-
-
-
-
-
- {account.paused ? 'Resume account' : 'Pause account'}
-
-
-
- )}
- {/* Avatar with tier badge overlay */}
-
-
-
-
- {/* Tier badge - fixed position on avatar */}
- {account.tier && account.tier !== 'unknown' && account.tier !== 'free' && (
-
- {account.tier === 'ultra' ? 'U' : 'P'}
-
- )}
-
-
-
-
- {account.email || account.id}
-
- {variantLabel && (
-
- {variantLabel}
-
- )}
- {account.isDefault && (
-
-
- Default
-
- )}
- {account.paused && (
-
-
- Paused
-
- )}
-
- {/* Project ID for Antigravity accounts - read-only */}
- {account.provider === 'agy' && (
-
- {account.projectId ? (
-
-
-
-
-
-
- {account.projectId}
-
-
-
-
- GCP Project ID (read-only)
-
-
-
- ) : (
-
-
-
-
-
-
-
-
Missing Project ID
-
- This may cause errors. Remove the account and re-add it to fetch the
- project ID.
-
-
- )}
-
- )}
- {account.lastUsedAt && (
-
-
- Last used: {new Date(account.lastUsedAt).toLocaleDateString()}
-
- )}
-
-
-
-
-
-
-
-
- {!account.isDefault && (
-
-
- Set as default
-
- )}
-
-
- {isRemoving ? 'Removing...' : 'Remove account'}
-
-
-
-
-
- {/* Quota bar - supports all providers with quota API */}
- {showQuota && (
-
- {quotaLoading ? (
-
-
- Loading quota...
-
- ) : minQuotaValue !== null ? (
-
- {/* Status indicator based on runtime usage, not file state */}
-
- {wasRecentlyUsed ? (
- <>
-
-
- Active · {formatRelativeTime(runtimeLastUsed)}
-
-
- ) : runtimeLastUsed ? (
- <>
-
-
- Last used {formatRelativeTime(runtimeLastUsed)}
-
-
- ) : (
- <>
-
- Not used yet
-
- )}
-
- {/* Quota bar */}
-
-
-
- {dualWindowQuotaRows.length > 0 ? (
-
- {dualWindowQuotaRows.map((row) => (
-
-
- {row.label}
-
-
-
- {row.value}%
-
-
- ))}
-
-
-
- {minQuotaLabel}%
-
-
-
- ) : quota?.success ? (
-
-
-
- {t('accountCard.quotaUnavailable')}
-
-
- ) : failureInfo ? (
-
-
-
-
-
-
- {failureInfo.label}
-
-
-
-
-
-
{failureInfo.summary}
- {failureInfo.actionHint && (
-
{failureInfo.actionHint}
- )}
- {failureInfo.technicalDetail && (
-
- {failureInfo.technicalDetail}
-
- )}
- {failureInfo.rawDetail && (
-
- {failureInfo.rawDetail}
-
- )}
-
- ) : null}
-
- )}
+
diff --git a/ui/src/components/monitoring/auth-monitor/types.ts b/ui/src/components/monitoring/auth-monitor/types.ts
index 1ddbf44a..793b8c6f 100644
--- a/ui/src/components/monitoring/auth-monitor/types.ts
+++ b/ui/src/components/monitoring/auth-monitor/types.ts
@@ -2,12 +2,15 @@
* Type definitions for Auth Monitor components
*/
+import type { AccountVisualVariant } from '@/lib/account-visual-groups';
+
/** Account tier for subscription level */
export type AccountTier = 'free' | 'pro' | 'ultra' | 'unknown';
export interface AccountRow {
id: string;
email: string;
+ tokenFile: string;
provider: string;
displayName: string;
isDefault: boolean;
@@ -21,6 +24,10 @@ export interface AccountRow {
paused?: boolean;
/** Account tier (Antigravity only) */
tier?: AccountTier;
+ /** Raw member IDs when one visual card represents multiple underlying auth records */
+ memberIds?: string[];
+ /** Raw variant details shown inside grouped visual cards */
+ variants?: AccountVisualVariant[];
}
export interface ProviderStats {
diff --git a/ui/src/components/setup/wizard/steps/account-step.tsx b/ui/src/components/setup/wizard/steps/account-step.tsx
index 339b1ae7..15f1bdce 100644
--- a/ui/src/components/setup/wizard/steps/account-step.tsx
+++ b/ui/src/components/setup/wizard/steps/account-step.tsx
@@ -3,8 +3,9 @@
*/
import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
import { ChevronRight, ArrowLeft, User, ExternalLink } from 'lucide-react';
-import { formatAccountDisplayName } from '@/lib/account-identity';
+import { getAccountIdentityPresentation } from '@/lib/account-identity';
import { cn } from '@/lib/utils';
import { PRIVACY_BLUR_CLASS } from '@/contexts/privacy-context';
import type { AccountStepProps } from '../types';
@@ -25,29 +26,52 @@ export function AccountStep({
{/* Scrollable account list with max-height for many accounts */}
- {accounts.map((acc) => (
-