Use report-question icon for sessions needing attention

package.json

@@ -113,7 +113,7 @@
     "@microsoft/dev-tunnels-ssh-tcp": "^3.12.22",
     "@parcel/watcher": "^2.5.6",
     "@types/semver": "^7.5.8",
-    "@vscode/codicons": "^0.0.46-43",
+    "@vscode/codicons": "^0.0.46-44",
     "@vscode/copilot-api": "^0.5.2",
     "@vscode/deviceid": "^0.1.1",
     "@vscode/diff": "0.0.2-7",

remote/web/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@microsoft/1ds-core-js": "^3.2.13",
     "@microsoft/1ds-post-js": "^3.2.13",
-    "@vscode/codicons": "^0.0.46-43",
+    "@vscode/codicons": "^0.0.46-44",
     "@vscode/iconv-lite-umd": "0.7.1",
     "@vscode/tree-sitter-wasm": "^0.3.1",
     "@vscode/vscode-languagedetection": "1.0.23",

src/vs/base/common/codiconsLibrary.ts

@@ -771,4 +771,5 @@ export const codiconsLibrary = {
 	layoutDensityDefault: register('layout-density-default', 0xecf5),
 	gripperCorner: register('gripper-corner', 0xecf6),
 	meteredConnection: register('metered-connection', 0xecf7),
+	reportQuestion: register('report-question', 0xecf8),
 } as const;

src/vs/sessions/contrib/sessions/test/browser/sessionsList.fixture.ts

