feat: add font smoothing configuration for webview UI

Author: DonDawsy

package.json

@@ -340,6 +340,11 @@
 					"type": "string",
 					"default": "",
 					"description": "Custom storage path. Leave empty to use the default location. Supports absolute paths (e.g. 'D:\\RooCodeStorage')"
+				},
+				"roo-cline.fontSmoothing": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enable CSS font smoothing (-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;) for the Roo Code webview UI for potentially crisper text rendering."
 				}
 			}
 		}

src/core/webview/ClineProvider.ts

@@ -424,9 +424,15 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 		// Listen for when color changes
 		vscode.workspace.onDidChangeConfiguration(
 			async (e) => {
-				if (e && e.affectsConfiguration("workbench.colorTheme")) {
-					// Sends latest theme name to webview
-					await this.postMessageToWebview({ type: "theme", text: JSON.stringify(await getTheme()) })
+				if (e) {
+					if (e.affectsConfiguration("workbench.colorTheme")) {
+						// Sends latest theme name to webview
+						await this.postMessageToWebview({ type: "theme", text: JSON.stringify(await getTheme()) })
+					}
+					if (e.affectsConfiguration("roo-cline.fontSmoothing")) {
+						// Resend the entire state to update the font smoothing setting in the webview
+						await this.postStateToWebview()
+					}
 				}
 			},
 			null,
@@ -1200,6 +1206,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			showRooIgnoredFiles,
 			language,
 			maxReadFileLine,
+			fontSmoothing,
 		} = await this.getState()
 
 		const telemetryKey = process.env.POSTHOG_API_KEY
@@ -1275,6 +1282,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			renderContext: this.renderContext,
 			maxReadFileLine: maxReadFileLine ?? 500,
 			settingsImportedAt: this.settingsImportedAt,
+			fontSmoothing: fontSmoothing ?? false,
 		}
 	}
 
@@ -1286,6 +1294,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 
 	async getState() {
 		const stateValues = this.contextProxy.getValues()
+		const config = vscode.workspace.getConfiguration("roo-cline")
 
 		const customModes = await this.customModesManager.getCustomModes()
 
@@ -1357,6 +1366,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting: stateValues.telemetrySetting || "unset",
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
+			fontSmoothing: config.get<boolean>("fontSmoothing") ?? false,
 		}
 	}
 

src/shared/ExtensionMessage.ts

@@ -203,6 +203,7 @@ export type ExtensionState = Pick<
 
 	renderContext: "sidebar" | "editor"
 	settingsImportedAt?: number
+	fontSmoothing?: boolean
 }
 
 export type { ClineMessage, ClineAsk, ClineSay }

webview-ui/src/App.tsx

@@ -27,8 +27,15 @@ const tabsByMessageAction: Partial<Record<NonNullable<ExtensionMessage["action"]
 }
 
 const App = () => {
-	const { didHydrateState, showWelcome, shouldShowAnnouncement, telemetrySetting, telemetryKey, machineId } =
-		useExtensionState()
+	const {
+		didHydrateState,
+		showWelcome,
+		shouldShowAnnouncement,
+		telemetrySetting,
+		telemetryKey,
+		machineId,
+		fontSmoothing,
+	} = useExtensionState()
 
 	const [showAnnouncement, setShowAnnouncement] = useState(false)
 	const [tab, setTab] = useState<Tab>("chat")
@@ -91,6 +98,15 @@ const App = () => {
 	// Tell the extension that we are ready to receive messages.
 	useEffect(() => vscode.postMessage({ type: "webviewDidLaunch" }), [])
 
+	// Apply font smoothing class based on setting
+	useEffect(() => {
+		if (fontSmoothing) {
+			document.documentElement.classList.add("font-smoothing-enabled")
+		} else {
+			document.documentElement.classList.remove("font-smoothing-enabled")
+		}
+	}, [fontSmoothing])
+
 	if (!didHydrateState) {
 		return null
 	}

webview-ui/src/context/ExtensionStateContext.tsx

@@ -86,6 +86,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	pinnedApiConfigs?: Record<string, boolean>
 	setPinnedApiConfigs: (value: Record<string, boolean>) => void
 	togglePinnedApiConfig: (configName: string) => void
+	fontSmoothing?: boolean
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -161,6 +162,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		renderContext: "sidebar",
 		maxReadFileLine: 500, // Default max read file line limit
 		pinnedApiConfigs: {}, // Empty object for pinned API configs
+		fontSmoothing: false,
 	})
 
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -330,6 +332,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 
 				return { ...prevState, pinnedApiConfigs: newPinned }
 			}),
+		fontSmoothing: state.fontSmoothing,
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>

webview-ui/src/index.css

@@ -196,6 +196,11 @@ html {
 	height: 100%;
 }
 
+html.font-smoothing-enabled {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
 body {
 	margin: 0;
 	line-height: 1.25;