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

Adds an opt-in global setting (compactToolUI, off by default) that collapses
executed (say) tool blocks in the chat history to a single clickable line,
hiding verbose descriptions and JSON payloads until the user expands them.

Approval prompts (ask) are never compacted, so users always see the parameters
they are approving. Toggle lives in Context Management settings; new i18n keys
added across all 18 locales. Closes #322.

Author: proyectoauraorg

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)