render xterm instead of html for the chat terminal output (microsoft#278684)

Author: meganrogge

src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatTerminalToolProgressPart.css

@@ -151,16 +151,18 @@
 .chat-terminal-output-container > .monaco-scrollable-element {
 	width: 100%;
 }
+.chat-terminal-output-container:focus-visible {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: 2px;
+}
 .chat-terminal-output-body {
 	padding: 4px 6px;
 	max-width: 100%;
-	height: 100%;
 	box-sizing: border-box;
+	min-height: 0;
 }
-.chat-terminal-output-content {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
+.chat-terminal-output-terminal.chat-terminal-output-terminal-no-output {
+	display: none;
 }
 .chat-terminal-output {
 	margin: 0;
@@ -169,10 +171,18 @@
 }
 
 .chat-terminal-output-empty {
+	display: none;
 	font-style: italic;
 	color: var(--vscode-descriptionForeground);
 	line-height: normal;
 }
+.chat-terminal-output-terminal.chat-terminal-output-terminal-no-output ~ .chat-terminal-output-empty {
+	display: block;
+}
+
+.chat-terminal-output-container .xterm-scrollable-element .scrollbar {
+	display: none;
+}
 
 .chat-terminal-output div,
 .chat-terminal-output span {

src/vs/workbench/contrib/chat/browser/chatContentParts/toolInvocationParts/chatTerminalToolProgressPart.ts

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from '../../../../base/common/lifecycle.js';
+import type { ITerminalCommand } from '../../../../platform/terminal/common/capabilities/capabilities.js';
+import { ITerminalService, type IDetachedTerminalInstance } from './terminal.js';
+import { DetachedProcessInfo } from './detachedTerminal.js';
+import { XtermTerminal } from './xterm/xtermTerminal.js';
+import { TERMINAL_BACKGROUND_COLOR } from '../common/terminalColorRegistry.js';
+import { PANEL_BACKGROUND } from '../../../common/theme.js';
+
+interface IDetachedTerminalCommandMirror {
+	attach(container: HTMLElement): Promise<void>;
+	renderCommand(): Promise<{ lineCount?: number } | undefined>;
+}
+
+/**
+ * Mirrors a terminal command's output into a detached terminal instance.
+ * Used in the chat terminal tool progress part to show command output for example.
+ */
+export class DetachedTerminalCommandMirror extends Disposable implements IDetachedTerminalCommandMirror {
+	private _detachedTerminal: Promise<IDetachedTerminalInstance>;
+	private _attachedContainer?: HTMLElement;
+
+	constructor(
+		private readonly _xtermTerminal: XtermTerminal,
+		private readonly _command: ITerminalCommand,
+		@ITerminalService private readonly _terminalService: ITerminalService,
+	) {
+		super();
+		this._detachedTerminal = this._createTerminal();
+	}
+
+	async attach(container: HTMLElement): Promise<void> {
+		const terminal = await this._detachedTerminal;
+		if (this._attachedContainer !== container) {
+			container.classList.add('chat-terminal-output-terminal');
+			terminal.attachToElement(container);
+			this._attachedContainer = container;
+		}
+	}
+
+	async renderCommand(): Promise<{ lineCount?: number } | undefined> {
+		const vt = await this._getCommandOutputAsVT();
+		if (!vt) {
+			return undefined;
+		}
+		if (!vt.text) {
+			return { lineCount: 0 };
+		}
+		const detached = await this._detachedTerminal;
+		detached.xterm.write(vt.text);
+		return { lineCount: vt.lineCount };
+	}
+
+	private async _getCommandOutputAsVT(): Promise<{ text: string; lineCount: number } | undefined> {
+		const executedMarker = this._command.executedMarker;
+		const endMarker = this._command.endMarker;
+		if (!executedMarker || executedMarker.isDisposed || !endMarker || endMarker.isDisposed) {
+			return undefined;
+		}
+
+		const startLine = executedMarker.line;
+		const endLine = endMarker.line - 1;
+		const lineCount = Math.max(endLine - startLine + 1, 0);
+
+		const text = await this._xtermTerminal.getRangeAsVT(executedMarker, endMarker, true);
+		if (!text) {
+			return { text: '', lineCount: 0 };
+		}
+
+		return { text, lineCount };
+	}
+
+	private async _createTerminal(): Promise<IDetachedTerminalInstance> {
+		const detached = await this._terminalService.createDetachedTerminal({
+			cols: this._xtermTerminal.raw!.cols,
+			rows: 10,
+			readonly: true,
+			processInfo: new DetachedProcessInfo({ initialCwd: '' }),
+			disableOverviewRuler: true,
+			colorProvider: {
+				getBackgroundColor: theme => {
+					const terminalBackground = theme.getColor(TERMINAL_BACKGROUND_COLOR);
+					if (terminalBackground) {
+						return terminalBackground;
+					}
+					return theme.getColor(PANEL_BACKGROUND);
+				},
+			}
+		});
+		return this._register(detached);
+	}
+
+}

src/vs/workbench/contrib/terminal/browser/chatTerminalCommandMirror.ts

@@ -332,6 +332,7 @@ export interface IDetachedXTermOptions {
 	capabilities?: ITerminalCapabilityStore;
 	readonly?: boolean;
 	processInfo: ITerminalProcessInfo;
+	disableOverviewRuler?: boolean;
 }
 
 /**
@@ -1343,6 +1344,14 @@ export interface IXtermTerminal extends IDisposable {
 	 */
 	getFont(): ITerminalFont;
 
+	/**
+	 * Gets the content between two markers as VT sequences.
+	 * @param startMarker The marker to start from.
+	 * @param endMarker The marker to end at.
+	 * @param skipLastLine Whether the last line should be skipped (e.g. when it's the prompt line)
+	 */
+	getRangeAsVT(startMarker: IXtermMarker, endMarker?: IXtermMarker, skipLastLine?: boolean): Promise<string>;
+
 	/**
 	 * Gets whether there's any terminal selection.
 	 */

src/vs/workbench/contrib/terminal/browser/terminal.ts

@@ -1099,6 +1099,7 @@ export class TerminalService extends Disposable implements ITerminalService {
 			rows: options.rows,
 			xtermColorProvider: options.colorProvider,
 			capabilities: options.capabilities || new TerminalCapabilityStore(),
+			disableOverviewRuler: options.disableOverviewRuler,
 		}, undefined);
 
 		if (options.readonly) {

src/vs/workbench/contrib/terminal/browser/terminalService.ts

@@ -46,6 +46,7 @@ import { equals } from '../../../../../base/common/objects.js';
 import type { IProgressState } from '@xterm/addon-progress';
 import type { CommandDetectionCapability } from '../../../../../platform/terminal/common/capabilities/commandDetectionCapability.js';
 import { URI } from '../../../../../base/common/uri.js';
+import { assert } from '../../../../../base/common/assert.js';
 
 const enum RenderConstants {
 	SmoothScrollDuration = 125
@@ -83,6 +84,8 @@ export interface IXtermTerminalOptions {
 	disableShellIntegrationReporting?: boolean;
 	/** The object that imports xterm addons, set this to inject an importer in tests. */
 	xtermAddonImporter?: XtermAddonImporter;
+	/** Whether to disable the overview ruler. */
+	disableOverviewRuler?: boolean;
 }
 
 /**
@@ -230,7 +233,7 @@ export class XtermTerminal extends Disposable implements IXtermTerminal, IDetach
 			scrollSensitivity: config.mouseWheelScrollSensitivity,
 			scrollOnEraseInDisplay: true,
 			wordSeparator: config.wordSeparators,
-			overviewRuler: {
+			overviewRuler: options.disableOverviewRuler ? { width: 0 } : {
 				width: 14,
 				showTopBorder: true,
 			},
@@ -531,10 +534,7 @@ export class XtermTerminal extends Disposable implements IXtermTerminal, IDetach
 		this.raw.options.customGlyphs = config.customGlyphs;
 		this.raw.options.ignoreBracketedPasteMode = config.ignoreBracketedPasteMode;
 		this.raw.options.rescaleOverlappingGlyphs = config.rescaleOverlappingGlyphs;
-		this.raw.options.overviewRuler = {
-			width: 14,
-			showTopBorder: true,
-		};
+
 		this._updateSmoothScrolling();
 		if (this._attached) {
 			if (this._attached.options.enableGpu) {
@@ -891,6 +891,27 @@ export class XtermTerminal extends Disposable implements IXtermTerminal, IDetach
 		this._onDidRequestRefreshDimensions.fire();
 	}
 
+	async getRangeAsVT(startMarker: IXtermMarker, endMarker?: IXtermMarker, skipLastLine?: boolean): Promise<string> {
+		if (!this._serializeAddon) {
+			const Addon = await this._xtermAddonLoader.importAddon('serialize');
+			this._serializeAddon = new Addon();
+			this.raw.loadAddon(this._serializeAddon);
+		}
+
+		assert(startMarker.line !== -1);
+		let end = endMarker?.line ?? this.raw.buffer.active.length - 1;
+		if (skipLastLine) {
+			end = end - 1;
+		}
+		return this._serializeAddon.serialize({
+			range: {
+				start: startMarker.line,
+				end: end
+			}
+		});
+	}
+
+
 	getXtermTheme(theme?: IColorTheme): ITheme {
 		if (!theme) {
 			theme = this._themeService.getColorTheme();

src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts

@@ -566,7 +566,7 @@ export class RunInTerminalTool extends Disposable implements IToolImpl {
 					throw new CancellationError();
 				}
 
-				await this._commandArtifactCollector.capture(toolSpecificData, toolTerminal.instance, commandId, pollingResult?.output);
+				await this._commandArtifactCollector.capture(toolSpecificData, toolTerminal.instance, commandId);
 				const state = toolSpecificData.terminalCommandState ?? {};
 				state.timestamp = state.timestamp ?? timingStart;
 				toolSpecificData.terminalCommandState = state;
@@ -665,7 +665,7 @@ export class RunInTerminalTool extends Disposable implements IToolImpl {
 					throw new CancellationError();
 				}
 
-				await this._commandArtifactCollector.capture(toolSpecificData, toolTerminal.instance, commandId, executeResult.output);
+				await this._commandArtifactCollector.capture(toolSpecificData, toolTerminal.instance, commandId);
 				{
 					const state = toolSpecificData.terminalCommandState ?? {};
 					state.timestamp = state.timestamp ?? timingStart;

src/vs/workbench/contrib/terminalContrib/chatAgentTools/browser/tools/runInTerminalTool.ts

@@ -5,7 +5,6 @@
 
 import { URI } from '../../../../../../base/common/uri.js';
 import { IChatTerminalToolInvocationData } from '../../../../chat/common/chatService.js';
-import { CHAT_TERMINAL_OUTPUT_MAX_PREVIEW_LINES } from '../../../../chat/common/constants.js';
 import { ITerminalInstance } from '../../../../terminal/browser/terminal.js';
 import { TerminalCapability } from '../../../../../../platform/terminal/common/capabilities/capabilities.js';
 import { ITerminalLogService } from '../../../../../../platform/terminal/common/terminal.js';
@@ -19,7 +18,6 @@ export class TerminalCommandArtifactCollector {
 		toolSpecificData: IChatTerminalToolInvocationData,
 		instance: ITerminalInstance,
 		commandId: string | undefined,
-		fallbackOutput?: string
 	): Promise<void> {
 		if (commandId) {
 			try {
@@ -28,24 +26,19 @@ export class TerminalCommandArtifactCollector {
 				this._logService.warn(`RunInTerminalTool: Failed to create terminal command URI for ${commandId}`, error);
 			}
 
-			const serialized = await this._tryGetSerializedCommandOutput(toolSpecificData, instance, commandId);
-			if (serialized) {
-				toolSpecificData.terminalCommandOutput = { text: serialized.text, truncated: serialized.truncated };
+			const command = await this._tryGetCommand(instance, commandId);
+			if (command) {
 				toolSpecificData.terminalCommandState = {
-					exitCode: serialized.exitCode,
-					timestamp: serialized.timestamp,
-					duration: serialized.duration
+					exitCode: command.exitCode,
+					timestamp: command.timestamp,
+					duration: command.duration
 				};
 				this._applyTheme(toolSpecificData, instance);
 				return;
 			}
 		}
 
-		if (fallbackOutput !== undefined) {
-			const normalized = fallbackOutput.replace(/\r\n/g, '\n');
-			toolSpecificData.terminalCommandOutput = { text: normalized, truncated: false };
-			this._applyTheme(toolSpecificData, instance);
-		}
+		this._applyTheme(toolSpecificData, instance);
 	}
 
 	private _applyTheme(toolSpecificData: IChatTerminalToolInvocationData, instance: ITerminalInstance): void {
@@ -61,31 +54,8 @@ export class TerminalCommandArtifactCollector {
 		return instance.resource.with({ query: params.toString() });
 	}
 
-	private async _tryGetSerializedCommandOutput(toolSpecificData: IChatTerminalToolInvocationData, instance: ITerminalInstance, commandId: string): Promise<{ text: string; truncated?: boolean; exitCode?: number; timestamp?: number; duration?: number } | undefined> {
+	private async _tryGetCommand(instance: ITerminalInstance, commandId: string) {
 		const commandDetection = instance.capabilities.get(TerminalCapability.CommandDetection);
-		const command = commandDetection?.commands.find(c => c.id === commandId);
-
-		if (!command?.endMarker) {
-			return undefined;
-		}
-
-		const xterm = await instance.xtermReadyPromise;
-		if (!xterm) {
-			return undefined;
-		}
-
-		try {
-			const result = await xterm.getCommandOutputAsHtml(command, CHAT_TERMINAL_OUTPUT_MAX_PREVIEW_LINES);
-			return {
-				text: result.text,
-				truncated: result.truncated,
-				exitCode: command.exitCode,
-				timestamp: command.timestamp,
-				duration: command.duration
-			};
-		} catch (error) {
-			this._logService.warn(`RunInTerminalTool: Failed to serialize command output for ${commandId}`, error);
-			return undefined;
-		}
+		return commandDetection?.commands.find(c => c.id === commandId);
 	}
 }