From b125c373a94c2431738c69d64ed09ca902c0fb98 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 30 Mar 2026 14:56:45 +0100 Subject: [PATCH 1/7] refactor: clean up agent feedback widget styles and update title display Co-authored-by: Copilot --- .../agentFeedbackEditorInputContribution.ts | 2 -- .../agentFeedbackEditorWidgetContribution.ts | 5 ++++- .../media/agentFeedbackEditorInput.css | 4 ++++ .../media/agentFeedbackEditorWidget.css | 21 +++++++++++-------- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorInputContribution.ts b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorInputContribution.ts index ae5fa614c3d..ed6ccc8912f 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorInputContribution.ts +++ b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorInputContribution.ts @@ -95,8 +95,6 @@ class AgentFeedbackInputWidget implements IOverlayWidget { this._updateActionForAlt(status.altKey); }); - this._editor.applyFontInfo(this._inputElement); - this._editor.applyFontInfo(this._measureElement); this._lineHeight = 22; this._inputElement.style.lineHeight = `${this._lineHeight}px`; } diff --git a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts index b0206052dc8..a9b5036d9b0 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts +++ b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts @@ -88,6 +88,9 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid // Header this._headerNode = $('div.agent-feedback-widget-header'); + // Comment icon + this._headerNode.appendChild(renderIcon(Codicon.comment)); + // Title showing feedback count this._titleNode = $('span.agent-feedback-widget-title'); this._updateTitle(); @@ -148,7 +151,7 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid private _updateTitle(): void { const count = this._commentItems.length; if (count === 1) { - this._titleNode.textContent = nls.localize('oneComment', "1 comment"); + this._titleNode.textContent = this._commentItems[0].text; } else { this._titleNode.textContent = nls.localize('nComments', "{0} comments", count); } diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css index b467ff7f7aa..0d067dcd649 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css @@ -20,6 +20,8 @@ background-color: var(--vscode-panel-background); border: none; color: var(--vscode-input-foreground); + font: inherit; + font-size: 13px; border-radius: 4px; padding: 0 0 0 6px; outline: none; @@ -49,6 +51,8 @@ height: 0; overflow: hidden; white-space: pre; + font: inherit; + font-size: 13px; } .agent-feedback-input-widget .agent-feedback-input-actions { diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css index ef551fd0870..ae54b981a9d 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css @@ -35,13 +35,13 @@ /* Arrow pointer pointing left toward the code */ .agent-feedback-widget-arrow { position: absolute; - left: -8px; - top: 9px; + left: -6px; + top: 11px; width: 0; height: 0; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - border-right: 8px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder)); + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 6px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder)); } .agent-feedback-widget.collapsed .agent-feedback-widget-arrow { @@ -52,12 +52,12 @@ content: ''; position: absolute; left: 2px; - top: -7px; + top: -5px; width: 0; height: 0; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; - border-right: 7px solid var(--vscode-editorWidget-background); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid var(--vscode-editorWidget-background); } /* Header */ @@ -86,6 +86,9 @@ font-weight: 500; color: var(--vscode-foreground); white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } /* Spacer to push buttons to the right */ From 4668c2651ae295d9e5c6a13e593569bfede6d5b7 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 30 Mar 2026 15:25:11 +0100 Subject: [PATCH 2/7] style: adjust padding and alignment in agent feedback widget items --- .../browser/media/agentFeedbackEditorWidget.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css index ae54b981a9d..b710cdccc4e 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css @@ -42,6 +42,7 @@ border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder)); + display: none; } .agent-feedback-widget.collapsed .agent-feedback-widget-arrow { @@ -133,7 +134,7 @@ .agent-feedback-widget-item { display: flex; flex-direction: column; - padding: 8px 10px; + padding: 4px 8px 6px 12px; border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border)); cursor: pointer; position: relative; @@ -163,7 +164,7 @@ .agent-feedback-widget-item-header { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; gap: 8px; } From 18dbdd1270cba5d8460b0a2c4e65b4c14d462aa3 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 30 Mar 2026 17:05:49 +0100 Subject: [PATCH 3/7] style: adjust padding and dimensions in agent feedback widget header and items Co-authored-by: Copilot --- .../browser/media/agentFeedbackEditorWidget.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css index b710cdccc4e..84711feeb12 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css @@ -65,7 +65,7 @@ .agent-feedback-widget-header { display: flex; align-items: center; - padding: 8px 10px; + padding: 4px 4px 4px 8px; border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border)); border-radius: 8px 8px 0 0; overflow: hidden; @@ -102,9 +102,9 @@ display: flex; align-items: center; justify-content: center; - width: 18px; - height: 18px; - border-radius: 4px; + width: 22px; + height: 22px; + border-radius: var(--vscode-cornerRadius-medium); cursor: pointer; color: var(--vscode-foreground); opacity: 0.7; @@ -134,7 +134,7 @@ .agent-feedback-widget-item { display: flex; flex-direction: column; - padding: 4px 8px 6px 12px; + padding: 4px 4px 4px 8px; border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border)); cursor: pointer; position: relative; @@ -293,7 +293,7 @@ /* Inline edit textarea */ .agent-feedback-widget-text.editing { - padding: 0; + padding: 0 4px 0 0; } .agent-feedback-widget-edit-textarea { @@ -304,6 +304,7 @@ border-radius: 4px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); + font: inherit; font-size: 12px; line-height: 1.4; resize: none; From ec0ca2c4478c827ddb026d3bf55117b81fe9e256 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 30 Mar 2026 17:15:24 +0100 Subject: [PATCH 4/7] style: enhance agent feedback input widget with animation and adjust padding in items --- .../browser/media/agentFeedbackEditorInput.css | 14 +++++++++++++- .../browser/media/agentFeedbackEditorWidget.css | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css index 0d067dcd649..076331df6c7 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css @@ -7,13 +7,25 @@ position: absolute; z-index: 10000; background-color: var(--vscode-panel-background); - border: 1px solid var(--vscode-agentFeedbackInputWidget-border, var(--vscode-input-border, var(--vscode-widget-border))); + border: 1px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder)); box-shadow: var(--vscode-shadow-lg); border-radius: 8px; padding: 4px; display: flex; flex-direction: row; align-items: flex-end; + animation: agentFeedbackInputAppear 0.15s ease-out; +} + +@keyframes agentFeedbackInputAppear { + from { + opacity: 0; + transform: translateY(4px); + } + to { + opacity: 1; + transform: translateY(0); + } } .agent-feedback-input-widget textarea { diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css index 84711feeb12..22db201e709 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css @@ -134,7 +134,7 @@ .agent-feedback-widget-item { display: flex; flex-direction: column; - padding: 4px 4px 4px 8px; + padding: 4px 4px 8px 8px; border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border)); cursor: pointer; position: relative; From 1efdec3f0c4511c2d7b7f2e317e60bcaa6af33be Mon Sep 17 00:00:00 2001 From: Lee Murray Date: Mon, 30 Mar 2026 17:25:20 +0100 Subject: [PATCH 5/7] Update src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../browser/agentFeedbackEditorWidgetContribution.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts index a9b5036d9b0..7c4c463f391 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts +++ b/src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts @@ -88,8 +88,10 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid // Header this._headerNode = $('div.agent-feedback-widget-header'); - // Comment icon - this._headerNode.appendChild(renderIcon(Codicon.comment)); + // Comment icon (decorative, hidden from screen readers) + const commentIcon = renderIcon(Codicon.comment); + commentIcon.setAttribute('aria-hidden', 'true'); + this._headerNode.appendChild(commentIcon); // Title showing feedback count this._titleNode = $('span.agent-feedback-widget-title'); From c892221c72b97aa720444414904584ab152fd35f Mon Sep 17 00:00:00 2001 From: Lee Murray Date: Mon, 30 Mar 2026 17:25:53 +0100 Subject: [PATCH 6/7] Update src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../browser/media/agentFeedbackEditorInput.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css index 076331df6c7..7a764dc47d2 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css @@ -28,6 +28,12 @@ } } +@media (prefers-reduced-motion: reduce) { + .agent-feedback-input-widget { + animation: none; + transform: none; + } +} .agent-feedback-input-widget textarea { background-color: var(--vscode-panel-background); border: none; From cb1415cf488e8ce963c75d7ee6480a4b55f9cdf4 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Mon, 30 Mar 2026 17:34:29 +0100 Subject: [PATCH 7/7] style: update agent feedback input widget border color and adjust textarea font size --- src/vs/sessions/common/theme.ts | 6 +++--- .../browser/media/agentFeedbackEditorInput.css | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/vs/sessions/common/theme.ts b/src/vs/sessions/common/theme.ts index 2217701d347..50f9beac5fe 100644 --- a/src/vs/sessions/common/theme.ts +++ b/src/vs/sessions/common/theme.ts @@ -5,9 +5,9 @@ import { localize } from '../../nls.js'; import { getColorRegistry, registerColor, transparent } from '../../platform/theme/common/colorUtils.js'; -import { contrastBorder, iconForeground } from '../../platform/theme/common/colorRegistry.js'; +import { contrastBorder } from '../../platform/theme/common/colorRegistry.js'; +import { editorWidgetBorder, editorBackground } from '../../platform/theme/common/colors/editorColors.js'; import { buttonBackground } from '../../platform/theme/common/colors/inputColors.js'; -import { editorBackground } from '../../platform/theme/common/colors/editorColors.js'; import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_FOREGROUND } from '../../workbench/common/theme.js'; // Sessions sidebar background color @@ -67,7 +67,7 @@ export const chatBarTitleForeground = registerColor( // Agent feedback input widget border color export const agentFeedbackInputWidgetBorder = registerColor( 'agentFeedbackInputWidget.border', - { dark: transparent(iconForeground, 0.8), light: transparent(iconForeground, 0.8), hcDark: contrastBorder, hcLight: contrastBorder }, + { dark: editorWidgetBorder, light: editorWidgetBorder, hcDark: contrastBorder, hcLight: contrastBorder }, localize('agentFeedbackInputWidget.border', 'Border color of the agent feedback input widget shown in the editor.') ); diff --git a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css index 7a764dc47d2..82ed568e036 100644 --- a/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css +++ b/src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css @@ -7,7 +7,7 @@ position: absolute; z-index: 10000; background-color: var(--vscode-panel-background); - border: 1px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder)); + border: 1px solid var(--vscode-agentFeedbackInputWidget-border, var(--vscode-editorWidget-border, var(--vscode-contrastBorder))); box-shadow: var(--vscode-shadow-lg); border-radius: 8px; padding: 4px; @@ -39,7 +39,6 @@ border: none; color: var(--vscode-input-foreground); font: inherit; - font-size: 13px; border-radius: 4px; padding: 0 0 0 6px; outline: none;