Move details to hover (#315215)

Author: chrmarti

src/vs/workbench/contrib/chat/browser/chat.contribution.ts

@@ -1023,7 +1023,7 @@ configurationRegistry.registerConfiguration({
 		[ChatConfiguration.ToolRiskAssessmentEnabled]: {
 			type: 'boolean',
 			description: nls.localize('chat.tools.riskAssessment.enabled', "When enabled, terminal tool confirmations show an LLM-generated risk level (Safe / Caution / Review carefully) and a short explanation."),
-			default: false,
+			default: true,
 			tags: ['experimental'],
 			experiment: {
 				mode: 'auto'

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatTerminalToolConfirmationSubPart.ts

@@ -11,7 +11,7 @@ import { asArray } from '../../../../../../../base/common/arrays.js';
 import { CancellationTokenSource } from '../../../../../../../base/common/cancellation.js';
 import { Codicon } from '../../../../../../../base/common/codicons.js';
 import { ErrorNoTelemetry } from '../../../../../../../base/common/errors.js';
-import { createCommandUri, MarkdownString, type IMarkdownString } from '../../../../../../../base/common/htmlContent.js';
+import { createCommandUri, escapeMarkdownSyntaxTokens, MarkdownString, type IMarkdownString } from '../../../../../../../base/common/htmlContent.js';
 import { toDisposable } from '../../../../../../../base/common/lifecycle.js';
 import Severity from '../../../../../../../base/common/severity.js';
 import { isObject } from '../../../../../../../base/common/types.js';
@@ -191,29 +191,92 @@ export class ChatTerminalToolConfirmationSubPart extends BaseChatToolInvocationS
 			position: { hoverPosition: HoverPosition.LEFT },
 		}));
 
+		const riskBadge = this._createRiskBadge(state.parameters);
+
 		const confirmWidget = this._register(this.instantiationService.createInstance(
 			ChatCustomConfirmationWidget<TerminalNewAutoApproveButtonData | boolean>,
 			this.context,
 			{
 				title,
 				icon: Codicon.terminal,
 				message: elements.root,
-				footerBanner: this._createRiskBadge(state.parameters),
+				footerBanner: riskBadge?.domNode,
 				buttons: this._createButtons(moreActions)
 			},
 		));
 
+		// Build the unsandboxed-execution reason and disclaimer markdown. When
+		// the risk badge is shown, surface them via its details hover (with
+		// labelled prefixes) instead of the dedicated disclaimer row to keep
+		// the confirmation compact.
+		interface IDetailPart {
+			readonly inline: IMarkdownString;
+			readonly hoverLabel: string;
+			readonly hoverBody: string;
+			readonly isTrusted: IMarkdownString['isTrusted'];
+		}
+		const detailParts: IDetailPart[] = [];
 		if (terminalData.requestUnsandboxedExecution) {
 			const reasonText = (terminalData.requestUnsandboxedExecutionReason && terminalData.requestUnsandboxedExecutionReason.trim())
 				|| localize('chat.terminal.unsandboxedExecution.defaultReason', "The model did not provide a reason for requesting unsandboxed execution.");
-			const unsandboxedReasonMarkdown = new MarkdownString(undefined, { supportThemeIcons: true });
-			unsandboxedReasonMarkdown.appendMarkdown(`$(${Codicon.info.id}) `);
-			unsandboxedReasonMarkdown.appendText(reasonText);
-			this._appendMarkdownPart(elements.disclaimer, unsandboxedReasonMarkdown, codeBlockRenderOptions);
+			const inline = new MarkdownString(undefined, { supportThemeIcons: true });
+			inline.appendMarkdown(`$(${Codicon.info.id}) `);
+			inline.appendText(reasonText);
+			detailParts.push({
+				inline,
+				hoverLabel: localize('chat.terminal.detail.sandboxInsufficient', "Sandbox insufficient:"),
+				hoverBody: escapeMarkdownSyntaxTokens(reasonText),
+				isTrusted: undefined,
+			});
 		}
-
 		if (disclaimer) {
-			this._appendMarkdownPart(elements.disclaimer, disclaimer, codeBlockRenderOptions);
+			const inline = typeof disclaimer === 'string' ? new MarkdownString(disclaimer) : disclaimer;
+			// For the hover, drop the leading `$(info) ` icon prefix that the
+			// disclaimer carries for inline rendering — the labelled prefix
+			// already conveys the same role.
+			const hoverBody = inline.value.replace(/^\s*\$\([^)]+\)\s*/, '');
+			detailParts.push({
+				inline,
+				hoverLabel: localize('chat.terminal.detail.approvalNeeded', "Approval needed:"),
+				hoverBody,
+				isTrusted: inline.isTrusted,
+			});
+		}
+
+		const renderInlineDisclaimers = () => {
+			elements.disclaimer.replaceChildren();
+			for (const part of detailParts) {
+				this._appendMarkdownPart(elements.disclaimer, part.inline, codeBlockRenderOptions);
+			}
+		};
+
+		if (riskBadge && detailParts.length) {
+			const combined = new MarkdownString(undefined, {
+				supportThemeIcons: true,
+				isTrusted: detailParts.reduce<MarkdownString['isTrusted']>((acc, part) => {
+					if (part.isTrusted === true || acc === true) {
+						return true;
+					}
+					if (typeof part.isTrusted === 'object' && part.isTrusted) {
+						const enabled = new Set([
+							...(typeof acc === 'object' && acc?.enabledCommands ? acc.enabledCommands : []),
+							...part.isTrusted.enabledCommands,
+						]);
+						return { enabledCommands: [...enabled] };
+					}
+					return acc;
+				}, undefined),
+			});
+			detailParts.forEach((part, i) => {
+				if (i > 0) {
+					combined.appendMarkdown('\n\n');
+				}
+				combined.appendMarkdown(`**${escapeMarkdownSyntaxTokens(part.hoverLabel)}** ${part.hoverBody}`);
+			});
+			riskBadge.setDetails(combined);
+			this._register(riskBadge.onDidHide(() => renderInlineDisclaimers()));
+		} else {
+			renderInlineDisclaimers();
 		}
 
 		const hasToolConfirmationKey = ChatContextKeys.Editing.hasToolConfirmation.bindTo(this.contextKeyService);
@@ -431,7 +494,7 @@ export class ChatTerminalToolConfirmationSubPart extends BaseChatToolInvocationS
 		return promptResult.result === true;
 	}
 
