feat(ui): adjust roo font size

packages/types/src/vscode.ts

@@ -54,6 +54,8 @@ export const commandIds = [
 	"acceptInput",
 	"focusPanel",
 	"toggleAutoApprove",
+	"increaseFontSize",
+	"decreaseFontSize",
 ] as const
 
 export type CommandId = (typeof commandIds)[number]

src/activate/registerCommands.ts

@@ -233,6 +233,38 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 			action: "toggleAutoApprove",
 		})
 	},
+	increaseFontSize: async () => {
+		const config = vscode.workspace.getConfiguration(Package.name)
+		const currentMultiplier = config.get<number>("fontSizeMultiplier") || 1.0
+		const newMultiplier = Math.min(currentMultiplier + 0.1, 3.0)
+
+		await config.update("fontSizeMultiplier", newMultiplier, vscode.ConfigurationTarget.Global)
+
+		const visibleProvider = getVisibleProviderOrLog(outputChannel)
+		if (visibleProvider) {
+			visibleProvider.postMessageToWebview({
+				type: "action",
+				action: "fontSizeChanged",
+				fontSizeMultiplier: newMultiplier,
+			})
+		}
+	},
+	decreaseFontSize: async () => {
+		const config = vscode.workspace.getConfiguration(Package.name)
+		const currentMultiplier = config.get<number>("fontSizeMultiplier") || 1.0
+		const newMultiplier = Math.max(currentMultiplier - 0.1, 0.5)
+
+		await config.update("fontSizeMultiplier", newMultiplier, vscode.ConfigurationTarget.Global)
+
+		const visibleProvider = getVisibleProviderOrLog(outputChannel)
+		if (visibleProvider) {
+			visibleProvider.postMessageToWebview({
+				type: "action",
+				action: "fontSizeChanged",
+				fontSizeMultiplier: newMultiplier,
+			})
+		}
+	},
 })
 
 export const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterCommandOptions, "provider">) => {

src/core/webview/ClineProvider.ts

@@ -1817,6 +1817,10 @@ export class ClineProvider
 			featureRoomoteControlEnabled,
 		} = await this.getState()
 
+		// Get font size multiplier from VSCode settings
+		const fontSizeMultiplier =
+			vscode.workspace.getConfiguration(Package.name).get<number>("fontSizeMultiplier") || 1.0
+
 		let cloudOrganizations: CloudOrganizationMembership[] = []
 
 		try {
@@ -1964,6 +1968,7 @@ export class ClineProvider
 			openRouterImageGenerationSelectedModel,
 			openRouterUseMiddleOutTransform,
 			featureRoomoteControlEnabled,
+			fontSizeMultiplier,
 		}
 	}
 
@@ -2195,6 +2200,8 @@ export class ClineProvider
 					return false
 				}
 			})(),
+			fontSizeMultiplier:
+				vscode.workspace.getConfiguration(Package.name).get<number>("fontSizeMultiplier") || 1.0,
 		}
 	}
 

src/core/webview/__tests__/ClineProvider.spec.ts

@@ -557,6 +557,7 @@ describe("ClineProvider", () => {
 			remoteControlEnabled: false,
 			taskSyncEnabled: false,
 			featureRoomoteControlEnabled: false,
+			fontSizeMultiplier: 1,
 		}
 
 		const message: ExtensionMessage = {

src/package.json

@@ -179,6 +179,16 @@
 				"command": "roo-cline.toggleAutoApprove",
 				"title": "%command.toggleAutoApprove.title%",
 				"category": "%configuration.title%"
+			},
+			{
+				"command": "roo-cline.increaseFontSize",
+				"title": "%command.increaseFontSize.title%",
+				"category": "%configuration.title%"
+			},
+			{
+				"command": "roo-cline.decreaseFontSize",
+				"title": "%command.decreaseFontSize.title%",
+				"category": "%configuration.title%"
 			}
 		],
 		"menus": {
@@ -429,6 +439,13 @@
 					"minimum": 1,
 					"maximum": 200,
 					"description": "%settings.codeIndex.embeddingBatchSize.description%"
+				},
+				"roo-cline.fontSizeMultiplier": {
+					"type": "number",
+					"default": 1,
+					"minimum": 0.5,
+					"maximum": 3,
+					"description": "%settings.fontSizeMultiplier.description%"
 				}
 			}
 		}

