feat: terminal command UX overhaul - unified output, auto-collapse, scroll improvements, status/duration persistence

Author: CodeKing

packages/core/src/message-utils/consolidateCommands.ts

@@ -103,15 +103,23 @@ export function consolidateCommands(messages: ClineMessage[]): ClineMessage[] {
 					const isDuplicate = previous && previous.type !== type && previous.text === text
 
 					if (text.length > 0 && !isDuplicate) {
-						// Add a newline before adding the text if there's already content
-						if (
-							previous &&
-							consolidatedText.length >
-								consolidatedText.indexOf(COMMAND_OUTPUT_STRING) + COMMAND_OUTPUT_STRING.length
-						) {
-							consolidatedText += "\n"
+						// command_output messages are cumulative — each streaming
+						// partial contains the full output so far.  Replace the
+						// output portion after COMMAND_OUTPUT_STRING rather than
+						// appending so that repeated cumulative snapshots don't
+						// duplicate content.
+						const outputStartIdx = consolidatedText.lastIndexOf(COMMAND_OUTPUT_STRING)
+						const hasOutput =
+							outputStartIdx !== -1 &&
+							consolidatedText.length > outputStartIdx + COMMAND_OUTPUT_STRING.length
+
+						if (hasOutput) {
+							// Replace everything after "Output:" with the new (superset) text.
+							consolidatedText =
+								consolidatedText.slice(0, outputStartIdx + COMMAND_OUTPUT_STRING.length) + "\n" + text
+						} else {
+							consolidatedText += "\n" + text
 						}
-						consolidatedText += text
 					}
 
 					previous = { type, text }

packages/types/src/global-settings.ts

@@ -220,6 +220,8 @@ export const globalSettingsSchema = z.object({
 	includeTaskHistoryInEnhance: z.boolean().optional(),
 	historyPreviewCollapsed: z.boolean().optional(),
 	reasoningBlockCollapsed: z.boolean().optional(),
+	autoCollapseLongMessages: z.boolean().optional(),
+	longMessageCollapseThreshold: z.number().int().min(5).max(500).optional(),
 	/**
 	 * Font size (in pixels) for the Zoo Code chat/webview UI.
 	 * When unset (or `null`), the webview inherits VS Code's `--vscode-font-size`.

packages/types/src/vscode-extension-host.ts

@@ -310,6 +310,8 @@ export type ExtensionState = Pick<
 	| "openRouterImageGenerationSelectedModel"
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
+	| "autoCollapseLongMessages"
+	| "longMessageCollapseThreshold"
 	| "chatFontSize"
 	| "enterBehavior"
 	| "includeCurrentTime"

src/core/tools/ExecuteCommandTool.ts

@@ -281,6 +281,9 @@ export async function executeCommandInTerminal(
 	}
 
 	let accumulatedOutput = ""
+	// Record the epoch-ms when the shell execution starts so we can persist
+	// timing markers alongside the exit code marker in the final command_output.
+	let commandStartTime = 0
 	// Bound accumulated output buffer size to prevent unbounded memory growth for long-running commands.
 	// The interceptor preserves full output; this buffer is only for UI display (100KB limit).
 	const maxAccumulatedOutputSize = 100_000
@@ -394,17 +397,39 @@ export async function executeCommandInTerminal(
 				result = Terminal.compressTerminalOutput(output ?? "")
 				latestCompressedOutput = result
 
+				// Embed exit code in the persisted command_output text so the webview
+				// can derive command failure/success status after remount (e.g. chat
+				// switch).  `exitDetails` is always set before onCompleted fires
+				// because shell_execution_complete always precedes the completed event
+				// in both the VSCode and Execa terminal implementations.
+				// The marker is appended to the *persisted* output only — `result`
+				// (used for the LLM tool result) stays clean.
+				let persistedOutput = result
+				const commandEndTime = Date.now()
+				// Embed timing markers so the webview can compute duration after
+				// remount (e.g. chat switch, extension reload).  The markers are
+				// appended to the *persisted* output only — `result` (used for the
+				// LLM tool result) stays clean.
+				if (commandStartTime > 0) {
+					persistedOutput += `\n[__START_TIME__:${commandStartTime}]`
+					persistedOutput += `\n[__END_TIME__:${commandEndTime}]`
+				}
+				if (exitDetails?.exitCode !== undefined) {
+					persistedOutput += `\n[__EXIT_CODE__:${exitDetails.exitCode}]`
+				}
+
 				// Preserve order: wait for queued partial updates, then emit the final
 				// non-partial command_output update.
 				await commandOutputSayChain
-				await queueCommandOutputMessage(result, false, true)
+				await queueCommandOutputMessage(persistedOutput, false, true)
 				completed = true
 			} finally {
 				// Signal that onCompleted has finished, so the main code can safely use persistedResult
 				resolveOnCompleted?.()
 			}
 		},
 		onShellExecutionStarted: (pid: number | undefined) => {
+			commandStartTime = Date.now()
 			const status: CommandExecutionStatus = { executionId, status: "started", pid, command }
 			provider?.postMessageToWebview({ type: "commandExecutionStatus", text: JSON.stringify(status) })
 		},

src/core/webview/ClineProvider.ts

@@ -2294,6 +2294,8 @@ export class ClineProvider
 			maxTotalImageSize,
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
+			autoCollapseLongMessages,
+			longMessageCollapseThreshold,
 			chatFontSize,
 			enterBehavior,
 			cloudUserInfo,
@@ -2458,6 +2460,8 @@ export class ClineProvider
 			settingsImportedAt: this.settingsImportedAt,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
+			autoCollapseLongMessages: autoCollapseLongMessages ?? true,
+			longMessageCollapseThreshold: longMessageCollapseThreshold ?? 10,
 			chatFontSize,
 			enterBehavior: enterBehavior ?? "send",
 			cloudUserInfo,
@@ -2665,6 +2669,8 @@ export class ClineProvider
 			maxTotalImageSize: stateValues.maxTotalImageSize ?? 20,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
+			autoCollapseLongMessages: stateValues.autoCollapseLongMessages ?? true,
+			longMessageCollapseThreshold: stateValues.longMessageCollapseThreshold ?? 10,
 			chatFontSize: stateValues.chatFontSize,
 			enterBehavior: stateValues.enterBehavior ?? "send",
 			cloudUserInfo,

webview-ui/src/components/chat/ChatRow.tsx

@@ -12,6 +12,7 @@ import type {
 	ClineAskUseMcpServer,
 	ClineSayTool,
 } from "@roo-code/types"
+import type { CollapseDecision } from "@src/utils/messageSize"
 
 import { Mode } from "@roo/modes"
 
@@ -43,7 +44,7 @@ import { BatchFilePermission } from "./BatchFilePermission"
 import { BatchDiffApproval } from "./BatchDiffApproval"
 import { ProgressIndicator } from "./ProgressIndicator"
 import { Markdown } from "./Markdown"
-import { CommandExecution } from "./CommandExecution"
+import { CommandExecution, parseCommandAndOutput } from "./CommandExecution"
 import { CommandExecutionError } from "./CommandExecutionError"
 import { AutoApprovedRequestLimitWarning } from "./AutoApprovedRequestLimitWarning"
 import { InProgressRow, CondensationResultRow, CondensationErrorRow, TruncationResultRow } from "./context-management"
@@ -109,10 +110,13 @@ function getPreviousTodos(messages: ClineMessage[], currentMessageTs: number): a
 	return []
 }
 
+import { MessageCollapsePreview } from "./MessageCollapsePreview"
+
 interface ChatRowProps {
 	message: ClineMessage
 	lastModifiedMessage?: ClineMessage
 	isExpanded: boolean
+	collapseDecision?: CollapseDecision | null
 	isLast: boolean
 	isStreaming: boolean
 	onToggleExpand: (ts: number) => void
@@ -138,7 +142,7 @@ const ChatRow = memo(
 		const prevHeightRef = useRef(0)
 
 		const [chatrow, { height }] = useSize(
-			<div className="px-[15px] py-[10px] pr-[6px]">
+			<div data-message-row={message.ts} className="px-[15px] py-[10px] pr-[6px]">
 				<ChatRowContent {...props} />
 			</div>,
 		)
@@ -170,6 +174,7 @@ export const ChatRowContent = ({
 	message,
 	lastModifiedMessage,
 	isExpanded,
+	collapseDecision,
 	isLast,
 	isStreaming,
 	onToggleExpand,
@@ -277,17 +282,41 @@ export const ChatRowContent = ({
 			case "error":
 			case "mistake_limit_reached":
 				return [null, null] // These will be handled by ErrorRow component
-			case "command":
+			case "command": {
+				const { exitCode } = parseCommandAndOutput(message.text)
+				const hasExited = !isCommandExecuting && exitCode !== undefined
+				const commandFailed = hasExited && exitCode !== 0
+				const commandSucceeded = hasExited && exitCode === 0
+
 				return [
 					isCommandExecuting ? (
 						<ProgressIndicator />
 					) : (
-						<TerminalSquare className="size-4" aria-label="Terminal icon" />
+						<TerminalSquare
+							className="size-4"
+							aria-label="Terminal icon"
+							style={{ color: commandFailed ? errorColor : commandSucceeded ? successColor : undefined }}
+						/>
+					),
+					isCommandExecuting ? (
+						<span style={{ color: normalColor, fontWeight: "bold" }}>
+							{t("chat:commandExecution.running")}
+						</span>
+					) : commandFailed ? (
+						<span style={{ color: errorColor, fontWeight: "bold" }}>
+							{t("chat:commandExecution.failed")}
+						</span>
+					) : commandSucceeded ? (
+						<span style={{ color: successColor, fontWeight: "bold" }}>
+							{t("chat:commandExecution.completed")}
+						</span>
+					) : (
+						<span style={{ color: normalColor, fontWeight: "bold" }}>
+							{t("chat:commandExecution.running")}
+						</span>
 					),
-					<span style={{ color: normalColor, fontWeight: "bold" }}>
-						{t("chat:commandExecution.running")}
-					</span>,
 				]
+			}
 			case "use_mcp_server":
 				const mcpServerUse = safeJsonParse<ClineAskUseMcpServer>(message.text)
 				if (mcpServerUse === undefined) {
@@ -1008,6 +1037,19 @@ export const ChatRowContent = ({
 		}
 	}
 
+	// Auto-collapse: when message is collapsed and has a collapse decision,
+	// render the preview instead of full content.
+	if (!isExpanded && collapseDecision) {
+		return (
+			<MessageCollapsePreview
+				message={message}
+				decision={collapseDecision}
+				onExpand={() => onToggleExpand(message.ts)}
+				isCommandExecuting={isCommandExecuting}
+			/>
+		)
+	}
+
 	switch (message.type) {
 		case "say":
 			switch (message.say) {