10 sec

webview-ui/src/components/account/AccountView.tsx

@@ -108,6 +108,7 @@ export const ClineAccountView = () => {
 	const [isSwitchingOrg, setIsSwitchingOrg] = useState(false)
 	const [usageData, setUsageData] = useState<UsageTransaction[]>([])
 	const [paymentsData, setPaymentsData] = useState<PaymentTransaction[]>([])
+	const intervalRef = useRef<NodeJS.Timeout | null>(null)
 
 	const dashboardAddCreditsURL = activeOrganization
 		? "https://app.cline.bot/dashboard/organization?tab=credits&redirect=true"
@@ -165,6 +166,30 @@ export const ClineAccountView = () => {
 		fetchUserData()
 	}, [user])
 
+	// Periodic refresh while component is mounted
+	useEffect(() => {
+		if (!user) return
+
+		intervalRef.current = setInterval(() => {
+			getUserCredits().catch((err) => console.error("Auto-refresh failed:", err))
+		}, 10_000)
+
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current)
+		}
+	}, [user])
+
+	const handleManualRefresh = async () => {
+		await getUserCredits()
+
+		if (intervalRef.current) {
+			clearInterval(intervalRef.current)
+			intervalRef.current = setInterval(() => {
+				getUserCredits().catch((err) => console.error("Auto-refresh failed:", err))
+			}, 10_000)
+		}
+	}
+
 	const handleLogin = () => {
 		handleSignIn()
 	}
@@ -272,7 +297,7 @@ export const ClineAccountView = () => {
 												<StyledCreditDisplay balance={balance} />
 											</>
 										)}
-										<VSCodeButton appearance="icon" className="mt-1" onClick={getUserCredits}>
+										<VSCodeButton appearance="icon" className="mt-1" onClick={handleManualRefresh}>
 											<span className="codicon codicon-refresh"></span>
 										</VSCodeButton>
 									</>