feat(ui): add interface, terminal, editor font size and spacing settings

knip.json

@@ -48,6 +48,7 @@
 				"src/**/*.{ts,tsx}!",
 				"../src/shared/*.ts!",
 				"!src/utils/test-utils.tsx!",
+				"!src/**/__tests__/**!",
 				"!src/vite-plugins/**!",
 				"!src/**/*.visual.tsx!",
 				"!src/**/*.visual.{fixture,i18n}.{ts,tsx}!"

packages/types/src/__tests__/global-settings.test.ts

@@ -51,3 +51,41 @@ describe("collapseCommandOutputByDefault global setting", () => {
 		expect(globalSettingsSchema.safeParse({ collapseCommandOutputByDefault: "true" }).success).toBe(false)
 	})
 })
+
+describe("appearance global settings", () => {
+	const bounds = {
+		interfaceFontScale: { min: 50, max: 200 },
+		terminalFontSize: { min: 8, max: 32 },
+		editorFontSize: { min: 8, max: 32 },
+		spacingScale: { min: 50, max: 200 },
+	} as const
+	const keys = Object.keys(bounds) as Array<keyof typeof bounds>
+
+	it.each(keys)("%s is a persisted global setting", (key) => {
+		expect(GLOBAL_SETTINGS_KEYS).toContain(key)
+	})
+
+	it.each(keys)("%s accepts the whole range, including both bounds", (key) => {
+		const { min, max } = bounds[key]
+		for (const value of [min, Math.round((min + max) / 2), max]) {
+			expect(globalSettingsSchema.parse({ [key]: value })).toEqual({ [key]: value })
+		}
+	})
+
+	it.each(keys)("%s accepts null (a saved reset) and an unset value", (key) => {
+		expect(globalSettingsSchema.parse({ [key]: null })).toEqual({ [key]: null })
+		expect(globalSettingsSchema.parse({})).not.toHaveProperty(key)
+	})
+
+	it.each(keys)("%s rejects out-of-range, fractional and non-numeric values", (key) => {
+		const { min, max } = bounds[key]
+		for (const value of [min - 1, max + 1, 0, -1, min + 0.5, Number.NaN, "100"]) {
+			expect(globalSettingsSchema.safeParse({ [key]: value }).success).toBe(false)
+		}
+	})
+
+	it("keeps all four values together", () => {
+		const all = { interfaceFontScale: 120, terminalFontSize: 14, editorFontSize: 15, spacingScale: 80 }
+		expect(globalSettingsSchema.parse(all)).toEqual(all)
+	})
+})

packages/types/src/global-settings.ts

