@codingame/monaco-vscode-katex-common 31.0.1 → 32.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolConfirmationCarouselPart.js

@@ -1,6 +1,6 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
-import { h, addDisposableListener, hide, isHTMLElement, setVisibility, show, clearNode, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { h, AnimationFrameScheduler, DisposableResizeObserver, hide, addDisposableListener, isHTMLElement, setVisibility, show, clearNode, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
@@ -8,6 +8,7 @@ import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/even
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
 import { Disposable, DisposableStore, toDisposable, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { generateUuid } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uuid';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { IChatToolInvocation, ToolConfirmKind } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatService/chatService';
@@ -16,7 +17,10 @@ import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/obse
 
 registerCss(chatToolConfirmationCarousel);
 const COLLAPSED_CAROUSEL_MAX_HEIGHT = 300;
+const COLLAPSED_MESSAGE_MAX_HEIGHT = 200;
+const COLLAPSED_CODE_BLOCK_MAX_HEIGHT = 150;
 const MIN_CAROUSEL_MAX_HEIGHT = 80;
+const EXPANDABLE_CONTENT_SELECTOR = ".interactive-result-editor, .chat-markdown-part.rendered-markdown";
 class ChatToolConfirmationCarouselPart extends Disposable {
     constructor(
         toolPartFactory,
@@ -35,6 +39,8 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         this.items = [];
         this.toolCallIds = ( new Set());
         this.activeIndex = 0;
+        this._isContentExpanded = false;
+        this.canExpandContent = false;
         const elements = h(".chat-tool-confirmation-carousel@root", [h(
             ".chat-tool-carousel-overlay@overlay",
             [h(".chat-tool-carousel-title-group@titleGroup", [
@@ -48,19 +54,41 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         this.domNode = elements.root;
         this.domNode.tabIndex = -1;
         this.domNode.setAttribute("role", "group");
-        this.domNode.setAttribute("aria-label", ( localize(7077, "Tool confirmation carousel")));
+        this.domNode.setAttribute("aria-label", ( localize(7353, "Tool confirmation carousel")));
         this.collapsedTitle = elements.collapsedTitle;
         this.agentLabel = elements.agentLabel;
         this.contentContainer = elements.content;
+        this.contentContainer.id = generateUuid();
         this.stepIndicator = elements.stepIndicator;
         this.activeContentDisposables = this._register(( new DisposableStore()));
+        this.updateContentExpansionStateScheduler = this._register(
+            new AnimationFrameScheduler(this.domNode, () => this.updateContentExpansionState())
+        );
+        this.contentResizeObserver = this._register(new DisposableResizeObserver(
+            "ChatToolConfirmationCarouselPart.contentExpansion",
+            () => this.updateContentExpansionStateScheduler.schedule()
+        ));
+        this._register(this.contentResizeObserver.observe(this.contentContainer));
         this.allowAllButton = this._register(( new Button(elements.overlayActions, {
             ...defaultButtonStyles,
             small: true
         })));
         this.allowAllButton.element.classList.add("chat-tool-carousel-allow-all-button");
-        this.allowAllButton.label = ( localize(7078, "Allow All"));
+        this.allowAllButton.label = ( localize(7354, "Allow All"));
         this._register(this.allowAllButton.onDidClick(() => this.allowAll()));
+        this.expandContentButton = this._register(( new Button(elements.overlayActions, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true
+        })));
+        this.expandContentButton.element.classList.add(
+            "chat-tool-carousel-header-button",
+            "chat-tool-carousel-expand-content-button"
+        );
+        this.expandContentButton.element.setAttribute("aria-controls", this.contentContainer.id);
+        this.updateExpandContentButton();
+        hide(this.expandContentButton.element);
+        this._register(this.expandContentButton.onDidClick(() => this.toggleContentExpanded()));
         this.dismissButton = this._register(( new Button(elements.overlayActions, {
             ...defaultButtonStyles,
             secondary: true,
@@ -68,7 +96,7 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         })));
         this.dismissButton.element.classList.add("chat-tool-carousel-dismiss-button");
         this.dismissButton.label = `$(${Codicon.close.id})`;
-        const dismissButtonLabel = this.items.length === 1 ? ( localize(7079, "Skip")) : ( localize(7080, "Skip All"));
+        const dismissButtonLabel = this.items.length === 1 ? ( localize(7355, "Skip")) : ( localize(7356, "Skip All"));
         this.dismissButton.element.setAttribute("aria-label", dismissButtonLabel);
         this.dismissButton.element.title = dismissButtonLabel;
         this._register(this.dismissButton.onDidClick(() => this.skipAll()));
@@ -79,7 +107,7 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         })));
         this.prevButton.element.classList.add("chat-tool-carousel-nav-arrow");
         this.prevButton.label = `$(${Codicon.chevronLeft.id})`;
-        this.prevButton.element.setAttribute("aria-label", ( localize(7081, "Previous")));
+        this.prevButton.element.setAttribute("aria-label", ( localize(7357, "Previous")));
         this._register(this.prevButton.onDidClick(() => this.navigateRelative(-1)));
         this.nextButton = this._register(( new Button(elements.navArrows, {
             ...defaultButtonStyles,
@@ -88,7 +116,7 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         })));
         this.nextButton.element.classList.add("chat-tool-carousel-nav-arrow");
         this.nextButton.label = `$(${Codicon.chevronRight.id})`;
-        this.nextButton.element.setAttribute("aria-label", ( localize(7082, "Next")));
+        this.nextButton.element.setAttribute("aria-label", ( localize(7358, "Next")));
         this._register(this.nextButton.onDidClick(() => this.navigateRelative(1)));
         this._register(addDisposableListener(this.agentLabel, "click", e => {
             e.preventDefault();
@@ -109,7 +137,7 @@ class ChatToolConfirmationCarouselPart extends Disposable {
     }
     setMaxHeight(maxHeight) {
         this.maxHeight = maxHeight;
-        this.updateMaxHeightStyle();
+        this.updateContentExpansionState();
     }
     hasToolInvocation(toolCallId) {
         return ( this.toolCallIds.has(toolCallId));
@@ -280,7 +308,7 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         if (item?.agentName) {
             this.agentLabel.textContent = `\u2014 ${item.agentName}`;
             this.agentLabel.disabled = !item.subAgentInvocationId || !item.scrollToSubagent;
-            this.agentLabel.title = ( localize(7083, "Scroll to {0}", item.agentName));
+            this.agentLabel.title = ( localize(7359, "Scroll to {0}", item.agentName));
             this.agentLabel.setAttribute("aria-label", this.agentLabel.title);
             show(this.agentLabel);
         } else {
@@ -297,13 +325,18 @@ class ChatToolConfirmationCarouselPart extends Disposable {
         setVisibility(multi, this.prevButton.element);
         setVisibility(multi, this.nextButton.element);
         setVisibility(multi, this.allowAllButton.element);
-        this.allowAllButton.label = multi ? ( localize(7078, "Allow All")) : ( localize(7084, "Allow"));
+        setVisibility(this.canExpandContent, this.expandContentButton.element);
+        this.allowAllButton.label = multi ? ( localize(7354, "Allow All")) : ( localize(7360, "Allow"));
+        this.updateExpandContentButton();
     }
     renderActiveContent() {
         clearNode(this.contentContainer);
         this.activeContentDisposables.clear();
+        this._isContentExpanded = false;
+        this.canExpandContent = false;
         const item = this.items[this.activeIndex];
         if (!item) {
+            this.updateContentExpansionState();
             return;
         }
         if (!item.toolPart) {
@@ -313,15 +346,91 @@ class ChatToolConfirmationCarouselPart extends Disposable {
             }
         }
         this.contentContainer.appendChild(item.toolPart.domNode);
+        this.activeContentDisposables.add(this.contentResizeObserver.observe(item.toolPart.domNode));
+        this.observeExpandableContentElements(item.toolPart.domNode);
+        this.updateContentExpansionStateScheduler.schedule();
+    }
+    toggleContentExpanded() {
+        if (!this.canExpandContent) {
+            return;
+        }
+        this._isContentExpanded = !this._isContentExpanded;
+        this.updateContentExpansionState();
+    }
+    updateContentExpansionState() {
+        this.canExpandContent = this.items.length > 0 && this.isActiveContentLargerThanCollapsedLimit();
+        if (!this.canExpandContent) {
+            this._isContentExpanded = false;
+        }
+        this.domNode.classList.toggle(
+            "chat-tool-carousel-content-expanded",
+            this.canExpandContent && this._isContentExpanded
+        );
+        this.updateMaxHeightStyle();
+        setVisibility(this.canExpandContent, this.expandContentButton.element);
+        this.updateExpandContentButton();
     }
     updateMaxHeightStyle() {
         if (this.maxHeight === undefined) {
             this.domNode.style.removeProperty("max-height");
             return;
         }
-        const maxHeight = this.getCollapsedMaxHeight();
+        const expanded = this.canExpandContent && this._isContentExpanded;
+        const maxHeight = expanded ? Math.max(MIN_CAROUSEL_MAX_HEIGHT, this.maxHeight) : this.getCollapsedMaxHeight();
         this.domNode.style.maxHeight = `${Math.floor(maxHeight)}px`;
     }
+    updateExpandContentButton() {
+        const expanded = this.canExpandContent && this._isContentExpanded;
+        const label = expanded ? ( localize(7361, "Restore Confirmation Size")) : ( localize(7362, "Expand Confirmation Up"));
+        this.expandContentButton.label = expanded ? `$(${Codicon.screenNormal.id})` : `$(${Codicon.screenFull.id})`;
+        this.expandContentButton.element.setAttribute("aria-label", label);
+        this.expandContentButton.element.setAttribute("aria-expanded", String(expanded));
+        this.expandContentButton.setTitle(label);
+    }
+    isActiveContentLargerThanCollapsedLimit() {
+        const activeContent = this.contentContainer.firstElementChild;
+        if (!isHTMLElement(activeContent)) {
+            return false;
+        }
+        return this.hasInnerContentLargerThanCollapsedLimit(activeContent);
+    }
+    hasInnerContentLargerThanCollapsedLimit(element) {
+        if (this.isExpandableContentElement(element) && this.getElementHeight(element) > this.getExpandableContentHeightLimit(element) + 1) {
+            return true;
+        }
+        for (const child of element.children) {
+            if (!isHTMLElement(child)) {
+                continue;
+            }
+            if (this.hasInnerContentLargerThanCollapsedLimit(child)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    isExpandableContentElement(element) {
+        return element.matches(EXPANDABLE_CONTENT_SELECTOR);
+    }
+    observeExpandableContentElements(element) {
+        if (this.isExpandableContentElement(element)) {
+            this.activeContentDisposables.add(this.contentResizeObserver.observe(element));
+        }
+        for (const child of element.children) {
+            if (isHTMLElement(child)) {
+                this.observeExpandableContentElements(child);
+            }
+        }
+    }
+    getElementHeight(element) {
+        return Math.max(element.offsetHeight, element.scrollHeight);
+    }
+    getExpandableContentHeightLimit(element) {
+        const window = getWindow(this.domNode);
+        if (element.classList.contains("interactive-result-editor")) {
+            return Math.min(COLLAPSED_CODE_BLOCK_MAX_HEIGHT, window.innerHeight * 0.25);
+        }
+        return Math.min(COLLAPSED_MESSAGE_MAX_HEIGHT, window.innerHeight * 0.3);
+    }
     getCollapsedMaxHeight() {
         const configuredMaxHeight = this.maxHeight === undefined ? Number.POSITIVE_INFINITY : Math.max(MIN_CAROUSEL_MAX_HEIGHT, this.maxHeight);
         return Math.min(

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolConfirmationSubPart.js

@@ -78,8 +78,8 @@ let ToolConfirmationSubPart = class ToolConfirmationSubPart extends AbstractTool
         this.render({
             allowActionId: AcceptToolConfirmationActionId,
             skipActionId: SkipToolConfirmationActionId,
-            allowLabel: state.confirmationMessages.confirmResults ? ( localize(7085, "Allow and Review Once")) : ( localize(7086, "Allow Once")),
-            skipLabel: ( localize(7087, "Proceed without running this tool")),
+            allowLabel: state.confirmationMessages.confirmResults ? ( localize(7363, "Allow and Review Once")) : ( localize(7364, "Allow Once")),
+            skipLabel: ( localize(7365, "Proceed without running this tool")),
             partType: "chatToolConfirmation",
             subtitle: typeof toolInvocation.originMessage === "string" ? toolInvocation.originMessage : toolInvocation.originMessage?.value
         });
@@ -125,7 +125,7 @@ let ToolConfirmationSubPart = class ToolConfirmationSubPart extends AbstractTool
         }
         if (state.confirmationMessages?.confirmResults) {
             actions.unshift({
-                label: ( localize(7088, "Allow and Skip Reviewing Result")),
+                label: ( localize(7366, "Allow and Skip Reviewing Result")),
                 data: () => {
                     state.confirmationMessages.confirmResults = undefined;
                     this.confirmWith(this.toolInvocation, {
@@ -167,11 +167,11 @@ let ToolConfirmationSubPart = class ToolConfirmationSubPart extends AbstractTool
             };
             const elements = h("div", [h(".message@messageContainer", [
                 h(".message-wrapper@message"),
-                h(".see-more@showMore", [h("a", [( localize(7089, "Show More"))])])
+                h(".see-more@showMore", [h("a", [( localize(7367, "Show More"))])])
             ]), h(".editor@editor"), h(".disclaimer@disclaimer")]);
             if (toolInvocation.toolSpecificData?.kind === "input" && toolInvocation.toolSpecificData.rawInput && !isEmptyObject(toolInvocation.toolSpecificData.rawInput)) {
                 const titleEl = createElement("h3");
-                titleEl.textContent = ( localize(7090, "Input"));
+                titleEl.textContent = ( localize(7368, "Input"));
                 elements.editor.appendChild(titleEl);
                 const inputData = toolInvocation.toolSpecificData;
                 const codeBlockRenderOptions = {
@@ -241,7 +241,7 @@ let ToolConfirmationSubPart = class ToolConfirmationSubPart extends AbstractTool
                 elements.editor.append(editor.object.element);
                 if (canSeeMore) {
                     const seeMore = h("div.see-more", [h("a@link")]);
-                    seeMore.link.textContent = ( localize(7091, "See more"));
+                    seeMore.link.textContent = ( localize(7369, "See more"));
                     this._register(addDisposableGenericMouseDownListener(seeMore.link, () => {
                         try {
                             const parsed = JSON.parse(model.getValue());

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolInvocationPart.js

@@ -96,7 +96,7 @@ let ChatToolInvocationPart = class ChatToolInvocationPart extends Disposable {
         this.domNode.appendChild(subPartDomNode);
         const render = () => {
             partStore.clear();
-            if (toolInvocation.presentation === ToolInvocationPresentation.HiddenAfterComplete && IChatToolInvocation.isComplete(toolInvocation)) {
+            if (toolInvocation.presentation === ToolInvocationPresentation.Hidden || (toolInvocation.presentation === ToolInvocationPresentation.HiddenAfterComplete && IChatToolInvocation.isComplete(toolInvocation))) {
                 hide(this.domNode);
                 return;
             }

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolOutputPart.js

@@ -75,7 +75,7 @@ let ChatToolOutputSubPart = class ChatToolOutputSubPart extends BaseChatToolInvo
             partState.webviewOrigin = partState.webviewOrigin;
         }
         const progressMessage = $("span");
-        progressMessage.textContent = ( localize(7092, "Rendering tool output..."));
+        progressMessage.textContent = ( localize(7370, "Rendering tool output..."));
         const progressPart = this._register(this.instantiationService.createInstance(
             ChatProgressSubPart,
             progressMessage,
@@ -125,7 +125,7 @@ let ChatToolOutputSubPart = class ChatToolOutputSubPart extends BaseChatToolInvo
             iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.error));
             errorHeaderNode.append(iconElement);
             const errorTitleNode = $(".output-error-title");
-            errorTitleNode.textContent = ( localize(7093, "Error rendering the tool output"));
+            errorTitleNode.textContent = ( localize(7371, "Error rendering the tool output"));
             errorHeaderNode.append(errorTitleNode);
             const errorMessageNode = $(".output-error-details");
             errorMessageNode.textContent = error?.message || String(error);

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolPartUtilities.js

@@ -26,20 +26,20 @@ function getApprovalMessageFromReason(reason) {
     let md;
     switch (reason.type) {
     case ToolConfirmKind.Setting:
-        md = ( localize(7094, "Auto approved by {0}", createMarkdownCommandLink({
+        md = ( localize(7372, "Auto approved by {0}", createMarkdownCommandLink({
             text: "`" + reason.id + "`",
             id: "workbench.action.openSettings",
             arguments: [reason.id],
-            tooltip: ( localize(7095, "Open settings"))
+            tooltip: ( localize(7373, "Open settings"))
         }, false)));
         break;
     case ToolConfirmKind.LmServicePerTool:
-        md = reason.scope === "session" ? ( localize(7096, "Auto approved for this session")) : reason.scope === "workspace" ? ( localize(7097, "Auto approved for this workspace")) : ( localize(7098, "Auto approved for this profile"));
+        md = reason.scope === "session" ? ( localize(7374, "Auto approved for this session")) : reason.scope === "workspace" ? ( localize(7375, "Auto approved for this workspace")) : ( localize(7376, "Auto approved for this profile"));
         md += " (" + createMarkdownCommandLink({
-            text: ( localize(7099, "Edit")),
+            text: ( localize(7377, "Edit")),
             id: "workbench.action.chat.editToolApproval",
             arguments: [reason.scope],
-            tooltip: ( localize(7100, "Edit tool approval settings"))
+            tooltip: ( localize(7378, "Edit tool approval settings"))
         }) + ")";
         break;
     case ToolConfirmKind.ConfirmationNotNeeded:

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatToolPostExecuteConfirmationPart.js

@@ -46,8 +46,8 @@ let ChatToolPostExecuteConfirmationPart = class ChatToolPostExecuteConfirmationP
         this.render({
             allowActionId: AcceptToolPostConfirmationActionId,
             skipActionId: SkipToolPostConfirmationActionId,
-            allowLabel: ( localize(7101, "Allow Once")),
-            skipLabel: ( localize(7102, "Skip Results")),
+            allowLabel: ( localize(7379, "Allow Once")),
+            skipLabel: ( localize(7380, "Skip Results")),
             partType: "chatToolPostConfirmation",
             subtitle: typeof subtitle === "string" ? subtitle : subtitle?.value
         });
@@ -63,7 +63,7 @@ let ChatToolPostExecuteConfirmationPart = class ChatToolPostExecuteConfirmationP
         return this.createResultsDisplay(this.toolInvocation, state.contentForModel);
     }
     getTitle() {
-        return localize(7103, "Approve Tool Result");
+        return localize(7381, "Approve Tool Result");
     }
     additionalPrimaryActions() {
         const actions = super.additionalPrimaryActions();
@@ -99,7 +99,7 @@ let ChatToolPostExecuteConfirmationPart = class ChatToolPostExecuteConfirmationP
     createResultsDisplay(toolInvocation, contentForModel) {
         const container = $(".tool-postconfirm-display");
         if (!contentForModel || contentForModel.length === 0) {
-            container.textContent = ( localize(7104, "No results to display"));
+            container.textContent = ( localize(7382, "No results to display"));
             return container;
         }
         const parts = [];
@@ -214,7 +214,7 @@ let ChatToolPostExecuteConfirmationPart = class ChatToolPostExecuteConfirmationP
             outputSubPart.domNode.classList.add("tool-postconfirm-display");
             return outputSubPart.domNode;
         }
-        container.textContent = ( localize(7105, "No displayable results"));
+        container.textContent = ( localize(7383, "No displayable results"));
         return container;
     }
 };

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

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Risk subtitle: a slim row that sits below the main content (e.g. the
+ * terminal command box or elicitation message), above the action buttons.
+ * Renders an icon at the risk level's accent color followed by the
+ * LLM-generated explanation in the regular foreground color. */
+
+.chat-confirmation-widget2 > .tool-risk-badge {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 6px 8px;
+	line-height: 1.5;
+	color: var(--vscode-foreground);
+	border-top: 1px solid var(--vscode-chat-requestBorder);
+	background: transparent;
+	user-select: none;
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge .tool-risk-icon {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 13px;
+	font-size: 13px;
+	line-height: 1;
+	color: var(--tool-risk-accent, var(--vscode-descriptionForeground));
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge.red .tool-risk-icon {
+	font-weight: 900;
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge .tool-risk-text {
+	min-width: 0;
+	flex: 1 1 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	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;
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge.green {
+	--tool-risk-accent: var(--vscode-charts-green, #388a34);
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge.orange {
+	--tool-risk-accent: var(--vscode-editorWarning-foreground, #cca700);
+}
+
+.chat-confirmation-widget2 > .tool-risk-badge.red {
+	--tool-risk-accent: var(--vscode-editorError-foreground, #f14c4c);
+}

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

@@ -0,0 +1,38 @@
+import { Event } from "@codingame/monaco-vscode-api/vscode/vs/base/common/event";
+import { IMarkdownString } from "@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent";
+import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
+import { IToolRiskAssessment } from "../../../tools/chatToolRiskAssessmentService.js";
+export declare class ToolRiskBadgeWidget extends Disposable {
+    private readonly _hoverService;
+    readonly domNode: HTMLElement;
+    private readonly _iconEl;
+    private readonly _textEl;
+    private readonly _detailsIconEl;
+    private readonly _hoverStore;
+    private readonly _detailsHoverStore;
+    private _details;
+    private readonly _onDidHide;
+    readonly onDidHide: Event<void>;
+    constructor(_hoverService: IHoverService);
+    setLoading(): void;
+    setHidden(): void;
+    setAssessment(assessment: IToolRiskAssessment): void;
+    /**
+     * 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;
+    /**
+     * 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;
+    private _setVariant;
+    private _setIcon;
+    private _setText;
+    private _setHover;
+    private _refreshDetailsHover;
+    private _buildDetailsMarkdown;
+}

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/toolRiskBadgeWidget.js

@@ -0,0 +1,125 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { $ } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
+import { Disposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
+import { ToolRiskLevel } from '../../../tools/chatToolRiskAssessmentService.js';
+import * as toolRiskBadge from './media/toolRiskBadge.css';
+
+registerCss(toolRiskBadge);
+const RISK_BADGE_CLASS = "tool-risk-badge";
+let ToolRiskBadgeWidget = class ToolRiskBadgeWidget extends Disposable {
+    constructor(_hoverService) {
+        super();
+        this._hoverService = _hoverService;
+        this._hoverStore = this._register(( new DisposableStore()));
+        this._detailsHoverStore = this._register(( new DisposableStore()));
+        this._onDidHide = this._register(( new Emitter()));
+        this.onDidHide = this._onDidHide.event;
+        this.domNode = $(`span.${RISK_BADGE_CLASS}`);
+        this._iconEl = $("span.tool-risk-icon");
+        this._textEl = $("span.tool-risk-text");
+        this._detailsIconEl = $("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(7384, "Risk assessment details")));
+        this.domNode.append(this._iconEl, this._textEl, this._detailsIconEl);
+        this._refreshDetailsHover();
+        this.setLoading();
+    }
+    setLoading() {
+        this._setVariant("loading");
+        this._setIcon(ThemeIcon.modify(Codicon.loading, "spin"));
+        const text = ( localize(7385, "Assessing risk…"));
+        this._textEl.textContent = text;
+        this._setHover(( localize(7386, "Generating a risk assessment for this tool call.")));
+    }
+    setHidden() {
+        this.domNode.style.display = "none";
+        this._onDidHide.fire();
+    }
+    setAssessment(assessment) {
+        switch (assessment.risk) {
+        case ToolRiskLevel.Green:
+            this._setVariant("green");
+            this._setIcon(Codicon.pass);
+            break;
+        case ToolRiskLevel.Orange:
+            this._setVariant("orange");
+            this._setIcon(Codicon.warning);
+            break;
+        case ToolRiskLevel.Red:
+            this._setVariant("red");
+            this._setText("!");
+            break;
+        }
+        this.domNode.style.display = "";
+        this._textEl.textContent = assessment.explanation;
+        this._setHover(assessment.explanation);
+    }
+    setDetails(details) {
+        this._details = details;
+        this._refreshDetailsHover();
+    }
+    getDetailsMarkdown() {
+        return this._buildDetailsMarkdown();
+    }
+    _setVariant(variant) {
+        this.domNode.classList.remove("green", "orange", "red", "loading");
+        this.domNode.classList.add(variant);
+    }
+    _setIcon(icon) {
+        this._iconEl.textContent = "";
+        this._iconEl.className = "tool-risk-icon " + ThemeIcon.asClassName(icon);
+    }
+    _setText(text) {
+        this._iconEl.className = "tool-risk-icon";
+        this._iconEl.textContent = text;
+    }
+    _setHover(content) {
+        this._hoverStore.clear();
+        this._hoverStore.add(
+            this._hoverService.setupManagedHover(getDefaultHoverDelegate("mouse"), this.domNode, content)
+        );
+    }
+    _refreshDetailsHover() {
+        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
+            })
+        );
+    }
+    _buildDetailsMarkdown() {
+        const aiNote = ( localize(7387, "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;
+    }
+};
+ToolRiskBadgeWidget = ( __decorate([( __param(0, IHoverService))], ToolRiskBadgeWidget));
+
+export { ToolRiskBadgeWidget };