Merge branch 'RooVetGit:main' into feature/auto-approve-switch-modes

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

@@ -920,6 +920,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					cacheWrites={apiMetrics.totalCacheWrites}
 					cacheReads={apiMetrics.totalCacheReads}
 					totalCost={apiMetrics.totalCost}
+					contextTokens={apiMetrics.contextTokens}
 					onClose={handleTaskCloseButtonClick}
 				/>
 			) : (

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

@@ -16,6 +16,7 @@ interface TaskHeaderProps {
 	cacheWrites?: number
 	cacheReads?: number
 	totalCost: number
+	contextTokens: number
 	onClose: () => void
 }
 
@@ -27,6 +28,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	cacheWrites,
 	cacheReads,
 	totalCost,
+	contextTokens,
 	onClose,
 }) => {
 	const { apiConfiguration } = useExtensionState()
@@ -272,6 +274,13 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 								{!isCostAvailable && <ExportButton />}
 							</div>
 
+							<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
+								<span style={{ fontWeight: "bold" }}>Context:</span>
+								<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
+									{contextTokens ? formatLargeNumber(contextTokens) : '-'}
+								</span>
+							</div>
+
 							{shouldShowPromptCacheInfo && (cacheReads !== undefined || cacheWrites !== undefined) && (
 								<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
 									<span style={{ fontWeight: "bold" }}>Cache:</span>