feat: Add token statistics display to API requests (fixes #7740)

Author: roomote

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

@@ -17,6 +17,7 @@ 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 { formatTokenStats } from "@src/utils/formatTokens"
 import { Button } from "@src/components/ui"
 
 import { ToolUseBlock, ToolUseBlockHeader } from "../common/ToolUseBlock"
@@ -180,13 +181,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,9 @@ export const ChatRowContent = ({
 						/>
 					)
 				case "api_req_started":
+					const tokenStats = formatTokenStats(tokensIn, tokensOut, cacheReads)
+					const hasTokenData = tokensIn !== undefined || tokensOut !== undefined
+
 					return (
 						<>
 							<div
@@ -1118,6 +1129,26 @@ export const ChatRowContent = ({
 										style={{ opacity: cost !== null && cost !== undefined && cost > 0 ? 1 : 0 }}>
 										${Number(cost || 0)?.toFixed(4)}
 									</VSCodeBadge>
+									{hasTokenData && (
+										<div
+											className="flex items-center gap-1 flex-wrap"
+											style={{ opacity: hasTokenData ? 1 : 0 }}>
+											<span
+												style={{
+													fontSize: "12px",
+													color: "var(--vscode-descriptionForeground)",
+												}}>
+												↑ {tokenStats.input}
+											</span>
+											<span
+												style={{
+													fontSize: "12px",
+													color: "var(--vscode-descriptionForeground)",
+												}}>
+												↓ {tokenStats.output}
+											</span>
+										</div>
+									)}
 								</div>
 								<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 							</div>

webview-ui/src/utils/formatTokens.ts

@@ -0,0 +1,52 @@
+/**
+ * Format token count for display
+ * @param count - The token count to format
+ * @returns Formatted string (e.g., "1.2k" for 1200)
+ */
+export function formatTokenCount(count: number | undefined): string {
+	if (count === undefined || count === 0) {
+		return "0"
+	}
+
+	if (count < 1000) {
+		return count.toString()
+	}
+
+	// Format as k (thousands) with one decimal place
+	const thousands = count / 1000
+	if (thousands < 10) {
+		// For values less than 10k, show one decimal place
+		return `${thousands.toFixed(1)}k`
+	} else {
+		// For values 10k and above, show no decimal places
+		return `${Math.round(thousands)}k`
+	}
+}
+
+/**
+ * Format token statistics for display
+ * @param tokensIn - Input tokens
+ * @param tokensOut - Output tokens
+ * @param cacheReads - Cache read tokens (optional)
+ * @returns Formatted string for display
+ */
+export function formatTokenStats(
+	tokensIn?: number,
+	tokensOut?: number,
+	cacheReads?: number,
+): { input: string; output: string } {
+	let inputDisplay = formatTokenCount(tokensIn)
+
+	// Add cache reads in parentheses if they exist
+	if (cacheReads && cacheReads > 0) {
+		const cacheDisplay = formatTokenCount(cacheReads)
+		inputDisplay = `${inputDisplay} (${cacheDisplay} cache)`
+	}
+
+	const outputDisplay = formatTokenCount(tokensOut)
+
+	return {
+		input: inputDisplay,
+		output: outputDisplay,
+	}
+}