feat: Experiment: Show a bit of stats in Cloud tab to help users discover there's more in Cloud (#8415)

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Matt Rubens <[email protected]>
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
Co-authored-by: SannidhyaSah <[email protected]>
Co-authored-by: John Richmond <[email protected]>

Author: 7 people

packages/cloud/src/CloudAPI.ts

@@ -1,6 +1,13 @@
 import { z } from "zod"
 
-import { type AuthService, type ShareVisibility, type ShareResponse, shareResponseSchema } from "@roo-code/types"
+import {
+	type AuthService,
+	type ShareVisibility,
+	type ShareResponse,
+	shareResponseSchema,
+	type UsageStats,
+	usageStatsSchema,
+} from "@roo-code/types"
 
 import { getRooCodeApiUrl } from "./config.js"
 import { getUserAgent } from "./utils.js"
@@ -53,9 +60,11 @@ export class CloudAPI {
 			})
 
 			if (!response.ok) {
+				this.log(`[CloudAPI] Request to ${endpoint} failed with status ${response.status}`)
 				await this.handleErrorResponse(response, endpoint)
 			}
 
+			// Log before attempting to read the body
 			const data = await response.json()
 
 			if (parseResponse) {
@@ -86,9 +95,15 @@ export class CloudAPI {
 		let responseBody: unknown
 
 		try {
-			responseBody = await response.json()
-		} catch {
-			responseBody = await response.text()
+			const bodyText = await response.text()
+
+			try {
+				responseBody = JSON.parse(bodyText)
+			} catch {
+				responseBody = bodyText
+			}
+		} catch (_error) {
+			responseBody = "Failed to read error response"
 		}
 
 		switch (response.status) {
@@ -109,15 +124,12 @@ export class CloudAPI {
 	}
 
 	async shareTask(taskId: string, visibility: ShareVisibility = "organization"): Promise<ShareResponse> {
-		this.log(`[CloudAPI] Sharing task ${taskId} with visibility: ${visibility}`)
-
 		const response = await this.request("/api/extension/share", {
 			method: "POST",
 			body: JSON.stringify({ taskId, visibility }),
 			parseResponse: (data) => shareResponseSchema.parse(data),
 		})
 
-		this.log("[CloudAPI] Share response:", response)
 		return response
 	}
 
@@ -134,4 +146,14 @@ export class CloudAPI {
 					.parse(data),
 		})
 	}
+
+	async getUsagePreview(): Promise<UsageStats> {
+		const response = await this.request("/api/analytics/usage/daily?period=7", {
+			method: "GET",
+			parseResponse: (data) => {
+				return usageStatsSchema.parse(data)
+			},
+		})
+		return response
+	}
 }

src/core/webview/webviewMessageHandler.ts

@@ -3110,5 +3110,68 @@ export const webviewMessageHandler = async (
 			})
 			break
 		}
+		case "getUsagePreview": {
+			try {
+				// Get the CloudAPI instance and fetch usage preview
+				const cloudApi = CloudService.instance.cloudAPI
+				if (!cloudApi) {
+					// User is not authenticated
+					provider.log("[webviewMessageHandler] User not authenticated for usage preview")
+					await provider.postMessageToWebview({
+						type: "usagePreviewData",
+						error: "Authentication required",
+						data: null,
+					})
+					break
+				}
+
+				// Fetch usage preview data
+				const rawUsageData = await cloudApi.getUsagePreview()
+
+				// 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: 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,
+						cost: 0,
+					},
+				}
+
+				// Send the transformed data back to the webview
+				await provider.postMessageToWebview({
+					type: "usagePreviewData",
+					data: transformedData,
+					error: undefined,
+				})
+			} catch (error) {
+				provider.log(
+					`[webviewMessageHandler] Failed to fetch usage preview: ${error instanceof Error ? error.message : String(error)}`,
+				)
+				provider.log(
+					`[webviewMessageHandler] Error stack trace: ${error instanceof Error ? error.stack : "No stack trace"}`,
+				)
+
+				// Send error back to webview
+				await provider.postMessageToWebview({
+					type: "usagePreviewData",
+					error: error instanceof Error ? error.message : "Failed to load usage data",
+					data: null,
+				})
+			}
+			break
+		}
 	}
 }

src/shared/ExtensionMessage.ts

@@ -126,6 +126,7 @@ export interface ExtensionMessage {
 		| "insertTextIntoTextarea"
 		| "dismissedUpsells"
 		| "organizationSwitchResult"
+		| "usagePreviewData"
 	text?: string
 	payload?: any // Add a generic payload for now, can refine later
 	action?:
@@ -205,6 +206,7 @@ export interface ExtensionMessage {
 	queuedMessages?: QueuedMessage[]
 	list?: string[] // For dismissedUpsells
 	organizationId?: string | null // For organizationSwitchResult
+	data?: any // For usagePreviewData
 }
 
 export type ExtensionState = Pick<

src/shared/WebviewMessage.ts

@@ -229,6 +229,7 @@ export interface WebviewMessage {
 		| "editQueuedMessage"
 		| "dismissUpsell"
 		| "getDismissedUpsells"
+		| "getUsagePreview"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"

webview-ui/src/__tests__/ContextWindowProgress.spec.tsx

@@ -8,6 +8,7 @@ import TaskHeader from "@src/components/chat/TaskHeader"
 // Mock formatLargeNumber function
 vi.mock("@/utils/format", () => ({
 	formatLargeNumber: vi.fn((num) => num.toString()),
+	formatCost: (cost: number) => `$${cost.toFixed(2)}`,
 }))
 
 // Mock VSCodeBadge component for all tests
@@ -128,12 +129,7 @@ describe("ContextWindowProgress", () => {
 		expect(windowSize).toBeInTheDocument()
 		expect(windowSize).toHaveTextContent("4000")
 
-		// The progress bar is now wrapped in tooltips, but we can verify the structure exists
-		// by checking for the progress bar container
-		const progressBarContainer = screen.getByTestId("context-tokens-count").parentElement
+		const progressBarContainer = screen.getByTestId("context-progress-bar-container").parentElement
 		expect(progressBarContainer).toBeInTheDocument()
-
-		// Verify the flex container has the expected structure
-		expect(progressBarContainer?.querySelector(".flex-1.relative")).toBeInTheDocument()
 	})
 })