-	private _createRiskBadge(parameters: unknown): HTMLElement | undefined {
+	private _createRiskBadge(parameters: unknown): ToolRiskBadgeWidget | undefined {
 		if (!this.riskAssessmentService.isEnabled()) {
 			return undefined;
 		}
@@ -462,7 +525,7 @@ export class ChatTerminalToolConfirmationSubPart extends BaseChatToolInvocationS
 				}
 			})();
 		}
-		return widget.domNode;
+		return widget;
 	}
 
 	private _appendMarkdownPart(container: HTMLElement, message: string | IMarkdownString, codeBlockRenderOptions: ICodeBlockRenderOptions) {

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/media/toolRiskBadge.css

@@ -43,6 +43,23 @@
 	white-space: nowrap;
 }
 
+.chat-confirmation-widget2 > .tool-risk-badge .tool-risk-details-icon {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 13px;
+	line-height: 1;
+	color: var(--vscode-descriptionForeground);
+	cursor: pointer;
+	border-radius: 3px;
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge .tool-risk-details-icon:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: 1px;
+}
+
 .chat-confirmation-widget2 > .tool-risk-badge.loading {
 	opacity: 0.7;
 }

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/toolRiskBadgeWidget.ts

@@ -5,6 +5,8 @@
 
 import * as dom from '../../../../../../../base/browser/dom.js';
 import { Codicon } from '../../../../../../../base/common/codicons.js';
+import { Emitter, Event } from '../../../../../../../base/common/event.js';
+import { IMarkdownString, MarkdownString } from '../../../../../../../base/common/htmlContent.js';
 import { Disposable, DisposableStore } from '../../../../../../../base/common/lifecycle.js';
 import { ThemeIcon } from '../../../../../../../base/common/themables.js';
 import { localize } from '../../../../../../../nls.js';