src/package.nls.json

@@ -27,6 +27,8 @@
 	"command.terminal.explainCommand.title": "Explain This Command",
 	"command.acceptInput.title": "Accept Input/Suggestion",
 	"command.toggleAutoApprove.title": "Toggle Auto-Approve",
+	"command.increaseFontSize.title": "Increase Font Size",
+	"command.decreaseFontSize.title": "Decrease Font Size",
 	"configuration.title": "Roo Code",
 	"commands.allowedCommands.description": "Commands that can be auto-executed when 'Always approve execute operations' is enabled",
 	"commands.deniedCommands.description": "Command prefixes that will be automatically denied without asking for approval. In case of conflicts with allowed commands, the longest prefix match takes precedence. Add * to deny all commands.",
@@ -42,5 +44,6 @@
 	"settings.useAgentRules.description": "Enable loading of AGENTS.md files for agent-specific rules (see https://agent-rules.org/)",
 	"settings.apiRequestTimeout.description": "Maximum time in seconds to wait for API responses (0 = no timeout, 1-3600s, default: 600s). Higher values are recommended for local providers like LM Studio and Ollama that may need more processing time.",
 	"settings.newTaskRequireTodos.description": "Require todos parameter when creating new tasks with the new_task tool",
-	"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60."
+	"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60.",
+	"settings.fontSizeMultiplier.description": "Font size multiplier for the RooCode interface. Adjusts all font sizes proportionally (0.5-3.0, default: 1.0)"
 }

src/shared/ExtensionMessage.ts

