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

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

@@ -2,26 +2,28 @@
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
 import * as codeBlockPart from './media/codeBlockPart.css';
-import { $ as $$1, append, hide, show, clearNode, getTotalHeight, Dimension, reset } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, addDisposableListener, hide, show, clearNode, getTotalHeight, Dimension, reset } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { renderFormattedText } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/formattedTextRenderer';
 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';
 import { Event } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
-import { Disposable, MutableDisposable, combinedDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Disposable, thenRegisterOrDispose, MutableDisposable, combinedDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Schemas } from '@codingame/monaco-vscode-api/vscode/vs/base/common/network';
 import { isEqual } from '@codingame/monaco-vscode-api/vscode/vs/base/common/resources';
 import { assertType } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
 import { URI } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uri';
+import { generateUuid } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uuid';
 import { EditorExtensionsRegistry } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/editorExtensions';
 import { ICodeEditorService } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/services/codeEditorService.service';
 import { CodeEditorWidget } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/widget/codeEditor/codeEditorWidget';
 import { DiffEditorWidget } from '@codingame/monaco-vscode-api/vscode/vs/editor/browser/widget/diffEditor/diffEditorWidget';
 import { EditorOption } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/config/editorOptions';
 import { EDITOR_FONT_DEFAULTS } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/config/fontInfo';
-import { Range } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/core/range';
-import { ScrollType } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/editorCommon';
-import { TextEdit } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages';
 import { EndOfLinePreference } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/model';
+import { TextEdit } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages';
+import { ILanguageService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service';
+import { PLAINTEXT_LANGUAGE_ID } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/modesRegistry';
+import { Range } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/core/range';
 import { TextModelText } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/model/textModelText';
 import { IModelService } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/model.service';
 import { DefaultModelSHA1Computer } from '@codingame/monaco-vscode-api/vscode/vs/editor/common/services/modelService';
@@ -39,6 +41,7 @@ import { SmartSelectController } from '@codingame/monaco-vscode-api/vscode/vs/ed
 import { WordHighlighterContribution } from '@codingame/monaco-vscode-api/vscode/vs/editor/contrib/wordHighlighter/browser/wordHighlighter';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { IAccessibilityService } from '@codingame/monaco-vscode-api/vscode/vs/platform/accessibility/common/accessibility.service';
+import { ILogService } from '@codingame/monaco-vscode-api/vscode/vs/platform/log/common/log.service';
 import { MenuWorkbenchToolBar } from '@codingame/monaco-vscode-api/vscode/vs/platform/actions/browser/toolbar';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
@@ -65,36 +68,11 @@ import { EditorContextKeys } from '@codingame/monaco-vscode-api/vscode/vs/editor
 
 registerCss(codeBlockPart);
 const $ = $$1;
-const localFileLanguageId = "vscode-local-file";
-function parseLocalFileData(text) {
-    let data;
-    try {
-        data = JSON.parse(text);
-    } catch (e) {
-        throw ( new Error("Could not parse code block local file data"));
-    }
-    let uri;
-    try {
-        uri = URI.revive(data?.uri);
-    } catch (e) {
-        throw ( new Error("Invalid code block local file data URI"));
-    }
-    let range;
-    if (data.range) {
-        range = ( new Range(
-            data.range.startLineNumber + 1,
-            data.range.startColumn + 1,
-            data.range.endLineNumber + 1,
-            data.range.endColumn + 1
-        ));
-    }
-    return {
-        uri,
-        range
-    };
-}
 const defaultCodeblockPadding = 10;
 let CodeBlockPart = class CodeBlockPart extends Disposable {
+    static poolKey(elementId, codeBlockIndex) {
+        return `${elementId}/${codeBlockIndex}`;
+    }
     get verticalPadding() {
         return this.currentCodeBlockData?.renderOptions?.verticalPadding ?? defaultCodeblockPadding;
     }
@@ -107,17 +85,24 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         instantiationService,
         contextKeyService,
         modelService,
+        languageService,
         configurationService,
-        accessibilityService
+        accessibilityService,
+        logService,
+        textModelService
     ) {
         super();
         this.editorOptions = editorOptions;
         this.menuId = menuId;
         this.isSimpleWidget = isSimpleWidget;
         this.modelService = modelService;
+        this.languageService = languageService;
         this.configurationService = configurationService;
         this.accessibilityService = accessibilityService;
+        this.logService = logService;
+        this.textModelService = textModelService;
         this.currentScrollWidth = 0;
+        this._isHovered = false;
         this.isDisposed = false;
         this.element = $(".interactive-result-code-block");
         this.resourceContextKey = instantiationService.createInstance(StaticResourceContextKey);
@@ -148,7 +133,7 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
                 multipleDefinitions: "goto",
                 multipleImplementations: "goto"
             },
-            ariaLabel: ( localize(6895, "Code block")),
+            ariaLabel: ( localize(7008, "Code block")),
             overflowWidgetsDomNode,
             tabFocusMode: true,
             ...this.getEditorOptionsFromConfig()
@@ -184,9 +169,23 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
             this.element.classList.toggle("chat-vulnerabilities-collapsed", !element.vulnerabilitiesListExpanded);
             this.layout();
         }));
