Fixes #4775

Author: roomote

packages/types/src/global-settings.ts

@@ -103,6 +103,7 @@ export const globalSettingsSchema = z.object({
 	customSupportPrompts: customSupportPromptsSchema.optional(),
 	enhancementApiConfigId: z.string().optional(),
 	historyPreviewCollapsed: z.boolean().optional(),
+	hideTaskAndAutoApproveBoxes: z.boolean().optional(),
 })
 
 export type GlobalSettings = z.infer<typeof globalSettingsSchema>

src/core/webview/ClineProvider.ts

@@ -1331,6 +1331,7 @@ export class ClineProvider
 			maxReadFileLine,
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
+			hideTaskAndAutoApproveBoxes,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,
@@ -1443,6 +1444,7 @@ export class ClineProvider
 			terminalCompressProgressBar: terminalCompressProgressBar ?? true,
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
+			hideTaskAndAutoApproveBoxes: hideTaskAndAutoApproveBoxes ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
 			sharingEnabled: sharingEnabled ?? false,
@@ -1591,6 +1593,7 @@ export class ClineProvider
 			maxReadFileLine: stateValues.maxReadFileLine ?? -1,
 			maxConcurrentFileReads: stateValues.maxConcurrentFileReads ?? 5,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
+			hideTaskAndAutoApproveBoxes: stateValues.hideTaskAndAutoApproveBoxes ?? false,
 			cloudUserInfo,
 			cloudIsAuthenticated,
 			sharingEnabled,

src/core/webview/webviewMessageHandler.ts

@@ -999,6 +999,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("historyPreviewCollapsed", message.bool ?? false)
 			// No need to call postStateToWebview here as the UI already updated optimistically
 			break
+		case "hideTaskAndAutoApproveBoxes":
+			await updateGlobalState("hideTaskAndAutoApproveBoxes", message.bool ?? false)
+			await provider.postStateToWebview()
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/shared/ExtensionMessage.ts

@@ -240,6 +240,7 @@ export type ExtensionState = Pick<
 	renderContext: "sidebar" | "editor"
 	settingsImportedAt?: number
 	historyPreviewCollapsed?: boolean
+	hideTaskAndAutoApproveBoxes?: boolean
 
 	cloudUserInfo: CloudUserInfo | null
 	cloudIsAuthenticated: boolean

src/shared/WebviewMessage.ts

@@ -158,6 +158,7 @@ export interface WebviewMessage {
 		| "indexCleared"
 		| "codebaseIndexConfig"
 		| "setHistoryPreviewCollapsed"
+		| "hideTaskAndAutoApproveBoxes"
 		| "openExternal"
 		| "filterMarketplaceItems"
 		| "marketplaceButtonClicked"

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

@@ -93,6 +93,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		telemetrySetting,
 		hasSystemPromptOverride,
 		historyPreviewCollapsed, // Added historyPreviewCollapsed
+		hideTaskAndAutoApproveBoxes, // Added hideTaskAndAutoApproveBoxes
 		soundEnabled,
 		soundVolume,
 	} = useExtensionState()
