feat: Token statistics tooltip for each API request

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

@@ -17,7 +17,8 @@ import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
 import { vscode } from "@src/utils/vscode"
 import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric"
 import { getLanguageFromPath } from "@src/utils/getLanguageFromPath"
-import { Button } from "@src/components/ui"
+import { formatTokenStats } from "@src/utils/formatTokens"
+import { Button, StandardTooltip } from "@src/components/ui"
 
 import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
 import UpdateTodoListToolBlock from "./UpdateTodoListToolBlock"
@@ -179,13 +180,20 @@ export const ChatRowContent = ({
 		vscode.postMessage({ type: "selectImages", context: "edit", messageTs: message.ts })
 	}, [message.ts])
 
-	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
+	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage, tokensIn, tokensOut, cacheReads] = useMemo(() => {
 		if (message.text !== null && message.text !== undefined && message.say === "api_req_started") {
 			const info = safeJsonParse<ClineApiReqInfo>(message.text)
-			return [info?.cost, info?.cancelReason, info?.streamingFailedMessage]
+			return [
+				info?.cost,
+				info?.cancelReason,
+				info?.streamingFailedMessage,
+				info?.tokensIn,
+				info?.tokensOut,
+				info?.cacheReads,
+			]
 		}
 
-		return [undefined, undefined, undefined]
+		return [undefined, undefined, undefined, undefined, undefined, undefined]
 	}, [message.text, message.say])
 
 	// When resuming task, last wont be api_req_failed but a resume_task
@@ -1093,6 +1101,54 @@ export const ChatRowContent = ({
 						/>
 					)
 				case "api_req_started":
+					const tokenStats = formatTokenStats(
+						tokensIn,
+						tokensOut,
+						cacheReads,
+						t("chat:task.tokenStats.cacheLabel"),
+					)
+					const hasTokenData = tokensIn !== undefined || tokensOut !== undefined
+
+					const showPrice = cost !== null && cost !== undefined && cost > 0
+
+					const tooltipContent = (
+						<div className="flex flex-col gap-1">
+							<div className="flex items-center gap-2">
+								<span>{t("chat:task.tokenStats.inputLabel")}</span>
+								<span className="font-mono">{tokenStats.input}</span>
+							</div>
+							<div className="flex items-center gap-2">
+								<span>{t("chat:task.tokenStats.outputLabel")}</span>
+								<span className="font-mono">{tokenStats.output}</span>
+							</div>
+						</div>
+					)
+
+					const titleSpan = (
+						<span
+							className="api-request-text"
+							style={{
+								display: "inline-block",
+								fontWeight: "bold",
+								color: "var(--vscode-foreground)",
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								flexShrink: 1,
+								minWidth: 0,
+							}}>
+							{title}
+						</span>
+					)
+
+					const badgeStyle = {
+						opacity: showPrice ? 1 : 0,
+						flexShrink: 0,
+						...(hasTokenData ? { cursor: "default" } : {}),
+					}
+
+					const costBadge = <VSCodeBadge style={badgeStyle}>${Number(cost || 0)?.toFixed(4)}</VSCodeBadge>
+
 					return (
 						<>
 							<div
@@ -1111,13 +1167,35 @@ export const ChatRowContent = ({
 									msUserSelect: "none",
 								}}
 								onClick={handleToggleExpand}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
+								<div
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: "10px",
+										flexGrow: 1,
+										minWidth: 0,
+									}}>
 									{icon}
-									{title}
-									<VSCodeBadge
-										style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}>
-										${Number(cost || 0)?.toFixed(4)}
-									</VSCodeBadge>
+									{hasTokenData && !showPrice ? (
+										<StandardTooltip content={tooltipContent} side="top">
+											{titleSpan}
+										</StandardTooltip>
+									) : (
+										titleSpan
+									)}
+									<div style={{ display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }}>
+										{hasTokenData ? (
+											showPrice ? (
+												<StandardTooltip content={tooltipContent} side="top">
+													{costBadge}
+												</StandardTooltip>
+											) : (
+												costBadge
+											)
+										) : (
+											costBadge
+										)}
+									</div>
 								</div>
 								<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 							</div>

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

@@ -25,6 +25,11 @@
 		"sharingDisabledByOrganization": "Sharing disabled by organization",
 		"shareSuccessOrganization": "Organization link copied to clipboard",
 		"shareSuccessPublic": "Public link copied to clipboard",
+		"tokenStats": {
+			"inputLabel": "↑ Input:",
+			"outputLabel": "↓ Output:",
+			"cacheLabel": "cache"
+		},
 		"openInCloud": "Open task in Roo Code Cloud",
 		"openInCloudIntro": "Keep monitoring or interacting with Roo from anywhere. Scan, click or copy to open."
 	},

webview-ui/src/index.css

@@ -490,3 +490,23 @@ input[cmdk-input]:focus {
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 	transition-duration: 150ms;
 }
+
+/* Hide API Request text when container is too narrow */
+@media (max-width: 400px) {
+	.api-request-text {
+		display: none !important;
+	}
+}
+
+/* Alternative: Use container query for more precise control */
+@supports (container-type: inline-size) {
+	.api-request-container {
+		container-type: inline-size;
+	}
+
+	@container (max-width: 350px) {
+		.api-request-text {
+			display: none !important;
+		}
+	}
+}