webview-ui/src/components/chat/ChatRow.tsx

@@ -132,7 +132,8 @@ export const ChatRowContent = ({
 }: ChatRowContentProps) => {
 	const { t } = useTranslation()
 
-	const { mcpServers, alwaysAllowMcp, currentCheckpoint, mode, apiConfiguration } = useExtensionState()
+	const { mcpServers, alwaysAllowMcp, currentCheckpoint, mode, apiConfiguration, cloudIsAuthenticated } =
+		useExtensionState()
 	const { info: model } = useSelectedModel(apiConfiguration)
 	const [isEditing, setIsEditing] = useState(false)
 	const [editedContent, setEditedContent] = useState("")
@@ -1074,8 +1075,17 @@ export const ChatRowContent = ({
 									{title}
 								</div>
 								<div
-									className="text-xs text-vscode-dropdown-foreground border-vscode-dropdown-border/50 border px-1.5 py-0.5 rounded-lg"
-									style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}>
+									className={cn(
+										"text-xs text-vscode-dropdown-foreground border-vscode-dropdown-border/50 border px-1.5 py-0.5 rounded-lg",
+										cloudIsAuthenticated &&
+											"cursor-pointer hover:bg-vscode-dropdown-background hover:border-vscode-dropdown-border transition-colors",
+									)}
+									style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}
+									onClick={(e) => {
+										e.stopPropagation() // Prevent parent onClick from firing
+										vscode.postMessage({ type: "switchTab", tab: "cloud" })
+									}}
+									title={t("chat:apiRequest.viewTokenUsage")}>
 									${Number(cost || 0)?.toFixed(4)}
 								</div>
 							</div>

webview-ui/src/components/chat/ContextWindowProgress.tsx

@@ -60,7 +60,9 @@ export const ContextWindowProgress = ({ contextWindow, contextTokens, maxTokens
 				<StandardTooltip content={tooltipContent} side="top" sideOffset={8}>
 					<div className="flex-1 relative">
 						{/* Main progress bar container */}
-						<div className="flex items-center h-1 rounded-[2px] overflow-hidden w-full bg-[color-mix(in_srgb,var(--vscode-foreground)_20%,transparent)]">
+						<div
+							data-testid="context-progress-bar-container"
+							className="flex items-center h-1 rounded-[2px] overflow-hidden w-full bg-[color-mix(in_srgb,var(--vscode-foreground)_20%,transparent)]">
 							{/* Current tokens container */}
 							<div
 								className="relative h-full"

webview-ui/src/components/chat/TaskHeader.tsx

@@ -3,15 +3,15 @@ import { useTranslation } from "react-i18next"
 import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
 import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
 import DismissibleUpsell from "@src/components/common/DismissibleUpsell"
-import { FoldVertical, ChevronUp, ChevronDown } from "lucide-react"
+import { FoldVertical, ChevronUp, ChevronDown, ChartColumn } from "lucide-react"
 import prettyBytes from "pretty-bytes"
 
 import type { ClineMessage } from "@roo-code/types"
 
 import { getModelMaxOutputTokens } from "@roo/api"
 import { findLastIndex } from "@roo/array"
 
-import { formatLargeNumber } from "@src/utils/format"
+import { formatCost, formatLargeNumber } from "@src/utils/format"
 import { cn } from "@src/lib/utils"
 import { StandardTooltip } from "@src/components/ui"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -24,6 +24,8 @@ import { ContextWindowProgress } from "./ContextWindowProgress"
 import { Mention } from "./Mention"
 import { TodoListDisplay } from "./TodoListDisplay"
 
+import { vscode } from "@src/utils/vscode"
+
 export interface TaskHeaderProps {
 	task: ClineMessage
 	tokensIn: number
@@ -301,7 +303,19 @@ const TaskHeader = ({
 												{t("chat:task.apiCost")}
 											</th>
 											<td className="align-top">
-												<span>${totalCost?.toFixed(2)}</span>
+												<span>{formatCost(totalCost)}</span>
+												<StandardTooltip content={t("chat:apiRequest.viewTokenUsage")}>
+													<ChartColumn
+														className="inline size-3.5 -mt-0.5 ml-2 text-vscode-textLink-foreground cursor-pointer hover:text-vscode-textLink-activeForeground transition-colors"
+														onClick={(e) => {
+															e.stopPropagation()
+															vscode.postMessage({
+																type: "switchTab",
+																tab: "cloud",
+															})
+														}}
+													/>
+												</StandardTooltip>
 											</td>
 										</tr>
 									)}

webview-ui/src/components/chat/__tests__/TaskHeader.spec.tsx

@@ -88,6 +88,15 @@ vi.mock("@roo/array", () => ({
 	},
 }))
 
+// Mock the format utilities
+vi.mock("@/utils/format", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@/utils/format")>()
+	return {
+		...actual,
+		formatCost: (cost: number) => `$${cost.toFixed(2)}`,
+	}
+})
+
 describe("TaskHeader", () => {
 	const defaultProps: TaskHeaderProps = {
 		task: { type: "say", ts: Date.now(), text: "Test task", images: [] },