From aeb06c306d75a3bcd8da697d41e660517ab2e782 Mon Sep 17 00:00:00 2001
From: Benjamin Christopher Simmonds
 <44439583+benibenj@users.noreply.github.com>
Date: Wed, 18 Mar 2026 13:57:01 +0100
Subject: [PATCH] Permissions picker styling (#302753)

* feat: enhance chat permission picker with warning and info labels

* feat: enhance action label styles with opacity and hover effects
---
 .../chat/browser/media/chatWelcomePart.css    | 28 +++++++++++++++++++
 .../chat/browser/newChatPermissionPicker.ts   |  7 ++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css b/src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css
index 9ff4dde299b..318195ec783 100644
--- a/src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css
+++ b/src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css
@@ -291,6 +291,34 @@
 	margin-left: 2px;
 }
 
+.sessions-chat-picker-slot .action-label.warning {
+	color: var(--vscode-problemsWarningIcon-foreground);
+	opacity: 0.75;
+}
+
+.sessions-chat-picker-slot .action-label.warning .codicon {
+	color: var(--vscode-problemsWarningIcon-foreground) !important;
+}
+
+.sessions-chat-picker-slot .action-label.warning:hover {
+	color: var(--vscode-problemsWarningIcon-foreground);
+	opacity: 1;
+}
+
+.sessions-chat-picker-slot .action-label.info {
+	color: var(--vscode-problemsInfoIcon-foreground);
+	opacity: 0.75;
+}
+
+.sessions-chat-picker-slot .action-label.info .codicon {
+	color: var(--vscode-problemsInfoIcon-foreground) !important;
+}
+
+.sessions-chat-picker-slot .action-label.info:hover {
+	color: var(--vscode-problemsInfoIcon-foreground);
+	opacity: 1;
+}
+
 /* Sync indicator: a slim non-interactive-looking separator before the button */
 .sessions-chat-sync-indicator {
 	margin-left: 4px;
diff --git a/src/vs/sessions/contrib/chat/browser/newChatPermissionPicker.ts b/src/vs/sessions/contrib/chat/browser/newChatPermissionPicker.ts
index 83c775b304b..e708b57051b 100644
--- a/src/vs/sessions/contrib/chat/browser/newChatPermissionPicker.ts
+++ b/src/vs/sessions/contrib/chat/browser/newChatPermissionPicker.ts
@@ -9,7 +9,7 @@ import { Emitter, Event } from '../../../../base/common/event.js';
 import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
 import { localize } from '../../../../nls.js';
 import { IActionWidgetService } from '../../../../platform/actionWidget/browser/actionWidget.js';
-import { ActionListItemKind, IActionListDelegate, IActionListItem } from '../../../../platform/actionWidget/browser/actionList.js';
+import { ActionListItemKind, IActionListDelegate, IActionListItem, IActionListOptions } from '../../../../platform/actionWidget/browser/actionList.js';
 import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
 import { IDialogService } from '../../../../platform/dialogs/common/dialogs.js';
 import { renderIcon } from '../../../../base/browser/ui/iconLabel/iconLabels.js';
@@ -151,6 +151,7 @@ export class NewChatPermissionPicker extends Disposable {
 			onHide: () => { triggerElement.focus(); },
 		};
 
+		const listOptions: IActionListOptions = { descriptionBelow: true, minWidth: 255 };
 		this.actionWidgetService.show<IPermissionItem>(
 			'permissionPicker',
 			false,
@@ -163,6 +164,7 @@ export class NewChatPermissionPicker extends Disposable {
 				getAriaLabel: (item) => item.label ?? '',
 				getWidgetAriaLabel: () => localize('permissionPicker.ariaLabel', "Permission Picker"),
 			},
+			listOptions,
 		);
 	}
 
@@ -253,5 +255,8 @@ export class NewChatPermissionPicker extends Disposable {
 		const labelSpan = dom.append(trigger, dom.$('span.sessions-chat-dropdown-label'));
 		labelSpan.textContent = label;
 		dom.append(trigger, renderIcon(Codicon.chevronDown));
+
+		trigger.classList.toggle('warning', this._currentLevel === ChatPermissionLevel.Autopilot);
+		trigger.classList.toggle('info', this._currentLevel === ChatPermissionLevel.AutoApprove);
 	}
 }