@@ -22,7 +24,13 @@ export class ToolRiskBadgeWidget extends Disposable {
 
 	private readonly _iconEl: HTMLElement;
 	private readonly _textEl: HTMLElement;
+	private readonly _detailsIconEl: HTMLElement;
 	private readonly _hoverStore = this._register(new DisposableStore());
+	private readonly _detailsHoverStore = this._register(new DisposableStore());
+	private _details: IMarkdownString | string | undefined;
+
+	private readonly _onDidHide = this._register(new Emitter<void>());
+	public readonly onDidHide: Event<void> = this._onDidHide.event;
 
 	constructor(
 		@IHoverService private readonly _hoverService: IHoverService,
@@ -32,7 +40,13 @@ export class ToolRiskBadgeWidget extends Disposable {
 		this.domNode = dom.$(`span.${RISK_BADGE_CLASS}`);
 		this._iconEl = dom.$('span.tool-risk-icon');
 		this._textEl = dom.$('span.tool-risk-text');
-		this.domNode.append(this._iconEl, this._textEl);
+		this._detailsIconEl = dom.$('span.tool-risk-details-icon');
+		this._detailsIconEl.classList.add(...ThemeIcon.asClassNameArray(Codicon.info));
+		this._detailsIconEl.tabIndex = 0;
+		this._detailsIconEl.setAttribute('role', 'button');
+		this._detailsIconEl.setAttribute('aria-label', localize('toolRisk.detailsIconLabel', "Risk assessment details"));
+		this.domNode.append(this._iconEl, this._textEl, this._detailsIconEl);
+		this._refreshDetailsHover();
 		this.setLoading();
 	}
 
@@ -46,6 +60,7 @@ export class ToolRiskBadgeWidget extends Disposable {
 
 	setHidden(): void {
 		this.domNode.style.display = 'none';
+		this._onDidHide.fire();
 	}
 
 	setAssessment(assessment: IToolRiskAssessment): void {
@@ -68,6 +83,24 @@ export class ToolRiskBadgeWidget extends Disposable {
 		this._setHover(assessment.explanation);
 	}
 
+	/**
+	 * Provide additional context to surface in the trailing info icon's hover.
+	 * The hover always notes that the assessment is AI-generated; any details
+	 * passed here are appended below that note.
+	 */
+	setDetails(details: IMarkdownString | string | undefined): void {
+		this._details = details;
+		this._refreshDetailsHover();
+	}
+
+	/**
+	 * The markdown content currently shown in the trailing info icon's hover.
+	 * Exposed so component fixtures can render a preview of the hover content.
+	 */
+	getDetailsMarkdown(): IMarkdownString {
+		return this._buildDetailsMarkdown();
+	}
+
 	private _setVariant(variant: 'loading' | 'green' | 'orange' | 'red'): void {
 		this.domNode.classList.remove('green', 'orange', 'red', 'loading');
 		this.domNode.classList.add(variant);
@@ -87,4 +120,34 @@ export class ToolRiskBadgeWidget extends Disposable {
 		this._hoverStore.clear();
 		this._hoverStore.add(this._hoverService.setupManagedHover(getDefaultHoverDelegate('mouse'), this.domNode, content));
 	}
+
+	private _refreshDetailsHover(): void {
+		this._detailsHoverStore.clear();
+		const md = this._buildDetailsMarkdown();
+		const fallback = md.value.replace(/\$\([^)]+\)\s?/g, '');
+		this._detailsHoverStore.add(this._hoverService.setupManagedHover(
+			getDefaultHoverDelegate('element'),
+			this._detailsIconEl,
+			{ markdown: md, markdownNotSupportedFallback: fallback },
+		));
+	}
+
+	private _buildDetailsMarkdown(): IMarkdownString {
+		const aiNote = localize('toolRisk.aiGenerated', "Risk assessments are AI-generated and may be inaccurate.");
+		const details = this._details;
+		const md = new MarkdownString(undefined, {
+			supportThemeIcons: true,
+			isTrusted: typeof details === 'object' && details ? details.isTrusted : undefined,
+		});
+		md.appendText(aiNote);
+		if (details) {
+			md.appendMarkdown('\n\n');
+			if (typeof details === 'string') {
+				md.appendText(details);
+			} else {
+				md.appendMarkdown(details.value);
+			}
+		}
+		return md;
+	}
 }