+        let isDropdownVisible = false;
         this._register(this.toolbar.onDidChangeDropdownVisibility(e => {
-            toolbarElement.classList.toggle("force-visibility", e);
+            isDropdownVisible = e;
+            toolbarElement.classList.toggle("force-visibility", e || this._isHovered);
+        }));
+        this._isHovered = false;
+        this._register(addDisposableListener(this.element, "mouseenter", () => {
+            this._isHovered = true;
+            toolbarElement.classList.add("force-visibility");
         }));
+        this._register(addDisposableListener(this.element, "mouseleave", () => {
+            this._isHovered = false;
+            if (!isDropdownVisible) {
+                toolbarElement.classList.remove("force-visibility");
+            }
+        }));
+        this._toolbarElement = toolbarElement;
         this._configureForScreenReader();
         this._register(
             this.accessibilityService.onDidChangeScreenReaderOptimized(() => this._configureForScreenReader())
@@ -228,6 +227,15 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
                 this.clearWidgets();
             }));
         }
+        this._textModel = this._register(this.modelService.createModel("", null, ( URI.from({
+            scheme: Schemas.vscodeChatCodeBlock,
+            path: generateUuid()
+        })), this.isSimpleWidget));
+        thenRegisterOrDispose(
+            this.textModelService.createModelReference(this._textModel.uri),
+            this._store
+        );
+        this.editor.setModel(this._textModel);
     }
     dispose() {
         this.isDisposed = true;
@@ -315,14 +323,9 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         this.updatePaddingForLayout();
     }
     getContentHeight() {
-        if (this.currentCodeBlockData?.range) {
-            const lineCount = this.currentCodeBlockData.range.endLineNumber - this.currentCodeBlockData.range.startLineNumber + 1;
-            const lineHeight = this.editor.getOption(EditorOption.lineHeight);
-            return lineCount * lineHeight + 2 * this.verticalPadding;
-        }
         return this.editor.getContentHeight();
     }
