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

packages/cloud/src/CloudAPI.ts

@@ -6,6 +6,25 @@ import { getRooCodeApiUrl } from "./config.js"
 import { getUserAgent } from "./utils.js"
 import { AuthenticationError, CloudAPIError, NetworkError, TaskNotFoundError } from "./errors.js"
 
+// Usage stats schemas
+const usageStatsSchema = z.object({
+	success: z.boolean(),
+	data: z.object({
+		dates: z.array(z.string()), // Array of date strings
+		tasks: z.array(z.number()), // Array of task counts
+		tokens: z.array(z.number()), // Array of token counts
+		costs: z.array(z.number()), // Array of costs in USD
+		totals: z.object({
+			tasks: z.number(),
+			tokens: z.number(),
+			cost: z.number(), // Total cost in USD
+		}),
+	}),
+	period: z.number(), // Period in days (e.g., 30)
+})
+
+export type UsageStats = z.infer<typeof usageStatsSchema>
+
 interface CloudAPIRequestOptions extends Omit<RequestInit, "headers"> {
 	timeout?: number
 	headers?: Record<string, string>
@@ -53,9 +72,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 +107,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 +136,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 +158,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/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={cloudIsAuthenticated ? t("chat:apiRequest.viewTokenUsage") : undefined}>
 									${Number(cost || 0)?.toFixed(4)}
 								</div>
 							</div>

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

@@ -3,7 +3,7 @@ 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"
@@ -302,6 +302,20 @@ const TaskHeader = ({
 											</th>
 											<td className="align-top">
 												<span>${totalCost?.toFixed(2)}</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()
+															import("@src/utils/vscode").then(({ vscode }) => {
+																vscode.postMessage({
+																	type: "switchTab",
+																	tab: "cloud",
+																})
+															})
+														}}
+													/>
+												</StandardTooltip>
 											</td>
 										</tr>
 									)}