Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 00:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Sessions: Update agent feedback widget styles for improved clarity and consistency (#306858)

Browse Source 
* style: update agent feedback widget styles for code review and adjust border radius

* style: adjust agent feedback widget colors for better visibility and consistency

* style: update agent feedback widget suggestion styles for improved layout and visual clarity

* style: enhance suggestion border for code review items with color-mix for better visibility

* style: update agent feedback widget suggestion header for improved clarity and consistency

Co-authored-by: Copilot <copilot@github.com>

* style: refactor suggestion rendering and improve CSS for consistency and clarity

Co-authored-by: Copilot <copilot@github.com>

* Update src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Michael Lively <12552271+Yoyokrazy@users.noreply.github.com>
This commit is contained in:
Lee Murray
2026-03-31 20:28:47 +01:00
committed by GitHub
parent dc93e83a60
commit ef8b671c06
2 changed files with 17 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/vs/sessions/contrib/agentFeedback/browser/agentFeedbackEditorWidgetContribution.ts
View File

@@ -286,19 +286,17 @@ export class AgentFeedbackEditorWidget extends Disposable implements IOverlayWid
private _renderSuggestion(comment: ISessionEditorComment): HTMLElement {
const suggestionNode = $('div.agent-feedback-widget-suggestion');
const title = $('div.agent-feedback-widget-suggestion-title');
title.textContent = nls.localize('suggestedChange', "Suggested Change");
suggestionNode.appendChild(title);
for (const edit of comment.suggestion?.edits ?? []) {
const editNode = $('div.agent-feedback-widget-suggestion-edit');
const rangeLabel = $('div.agent-feedback-widget-suggestion-range');
const header = $('div.agent-feedback-widget-suggestion-header');
if (edit.range.startLineNumber === edit.range.endLineNumber) {
rangeLabel.textContent = nls.localize('suggestionLineNumber', "Line {0}", edit.range.startLineNumber);
header.textContent = nls.localize('suggestedChangeLine', "Suggested Change \u2022 Line {0}", edit.range.startLineNumber);
} else {
rangeLabel.textContent = nls.localize('suggestionLineRange', "Lines {0}-{1}", edit.range.startLineNumber, edit.range.endLineNumber);
header.textContent = nls.localize('suggestedChangeLines', "Suggested Change \u2022 Lines {0}-{1}", edit.range.startLineNumber, edit.range.endLineNumber);
}
editNode.appendChild(rangeLabel);
editNode.appendChild(header);
const newText = $('pre.agent-feedback-widget-suggestion-text');
newText.textContent = edit.newText;

32
src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css
View File

@@ -85,6 +85,7 @@
/* Title */
.agent-feedback-widget-title {
font-weight: 500;
line-height: 12px;
color: var(--vscode-foreground);
white-space: nowrap;
overflow: hidden;
@@ -104,6 +105,7 @@
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border-radius: var(--vscode-cornerRadius-medium);
cursor: pointer;
color: var(--vscode-foreground);
@@ -154,14 +156,6 @@
color: var(--vscode-list-activeSelectionForeground);
}
.agent-feedback-widget-item-codeReview {
box-shadow: inset 2px 0 0 var(--vscode-editorWarning-foreground);
}
.agent-feedback-widget-item-prReview {
box-shadow: inset 2px 0 0 var(--vscode-editorInfo-foreground);
}
.agent-feedback-widget-item-header {
display: flex;
align-items: center;
@@ -195,7 +189,7 @@
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
@@ -204,12 +198,12 @@
}
.agent-feedback-widget-item-codeReview .agent-feedback-widget-item-type {
background: color-mix(in srgb, var(--vscode-editorWarning-foreground) 22%, transparent);
background: color-mix(in srgb, var(--vscode-editorWarning-foreground) 22%, var(--vscode-editorWidget-background));
color: var(--vscode-editorWarning-foreground);
}
.agent-feedback-widget-item-prReview .agent-feedback-widget-item-type {
background: color-mix(in srgb, var(--vscode-editorInfo-foreground) 22%, transparent);
background: color-mix(in srgb, var(--vscode-editorInfo-foreground) 22%, var(--vscode-editorWidget-background));
color: var(--vscode-editorInfo-foreground);
}
@@ -244,21 +238,19 @@
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border-radius: 6px;
background: color-mix(in srgb, var(--vscode-editorWidget-border, var(--vscode-widget-border)) 12%, transparent);
margin-top: 8px;
padding: 0px 8px 4px 12px;
}
.agent-feedback-widget-item-codeReview .agent-feedback-widget-suggestion {
background: color-mix(in srgb, var(--vscode-editorWarning-foreground) 10%, transparent);
border-left: 1px solid color-mix(in srgb, var(--vscode-editorWarning-foreground) 50%, transparent);
}
.agent-feedback-widget-item-prReview .agent-feedback-widget-suggestion {
background: color-mix(in srgb, var(--vscode-editorInfo-foreground) 10%, transparent);
border-left: 1px solid color-mix(in srgb, var(--vscode-editorInfo-foreground) 50%, transparent);
}
.agent-feedback-widget-suggestion-title,
.agent-feedback-widget-suggestion-range {
.agent-feedback-widget-suggestion-header {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
@@ -278,10 +270,10 @@
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
font-family: monospace;
font-family: var(--monaco-monospace-font);
font-size: 11px;
line-height: 1.45;
background: color-mix(in srgb, var(--vscode-editor-background) 65%, transparent);
background: var(--vscode-editorWidget-background);
}
/* Gutter decoration for range indicator on hover */