@@ -140,6 +140,7 @@ export interface ExtensionMessage {
 		| "focusInput"
 		| "switchTab"
 		| "toggleAutoApprove"
+		| "fontSizeChanged"
 	invoke?: "newChat" | "sendMessage" | "primaryButtonClick" | "secondaryButtonClick" | "setChatBoxMessage"
 	state?: ExtensionState
 	images?: string[]
@@ -205,6 +206,7 @@ export interface ExtensionMessage {
 	queuedMessages?: QueuedMessage[]
 	list?: string[] // For dismissedUpsells
 	organizationId?: string | null // For organizationSwitchResult
+	fontSizeMultiplier?: number // For fontSizeChanged action
 }
 
 export type ExtensionState = Pick<
@@ -353,6 +355,7 @@ export type ExtensionState = Pick<
 	remoteControlEnabled: boolean
 	taskSyncEnabled: boolean
 	featureRoomoteControlEnabled: boolean
+	fontSizeMultiplier: number
 }
 
 export interface ClineSayTool {

webview-ui/src/App.tsx

@@ -79,6 +79,7 @@ const App = () => {
 		cloudOrganizations,
 		renderContext,
 		mdmCompliant,
+		fontSizeMultiplier,
 	} = useExtensionState()
 
 	// Create a persistent state manager
@@ -140,6 +141,15 @@ const App = () => {
 			const message: ExtensionMessage = e.data
 
 			if (message.type === "action" && message.action) {
+				// Handle fontSizeChanged action
+				if (message.action === "fontSizeChanged" && message.fontSizeMultiplier !== undefined) {
+					document.documentElement.style.setProperty(
+						"--roo-font-size-multiplier",
+						message.fontSizeMultiplier.toString(),
+					)
+					return
+				}
+
 				// Handle switchTab action with tab parameter
 				if (message.action === "switchTab" && message.tab) {
 					const targetTab = message.tab as Tab
@@ -224,6 +234,13 @@ const App = () => {
 		console.debug("App initialized with source map support")
 	}, [])
 
+	// Initialize font size multiplier when the component mounts or when it changes
+	useEffect(() => {
+		if (fontSizeMultiplier !== undefined) {
+			document.documentElement.style.setProperty("--roo-font-size-multiplier", fontSizeMultiplier.toString())
+		}
+	}, [fontSizeMultiplier])
+
 	// Focus the WebView when non-interactive content is clicked (only in editor/tab mode)
 	useAddNonInteractiveClickListener(
 		useCallback(() => {

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

@@ -262,7 +262,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						alignItems: "center",
 						justifyContent: "center",
 						color: "var(--vscode-descriptionForeground)",
-						fontSize: "12px",
+						fontSize: "calc(12px * var(--roo-font-size-multiplier, 1))",
 					}}>
 					<div
 						style={{
@@ -318,7 +318,10 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 							}}>
 							<span
 								className="codicon codicon-globe"
-								style={{ fontSize: "80px", color: "var(--vscode-descriptionForeground)" }}
+								style={{
+									fontSize: "calc(80px * var(--roo-font-size-multiplier, 1))",
+									color: "var(--vscode-descriptionForeground)",
+								}}
 							/>
 						</div>
 					)}

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

@@ -277,7 +277,11 @@ export const ChatRowContent = ({
 						}}>
 						<span
 							className={`codicon codicon-${iconName}`}
-							style={{ color, fontSize: 16, marginBottom: "-1.5px" }}
+							style={{
+								color,
+								fontSize: "calc(16px * var(--roo-font-size-multiplier, 1))",
+								marginBottom: "-1.5px",
+							}}
 						/>
 					</div>
 				)
@@ -821,7 +825,7 @@ export const ChatRowContent = ({
 									backgroundColor: "var(--vscode-badge-background)",
 									borderBottom: "1px solid var(--vscode-editorGroup-border)",
 									fontWeight: "bold",
-									fontSize: "var(--vscode-font-size)",
+									fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
 									color: "var(--vscode-badge-foreground)",
 									display: "flex",
 									alignItems: "center",
@@ -858,7 +862,7 @@ export const ChatRowContent = ({
 									backgroundColor: "var(--vscode-badge-background)",
 									borderBottom: "1px solid var(--vscode-editorGroup-border)",
 									fontWeight: "bold",
-									fontSize: "var(--vscode-font-size)",
+									fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
 									color: "var(--vscode-badge-foreground)",
 									display: "flex",
 									alignItems: "center",
@@ -904,11 +908,20 @@ export const ChatRowContent = ({
 									padding: "10px 12px",
 								}}>
 								<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-									<span style={{ fontWeight: "500", fontSize: "var(--vscode-font-size)" }}>
+									<span
+										style={{
+											fontWeight: "500",
+											fontSize:
+												"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
+										}}>
 										/{slashCommandInfo.command}
 									</span>
 									{slashCommandInfo.source && (
-										<VSCodeBadge style={{ fontSize: "calc(var(--vscode-font-size) - 2px)" }}>
+										<VSCodeBadge
+											style={{
+												fontSize:
+													"calc((var(--vscode-font-size) - 2px) * var(--roo-font-size-multiplier, 1))",
+											}}>
 											{slashCommandInfo.source}
 										</VSCodeBadge>
 									)}
@@ -1014,7 +1027,7 @@ export const ChatRowContent = ({
 										backgroundColor: "var(--vscode-badge-background)",
 										borderBottom: "1px solid var(--vscode-editorGroup-border)",
 										fontWeight: "bold",
-										fontSize: "var(--vscode-font-size)",
+										fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
 										color: "var(--vscode-badge-foreground)",
 										display: "flex",
 										alignItems: "center",
@@ -1326,15 +1339,17 @@ export const ChatRowContent = ({
 													<span
 														style={{
 															fontWeight: "500",
-															fontSize: "var(--vscode-font-size)",
+															fontSize:
+																"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
 														}}>
 														/{slashCommandInfo.command}
 													</span>
 													{slashCommandInfo.args && (
 														<span
 															style={{
 																color: "var(--vscode-descriptionForeground)",
-																fontSize: "var(--vscode-font-size)",
+																fontSize:
+																	"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
 															}}>
 															{slashCommandInfo.args}
 														</span>
@@ -1344,15 +1359,19 @@ export const ChatRowContent = ({
 													<div
 														style={{
 															color: "var(--vscode-descriptionForeground)",
-															fontSize: "calc(var(--vscode-font-size) - 1px)",
+															fontSize:
+																"calc((var(--vscode-font-size) - 1px) * var(--roo-font-size-multiplier, 1))",
 														}}>
 														{slashCommandInfo.description}
 													</div>
 												)}
 												{slashCommandInfo.source && (
 													<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
 														<VSCodeBadge
-															style={{ fontSize: "calc(var(--vscode-font-size) - 2px)" }}>
+															style={{
+																fontSize:
+																	"calc((var(--vscode-font-size) - 2px) * var(--roo-font-size-multiplier, 1))",
+															}}>
 															{slashCommandInfo.source}
 														</VSCodeBadge>
 													</div>

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

@@ -3,7 +3,7 @@ import { useDeepCompareEffect, useEvent, useMount } from "react-use"
 import debounce from "debounce"
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso"
 import removeMd from "remove-markdown"
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import useSound from "use-sound"
 import { LRUCache } from "lru-cache"
 import { Trans, useTranslation } from "react-i18next"
@@ -37,7 +37,7 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useSelectedModel } from "@src/components/ui/hooks/useSelectedModel"
 import RooHero from "@src/components/welcome/RooHero"
 import RooTips from "@src/components/welcome/RooTips"
-import { StandardTooltip } from "@src/components/ui"
+import { Button, StandardTooltip } from "@src/components/ui"
 import { useAutoApprovalState } from "@src/hooks/useAutoApprovalState"
 import { useAutoApprovalToggles } from "@src/hooks/useAutoApprovalToggles"
 import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
@@ -1900,15 +1900,15 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							}`}>
 							{showScrollToBottom ? (
 								<StandardTooltip content={t("chat:scrollToBottom")}>
-									<VSCodeButton
-										appearance="secondary"
+									<Button
+										variant="secondary"
 										className="flex-[2]"
 										onClick={() => {
 											scrollToBottomSmooth()
 											disableAutoScrollRef.current = false
 										}}>
 										<span className="codicon codicon-chevron-down"></span>
-									</VSCodeButton>
+									</Button>
 								</StandardTooltip>
 							) : (
 								<>
@@ -1935,13 +1935,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 																				? t("chat:proceedWhileRunning.tooltip")
 																				: undefined
 											}>
-											<VSCodeButton
-												appearance="primary"
+											<Button
+												variant="default"
 												disabled={!enableButtons}
 												className={secondaryButtonText ? "flex-1 mr-[6px]" : "flex-[2] mr-0"}
 												onClick={() => handlePrimaryButtonClick(inputValue, selectedImages)}>
 												{primaryButtonText}
-											</VSCodeButton>
+											</Button>
 										</StandardTooltip>
 									)}
 									{(secondaryButtonText || isStreaming) && (
@@ -1957,13 +1957,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 																? t("chat:terminate.tooltip")
 																: undefined
 											}>
-											<VSCodeButton
-												appearance="secondary"
+											<Button
+												variant="secondary"
 												disabled={!enableButtons && !(isStreaming && !didClickCancel)}
-												className={isStreaming ? "flex-[2] ml-0" : "flex-1 ml-[6px]"}
+												className={isStreaming ? "flex-[2] ml-0" : "flex-1 ml-[px]"}
 												onClick={() => handleSecondaryButtonClick(inputValue, selectedImages)}>
 												{isStreaming ? t("chat:cancel.title") : secondaryButtonText}
-											</VSCodeButton>
+											</Button>
 										</StandardTooltip>
 									)}
 								</>