-    async render(data, width) {
+    render(data, width) {
         this.currentCodeBlockData = data;
         if (data.parentContextKeyService) {
             this.contextKeyService.updateParent(data.parentContextKeyService);
@@ -330,7 +333,7 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         if (this.getEditorOptionsFromConfig().wordWrap === "on") {
             this.layout(width);
         }
-        const didUpdate = await this.updateEditor(data);
+        const didUpdate = this.updateEditor(data);
         if (!didUpdate || this.isDisposed || this.currentCodeBlockData !== data) {
             return;
         }
@@ -339,11 +342,11 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         });
         if (!this.editor.getOption(EditorOption.ariaLabel)) {
             this.editor.updateOptions({
-                ariaLabel: ( localize(6896, "Code block {0}", data.codeBlockIndex + 1))
+                ariaLabel: ( localize(7009, "Code block {0}", data.codeBlockIndex + 1))
             });
         }
         this.layout(width);
-        this.toolbar.setAriaLabel(( localize(6897, "Code block {0}", data.codeBlockIndex + 1)));
+        this.toolbar.setAriaLabel(( localize(7010, "Code block {0}", data.codeBlockIndex + 1)));
         if (data.renderOptions?.hideToolbar) {
             hide(this.toolbar.getElement());
         } else {
@@ -366,7 +369,11 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         } else {
             this.element.classList.add("no-vulns");
         }
+        if (this._isHovered) {
+            this._toolbarElement.classList.add("force-visibility");
+        }
         this.layout();
+        this.editor.renderAsync(true);
     }
     reset() {
         this.clearWidgets();
@@ -381,16 +388,12 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         ContentHoverController.get(this.editor)?.hideContentHover();
         GlyphHoverController.get(this.editor)?.hideGlyphHover();
     }
-    async updateEditor(data) {
-        const textModel = await data.textModel;
-        if (this.isDisposed || this.currentCodeBlockData !== data || !textModel || textModel.isDisposed()) {
+    updateEditor(data) {
+        if (this.isDisposed || this.currentCodeBlockData !== data) {
             return false;
         }
-        this.editor.setModel(textModel);
-        if (data.range) {
-            this.editor.setSelection(data.range);
-            this.editor.revealRangeInCenter(data.range, ScrollType.Immediate);
-        }
+        this.setText(data.text);
+        this.setLanguage(data.languageId);
         this.updateContexts(data);
         return true;
     }
@@ -398,7 +401,7 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         if (!this.currentCodeBlockData || !this.currentCodeBlockData.vulns) {
             return "";
         }
-        const referencesLabel = this.currentCodeBlockData.vulns.length > 1 ? ( localize(6898, "{0} vulnerabilities", this.currentCodeBlockData.vulns.length)) : ( localize(6899, "{0} vulnerability", 1));
+        const referencesLabel = this.currentCodeBlockData.vulns.length > 1 ? ( localize(7011, "{0} vulnerabilities", this.currentCodeBlockData.vulns.length)) : ( localize(7012, "{0} vulnerability", 1));
         const icon = element => element.vulnerabilitiesListExpanded ? Codicon.chevronDown : Codicon.chevronRight;
         return `${referencesLabel} $(${icon(this.currentCodeBlockData.element).id})`;
     }
@@ -408,10 +411,7 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
             return;
         }
         this.toolbar.context = {
-            code: textModel.getTextBuffer().getValueInRange(
-                data.range ?? textModel.getFullModelRange(),
-                EndOfLinePreference.TextDefined
-            ),
+            code: textModel.getTextBuffer().getValueInRange(textModel.getFullModelRange(), EndOfLinePreference.TextDefined),
             codeBlockIndex: data.codeBlockIndex,
             element: data.element,
             languageId: textModel.getLanguageId(),
@@ -420,23 +420,46 @@ let CodeBlockPart = class CodeBlockPart extends Disposable {
         };
         this.resourceContextKey.set(textModel.uri);
     }
