Allow selection of multiple browser viewport sizes and adjusting screenshot quality

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

@@ -33,8 +33,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setSoundVolume,
 		diffEnabled,
 		setDiffEnabled,
-		browserLargeViewport,
-		setBrowserLargeViewport,
+		browserViewportSize,
+		setBrowserViewportSize,
 		openRouterModels,
 		setAllowedCommands,
 		allowedCommands,
@@ -44,6 +44,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setPreferredLanguage,
 		writeDelayMs,
 		setWriteDelayMs,
+		screenshotQuality,
+		setScreenshotQuality,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -69,10 +71,11 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 			vscode.postMessage({ type: "soundEnabled", bool: soundEnabled })
 			vscode.postMessage({ type: "soundVolume", value: soundVolume })
 			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
-			vscode.postMessage({ type: "browserLargeViewport", bool: browserLargeViewport })
+			vscode.postMessage({ type: "browserViewportSize", text: browserViewportSize })
 			vscode.postMessage({ type: "fuzzyMatchThreshold", value: fuzzyMatchThreshold ?? 1.0 })
 			vscode.postMessage({ type: "preferredLanguage", text: preferredLanguage })
 			vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs })
+			vscode.postMessage({ type: "screenshotQuality", value: screenshotQuality ?? 75 })
 			onDone()
 		}
 	}
@@ -128,7 +131,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					marginBottom: "17px",
 					paddingRight: 17,
 				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Settings</h3>
+
+				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Provider Settings</h3>
 				<VSCodeButton onClick={handleSubmit}>Done</VSCodeButton>
 			</div>
 			<div
@@ -143,6 +147,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 
 				<div style={{ marginBottom: 5 }}>
 					<div style={{ marginBottom: 15 }}>
+						<h3 style={{ color: "var(--vscode-foreground)", margin: 0, marginBottom: 15 }}>Agent Settings</h3>
+
 						<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Preferred Language</label>
 						<select
 							value={preferredLanguage}
@@ -264,7 +270,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</p>
 				</div>
 
-				<div style={{ marginBottom: 5, border: "2px solid var(--vscode-errorForeground)", borderRadius: "4px", padding: "10px" }}>
+				<div style={{ marginBottom: 15, border: "2px solid var(--vscode-errorForeground)", borderRadius: "4px", padding: "10px" }}>
 					<h4 style={{ fontWeight: 500, margin: "0 0 10px 0", color: "var(--vscode-errorForeground)" }}>⚠️ High-Risk Auto-Approve Settings</h4>
 					<p style={{ fontSize: "12px", marginBottom: 15, color: "var(--vscode-descriptionForeground)" }}>
 						The following settings allow Cline to automatically perform potentially dangerous operations without requiring approval.
@@ -422,24 +428,69 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 				</div>
 
 				<div style={{ marginBottom: 5 }}>
-					<h4 style={{ fontWeight: 500, marginBottom: 10 }}>Experimental Features</h4>
-
 					<div style={{ marginBottom: 10 }}>
-						<VSCodeCheckbox checked={browserLargeViewport} onChange={(e: any) => setBrowserLargeViewport(e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Use larger browser viewport (1280x800)</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
+						<div style={{ marginBottom: 15 }}>
+							<h3 style={{ color: "var(--vscode-foreground)", margin: 0, marginBottom: 15 }}>Browser Settings</h3>
+							<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport Size</label>
+							<select
+								value={browserViewportSize}
+								onChange={(e) => setBrowserViewportSize(e.target.value)}
+								style={{
+									width: "100%",
+									padding: "4px 8px",
+									backgroundColor: "var(--vscode-input-background)",
+									color: "var(--vscode-input-foreground)",
+									border: "1px solid var(--vscode-input-border)",
+									borderRadius: "2px",
+									height: "28px"
+								}}>
+								<option value="1280x800">Large Desktop (1280x800)</option>
+								<option value="900x600">Small Desktop (900x600)</option>
+								<option value="768x1024">Tablet (768x1024)</option>
+								<option value="360x640">Mobile (360x640)</option>
+							</select>
+							<p style={{
 								fontSize: "12px",
 								marginTop: "5px",
 								color: "var(--vscode-descriptionForeground)",
 							}}>
-							When enabled, Cline will use a larger viewport size for browser interactions.
-						</p>
+								Select the viewport size for browser interactions. This affects how websites are displayed and interacted with.
+							</p>
+						</div>
+
+						<div style={{ marginBottom: 15 }}>
+							<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+								<span style={{ fontWeight: "500", minWidth: '100px' }}>Screenshot Quality</span>
+								<input
+									type="range"
+									min="1"
+									max="100"
+									step="1"
+									value={screenshotQuality ?? 75}
+									onChange={(e) => setScreenshotQuality(parseInt(e.target.value))}
+									style={{
+										flexGrow: 1,
+										accentColor: 'var(--vscode-button-background)',
+										height: '2px'
+									}}
+								/>
+								<span style={{ minWidth: '35px', textAlign: 'left' }}>
+									{screenshotQuality ?? 75}%
+								</span>
+							</div>
+							<p style={{
+								fontSize: "12px",
+								marginTop: "5px",
+								color: "var(--vscode-descriptionForeground)",
+							}}>
+								Adjust the WebP quality of browser screenshots. Higher values provide clearer screenshots but increase token usage.
+							</p>
+						</div>
 					</div>
 
 					<div style={{ marginBottom: 5 }}>
 						<div style={{ marginBottom: 10 }}>
+						<h3 style={{ color: "var(--vscode-foreground)", margin: 0, marginBottom: 15 }}>Notification Settings</h3>
 							<VSCodeCheckbox checked={soundEnabled} onChange={(e: any) => setSoundEnabled(e.target.checked)}>
 								<span style={{ fontWeight: "500" }}>Enable sound effects</span>
 							</VSCodeCheckbox>
@@ -468,9 +519,10 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 											accentColor: 'var(--vscode-button-background)',
 											height: '2px'
 										}}
+										aria-label="Volume"
 									/>
 									<span style={{ minWidth: '35px', textAlign: 'left' }}>
-										{Math.round((soundVolume ?? 0.5) * 100)}%
+										{((soundVolume ?? 0.5) * 100).toFixed(0)}%
 									</span>
 								</div>
 							</div>