fix(cloud): usage preview fixes — clear timeout on response; correct bar height calc; robust array transform

Author: roomote

.review/pr-8274

@@ -0,0 +1 @@
+Subproject commit e46929b8d8add0cd3c412d69f8ac882c405a4ba9

src/core/webview/webviewMessageHandler.ts

@@ -3130,14 +3130,19 @@ export const webviewMessageHandler = async (
 
 				// Transform the data to match UI expectations
 				// The API returns data with separate arrays, but UI expects an array of day objects
+				const dates = rawUsageData.data?.dates ?? []
+				const tasks = rawUsageData.data?.tasks ?? []
+				const tokens = rawUsageData.data?.tokens ?? []
+				const costs = rawUsageData.data?.costs ?? []
+				const len = Math.min(dates.length, tasks.length, tokens.length, costs.length)
+
 				const transformedData = {
-					days:
-						rawUsageData.data?.dates?.map((date: string, index: number) => ({
-							date: date,
-							taskCount: rawUsageData.data.tasks[index] || 0,
-							tokenCount: rawUsageData.data.tokens[index] || 0,
-							cost: rawUsageData.data.costs[index] || 0,
-						})) || [],
+					days: Array.from({ length: len }).map((_, index) => ({
+						date: dates[index] ?? "",
+						taskCount: tasks[index] ?? 0,
+						tokenCount: tokens[index] ?? 0,
+						cost: costs[index] ?? 0,
+					})),
 					totals: rawUsageData.data?.totals || {
 						tasks: 0,
 						tokens: 0,

tmp/pr-8287-Roo-Code

@@ -0,0 +1 @@
+Subproject commit 88a473b017af37091c85ce3056e444e856f80d6e

tmp/pr-8412

@@ -0,0 +1 @@
+Subproject commit 1339c7cc8bad17f95532117f36049d84a9ee8266

webview-ui/src/components/cloud/UsagePreview.tsx

@@ -55,10 +55,16 @@ export const UsagePreview = ({ onViewDetails }: UsagePreviewProps) => {
 		vscode.postMessage({ type: "getUsagePreview" })
 
 		// Listen for the response
+		let timeoutId: ReturnType<typeof setTimeout> | null = null
 		const handleMessage = (event: MessageEvent) => {
 			const message = event.data
 
 			if (message.type === "usagePreviewData") {
+				// Clear timeout on success/error to avoid stale timeout flipping UI into error
+				if (timeoutId) {
+					clearTimeout(timeoutId)
+				}
+
 				if (message.error) {
 					setError(message.error)
 				} else if (message.data) {
@@ -76,23 +82,27 @@ export const UsagePreview = ({ onViewDetails }: UsagePreviewProps) => {
 		window.addEventListener("message", handleMessage)
 
 		// Clean up listener after 10 seconds (timeout)
-		const timeout = setTimeout(() => {
+		timeoutId = setTimeout(() => {
 			if (isLoading) {
 				setError(t("cloud:usagePreview.failedToLoad"))
 				setIsLoading(false)
 			}
 		}, 10000)
 
 		return () => {
-			clearTimeout(timeout)
+			if (timeoutId) {
+				clearTimeout(timeoutId)
+			}
 			window.removeEventListener("message", handleMessage)
 		}
 	}, []) // eslint-disable-line react-hooks/exhaustive-deps
 
 	const getBarHeight = (cost: number): number => {
 		if (!data || !data.days || data.days.length === 0) return 1
-		const maxCost = ~~Math.max(...data.days.map((d) => d.cost)) // Avoid NaN
-		return Math.max(1, ~~(cost / maxCost) * 100) // Enforce minimum height for visibility
+		const maxCost = Math.max(...data.days.map((d) => d.cost))
+		if (!Number.isFinite(maxCost) || maxCost <= 0) return 1
+		// Compute percentage first, then round; enforce minimum height for visibility
+		return Math.max(1, Math.round((cost / maxCost) * 100))
 	}
 
 	// Retry loading