@@ -1348,19 +1349,21 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			{showAnnouncement && <Announcement hideAnnouncement={hideAnnouncement} />}
 			{task ? (
 				<>
-					<TaskHeader
-						task={task}
-						tokensIn={apiMetrics.totalTokensIn}
-						tokensOut={apiMetrics.totalTokensOut}
-						doesModelSupportPromptCache={model?.supportsPromptCache ?? false}
-						cacheWrites={apiMetrics.totalCacheWrites}
-						cacheReads={apiMetrics.totalCacheReads}
-						totalCost={apiMetrics.totalCost}
-						contextTokens={apiMetrics.contextTokens}
-						buttonsDisabled={sendingDisabled}
-						handleCondenseContext={handleCondenseContext}
-						onClose={handleTaskCloseButtonClick}
-					/>
+					{!hideTaskAndAutoApproveBoxes && (
+						<TaskHeader
+							task={task}
+							tokensIn={apiMetrics.totalTokensIn}
+							tokensOut={apiMetrics.totalTokensOut}
+							doesModelSupportPromptCache={model?.supportsPromptCache ?? false}
+							cacheWrites={apiMetrics.totalCacheWrites}
+							cacheReads={apiMetrics.totalCacheReads}
+							totalCost={apiMetrics.totalCost}
+							contextTokens={apiMetrics.contextTokens}
+							buttonsDisabled={sendingDisabled}
+							handleCondenseContext={handleCondenseContext}
+							onClose={handleTaskCloseButtonClick}
+						/>
+					)}
 
 					{hasSystemPromptOverride && (
 						<div className="px-3">
@@ -1427,7 +1430,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			//    This ensures it takes its natural height when there's space
 			//    but becomes scrollable when the viewport is too small
 			*/}
-			{!task && (
+			{!task && !hideTaskAndAutoApproveBoxes && (
 				<div className="mb-[-2px] flex-initial min-h-0">
 					<AutoApproveMenu />
 				</div>
@@ -1455,7 +1458,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							initialTopMostItemIndex={groupedMessages.length - 1}
 						/>
 					</div>
-					<AutoApproveMenu />
+					{!hideTaskAndAutoApproveBoxes && <AutoApproveMenu />}
 					{showScrollToBottom ? (
 						<div className="flex px-[15px] pt-[10px]">
 							<div

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

@@ -22,6 +22,7 @@ import {
 	Globe,
 	Info,
 	MessageSquare,
+	Monitor,
 	LucideIcon,
 } from "lucide-react"
 
@@ -88,6 +89,7 @@ const sectionNames = [
 	"prompts",
 	"experimental",
 	"language",
+	"ui",
 	"about",
 ] as const
 
@@ -315,6 +317,10 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
 			vscode.postMessage({ type: "codebaseIndexConfig", values: codebaseIndexConfig })
+			vscode.postMessage({
+				type: "hideTaskAndAutoApproveBoxes",
+				bool: cachedState.hideTaskAndAutoApproveBoxes ?? false,
+			})
 			setChangeDetected(false)
 		}
 	}
@@ -394,6 +400,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "prompts", icon: MessageSquare },
 			{ id: "experimental", icon: FlaskConical },
 			{ id: "language", icon: Globe },
+			{ id: "ui", icon: Monitor },
 			{ id: "about", icon: Info },
 		],
 		[], // No dependencies needed now
@@ -692,6 +699,41 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						<LanguageSettings language={language || "en"} setCachedStateField={setCachedStateField} />
 					)}
 
+					{/* UI Section */}
+					{activeTab === "ui" && (
+						<div>
+							<SectionHeader>
+								<div className="flex items-center gap-2">
+									<Monitor className="w-4" />
+									<div>{t("settings:sections.ui")}</div>
+								</div>
+							</SectionHeader>
+
+							<Section>
+								<div className="space-y-4">
+									<div className="flex items-center justify-between">
+										<div className="flex flex-col">
+											<label className="text-vscode-foreground font-medium">
+												{t("settings:ui.hideTaskAndAutoApproveBoxes.title")}
+											</label>
+											<span className="text-vscode-descriptionForeground text-sm">
+												{t("settings:ui.hideTaskAndAutoApproveBoxes.description")}
+											</span>
+										</div>
+										<input
+											type="checkbox"
+											checked={cachedState.hideTaskAndAutoApproveBoxes ?? false}
+											onChange={(e) =>
+												setCachedStateField("hideTaskAndAutoApproveBoxes", e.target.checked)
+											}
+											className="w-4 h-4"
+										/>
+									</div>
+								</div>
+							</Section>
+						</div>
+					)}
+
 					{/* About Section */}
 					{activeTab === "about" && (
 						<About telemetrySetting={telemetrySetting} setTelemetrySetting={setTelemetrySetting} />

webview-ui/src/context/ExtensionStateContext.tsx

@@ -25,6 +25,7 @@ import { convertTextMateToHljs } from "@src/utils/textMateToHljs"
 
 export interface ExtensionStateContextType extends ExtensionState {
 	historyPreviewCollapsed?: boolean // Add the new state property
+	hideTaskAndAutoApproveBoxes?: boolean // Add the new state property
 	didHydrateState: boolean
 	showWelcome: boolean
 	theme: any
@@ -113,6 +114,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	terminalCompressProgressBar?: boolean
 	setTerminalCompressProgressBar: (value: boolean) => void
 	setHistoryPreviewCollapsed: (value: boolean) => void
+	setHideTaskAndAutoApproveBoxes: (value: boolean) => void
 	autoCondenseContext: boolean
 	setAutoCondenseContext: (value: boolean) => void
 	autoCondenseContextPercent: number
@@ -192,6 +194,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		terminalZdotdir: false, // Default ZDOTDIR handling setting
 		terminalCompressProgressBar: true, // Default to compress progress bar output
 		historyPreviewCollapsed: false, // Initialize the new state (default to expanded)
+		hideTaskAndAutoApproveBoxes: false, // Initialize the new state (default to showing boxes)
 		cloudUserInfo: null,
 		cloudIsAuthenticated: false,
 		sharingEnabled: false,
@@ -397,6 +400,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 			}),
 		setHistoryPreviewCollapsed: (value) =>
 			setState((prevState) => ({ ...prevState, historyPreviewCollapsed: value })),
+		setHideTaskAndAutoApproveBoxes: (value) =>
+			setState((prevState) => ({ ...prevState, hideTaskAndAutoApproveBoxes: value })),
 		setAutoCondenseContext: (value) => setState((prevState) => ({ ...prevState, autoCondenseContext: value })),
 		setAutoCondenseContextPercent: (value) =>
 			setState((prevState) => ({ ...prevState, autoCondenseContextPercent: value })),

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

@@ -31,6 +31,7 @@
 		"prompts": "Prompts",
 		"experimental": "Experimental",
 		"language": "Language",
+		"ui": "User Interface",
 		"about": "About Roo Code"
 	},
 	"prompts": {
@@ -615,5 +616,11 @@
 		"useCustomArn": "Use custom ARN..."
 	},
 	"includeMaxOutputTokens": "Include max output tokens",
-	"includeMaxOutputTokensDescription": "Send max output tokens parameter in API requests. Some providers may not support this."
+	"includeMaxOutputTokensDescription": "Send max output tokens parameter in API requests. Some providers may not support this.",
+	"ui": {
+		"hideTaskAndAutoApproveBoxes": {
+			"label": "Hide Task and Auto-Approve Boxes",
+			"description": "Hide the task header and auto-approve menu to create a cleaner, more minimalistic interface"
+		}
+	}
 }