diff --git a/ui/src/components/monitoring/auth-monitor/components/expandable-account-list.tsx b/ui/src/components/monitoring/auth-monitor/components/expandable-account-list.tsx deleted file mode 100644 index 8f8627bf..00000000 --- a/ui/src/components/monitoring/auth-monitor/components/expandable-account-list.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/** - * Expandable Account List - Account rows with toggle and solo controls - * Used in ProviderCard when expanded to show individual account controls - */ - -import { Radio } from 'lucide-react'; -import { Button } from '@/components/ui/button'; -import { Switch } from '@/components/ui/switch'; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; -import { cn } from '@/lib/utils'; -import { cleanEmail } from '../utils'; -import type { AccountRow } from '../types'; - -interface ExpandableAccountListProps { - accounts: AccountRow[]; - privacyMode: boolean; - onPauseToggle: (accountId: string, paused: boolean) => void; - onSoloMode: (accountId: string) => void; - isPausingAccount?: boolean; - isSoloingAccount?: boolean; -} - -export function ExpandableAccountList({ - accounts, - privacyMode, - onPauseToggle, - onSoloMode, - isPausingAccount, - isSoloingAccount, -}: ExpandableAccountListProps) { - return ( -
- {accounts.map((acc) => ( -
-
-
- - {privacyMode ? '••••••' : cleanEmail(acc.email)} - -
-
- - - - - - - Solo mode - activate this, pause others - - - - { - onPauseToggle(acc.id, !checked); - }} - disabled={isPausingAccount} - className="scale-75" - onClick={(e) => e.stopPropagation()} - /> -
-
- ))} -
- ); -} diff --git a/ui/src/components/monitoring/auth-monitor/components/provider-card.tsx b/ui/src/components/monitoring/auth-monitor/components/provider-card.tsx index 56818c73..59af0ac4 100644 --- a/ui/src/components/monitoring/auth-monitor/components/provider-card.tsx +++ b/ui/src/components/monitoring/auth-monitor/components/provider-card.tsx @@ -1,11 +1,9 @@ /** - * ProviderCard - Provider status card with expandable account controls - * Click to expand and show individual account toggle/solo buttons + * ProviderCard - Provider status card with account color dots and stats */ import type React from 'react'; -import { useState } from 'react'; -import { ChevronRight, ChevronDown, AlertTriangle } from 'lucide-react'; +import { ChevronRight, AlertTriangle } from 'lucide-react'; import { cn, STATUS_COLORS } from '@/lib/utils'; import { PROVIDER_COLORS } from '@/lib/provider-config'; import { ProviderIcon } from '@/components/shared/provider-icon'; @@ -13,7 +11,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp import type { ProviderStats } from '../types'; import { getSuccessRate, cleanEmail } from '../utils'; import { InlineStatsBadge } from './inline-stats-badge'; -import { ExpandableAccountList } from './expandable-account-list'; interface ProviderCardProps { stats: ProviderStats; @@ -22,10 +19,6 @@ interface ProviderCardProps { onSelect: () => void; onMouseEnter: () => void; onMouseLeave: () => void; - onPauseToggle?: (accountId: string, paused: boolean) => void; - onSoloMode?: (accountId: string) => void; - isPausingAccount?: boolean; - isSoloingAccount?: boolean; } export function ProviderCard({ @@ -35,32 +28,15 @@ export function ProviderCard({ onSelect, onMouseEnter, onMouseLeave, - onPauseToggle, - onSoloMode, - isPausingAccount, - isSoloingAccount, }: ProviderCardProps) { - const [isExpanded, setIsExpanded] = useState(false); const successRate = getSuccessRate(stats.successCount, stats.failureCount); const providerColor = PROVIDER_COLORS[stats.provider.toLowerCase()] || '#6b7280'; - // Only expandable if account control callbacks are provided - const isExpandable = !!(onPauseToggle && onSoloMode); - - const handleClick = () => { - if (isExpandable) { - setIsExpanded(!isExpanded); - } else { - onSelect(); - } - }; - return (
- {isExpandable ? ( - isExpanded ? ( - - ) : ( - - ) - ) : ( - - )} +
@@ -141,61 +104,40 @@ export function ProviderCard({
{/* Account color dots with warning for agy accounts missing projectId */} - {!isExpanded && ( -
- {stats.accounts.slice(0, 5).map((acc) => { - const isMissingProjectId = stats.provider === 'agy' && !acc.projectId; - return ( -
-
- {isMissingProjectId && ( - - - - - - - Missing Project ID - re-add account to fix - - - - )} -
- ); - })} - {stats.accounts.length > 5 && ( - - +{stats.accounts.length - 5} - - )} -
- )} - - {/* Expandable account list */} - {isExpandable && ( -
- -
- )} +
+ {stats.accounts.slice(0, 5).map((acc) => { + const isMissingProjectId = stats.provider === 'agy' && !acc.projectId; + return ( +
+
+ {isMissingProjectId && ( + + + + + + + Missing Project ID - re-add account to fix + + + + )} +
+ ); + })} + {stats.accounts.length > 5 && ( + + +{stats.accounts.length - 5} + + )} +
); } diff --git a/ui/src/components/monitoring/auth-monitor/index.tsx b/ui/src/components/monitoring/auth-monitor/index.tsx index 6cd55d83..d43e1d48 100644 --- a/ui/src/components/monitoring/auth-monitor/index.tsx +++ b/ui/src/components/monitoring/auth-monitor/index.tsx @@ -9,7 +9,6 @@ import { STATUS_COLORS } from '@/lib/utils'; import { Skeleton } from '@/components/ui/skeleton'; import { AccountFlowViz } from '@/components/account-flow-viz'; import { usePrivacy } from '@/contexts/privacy-context'; -import { usePauseAccount, useResumeAccount, useSoloAccount } from '@/hooks/use-cliproxy'; import { Activity, CheckCircle2, XCircle, Radio } from 'lucide-react'; import { useAuthMonitorData } from './hooks'; @@ -34,30 +33,11 @@ export function AuthMonitor() { const [selectedProvider, setSelectedProvider] = useState(null); const [hoveredProvider, setHoveredProvider] = useState(null); - // Account control mutations - const pauseMutation = usePauseAccount(); - const resumeMutation = useResumeAccount(); - const soloMutation = useSoloAccount(); - // Get selected provider data for detail view const selectedProviderData = selectedProvider ? providerStats.find((ps) => ps.provider === selectedProvider) : null; - const handlePauseToggle = (provider: string, accountId: string, paused: boolean) => { - if (pauseMutation.isPending || resumeMutation.isPending) return; - if (paused) { - pauseMutation.mutate({ provider, accountId }); - } else { - resumeMutation.mutate({ provider, accountId }); - } - }; - - const handleSoloMode = (provider: string, accountId: string) => { - if (soloMutation.isPending) return; - soloMutation.mutate({ provider, accountId }); - }; - if (isLoading) { return (
@@ -157,12 +137,6 @@ export function AuthMonitor() { onSelect={() => setSelectedProvider(ps.provider)} onMouseEnter={() => setHoveredProvider(ps.provider)} onMouseLeave={() => setHoveredProvider(null)} - onPauseToggle={(accountId, paused) => - handlePauseToggle(ps.provider, accountId, paused) - } - onSoloMode={(accountId) => handleSoloMode(ps.provider, accountId)} - isPausingAccount={pauseMutation.isPending || resumeMutation.isPending} - isSoloingAccount={soloMutation.isPending} /> ))}