+    setText(newText) {
+        const currentText = this._textModel.getValue(EndOfLinePreference.LF);
+        if (newText === currentText) {
+            return;
+        }
+        if (newText.startsWith(currentText)) {
+            const text = newText.slice(currentText.length);
+            const lastLine = this._textModel.getLineCount();
+            const lastCol = this._textModel.getLineMaxColumn(lastLine);
+            this._textModel.applyEdits([{
+                range: ( new Range(lastLine, lastCol, lastLine, lastCol)),
+                text
+            }]);
+        } else {
+            this.logService.trace("[CodeBlockPart] setText could not optimize, falling back to setValue");
+            this._textModel.setValue(newText);
+        }
+    }
+    setLanguage(languageId) {
+        const vscodeLanguageId = this.languageService.getLanguageIdByLanguageName(languageId);
+        if (vscodeLanguageId && vscodeLanguageId !== this._textModel.getLanguageId()) {
+            this._textModel.setLanguage(vscodeLanguageId);
+        } else if (!vscodeLanguageId && this._textModel.getLanguageId() !== PLAINTEXT_LANGUAGE_ID) {
+            this._textModel.setLanguage(PLAINTEXT_LANGUAGE_ID);
+        }
+    }
 };
-CodeBlockPart = ( __decorate([( __param(5, IInstantiationService)), ( __param(6, IContextKeyService)), ( __param(7, IModelService)), ( __param(8, IConfigurationService)), ( __param(9, IAccessibilityService))], CodeBlockPart));
+CodeBlockPart = ( __decorate([( __param(5, IInstantiationService)), ( __param(6, IContextKeyService)), ( __param(7, IModelService)), ( __param(8, ILanguageService)), ( __param(9, IConfigurationService)), ( __param(10, IAccessibilityService)), ( __param(11, ILogService)), ( __param(12, ITextModelService))], CodeBlockPart));
 let ChatCodeBlockContentProvider = class ChatCodeBlockContentProvider extends Disposable {
     constructor(textModelService, _modelService) {
         super();
         this._modelService = _modelService;
         this._register(
-            textModelService.registerTextModelContentProvider(Schemas.vscodeChatCodeBlock, this)
+            textModelService.registerTextModelContentProvider(Schemas.vscodeChatCodeBlock, {
+                provideTextContent: resource => {
+                    return Promise.resolve(this._modelService.getModel(resource));
+                }
+            })
         );
     }
-    async provideTextContent(resource) {
-        const existing = this._modelService.getModel(resource);
-        if (existing) {
-            return existing;
-        }
-        return this._modelService.createModel("", null, resource);
-    }
 };
 ChatCodeBlockContentProvider = ( __decorate([( __param(0, ITextModelService)), ( __param(1, IModelService))], ChatCodeBlockContentProvider));
 let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
@@ -508,7 +531,7 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
                 multipleDefinitions: "goto",
                 multipleImplementations: "goto"
             },
-            ariaLabel: ( localize(6895, "Code block")),
+            ariaLabel: ( localize(7008, "Code block")),
             overflowWidgetsDomNode,
             ...this.getEditorOptionsFromConfig()
         });
@@ -587,8 +610,8 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
             stickyScroll: {
                 enabled: false
             },
-            originalAriaLabel: ( localize(6900, "Original")),
-            modifiedAriaLabel: ( localize(6901, "Modified")),
+            originalAriaLabel: ( localize(7013, "Original")),
+            modifiedAriaLabel: ( localize(7014, "Modified")),
             diffAlgorithm: "advanced",
             readOnly: false,
             isInEmbeddedEditor: true,
