Adds links to CloudView from mentions of cost elsewhere if the user is authenticated

Author: brunobergher

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,21 @@ 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={
+										cloudIsAuthenticated
+											? (e) => {
+													e.stopPropagation() // Prevent parent onClick from firing
+													vscode.postMessage({ type: "switchTab", tab: "cloud" })
+												}
+											: undefined
+									}
+									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"
@@ -50,7 +50,7 @@ const TaskHeader = ({
 	todos,
 }: TaskHeaderProps) => {
 	const { t } = useTranslation()
-	const { apiConfiguration, currentTaskItem, clineMessages } = useExtensionState()
+	const { apiConfiguration, currentTaskItem, clineMessages, cloudIsAuthenticated } = useExtensionState()
 	const { id: modelId, info: model } = useSelectedModel(apiConfiguration)
 	const [isTaskExpanded, setIsTaskExpanded] = useState(false)
 	const [showLongRunningTaskMessage, setShowLongRunningTaskMessage] = useState(false)
@@ -302,6 +302,24 @@ const TaskHeader = ({
 											</th>
 											<td className="align-top">
 												<span>${totalCost?.toFixed(2)}</span>
+												{cloudIsAuthenticated ? (
+													<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>
+												) : (
+													<ChartColumn className="inline size-3.5 -mt-0.5 ml-2 text-vscode-textLink-foreground" />
+												)}
 											</td>
 										</tr>
 									)}

webview-ui/src/i18n/locales/en/chat.json

@@ -147,7 +147,8 @@
 		"failed": "API Request Failed",
 		"streaming": "API Request...",
 		"cancelled": "API Request Cancelled",
-		"streamingFailed": "API Streaming Failed"
+		"streamingFailed": "API Streaming Failed",
+		"viewTokenUsage": "View token usage"
 	},
 	"checkpoint": {
 		"regular": "Checkpoint",