feat(chat): add compact tool UI mode for executed tool blocks (#322)

packages/types/src/global-settings.ts

@@ -163,6 +163,7 @@ export const globalSettingsSchema = z.object({
 	maxOpenTabsContext: z.number().optional(),
 	maxWorkspaceFiles: z.number().optional(),
 	showRooIgnoredFiles: z.boolean().optional(),
+	compactToolUI: z.boolean().optional(),
 	enableSubfolderRules: z.boolean().optional(),
 	maxImageFileSize: z.number().optional(),
 	maxTotalImageSize: z.number().optional(),

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

@@ -320,6 +320,7 @@ export type ExtensionState = Pick<
 	maxOpenTabsContext: number // Maximum number of VSCode open tabs to include in context (0-500)
 	maxWorkspaceFiles: number // Maximum number of files to include in current working directory details (0-500)
 	showRooIgnoredFiles: boolean // Whether to show .rooignore'd files in listings
+	compactToolUI?: boolean // Whether to collapse executed tool blocks to a single expandable line (#322)
 	enableSubfolderRules: boolean // Whether to load rules from subdirectories
 	maxReadFileLine?: number // Maximum line limit for read_file tool (-1 for default)
 	maxImageFileSize: number // Maximum size of image files to process in MB

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

@@ -71,6 +71,7 @@ import {
 	Split,
 	ArrowRight,
 	Check,
+	ChevronRight,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PathTooltip } from "../ui/PathTooltip"
@@ -182,8 +183,16 @@ export const ChatRowContent = ({
 }: ChatRowContentProps) => {
 	const { t, i18n } = useTranslation()
 
-	const { mcpServers, alwaysAllowMcp, currentCheckpoint, mode, apiConfiguration, clineMessages, currentTaskItem } =
-		useExtensionState()
+	const {
+		mcpServers,
+		alwaysAllowMcp,
+		currentCheckpoint,
+		mode,
+		apiConfiguration,
+		clineMessages,
+		currentTaskItem,
+		compactToolUI,
+	} = useExtensionState()
 	const { info: model } = useSelectedModel(apiConfiguration)
 	const [isEditing, setIsEditing] = useState(false)
 	const [editedContent, setEditedContent] = useState("")
@@ -1405,6 +1414,26 @@ export const ChatRowContent = ({
 					const sayTool = safeJsonParse<ClineSayTool>(message.text)
 					if (!sayTool) return null
 
+					// Compact mode (#322): collapse executed (history) tool blocks to a single
+					// clickable line, hiding verbose params/payloads until expanded. Only applies
+					// to `say` tool rows here — approval prompts (`ask`) are never compacted.
+					if (compactToolUI && !isExpanded) {
+						const compactLabel = sayTool.path ? `${sayTool.tool}: ${sayTool.path}` : sayTool.tool
+						return (
+							<div
+								onClick={handleToggleExpand}
+								className="flex items-center gap-2 py-0.5 cursor-pointer text-vscode-descriptionForeground hover:text-vscode-foreground"
+								data-testid="compact-tool-row"
+								title={t("chat:compactTool.expandHint")}>
+								<ChevronRight className="w-3.5 h-3.5 shrink-0" />
+								<PocketKnife className="w-3.5 h-3.5 shrink-0" />
+								<span className="truncate text-sm">
+									{t("chat:compactTool.label", { tool: compactLabel })}
+								</span>
+							</div>
+						)
+					}
+
 					switch (sayTool.tool) {
 						case "runSlashCommand": {
 							const slashCommandInfo = sayTool

webview-ui/src/components/settings/ContextManagementSettings.tsx

@@ -32,6 +32,7 @@ type ContextManagementSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	maxOpenTabsContext: number
 	maxWorkspaceFiles: number
 	showRooIgnoredFiles?: boolean
+	compactToolUI?: boolean
 	enableSubfolderRules?: boolean
 	maxImageFileSize?: number
 	maxTotalImageSize?: number
@@ -50,6 +51,7 @@ type ContextManagementSettingsProps = HTMLAttributes<HTMLDivElement> & {
 		| "maxOpenTabsContext"
 		| "maxWorkspaceFiles"
 		| "showRooIgnoredFiles"
+		| "compactToolUI"
 		| "enableSubfolderRules"
 		| "maxImageFileSize"
 		| "maxTotalImageSize"
@@ -70,6 +72,7 @@ export const ContextManagementSettings = ({
 	maxOpenTabsContext,
 	maxWorkspaceFiles,
 	showRooIgnoredFiles,
+	compactToolUI,
 	enableSubfolderRules,
 	setCachedStateField,
 	maxImageFileSize,
@@ -229,6 +232,23 @@ export const ContextManagementSettings = ({
 					</div>
 				</SearchableSetting>
 
+				<SearchableSetting
+					settingId="context-compact-tool-ui"
+					section="contextManagement"
+					label={t("settings:contextManagement.compactToolUI.label")}>
+					<VSCodeCheckbox
+						checked={compactToolUI}
+						onChange={(e: any) => setCachedStateField("compactToolUI", e.target.checked)}
+						data-testid="compact-tool-ui-checkbox">
+						<label className="block font-medium mb-1">
+							{t("settings:contextManagement.compactToolUI.label")}
+						</label>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:contextManagement.compactToolUI.description")}
+					</div>
+				</SearchableSetting>
+
 				<SearchableSetting
 					settingId="context-enable-subfolder-rules"
 					section="contextManagement"

webview-ui/src/components/settings/SettingsView.tsx

@@ -185,6 +185,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		terminalZdotdir,
 		writeDelayMs,
 		showRooIgnoredFiles,
+		compactToolUI,
 		enableSubfolderRules,
 		maxImageFileSize,
 		maxTotalImageSize,
@@ -834,6 +835,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 								maxOpenTabsContext={maxOpenTabsContext}
 								maxWorkspaceFiles={maxWorkspaceFiles ?? 200}
 								showRooIgnoredFiles={showRooIgnoredFiles}
+								compactToolUI={compactToolUI ?? false}
 								enableSubfolderRules={enableSubfolderRules}
 								maxImageFileSize={maxImageFileSize}
 								maxTotalImageSize={maxTotalImageSize}

webview-ui/src/components/settings/__tests__/ContextManagementSettings.spec.tsx

@@ -92,6 +92,7 @@ describe("ContextManagementSettings", () => {
 		maxOpenTabsContext: 20,
 		maxWorkspaceFiles: 200,
 		showRooIgnoredFiles: false,
+		compactToolUI: false,
 		profileThresholds: {},
 		includeDiagnosticMessages: true,
 		maxDiagnosticMessages: 50,
@@ -150,6 +151,23 @@ describe("ContextManagementSettings", () => {
 		})
 	})
 
+	it("renders the compact tool UI toggle", () => {
+		render(<ContextManagementSettings {...defaultProps} />)
+		expect(screen.getByTestId("compact-tool-ui-checkbox")).toBeInTheDocument()
+	})
+
+	it("calls setCachedStateField when the compact tool UI checkbox is toggled", async () => {
+		const setCachedStateField = vi.fn()
+		render(<ContextManagementSettings {...defaultProps} setCachedStateField={setCachedStateField} />)
+
+		const checkbox = screen.getByTestId("compact-tool-ui-checkbox").querySelector("input")!
+		fireEvent.click(checkbox)
+
+		await waitFor(() => {
+			expect(setCachedStateField).toHaveBeenCalledWith("compactToolUI", true)
+		})
+	})
+
 	it("calls setCachedStateField when max diagnostic messages slider is changed", async () => {
 		const setCachedStateField = vi.fn()
 		render(<ContextManagementSettings {...defaultProps} setCachedStateField={setCachedStateField} />)

webview-ui/src/context/ExtensionStateContext.tsx

@@ -224,6 +224,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		cwd: "",
 		telemetrySetting: "unset",
 		showRooIgnoredFiles: true, // Default to showing .rooignore'd files with lock symbol (current behavior).
+		compactToolUI: false, // Default off — opt-in single-line collapsed tool blocks (#322).
 		enableSubfolderRules: false, // Default to disabled - must be enabled to load rules from subdirectories
 		renderContext: "sidebar",
 		maxReadFileLine: -1, // Default max line limit for read_file tool (-1 for default)

webview-ui/src/i18n/locales/en/chat.json

@@ -476,5 +476,9 @@
 		"title": "Provider no longer supported",
 		"message": "This provider is no longer available. Select a supported provider to continue.",
 		"openSettings": "Open Settings"
+	},
+	"compactTool": {
+		"label": "Tool: {{tool}}",
+		"expandHint": "Click to expand tool details"
 	}
 }

webview-ui/src/i18n/locales/en/settings.json

@@ -738,6 +738,10 @@
 		"enableSubfolderRules": {
 			"label": "Enable subfolder rules",
 			"description": "Recursively discover and load .roo/rules and AGENTS.md files from subdirectories. Useful for monorepos with per-package rules."
+		},
+		"compactToolUI": {
+			"label": "Compact tool display",
+			"description": "Collapse executed tool blocks to a single line in the chat; click a tool to expand its details. Approval prompts are always shown in full."
 		}
 	},
 	"terminal": {