feat: add debug setting to settings page

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

@@ -507,6 +507,8 @@ export interface WebviewMessage {
 		| "requestClaudeCodeRateLimits"
 		| "refreshCustomTools"
 		| "requestModes"
+		| "switchMode"
+		| "debugSetting"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"

src/core/webview/webviewMessageHandler.ts

@@ -2299,6 +2299,13 @@ export const webviewMessageHandler = async (
 			await provider.postStateToWebview()
 			break
 		}
+		case "debugSetting": {
+			await vscode.workspace
+				.getConfiguration(Package.name)
+				.update("debug", message.bool ?? false, vscode.ConfigurationTarget.Global)
+			await provider.postStateToWebview()
+			break
+		}
 		case "cloudButtonClicked": {
 			// Navigate to the cloud tab.
 			provider.postMessageToWebview({ type: "action", action: "cloudButtonClicked" })

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

@@ -28,9 +28,11 @@ import { Section } from "./Section"
 type AboutProps = HTMLAttributes<HTMLDivElement> & {
 	telemetrySetting: TelemetrySetting
 	setTelemetrySetting: (setting: TelemetrySetting) => void
+	debug?: boolean
+	setDebug?: (debug: boolean) => void
 }
 
-export const About = ({ telemetrySetting, setTelemetrySetting, className, ...props }: AboutProps) => {
+export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug, className, ...props }: AboutProps) => {
 	const { t } = useAppTranslation()
 
 	return (
@@ -117,6 +119,21 @@ export const About = ({ telemetrySetting, setTelemetrySetting, className, ...pro
 							/>
 						</span>
 					</div>
+					{setDebug && (
+						<div className="flex flex-col gap-2 mt-4 pt-4 border-t border-vscode-settings-headerBorder">
+							<VSCodeCheckbox
+								checked={debug ?? false}
+								onChange={(e: any) => {
+									const checked = e.target.checked === true
+									setDebug(checked)
+								}}>
+								{t("settings:about.debugMode.label")}
+							</VSCodeCheckbox>
+							<p className="text-vscode-descriptionForeground text-sm mt-0">
+								{t("settings:about.debugMode.description")}
+							</p>
+						</div>
+					)}
 				</div>
 			</Section>
 

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

@@ -297,6 +297,17 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		})
 	}, [])
 
+	const setDebug = useCallback((debug: boolean) => {
+		setCachedState((prevState) => {
+			if (prevState.debug === debug) {
+				return prevState
+			}
+
+			setChangeDetected(true)
+			return { ...prevState, debug }
+		})
+	}, [])
+
 	const setImageGenerationProvider = useCallback((provider: ImageGenerationProvider) => {
 		setCachedState((prevState) => {
 			if (prevState.imageGenerationProvider !== provider) {
@@ -428,6 +439,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "updateCondensingPrompt", text: customCondensingPrompt || "" })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
+			vscode.postMessage({ type: "debugSetting", bool: cachedState.debug })
 
 			setChangeDetected(false)
 		}
@@ -859,7 +871,12 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 
 					{/* About Section */}
 					{activeTab === "about" && (
-						<About telemetrySetting={telemetrySetting} setTelemetrySetting={setTelemetrySetting} />
+						<About
+							telemetrySetting={telemetrySetting}
+							setTelemetrySetting={setTelemetrySetting}
+							debug={cachedState.debug}
+							setDebug={setDebug}
+						/>
 					)}
 				</TabContent>
 			</div>

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

@@ -55,7 +55,11 @@
 		},
 		"community": "Want tips or to just hang out with other Roo Code users? Join <redditLink>reddit.com/r/RooCode</redditLink> or <discordLink>discord.gg/roocode</discordLink>",
 		"contactAndCommunity": "Contact & Community",
-		"manageSettings": "Manage Settings"
+		"manageSettings": "Manage Settings",
+		"debugMode": {
+			"label": "Enable debug mode",
+			"description": "Enable debug mode to show additional buttons in the task header for viewing API conversation history and UI messages as prettified JSON in temporary files."
+		}
 	},
 	"slashCommands": {
 		"description": "Manage your slash commands to quickly execute custom workflows and actions. <DocsLink>Learn more</DocsLink>"