@codingame/monaco-vscode-katex-common 26.2.1 → 27.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/media/chatViewWelcome.css

@@ -14,6 +14,18 @@
 	}
 }
 
+.interactive-session.chat-view-getting-started-disabled {
+
+	/* hide most welcome pieces (except suggested actions) when we show recent sessions to make some space */
+	.chat-welcome-view .chat-welcome-view-icon,
+	.chat-welcome-view .chat-welcome-view-title,
+	.chat-welcome-view .chat-welcome-view-message,
+	.chat-welcome-view .chat-welcome-view-disclaimer,
+	.chat-welcome-view .chat-welcome-view-tips {
+		display: none;
+	}
+}
+
 /* Chat welcome container */
 .interactive-session .chat-welcome-view-container {
 	display: flex;
@@ -41,11 +53,13 @@ div.chat-welcome-view {
 	padding: 12px;
 
 	& > .chat-welcome-view-icon {
-		min-height: 48px;
+		min-height: 40px;
 	}
 
 	& > .chat-welcome-view-icon .codicon {
+		color: var(--vscode-descriptionForeground);
 		font-size: 40px;
+		margin-bottom: 24px;
 	}
 
 	& > .chat-welcome-view-icon.custom-icon {
@@ -72,7 +86,9 @@ div.chat-welcome-view {
 	}
 
 	& > .chat-welcome-view-title {
-		font-size: 24px;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--vscode-foreground);
 		margin-top: 5px;
 		text-align: center;
 		line-height: normal;
@@ -82,10 +98,11 @@ div.chat-welcome-view {
 	& > .chat-welcome-view-message {
 		position: relative;
 		text-align: center;
-		max-width: 100%;
+		max-width: 280px;
 		padding: 0 20px;
-		margin: 0 auto;
-		color: var(--vscode-foreground);
+		margin: 8px auto 0;
+		color: var(--vscode-descriptionForeground);
+		font-size: 12px;
 
 		a {
 			color: var(--vscode-textLink-foreground);
@@ -98,8 +115,7 @@ div.chat-welcome-view {
 		}
 
 		p {
-			margin-top: 8px;
-			margin-bottom: 8px;
+			margin: 0;
 		}
 	}
 
@@ -141,11 +157,16 @@ div.chat-welcome-view {
 	}
 
 	& > .chat-welcome-view-disclaimer {
-		color: var(--vscode-foreground);
+		color: var(--vscode-input-placeholderForeground);
 		text-align: center;
-		margin: -16px auto;
-		max-width: 400px;
+		margin: 0;
+		max-width: 256px;
 		padding: 0 12px;
+		font-size: 12px;
+
+		p {
+			margin: 0;
+		}
 
 		a {
 			color: var(--vscode-textLink-foreground);
@@ -178,9 +199,7 @@ div.chat-welcome-view {
 		position: absolute;
 		top: 8px;
 		left: 16px;
-		font-size: 11px;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
+		font-size: 12px;
 		color: var(--vscode-descriptionForeground);
 		margin: 0;
 		text-align: left;
@@ -190,8 +209,8 @@ div.chat-welcome-view {
 		display: flex;
 		align-items: center;
 		gap: 6px;
-		height: 24px;
-		padding: 0 8px;
+		height: 20px;
+		padding: 0 6px;
 		border-radius: 4px;
 		background-color: var(--vscode-editorWidget-background);
 		cursor: pointer;
@@ -202,13 +221,13 @@ div.chat-welcome-view {
 		flex: 0 0 auto;
 
 		& > .chat-welcome-view-suggested-prompt-title {
-			font-size: 13px;
+			font-size: 12px;
 			color: var(--vscode-editorWidget-foreground);
 			white-space: nowrap;
 		}
 
 		& > .chat-welcome-view-suggested-prompt-description {
-			font-size: 13px;
+			font-size: 11px;
 			color: var(--vscode-descriptionForeground);
 			overflow: hidden;
 			text-overflow: ellipsis;

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

@@ -8,8 +8,8 @@ export interface IChatContextUsagePromptTokenDetail {
     percentageOfPrompt: number;
 }
 export interface IChatContextUsageData {
-    promptTokens: number;
-    maxInputTokens: number;
+    usedTokens: number;
+    totalContextWindow: number;
     percentage: number;
     promptTokenDetails?: readonly IChatContextUsagePromptTokenDetail[];
 }

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

@@ -20,11 +20,10 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.menuService = menuService;
         this.contextKeyService = contextKeyService;
         this.domNode = $(".chat-context-usage-details");
-        this.domNode.setAttribute("tabindex", "0");
         this.quotaItem = this.domNode.appendChild($(".quota-item"));
         const quotaItemHeader = this.quotaItem.appendChild($(".quota-item-header"));
         const quotaItemLabel = quotaItemHeader.appendChild($(".quota-item-label"));
-        quotaItemLabel.textContent = ( localize(6235, "Context Window"));
+        quotaItemLabel.textContent = ( localize(6774, "Context Window"));
         const tokenRow = this.quotaItem.appendChild($(".token-row"));
         this.tokenCountLabel = tokenRow.appendChild($(".token-count-label"));
         this.percentageLabel = tokenRow.appendChild($(".quota-item-value"));
@@ -32,12 +31,12 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.progressFill = progressBar.appendChild($(".quota-bit"));
         this.tokenDetailsContainer = this.domNode.appendChild($(".token-details-container"));
         this.warningMessage = this.domNode.appendChild($(".warning-message"));
-        this.warningMessage.textContent = ( localize(6236, "Quality may decline as limit nears."));
+        this.warningMessage.textContent = ( localize(6775, "Quality may decline as limit nears."));
         this.warningMessage.style.display = "none";
         this.actionsSection = this.domNode.appendChild($(".actions-section"));
         this.actionsSection.appendChild($(".separator"));
         const actionsHeader = this.actionsSection.appendChild($(".actions-header"));
-        actionsHeader.textContent = ( localize(6237, "Actions"));
+        actionsHeader.textContent = ( localize(6776, "Actions"));
         const buttonBarContainer = this.actionsSection.appendChild($(".button-bar-container"));
         this._register(this.instantiationService.createInstance(
             MenuWorkbenchButtonBar,
@@ -66,15 +65,15 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
     update(data) {
         const {
             percentage,
-            promptTokens,
-            maxInputTokens,
+            usedTokens,
+            totalContextWindow,
             promptTokenDetails
         } = data;
         this.tokenCountLabel.textContent = ( localize(
-            6238,
+            6777,
             "{0} / {1} tokens",
-            this.formatTokenCount(promptTokens, 1),
-            this.formatTokenCount(maxInputTokens, 0)
+            this.formatTokenCount(usedTokens, 1),
+            this.formatTokenCount(totalContextWindow, 0)
         ));
         this.percentageLabel.textContent = `• ${percentage.toFixed(0)}%`;
         this.progressFill.style.width = `${Math.min(100, percentage)}%`;
@@ -88,7 +87,8 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         this.warningMessage.style.display = percentage >= 75 ? "" : "none";
     }
     formatTokenCount(count, decimals) {
-        if (count >= 1000000) {
+        const mThreshold = 1000000 - 500 * Math.pow(10, -decimals);
+        if (count >= mThreshold) {
             return `${(count / 1000000).toFixed(decimals)}M`;
         } else if (count >= 1000) {
             return `${(count / 1000).toFixed(decimals)}K`;
@@ -115,16 +115,23 @@ let ChatContextUsageDetails = class ChatContextUsageDetails extends Disposable {
         }
         if (totalPercentage < 100) {
             const uncategorizedPercentage = 100 - totalPercentage;
-            categoryMap.set(( localize(6239, "Uncategorized")), [{
-                label: ( localize(6240, "Other")),
+            categoryMap.set(( localize(6778, "Uncategorized")), [{
+                label: ( localize(6779, "Other")),
                 percentageOfPrompt: uncategorizedPercentage
             }]);
         }
         for (const [category, items] of categoryMap) {
+            const visibleItems = items.filter(item => {
+                const contextRelativePercentage = (item.percentageOfPrompt / 100) * contextWindowPercentage;
+                return contextRelativePercentage >= 0.05;
+            });
+            if (visibleItems.length === 0) {
+                continue;
+            }
             const categorySection = this.tokenDetailsContainer.appendChild($(".token-category"));
             const categoryHeader = categorySection.appendChild($(".token-category-header"));
             categoryHeader.textContent = category;
-            for (const item of items) {
+            for (const item of visibleItems) {
                 const itemRow = categorySection.appendChild($(".token-detail-item"));
                 const itemLabel = itemRow.appendChild($(".token-detail-label"));
                 itemLabel.textContent = item.label;

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

@@ -3,22 +3,26 @@ import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/l
 import { IObservable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/observable";
 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";
+import { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service";
+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 { ILanguageModelsService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service";
 /**
- * A reusable circular progress indicator that displays a pie chart.
- * The pie fills clockwise from the top based on the percentage value.
+ * A reusable circular progress indicator that displays a ring.
+ * The ring fills clockwise from the top based on the percentage value.
  */
 export declare class CircularProgressIndicator {
     readonly domNode: SVGSVGElement;
-    private readonly progressPie;
+    private readonly progressCircle;
+    private readonly circumference;
     private static readonly CENTER_X;
     private static readonly CENTER_Y;
     private static readonly RADIUS;
     constructor();
     /**
-     * Updates the pie chart to display the given percentage (0-100).
-     * @param percentage The percentage of the pie to fill (clamped to 0-100)
+     * Updates the ring to display the given percentage (0-100).
+     * @param percentage The percentage of the ring to fill (clamped to 0-100)
      */
     setProgress(percentage: number): void;
 }
@@ -31,6 +35,9 @@ export declare class ChatContextUsageWidget extends Disposable {
     private readonly hoverService;
     private readonly instantiationService;
     private readonly languageModelsService;
+    private readonly contextKeyService;
+    private readonly storageService;
+    private readonly configurationService;
     private readonly _onDidChangeVisibility;
     readonly onDidChangeVisibility: Event<void>;
     readonly domNode: HTMLElement;
@@ -41,7 +48,19 @@ export declare class ChatContextUsageWidget extends Disposable {
     private readonly _hoverDisposable;
     private readonly _contextUsageDetails;
     private currentData;
-    constructor(hoverService: IHoverService, instantiationService: IInstantiationService, languageModelsService: ILanguageModelsService);
+    private static readonly _OPENED_STORAGE_KEY;
+    private static readonly _HOVER_ID;
+    private readonly _contextUsageOpenedKey;
+    private _enabled;
+    constructor(hoverService: IHoverService, instantiationService: IInstantiationService, languageModelsService: ILanguageModelsService, contextKeyService: IContextKeyService, storageService: IStorageService, configurationService: IConfigurationService);
+    /**
+     * Shows the sticky context usage details hover and records that the user
+     * has opened it. Returns `true` if the details were shown.
+     */
+    showDetails(): boolean;
+    private readonly _hoverOptions;
+    private _createDetails;
+    private _markOpened;
     private setupHover;
     /**
      * Updates the widget with the latest request/response data.

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

@@ -9,13 +9,19 @@ import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/in
 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';
+import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
+import { StorageScope, StorageTarget } from '@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage';
+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 { ChatContextKeys } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/actions/chatContextKeys';
+import { ChatConfiguration } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
 import { ILanguageModelsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service';
 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 { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
+var ChatContextUsageWidget_1;
 registerCss(chatContextUsageWidget);
 const $ = $$1;
 class CircularProgressIndicator {
@@ -26,155 +32,208 @@ class CircularProgressIndicator {
         this.CENTER_Y = 18;
     }
     static {
-        this.RADIUS = 16;
+        this.RADIUS = 14;
     }
     constructor() {
+        const r = CircularProgressIndicator.RADIUS;
+        this.circumference = 2 * Math.PI * r;
         this.domNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
         this.domNode.setAttribute("viewBox", "0 0 36 36");
         this.domNode.classList.add("circular-progress");
         const bgCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
         bgCircle.setAttribute("cx", String(CircularProgressIndicator.CENTER_X));
         bgCircle.setAttribute("cy", String(CircularProgressIndicator.CENTER_Y));
-        bgCircle.setAttribute("r", String(CircularProgressIndicator.RADIUS));
+        bgCircle.setAttribute("r", String(r));
         bgCircle.classList.add("progress-bg");
         this.domNode.appendChild(bgCircle);
-        this.progressPie = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this.progressPie.classList.add("progress-pie");
-        this.domNode.appendChild(this.progressPie);
+        this.progressCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        this.progressCircle.setAttribute("cx", String(CircularProgressIndicator.CENTER_X));
+        this.progressCircle.setAttribute("cy", String(CircularProgressIndicator.CENTER_Y));
+        this.progressCircle.setAttribute("r", String(r));
+        this.progressCircle.classList.add("progress-arc");
+        this.progressCircle.setAttribute("stroke-dasharray", String(this.circumference));
+        this.progressCircle.setAttribute("stroke-dashoffset", String(this.circumference));
+        this.domNode.appendChild(this.progressCircle);
     }
     setProgress(percentage) {
-        const cx = CircularProgressIndicator.CENTER_X;
-        const cy = CircularProgressIndicator.CENTER_Y;
-        const r = CircularProgressIndicator.RADIUS;
-        if (percentage >= 100) {
-            this.progressPie.setAttribute("d", `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.001} ${cy - r} Z`);
-        } else if (percentage <= 0) {
-            this.progressPie.setAttribute("d", "");
-        } else {
-            const angle = (percentage / 100) * 360;
-            const radians = (angle - 90) * (Math.PI / 180);
-            const x = cx + r * Math.cos(radians);
-            const y = cy + r * Math.sin(radians);
-            const largeArcFlag = angle > 180 ? 1 : 0;
-            const d = [
-            `M ${cx} ${cy}`,
-            `L ${cx} ${cy - r}`,
-            `A ${r} ${r} 0 ${largeArcFlag} 1 ${x} ${y}`,
-            "Z"].join(" ");
-            this.progressPie.setAttribute("d", d);
-        }
+        const clamped = Math.max(0, Math.min(100, percentage));
+        const offset = this.circumference - (clamped / 100) * this.circumference;
+        this.progressCircle.setAttribute("stroke-dashoffset", String(offset));
     }
 }
 let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
+    static {
+        ChatContextUsageWidget_1 = this;
+    }
     get isVisible() {
         return this._isVisible;
     }
-    constructor(hoverService, instantiationService, languageModelsService) {
+    static {
+        this._OPENED_STORAGE_KEY = "chat.contextUsage.hasBeenOpened";
+    }
+    static {
+        this._HOVER_ID = "chat.contextUsage";
+    }
+    constructor(
+        hoverService,
+        instantiationService,
+        languageModelsService,
+        contextKeyService,
+        storageService,
+        configurationService
+    ) {
         super();
         this.hoverService = hoverService;
         this.instantiationService = instantiationService;
         this.languageModelsService = languageModelsService;
+        this.contextKeyService = contextKeyService;
+        this.storageService = storageService;
+        this.configurationService = configurationService;
         this._onDidChangeVisibility = this._register(( new Emitter()));
         this.onDidChangeVisibility = this._onDidChangeVisibility.event;
         this._isVisible = observableValue(this, false);
         this._lastRequestDisposable = this._register(( new MutableDisposable()));
         this._hoverDisposable = this._register(( new MutableDisposable()));
         this._contextUsageDetails = this._register(( new MutableDisposable()));
+        this._hoverOptions = {
+            id: ChatContextUsageWidget_1._HOVER_ID,
+            appearance: {
+                showPointer: true,
+                compact: true
+            },
+            persistence: {
+                hideOnHover: false
+            },
+            trapFocus: true
+        };
         this.domNode = $(".chat-context-usage-widget");
         this.domNode.style.display = "none";
         this.domNode.setAttribute("tabindex", "0");
         this.domNode.setAttribute("role", "button");
-        this.domNode.setAttribute("aria-label", ( localize(6241, "Context window usage")));
+        this.domNode.setAttribute("aria-label", ( localize(6780, "Context window usage")));
         const iconContainer = this.domNode.appendChild($(".icon-container"));
         this.progressIndicator = ( new CircularProgressIndicator());
         iconContainer.appendChild(this.progressIndicator.domNode);
+        this._contextUsageOpenedKey = ChatContextKeys.contextUsageHasBeenOpened.bindTo(this.contextKeyService);
+        if (this.storageService.getBoolean(
+            ChatContextUsageWidget_1._OPENED_STORAGE_KEY,
+            StorageScope.WORKSPACE,
+            false
+        )) {
+            this._contextUsageOpenedKey.set(true);
+        }
+        this._enabled = this.configurationService.getValue(ChatConfiguration.ChatContextUsageEnabled) !== false;
+        this._register(this.configurationService.onDidChangeConfiguration(e => {
+            if (e.affectsConfiguration(ChatConfiguration.ChatContextUsageEnabled)) {
+                this._enabled = this.configurationService.getValue(ChatConfiguration.ChatContextUsageEnabled) !== false;
+                if (!this._enabled) {
+                    this.hide();
+                } else if (this.currentData) {
+                    this.show();
+                }
+            }
+        }));
         this.setupHover();
     }
+    showDetails() {
+        const details = this._createDetails();
+        if (!details) {
+            return false;
+        }
+        this.hoverService.showInstantHover({
+            ...this._hoverOptions,
+            content: details.domNode,
+            target: this.domNode,
+            persistence: {
+                hideOnHover: false,
+                sticky: true
+            }
+        }, true);
+        this._markOpened();
+        return true;
+    }
+    _createDetails() {
+        if (!this._isVisible.get() || !this.currentData) {
+            return undefined;
+        }
+        if (!this._contextUsageDetails.value) {
+            this._contextUsageDetails.value = this.instantiationService.createInstance(ChatContextUsageDetails);
+        }
+        this._contextUsageDetails.value.update(this.currentData);
+        return this._contextUsageDetails.value;
+    }
+    _markOpened() {
+        this._contextUsageOpenedKey.set(true);
+        this.storageService.store(
+            ChatContextUsageWidget_1._OPENED_STORAGE_KEY,
+            true,
+            StorageScope.WORKSPACE,
+            StorageTarget.MACHINE
+        );
+    }
     setupHover() {
         this._hoverDisposable.clear();
         const store = ( new DisposableStore());
         this._hoverDisposable.value = store;
-        const createDetails = () => {
-            if (!this._isVisible.get() || !this.currentData) {
-                return undefined;
-            }
-            this._contextUsageDetails.value = this.instantiationService.createInstance(ChatContextUsageDetails);
-            this._contextUsageDetails.value.update(this.currentData);
-            return this._contextUsageDetails.value;
-        };
-        const hoverOptions = {
-            appearance: {
-                showPointer: true,
-                compact: true
-            },
-            persistence: {
-                hideOnHover: false
-            },
-            trapFocus: true
-        };
         store.add(this.hoverService.setupDelayedHover(this.domNode, () => ({
-            ...hoverOptions,
-            content: createDetails()?.domNode ?? ""
+            ...this._hoverOptions,
+            content: this._createDetails()?.domNode ?? ""
         })));
-        const showStickyHover = () => {
-            const details = createDetails();
-            if (details) {
-                this.hoverService.showInstantHover({
-                    ...hoverOptions,
-                    content: details.domNode,
-                    target: this.domNode,
-                    persistence: {
-                        hideOnHover: false,
-                        sticky: true
-                    }
-                }, true);
-            }
-        };
         store.add(addDisposableListener(this.domNode, EventType.CLICK, e => {
             e.stopPropagation();
-            showStickyHover();
+            this.showDetails();
         }));
         store.add(addDisposableListener(this.domNode, EventType.KEY_DOWN, e => {
             const evt = ( new StandardKeyboardEvent(e));
             if (evt.equals(KeyCode.Space) || evt.equals(KeyCode.Enter)) {
                 e.preventDefault();
-                showStickyHover();
+                this.showDetails();
             }
         }));
     }
     update(lastRequest) {
         this._lastRequestDisposable.clear();
-        if (!lastRequest?.response || !lastRequest.modelId) {
+        if (!lastRequest) {
+            this.currentData = undefined;
             this.hide();
             return;
         }
+        if (!lastRequest.response || !lastRequest.modelId) {
+            if (!this.currentData) {
+                this.hide();
+            }
+            return;
+        }
         const response = lastRequest.response;
         const modelId = lastRequest.modelId;
-        this._lastRequestDisposable.value = autorun(reader => {
-            const isComplete = !response.isInProgress.read(reader);
-            if (isComplete) {
-                this.updateFromResponse(response, modelId);
-            }
+        this.updateFromResponse(response, modelId);
+        this._lastRequestDisposable.value = response.onDidChange(() => {
+            this.updateFromResponse(response, modelId);
         });
     }
     updateFromResponse(response, modelId) {
-        const usage = response.result?.usage;
+        const usage = response.usage;
         const modelMetadata = this.languageModelsService.lookupLanguageModel(modelId);
         const maxInputTokens = modelMetadata?.maxInputTokens;
-        if (!usage || !maxInputTokens || maxInputTokens <= 0) {
-            this.hide();
+        const maxOutputTokens = modelMetadata?.maxOutputTokens;
+        if (!usage || !maxInputTokens || maxInputTokens <= 0 || !maxOutputTokens || maxOutputTokens <= 0) {
+            if (!this.currentData) {
+                this.hide();
+            }
             return;
         }
         const promptTokens = usage.promptTokens;
         const promptTokenDetails = usage.promptTokenDetails;
-        const percentage = Math.min(100, (promptTokens / maxInputTokens) * 100);
-        this.render(percentage, promptTokens, maxInputTokens, promptTokenDetails);
+        const totalContextWindow = maxInputTokens + maxOutputTokens;
+        const usedTokens = promptTokens + maxOutputTokens;
+        const percentage = Math.min(100, (usedTokens / totalContextWindow) * 100);
+        this.render(percentage, usedTokens, totalContextWindow, promptTokenDetails);
         this.show();
     }
-    render(percentage, promptTokens, maxTokens, promptTokenDetails) {
+    render(percentage, usedTokens, totalContextWindow, promptTokenDetails) {
         this.currentData = {
-            promptTokens,
-            maxInputTokens: maxTokens,
+            usedTokens,
+            totalContextWindow,
             percentage,
             promptTokenDetails
         };
@@ -187,6 +246,9 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         }
     }
     show() {
+        if (!this._enabled) {
+            return;
+        }
         if (this.domNode.style.display === "none") {
             this.domNode.style.display = "";
             this._isVisible.set(true, undefined);
@@ -201,6 +263,6 @@ let ChatContextUsageWidget = class ChatContextUsageWidget extends Disposable {
         }
     }
 };
-ChatContextUsageWidget = ( __decorate([( __param(0, IHoverService)), ( __param(1, IInstantiationService)), ( __param(2, ILanguageModelsService))], ChatContextUsageWidget));
+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 };

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

@@ -8,6 +8,7 @@
 	align-items: center;
 	justify-content: center;
 	height: 22px;
+	width: 22px;
 	flex-shrink: 0;
 	cursor: pointer;
 	padding: 3px;
@@ -19,8 +20,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 16px;
-	height: 16px;
+	width: 14px;
+	height: 14px;
 	flex-shrink: 0;
 }
 
@@ -46,22 +47,26 @@
 }
 
 .chat-context-usage-widget .progress-bg {
-	fill: transparent;
-	stroke: var(--vscode-icon-foreground);
-	stroke-width: 2;
-	opacity: 0.4;
+	fill: none;
+	stroke: var(--vscode-disabledForeground);
+	stroke-width: 4;
+	opacity: 0.5;
 }
 
-.chat-context-usage-widget .progress-pie {
-	fill: var(--vscode-icon-foreground);
-	opacity: 0.8;
+.chat-context-usage-widget .progress-arc {
+	fill: none;
+	stroke: var(--vscode-descriptionForeground);
+	stroke-width: 4;
+	stroke-linecap: round;
+	transform: rotate(-90deg);
+	transform-origin: center;
 	pointer-events: none;
 }
 
-.chat-context-usage-widget.warning .progress-pie {
-	fill: var(--vscode-editorWarning-foreground);
+.chat-context-usage-widget.warning .progress-arc {
+	stroke: var(--vscode-editorWarning-foreground);
 }
 
-.chat-context-usage-widget.error .progress-pie {
-	fill: var(--vscode-editorError-foreground);
+.chat-context-usage-widget.error .progress-arc {
+	stroke: var(--vscode-editorError-foreground);
 }