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/config/__tests__/appearanceSettingWrites.spec.ts

@@ -0,0 +1,180 @@
+import {
+	APPEARANCE_SETTING_KEYS,
+	beginSettingWrite,
+	finishSettingWrites,
+	isAppearanceSetting,
+	performSettingWrite,
+	undoSettingWrite,
+} from "../appearanceSettingWrites"
+import type { ContextProxy } from "../ContextProxy"
+
+describe("appearanceSettingWrites", () => {
+	let stored: Map<string, unknown>
+	// Only the two methods the module uses. The cast says so: the real ContextProxy has far more.
+	let contextProxy: ContextProxy
+
+	beforeEach(() => {
+		stored = new Map<string, unknown>([["interfaceFontScale", 100]])
+		contextProxy = {
+			getValue: (key: string) => stored.get(key),
+			setValue: async (key: string, value: unknown) => {
+				stored.set(key, value)
+			},
+		} as unknown as ContextProxy
+	})
+
+	/** Stores the value, as the write that was just recorded would have. */
+	const store = (key: string, value: unknown) => stored.set(key, value)
+
+	describe("which settings are tracked", () => {
+		it.each(APPEARANCE_SETTING_KEYS)("tracks %s", (key) => {
+			expect(isAppearanceSetting(key)).toBe(true)
+		})
+
+		it.each(["soundEnabled", "language", "", "TimeFormat"])("does not track %j", (key) => {
+			expect(isAppearanceSetting(key)).toBe(false)
+		})
+	})
+
+	describe("two saves writing the same setting", () => {
+		it("a failed save does not undo a later save that wrote the same value afterwards", async () => {
+			const save = beginSettingWrite("interfaceFontScale", 100, 120)
+			store("interfaceFontScale", 120)
+			const other = beginSettingWrite("interfaceFontScale", 120, 120)
+			store("interfaceFontScale", 120)
+			finishSettingWrites([other])
+
+			await undoSettingWrite(contextProxy, save)
+
+			expect(stored.get("interfaceFontScale")).toBe(120)
+		})
+
+		it("a failed earlier save does not undo a later save that wrote the same value afterwards", async () => {
+			const other = beginSettingWrite("interfaceFontScale", 100, 150)
+			store("interfaceFontScale", 150)
+			const save = beginSettingWrite("interfaceFontScale", 150, 150)
+			store("interfaceFontScale", 150)
+			finishSettingWrites([save])
+
+			await undoSettingWrite(contextProxy, other)
+
+			expect(stored.get("interfaceFontScale")).toBe(150)
+		})
+
+		it("when both fail, each restores what was stored before either of them", async () => {
+			const save = beginSettingWrite("interfaceFontScale", 100, 120)
+			store("interfaceFontScale", 120)
+			const other = beginSettingWrite("interfaceFontScale", 120, 150)
+			store("interfaceFontScale", 150)
+
+			await undoSettingWrite(contextProxy, save) // superseded by the other save: nothing changes yet
+			expect(stored.get("interfaceFontScale")).toBe(150)
+
+			await undoSettingWrite(contextProxy, other)
+			expect(stored.get("interfaceFontScale")).toBe(100)
+		})
+	})
+
+	describe("performSettingWrite", () => {
+		it("reads what the write replaces when it starts", async () => {
+			const write = beginSettingWrite("interfaceFontScale", "stale", 120)
+			store("interfaceFontScale", 150) // an earlier write reached storage after this one registered
+
+			await performSettingWrite(contextProxy, write)
+
+			expect(write.previous).toBe(150)
+			expect(stored.get("interfaceFontScale")).toBe(120)
+		})
+
+		it("keeps the value handed over by a write that was rolled back before this one started", async () => {
+			const first = beginSettingWrite("interfaceFontScale", 100, 150)
+			store("interfaceFontScale", 150)
+			const second = beginSettingWrite("interfaceFontScale", 150, 120)
+
+			await undoSettingWrite(contextProxy, first) // superseded: hands 100 to the second write
+			await performSettingWrite(contextProxy, second)
+			expect(second.previous).toBe(100)
+
+			await undoSettingWrite(contextProxy, second)
+			expect(stored.get("interfaceFontScale")).toBe(100)
+		})
+	})
+
+	describe("a write that finished between two that fail", () => {
+		it("keeps its value when the earlier one fails and then the later one", async () => {
+			const first = beginSettingWrite("interfaceFontScale", 100, 150)
+			await performSettingWrite(contextProxy, first)
+			const second = beginSettingWrite("interfaceFontScale", 150, 120)
+			await performSettingWrite(contextProxy, second)
+			const third = beginSettingWrite("interfaceFontScale", 120, 80) // registered while the second is pending
+			finishSettingWrites([second]) // committed, between the other two
+			await performSettingWrite(contextProxy, third)
+
+			await undoSettingWrite(contextProxy, first) // superseded: the committed value is not its to restore
+			await undoSettingWrite(contextProxy, third)
+
+			expect(stored.get("interfaceFontScale")).toBe(120)
+		})
+
+		it("keeps its value for a later write that has not started when the earlier one fails", async () => {
+			const first = beginSettingWrite("interfaceFontScale", 100, 150)
+			await performSettingWrite(contextProxy, first)
+			const second = beginSettingWrite("interfaceFontScale", 150, 120)
+			await performSettingWrite(contextProxy, second)
+			const third = beginSettingWrite("interfaceFontScale", 120, 80) // queued, not started
+
+			await undoSettingWrite(contextProxy, first)
+			finishSettingWrites([second])
+			await performSettingWrite(contextProxy, third)
+			await undoSettingWrite(contextProxy, third)
+
+			expect(stored.get("interfaceFontScale")).toBe(120)
+		})
+
+		it("leaves what a write read when it started, if it had started when the earlier one finished", async () => {
+			const first = beginSettingWrite("interfaceFontScale", 100, 150)
+			await performSettingWrite(contextProxy, first)
+			const second = beginSettingWrite("interfaceFontScale", 150, 120)
+			await performSettingWrite(contextProxy, second)
+			const third = beginSettingWrite("interfaceFontScale", 120, 80)
+			await performSettingWrite(contextProxy, third) // started: it read 120
+
+			finishSettingWrites([second])
+			await undoSettingWrite(contextProxy, third)
+
+			expect(stored.get("interfaceFontScale")).toBe(120)
+		})
+	})
+
+	it("puts a failed write back to what was stored before it", async () => {
+		const write = beginSettingWrite("interfaceFontScale", 100, 120)
+		store("interfaceFontScale", 120)
+
+		await undoSettingWrite(contextProxy, write)
+
+		expect(stored.get("interfaceFontScale")).toBe(100)
+	})
+
+	it("leaves a value alone that was changed by something else after the write", async () => {
+		const write = beginSettingWrite("interfaceFontScale", 100, 120)
+		store("interfaceFontScale", 150)
+
+		await undoSettingWrite(contextProxy, write)
+
+		expect(stored.get("interfaceFontScale")).toBe(150)
+	})
+
+	it("does not link a new write to one that has finished", async () => {
+		const first = beginSettingWrite("interfaceFontScale", 100, 120)
+		store("interfaceFontScale", 120)
+		finishSettingWrites([first])
+		const second = beginSettingWrite("interfaceFontScale", 120, 150)
+		store("interfaceFontScale", 150)
+
+		await undoSettingWrite(contextProxy, second)
+
+		// Back to the finished write's value, not past it.
+		expect(stored.get("interfaceFontScale")).toBe(120)
+		expect(second.prev).toBeUndefined()
+	})
+})