Add context utilization indicator to chat request messages

src/vs/workbench/contrib/chat/browser/chatListRenderer.ts

@@ -16,6 +16,7 @@ import { ITreeNode, ITreeRenderer } from '../../../../base/browser/ui/tree/tree.
 import { IAction } from '../../../../base/common/actions.js';
 import { coalesce, distinct } from '../../../../base/common/arrays.js';
 import { findLast } from '../../../../base/common/arraysFind.js';
+import { CancellationToken } from '../../../../base/common/cancellation.js';
 import { Codicon } from '../../../../base/common/codicons.js';
 import { toErrorMessage } from '../../../../base/common/errorMessage.js';
 import { canceledName } from '../../../../base/common/errors.js';
@@ -91,6 +92,7 @@ import { ChatEditorOptions } from './chatOptions.js';
 import { ChatCodeBlockContentProvider, CodeBlockPart } from './codeBlockPart.js';
 import { ChatAnonymousRateLimitedPart } from './chatContentParts/chatAnonymousRateLimitedPart.js';
 import { IChatEntitlementService } from '../../../services/chat/common/chatEntitlementService.js';
+import { ILanguageModelsService } from '../common/languageModels.js';
 
 const $ = dom.$;
 
@@ -218,7 +220,8 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		@ICommandService private readonly commandService: ICommandService,
 		@IHoverService private readonly hoverService: IHoverService,
 		@IChatWidgetService private readonly chatWidgetService: IChatWidgetService,
-		@IChatEntitlementService private readonly chatEntitlementService: IChatEntitlementService
+		@IChatEntitlementService private readonly chatEntitlementService: IChatEntitlementService,
+		@ILanguageModelsService private readonly languageModelsService: ILanguageModelsService
 	) {
 		super();
 
@@ -820,6 +823,46 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 			this._onDidRerender.fire(templateData);
 		}
 
+		// Calculate context utilization percentage if not already calculated
+		if (element.modelId && element.contextUsagePercentage === undefined) {
+			const modelMetadata = this.languageModelsService.lookupLanguageModel(element.modelId);
+			if (modelMetadata && modelMetadata.maxInputTokens > 0) {
+				this.languageModelsService.computeTokenLength(element.modelId, element.messageText, CancellationToken.None).then(tokenCount => {
+					element.contextUsagePercentage = Math.round((tokenCount / modelMetadata.maxInputTokens) * 100);
+					// Trigger a re-render only if this element is still the current element in the template
+					if (templateData.currentElement === element) {
+						this._onDidChangeItemHeight.fire({ element, height: templateData.rowContainer.offsetHeight });
+					}
+				}).catch(err => {
+					this.logService.error('Failed to compute token length for context utilization', err);
+				});
+			}
+		}
+
+		// Setup hover and badge for context utilization indicator
+		// Early exit if percentage is not yet calculated
+		if (element.contextUsagePercentage !== undefined) {
+			const contextUsageText = localize('contextUsage', '⭕ {0}% context used', element.contextUsagePercentage);
+			const hoverElement = dom.$('span.context-usage-hover');
+			hoverElement.textContent = contextUsageText;
+
+			// Setup hover (elementDisposables will clean up previous registrations)
+			templateData.elementDisposables.add(this.hoverService.setupDelayedHover(templateData.requestHover, {
+				content: hoverElement
+			}));
+
+			// Show badge directly for high utilization (>80%)
+			if (element.contextUsagePercentage > 80) {
+				// Clear any existing context usage badges first
+				const existingBadges = templateData.requestHover.querySelectorAll('.context-usage-badge');
+				existingBadges.forEach(badge => badge.remove());
+
+				const badge = dom.append(templateData.requestHover, $('span.context-usage-badge'));
+				badge.textContent = contextUsageText;
+				templateData.elementDisposables.add(toDisposable(() => badge.remove()));
+			}
+		}
+
 		if (this.configService.getValue<string>('chat.editRequests') !== 'none' && this.rendererOptions.editable) {
 			templateData.elementDisposables.add(dom.addDisposableListener(templateData.rowContainer, dom.EventType.KEY_DOWN, e => {
 				const ev = new StandardKeyboardEvent(e);

src/vs/workbench/contrib/chat/browser/media/chat.css

@@ -3092,3 +3092,21 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	font-style: italic;
 	color: var(--vscode-descriptionForeground);
 }
+/* Context usage indicator */
+.context-usage-badge {
+	display: inline-block;
+	padding: 2px 6px;
+	margin-left: 8px;
+	font-size: 11px;
+	border-radius: 3px;
+	background-color: var(--vscode-inputValidation-warningBackground);
+	color: var(--vscode-inputValidation-warningForeground);
+	border: 1px solid var(--vscode-inputValidation-warningBorder);
+}
+
+.request-hover .context-usage-hover {
+	position: relative;
+	display: inline-block;
+	font-size: 11px;
+	padding: 2px 4px;
+}

src/vs/workbench/contrib/chat/common/chatViewModel.ts

@@ -100,6 +100,7 @@ export interface IChatRequestViewModel {
 	readonly agentOrSlashCommandDetected: boolean;
 	readonly shouldBeBlocked?: boolean;
 	readonly modelId?: string;
+	contextUsagePercentage?: number;
 }
 
 export interface IChatResponseMarkdownRenderData {