Add new section for UI Settings

evals/packages/types/src/roo-code-defaults.ts

@@ -8,6 +8,7 @@ export const rooCodeDefaults: RooCodeSettings = {
 
 	pinnedApiConfigs: {},
 
+	markdownBlockLineHeight: 1.25,
 	autoApprovalEnabled: true,
 	alwaysAllowReadOnly: true,
 	alwaysAllowReadOnlyOutsideWorkspace: false,

evals/packages/types/src/roo-code.ts

@@ -731,6 +731,7 @@ export const globalSettingsSchema = z.object({
 	customInstructions: z.string().optional(),
 	taskHistory: z.array(historyItemSchema).optional(),
 
+	markdownBlockLineHeight: z.number().optional(),
 	autoApprovalEnabled: z.boolean().optional(),
 	alwaysAllowReadOnly: z.boolean().optional(),
 	alwaysAllowReadOnlyOutsideWorkspace: z.boolean().optional(),
@@ -810,6 +811,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customInstructions: undefined,
 	taskHistory: undefined,
 
+	markdownBlockLineHeight: undefined,
 	autoApprovalEnabled: undefined,
 	alwaysAllowReadOnly: undefined,
 	alwaysAllowReadOnlyOutsideWorkspace: undefined,

src/core/webview/ClineProvider.ts

@@ -1268,6 +1268,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			maxReadFileLine,
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
+			markdownBlockLineHeight,
 		} = await this.getState()
 
 		const telemetryKey = process.env.POSTHOG_API_KEY
@@ -1356,6 +1357,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			terminalCompressProgressBar: terminalCompressProgressBar ?? true,
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
+			markdownBlockLineHeight: markdownBlockLineHeight ?? 1.25,
 		}
 	}
 
@@ -1446,6 +1448,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
+			markdownBlockLineHeight: stateValues.markdownBlockLineHeight ?? 1.25,
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -894,6 +894,10 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("maxReadFileLine", message.value)
 			await provider.postStateToWebview()
 			break
+		case "markdownBlockLineHeight":
+			await updateGlobalState("markdownBlockLineHeight", message.value ?? 1.25)
+			await provider.postStateToWebview()
+			break
 		case "setHistoryPreviewCollapsed": // Add the new case handler
 			await updateGlobalState("historyPreviewCollapsed", message.bool ?? false)
 			// No need to call postStateToWebview here as the UI already updated optimistically

src/exports/roo-code.d.ts

@@ -56,6 +56,7 @@ type GlobalSettings = {
 				workspace?: string | undefined
 		  }[]
 		| undefined
+	markdownBlockLineHeight?: number | undefined
 	autoApprovalEnabled?: boolean | undefined
 	alwaysAllowReadOnly?: boolean | undefined
 	alwaysAllowReadOnlyOutsideWorkspace?: boolean | undefined

src/exports/types.ts

@@ -56,6 +56,7 @@ type GlobalSettings = {
 				workspace?: string | undefined
 		  }[]
 		| undefined
+	markdownBlockLineHeight?: number | undefined
 	autoApprovalEnabled?: boolean | undefined
 	alwaysAllowReadOnly?: boolean | undefined
 	alwaysAllowReadOnlyOutsideWorkspace?: boolean | undefined

src/schemas/index.ts