@@ -280,6 +280,22 @@ export const globalSettingsSchema = z.object({
 	 * When unset (or `null`), the webview inherits VS Code's `--vscode-font-size`.
 	 */
 	chatFontSize: z.number().int().min(8).max(32).nullish(),
+	/**
+	 * Scale (percent) applied to Zoo Code's interface text. `null`/unset = 100.
+	 */
+	interfaceFontScale: z.number().int().min(50).max(200).nullish(),
+	/**
+	 * Font size (px) for command/terminal output shown in chat. `null`/unset inherits.
+	 */
+	terminalFontSize: z.number().int().min(8).max(32).nullish(),
+	/**
+	 * Font size (px) for code blocks and diffs shown in chat. `null`/unset inherits.
+	 */
+	editorFontSize: z.number().int().min(8).max(32).nullish(),
+	/**
+	 * Scale (percent) applied to chat row padding. `null`/unset = 100.
+	 */
+	spacingScale: z.number().int().min(50).max(200).nullish(),
 	/**
 	 * Controls the keyboard behavior for sending messages in the chat input.
 	 * - "send": Enter sends message, Shift+Enter creates newline (default)

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

@@ -50,6 +50,7 @@ export interface ExtensionMessage {
 		| typeof VsCodeLmModelsMessageType.vsCodeLmModels
 		| typeof VsCodeLmModelsMessageType.githubCopilotModels
 		| typeof VsCodeLmModelsMessageType.githubCopilotSignInResult
+		| "settingsSaveResult"
 		| "vsCodeLmApiAvailable"
 		| "updatePrompt"
 		| "systemPrompt"
@@ -339,6 +340,10 @@ export type ExtensionState = Pick<
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
 	| "chatFontSize"
+	| "interfaceFontScale"
+	| "terminalFontSize"
+	| "editorFontSize"
+	| "spacingScale"
 	| "enterBehavior"
 	| "includeCurrentTime"
 	| "includeCurrentCost"

src/core/webview/ClineProvider.ts

@@ -2860,6 +2860,10 @@ export class ClineProvider
 			historyPreviewCollapsed,
 			reasoningBlockCollapsed,
 			chatFontSize,
+			interfaceFontScale,
+			terminalFontSize,
+			editorFontSize,
+			spacingScale,
 			enterBehavior,
 			cloudUserInfo,
 			cloudIsAuthenticated,
@@ -3041,6 +3045,10 @@ export class ClineProvider
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: reasoningBlockCollapsed ?? true,
 			chatFontSize,
+			interfaceFontScale,
+			terminalFontSize,
+			editorFontSize,
+			spacingScale,
 			enterBehavior: enterBehavior ?? "send",
 			cloudUserInfo,
 			cloudIsAuthenticated: cloudIsAuthenticated ?? false,
@@ -3274,6 +3282,10 @@ export class ClineProvider
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
 			reasoningBlockCollapsed: stateValues.reasoningBlockCollapsed ?? true,
 			chatFontSize: stateValues.chatFontSize,
+			interfaceFontScale: stateValues.interfaceFontScale,
+			terminalFontSize: stateValues.terminalFontSize,
+			editorFontSize: stateValues.editorFontSize,
+			spacingScale: stateValues.spacingScale,
 			enterBehavior: stateValues.enterBehavior ?? "send",
 			cloudUserInfo,
 			cloudIsAuthenticated,

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

@@ -2119,6 +2119,88 @@ describe("ClineProvider", () => {
 		expect(state.allowedReadFiles).toEqual([])
 	})
 
+	describe("appearance settings", () => {
+		const keys = ["interfaceFontScale", "terminalFontSize", "editorFontSize", "spacingScale"] as const
+		const values = { interfaceFontScale: 120, terminalFontSize: 14, editorFontSize: 15, spacingScale: 80 }
+
+		/** Saves through the real `updateSettings` handler, as the settings view does. */
+		const save = async (updatedSettings: Record<string, unknown>) => {
+			await provider.resolveWebviewView(mockWebviewView)
+			const messageHandler = vi.mocked(mockWebviewView.webview.onDidReceiveMessage).mock.calls[0][0]
+			await messageHandler({ type: "updateSettings", updatedSettings })
+		}
+
+		test.each(keys)("%s is unset when it was never saved, in both states", async (key) => {
+			await provider.resolveWebviewView(mockWebviewView)
+
+			expect((await provider.getState())[key]).toBeUndefined()
+			expect((await provider.getStateToPostToWebview())[key]).toBeUndefined()
+		})
+
+		test.each(keys)("%s that was stored is returned by both states", async (key) => {
+			await provider.resolveWebviewView(mockWebviewView)
+			await provider.contextProxy.setValue(key, values[key])
+
+			expect((await provider.getState())[key]).toBe(values[key])
+			expect((await provider.getStateToPostToWebview())[key]).toBe(values[key])
+		})
+
+		test("all four are returned together, each with its own value", async () => {
+			await provider.resolveWebviewView(mockWebviewView)
+			for (const key of keys) await provider.contextProxy.setValue(key, values[key])
+
+			expect(await provider.getState()).toMatchObject(values)
+			expect(await provider.getStateToPostToWebview()).toMatchObject(values)
+		})
+
+		test.each(keys)("a reset of %s (null) is kept, not replaced by a default", async (key) => {
+			await provider.resolveWebviewView(mockWebviewView)
+			await provider.contextProxy.setValue(key, values[key])
+			await provider.contextProxy.setValue(key, null)
+
+			expect((await provider.getState())[key]).toBeNull()
+			expect((await provider.getStateToPostToWebview())[key]).toBeNull()
+		})
+
+		test("saving through updateSettings stores the values and tells the open webview", async () => {
+			mockPostMessage.mockClear()
+
+			await save(values)
+
+			for (const key of keys) expect(mockContext.globalState.update).toHaveBeenCalledWith(key, values[key])
+			expect(await provider.getStateToPostToWebview()).toMatchObject(values)
+			expect(mockPostMessage).toHaveBeenCalledWith(
+				expect.objectContaining({ type: "state", state: expect.objectContaining(values) }),
+			)
+		})
+
+		test("saving a reset stores null and tells the open webview", async () => {
+			await save(values)
+			mockPostMessage.mockClear()
+
+			await save({ interfaceFontScale: null, terminalFontSize: null, editorFontSize: null, spacingScale: null })
+
+			expect(await provider.getStateToPostToWebview()).toMatchObject({
+				interfaceFontScale: null,
+				terminalFontSize: null,
+				editorFontSize: null,
+				spacingScale: null,
+			})
+			expect(mockPostMessage).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: "state",
+					state: expect.objectContaining({ interfaceFontScale: null, spacingScale: null }),
+				}),
+			)
+		})
+
+		test("a value the webview should not be able to store is refused, and nothing changes", async () => {
+			await save({ interfaceFontScale: 999 })
+
+			expect((await provider.getState()).interfaceFontScale).toBeUndefined()
+		})
+	})
+
 	test("getState returns the saved allowed write files", async () => {
 		await provider.contextProxy.setValue("allowedWriteFiles", ["notes.md"])