@@ -629,7 +652,7 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
         const toolbarElt = this.toolbar.getElement();
         toolbarElt.style.display = "block";
         if (this.accessibilityService.isScreenReaderOptimized()) {
-            toolbarElt.ariaLabel = ( localize(6902, "Code block toolbar"));
+            toolbarElt.ariaLabel = ( localize(7015, "Code block toolbar"));
         }
     }
     getEditorOptionsFromConfig() {
@@ -670,7 +693,7 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
         await this.updateEditor(data, token);
         this.layout(width);
         this.diffEditor.updateOptions({
-            ariaLabel: ( localize(6903, "Code Edits")),
+            ariaLabel: ( localize(7016, "Code Edits")),
             readOnly: !!data.isReadOnly
         });
         this.resourceLabel.element.setFile(data.edit.uri, {
@@ -705,12 +728,12 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
             });
             let template;
             if (data.edit.state.applied === 1) {
-                template = ( localize(6904, "Applied 1 change in [[``{0}``]]", uriLabel));
+                template = ( localize(7017, "Applied 1 change in [[``{0}``]]", uriLabel));
             } else if (data.edit.state.applied < 0) {
-                template = ( localize(6905, "Edits in [[``{0}``]] have been rejected", uriLabel));
+                template = ( localize(7018, "Edits in [[``{0}``]] have been rejected", uriLabel));
             } else {
                 template = ( localize(
-                    6906,
+                    7019,
                     "Applied {0} changes in [[``{1}``]]",
                     data.edit.state.applied,
                     uriLabel
@@ -731,6 +754,9 @@ let CodeCompareBlockPart = class CodeCompareBlockPart extends Disposable {
             reset(this.messageElement, message);
         }
         const diffData = await data.diffData;
+        if (token.isCancellationRequested) {
+            return;
+        }
         if (!isEditApplied && diffData) {
             const viewModel = this.diffEditor.createViewModel({
                 original: diffData.original,
@@ -837,8 +863,8 @@ let DefaultChatTextEditor = class DefaultChatTextEditor {
     async _checkSha1(model, item) {
         if (item.state?.sha1 && this._sha1.computeSHA1(model) && this._sha1.computeSHA1(model) !== item.state.sha1) {
             const result = await this.dialogService.confirm({
-                message: ( localize(6907, "The original file has been modified.")),
-                detail: ( localize(6908, "Do you want to apply the changes anyway?"))
+                message: ( localize(7020, "The original file has been modified.")),
+                detail: ( localize(7021, "Do you want to apply the changes anyway?"))
             });
             if (!result.confirmed) {
                 return false;
@@ -858,4 +884,4 @@ let DefaultChatTextEditor = class DefaultChatTextEditor {
 };
 DefaultChatTextEditor = ( __decorate([( __param(0, ITextModelService)), ( __param(1, ICodeEditorService)), ( __param(2, IDialogService))], DefaultChatTextEditor));
 
-export { ChatCodeBlockContentProvider, CodeBlockPart, CodeCompareBlockPart, DefaultChatTextEditor, localFileLanguageId, parseLocalFileData };
+export { ChatCodeBlockContentProvider, CodeBlockPart, CodeCompareBlockPart, DefaultChatTextEditor };

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

@@ -112,9 +112,8 @@
 }
 
 .chat-confirmation-widget .chat-buttons-container,
-.chat-confirmation-widget .chat-confirmation-widget-message {
+.chat-confirmation-widget .chat-confirmation-widget-message-scrollable {
 	flex-basis: 100%;
-	padding: 0 8px;
 	margin: 8px 0;
 
 
@@ -123,6 +122,15 @@
 	}
 }
 
+.chat-confirmation-widget .chat-buttons-container,
+.chat-confirmation-widget .chat-confirmation-widget-message {
+	padding: 0 8px;
+}
+
+.chat-confirmation-widget2 > .chat-confirmation-widget-message-scrollable {
+	min-height: 0;
+}
+
 .chat-confirmation-widget .chat-confirmation-widget-message-container {
 	border: 1px solid var(--vscode-chat-requestBorder);
 	border-radius: var(--vscode-cornerRadius-medium);
@@ -521,6 +529,7 @@
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		animation: chat-thinking-shimmer 2s linear infinite;
+		will-change: background-position;
 	}
 
 }

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

@@ -0,0 +1,257 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* When docked in the chat input area, hide the container when it's empty so
+ * we don't reserve space. */
+.interactive-session .interactive-input-part > .chat-plan-review-widget-container:empty,
+.interactive-session .interactive-input-part .interactive-input-and-edit-session > .chat-plan-review-widget-container:empty {
+	display: none;
+}
+
+.interactive-session .interactive-input-part > .chat-plan-review-widget-container,
+.interactive-session .interactive-input-part .interactive-input-and-edit-session > .chat-plan-review-widget-container {
+	width: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.interactive-session .interactive-input-part > .chat-plan-review-widget-container:not(:empty),
+.interactive-session .interactive-input-part .interactive-input-and-edit-session > .chat-plan-review-widget-container:not(:empty) {
+	margin-top: 8px;
+}
+
+/* When the part is docked inside the input container, drop our own
+ * margin-bottom so it sits flush against the input. */
+.interactive-session .interactive-input-part .chat-plan-review-container > .chat-confirmation-widget2.chat-plan-review {
+	margin-bottom: 0;
+	border: 1px solid var(--vscode-input-border, transparent);
+	background-color: var(--vscode-panel-background);
+}
+
+/* Root container uses .chat-confirmation-widget2 styles for borders / title /
+ * buttons, plus our own layout overrides for the plan review widget. */
+.interactive-session .chat-plan-review-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.interactive-session .chat-plan-review-container > .chat-confirmation-widget2.chat-plan-review {
+	display: flex;
+	flex-direction: column;
+	max-height: min(420px, 50vh);
+	min-height: 0;
+	overflow: hidden;
+	margin-bottom: 8px;
+}
+
+.interactive-session .chat-plan-review-container.chat-plan-review-expanded > .chat-confirmation-widget2.chat-plan-review {
+	max-height: min(720px, 75vh);
+}
+
+.interactive-session .chat-plan-review-container.chat-plan-review-expanded .chat-confirmation-widget-message.chat-plan-review-body {
+	max-height: min(600px, 65vh);
+}
+/* ---------- Title bar ---------- */
+.interactive-session .chat-plan-review-container .chat-plan-review-title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 6px 4px 12px;
+	min-width: 0;
+	flex-shrink: 0;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-title-label {
+	flex: 1;
+	min-width: 0;
+	font-weight: 500;
+	font-size: var(--vscode-chat-font-size-body-s);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-title-actions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+}
+
+/* Small, transparent title-bar buttons — matches the question carousel
+ * chat-question-collapse-toggle / chat-question-close styles. */
+.interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-title-button {
+	min-width: 22px;
+	height: 22px;
+	padding: 0 6px;
+	border: none !important;
+	box-shadow: none !important;
+	background: transparent !important;
+	color: var(--vscode-icon-foreground) !important;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-title-button:hover:not(.disabled) {
+	background: var(--vscode-toolbar-hoverBackground) !important;
+}
+
+/* Icon-only square buttons (restore, chevron). Exactly 22x22 with no padding,
+ * matching `.monaco-button.chat-question-collapse-toggle`. */
+.interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-title-icon-button {
+	width: 22px;
+	padding: 0;
+}
+
+.interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-edit {
+	font-size: var(--vscode-chat-font-size-body-s);
+	color: var(--vscode-foreground) !important;
+}
+
+/* Inline slot in the title bar. The action buttons (Approve + Reject) get
+ * re-rendered here when the widget is collapsed so the user can act on the
+ * plan without expanding it. */
+.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions {
+	display: none;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	margin-left: auto;
+	margin-right: 4px;
+}
+
+.interactive-session .chat-plan-review-container.chat-plan-review-collapsed .chat-plan-review-inline-actions {
+	display: flex;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions .monaco-button {
+	width: auto;
+	min-width: auto;
+	padding: 0 10px;
+	height: 22px;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-inline-actions .monaco-button-dropdown {
+	width: auto;
+}
+
+/* ---------- Scrollable markdown body ----------
+ * Mirrors the flex + max-height chain used by
+ * chatToolConfirmationCarouselPart so the DomScrollableElement has something
+ * to clip and display its scrollbar against. DomScrollableElement sets the
+ * inner element's `overflow: hidden` inline, so we don't set overflow here. */
+.interactive-session .chat-plan-review-container .chat-confirmation-widget-message-scrollable.chat-plan-review-body-scrollable {
+	flex: 1;
+	min-height: 0;
+}
+
+.interactive-session .chat-plan-review-container .chat-confirmation-widget-message.chat-plan-review-body {
+	flex: 1;
+	min-height: 0;
+	max-height: min(300px, 40vh);
+	padding: 6px 12px;
+	background: transparent;
+	border-bottom: none;
+}
+
+.interactive-session .chat-plan-review-container .chat-confirmation-widget-message.chat-plan-review-body .rendered-markdown p:first-child {
+	margin-top: 0;
+}
+
+.interactive-session .chat-plan-review-container .chat-confirmation-widget-message.chat-plan-review-body .rendered-markdown > :last-child {
+	margin-bottom: 0;
+}
+
+/* ---------- Feedback section (fixed; outside scroll) ---------- */
+.interactive-session .chat-plan-review-container .chat-plan-review-feedback {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px 12px;
+	border-top: 1px solid var(--vscode-chat-requestBorder);
+	flex-shrink: 0;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-feedback-label {
+	font-size: var(--vscode-chat-font-size-body-s);
+	color: var(--vscode-descriptionForeground);
+}
+
+/* Textarea styled the same as the question carousel freeform textarea. */
+.interactive-session .chat-plan-review-container .chat-plan-review-feedback-textarea {
+	width: 100%;
+	min-height: 24px;
+	max-height: 200px;
+	padding: 3px 8px;
+	border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder));
+	background-color: var(--vscode-input-background);
+	color: var(--vscode-input-foreground);
+	border-radius: 4px;
+	resize: none;
+	font-family: var(--vscode-chat-font-family, inherit);
+	font-size: var(--vscode-chat-font-size-body-s);
+	box-sizing: border-box;
+	overflow-y: hidden;
+	align-content: center;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-feedback-textarea:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	border-color: var(--vscode-focusBorder);
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-feedback-textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}
+
+/* ---------- Footer buttons ---------- */
+.interactive-session .chat-plan-review-container > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-buttons.chat-plan-review-footer {
+	justify-content: flex-start;
+	border-top: 1px solid var(--vscode-chat-requestBorder);
+	padding: 6px 8px;
+	flex-shrink: 0;
+}
+
+.interactive-session .chat-plan-review-container > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-buttons.chat-plan-review-footer .chat-buttons {
+	display: flex;
+	column-gap: 6px;
+	align-items: center;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-footer .monaco-button {
+	width: auto;
+	min-width: auto;
+	padding: 0 10px;
+	height: 22px;
+}
+
+.interactive-session .chat-plan-review-container .chat-plan-review-footer .monaco-button-dropdown {
+	width: auto;
+}
+
+/* ---------- Hidden helper ---------- */
+.interactive-session .chat-plan-review-container .monaco-button.chat-plan-review-hidden {
+	display: none;
+}
+
+/* ---------- Collapsed state ---------- */
+.interactive-session .chat-plan-review-container.chat-plan-review-collapsed > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-message-scrollable,
+.interactive-session .chat-plan-review-container.chat-plan-review-collapsed > .chat-confirmation-widget2.chat-plan-review > .chat-plan-review-feedback,
+.interactive-session .chat-plan-review-container.chat-plan-review-collapsed > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-buttons {
+	display: none;
+}
+
+.interactive-session .chat-plan-review-container.chat-plan-review-collapsed > .chat-confirmation-widget2.chat-plan-review > .chat-plan-review-title {
+	border-bottom: none;
+}
+
+/* ---------- Submitted / used state ---------- */
+.interactive-session .chat-plan-review-container.chat-plan-review-used > .chat-confirmation-widget2.chat-plan-review > .chat-plan-review-feedback,
+.interactive-session .chat-plan-review-container.chat-plan-review-used > .chat-confirmation-widget2.chat-plan-review > .chat-confirmation-widget-buttons {
+	display: none;
+}