Fix context indicator (#300917)

This commit is contained in:
Logan Ramos
2026-03-11 17:28:34 -04:00
committed by GitHub
parent 383c174f7a
commit b49670d4a1
3 changed files with 28 additions and 12 deletions

View File

@@ -136,13 +136,11 @@ export class ChatContextUsageDetails extends Disposable {
this.outputBufferLegend.style.display = 'none';
}
// Color classes based on total spoken-for percentage
// (actual usage + remaining reserve)
const effectivePercentage = percentage + (outputBufferPercentage ?? 0);
// Color classes based on actual usage percentage
this.quotaItem.classList.remove('warning', 'error');
if (effectivePercentage >= 90) {
if (percentage >= 90) {
this.quotaItem.classList.add('error');
} else if (effectivePercentage >= 75) {
} else if (percentage >= 75) {
this.quotaItem.classList.add('warning');
}

View File

@@ -295,21 +295,19 @@ export class ChatContextUsageWidget extends Disposable {
// Store current data for use in details popup
this.currentData = { usedTokens, completionTokens, totalContextWindow, percentage, outputBufferPercentage, promptTokenDetails };
// Pie chart shows actual usage + remaining reserve so the user can see
// how much of the context window is spoken for.
this.progressIndicator.setProgress(percentage + (outputBufferPercentage ?? 0));
// Pie chart shows actual usage percentage only
this.progressIndicator.setProgress(percentage);
// Update percentage label and aria-label (clamp display to 100)
const roundedPercentage = Math.min(100, Math.round(percentage));
this.percentageLabel.textContent = `${roundedPercentage}%`;
this.domNode.setAttribute('aria-label', localize('contextUsagePercentageLabel', "Context window usage: {0}%", roundedPercentage));
// Color based on total spoken-for percentage (usage + remaining reserve)
const effectivePercentage = percentage + (outputBufferPercentage ?? 0);
// Color based on actual usage percentage
this.domNode.classList.remove('warning', 'error');
if (effectivePercentage >= 90) {
if (percentage >= 90) {
this.domNode.classList.add('error');
} else if (effectivePercentage >= 75) {
} else if (percentage >= 75) {
this.domNode.classList.add('warning');
}
}

View File

@@ -101,6 +101,16 @@
flex-shrink: 0;
}
.chat-context-usage-details .quota-indicator.warning .output-buffer-swatch {
background: repeating-linear-gradient(
-45deg,
var(--vscode-gauge-warningForeground),
var(--vscode-gauge-warningForeground) 2px,
transparent 2px,
transparent 4px
);
}
.chat-context-usage-details .quota-indicator.warning .quota-bar {
background-color: var(--vscode-gauge-warningBackground);
}
@@ -119,6 +129,16 @@
);
}
.chat-context-usage-details .quota-indicator.error .output-buffer-swatch {
background: repeating-linear-gradient(
-45deg,
var(--vscode-gauge-errorForeground),
var(--vscode-gauge-errorForeground) 2px,
transparent 2px,
transparent 4px
);
}
.chat-context-usage-details .quota-indicator.error .quota-bar {
background-color: var(--vscode-gauge-errorBackground);
}