@@ -735,6 +735,7 @@ export const globalSettingsSchema = z.object({
 	customInstructions: z.string().optional(),
 	taskHistory: z.array(historyItemSchema).optional(),
 
+	markdownBlockLineHeight: z.number().optional(),
 	autoApprovalEnabled: z.boolean().optional(),
 	alwaysAllowReadOnly: z.boolean().optional(),
 	alwaysAllowReadOnlyOutsideWorkspace: z.boolean().optional(),
@@ -815,6 +816,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customInstructions: undefined,
 	taskHistory: undefined,
 
+	markdownBlockLineHeight: undefined,
 	autoApprovalEnabled: undefined,
 	alwaysAllowReadOnly: undefined,
 	alwaysAllowReadOnlyOutsideWorkspace: undefined,

src/shared/ExtensionMessage.ts

@@ -70,6 +70,7 @@ export interface ExtensionMessage {
 		| "commandExecutionStatus"
 		| "vsCodeSetting"
 		| "condenseTaskContextResponse"
+		| "markdownBlockLineHeight"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -170,6 +171,7 @@ export type ExtensionState = Pick<
 	| "customModePrompts"
 	| "customSupportPrompts"
 	| "enhancementApiConfigId"
+	| "markdownBlockLineHeight"
 > & {
 	version: string
 	clineMessages: ClineMessage[]

src/shared/WebviewMessage.ts

@@ -132,6 +132,7 @@ export interface WebviewMessage {
 		| "toggleApiConfigPin"
 		| "setHistoryPreviewCollapsed"
 		| "condenseTaskContextRequest"
+		| "markdownBlockLineHeight"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -55,7 +55,7 @@ const remarkUrlToLink = () => {
 	}
 }
 
-const StyledMarkdown = styled.div`
+const StyledMarkdown = styled.div<{ lineheight: number | string }>`
 	code:not(pre > code) {
 		font-family: var(--vscode-editor-font-family, monospace);
 		filter: saturation(110%) brightness(95%);
@@ -95,7 +95,7 @@ const StyledMarkdown = styled.div`
 	li,
 	ol,
 	ul {
-		line-height: 1.25;
+		line-height: ${(props) => props.lineheight};
 	}
 
 	ol,
@@ -122,7 +122,7 @@ const StyledMarkdown = styled.div`
 `
 
 const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
-	const { theme } = useExtensionState()
+	const { theme, markdownBlockLineHeight } = useExtensionState()
 	const [reactContent, setMarkdown] = useRemark({
 		remarkPlugins: [
 			remarkUrlToLink,
@@ -229,7 +229,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 
 	return (
 		<div style={{}}>
-			<StyledMarkdown>{reactContent}</StyledMarkdown>
+			<StyledMarkdown lineheight={markdownBlockLineHeight || 1.25}>{reactContent}</StyledMarkdown>
 		</div>
 	)
 })

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

@@ -23,6 +23,7 @@ import {
 	Globe,
 	Info,
 	LucideIcon,
+	Brush,
 } from "lucide-react"
 
 import { ExperimentId } from "@roo/shared/experiments"
@@ -49,6 +50,7 @@ import {
 
 import { Tab, TabContent, TabHeader, TabList, TabTrigger } from "../common/Tab"
 import { SetCachedStateField, SetExperimentEnabled } from "./types"
+import { UISettings } from "./UISettings"
 import { SectionHeader } from "./SectionHeader"
 import ApiConfigManager from "./ApiConfigManager"
 import ApiOptions from "./ApiOptions"
@@ -77,6 +79,7 @@ export interface SettingsViewRef {
 
 const sectionNames = [
 	"providers",
+	"uiSettings",
 	"autoApprove",
 	"browser",
 	"checkpoints",
@@ -160,6 +163,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		remoteBrowserEnabled,
 		maxReadFileLine,
 		terminalCompressProgressBar,
+		markdownBlockLineHeight,
 	} = cachedState
 
 	const apiConfiguration = useMemo(() => cachedState.apiConfiguration ?? {}, [cachedState.apiConfiguration])
@@ -284,6 +288,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "alwaysAllowSubtasks", bool: alwaysAllowSubtasks })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
+			vscode.postMessage({ type: "markdownBlockLineHeight", value: markdownBlockLineHeight })
 			setChangeDetected(false)
 		}
 	}
@@ -354,6 +359,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	const sections: { id: SectionName; icon: LucideIcon }[] = useMemo(
 		() => [
 			{ id: "providers", icon: Webhook },
+			{ id: "uiSettings", icon: Brush },
 			{ id: "autoApprove", icon: CheckCheck },
 			{ id: "browser", icon: SquareMousePointer },
 			{ id: "checkpoints", icon: GitBranch },
@@ -547,6 +553,14 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						</div>
 					)}
 
+					{/* UISettings Section */}
+					{activeTab === "uiSettings" && (
+						<UISettings
+							markdownBlockLineHeight={cachedState.markdownBlockLineHeight ?? 1.25}
+							setCachedStateField={setCachedStateField}
+						/>
+					)}
+
 					{/* Auto-Approve Section */}
 					{activeTab === "autoApprove" && (
 						<AutoApproveSettings

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

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { Database } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Slider } from "@/components/ui"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type UISettingsProps = HTMLAttributes<HTMLDivElement> & {
+	markdownBlockLineHeight: number
+	setCachedStateField: SetCachedStateField<"markdownBlockLineHeight">
+}
+
+export const UISettings = ({ markdownBlockLineHeight, setCachedStateField, className, ...props }: UISettingsProps) => {
+	const { t } = useAppTranslation()
+	return (
+		<div className={cn("flex flex-col gap-2", className)} {...props}>
+			<SectionHeader description={t("settings:uiSettings.description")}>
+				<div className="flex items-center gap-2">
+					<Database className="w-4" />
+					<div>{t("settings:sections.uiSettings")}</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<span className="block font-medium mb-1">
+						{t("settings:uiSettings.markdownBlockLineHeight.label")}
+					</span>
+					<div className="flex items-center gap-2">
+						<Slider
+							min={1.25}
+							max={2}
+							step={0.01}
+							value={[markdownBlockLineHeight ?? 1.25]}
+							onValueChange={([value]) => setCachedStateField("markdownBlockLineHeight", value)}
+							data-testid="markdown-lineheight-slider"
+						/>
+						<span className="w-10">{markdownBlockLineHeight ?? 1.25}</span>
+					</div>
+					<div className="text-vscode-descriptionForeground text-sm mt-1">
+						{t("settings:uiSettings.markdownBlockLineHeight.description")}
+					</div>
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/context/ExtensionStateContext.tsx

@@ -24,6 +24,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	currentCheckpoint?: string
 	filePaths: string[]
 	openedTabs: Array<{ label: string; isActive: boolean; path?: string }>
+	markdownBlockLineHeight: number | undefined
+	setMarkdownBlockLineHeight: (value: number) => void
 	setApiConfiguration: (config: ProviderSettings) => void
 	setCustomInstructions: (value?: string) => void
 	setAlwaysAllowReadOnly: (value: boolean) => void
@@ -159,6 +161,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		customSupportPrompts: {},
 		experiments: experimentDefault,
 		enhancementApiConfigId: "",
+		markdownBlockLineHeight: 1.25,
 		autoApprovalEnabled: false,
 		customModes: [],
 		maxOpenTabsContext: 20,
@@ -266,6 +269,9 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		fuzzyMatchThreshold: state.fuzzyMatchThreshold,
 		writeDelayMs: state.writeDelayMs,
 		screenshotQuality: state.screenshotQuality,
+		markdownBlockLineHeight: state.markdownBlockLineHeight,
+		setMarkdownBlockLineHeight: (value) =>
+			setState((prevState) => ({ ...prevState, markdownBlockLineHeight: value })),
 		setExperimentEnabled: (id, enabled) =>
 			setState((prevState) => ({ ...prevState, experiments: { ...prevState.experiments, [id]: enabled } })),
 		setApiConfiguration: (value) =>

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

@@ -22,6 +22,7 @@
 	},
 	"sections": {
 		"providers": "Proveïdors",
+		"uiSettings": "Configuració de la interfície",
 		"autoApprove": "Auto-aprovació",
 		"browser": "Accés a l'ordinador",
 		"checkpoints": "Punts de control",
@@ -324,6 +325,13 @@
 			"always_full_read": "Llegeix sempre el fitxer sencer"
 		}
 	},
+	"uiSettings": {
+		"description": "Configuració relacionada amb la interfície d'usuari",
+		"markdownBlockLineHeight": {
+			"label": "Espaiat entre línies del contingut del panell",
+			"description": "Ajusteu l'interlineat del contingut del panell per millorar la llegibilitat."
+		}
+	},
 	"terminal": {
 		"basic": {
 			"label": "Configuració del terminal: Bàsica",
@@ -529,4 +537,4 @@
 		"customArn": "ARN personalitzat",
 		"useCustomArn": "Utilitza ARN personalitzat..."
 	}
-}
+}

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

@@ -22,6 +22,7 @@
 	},
 	"sections": {
 		"providers": "Anbieter",
+		"uiSettings": "UI-Einstellungen",
 		"autoApprove": "Auto-Genehmigung",
 		"browser": "Computerzugriff",
 		"checkpoints": "Kontrollpunkte",
@@ -324,6 +325,13 @@
 			"always_full_read": "Immer die gesamte Datei lesen"
 		}
 	},
+	"uiSettings": {
+		"description": "Benutzeroberflächenbezogene Konfiguration",
+		"markdownBlockLineHeight": {
+			"label": "Zeilenabstand des Panelinhalts",
+			"description": "Passen Sie den Zeilenabstand des Panel-Inhalts an, um die Lesbarkeit zu verbessern."
+		}
+	},
 	"terminal": {
 		"basic": {
 			"label": "Terminal-Einstellungen: Grundlegend",
@@ -529,4 +537,4 @@
 		"customArn": "Benutzerdefinierte ARN",
 		"useCustomArn": "Benutzerdefinierte ARN verwenden..."
 	}
-}
+}

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

@@ -22,6 +22,7 @@
 	},
 	"sections": {
 		"providers": "Providers",
+		"uiSettings": "UI Settings",
 		"autoApprove": "Auto-Approve",
 		"browser": "Browser",
 		"checkpoints": "Checkpoints",
@@ -324,6 +325,13 @@
 			"always_full_read": "Always read entire file"
 		}
 	},
+	"uiSettings": {
+		"description": "UI related configuration",
+		"markdownBlockLineHeight": {
+			"label": "Content vertical spacing",
+			"description": "Adjust content vertical line spacing to improve readability."
+		}
+	},
 	"terminal": {
 		"basic": {
 			"label": "Terminal Settings: Basic",
@@ -529,4 +537,4 @@
 		"customArn": "Custom ARN",
 		"useCustomArn": "Use custom ARN..."
 	}
-}
+}