feat: add UI settings page with enhance prompt button toggle

- Created new UISettings component with enhance prompt button toggle
- Added UI settings tab to SettingsView component
- Moved enhance prompt button from experimental to UI settings
- Added placeholders for future UI customization options
- Updated translation files with UI settings content
- Maintained backward compatibility with existing experiment system

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

@@ -37,7 +37,7 @@ export const ExperimentalSettings = ({
 
 			<Section>
 				{Object.entries(experimentConfigsMap)
-					.filter(([key]) => key in EXPERIMENT_IDS)
+					.filter(([key]) => key in EXPERIMENT_IDS && key !== "SHOW_ENHANCE_PROMPT_BUTTON")
 					.map((config) => {
 						const experimentKey = config[0] as keyof typeof EXPERIMENT_IDS
 						const experimentId = EXPERIMENT_IDS[experimentKey]

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

@@ -23,6 +23,7 @@ import {
 	Info,
 	MessageSquare,
 	LucideIcon,
+	Palette,
 } from "lucide-react"
 
 import type { ProviderSettings, ExperimentId } from "@roo-code/types"
@@ -63,6 +64,7 @@ import { TerminalSettings } from "./TerminalSettings"
 import { ExperimentalSettings } from "./ExperimentalSettings"
 import { LanguageSettings } from "./LanguageSettings"
 import { About } from "./About"
+import { UISettings } from "./UISettings"
 import { Section } from "./Section"
 import PromptsSettings from "./PromptsSettings"
 import { cn } from "@/lib/utils"
@@ -87,6 +89,7 @@ const sectionNames = [
 	"contextManagement",
 	"terminal",
 	"prompts",
+	"ui",
 	"experimental",
 	"language",
 	"about",
@@ -414,6 +417,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "contextManagement", icon: Database },
 			{ id: "terminal", icon: SquareTerminal },
 			{ id: "prompts", icon: MessageSquare },
+			{ id: "ui", icon: Palette },
 			{ id: "experimental", icon: FlaskConical },
 			{ id: "language", icon: Globe },
 			{ id: "about", icon: Info },
@@ -702,6 +706,11 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						/>
 					)}
 
+					{/* UI Section */}
+					{activeTab === "ui" && (
+						<UISettings setExperimentEnabled={setExperimentEnabled} experiments={experiments} />
+					)}
+
 					{/* Experimental Section */}
 					{activeTab === "experimental" && (
 						<ExperimentalSettings setExperimentEnabled={setExperimentEnabled} experiments={experiments} />

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

@@ -0,0 +1,113 @@
+import { HTMLAttributes } from "react"
+import { Palette } from "lucide-react"
+
+import type { Experiments } from "@roo-code/types"
+
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { EXPERIMENT_IDS } from "@roo/experiments"
+
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { cn } from "@src/lib/utils"
+
+import { SetExperimentEnabled } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type UISettingsProps = HTMLAttributes<HTMLDivElement> & {
+	experiments: Experiments
+	setExperimentEnabled: SetExperimentEnabled
+}
+
+export const UISettings = ({ experiments, setExperimentEnabled, className, ...props }: UISettingsProps) => {
+	const { t } = useAppTranslation()
+
+	// For now, we'll only handle the enhance prompt button through experiments
+	// Other UI settings will be added later when backend support is implemented
+	const showEnhancePromptButton = experiments[EXPERIMENT_IDS.SHOW_ENHANCE_PROMPT_BUTTON] ?? true
+
+	return (
+		<div className={cn("flex flex-col gap-2", className)} {...props}>
+			<SectionHeader description={t("settings:ui.description")}>
+				<div className="flex items-center gap-2">
+					<Palette className="w-4" />
+					<div>{t("settings:sections.ui")}</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={showEnhancePromptButton}
+						onChange={(e: any) =>
+							setExperimentEnabled(EXPERIMENT_IDS.SHOW_ENHANCE_PROMPT_BUTTON, e.target.checked)
+						}
+						data-testid="show-enhance-prompt-button-checkbox">
+						<span className="font-medium">{t("settings:ui.showEnhancePromptButton.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showEnhancePromptButton.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-codebase-indexing-checkbox">
+						<span className="font-medium">{t("settings:ui.showCodebaseIndexing.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showCodebaseIndexing.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-add-images-to-prompt-checkbox">
+						<span className="font-medium">{t("settings:ui.showAddImagesToPrompt.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showAddImagesToPrompt.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-api-configuration-checkbox">
+						<span className="font-medium">{t("settings:ui.showApiConfiguration.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showApiConfiguration.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-auto-approve-checkbox">
+						<span className="font-medium">{t("settings:ui.showAutoApprove.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showAutoApprove.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-helper-text-checkbox">
+						<span className="font-medium">{t("settings:ui.showHelperText.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:ui.showHelperText.description")}
+					</div>
+				</div>
+
+				<div className="opacity-50 pointer-events-none">
+					<VSCodeCheckbox checked={true} disabled={true} data-testid="show-send-button-checkbox">
+						<span className="font-medium">{t("settings:ui.showSendButton.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1">
+						{t("settings:ui.showSendButton.description")}
+					</div>
+				</div>
+
+				<div className="text-vscode-descriptionForeground text-sm mt-4 p-3 bg-vscode-editor-background rounded">
+					<span className="codicon codicon-info mr-2"></span>
+					{t("settings:ui.comingSoon")}
+				</div>
+			</Section>
+		</div>
+	)
+}

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

@@ -31,7 +31,8 @@
 		"prompts": "Prompts",
 		"experimental": "Experimental",
 		"language": "Language",
-		"about": "About Roo Code"
+		"about": "About Roo Code",
+		"ui": "UI"
 	},
 	"prompts": {
 		"description": "Configure support prompts that are used for quick actions like enhancing prompts, explaining code, and fixing issues. These prompts help Roo provide better assistance for common development tasks."
@@ -654,6 +655,38 @@
 			"description": "When enabled, displays the enhance prompt button in the chat input area. This button allows you to improve your prompts using AI assistance."
 		}
 	},
+	"ui": {
+		"description": "Customize the user interface elements and visibility settings",
+		"showEnhancePromptButton": {
+			"label": "Show enhance prompt button",
+			"description": "Display the wand icon button in the chat input area that helps improve your prompts using AI assistance"
+		},
+		"showCodebaseIndexing": {
+			"label": "Show codebase indexing status",
+			"description": "Display the codebase indexing status indicator in the chat interface"
+		},
+		"showAddImagesToPrompt": {
+			"label": "Show add images button",
+			"description": "Display the image button that allows adding images to your prompts"
+		},
+		"showApiConfiguration": {
+			"label": "Show API configuration selector",
+			"description": "Display the dropdown for selecting different API configurations"
+		},
+		"showAutoApprove": {
+			"label": "Show auto-approve toggle",
+			"description": "Display the auto-approve toggle in the chat interface"
+		},
+		"showHelperText": {
+			"label": "Show helper text",
+			"description": "Display the helper text '(@ to add context, / to switch modes...)' below the chat input"
+		},
+		"showSendButton": {
+			"label": "Show send button",
+			"description": "Display the send button in the chat input area"
+		},
+		"comingSoon": "Additional UI customization options are coming soon. The settings above are placeholders for future functionality."
+	},
 	"promptCaching": {
 		"label": "Disable prompt caching",
 		"description": "When checked, Roo will not use prompt caching for this model."