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

knip.json

@@ -45,6 +45,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"
@@ -341,6 +342,10 @@ export type ExtensionState = Pick<
 	| "includeTaskHistoryInEnhance"
 	| "reasoningBlockCollapsed"
 	| "chatFontSize"
+	| "interfaceFontScale"
+	| "terminalFontSize"
+	| "editorFontSize"
+	| "spacingScale"
 	| "enterBehavior"
 	| "includeCurrentTime"
 	| "includeCurrentCost"
@@ -450,6 +455,14 @@ export type ExtensionState = Pick<
 	 * (captured during async getStateToPostToWebview) from overwriting newer messages.
 	 */
 	clineMessagesSeq?: number
+
+	/**
+	 * Monotonically increasing sequence number for every state push, taken together with the host's read
+	 * of its settings. The frontend applies the appearance values (font sizes, spacing) of a push only if its
+	 * seq is greater than the last applied one, so an older push that arrives late cannot restore
+	 * values a newer push has already replaced.
+	 */
+	appearanceSeq?: number
 }
 
 export interface Command {