@@ -317,7 +317,7 @@ export default defineThemedFixtureGroup({ path: 'sessions/' }, {
 	}, {
 		labels: { kind: 'screenshot' },
 		additionalThemes: ['darkHighContrast', 'lightHighContrast'],
-		expectedVisualDescriptions: ['All sections are collapsed. Orange report icons replace the icons for Release work and vscode-docs, taking priority over unread indicators. The vscode section retains its folder icon because its needs-attention session appears only in Release work.'],
+		expectedVisualDescriptions: ['All sections are collapsed. Orange report-question icons replace the icons for Release work and vscode-docs, taking priority over unread indicators. The vscode section retains its folder icon because its needs-attention session appears only in Release work.'],
 	}),
 	SessionsList_CollapsedNeedsInputSections_Disabled: defineSessionsListFixture({
 		sessions: COLLAPSED_NEEDS_INPUT_SESSIONS,

src/vs/sessions/contrib/sessions/test/browser/sessionsList.test.ts

@@ -1162,7 +1162,7 @@ suite('Sessions - SessionsList', () => {
 
 		function needsInputSections(container: HTMLElement): string[] {
 			return [...container.querySelectorAll('.session-section')]
-				.filter(header => header.querySelector('.session-section-icon .codicon-report'))
+				.filter(header => header.querySelector('.session-section-icon .codicon-report-question'))
 				.map(header => header.querySelector('.session-section-label')!.textContent!);
 		}
 
@@ -1253,7 +1253,7 @@ suite('Sessions - SessionsList', () => {
 				return {
 					ariaLabel: header.closest('.monaco-list-row')?.getAttribute('aria-label'),
 					icon: header.querySelector('.session-section-icon')?.className,
-					indicator: !!header.querySelector('.codicon-circle-filled, .codicon-report, .monaco-pixel-spinner'),
+					indicator: !!header.querySelector('.codicon-circle-filled, .codicon-report-question, .monaco-pixel-spinner'),
 				};
 			}), [
 				{ ariaLabel: 'Group A, 1', icon: 'session-section-icon codicon codicon-folder-library', indicator: false },
@@ -1362,7 +1362,7 @@ suite('Sessions - SessionsList', () => {
 				const label = grouped ? group.name : 'Workspace';
 				const header = getHeader(container, label);
 				const getStatus = () => {
-					if (header.querySelector('.codicon-report')) {
+					if (header.querySelector('.codicon-report-question')) {
 						return 'needsInput';
 					}
 					const dot = header.querySelector<HTMLElement>('.codicon-circle-filled');
@@ -1412,17 +1412,17 @@ suite('Sessions - SessionsList', () => {
 				} : {});
 				const label = grouped ? group.name : 'Workspace';
 				const header = getHeader(container, label);
-				const getStatus = () => header.querySelector('.codicon-report') ? 'needsInput' : header.querySelector('.codicon-circle-filled') ? 'unread' : 'none';
+				const getStatus = () => header.querySelector('.codicon-report-question') ? 'needsInput' : header.querySelector('.codicon-circle-filled') ? 'unread' : 'none';
 				const states = [getStatus()];
 				const hiddenNeedsInput = !list.getVisibleSessions().some(session => session.sessionId === needsInput.session.sessionId);
 
 				list.collapseAllSections();
 				states.push(getStatus());
-				const reportIcon = header.querySelector<HTMLElement>('.codicon-report');
+				const reportQuestionIcon = header.querySelector<HTMLElement>('.codicon-report-question');
 				const needsInputAria = header.closest('.monaco-list-row')?.getAttribute('aria-label');
 				unread.isRead.set(true, undefined);
 				unread.isRead.set(false, undefined);
-				const preservesReportIcon = !!reportIcon && reportIcon === header.querySelector('.codicon-report');
+				const preservesReportQuestionIcon = !!reportQuestionIcon && reportQuestionIcon === header.querySelector('.codicon-report-question');
 				needsInput.status.set(SessionStatus.Completed, undefined);
 				states.push(getStatus());
 				const unreadAria = header.closest('.monaco-list-row')?.getAttribute('aria-label');
@@ -1445,16 +1445,16 @@ suite('Sessions - SessionsList', () => {
 				assert.deepStrictEqual({
 					hiddenNeedsInput,
 					states,
-					preservesReportIcon,
-					color: reportIcon?.style.color,
+					preservesReportQuestionIcon,
+					color: reportQuestionIcon?.style.color,
 					needsInputAria,
 					unreadAria,
 					expandedPulse,
 					clearedPulse: !!header.querySelector('.session-icon-pulse'),
 				}, {
 					hiddenNeedsInput: true,
 					states: ['none', 'needsInput', 'unread', 'needsInput', 'unread', 'needsInput', 'none', 'needsInput', 'unread', 'none'],
-					preservesReportIcon: true,
+					preservesReportQuestionIcon: true,
 					color: 'var(--vscode-list-warningForeground)',
 					needsInputAria: `${label}, 6, session needs attention`,
 					unreadAria: `${label}, 6, contains unread sessions`,
@@ -1588,20 +1588,20 @@ suite('Sessions - SessionsList', () => {
 			});
 		});
 
-		test('uses the report icon for needs-attention with reduced motion', () => {
+		test('uses the report-question icon for needs-attention with reduced motion', () => {
 			const { session } = createTestSession('Needs input', { status: SessionStatus.NeedsInput });
 			const { list, container } = renderList([session], {}, true);
 			list.collapseAllSections();
 			const header = getHeader(container, 'Workspace');
 
 			assert.deepStrictEqual({
 				hasSpinner: !!header.querySelector('.monaco-pixel-spinner'),
-				hasReportIcon: !!header.querySelector('.codicon-report'),
-				color: header.querySelector<HTMLElement>('.codicon-report')?.style.color,
+				hasReportQuestionIcon: !!header.querySelector('.codicon-report-question'),
+				color: header.querySelector<HTMLElement>('.codicon-report-question')?.style.color,
 				ariaLabel: header.closest('.monaco-list-row')?.getAttribute('aria-label'),
 			}, {
 				hasSpinner: false,
-				hasReportIcon: true,
+				hasReportQuestionIcon: true,
 				color: 'var(--vscode-list-warningForeground)',
 				ariaLabel: 'Workspace, 1, session needs attention',
 			});
@@ -1624,7 +1624,7 @@ suite('Sessions - SessionsList', () => {
 				const header = getHeader(container, label);
 				return {
 					ariaLabel: header.closest('.monaco-list-row')?.getAttribute('aria-label'),
-					indicator: !!header.querySelector('.codicon-circle-filled, .codicon-report, .monaco-pixel-spinner'),
+					indicator: !!header.querySelector('.codicon-circle-filled, .codicon-report-question, .monaco-pixel-spinner'),
 				};
 			}), [
 				{ ariaLabel: 'Group A, 0', indicator: false },

src/vs/sessions/services/sessions/browser/sessionsListModelService.ts

@@ -89,7 +89,7 @@ export interface ISessionsListModelService {
 	 *
 	 * Note: when motion is allowed, surfaces that host a {@link SessionStatusIcon}
 	 * (sessions list, session header) render a pixel spinner for `InProgress`.
-	 * Other states, including the pulsing report icon for `NeedsInput`, use the
+	 * Other states, including the pulsing report-question icon for `NeedsInput`, use the
 	 * icon returned here. Surfaces that don't host the widget, such as the
 	 * sessions picker, also use these icons.
 	 */
@@ -338,7 +338,7 @@ export class SessionsListModelService extends Disposable implements ISessionsLis
 			case SessionStatus.InProgress:
 				return { ...Codicon.sessionInProgress, color: themeColorFromId('textLink.foreground') };
 			case SessionStatus.NeedsInput:
-				return { ...Codicon.report, color: themeColorFromId('list.warningForeground') };
+				return { ...Codicon.reportQuestion, color: themeColorFromId('list.warningForeground') };
 			case SessionStatus.Error:
 				return { ...Codicon.error, color: themeColorFromId('errorForeground') };
 			default:

src/vs/sessions/services/sessions/test/browser/sessionsListModelService.test.ts

@@ -86,12 +86,12 @@ suite('SessionsListModelService', () => {
 		});
 	});
 
-	test('uses the report icon when a session needs attention', () => {
+	test('uses the report-question icon when a session needs attention', () => {
 		const icon = service.getStatusIcon(SessionStatus.NeedsInput, true, false);
 
 		assert.deepStrictEqual(
 			{ id: icon.id, color: icon.color?.id },
-			{ id: Codicon.report.id, color: 'list.warningForeground' },
+			{ id: Codicon.reportQuestion.id, color: 'list.warningForeground' },
 		);
 	});
 

src/vs/sessions/test/browser/sessionStatusIcon.test.ts

@@ -85,11 +85,11 @@ suite('Sessions - SessionStatusIcon', () => {
 	});
 
 	for (const reducedMotion of [false, true]) {
-		test(`renders needs-attention as a pulsing report icon${reducedMotion ? ' with reduced motion' : ''}`, () => {
+		test(`renders needs-attention as a pulsing report-question icon${reducedMotion ? ' with reduced motion' : ''}`, () => {
 			const container = document.createElement('div');
 			const modelService = new class extends mock<ISessionsListModelService>() {
 				override getStatusIcon() {
-					return Codicon.report;
+					return Codicon.reportQuestion;
 				}
 			}();
 			const accessibilityService = new class extends TestAccessibilityService {
@@ -104,7 +104,7 @@ suite('Sessions - SessionStatusIcon', () => {
 				pulses: container.classList.contains('session-icon-pulse'),
 			}, {
 				icons: [{
-					className: 'codicon codicon-report',
+					className: 'codicon codicon-report-question',
 					fadingOut: undefined,
 					opacity: '',
 					transition: '',

src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts

@@ -195,7 +195,7 @@ export function getAgentSessionStatusIcon(session: IAgentSession): ThemeIcon {
 	}
 
 	if (session.status === AgentSessionStatus.NeedsInput) {
-		return { ...Codicon.report, color: themeColorFromId('list.warningForeground') };
+		return { ...Codicon.reportQuestion, color: themeColorFromId('list.warningForeground') };
 	}
 
 	if (session.status === AgentSessionStatus.Failed) {

src/vs/workbench/contrib/chat/browser/agentSessions/experiments/agentTitleBarStatusWidget.ts

@@ -515,14 +515,14 @@ export class AgentTitleBarStatusWidget extends BaseActionViewItem {
 		const isCompactMode = true;
 		pill.classList.toggle('compact-mode', isCompactMode);
 
-		// Left icon container (sparkle by default, report+count when attention needed, search on hover)
+		// Left icon container (sparkle by default, attention icon+count when attention needed, search on hover)
 		const leftIcon = $('span.agent-status-left-icon');
 		if (hasAttentionNeeded) {
-			// Show report icon + count when sessions need attention
-			const reportIcon = renderIcon(Codicon.report);
+			// Show attention icon + count when sessions need attention
+			const attentionIcon = renderIcon(Codicon.reportQuestion);
 			const countSpan = $('span.agent-status-attention-count');
 			countSpan.textContent = String(attentionNeededSessions.length);
-			reset(leftIcon, reportIcon, countSpan);
+			reset(leftIcon, attentionIcon, countSpan);
 			leftIcon.classList.add('has-attention');
 		} else {
 			reset(leftIcon, renderIcon(Codicon.searchSparkle));
@@ -992,7 +992,7 @@ export class AgentTitleBarStatusWidget extends BaseActionViewItem {
 			needsInputSection.setAttribute('role', 'button');
 			needsInputSection.tabIndex = 0;
 			const needsInputIcon = $('span.agent-status-icon');
-			reset(needsInputIcon, renderIcon(Codicon.report));
+			reset(needsInputIcon, renderIcon(Codicon.reportQuestion));
 			needsInputSection.appendChild(needsInputIcon);
 			const needsInputCount = $('span.agent-status-text');
 			needsInputCount.textContent = String(attentionNeededSessions.length);

src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsDataSource.test.ts

@@ -145,7 +145,7 @@ suite('AgentSessionsDataSource', () => {
 				['unread', { ...Codicon.circleFilled, color: themeColorFromId('textLink.foreground') }],
 				['archived', { ...Codicon.passFilled, color: themeColorFromId('agentSessionReadIndicator.foreground') }],
 				['in-progress', { ...Codicon.sessionInProgress, color: themeColorFromId('textLink.foreground') }],
-				['needs-input', { ...Codicon.report, color: themeColorFromId('list.warningForeground') }],
+				['needs-input', { ...Codicon.reportQuestion, color: themeColorFromId('list.warningForeground') }],
 				['failed', { ...Codicon.error, color: themeColorFromId('errorForeground') }],
 			]);
 		});

test/componentFixtures/blocks-ci-screenshots.md

@@ -166,13 +166,13 @@
 ![screenshot](https://hediet-screenshots.azurewebsites.net/images/133b77cee2dd44df7906261b12cbf019eb0a4dbc2dc9d88a865d04687cdbbf8f)
 
 #### sessions/sessionsList/SessionsList_CompactNeedsInput/Light
-![screenshot](https://hediet-screenshots.azurewebsites.net/images/0618919023690b82ef2c57c1e058e42dd5f06ebae1d58b07610f116a4a5e312b)
+![screenshot](https://hediet-screenshots.azurewebsites.net/images/aec8f9c6a9a7f6941392504d3a0446ba95368a8445fdd07b937b3adfde43516e)
 
 #### sessions/sessionsList/SessionsList_CompactNestedChatActions/Light
 ![screenshot](https://hediet-screenshots.azurewebsites.net/images/8806d13377c47bb5e81a5ddda8756bb91d06b05a07b0a997b6a9947311649169)
 
 #### sessions/sessionsList/SessionsList_CompactNestedChatApprovals/Light
-![screenshot](https://hediet-screenshots.azurewebsites.net/images/be0ba8245982fc76d83a7ced7acd61bac38c8422a84070af0e6399de6a657632)
+![screenshot](https://hediet-screenshots.azurewebsites.net/images/fa63aac9ae39aced7a32e93e8d8f66af2f0a952e458f37deda7a81e62b1d2f2d)
 
 #### sessions/sessionsList/SessionsList_CompactNestedChatPrimaryAction/Light
 ![screenshot](https://hediet-screenshots.azurewebsites.net/images/ed18223f207e2dd6968527c3594213879ca07b1462e6e91b6cfc233d8578cf20)

test/componentFixtures/playwright/tests/sessionsListTwistie.spec.ts

@@ -93,7 +93,7 @@ for (const theme of ['Dark', 'Light']) {
 for (const theme of ['Dark', 'Light', 'DarkHighContrast', 'LightHighContrast']) {
 	for (const { name, fixture, ariaStatus, indicatorClass, color, count } of [
 		{ name: 'unread', fixture: 'SessionsList_CollapsedUnreadSections', ariaStatus: 'contains unread sessions', indicatorClass: '.codicon-circle-filled', color: '--vscode-textLink-foreground', count: 1 },
-		{ name: 'needs-input', fixture: 'SessionsList_CollapsedNeedsInputSections', ariaStatus: 'session needs attention', indicatorClass: '.codicon-report', color: '--vscode-list-warningForeground', count: 2 },
+		{ name: 'needs-input', fixture: 'SessionsList_CollapsedNeedsInputSections', ariaStatus: 'session needs attention', indicatorClass: '.codicon-report-question', color: '--vscode-list-warningForeground', count: 2 },
 		{ name: 'CI-failure', fixture: 'SessionsList_CollapsedCIFailureSections', ariaStatus: 'session has failing CI checks', indicatorClass: '.codicon-circle-filled', color: '--vscode-list-warningForeground', count: 2 },
 	]) {
 		test.describe(`collapsed section ${name} indicators (${theme})`, () => {