Cleanup chat status widget further by lramos15 · Pull Request #310177 · microsoft/vscode

lramos15 · 2026-04-15T16:26:53Z

No description provided.

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR continues the cleanup of the chat status tooltip UI, primarily by restructuring quota indicator markup/styling and removing the “Agent Sessions” section from the dashboard.

Changes:

Refactors quota indicator UI (new title/details layout, updated bar sizing, warning/error emphasis).
Adjusts quota reset formatting (separate date/time formatters; “Resets …” label integrated into quota header).
Removes agent sessions rendering and related service dependencies from the dashboard.

Show a summary per file

File	Description
src/vs/workbench/contrib/chat/browser/chatStatus/media/chatStatus.css	Updates quota indicator styling/layout and adds warning/error visual treatments.
src/vs/workbench/contrib/chat/browser/chatStatus/chatStatusDashboard.ts	Simplifies dashboard dependencies, restructures quota indicator DOM, and updates reset/usage labeling logic.

Copilot's findings

Files reviewed: 2/2 changed files
Comments generated: 6

Copilot · 2026-04-15T16:33:43Z

+		const resetValue = $('span.quota-reset');
+
+		if (resetLabel) {
+			resetValue.textContent = resetLabel;
+		}

 		const quotaIndicator = container.appendChild($('div.quota-indicator', undefined,
-			$('div.quota-label', undefined,
-				$('span', undefined, label),
-				quotaValue
+			$('div.quota-title', undefined, label),
+			$('div.quota-details', undefined,
+				$('div.quota-percentage', undefined,
+					quotaValue,
+					quotaValueSuffix
+				),
+				resetValue
 			),


resetValueis always inserted into the flex row, even whenresetLabelis undefined. In cases like the “Limited” string quota path (noresetLabelpassed), this extra empty flex item can affect spacing/justify-content behavior. Prefer to only create/append the reset element whenresetLabelis present, or hide it when empty (e.g., conditional DOM or a CSS:empty { display: none; }rule for.quota-reset`).

Copilot · 2026-04-15T16:33:43Z

+		container.appendChild($('div.description', undefined, overageLabel));
+
 		if (supportsOverage && (this.chatEntitlementService.entitlement === ChatEntitlement.EDU || this.chatEntitlementService.entitlement === ChatEntitlement.Pro || this.chatEntitlementService.entitlement === ChatEntitlement.ProPlus)) {
-			const manageOverageButton = disposables.add(new Button(quotaIndicator, { ...defaultButtonStyles, secondary: true, hoverDelegate: nativeHoverDelegate }));
+			const manageOverageButton = disposables.add(new Button(container, { ...defaultButtonStyles, secondary: true, hoverDelegate: nativeHoverDelegate }));


The overage description row is appended unconditionally, even when supportsOverage is false (or when no overage messaging will be set), leaving an always-present wrapper around an often-empty overageLabel. This can introduce blank vertical space in the tooltip. Create/append that description row only when supportsOverage is true (or when you actually set content), or remove/hide the row when the label ends up empty."

Copilot · 2026-04-15T16:33:43Z

+				quotaValue.textContent = `+${this.quotaOverageFormatter.value.format(quota.overageCount)}`;
+				quotaValueSuffix.textContent = ` ${localize('quotaOverageRequests', "requests")}`;
 			} else {
 				quotaValue.textContent = localize('quotaDisplay', "{0}%", this.quotaPercentageFormatter.value.format(usedPercentage));
+				quotaValueSuffix.textContent = ` ${localize('quotaUsed', "used")}`;
 			}


The UI string is being split across quotaValue and quotaValueSuffix using manual string concatenation and leading spaces. This is fragile for localization (ordering/spacing can differ, and some locales may require different grammar), and it makes it harder to translate correctly. Prefer a single localized message with placeholders that covers the full rendered text (even if you still style parts differently, you can keep the full localized string in an attribute for a11y, or use a single localize value and split more safely without hardcoded spaces)."

Copilot · 2026-04-15T16:33:43Z

-			const chatQuotaIndicator = chatQuota && (chatQuota.total > 0 || chatQuota.unlimited) ? this.createQuotaIndicator(container, this._store, chatQuota, localize('chatsLabel', "Chat messages"), false) : undefined;
-			const premiumChatLabel = premiumChatQuota?.overageEnabled && !premiumChatQuota?.unlimited ? localize('includedPremiumChatsLabel', "Included premium requests") : localize('premiumChatsLabel', "Premium requests");
-			const premiumChatQuotaIndicator = premiumChatQuota && (premiumChatQuota.total > 0 || premiumChatQuota.unlimited) ? this.createQuotaIndicator(container, this._store, premiumChatQuota, premiumChatLabel, true) : undefined;
+			const resetLabel = resetDate ? (resetDateHasTime ? localize('quotaResetsAt', "Resets {0} at {1}", this.dateFormatter.value.format(new Date(resetDate)), this.timeFormatter.value.format(new Date(resetDate))) : localize('quotaResets', "Resets {0}", this.dateFormatter.value.format(new Date(resetDate)))) : undefined;


The resetLabel construction is duplicated in multiple places with the same localization keys and formatting. To keep future changes consistent (e.g., wording, date/time formatting, punctuation), factor this into a small helper method (e.g., getQuotaResetLabel() returning string | undefined) and reuse it."

See below for a potential fix:

private getQuotaResetLabel(resetDate: number | string | Date | undefined, resetDateHasTime: boolean): string | undefined { if (!resetDate) { return undefined; } const date = new Date(resetDate); return resetDateHasTime ? localize('quotaResetsAt', "Resets {0} at {1}", this.dateFormatter.value.format(date), this.timeFormatter.value.format(date)) : localize('quotaResets', "Resets {0}", this.dateFormatter.value.format(date)); } private renderUsageContent(container: HTMLElement, token: CancellationToken, updatePromise?: Promise<void>): void { const { chat: chatQuota, completions: completionsQuota, premiumChat: premiumChatQuota, resetDate, resetDateHasTime } = this.chatEntitlementService.quotas; if (chatQuota || premiumChatQuota) { const resetLabel = this.getQuotaResetLabel(resetDate, resetDateHasTime);

Copilot · 2026-04-15T16:33:44Z

+			const { completions: completionsQuota, resetDate, resetDateHasTime } = this.chatEntitlementService.quotas;
+			const resetLabel = resetDate ? (resetDateHasTime ? localize('quotaResetsAt', "Resets {0} at {1}", this.dateFormatter.value.format(new Date(resetDate)), this.timeFormatter.value.format(new Date(resetDate))) : localize('quotaResets', "Resets {0}", this.dateFormatter.value.format(new Date(resetDate)))) : undefined;


The resetLabel construction is duplicated in multiple places with the same localization keys and formatting. To keep future changes consistent (e.g., wording, date/time formatting, punctuation), factor this into a small helper method (e.g., getQuotaResetLabel() returning string | undefined) and reuse it."

See below for a potential fix:

private getQuotaResetLabel(resetDate: number | undefined, resetDateHasTime: boolean | undefined): string | undefined { if (!resetDate) { return undefined; } const date = new Date(resetDate); return resetDateHasTime ? localize('quotaResetsAt', "Resets {0} at {1}", this.dateFormatter.value.format(date), this.timeFormatter.value.format(date)) : localize('quotaResets', "Resets {0}", this.dateFormatter.value.format(date)); } private renderInlineSuggestionsContent(container: HTMLElement, token: CancellationToken, updatePromise?: Promise<void>): void { // Completions quota { const { completions: completionsQuota, resetDate, resetDateHasTime } = this.chatEntitlementService.quotas; const resetLabel = this.getQuotaResetLabel(resetDate, resetDateHasTime);

Copilot · 2026-04-15T16:33:44Z

 		if (supportsOverage && (this.chatEntitlementService.entitlement === ChatEntitlement.EDU || this.chatEntitlementService.entitlement === ChatEntitlement.Pro || this.chatEntitlementService.entitlement === ChatEntitlement.ProPlus)) {
-			const manageOverageButton = disposables.add(new Button(quotaIndicator, { ...defaultButtonStyles, secondary: true, hoverDelegate: nativeHoverDelegate }));
+			const manageOverageButton = disposables.add(new Button(container, { ...defaultButtonStyles, secondary: true, hoverDelegate: nativeHoverDelegate }));
 			manageOverageButton.label = localize('enableAdditionalUsage', "Manage paid premium requests");


The “Manage paid premium requests” button is now attached to container rather than the quota indicator block (quotaIndicator). This can make the layout/order harder to reason about when multiple quota indicators are rendered (button may visually group with the wrong indicator depending on surrounding DOM/CSS). Consider appending the button to the specific quota indicator (or to a dedicated actions container inside it) so the DOM structure matches the visual grouping."

github-actions · 2026-04-15T17:22:06Z

Screenshot Changes

Base: 4b5765fe Current: d73f414b

Changed (2)

chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Light

Before	After

editor/inlineCompletions/other/JumpToHint/Dark

Before	After

Cleanup chat status widget further

8fb7503

Copilot AI review requested due to automatic review settings April 15, 2026 16:26

lramos15 enabled auto-merge (squash) April 15, 2026 16:26

lramos15 self-assigned this Apr 15, 2026

Copilot AI reviewed Apr 15, 2026

View reviewed changes

Copilot started reviewing on behalf of lramos15 April 15, 2026 16:42 View session

roblourens approved these changes Apr 15, 2026

View reviewed changes

lramos15 merged commit 138f4b6 into main Apr 15, 2026
30 checks passed

lramos15 deleted the lramos15/compulsory-swift branch April 15, 2026 17:34

vs-code-engineering bot added this to the 1.117.0 milestone Apr 15, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cleanup chat status widget further#310177

Cleanup chat status widget further#310177
lramos15 merged 1 commit intomainfrom
lramos15/compulsory-swift

lramos15 commented Apr 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

github-actions bot commented Apr 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const { completions: completionsQuota, resetDate, resetDateHasTime } = this.chatEntitlementService.quotas;
		const resetLabel = resetDate ? (resetDateHasTime ? localize('quotaResetsAt', "Resets {0} at {1}", this.dateFormatter.value.format(new Date(resetDate)), this.timeFormatter.value.format(new Date(resetDate))) : localize('quotaResets', "Resets {0}", this.dateFormatter.value.format(new Date(resetDate)))) : undefined;

Conversation

lramos15 commented Apr 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 15, 2026

Screenshot Changes

Changed (2)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants