@codingame/monaco-vscode-katex-common 34.1.2 → 35.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageDetails.d.ts

@@ -1,7 +1,9 @@
 import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { type IObservable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/observable";
 import { IMenuService } from "@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions.service";
 import { IInstantiationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation";
 import { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service";
+import type { IChatWidget } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat";
 export interface IChatContextUsagePromptTokenDetail {
     category: string;
     label: string;
@@ -14,16 +16,21 @@ export interface IChatContextUsageData {
     percentage: number;
     outputBufferPercentage?: number;
     promptTokenDetails?: readonly IChatContextUsagePromptTokenDetail[];
+    sessionCost?: number;
 }
 /**
  * Detailed widget that shows context usage breakdown.
  * Displayed when the user clicks on the ChatContextUsageIcon.
  */
 export declare class ChatContextUsageDetails extends Disposable {
+    private _chatWidget;
+    private readonly _dataObservable;
     private readonly instantiationService;
     private readonly menuService;
     private readonly contextKeyService;
     readonly domNode: HTMLElement;
+    private readonly sessionCostSection;
+    private readonly sessionCostValue;
     private readonly quotaItem;
     private readonly percentageLabel;
     private readonly tokenCountLabel;
@@ -33,8 +40,10 @@ export declare class ChatContextUsageDetails extends Disposable {
     private readonly tokenDetailsContainer;
     private readonly warningMessage;
     private readonly actionsSection;
-    constructor(instantiationService: IInstantiationService, menuService: IMenuService, contextKeyService: IContextKeyService);
-    update(data: IChatContextUsageData): void;
+    constructor(_chatWidget: IChatWidget | undefined, _dataObservable: IObservable<IChatContextUsageData | undefined>, instantiationService: IInstantiationService, menuService: IMenuService, contextKeyService: IContextKeyService);
+    setChatWidget(widget: IChatWidget): void;
+    private withActionContext;
+    private _render;
     private formatTokenCount;
     private renderTokenDetails;
     focus(): void;

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageDetails.js

@@ -3,26 +3,48 @@ import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as chatContextUsageDetails from './media/chatContextUsageDetails.css';
 import { $ as $$1, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { Disposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { MenuId } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions';
 import { IMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/common/actions.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
-import { MenuWorkbenchButtonBar } from '../../../../../../platform/actions/browser/buttonbar.js';
+import { WorkbenchButtonBar } from '../../../../../../platform/actions/browser/buttonbar.js';
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { getActionBarActions } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/menuEntryActionViewItem';
+import { formatCopilotCredits } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatService/chatService';
+import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 registerCss(chatContextUsageDetails);
 const $ = $$1;
+const COMPACT_AGENT_HOST_CONVERSATION_ACTION_ID = "workbench.action.chat.compactAgentHostConversation";
 let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
-    constructor(instantiationService, menuService, contextKeyService) {
+    constructor(
+        _chatWidget,
+        _dataObservable,
+        instantiationService,
+        menuService,
+        contextKeyService
+    ) {
         super();
+        this._chatWidget = _chatWidget;
+        this._dataObservable = _dataObservable;
         this.instantiationService = instantiationService;
         this.menuService = menuService;
         this.contextKeyService = contextKeyService;
         this.domNode = $(".chat-context-usage-details");
+        const topHeader = this.domNode.appendChild($("div.header"));
+        topHeader.textContent = ( localize(8395, "Session Info"));
+        this.sessionCostSection = this.domNode.appendChild($(".session-cost-section"));
+        this.sessionCostSection.style.display = "none";
+        const sessionCostRow = this.sessionCostSection.appendChild($(".session-cost-row"));
+        const sessionCostLabel = sessionCostRow.appendChild($("span.session-cost-label"));
+        sessionCostLabel.textContent = ( localize(8396, "Session Cost"));
+        this.sessionCostValue = sessionCostRow.appendChild($("span.session-cost-value"));
         this.quotaItem = this.domNode.appendChild($(".quota-indicator"));
         const header = this.domNode.insertBefore($("div.header"), this.quotaItem);
-        header.textContent = ( localize(7813, "Context Window"));
+        header.textContent = ( localize(8397, "Context Window"));
         const quotaLabel = this.quotaItem.appendChild($(".quota-label"));
         this.tokenCountLabel = quotaLabel.appendChild($("span"));
         this.percentageLabel = quotaLabel.appendChild($("span.quota-value"));
@@ -32,53 +54,82 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.outputBufferLegend = this.quotaItem.appendChild($(".output-buffer-legend"));
         this.outputBufferLegend.appendChild($(".output-buffer-swatch"));
         const legendLabel = this.outputBufferLegend.appendChild($("span"));
-        legendLabel.textContent = ( localize(7814, "Reserved for response"));
+        legendLabel.textContent = ( localize(8398, "Reserved for response"));
         this.outputBufferLegend.style.display = "none";
         this.tokenDetailsContainer = this.domNode.appendChild($(".token-details-container"));
         this.warningMessage = this.domNode.appendChild($("div.description"));
-        this.warningMessage.textContent = ( localize(7815, "Quality may decline as limit nears."));
+        this.warningMessage.textContent = ( localize(8399, "Quality may decline as limit nears."));
         this.warningMessage.style.display = "none";
         this.actionsSection = this.domNode.appendChild($(".actions-section"));
         const buttonBarContainer = this.actionsSection.appendChild($(".button-bar-container"));
-        this._register(this.instantiationService.createInstance(
-            MenuWorkbenchButtonBar,
-            buttonBarContainer,
-            MenuId.ChatContextUsageActions,
-            {
-                toolbarOptions: {
-                    primaryGroup: () => true
-                },
+        const buttonBar = this._register(
+            this.instantiationService.createInstance(WorkbenchButtonBar, buttonBarContainer, {
                 buttonConfigProvider: () => ({
                     isSecondary: true
                 })
-            }
-        ));
+            })
+        );
         const menu = this._register(
             this.menuService.createMenu(MenuId.ChatContextUsageActions, this.contextKeyService)
         );
-        const updateActionsVisibility = () => {
-            const actions = menu.getActions();
-            const hasActions = actions.length > 0 && ( actions.some(([, items]) => items.length > 0));
-            this.actionsSection.style.display = hasActions ? "" : "none";
+        const updateActions = () => {
+            const actions = getActionBarActions(menu.getActions({
+                shouldForwardArgs: true
+            }), () => true);
+            const primaryActions = ( actions.primary.map(action => this.withActionContext(action)));
+            const secondaryActions = ( actions.secondary.map(action => this.withActionContext(action)));
+            buttonBar.update(primaryActions, secondaryActions);
+            this.actionsSection.style.display = primaryActions.length > 0 || secondaryActions.length > 0 ? "" : "none";
         };
-        this._register(menu.onDidChange(updateActionsVisibility));
-        updateActionsVisibility();
+        this._register(menu.onDidChange(updateActions));
+        updateActions();
+        this._register(autorun(reader => {
+            const data = this._dataObservable.read(reader);
+            if (data) {
+                this._render(data);
+            }
+        }));
+    }
+    setChatWidget(widget) {
+        this._chatWidget = widget;
     }
-    update(data) {
+    withActionContext(action) {
+        if (action.id !== COMPACT_AGENT_HOST_CONVERSATION_ACTION_ID) {
+            return action;
+        }
+        return toAction({
+            id: action.id,
+            label: action.label,
+            tooltip: action.tooltip,
+            class: action.class,
+            enabled: action.enabled,
+            checked: action.checked,
+            run: () => action.run(this._chatWidget)
+        });
+    }
+    _render(data) {
         const {
             percentage,
             usedTokens,
             totalContextWindow,
             outputBufferPercentage,
-            promptTokenDetails
+            promptTokenDetails,
+            sessionCost
         } = data;
+        if (typeof sessionCost === "number" && sessionCost > 0) {
+            const formatted = formatCopilotCredits(sessionCost);
+            this.sessionCostValue.textContent = formatted === "1" ? ( localize(8400, "{0} credit", formatted)) : ( localize(8401, "{0} credits", formatted));
+            this.sessionCostSection.style.display = "";
+        } else {
+            this.sessionCostSection.style.display = "none";
+        }
         this.tokenCountLabel.textContent = ( localize(
-            7816,
+            8402,
             "{0} / {1} tokens",
             this.formatTokenCount(usedTokens, 1),
             this.formatTokenCount(totalContextWindow, 0)
         ));
-        this.percentageLabel.textContent = ( localize(7817, "{0}%", Math.min(100, percentage).toFixed(0)));
+        this.percentageLabel.textContent = ( localize(8403, "{0}%", Math.min(100, percentage).toFixed(0)));
         const usageBarWidth = Math.max(0, Math.min(100, percentage));
         this.progressFill.style.width = `${usageBarWidth}%`;
         if (outputBufferPercentage !== undefined && outputBufferPercentage > 0) {
@@ -128,8 +179,8 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         }
         if (totalPercentage < 100) {
             const uncategorizedPercentage = 100 - totalPercentage;
-            categoryMap.set(( localize(7818, "Uncategorized")), [{
-                label: ( localize(7819, "Other")),
+            categoryMap.set(( localize(8404, "Uncategorized")), [{
+                label: ( localize(8405, "Other")),
                 percentageOfPrompt: uncategorizedPercentage
             }]);
         }
@@ -158,6 +209,6 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.domNode.focus();
     }
 };
-ChatContextUsageDetails = ( __decorate([( __param(0, IInstantiationService)), ( __param(1, IMenuService)), ( __param(2, IContextKeyService))], ChatContextUsageDetails));
+ChatContextUsageDetails = ( __decorate([( __param(2, IInstantiationService)), ( __param(3, IMenuService)), ( __param(4, IContextKeyService))], ChatContextUsageDetails));
 
 export { ChatContextUsageDetails };

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageWidget.d.ts

@@ -1,3 +1,4 @@
+import { IStringDictionary } from "@codingame/monaco-vscode-api/vscode/vs/base/common/collections";
 import { Event } from "@codingame/monaco-vscode-api/vscode/vs/base/common/event";
 import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
 import { IObservable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/observable";
@@ -7,7 +8,33 @@ import { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platf
 import { IStorageService } from "@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service";
 import { IConfigurationService } from "@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service";
 import { IChatRequestModel } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatModel";
+import { ILanguageModelConfigurationSchema } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels";
 import { ILanguageModelsService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service";
+import { IChatContextUsageData } from "./chatContextUsageDetails.js";
+import type { IChatWidget } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat";
+/**
+ * Resolves the input-token denominator used by the context-usage gauge.
+ *
+ * Resolution order, mirroring the request path's `applyContextSizeOverride`:
+ *   1. An explicit `contextSize` in the resolved model configuration.
+ *   2. The schema's default `contextSize` tier (e.g. 200K). Used when the
+ *      resolved configuration is missing `contextSize` (e.g. the schema default
+ *      has not loaded yet) so the gauge denominator agrees with the size the
+ *      request actually uses instead of jumping to the model's full native
+ *      window. See issue #320393.
+ *   3. The model's full native window (`maxInputTokens`). Models without a
+ *      context-size picker have no such schema property and land here, where
+ *      default and max are the same value.
+ *
+ * @internal - exported for testing
+ */
+export declare function resolveContextWindowInputTokens(modelConfiguration: IStringDictionary<unknown> | undefined, configurationSchema: ILanguageModelConfigurationSchema | undefined, maxInputTokens: number | undefined): number | undefined;
+/**
+ * Equality comparer for {@link IChatContextUsageData} used to suppress redundant updates.
+ *
+ * @internal - exported for testing
+ */
+export declare function isSameContextUsageData(a: IChatContextUsageData | undefined, b: IChatContextUsageData | undefined): boolean;
 /**
  * A reusable circular progress indicator that displays a ring.
  * The ring fills clockwise from the top based on the percentage value.
@@ -46,14 +73,34 @@ export declare class ChatContextUsageWidget extends Disposable {
     private readonly _isVisible;
     get isVisible(): IObservable<boolean>;
     private readonly _lastRequestDisposable;
+    private readonly _modelConfigurationListener;
+    private _currentResponse;
+    private _currentModelId;
+    /**
+     * The model the user currently has selected in the picker. When set it
+     * overrides the last request's model for computing the context-window
+     * denominator, so switching models updates the widget before the next
+     * request is sent. The usage numerator still comes from the last response.
+     */
+    private _selectedModelId;
+    private _sessionCost;
     private readonly _hoverDisposable;
     private readonly _contextUsageDetails;
-    private currentData;
+    private _chatWidget;
+    private readonly _currentData;
     private static readonly _OPENED_STORAGE_KEY;
     private static readonly _HOVER_ID;
     private readonly _contextUsageOpenedKey;
     private _enabled;
+    /**
+     * Per-editor resolver for a model's configuration (e.g. user-selected
+     * context size). When unset the widget falls back to the profile-global
+     * value from {@link ILanguageModelsService.getModelConfiguration}, which can
+     * lag the editor's actual selection (see issue #320393).
+     */
+    private _modelConfigurationResolver;
     constructor(hoverService: IHoverService, instantiationService: IInstantiationService, languageModelsService: ILanguageModelsService, contextKeyService: IContextKeyService, storageService: IStorageService, configurationService: IConfigurationService);
+    setChatWidget(widget: IChatWidget): void;
     /**
      * Shows the sticky context usage details hover and records that the user
      * has opened it. Returns `true` if the details were shown.
@@ -67,8 +114,30 @@ export declare class ChatContextUsageWidget extends Disposable {
      * Updates the widget with the latest request/response data.
      * The model is retrieved from the request's modelId.
      * @param lastRequest The last request in the session
+     * @param sessionCost Total copilot credits consumed across all turns
+     */
+    update(lastRequest: IChatRequestModel | undefined, sessionCost?: number): void;
+    /**
+     * Provides a per-editor resolver for the selected model's configuration
+     * (notably the user-selected context size). The widget re-renders whenever
+     * the supplied event fires for the currently displayed model. Without this,
+     * the widget falls back to the profile-global value, which can drift from
+     * the editor's actual selection (see issue #320393).
+     */
+    setModelConfigurationResolver(resolver: (modelId: string) => IStringDictionary<unknown> | undefined, onDidChange: Event<string>): void;
+    /**
+     * Sets the model the user currently has selected in the picker. The
+     * context-window denominator then reflects this model immediately, even
+     * before a request is sent with it. The usage numerator still comes from the
+     * last completed response.
+     */
+    setSelectedModel(modelId: string | undefined): void;
+    /**
+     * Resolves a model's context-window dimensions, or `undefined` when it has no usable window. A meta-model such as
+     * "auto" advertises a zero-sized window, so it resolves to `undefined` and the caller falls back to the model that
+     * actually served the request (see issue #321781).
      */
-    update(lastRequest: IChatRequestModel | undefined): void;
+    private resolveContextWindow;
     private updateFromResponse;
     private render;
     private show;

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/chatContextUsageWidget.js

@@ -6,6 +6,7 @@ import { $ as $$1, createElementNS, addDisposableListener, EventType } from '@co
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { Disposable, MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { equals } from '@codingame/monaco-vscode-api/vscode/vs/base/common/arrays';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
@@ -20,10 +21,29 @@ import { ChatContextUsageDetails } from './chatContextUsageDetails.js';
 import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
 import { observableValue } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValue';
+import { observableValueOpts } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/observables/observableValueOpts';
 
 var ChatContextUsageWidget_1;
 registerCss(chatContextUsageWidget);
 const $ = $$1;
+function resolveContextWindowInputTokens(modelConfiguration, configurationSchema, maxInputTokens) {
+    const configuredContextSize = typeof modelConfiguration?.contextSize === "number" ? modelConfiguration.contextSize : undefined;
+    const schemaDefaultContextSize = configurationSchema?.properties?.contextSize?.default;
+    return configuredContextSize ?? (typeof schemaDefaultContextSize === "number" ? schemaDefaultContextSize : undefined) ?? maxInputTokens;
+}
+function isSameContextUsageData(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (!a || !b) {
+        return false;
+    }
+    return a.usedTokens === b.usedTokens && a.completionTokens === b.completionTokens && a.totalContextWindow === b.totalContextWindow && a.percentage === b.percentage && a.outputBufferPercentage === b.outputBufferPercentage && a.sessionCost === b.sessionCost && equals(
+        a.promptTokenDetails,
+        b.promptTokenDetails,
+        (x, y) => x.category === y.category && x.label === y.label && x.percentageOfPrompt === y.percentageOfPrompt
+    );
+}
 class CircularProgressIndicator {
     static {
         this.CENTER_X = 18;
@@ -93,8 +113,14 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         this.onDidChangeVisibility = this._onDidChangeVisibility.event;
         this._isVisible = observableValue(this, false);
         this._lastRequestDisposable = this._register(( new MutableDisposable()));
+        this._modelConfigurationListener = this._register(( new MutableDisposable()));
+        this._sessionCost = 0;
         this._hoverDisposable = this._register(( new MutableDisposable()));
         this._contextUsageDetails = this._register(( new MutableDisposable()));
+        this._currentData = observableValueOpts({
+            owner: this,
+            equalsFn: isSameContextUsageData
+        }, undefined);
         this._hoverOptions = {
             id: ChatContextUsageWidget_1._HOVER_ID,
             appearance: {
@@ -110,7 +136,7 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         this.domNode.style.display = "none";
         this.domNode.setAttribute("tabindex", "0");
         this.domNode.setAttribute("role", "button");
-        this.domNode.setAttribute("aria-label", ( localize(7820, "Context window usage")));
+        this.domNode.setAttribute("aria-label", ( localize(8406, "Context window usage")));
         const iconContainer = this.domNode.appendChild($(".icon-container"));
         this.progressIndicator = ( new CircularProgressIndicator());
         iconContainer.appendChild(this.progressIndicator.domNode);
@@ -129,13 +155,17 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
                 this._enabled = this.configurationService.getValue(ChatConfiguration.ChatContextUsageEnabled) !== false;
                 if (!this._enabled) {
                     this.hide();
-                } else if (this.currentData) {
+                } else if (this._currentData.get()) {
                     this.show();
                 }
             }
         }));
         this.setupHover();
     }
+    setChatWidget(widget) {
+        this._chatWidget = widget;
+        this._contextUsageDetails.value?.setChatWidget(widget);
+    }
     showDetails() {
         const details = this._createDetails();
         if (!details) {
@@ -154,13 +184,12 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         return true;
     }
     _createDetails() {
-        if (!this._isVisible.get() || !this.currentData) {
+        if (!this._isVisible.get() || !this._currentData.get()) {
             return undefined;
         }
         if (!this._contextUsageDetails.value) {
-            this._contextUsageDetails.value = this.instantiationService.createInstance(ChatContextUsageDetails);
+            this._contextUsageDetails.value = this.instantiationService.createInstance(ChatContextUsageDetails, this._chatWidget, this._currentData);
         }
-        this._contextUsageDetails.value.update(this.currentData);
         return this._contextUsageDetails.value;
     }
     _markOpened() {
@@ -192,81 +221,114 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
             }
         }));
     }
-    update(lastRequest) {
+    update(lastRequest, sessionCost = 0) {
         this._lastRequestDisposable.clear();
+        this._currentResponse = undefined;
+        this._currentModelId = undefined;
+        this._sessionCost = sessionCost;
         if (!lastRequest) {
-            this.currentData = undefined;
+            this._currentData.set(undefined, undefined);
             this.hide();
             return;
         }
         if (!lastRequest.response || !lastRequest.modelId) {
-            if (!this.currentData) {
+            if (!this._currentData.get()) {
                 this.hide();
             }
             return;
         }
         const response = lastRequest.response;
         const modelId = lastRequest.modelId;
+        this._currentResponse = response;
+        this._currentModelId = modelId;
         this.updateFromResponse(response, modelId);
         this._lastRequestDisposable.value = response.onDidChange(() => {
             this.updateFromResponse(response, modelId);
         });
     }
-    updateFromResponse(response, modelId) {
-        const usage = response.usage;
+    setModelConfigurationResolver(resolver, onDidChange) {
+        this._modelConfigurationResolver = resolver;
+        this._modelConfigurationListener.value = onDidChange(modelId => {
+            const affectsDisplayedModel = this._currentModelId === modelId || this._selectedModelId === modelId;
+            if (this._currentResponse && this._currentModelId && affectsDisplayedModel) {
+                this.updateFromResponse(this._currentResponse, this._currentModelId);
+            }
+        });
+    }
+    setSelectedModel(modelId) {
+        if (this._selectedModelId === modelId) {
+            return;
+        }
+        this._selectedModelId = modelId;
+        if (this._currentResponse && this._currentModelId) {
+            this.updateFromResponse(this._currentResponse, this._currentModelId);
+        }
+    }
+    resolveContextWindow(modelId) {
+        if (!modelId) {
+            return undefined;
+        }
         const modelMetadata = this.languageModelsService.lookupLanguageModel(modelId);
-        const modelConfiguration = this.languageModelsService.getModelConfiguration(modelId);
-        const configuredContextSize = typeof modelConfiguration?.contextSize === "number" ? modelConfiguration.contextSize : undefined;
-        const maxInputTokens = configuredContextSize ?? modelMetadata?.maxInputTokens;
-        const maxOutputTokens = modelMetadata?.maxOutputTokens;
+        if (!modelMetadata) {
+            return undefined;
+        }
+        const modelConfiguration = this._modelConfigurationResolver?.(modelId) ?? this.languageModelsService.getModelConfiguration(modelId);
+        const maxInputTokens = resolveContextWindowInputTokens(
+            modelConfiguration,
+            modelMetadata.configurationSchema,
+            modelMetadata.maxInputTokens
+        );
+        const maxOutputTokens = modelMetadata.maxOutputTokens;
         const totalContextWindow = (maxInputTokens ?? 0) + (maxOutputTokens ?? 0);
-        if (!usage || totalContextWindow <= 0) {
-            if (!this.currentData) {
+        if (totalContextWindow <= 0) {
+            return undefined;
+        }
+        return {
+            maxOutputTokens,
+            totalContextWindow
+        };
+    }
+    updateFromResponse(response, modelId) {
+        const usage = response.usage;
+        const effectiveModelId = usage?.actualModelId ?? modelId;
+        const contextWindow = this.resolveContextWindow(this._selectedModelId) ?? this.resolveContextWindow(effectiveModelId);
+        if (!usage || !contextWindow) {
+            if (!this._currentData.get()) {
                 this.hide();
             }
             return;
         }
+        const {
+            maxOutputTokens,
+            totalContextWindow
+        } = contextWindow;
         const promptTokens = usage.promptTokens;
         const completionTokens = usage.completionTokens;
         const promptTokenDetails = usage.promptTokenDetails;
-        const outputBuffer = usage.outputBuffer;
         const usedTokens = promptTokens + completionTokens;
         const percentage = (usedTokens / totalContextWindow) * 100;
-        const outputBufferPercentage = outputBuffer !== undefined ? (Math.max(0, outputBuffer - completionTokens) / totalContextWindow) * 100 : undefined;
-        this.render(
-            percentage,
-            completionTokens,
-            usedTokens,
-            totalContextWindow,
-            outputBufferPercentage,
-            promptTokenDetails
-        );
-        this.show();
-    }
-    render(
-        percentage,
-        completionTokens,
-        usedTokens,
-        totalContextWindow,
-        outputBufferPercentage,
-        promptTokenDetails
-    ) {
-        this.currentData = {
+        const outputBufferPercentage = maxOutputTokens !== undefined ? (Math.max(0, maxOutputTokens - completionTokens) / totalContextWindow) * 100 : undefined;
+        this.render({
             usedTokens,
             completionTokens,
             totalContextWindow,
             percentage,
             outputBufferPercentage,
-            promptTokenDetails
-        };
-        this.progressIndicator.setProgress(percentage);
-        const roundedPercentage = Math.min(100, Math.round(percentage));
+            promptTokenDetails,
+            sessionCost: this._sessionCost
+        });
+        this.show();
+    }
+    render(data) {
+        this._currentData.set(data, undefined);
+        this.progressIndicator.setProgress(data.percentage);
+        const roundedPercentage = Math.min(100, Math.round(data.percentage));
         this.percentageLabel.textContent = `${roundedPercentage}%`;
-        this.domNode.setAttribute("aria-label", ( localize(7821, "Context window usage: {0}%", roundedPercentage)));
+        this.domNode.setAttribute("aria-label", ( localize(8407, "Context window usage: {0}%", roundedPercentage)));
         this.domNode.classList.remove("warning", "error");
-        if (percentage >= 90) {
+        if (data.percentage >= 90) {
             this.domNode.classList.add("error");
-        } else if (percentage >= 75) {
+        } else if (data.percentage >= 75) {
             this.domNode.classList.add("warning");
         }
     }
@@ -290,4 +352,4 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
 };
 ChatContextUsageWidget = ChatContextUsageWidget_1 = ( __decorate([( __param(0, IHoverService)), ( __param(1, IInstantiationService)), ( __param(2, ILanguageModelsService)), ( __param(3, IContextKeyService)), ( __param(4, IStorageService)), ( __param(5, IConfigurationService))], ChatContextUsageWidget));
 
-export { ChatContextUsageWidget, CircularProgressIndicator };
+export { ChatContextUsageWidget, CircularProgressIndicator, isSameContextUsageData, resolveContextWindowInputTokens };

package/vscode/src/vs/workbench/contrib/chat/browser/widgetHosts/viewPane/media/chatContextUsageDetails.css

@@ -33,6 +33,26 @@
 	font-weight: 600;
 }
 
+/* Session cost section */
+.chat-context-usage-details .session-cost-section {
+	margin-bottom: 8px;
+}
+
+.chat-context-usage-details .session-cost-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 20px;
+}
+
+.chat-context-usage-details .session-cost-label {
+	color: var(--vscode-foreground);
+}
+
+.chat-context-usage-details .session-cost-value {
+	font-weight: 600;
+}
+
 /* Quota indicator — matching ChatStatusDashboard */
 .chat-context-usage-details .quota-indicator .quota-label {
 	display: flex;