Commit 8eca20005b47e197b3610f7996f3fd02355c1891 | the-knife

apps/desktop/src/preview/BrowserSession.ts+4

 @@ -23,6 +23,10 @@ const ALLOWED_PREVIEW_PERMISSIONS: ReadonlySet<string> = new Set([
   "clipboard-sanitized-write",
   "notifications",
   "geolocation",
+  // Deliberately NOT local-fonts: preview sessions run untrusted web content,
+  // and silently granting it would hand every page the user's installed-font
+  // fingerprint (and font file bytes via FontData.blob()). The app's own font
+  // picker runs in the main window session, which is unaffected by this list.
 ]);
 export class BrowserSessionPartitionDerivationError extends Schema.TaggedErrorClass<BrowserSessionPartitionDerivationError>()(

apps/desktop/src/settings/DesktopClientSettings.test.ts+9

...	@@ -20,6 +20,15 @@ const clientSettings: ClientSettings = {	...	@@ -20,6 +20,15 @@ const clientSettings: ClientSettings = {
20	diffIgnoreWhitespace: true,	20	diffIgnoreWhitespace: true,
21	environmentIdentificationMode: "artwork",	21	environmentIdentificationMode: "artwork",
22	favorites: [],	22	favorites: [],
		23	fontFamilyCode: "",
		24	fontFamilyComposer: "",
		25	fontFamilySans: "",
		26	fontFamilyTerminal: "",
		27	fontSizeCode: 13,
		28	fontSizeInterface: 16,
		29	fontSizePrompt: 14,
		30	fontSizeTerminal: 12,
		31	fontSmoothing: true,
23	glassOpacity: 80,	32	glassOpacity: 80,
24	providerModelPreferences: {},	33	providerModelPreferences: {},
25	sidebarAutoSettleAfterDays: 3,	34	sidebarAutoSettleAfterDays: 3,

apps/web/index.html+1-8

...	@@ -47,14 +47,7 @@	...	@@ -47,14 +47,7 @@
47	body {	47	body {
48	background: #ffffff;	48	background: #ffffff;
49	color: #262626;	49	color: #262626;
50	font-family:	50	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
51	"DM Sans Variable",
52	"DM Sans",
53	-apple-system,
54	BlinkMacSystemFont,
55	"Segoe UI",
56	system-ui,
57	sans-serif;
58	}	51	}
59		52
60	html.dark body {	53	html.dark body {

apps/web/package.json-2

...	@@ -20,8 +20,6 @@	...	@@ -20,8 +20,6 @@
20	"@dnd-kit/sortable": "^10.0.0",	20	"@dnd-kit/sortable": "^10.0.0",
21	"@dnd-kit/utilities": "^3.2.2",	21	"@dnd-kit/utilities": "^3.2.2",
22	"@effect/atom-react": "catalog:",	22	"@effect/atom-react": "catalog:",
23	"@fontsource-variable/dm-sans": "^5.2.8",
24	"@fontsource/jetbrains-mono": "^5.2.8",
25	"@formkit/auto-animate": "^0.9.0",	23	"@formkit/auto-animate": "^0.9.0",
26	"@legendapp/list": "3.2.0",	24	"@legendapp/list": "3.2.0",
27	"@lexical/react": "^0.41.0",	25	"@lexical/react": "^0.41.0",

apps/web/src/appearanceFonts.test.ts created+71

...	@@ -0,0 +1,71 @@
1	import { describe, expect, it } from "vite-plus/test";
2
3	import {
4	clampCodeFontSize,
5	clampInterfaceFontSize,
6	clampPromptFontSize,
7	DEFAULT_CODE_FONT_STACK,
8	DEFAULT_SANS_FONT_STACK,
9	appearanceFontStack,
10	cssFontFamilies,
11	resolveDefaultFamilyLabel,
12	} from "./appearanceFonts";
13
14	describe("cssFontFamilies", () => {
15	it("returns null for effectively empty input", () => {
16	expect(cssFontFamilies("")).toBeNull();
17	expect(cssFontFamilies(" ")).toBeNull();
18	expect(cssFontFamilies(" , , ")).toBeNull();
19	});
20
21	it("quotes names with spaces and keeps single idents bare", () => {
22	expect(cssFontFamilies("Fira Code")).toBe('"Fira Code"');
23	expect(cssFontFamilies("monospace")).toBe("monospace");
24	expect(cssFontFamilies('"Comic Mono"')).toBe('"Comic Mono"');
25	});
26
27	it("normalizes comma-separated lists and strips embedded quotes", () => {
28	expect(cssFontFamilies(" Fira Code , Menlo ")).toBe('"Fira Code", Menlo');
29	expect(cssFontFamilies('Bad"Name')).toBe('"BadName"');
30	});
31
32	it("quotes names that are not single CSS idents", () => {
33	expect(cssFontFamilies("3270 Nerd Font")).toBe('"3270 Nerd Font"');
34	expect(cssFontFamilies("M+ 1m")).toBe('"M+ 1m"');
35	});
36	});
37
38	describe("resolveDefaultFamilyLabel", () => {
39	it("skips generic keywords and returns null for a stack of only generics", () => {
40	expect(resolveDefaultFamilyLabel("system-ui, sans-serif")).toBeNull();
41	expect(resolveDefaultFamilyLabel("ui-monospace, monospace")).toBeNull();
42	});
43	});
44
45	describe("appearanceFontStack", () => {
46	it("prepends the custom family to the default stack", () => {
47	expect(appearanceFontStack("Fira Code", DEFAULT_CODE_FONT_STACK)).toBe(
48	`"Fira Code", ${DEFAULT_CODE_FONT_STACK}`,
49	);
50	});
51
52	it("falls back to the default stack when unset", () => {
53	expect(appearanceFontStack("", DEFAULT_SANS_FONT_STACK)).toBe(DEFAULT_SANS_FONT_STACK);
54	});
55	});
56
57	describe("font size clamping", () => {
58	it("keeps sizes inside the ranges the UI can absorb", () => {
59	expect(clampInterfaceFontSize(16)).toBe(16);
60	expect(clampInterfaceFontSize(2)).toBe(12);
61	expect(clampInterfaceFontSize(96)).toBe(20);
62	expect(clampPromptFontSize(40)).toBe(20);
63	expect(clampCodeFontSize(1)).toBe(10);
64	});
65
66	it("rounds fractional values and falls back for unusable input", () => {
67	expect(clampCodeFontSize(13.4)).toBe(13);
68	expect(clampInterfaceFontSize(Number.NaN)).toBe(16);
69	expect(clampPromptFontSize(Number.POSITIVE_INFINITY)).toBe(14);
70	});
71	});

apps/web/src/appearanceFonts.ts created+352

...	@@ -0,0 +1,352 @@
1	/**
2	* Font preferences from Settings → Appearance, applied as CSS custom
3	* properties. The default stacks mirror the `--font-sans` / `--font-mono`
4	* definitions in `index.css`; a custom family is always prepended to the
5	* matching default stack so glyph coverage never regresses.
6	*/
7
8	import {
9	DEFAULT_CODE_FONT_SIZE,
10	DEFAULT_INTERFACE_FONT_SIZE,
11	DEFAULT_PROMPT_FONT_SIZE,
12	MAX_CODE_FONT_SIZE,
13	MAX_INTERFACE_FONT_SIZE,
14	MAX_PROMPT_FONT_SIZE,
15	MIN_CODE_FONT_SIZE,
16	MIN_INTERFACE_FONT_SIZE,
17	MIN_PROMPT_FONT_SIZE,
18	} from "@t3tools/contracts";
19
20	export const DEFAULT_SANS_FONT_STACK =
21	'-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
22
23	// Concrete names first: some engines alias `ui-monospace` to the
24	// proportional system UI font, which would break every code surface.
25	export const DEFAULT_CODE_FONT_STACK =
26	'"SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace';
27
28	function quoteFontFamilyName(name: string): string {
29	const bare = name.trim();
30	if (bare.length === 0) return "";
31	// Already quoted, or a single ident that needs no quoting.
32	if (/^(['"]).*\1$/.test(bare)) return bare;
33	if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(bare)) return bare;
34	return `"${bare.replaceAll('"', "")}"`;
35	}
36
37	/**
38	* Normalize a user-entered family (single name or comma-separated list) into a
39	* safe CSS font-family list, or null when the input is effectively empty.
40	*/
41	export function cssFontFamilies(input: string): string \| null {
42	const families = input
43	.split(",")
44	.map(quoteFontFamilyName)
45	.filter((name) => name.length > 0);
46	return families.length > 0 ? families.join(", ") : null;
47	}
48
49	/** The full stack a preference resolves to: custom families before the default. */
50	export function appearanceFontStack(custom: string, defaultStack: string): string {
51	const families = cssFontFamilies(custom);
52	return families === null ? defaultStack : `${families}, ${defaultStack}`;
53	}
54
55	export interface AppearanceFontPreferences {
56	readonly sans: string;
57	readonly code: string;
58	readonly composer: string;
59	readonly sizeInterface: number;
60	readonly sizePrompt: number;
61	readonly sizeCode: number;
62	/** Grayscale `antialiased` rendering; false keeps the heavier platform default. */
63	readonly smoothing: boolean;
64	}
65
66	/**
67	* Apply the preferences to the root element. Unset families remove the
68	* override so the stylesheet defaults (and theme changes) stay in charge.
69	*
70	* Sizes are always written: the interface size drives the root font size (and
71	* with it every rem-based dimension), while the prompt and code sizes stay in
72	* absolute pixels so they do not scale twice.
73	*/
74	export function applyAppearanceFontVariables(
75	root: HTMLElement,
76	preferences: AppearanceFontPreferences,
77	): void {
78	const families: ReadonlyArray<readonly [variable: string, custom: string, fallback: string]> = [
79	["--font-sans", preferences.sans, DEFAULT_SANS_FONT_STACK],
80	["--font-mono", preferences.code, DEFAULT_CODE_FONT_STACK],
81	// The composer falls back to whatever the sans preference resolves to.
82	["--font-composer", preferences.composer, "var(--font-sans)"],
83	];
84	for (const [variable, custom, fallback] of families) {
85	const list = cssFontFamilies(custom);
86	if (list === null) {
87	root.style.removeProperty(variable);
88	} else {
89	root.style.setProperty(variable, `${list}, ${fallback}`);
90	}
91	}
92
93	root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`;
94	root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`);
95	const code = clampCodeFontSize(preferences.sizeCode);
96	root.style.setProperty("--font-size-code", `${code}px`);
97	// The @pierre/diffs surfaces read their own hook for code text.
98	root.style.setProperty("--diffs-font-size", `${code}px`);
99
100	// Inherited from the root; only macOS engines honor the property, so no
101	// platform gate is needed here. Smoothing on means grayscale `antialiased`
102	// (thinner strokes); off restores the platform default, which macOS renders
103	// with heavier stem darkening.
104	if (preferences.smoothing) {
105	root.style.setProperty("-webkit-font-smoothing", "antialiased");
106	} else {
107	root.style.removeProperty("-webkit-font-smoothing");
108	}
109	}
110
111	function clampFontSize(value: number, minimum: number, maximum: number, fallback: number): number {
112	if (!Number.isFinite(value)) return fallback;
113	return Math.min(maximum, Math.max(minimum, Math.round(value)));
114	}
115
116	export function clampInterfaceFontSize(value: number): number {
117	return clampFontSize(
118	value,
119	MIN_INTERFACE_FONT_SIZE,
120	MAX_INTERFACE_FONT_SIZE,
121	DEFAULT_INTERFACE_FONT_SIZE,
122	);
123	}
124
125	export function clampPromptFontSize(value: number): number {
126	return clampFontSize(value, MIN_PROMPT_FONT_SIZE, MAX_PROMPT_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE);
127	}
128
129	export function clampCodeFontSize(value: number): number {
130	return clampFontSize(value, MIN_CODE_FONT_SIZE, MAX_CODE_FONT_SIZE, DEFAULT_CODE_FONT_SIZE);
131	}
132
133	const FONT_PROBE_TEXT = "mmmmmmmmMMWli1O0@# fjord";
134	let fontProbeContext: CanvasRenderingContext2D \| null \| undefined;
135
136	function probeWidth(fontList: string): number \| null {
137	if (fontProbeContext === undefined) {
138	fontProbeContext = document.createElement("canvas").getContext("2d");
139	}
140	if (fontProbeContext === null) return null;
141	fontProbeContext.font = `16px ${fontList}`;
142	return fontProbeContext.measureText(FONT_PROBE_TEXT).width;
143	}
144
145	/**
146	* Canvas metric probing instead of document.fonts.check(): check() reports
147	* true for families that are not installed at all (nothing needs loading), so
148	* it cannot filter the dropdown. A family exists when falling back to at
149	* least one generic changes the measured advance.
150	*/
151	export function isFontFamilyAvailable(family: string): boolean {
152	const families = cssFontFamilies(family);
153	if (families === null) return false;
154	if (/^(system-ui\|sans-serif\|serif\|monospace\|ui-monospace)$/i.test(families)) return true;
155	try {
156	for (const generic of ["monospace", "serif", "sans-serif"]) {
157	const baseline = probeWidth(generic);
158	const candidate = probeWidth(`${families}, ${generic}`);
159	if (baseline === null \|\| candidate === null) return false;
160	if (candidate !== baseline) return true;
161	}
162	return false;
163	} catch {
164	return false;
165	}
166	}
167
168	/**
169	* Whether a family renders every character on the same advance. Cell-grid
170	* surfaces (the terminal) require this: a proportional face draws its text
171	* narrower than the lattice the cursor and selection are placed on, which
172	* reads as ragged gaps and a cursor stranded to the right of the text.
173	*
174	* Unmeasurable environments answer true, so a missing canvas never blocks a
175	* legitimate font.
176	*/
177	export function isMonospaceFamily(family: string): boolean {
178	const families = cssFontFamilies(family);
179	if (families === null) return true;
180	try {
181	if (fontProbeContext === undefined) {
182	fontProbeContext = document.createElement("canvas").getContext("2d");
183	}
184	if (fontProbeContext === null) return true;
185	// Fall back to a generic mono so an absent face measures as monospace and
186	// is left for the normal fallback chain to resolve.
187	fontProbeContext.font = `32px ${families}, monospace`;
188	const narrow = fontProbeContext.measureText("i").width;
189	const wide = fontProbeContext.measureText("M").width;
190	if (!Number.isFinite(narrow) \|\| !Number.isFinite(wide) \|\| wide === 0) return true;
191	return Math.abs(wide - narrow) < 0.5;
192	} catch {
193	return true;
194	}
195	}
196
197	// Nameable faces the platform generics commonly map to, likeliest first.
198	// Pixel-comparing a generic against these names the actual face; Apple's own
199	// UI fonts are deliberately not CSS-nameable, so a miss on an Apple platform
200	// identifies San Francisco itself.
201	const SANS_GENERIC_CANDIDATES = [
202	"Segoe UI",
203	"Roboto",
204	"Noto Sans",
205	"Ubuntu",
206	"Cantarell",
207	"DejaVu Sans",
208	"Liberation Sans",
209	"Helvetica Neue",
210	"Arial",
211	] as const;
212	const MONO_GENERIC_CANDIDATES = [
213	"Menlo",
214	"Consolas",
215	"Cascadia Mono",
216	"DejaVu Sans Mono",
217	"Ubuntu Mono",
218	"Liberation Mono",
219	"Noto Sans Mono",
220	"Roboto Mono",
221	"Monaco",
222	"Courier New",
223	] as const;
224
225	const GENERIC_PROBE_TEXT = "RagIl10O@ fjord quiz";
226
227	/**
228	* Advance width of the probe text laid out by the DOM - not canvas, whose
229	* generic-family mapping diverges from real rendering (this engine draws
230	* `ui-monospace` as the proportional UI font on canvas but not in CSS).
231	* Identical widths at this size mean the same face for practical purposes.
232	*/
233	function measureDomProbeWidth(fontFamily: string): number \| null {
234	try {
235	const body = document.body;
236	if (!body) return null;
237	const span = document.createElement("span");
238	span.style.cssText =
239	"position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre;font-size:100px;";
240	span.style.fontFamily = fontFamily;
241	span.textContent = GENERIC_PROBE_TEXT;
242	body.appendChild(span);
243	const width = span.getBoundingClientRect().width;
244	span.remove();
245	return width > 0 ? width : null;
246	} catch {
247	return null;
248	}
249	}
250
251	function widthsMatch(left: number, right: number): boolean {
252	return Math.abs(left - right) < 0.01;
253	}
254
255	/**
256	* Name the concrete face a generic keyword renders as, by measuring the
257	* generic against nameable candidates. Null when the face cannot be
258	* identified (and the platform gives no definitional answer).
259	*/
260	function resolveGenericFamilyLabel(generic: string): string \| null {
261	const lower = generic.toLowerCase();
262	if (lower === "serif") return null;
263	const monoLike = lower === "ui-monospace" \|\| lower === "monospace";
264	const genericWidth = measureDomProbeWidth(generic);
265	if (genericWidth === null) return null;
266	for (const candidate of monoLike ? MONO_GENERIC_CANDIDATES : SANS_GENERIC_CANDIDATES) {
267	if (!isFontFamilyAvailable(candidate)) continue;
268	const candidateWidth = measureDomProbeWidth(`"${candidate}"`);
269	if (candidateWidth !== null && widthsMatch(genericWidth, candidateWidth)) {
270	return candidate;
271	}
272	}
273	// No nameable face matched; on Apple platforms that means one of the San
274	// Francisco faces, which CSS cannot name. Comparing against -apple-system
275	// tells the UI face apart from SF Mono.
276	if (/mac\|iphone\|ipad\|ipod/i.test(navigator.platform)) {
277	const systemWidth = measureDomProbeWidth("-apple-system");
278	if (systemWidth !== null && widthsMatch(genericWidth, systemWidth)) return "SF Pro";
279	return monoLike ? "SF Mono" : "SF Pro";
280	}
281	return null;
282	}
283
284	/**
285	* The first family of a default stack that will actually render - what the
286	* "Default" choice means on this machine. Concrete names are probed for
287	* availability; generic keywords are resolved to the face they draw with
288	* where identifiable. Null when nothing can be named.
289	*/
290	export function resolveDefaultFamilyLabel(stack: string): string \| null {
291	for (const raw of stack.split(",")) {
292	const family = raw.trim().replace(/^(['"])(.*)\1$/, "$2");
293	if (family.length === 0) continue;
294	if (
295	/^(system-ui\|sans-serif\|serif\|monospace\|ui-monospace\|-apple-system\|BlinkMacSystemFont)$/i.test(
296	family,
297	)
298	) {
299	const resolved = resolveGenericFamilyLabel(family);
300	if (resolved !== null) return resolved;
301	continue;
302	}
303	if (isFontFamilyAvailable(family)) return family;
304	}
305	return null;
306	}
307
308	export interface InstalledFontFamiliesResult {
309	readonly families: readonly string[];
310	/**
311	* "unsupported" - the engine has no Local Font Access API (Safari,
312	* Firefox); "denied" - the API exists but the user declined the permission
313	* prompt. Both fall back to the curated catalog.
314	*/
315	readonly status: "granted" \| "denied" \| "unsupported";
316	}
317
318	let installedFamiliesCache: InstalledFontFamiliesResult \| null = null;
319
320	/**
321	* Every installed family via the Local Font Access API (Chromium and
322	* Electron). Call from a user gesture: the first call raises the browser's
323	* local-fonts permission prompt. A denial is not cached, so reopening the
324	* picker can ask again after the user changes the site setting.
325	*/
326	export async function queryInstalledFontFamilies(): Promise<InstalledFontFamiliesResult> {
327	if (installedFamiliesCache !== null) return installedFamiliesCache;
328	const query = (
329	window as Window & {
330	queryLocalFonts?: () => Promise<ReadonlyArray<{ readonly family: string }>>;
331	}
332	).queryLocalFonts;
333	if (typeof query !== "function") {
334	installedFamiliesCache = { families: [], status: "unsupported" };
335	return installedFamiliesCache;
336	}
337	try {
338	const fonts = await query.call(window);
339	const families = [...new Set(fonts.map((font) => font.family))]
340	// Dot-prefixed families are macOS-internal UI faces; selecting one is
341	// never intended and most refuse to render for web content anyway.
342	.filter((family) => !family.startsWith("."))
343	.sort((left, right) => left.localeCompare(right));
344	// A denied permission check resolves with an empty list instead of
345	// throwing; no machine has zero fonts, so treat empty as denied.
346	if (families.length === 0) return { families: [], status: "denied" };
347	installedFamiliesCache = { families, status: "granted" };
348	return installedFamiliesCache;
349	} catch {
350	return { families: [], status: "denied" };
351	}
352	}

apps/web/src/components/BranchToolbar.tsx+100-2

...	@@ -9,7 +9,7 @@ import {	...	@@ -9,7 +9,7 @@ import {
9	HistoryIcon,	9	HistoryIcon,
10	MonitorIcon,	10	MonitorIcon,
11	} from "lucide-react";	11	} from "lucide-react";
12	import { memo, useCallback, useMemo } from "react";	12	import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
13		13
14	import { useComposerDraftStore, type DraftId } from "../composerDraftStore";	14	import { useComposerDraftStore, type DraftId } from "../composerDraftStore";
15	import { useProject, useThread, useThreadShellsForProjectRefs } from "../state/entities";	15	import { useProject, useThread, useThreadShellsForProjectRefs } from "../state/entities";
...	@@ -214,6 +214,98 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({	...	@@ -214,6 +214,98 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
214	);	214	);
215	});	215	});
216		216
		217	/**
		218	* Collapse the strip's labels to icons only when the text no longer fits.
		219	*
		220	* Hidden labels stay measurable (they collapse to invisible absolute boxes,
		221	* which keep their natural width), so the required width can be recomputed in
		222	* either state on every pass - no remembered widths that could go stale or
		223	* latch the strip compact. A small hysteresis keeps the boundary from
		224	* flapping between states.
		225	*/
		226	const COMPACT_EXPAND_HYSTERESIS_PX = 16;
		227
		228	function useLabelsOverflow(element: HTMLDivElement \| null): boolean {
		229	const [overflows, setOverflows] = useState(false);
		230	// A render-synced mirror instead of useEffectEvent: the compiler memoizes
		231	// the event callback, which left observers reading the first render's null
		232	// element forever.
		233	const stateRef = useRef({ element, overflows });
		234	stateRef.current = { element, overflows };
		235
		236	const measure = useCallback(() => {
		237	const { element: current, overflows: compact } = stateRef.current;
		238	if (!current) return;
		239	const available = current.clientWidth;
		240	if (available === 0) return;
		241	// flex-1 stretches the groups to fill the strip, so their own boxes always
		242	// measure "full". Sum the laid-out content instead, skipping hidden form
		243	// artifacts and absolutely-positioned nodes (the compact-hidden labels).
		244	const contentWidth = (parent: Element): number => {
		245	const gap = Number.parseFloat(getComputedStyle(parent).columnGap) \|\| 0;
		246	let width = 0;
		247	let counted = 0;
		248	for (const child of parent.children) {
		249	if (!(child instanceof HTMLElement)) continue;
		250	if (child.offsetWidth <= 1) continue;
		251	const position = getComputedStyle(child).position;
		252	if (position === "absolute" \|\| position === "fixed") continue;
		253	width += child.offsetWidth;
		254	counted += 1;
		255	}
		256	return width + gap * Math.max(0, counted - 1);
		257	};
		258	const stripGap = Number.parseFloat(getComputedStyle(current).columnGap) \|\| 0;
		259	let needed = 0;
		260	let groups = 0;
		261	for (const child of current.children) {
		262	if (!(child instanceof HTMLElement) \|\| child.offsetWidth <= 1) continue;
		263	needed += contentWidth(child);
		264	groups += 1;
		265	}
		266	needed += stripGap * Math.max(0, groups - 1);
		267	for (const label of current.querySelectorAll<HTMLElement>("[data-composer-label]")) {
		268	// The clipping can happen below the marker (SelectValue truncates
		269	// internally), where the outer span's scrollWidth matches its clipped
		270	// box. The text's real width is the largest scrollWidth in the subtree.
		271	let textWidth = label.scrollWidth;
		272	for (const inner of label.querySelectorAll<HTMLElement>("*")) {
		273	textWidth = Math.max(textWidth, inner.scrollWidth);
		274	}
		275	if (compact) {
		276	// Compact: the label is squeezed to zero width but keeps reporting
		277	// the full width it would need when expanded.
		278	needed += textWidth;
		279	} else {
		280	// Expanded: the label is in flow; only the clipped remainder is
		281	// missing from the content sum.
		282	needed += Math.max(0, textWidth - label.clientWidth);
		283	}
		284	}
		285	setOverflows(compact ? needed > available - COMPACT_EXPAND_HYSTERESIS_PX : needed > available);
		286	}, []);
		287
		288	// Label widths can change without the strip box moving (font family or
		289	// size preferences), so re-measure on every render as well as on resize
		290	// and font loads.
		291	useEffect(() => {
		292	measure();
		293	});
		294
		295	useEffect(() => {
		296	if (!element) return;
		297	const observer = new ResizeObserver(measure);
		298	observer.observe(element);
		299	document.fonts.addEventListener("loadingdone", measure);
		300	return () => {
		301	observer.disconnect();
		302	document.fonts.removeEventListener("loadingdone", measure);
		303	};
		304	}, [element, measure]);
		305
		306	return overflows;
		307	}
		308
217	export const BranchToolbar = memo(function BranchToolbar({	309	export const BranchToolbar = memo(function BranchToolbar({
218	environmentId,	310	environmentId,
219	threadId,	311	threadId,
...	@@ -300,11 +392,17 @@ export const BranchToolbar = memo(function BranchToolbar({	...	@@ -300,11 +392,17 @@ export const BranchToolbar = memo(function BranchToolbar({
300	canPickEnvironment: showEnvironmentPicker,	392	canPickEnvironment: showEnvironmentPicker,
301	});	393	});
302	const isMobile = useIsMobile();	394	const isMobile = useIsMobile();
		395	const [stripElement, setStripElement] = useState<HTMLDivElement \| null>(null);
		396	const labelsOverflow = useLabelsOverflow(stripElement);
303		397
304	if (!hasActiveThread \|\| !activeProject) return null;	398	if (!hasActiveThread \|\| !activeProject) return null;
305		399
306	return (	400	return (
307	<div className="chat-composer-context-strip -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 ps-1 pe-2 pt-5 pb-1">	401	<div
		402	ref={setStripElement}
		403	data-compact={labelsOverflow ? "" : undefined}
		404	className="chat-composer-context-strip group/composer-context -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 ps-1 pe-2 pt-5 pb-1"
		405	>
308	{isMobile ? (	406	{isMobile ? (
309	<MobileRunContextSelector	407	<MobileRunContextSelector
310	envLocked={envLocked}	408	envLocked={envLocked}

apps/web/src/components/BranchToolbarBranchSelector.tsx+6-1

 @@ -749,7 +749,12 @@ export function BranchToolbarBranchSelector({
             disabled={isInitialBranchesLoadPending || isBranchActionPending}
           >
             <GitBranchIcon className="size-3 shrink-0 opacity-70" />
-            <span className="min-w-0 max-w-[240px] truncate">{triggerLabel}</span>
+            <span
+              data-composer-label
+              className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+            >
+              {triggerLabel}
+            </span>
             <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
           </ComboboxTrigger>
         </span>

apps/web/src/components/BranchToolbarEnvModeSelector.tsx+7-2

 @@ -82,7 +82,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
       <SelectTrigger
         variant="ghost"
         size="xs"
-        className="shrink-0 font-medium"
+        className="min-w-0 shrink font-medium"
         aria-label="Workspace"
       >
         {effectiveEnvMode === "worktree" ? (
 @@ -92,7 +92,12 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
         ) : (
           <FolderIcon className="size-3" />
         )}
-        <SelectValue />
+        <span
+          data-composer-label
+          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+        >
+          <SelectValue />
+        </span>
       </SelectTrigger>
       <SelectPopup>
         <SelectGroup>

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx+12-2

 @@ -49,7 +49,12 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         ) : (
           <CloudIcon className="size-3 shrink-0" />
         )}
-        <span className="truncate">{activeEnvironment?.label ?? "Run on"}</span>
+        <span
+          data-composer-label
+          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+        >
+          {activeEnvironment?.label ?? "Run on"}
+        </span>
       </span>
     );
   }
 @@ -72,7 +77,12 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         ) : (
           <CloudIcon className="size-3 shrink-0" />
         )}
-        <SelectValue />
+        <span
+          data-composer-label
+          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+        >
+          <SelectValue />
+        </span>
       </SelectTrigger>
       <SelectPopup>
         <SelectGroup>

apps/web/src/components/ComposerPromptEditor.tsx+5-3

 @@ -1747,12 +1747,14 @@ function ComposerPromptEditorInner({
   return (
     <ComposerTerminalContextActionsContext value={terminalContextActions}>
-      <div className="relative">
+      <div className="composer-editor-surface relative">
         <PlainTextPlugin
           contentEditable={
             <ContentEditable
               className={cn(
-                "block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent text-[16px] leading-relaxed text-foreground focus:outline-none sm:text-[14px]",
+                // The size comes from .composer-editor-surface so Settings -> Appearance
+                // can drive it; keep everything else here.
+                "block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent leading-relaxed text-foreground focus:outline-none",
                 className,
               )}
               data-testid="composer-editor"
 @@ -1763,7 +1765,7 @@ function ComposerPromptEditorInner({
           }
           placeholder={
             terminalContexts.length > 0 ? null : (
-              <div className="pointer-events-none absolute inset-0 text-[16px] leading-relaxed text-muted-foreground/35 sm:text-[14px]">
+              <div className="pointer-events-none absolute inset-0 leading-relaxed text-muted-foreground/35">
                 {placeholder}
               </div>
             )

apps/web/src/components/SidebarV2.tsx+3-1

 @@ -757,7 +757,9 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
         type="button"
         onClick={handlePrClick}
         className={cn(
-          "shrink-0 font-mono text-xs hover:underline",
+          // Sidebar chrome follows the interface font; tabular digits keep the
+          // number from reflowing as PR states stream in.
+          "shrink-0 text-xs tabular-nums hover:underline",
           variant === "slim" && variantAction === "unsettle"
             ? props.isActive
               ? "text-muted-foreground/70"

apps/web/src/components/ThreadTerminalDrawer.tsx+31-1

 @@ -56,6 +56,7 @@ import {
   type ThreadTerminalGroup,
 } from "../types";
 import { readLocalApi } from "~/localApi";
+import { useClientSettings } from "../hooks/useSettings";
 import { useAttachedTerminalSession } from "../state/terminalSessions";
 import { serverEnvironment } from "../state/server";
 import { previewEnvironment } from "../state/preview";
 @@ -131,7 +132,13 @@ function normalizeComputedColor(value: string | null | undefined, fallback: stri
   return value ?? fallback;
 }
-function terminalThemeFromApp(mountElement?: HTMLElement | null): GhosttyTheme {
+/** The surface treats an omitted family or size as "use the built-in default". */
+function terminalFontOptions(family: string, size: number): { family?: string; size: number } {
+  const trimmed = family.trim();
+  return trimmed.length > 0 ? { family: trimmed, size } : { size };
+}
+export function terminalThemeFromApp(mountElement?: HTMLElement | null): GhosttyTheme {
   const isDark = document.documentElement.classList.contains("dark");
   const fallbackBackground = isDark ? "rgb(14, 18, 24)" : "rgb(255, 255, 255)";
   const fallbackForeground = isDark ? "rgb(237, 241, 247)" : "rgb(28, 33, 41)";
 @@ -305,6 +312,13 @@ export function TerminalViewport({
     onAddTerminalContext(selection);
   });
   const readTerminalLabel = useEffectEvent(() => terminalLabel);
+  // The terminal inherits the monospace (code) preference unless it has an
+  // override of its own, so one font choice drives every mono surface.
+  const terminalFontFamily = useClientSettings(
+    (settings) => settings.fontFamilyTerminal.trim() || settings.fontFamilyCode,
+  );
+  const terminalFontSize = useClientSettings((settings) => settings.fontSizeTerminal);
+  const terminalFontRef = useRef({ family: terminalFontFamily, size: terminalFontSize });
   const terminalSession = useAttachedTerminalSession({
     environmentId,
     terminal: {
 @@ -367,6 +381,13 @@ export function TerminalViewport({
     keybindingsRef.current = keybindings;
   }, [keybindings]);
+  useEffect(() => {
+    const current = terminalFontRef.current;
+    if (current.family === terminalFontFamily && current.size === terminalFontSize) return;
+    terminalFontRef.current = { family: terminalFontFamily, size: terminalFontSize };
+    void terminalRef.current?.setFont(terminalFontOptions(terminalFontFamily, terminalFontSize));
+  }, [terminalFontFamily, terminalFontSize]);
   useEffect(() => {
     const mount = containerRef.current;
     if (!mount) return;
 @@ -378,8 +399,10 @@ export function TerminalViewport({
     let setupCleanups: Array<() => void> = [];
     const setup = async (): Promise<(() => void) | null> => {
+      const setupFont = terminalFontRef.current;
       const terminalOptions: GhosttyTerminalSurfaceOptions = {
         theme: terminalThemeFromApp(mount),
+        font: terminalFontOptions(setupFont.family, setupFont.size),
         onData: (data) => handleData(data),
         onResize: (cols, rows) => void resizeTerminal(cols, rows),
         onSelectionChange: () => handleSelectionChange(),
 @@ -397,6 +420,13 @@ export function TerminalViewport({
       terminal.setTheme(terminalThemeFromApp(mount));
       setupTerminal = terminal;
       terminalRef.current = terminal;
+      // Client settings hydrate asynchronously; a font preference that landed
+      // while the surface was loading found terminalRef null, so its setFont
+      // was dropped. Re-apply whatever is current once the terminal exists.
+      const currentFont = terminalFontRef.current;
+      if (currentFont.family !== setupFont.family || currentFont.size !== setupFont.size) {
+        void terminal.setFont(terminalFontOptions(currentFont.family, currentFont.size));
+      }
       const latestSession = latestSessionRef.current;
       previousSessionRef.current = latestSession;
       if (latestSession.buffer.length > 0) terminal.resetAndWrite(latestSession.buffer);

apps/web/src/components/composerInlineChip.ts+10-7

apps/web/src/components/settings/FontFamilyPicker.tsx created+254

...	@@ -0,0 +1,254 @@
1	import { LegendList, type LegendListRef } from "@legendapp/list/react";
2	import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
3	import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
4	import { isMonospaceFamily, queryInstalledFontFamilies } from "../../appearanceFonts";
5	import {
6	Combobox,
7	ComboboxEmpty,
8	ComboboxInput,
9	ComboboxItem,
10	ComboboxListVirtualized,
11	ComboboxPopup,
12	ComboboxTrigger,
13	} from "../ui/combobox";
14
15	const DEFAULT_FONT_VALUE = "__default__";
16
17	function supportsFontEnumeration(): boolean {
18	return (
19	typeof window !== "undefined" &&
20	typeof (window as { queryLocalFonts?: unknown }).queryLocalFonts === "function"
21	);
22	}
23
24	type FontEnumerationState =
25	\| { readonly status: "unknown" }
26	\| { readonly status: "granted"; readonly families: readonly string[] }
27	\| { readonly status: "unavailable" };
28
29	// Shared across every row: once one picker learns the fonts (or learns the
30	// permission is blocked), the others follow without re-querying — and the
31	// rows can swap to the plain-input control together.
32	let enumerationState: FontEnumerationState = supportsFontEnumeration()
33	? { status: "unknown" }
34	: { status: "unavailable" };
35	const enumerationListeners = new Set<() => void>();
36
37	function subscribeToEnumeration(listener: () => void): () => void {
38	enumerationListeners.add(listener);
39	return () => enumerationListeners.delete(listener);
40	}
41
42	function readEnumerationState(): FontEnumerationState {
43	return enumerationState;
44	}
45
46	let enumerationLoad: Promise<void> \| null = null;
47
48	/** Query installed fonts; call from a user gesture (the permission prompt needs one). */
49	export function discoverInstalledFonts(): void {
50	if (enumerationState.status !== "unknown" \|\| enumerationLoad !== null) return;
51	enumerationLoad = queryInstalledFontFamilies().then((result) => {
52	enumerationState =
53	result.status === "granted"
54	? { status: "granted", families: result.families }
55	: { status: "unavailable" };
56	enumerationLoad = null;
57	for (const listener of enumerationListeners) listener();
58	});
59	}
60
61	let grantedProbeStarted = false;
62
63	/**
64	* Discover eagerly when the permission is already granted, so the picker
65	* renders without waiting for a focus. Electron's default permission handler
66	* approves silently (it has no prompt UI), and a browser that granted once
67	* reports "granted" on later visits — in both, no user gesture is needed.
68	* "prompt" and "denied" states change nothing: the focus-driven flow stays,
69	* because raising the browser prompt still requires a gesture.
70	*/
71	function probeAlreadyGrantedPermission(): void {
72	if (grantedProbeStarted \|\| enumerationState.status !== "unknown") return;
73	grantedProbeStarted = true;
74	const permissions = typeof navigator !== "undefined" ? navigator.permissions : undefined;
75	if (typeof permissions?.query !== "function") return;
76	permissions.query({ name: "local-fonts" as PermissionName }).then(
77	(status) => {
78	if (status.state === "granted") discoverInstalledFonts();
79	},
80	() => {
81	// The engine does not recognize the permission name; keep the
82	// focus-driven flow.
83	},
84	);
85	}
86
87	/**
88	* Whether the engine can list installed fonts (Local Font Access API —
89	* Chromium and Electron). "unknown" until discovery resolves the permission;
90	* rows render a plain family-name input until the state is known granted,
91	* then upgrade to the picker. Where the permission is already granted,
92	* discovery starts at mount and the picker appears without a focus.
93	*/
94	export function useFontEnumeration(): FontEnumerationState {
95	useEffect(probeAlreadyGrantedPermission, []);
96	return useSyncExternalStore(subscribeToEnumeration, readEnumerationState);
97	}
98
99	/**
100	* A searchable picker over every installed family, the way native editors
101	* list system fonts. The trigger always names the font in use: the committed
102	* family, or what the default stack resolves to on this machine.
103	*/
104	export function FontFamilyPicker({
105	ariaLabel,
106	defaultFamily,
107	selectedFamily,
108	requireMonospace = false,
109	initialOpen = false,
110	onSelect,
111	}: {
112	ariaLabel: string;
113	/** What an unset preference renders as, e.g. "Menlo". */
114	defaultFamily: string;
115	/** Committed family name; empty string means the default is in use. */
116	selectedFamily: string;
117	requireMonospace?: boolean;
118	/** Open the popup on mount — set when the control upgrades under focus. */
119	initialOpen?: boolean;
120	onSelect: (family: string) => void;
121	}) {
122	const [open, setOpen] = useState(false);
123	const [query, setQuery] = useState("");
124	// Open after mount rather than mounting open: a popup that first renders in
125	// its open state never receives Base UI's entrance style baseline, so the
126	// exit transition on close has no style delta, never fires transitionend,
127	// and the popup lingers on screen forever.
128	useEffect(() => {
129	if (initialOpen) setOpen(true);
130	// The prop is only meaningful at mount - the control just swapped in
131	// under an active focus - so later changes are deliberately ignored.
132	// eslint-disable-next-line react-hooks/exhaustive-deps
133	}, []);
134	const listRef = useRef<LegendListRef \| null>(null);
135	const enumeration = useFontEnumeration();
136
137	const handleOpenChange = (nextOpen: boolean) => {
138	setOpen(nextOpen);
139	if (nextOpen) setQuery("");
140	};
141
142	const families = useMemo(() => {
143	if (enumeration.status !== "granted") return [];
144	return requireMonospace ? enumeration.families.filter(isMonospaceFamily) : enumeration.families;
145	}, [enumeration, requireMonospace]);
146
147	const items = useMemo(() => {
148	const trimmedQuery = query.trim().toLowerCase();
149	const result: string[] = [];
150	if (trimmedQuery.length === 0) result.push(DEFAULT_FONT_VALUE);
151	result.push(
152	...families.filter(
153	(family) => trimmedQuery.length === 0 \|\| family.toLowerCase().includes(trimmedQuery),
154	),
155	);
156	return result;
157	}, [query, families]);
158
159	const selectedValue = selectedFamily.length === 0 ? DEFAULT_FONT_VALUE : selectedFamily;
160
161	const handlePick = (value: string) => {
162	setOpen(false);
163	onSelect(value === DEFAULT_FONT_VALUE ? "" : value);
164	};
165
166	const renderItem = (item: string, index: number) => {
167	const isDefault = item === DEFAULT_FONT_VALUE;
168	const family = isDefault ? defaultFamily : item;
169	return (
170	<ComboboxItem hideIndicator index={index} key={item} value={item}>
171	<div className="flex w-full min-w-0 items-center justify-between gap-2">
172	<span className="min-w-0 truncate" style={{ fontFamily: family }}>
173	{family}
174	</span>
175	<span className="flex shrink-0 items-center gap-1.5">
176	{isDefault ? (
177	<span className="text-[10px] text-muted-foreground/60">default</span>
178	) : null}
179	{item === selectedValue ? (
180	<CheckIcon className="size-3.5 text-muted-foreground" />
181	) : null}
182	</span>
183	</div>
184	</ComboboxItem>
185	);
186	};
187
188	return (
189	<Combobox
190	items={items}
191	filteredItems={items}
192	autoHighlight
193	virtualized
194	open={open}
195	onOpenChange={handleOpenChange}
196	value={selectedValue}
197	onValueChange={(next) => {
198	if (typeof next === "string") handlePick(next);
199	}}
200	onItemHighlighted={(_value, eventDetails) => {
201	// Keyboard highlights must pull the virtualized row into view, or
202	// arrow keys walk past the rendered window and navigate blind.
203	if (!open \|\| eventDetails.index < 0 \|\| eventDetails.reason !== "keyboard") return;
204	void listRef.current?.scrollIndexIntoView?.({ index: eventDetails.index, animated: false });
205	}}
206	>
207	<ComboboxTrigger
208	aria-label={ariaLabel}
209	className="relative inline-flex min-h-9 w-full min-w-36 cursor-pointer select-none items-center justify-between gap-2 rounded-lg border border-input bg-background px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 sm:min-h-8 sm:text-sm dark:bg-input/32"
210	>
211	<span className="min-w-0 truncate">
212	{selectedFamily.length === 0 ? defaultFamily : selectedFamily}
213	</span>
214	<ChevronDownIcon className="-me-1 size-3 shrink-0 text-muted-foreground opacity-50" />
215	</ComboboxTrigger>
216	<ComboboxPopup align="end" className="flex w-72 flex-col">
217	<div className="shrink-0 px-3 pt-2.5">
218	<div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
219	<SearchIcon
220	aria-hidden="true"
221	className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
222	/>
223	<ComboboxInput
224	className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
225	inputClassName="rounded-none bg-transparent text-sm"
226	placeholder="Search fonts…"
227	showTrigger={false}
228	size="sm"
229	unstyled
230	value={query}
231	onChange={(event) => setQuery(event.target.value)}
232	/>
233	</div>
234	</div>
235	<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
236	<ComboboxEmpty>No fonts found.</ComboboxEmpty>
237	<div className="relative min-h-0 max-h-72 w-full flex-1 overflow-hidden">
238	<ComboboxListVirtualized className="size-full min-w-0 p-0">
239	<LegendList<string>
240	ref={listRef}
241	data={items}
242	keyExtractor={(item) => item}
243	renderItem={({ item, index }) => renderItem(item, index)}
244	estimatedItemSize={30}
245	drawDistance={360}
246	style={{ height: Math.min(items.length * 30, 288) }}
247	/>
248	</ComboboxListVirtualized>
249	</div>
250	</div>
251	</ComboboxPopup>
252	</Combobox>
253	);
254	}

apps/web/src/components/settings/SettingsFontPreviews.tsx created+232

...	@@ -0,0 +1,232 @@
1	import { preloadPatchFile } from "@pierre/diffs/ssr";
2	import { useCallback, useEffect, useRef, useState } from "react";
3	import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "../ComposerPromptEditor";
4	import { terminalThemeFromApp } from "../ThreadTerminalDrawer";
5	import { useTheme } from "../../hooks/useTheme";
6	import { resolveDiffThemeName, type DiffThemeName } from "../../lib/diffRendering";
7	import { GhosttyTerminalSurface } from "~/terminal/ghostty/surface";
8
9	// The font previews are the real surfaces, not lookalikes: the composer's
10	// Lexical editor, the diff panel's file diff, and the Ghostty canvas
11	// renderer. Each already consumes the appearance font tokens (or, for the
12	// terminal, the settings passed down as props), so what the row shows is
13	// exactly what the app renders.
14
15	const EMPTY_TERMINAL_CONTEXTS: ReadonlyArray<never> = [];
16	const EMPTY_SKILLS: ReadonlyArray<never> = [];
17
18	// Serialized the way the composer stores inline tokens: the $skill and the
19	// markdown-style file links render as chips, so the preview shows prompt
20	// text and pills exactly as the real composer draws them.
21	const PROMPT_PREVIEW_TEXT =
22	"Use $frontend-design to fix the flaky test in " +
23	"[surface.test.ts](apps/web/src/terminal/ghostty/surface.test.ts) and align the header with " +
24	"[SettingsPanels.tsx](apps/web/src/components/settings/SettingsPanels.tsx) before shipping.";
25
26	function noop() {}
27
28	/** A live composer editor: type in it to feel the family and size. */
29	export function PromptFontPreview() {
30	const editorRef = useRef<ComposerPromptEditorHandle>(null);
31	const [prompt, setPrompt] = useState(PROMPT_PREVIEW_TEXT);
32	const [cursor, setCursor] = useState(PROMPT_PREVIEW_TEXT.length);
33	const onChange = useCallback((nextValue: string, nextCursor: number) => {
34	setPrompt(nextValue);
35	setCursor(nextCursor);
36	}, []);
37	return (
38	<div className="mt-1 mb-2 rounded-lg border border-border bg-background px-3 py-2">
39	<ComposerPromptEditor
40	editorRef={editorRef}
41	value={prompt}
42	cursor={cursor}
43	terminalContexts={EMPTY_TERMINAL_CONTEXTS}
44	skills={EMPTY_SKILLS}
45	disabled={false}
46	placeholder="Ask for follow-up changes or attach images"
47	className="max-h-40 min-h-12"
48	onRemoveTerminalContext={noop}
49	onChange={onChange}
50	onPaste={noop}
51	/>
52	</div>
53	);
54	}
55
56	const DIFF_PREVIEW_PATCH = [
57	"diff --git a/src/formatUser.ts b/src/formatUser.ts",
58	"--- a/src/formatUser.ts",
59	"+++ b/src/formatUser.ts",
60	"@@ -1,3 +1,3 @@",
61	" export function formatUser(user: User) {",
62	"- return user.name.toUpperCase();",
63	"+ return `${user.name} <${user.email}>`; // 0O 1lI",
64	" }",
65	"",
66	].join("\n");
67
68	// Rendered once per theme through the SSR pipeline, which always awaits the
69	// shared highlighter before producing HTML. The interactive FileDiff's mount
70	// lifecycle can race that highlighter when the typography views remount it
71	// (toggling Advanced) and lock in an unhighlighted frame; a static preview
72	// needs none of that lifecycle, so it uses the deterministic renderer and
73	// injects the finished HTML into a shadow root, exactly as FileDiff would.
74	const diffPreviewHtmlByTheme = new Map<DiffThemeName, Promise<readonly string[]>>();
75
76	function loadDiffPreviewHtml(theme: DiffThemeName): Promise<readonly string[]> {
77	let promise = diffPreviewHtmlByTheme.get(theme);
78	if (promise === undefined) {
79	promise = preloadPatchFile({
80	patch: DIFF_PREVIEW_PATCH,
81	options: { diffStyle: "unified", theme },
82	}).then((results) => results.map((result) => result.prerenderedHTML));
83	diffPreviewHtmlByTheme.set(theme, promise);
84	}
85	return promise;
86	}
87
88	function StaticDiffHtml({ html }: { html: string }) {
89	const hostRef = useRef<HTMLDivElement \| null>(null);
90	useEffect(() => {
91	const host = hostRef.current;
92	if (host === null) return;
93	const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
94	shadow.innerHTML = html;
95	}, [html]);
96	return <div ref={hostRef} />;
97	}
98
99	/** The diff panel's file diff, statically rendered by its real pipeline. */
100	export function CodeFontPreview() {
101	const { resolvedTheme } = useTheme();
102	const themeName = resolveDiffThemeName(resolvedTheme);
103	const [htmlByFile, setHtmlByFile] = useState<readonly string[] \| null>(null);
104	useEffect(() => {
105	let cancelled = false;
106	void loadDiffPreviewHtml(themeName).then((html) => {
107	if (!cancelled) setHtmlByFile(html);
108	});
109	return () => {
110	cancelled = true;
111	};
112	}, [themeName]);
113	if (htmlByFile === null) return null;
114	return (
115	<div className="mt-1 mb-2 space-y-2">
116	{htmlByFile.map((html, index) => (
117	<StaticDiffHtml key={index} html={html} />
118	))}
119	</div>
120	);
121	}
122
123	const TERMINAL_PROMPT = "\x1b[2m$\x1b[0m ";
124	const TERMINAL_PREVIEW_TRANSCRIPT =
125	`${TERMINAL_PROMPT}npm run dev\r\n` +
126	"\x1b[32m✓\x1b[0m Ready in 430ms\r\n" +
127	"\x1b[2mLocal:\x1b[0m \x1b[36mhttp://localhost:3000\x1b[0m\r\n" +
128	TERMINAL_PROMPT;
129
130	/** The surface treats an omitted family or size as "use the built-in default". */
131	function previewTerminalFont(family: string, size: number): { family?: string; size: number } {
132	const trimmed = family.trim();
133	return trimmed.length > 0 ? { family: trimmed, size } : { size };
134	}
135
136	/**
137	* The real Ghostty canvas renderer against a local echo loop instead of a
138	* PTY: keys print, Enter starts a new prompt line, Backspace erases. That
139	* exercises the same glyph atlas, cell metrics, and monospace gate the
140	* terminal drawer uses.
141	*/
142	export function TerminalFontPreview({ family, size }: { family: string; size: number }) {
143	const mountRef = useRef<HTMLDivElement>(null);
144	const surfaceRef = useRef<GhosttyTerminalSurface \| null>(null);
145	const fontRef = useRef({ family, size });
146	const { resolvedTheme } = useTheme();
147
148	useEffect(() => {
149	const current = fontRef.current;
150	if (current.family === family && current.size === size) return;
151	fontRef.current = { family, size };
152	void surfaceRef.current?.setFont(previewTerminalFont(family, size));
153	}, [family, size]);
154
155	useEffect(() => {
156	const mount = mountRef.current;
157	const surface = surfaceRef.current;
158	if (!mount \|\| !surface) return;
159	surface.setTheme(terminalThemeFromApp(mount));
160	}, [resolvedTheme]);
161
162	useEffect(() => {
163	const mount = mountRef.current;
164	if (!mount) return;
165	let cancelled = false;
166	// Column of the caret on the current input line, so Backspace stops at
167	// the prompt instead of eating it.
168	let lineLength = 0;
169
170	const echo = (data: string) => {
171	const surface = surfaceRef.current;
172	if (!surface) return;
173	if (data === "\r") {
174	surface.write(`\r\n${TERMINAL_PROMPT}`);
175	lineLength = 0;
176	return;
177	}
178	if (data === "\x7f" \|\| data === "\b") {
179	if (lineLength > 0) {
180	surface.write("\b \b");
181	lineLength -= 1;
182	}
183	return;
184	}
185	// Arrow keys and other escape reports have no cursor to move here.
186	if (data.startsWith("\x1b")) return;
187	const printable = [...data]
188	.filter((character) => character >= " " && character !== "\x7f")
189	.join("");
190	if (printable.length === 0) return;
191	surface.write(printable);
192	lineLength += printable.length;
193	};
194
195	void GhosttyTerminalSurface.create(mount, {
196	theme: terminalThemeFromApp(mount),
197	font: previewTerminalFont(fontRef.current.family, fontRef.current.size),
198	onData: echo,
199	onResize: noop,
200	onSelectionChange: noop,
201	onCopy: (text) => void navigator.clipboard?.writeText(text).catch(noop),
202	// Tab keeps walking the settings page instead of feeding the echo loop.
203	beforeKey: (event) => event.key !== "Tab",
204	onLinkActivate: noop,
205	}).then((surface) => {
206	if (cancelled) {
207	surface.dispose();
208	return;
209	}
210	surfaceRef.current = surface;
211	// The theme and font may both have changed while the WASM surface loaded.
212	surface.setTheme(terminalThemeFromApp(mount));
213	const font = fontRef.current;
214	void surface.setFont(previewTerminalFont(font.family, font.size));
215	surface.write(TERMINAL_PREVIEW_TRANSCRIPT);
216	});
217
218	return () => {
219	cancelled = true;
220	surfaceRef.current?.dispose();
221	surfaceRef.current = null;
222	};
223	}, []);
224
225	return (
226	<div
227	ref={mountRef}
228	className="relative mt-1 mb-2 h-36 overflow-hidden rounded-lg border border-border"
229	aria-label="Terminal font preview"
230	/>
231	);
232	}

apps/web/src/components/settings/SettingsPanels.tsx+506-28

...	@@ -8,8 +8,8 @@ import {	...	@@ -8,8 +8,8 @@ import {
8	SettingsIcon,	8	SettingsIcon,
9	} from "lucide-react";	9	} from "lucide-react";
10	import { Link } from "@tanstack/react-router";	10	import { Link } from "@tanstack/react-router";
11	import type { CSSProperties } from "react";	11	import type { CSSProperties, ReactNode } from "react";
12	import { useCallback, useMemo, useRef, useState } from "react";	12	import { useCallback, useEffect, useMemo, useRef, useState } from "react";
13	import { useAtomValue } from "@effect/atom-react";	13	import { useAtomValue } from "@effect/atom-react";
14	import {	14	import {
15	defaultInstanceIdForDriver,	15	defaultInstanceIdForDriver,
...	@@ -34,8 +34,16 @@ import {	...	@@ -34,8 +34,16 @@ import {
34	DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE,	34	DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE,
35	DEFAULT_UNIFIED_SETTINGS,	35	DEFAULT_UNIFIED_SETTINGS,
36	type EnvironmentIdentificationMode,	36	type EnvironmentIdentificationMode,
		37	MAX_CODE_FONT_SIZE,
37	MAX_GLASS_OPACITY,	38	MAX_GLASS_OPACITY,
		39	MAX_INTERFACE_FONT_SIZE,
		40	MAX_PROMPT_FONT_SIZE,
		41	MAX_TERMINAL_FONT_SIZE,
		42	MIN_CODE_FONT_SIZE,
38	MIN_GLASS_OPACITY,	43	MIN_GLASS_OPACITY,
		44	MIN_INTERFACE_FONT_SIZE,
		45	MIN_PROMPT_FONT_SIZE,
		46	MIN_TERMINAL_FONT_SIZE,
39	} from "@t3tools/contracts/settings";	47	} from "@t3tools/contracts/settings";
40	import {	48	import {
41	getBackgroundActivityBaseProfile,	49	getBackgroundActivityBaseProfile,
...	@@ -47,6 +55,7 @@ import * as Arr from "effect/Array";	...	@@ -47,6 +55,7 @@ import * as Arr from "effect/Array";
47	import * as Duration from "effect/Duration";	55	import * as Duration from "effect/Duration";
48	import * as Equal from "effect/Equal";	56	import * as Equal from "effect/Equal";
49	import * as Result from "effect/Result";	57	import * as Result from "effect/Result";
		58	import * as Schema from "effect/Schema";
50	import { APP_VERSION, HOSTED_APP_CHANNEL, HOSTED_APP_CHANNEL_LABEL } from "../../branding";	59	import { APP_VERSION, HOSTED_APP_CHANNEL, HOSTED_APP_CHANNEL_LABEL } from "../../branding";
51	import {	60	import {
52	canCheckForUpdate,	61	canCheckForUpdate,
...	@@ -64,6 +73,7 @@ import {	...	@@ -64,6 +73,7 @@ import {
64	import { isElectron } from "../../env";	73	import { isElectron } from "../../env";
65	import { buildHostedChannelSelectionUrl, type HostedAppChannel } from "../../hostedPairing";	74	import { buildHostedChannelSelectionUrl, type HostedAppChannel } from "../../hostedPairing";
66	import { useTheme } from "../../hooks/useTheme";	75	import { useTheme } from "../../hooks/useTheme";
		76	import { useLocalStorage } from "../../hooks/useLocalStorage";
67	import { usePrimarySettings, useUpdatePrimarySettings } from "../../hooks/useSettings";	77	import { usePrimarySettings, useUpdatePrimarySettings } from "../../hooks/useSettings";
68	import { useThreadActions } from "../../hooks/useThreadActions";	78	import { useThreadActions } from "../../hooks/useThreadActions";
69	import { useDesktopUpdateState } from "../../state/desktopUpdate";	79	import { useDesktopUpdateState } from "../../state/desktopUpdate";
...	@@ -77,6 +87,7 @@ import {	...	@@ -77,6 +87,7 @@ import {
77	sortProviderInstanceEntries,	87	sortProviderInstanceEntries,
78	} from "../../providerInstances";	88	} from "../../providerInstances";
79	import { ensureLocalApi, readLocalApi } from "../../localApi";	89	import { ensureLocalApi, readLocalApi } from "../../localApi";
		90	import { isMacPlatform } from "../../lib/utils";
80	import {	91	import {
81	primaryServerObservabilityAtom,	92	primaryServerObservabilityAtom,
82	primaryServerProvidersAtom,	93	primaryServerProvidersAtom,
...	@@ -97,6 +108,17 @@ import {	...	@@ -97,6 +108,17 @@ import {
97	DialogTitle,	108	DialogTitle,
98	} from "../ui/dialog";	109	} from "../ui/dialog";
99	import { DraftInput } from "../ui/draft-input";	110	import { DraftInput } from "../ui/draft-input";
		111	import { Input } from "../ui/input";
		112	import {
		113	DEFAULT_CODE_FONT_STACK,
		114	DEFAULT_SANS_FONT_STACK,
		115	isFontFamilyAvailable,
		116	isMonospaceFamily,
		117	resolveDefaultFamilyLabel,
		118	} from "../../appearanceFonts";
		119	import { DEFAULT_TERMINAL_FONT_FAMILY } from "~/terminal/ghostty/surface";
		120	import { CodeFontPreview, PromptFontPreview, TerminalFontPreview } from "./SettingsFontPreviews";
		121	import { discoverInstalledFonts, FontFamilyPicker, useFontEnumeration } from "./FontFamilyPicker";
100	import {	122	import {
101	NumberField,	123	NumberField,
102	NumberFieldDecrement,	124	NumberFieldDecrement,
...	@@ -135,6 +157,7 @@ import {	...	@@ -135,6 +157,7 @@ import {
135	SettingsRow,	157	SettingsRow,
136	SettingsSection,	158	SettingsSection,
137	useRelativeTimeTick,	159	useRelativeTimeTick,
		160	useSettingsSearchTargetId,
138	} from "./settingsLayout";	161	} from "./settingsLayout";
139	import { searchableSetting } from "./settingsSearch";	162	import { searchableSetting } from "./settingsSearch";
140	import { ProjectFavicon } from "../ProjectFavicon";	163	import { ProjectFavicon } from "../ProjectFavicon";
...	@@ -586,6 +609,16 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -586,6 +609,16 @@ export function useSettingsRestore(onRestored?: () => void) {
586	? ["Project Grouping"]	609	? ["Project Grouping"]
587	: []),	610	: []),
588	...(settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? ["Word wrap"] : []),	611	...(settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? ["Word wrap"] : []),
		612	...(settings.fontFamilySans !== DEFAULT_UNIFIED_SETTINGS.fontFamilySans
		613	? ["Interface font"]
		614	: []),
		615	...(settings.fontFamilyComposer !== DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer
		616	? ["Prompt font"]
		617	: []),
		618	...(settings.fontFamilyCode !== DEFAULT_UNIFIED_SETTINGS.fontFamilyCode ? ["Code font"] : []),
		619	...(settings.fontFamilyTerminal !== DEFAULT_UNIFIED_SETTINGS.fontFamilyTerminal
		620	? ["Terminal font"]
		621	: []),
589	...(settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace	622	...(settings.diffIgnoreWhitespace !== DEFAULT_UNIFIED_SETTINGS.diffIgnoreWhitespace
590	? ["Diff whitespace changes"]	623	? ["Diff whitespace changes"]
591	: []),	624	: []),
...	@@ -629,6 +662,14 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -629,6 +662,14 @@ export function useSettingsRestore(onRestored?: () => void) {
629	settings.newWorktreesStartFromOrigin,	662	settings.newWorktreesStartFromOrigin,
630	settings.diffIgnoreWhitespace,	663	settings.diffIgnoreWhitespace,
631	settings.environmentIdentificationMode,	664	settings.environmentIdentificationMode,
		665	settings.fontFamilyCode,
		666	settings.fontFamilyComposer,
		667	settings.fontFamilySans,
		668	settings.fontFamilyTerminal,
		669	settings.fontSizeCode,
		670	settings.fontSizeInterface,
		671	settings.fontSizePrompt,
		672	settings.fontSizeTerminal,
632	settings.glassOpacity,	673	settings.glassOpacity,
633	settings.enableAssistantStreaming,	674	settings.enableAssistantStreaming,
634	settings.enableProviderUpdateChecks,	675	settings.enableProviderUpdateChecks,
...	@@ -672,6 +713,10 @@ export function useSettingsRestore(onRestored?: () => void) {	...	@@ -672,6 +713,10 @@ export function useSettingsRestore(onRestored?: () => void) {
672	confirmThreadArchive: DEFAULT_UNIFIED_SETTINGS.confirmThreadArchive,	713	confirmThreadArchive: DEFAULT_UNIFIED_SETTINGS.confirmThreadArchive,
673	confirmThreadDelete: DEFAULT_UNIFIED_SETTINGS.confirmThreadDelete,	714	confirmThreadDelete: DEFAULT_UNIFIED_SETTINGS.confirmThreadDelete,
674	textGenerationModelSelection: DEFAULT_UNIFIED_SETTINGS.textGenerationModelSelection,	715	textGenerationModelSelection: DEFAULT_UNIFIED_SETTINGS.textGenerationModelSelection,
		716	fontFamilySans: DEFAULT_UNIFIED_SETTINGS.fontFamilySans,
		717	fontFamilyComposer: DEFAULT_UNIFIED_SETTINGS.fontFamilyComposer,
		718	fontFamilyCode: DEFAULT_UNIFIED_SETTINGS.fontFamilyCode,
		719	fontFamilyTerminal: DEFAULT_UNIFIED_SETTINGS.fontFamilyTerminal,
675	});	720	});
676	onRestored?.();	721	onRestored?.();
677	}, [changedSettingLabels, onRestored, setTheme, updateSettings]);	722	}, [changedSettingLabels, onRestored, setTheme, updateSettings]);
...	@@ -958,8 +1003,8 @@ export function AppearanceSettingsPanel() {	...	@@ -958,8 +1003,8 @@ export function AppearanceSettingsPanel() {
958	const glassOpacityRatio =	1003	const glassOpacityRatio =
959	(settings.glassOpacity - MIN_GLASS_OPACITY) / (MAX_GLASS_OPACITY - MIN_GLASS_OPACITY);	1004	(settings.glassOpacity - MIN_GLASS_OPACITY) / (MAX_GLASS_OPACITY - MIN_GLASS_OPACITY);
960	const glassOpacitySliderStyle = {	1005	const glassOpacitySliderStyle = {
961	"--glass-slider-progress": `${glassOpacityRatio * 100}%`,	1006	"--settings-slider-progress": `${glassOpacityRatio * 100}%`,
962	"--glass-slider-fill-offset": `${0.5 - glassOpacityRatio}rem`,	1007	"--settings-slider-fill-offset": `${0.5 - glassOpacityRatio}rem`,
963	} as CSSProperties;	1008	} as CSSProperties;
964		1009
965	return (	1010	return (
...	@@ -1021,7 +1066,7 @@ export function AppearanceSettingsPanel() {	...	@@ -1021,7 +1066,7 @@ export function AppearanceSettingsPanel() {
1021	</output>	1066	</output>
1022	<input	1067	<input
1023	aria-label="Glass opacity"	1068	aria-label="Glass opacity"
1024	className="glass-opacity-slider min-w-0 flex-1"	1069	className="settings-slider min-w-0 flex-1"
1025	id="glass-opacity"	1070	id="glass-opacity"
1026	max={MAX_GLASS_OPACITY}	1071	max={MAX_GLASS_OPACITY}
1027	min={MIN_GLASS_OPACITY}	1072	min={MIN_GLASS_OPACITY}
...	@@ -1085,32 +1130,465 @@ export function AppearanceSettingsPanel() {	...	@@ -1085,32 +1130,465 @@ export function AppearanceSettingsPanel() {
1085	}	1130	}
1086	/>	1131	/>
1087	) : null}	1132	) : null}
		1133	</SettingsSection>
1088		1134
1089	<SettingsRow	1135	<TypographySection />
1090	{...searchableSetting("word-wrap")}	1136	</SettingsPageContainer>
1091	description="Wrap long lines in code blocks, tables, diffs, and file previews by default."	1137	);
1092	resetAction={	1138	}
1093	settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? (	1139
1094	<SettingResetButton	1140	function useFontDefaultFamilies() {
1095	label="word wrapping"	1141	const settings = usePrimarySettings();
1096	onClick={() =>	1142	// An unset preference shows the font it resolves to on this machine; the
1097	updateSettings({	1143	// default stacks are the platform's own faces, so the name is probed, not
1098	wordWrap: DEFAULT_UNIFIED_SETTINGS.wordWrap,	1144	// hardcoded.
1099	})	1145	const defaults = useMemo(
1100	}	1146	() => ({
1101	/>	1147	sans: resolveDefaultFamilyLabel(DEFAULT_SANS_FONT_STACK) ?? "System default",
1102	) : null	1148	code: resolveDefaultFamilyLabel(DEFAULT_CODE_FONT_STACK) ?? "System monospace",
1103	}	1149	}),
1104	control={	1150	[],
1105	<Switch	1151	);
1106	checked={settings.wordWrap}	1152	return {
1107	onCheckedChange={(checked) => updateSettings({ wordWrap: Boolean(checked) })}	1153	sans: defaults.sans,
1108	aria-label="Wrap code, tables, diffs, and file previews by default"	1154	code: defaults.code,
		1155	// The composer inherits whatever the interface preference resolves to;
		1156	// the terminal inherits the monospace preference the same way.
		1157	interfaceFamily: settings.fontFamilySans.trim() \|\| defaults.sans,
		1158	monoFamily: settings.fontFamilyCode.trim() \|\| defaults.code,
		1159	};
		1160	}
		1161
		1162	function InterfaceFontRow({ preview }: { preview?: ReactNode }) {
		1163	const settings = usePrimarySettings();
		1164	const updateSettings = useUpdatePrimarySettings();
		1165	const defaults = useFontDefaultFamilies();
		1166	return (
		1167	<FontFamilySettingsRow
		1168	{...searchableSetting("interface-font")}
		1169	description="Everything outside code blocks and the terminal."
		1170	defaultFamily={defaults.sans}
		1171	value={settings.fontFamilySans}
		1172	onValueChange={(fontFamilySans) => updateSettings({ fontFamilySans })}
		1173	size={{
		1174	label: "Interface font size",
		1175	min: MIN_INTERFACE_FONT_SIZE,
		1176	max: MAX_INTERFACE_FONT_SIZE,
		1177	value: settings.fontSizeInterface,
		1178	onChange: (fontSizeInterface) => updateSettings({ fontSizeInterface }),
		1179	}}
		1180	{...(preview !== undefined ? { preview } : {})}
		1181	/>
		1182	);
		1183	}
		1184
		1185	function PromptFontRow() {
		1186	const settings = usePrimarySettings();
		1187	const updateSettings = useUpdatePrimarySettings();
		1188	const defaults = useFontDefaultFamilies();
		1189	return (
		1190	<FontFamilySettingsRow
		1191	{...searchableSetting("prompt-font")}
		1192	description="Only the box you write prompts in. Mono works well here."
		1193	defaultFamily={defaults.interfaceFamily}
		1194	value={settings.fontFamilyComposer}
		1195	onValueChange={(fontFamilyComposer) => updateSettings({ fontFamilyComposer })}
		1196	size={{
		1197	label: "Prompt font size",
		1198	min: MIN_PROMPT_FONT_SIZE,
		1199	max: MAX_PROMPT_FONT_SIZE,
		1200	value: settings.fontSizePrompt,
		1201	onChange: (fontSizePrompt) => updateSettings({ fontSizePrompt }),
		1202	}}
		1203	preview={<PromptFontPreview />}
		1204	/>
		1205	);
		1206	}
		1207
		1208	function CodeFontRow({
		1209	title,
		1210	description = "Code blocks, diffs, and file previews.",
		1211	preview,
		1212	}: {
		1213	title?: string;
		1214	description?: string;
		1215	preview?: ReactNode;
		1216	}) {
		1217	const settings = usePrimarySettings();
		1218	const updateSettings = useUpdatePrimarySettings();
		1219	const defaults = useFontDefaultFamilies();
		1220	return (
		1221	<FontFamilySettingsRow
		1222	{...searchableSetting("code-font")}
		1223	{...(title !== undefined ? { title } : {})}
		1224	description={description}
		1225	defaultFamily={defaults.code}
		1226	value={settings.fontFamilyCode}
		1227	onValueChange={(fontFamilyCode) => updateSettings({ fontFamilyCode })}
		1228	requireMonospace
		1229	size={{
		1230	label: "Code font size",
		1231	min: MIN_CODE_FONT_SIZE,
		1232	max: MAX_CODE_FONT_SIZE,
		1233	value: settings.fontSizeCode,
		1234	onChange: (fontSizeCode) => updateSettings({ fontSizeCode }),
		1235	}}
		1236	preview={preview ?? <CodeFontPreview />}
		1237	/>
		1238	);
		1239	}
		1240
		1241	function TerminalFontRow() {
		1242	const settings = usePrimarySettings();
		1243	const updateSettings = useUpdatePrimarySettings();
		1244	const defaults = useFontDefaultFamilies();
		1245	return (
		1246	<FontFamilySettingsRow
		1247	{...searchableSetting("terminal-font")}
		1248	description="Terminal output. Follows the monospace font unless set."
		1249	defaultFamily={defaults.monoFamily}
		1250	value={settings.fontFamilyTerminal}
		1251	onValueChange={(fontFamilyTerminal) => updateSettings({ fontFamilyTerminal })}
		1252	requireMonospace
		1253	size={{
		1254	label: "Terminal font size",
		1255	min: MIN_TERMINAL_FONT_SIZE,
		1256	max: MAX_TERMINAL_FONT_SIZE,
		1257	value: settings.fontSizeTerminal,
		1258	onChange: (fontSizeTerminal) => updateSettings({ fontSizeTerminal }),
		1259	}}
		1260	preview={
		1261	<TerminalFontPreview
		1262	family={settings.fontFamilyTerminal.trim() \|\| settings.fontFamilyCode}
		1263	size={settings.fontSizeTerminal}
		1264	/>
		1265	}
		1266	/>
		1267	);
		1268	}
		1269
		1270	function FontSmoothingRow() {
		1271	const settings = usePrimarySettings();
		1272	const updateSettings = useUpdatePrimarySettings();
		1273	if (!isMacPlatform(navigator.platform)) return null;
		1274	return (
		1275	<SettingsRow
		1276	{...searchableSetting("font-smoothing")}
		1277	description="Render text with thinner grayscale anti-aliasing instead of macOS's heavier default."
		1278	resetAction={
		1279	settings.fontSmoothing !== DEFAULT_UNIFIED_SETTINGS.fontSmoothing ? (
		1280	<SettingResetButton
		1281	label="font smoothing"
		1282	onClick={() =>
		1283	updateSettings({ fontSmoothing: DEFAULT_UNIFIED_SETTINGS.fontSmoothing })
		1284	}
		1285	/>
		1286	) : null
		1287	}
		1288	control={
		1289	<Switch
		1290	checked={settings.fontSmoothing}
		1291	onCheckedChange={(checked) => updateSettings({ fontSmoothing: Boolean(checked) })}
		1292	aria-label="Font smoothing"
		1293	/>
		1294	}
		1295	/>
		1296	);
		1297	}
		1298
		1299	function WordWrapRow() {
		1300	const settings = usePrimarySettings();
		1301	const updateSettings = useUpdatePrimarySettings();
		1302	return (
		1303	<SettingsRow
		1304	{...searchableSetting("word-wrap")}
		1305	description="Wrap long lines in code blocks, tables, diffs, and file previews by default."
		1306	resetAction={
		1307	settings.wordWrap !== DEFAULT_UNIFIED_SETTINGS.wordWrap ? (
		1308	<SettingResetButton
		1309	label="word wrapping"
		1310	onClick={() => updateSettings({ wordWrap: DEFAULT_UNIFIED_SETTINGS.wordWrap })}
		1311	/>
		1312	) : null
		1313	}
		1314	control={
		1315	<Switch
		1316	checked={settings.wordWrap}
		1317	onCheckedChange={(checked) => updateSettings({ wordWrap: Boolean(checked) })}
		1318	aria-label="Wrap code, tables, diffs, and file previews by default"
		1319	/>
		1320	}
		1321	/>
		1322	);
		1323	}
		1324
		1325	function FontSettingsGroup() {
		1326	return (
		1327	<>
		1328	<InterfaceFontRow />
		1329	<PromptFontRow />
		1330	<CodeFontRow />
		1331	<TerminalFontRow />
		1332	<FontSmoothingRow />
		1333	</>
		1334	);
		1335	}
		1336
		1337	/**
		1338	* The two-font view: one sans, one monospace. The prompt follows the
		1339	* interface font and the terminal follows the monospace font, so the demos
		1340	* under each row show every surface the choice reaches.
		1341	*/
		1342	function SimpleFontRows() {
		1343	const settings = usePrimarySettings();
		1344	return (
		1345	<>
		1346	<InterfaceFontRow preview={<PromptFontPreview />} />
		1347	<CodeFontRow
		1348	title="Monospace font"
		1349	description="Code blocks, diffs, file previews, and the terminal."
		1350	preview={
		1351	<>
		1352	<CodeFontPreview />
		1353	<TerminalFontPreview
		1354	family={settings.fontFamilyTerminal.trim() \|\| settings.fontFamilyCode}
		1355	size={settings.fontSizeTerminal}
1109	/>	1356	/>
		1357	</>
		1358	}
		1359	/>
		1360	</>
		1361	);
		1362	}
		1363
		1364	// Font smoothing only renders on macOS, so a search jump to it elsewhere
		1365	// must not flip the section - the target would never mount to be scrolled to.
		1366	const ADVANCED_TYPOGRAPHY_TARGET_IDS: ReadonlySet<string> = new Set([
		1367	"prompt-font",
		1368	"terminal-font",
		1369	...(typeof navigator !== "undefined" && isMacPlatform(navigator.platform)
		1370	? ["font-smoothing"]
		1371	: []),
		1372	]);
		1373
		1374	const TYPOGRAPHY_ADVANCED_KEY = "t3code:typography-advanced";
		1375
		1376	/**
		1377	* The two-font view by default - one sans, one monospace, each cascading to
		1378	* every surface it reaches - with an Advanced switch in the section header
		1379	* that reveals the per-surface override rows. The choice persists locally,
		1380	* and a settings-search jump to an override row flips Advanced on so the
		1381	* target exists to scroll to.
		1382	*/
		1383	function TypographySection() {
		1384	const [advanced, setAdvanced] = useLocalStorage(TYPOGRAPHY_ADVANCED_KEY, false, Schema.Boolean);
		1385	const searchTargetId = useSettingsSearchTargetId();
		1386	// Flip Advanced on once per search jump so the hidden target can mount and
		1387	// scroll; tracking the handled id lets the user turn it back off without
		1388	// the still-set target immediately re-expanding the section.
		1389	const lastExpandedTargetRef = useRef<string \| null>(null);
		1390	useEffect(() => {
		1391	if (searchTargetId === null \|\| !ADVANCED_TYPOGRAPHY_TARGET_IDS.has(searchTargetId)) return;
		1392	if (lastExpandedTargetRef.current === searchTargetId) return;
		1393	lastExpandedTargetRef.current = searchTargetId;
		1394	setAdvanced(true);
		1395	}, [searchTargetId, setAdvanced]);
		1396	return (
		1397	<SettingsSection
		1398	title="Typography"
		1399	headerAction={
		1400	<label className="flex cursor-pointer items-center gap-2 text-xs font-medium text-muted-foreground">
		1401	Advanced
		1402	<Switch
		1403	checked={advanced}
		1404	onCheckedChange={(checked) => setAdvanced(Boolean(checked))}
		1405	aria-label="Show advanced typography settings"
		1406	/>
		1407	</label>
		1408	}
		1409	>
		1410	{advanced ? <FontSettingsGroup /> : <SimpleFontRows />}
		1411	<WordWrapRow />
		1412	</SettingsSection>
		1413	);
		1414	}
		1415
		1416	function FontFamilySettingsRow({
		1417	id,
		1418	title,
		1419	description,
		1420	defaultFamily,
		1421	preview,
		1422	value,
		1423	onValueChange,
		1424	requireMonospace = false,
		1425	size,
		1426	}: {
		1427	id?: string;
		1428	title: string;
		1429	description: string;
		1430	/** What an unset preference renders as, e.g. "Menlo". */
		1431	defaultFamily: string;
		1432	preview?: ReactNode;
		1433	value: string;
		1434	onValueChange: (value: string) => void;
		1435	requireMonospace?: boolean;
		1436	size: { label: string; min: number; max: number; value: number; onChange: (v: number) => void };
		1437	}) {
		1438	const trimmed = value.trim();
		1439	// The fallback input edits a draft; the preference only commits once typing
		1440	// pauses and the text probes as an available font (or is an explicit
		1441	// clear), so the current font holds and nothing reflows mid-word.
		1442	const [draft, setDraft] = useState(value);
		1443	const [draftSettled, setDraftSettled] = useState(true);
		1444	const commitTimerRef = useRef<number \| null>(null);
		1445	const lastValueRef = useRef(value);
		1446	if (lastValueRef.current !== value) {
		1447	// The committed value changed externally (hydration, reset, picker
		1448	// selection); adopt it and drop any pending commit of a stale draft.
		1449	lastValueRef.current = value;
		1450	if (commitTimerRef.current !== null) {
		1451	window.clearTimeout(commitTimerRef.current);
		1452	commitTimerRef.current = null;
		1453	}
		1454	setDraft(value);
		1455	setDraftSettled(true);
		1456	}
		1457	useEffect(
		1458	() => () => {
		1459	if (commitTimerRef.current !== null) window.clearTimeout(commitTimerRef.current);
		1460	},
		1461	[],
		1462	);
		1463	const acceptsFamily = (candidate: string) =>
		1464	isFontFamilyAvailable(candidate) && (!requireMonospace \|\| isMonospaceFamily(candidate));
		1465	const commitDraft = (next: string) => {
		1466	setDraftSettled(true);
		1467	// A rejected name stays in the field, flagged: the terminal would silently
		1468	// fall back to its default, so the row must not claim it took the value.
		1469	if (next.trim().length === 0 \|\| acceptsFamily(next)) {
		1470	onValueChange(next);
		1471	}
		1472	};
		1473	const flushDraft = () => {
		1474	if (commitTimerRef.current === null) return;
		1475	window.clearTimeout(commitTimerRef.current);
		1476	commitTimerRef.current = null;
		1477	commitDraft(draft);
		1478	};
		1479	const draftTrimmed = draft.trim();
		1480	// Flag an unknown name only once typing pauses, and never for an empty
		1481	// field - that is the starting state, not a rejected entry.
		1482	const draftPending = draftSettled && draftTrimmed.length > 0 && draftTrimmed !== trimmed;
		1483	const resetAction =
		1484	trimmed.length > 0 ? (
		1485	<SettingResetButton
		1486	label={`${title.toLowerCase()} family`}
		1487	onClick={() => onValueChange("")}
		1488	/>
		1489	) : null;
		1490	const fontEnumeration = useFontEnumeration();
		1491	// Everyone starts on the plain input; focusing it is the user gesture that
		1492	// runs font discovery. Where the engine can enumerate, the control then
		1493	// upgrades to the picker - popped open when the swap happens under focus,
		1494	// so the interaction continues without a second click.
		1495	const inputFocusedRef = useRef(false);
		1496	const familyControl =
		1497	fontEnumeration.status === "granted" ? (
		1498	<FontFamilyPicker
		1499	ariaLabel={`${title} family`}
		1500	defaultFamily={defaultFamily}
		1501	selectedFamily={trimmed}
		1502	requireMonospace={requireMonospace}
		1503	initialOpen={inputFocusedRef.current}
		1504	onSelect={onValueChange}
		1505	/>
		1506	) : (
		1507	<Input
		1508	aria-label={`${title} family`}
		1509	aria-invalid={draftPending \|\| undefined}
		1510	autoCapitalize="off"
		1511	autoComplete="off"
		1512	className="min-w-0 flex-1"
		1513	maxLength={200}
		1514	onFocus={() => {
		1515	inputFocusedRef.current = true;
		1516	discoverInstalledFonts();
		1517	}}
		1518	onBlur={() => {
		1519	inputFocusedRef.current = false;
		1520	flushDraft();
		1521	}}
		1522	onChange={(event) => {
		1523	const next = event.currentTarget.value;
		1524	setDraft(next);
		1525	setDraftSettled(false);
		1526	if (commitTimerRef.current !== null) {
		1527	window.clearTimeout(commitTimerRef.current);
1110	}	1528	}
1111	/>	1529	commitTimerRef.current = window.setTimeout(() => {
1112	</SettingsSection>	1530	commitTimerRef.current = null;
1113	</SettingsPageContainer>	1531	commitDraft(next);
		1532	}, 400);
		1533	}}
		1534	onKeyDown={(event) => {
		1535	if (event.key === "Enter") flushDraft();
		1536	if (event.key === "Escape") {
		1537	// Discard uncommitted typing without closing the settings page,
		1538	// which is what an unhandled Escape does.
		1539	event.preventDefault();
		1540	event.stopPropagation();
		1541	if (commitTimerRef.current !== null) {
		1542	window.clearTimeout(commitTimerRef.current);
		1543	commitTimerRef.current = null;
		1544	}
		1545	setDraft(value);
		1546	setDraftSettled(true);
		1547	}
		1548	}}
		1549	placeholder={defaultFamily}
		1550	spellCheck={false}
		1551	value={draft}
		1552	/>
		1553	);
		1554	const control = (
		1555	<div className="flex w-full items-center gap-2 sm:w-auto">
		1556	<div className="min-w-0 flex-1 sm:w-44 sm:flex-none">{familyControl}</div>
		1557	<Select
		1558	value={String(size.value)}
		1559	onValueChange={(next) => {
		1560	if (typeof next !== "string") return;
		1561	const parsed = Number(next);
		1562	if (Number.isInteger(parsed) && parsed >= size.min && parsed <= size.max) {
		1563	size.onChange(parsed);
		1564	}
		1565	}}
		1566	>
		1567	<SelectTrigger className="w-22 shrink-0" aria-label={size.label}>
		1568	<SelectValue>{size.value} px</SelectValue>
		1569	</SelectTrigger>
		1570	<SelectPopup align="end" alignItemWithTrigger={false}>
		1571	{Array.from({ length: size.max - size.min + 1 }, (_, index) => size.min + index).map(
		1572	(px) => (
		1573	<SelectItem hideIndicator key={px} value={String(px)}>
		1574	{px} px
		1575	</SelectItem>
		1576	),
		1577	)}
		1578	</SelectPopup>
		1579	</Select>
		1580	</div>
		1581	);
		1582	return (
		1583	<SettingsRow
		1584	{...(id !== undefined ? { id } : {})}
		1585	title={title}
		1586	description={description}
		1587	resetAction={resetAction}
		1588	control={control}
		1589	>
		1590	{preview}
		1591	</SettingsRow>
1114	);	1592	);
1115	}	1593	}
1116		1594

apps/web/src/components/settings/settingsLayout.tsx+5

 @@ -62,6 +62,11 @@ function scrollAndFocusSettingsTarget(target: HTMLElement): void {
   });
 }
+/** The row id a settings-search jump is currently trying to reach, if any. */
+export function useSettingsSearchTargetId(): string | null {
+  return useContext(SettingsSearchTargetContext).targetId;
+}
 function useSettingsSearchTarget<T extends HTMLElement>(id: string | undefined) {
   const { targetId, onTargetHandled } = useContext(SettingsSearchTargetContext);
   const isSearchTarget = id !== undefined && id === targetId;

apps/web/src/components/settings/settingsSearch.ts+25

...	@@ -55,6 +55,31 @@ export const SETTINGS_SEARCH_ITEMS = [	...	@@ -55,6 +55,31 @@ export const SETTINGS_SEARCH_ITEMS = [
55	// The setting is stage-dependent, so its parent section is the stable destination.	55	// The setting is stage-dependent, so its parent section is the stable destination.
56	targetId: "appearance",	56	targetId: "appearance",
57	},	57	},
		58	{
		59	id: "interface-font",
		60	title: "Interface font",
		61	to: "/settings/appearance",
		62	},
		63	{
		64	id: "prompt-font",
		65	title: "Prompt font",
		66	to: "/settings/appearance",
		67	},
		68	{
		69	id: "code-font",
		70	title: "Code font",
		71	to: "/settings/appearance",
		72	},
		73	{
		74	id: "terminal-font",
		75	title: "Terminal font",
		76	to: "/settings/appearance",
		77	},
		78	{
		79	id: "font-smoothing",
		80	title: "Font smoothing",
		81	to: "/settings/appearance",
		82	},
58	{	83	{
59	id: "word-wrap",	84	id: "word-wrap",
60	title: "Word wrap",	85	title: "Word wrap",

apps/web/src/index.css+77-41

 @@ -130,6 +130,15 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   );
 }
+/* The font tokens are declared outside the inline theme so utilities reference
+   the variables and Settings -> Appearance can override them at runtime. The
+   default stacks are mirrored in `appearanceFonts.ts`. */
+@theme {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+}
 @theme inline {
   --color-zinc-25: oklch(99.2% 0 0);
   --animate-skeleton: skeleton 2s -1s infinite linear;
 @@ -138,11 +147,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --animate-status-pulse: status-pulse 2s infinite;
   --animate-status-ping: status-ping 2s infinite;
   --animate-sidebar-working-text: sidebar-working-text 3.4s infinite;
-  --font-sans:
-    "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-    sans-serif;
-  --font-mono:
-    "SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
   --color-warning-foreground: var(--warning-foreground);
   --color-warning: var(--warning);
   --color-success-foreground: var(--success-foreground);
 @@ -679,11 +683,11 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     background: color-mix(in srgb, var(--background) 64%, transparent);
   }
-  .glass-opacity-slider {
+  .settings-slider {
-    --glass-slider-progress: 0%;
+    --settings-slider-progress: 0%;
-    --glass-slider-fill-offset: 0.5rem;
+    --settings-slider-fill-offset: 0.5rem;
-    --glass-slider-fill-position: calc(
+    --settings-slider-fill-position: calc(
-      var(--glass-slider-progress) + var(--glass-slider-fill-offset)
+      var(--settings-slider-progress) + var(--settings-slider-fill-offset)
     );
     appearance: none;
     height: 1.5rem;
 @@ -691,32 +695,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     cursor: pointer;
   }
-  .glass-opacity-slider::-webkit-slider-runnable-track {
+  .settings-slider::-webkit-slider-runnable-track {
     height: 0.375rem;
     border-radius: 9999px;
     background: linear-gradient(
       to right,
-      var(--primary) 0 var(--glass-slider-fill-position),
+      var(--primary) 0 var(--settings-slider-fill-position),
-      color-mix(in srgb, var(--muted-foreground) 22%, transparent) var(--glass-slider-fill-position)
+      color-mix(in srgb, var(--muted-foreground) 22%, transparent)
-        100%
+        var(--settings-slider-fill-position) 100%
     );
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
   }
-  .glass-opacity-slider::-moz-range-track {
+  .settings-slider::-moz-range-track {
     height: 0.375rem;
     border-radius: 9999px;
     background: color-mix(in srgb, var(--muted-foreground) 22%, transparent);
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
   }
-  .glass-opacity-slider::-moz-range-progress {
+  .settings-slider::-moz-range-progress {
     height: 0.375rem;
     border-radius: 9999px;
     background: var(--primary);
   }
-  .glass-opacity-slider::-webkit-slider-thumb {
+  .settings-slider::-webkit-slider-thumb {
     appearance: none;
     width: 1rem;
     height: 1rem;
 @@ -730,7 +734,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       box-shadow 120ms ease;
   }
-  .glass-opacity-slider::-moz-range-thumb {
+  .settings-slider::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
     border: 2px solid var(--primary);
 @@ -742,54 +746,54 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       box-shadow 120ms ease;
   }
-  .glass-opacity-slider:hover::-webkit-slider-thumb {
+  .settings-slider:hover::-webkit-slider-thumb {
     transform: scale(1.08);
     box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 20%, transparent);
   }
-  .glass-opacity-slider:hover::-moz-range-thumb {
+  .settings-slider:hover::-moz-range-thumb {
     transform: scale(1.08);
     box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 20%, transparent);
   }
-  .glass-opacity-slider:active::-webkit-slider-thumb {
+  .settings-slider:active::-webkit-slider-thumb {
     transform: scale(0.94);
   }
-  .glass-opacity-slider:active::-moz-range-thumb {
+  .settings-slider:active::-moz-range-thumb {
     transform: scale(0.94);
   }
-  .glass-opacity-slider:focus-visible {
+  .settings-slider:focus-visible {
     outline: none;
   }
-  .glass-opacity-slider:focus-visible::-webkit-slider-thumb {
+  .settings-slider:focus-visible::-webkit-slider-thumb {
     box-shadow:
       0 0 0 3px var(--background),
       0 0 0 5px var(--ring);
   }
-  .glass-opacity-slider:focus-visible::-moz-range-thumb {
+  .settings-slider:focus-visible::-moz-range-thumb {
     box-shadow:
       0 0 0 3px var(--background),
       0 0 0 5px var(--ring);
   }
   @media (forced-colors: active) {
-    .glass-opacity-slider {
+    .settings-slider {
       appearance: auto;
       accent-color: Highlight;
     }
-    .glass-opacity-slider::-webkit-slider-runnable-track,
+    .settings-slider::-webkit-slider-runnable-track,
-    .glass-opacity-slider::-webkit-slider-thumb {
+    .settings-slider::-webkit-slider-thumb {
       all: revert;
     }
-    .glass-opacity-slider::-moz-range-track,
+    .settings-slider::-moz-range-track,
-    .glass-opacity-slider::-moz-range-progress,
+    .settings-slider::-moz-range-progress,
-    .glass-opacity-slider::-moz-range-thumb {
+    .settings-slider::-moz-range-thumb {
       all: revert;
     }
   }
 @@ -997,14 +1001,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 }
 body {
-  font-family:
+  /* Reference the theme token (not a literal stack) so the Settings ->
-    "DM Sans Variable",
+     Appearance runtime override of --font-sans reaches all interface text. */
-    "DM Sans",
+  font-family: var(--font-sans);
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    system-ui,
-    sans-serif;
   margin: 0;
   padding: 0;
 }
 @@ -1055,8 +1054,27 @@ body {
 pre,
 code {
-  font-family:
+  font-family: var(--font-mono);
-    "SF Mono", "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
+}
+/* Code blocks in chat carry the size preference. Scoped to chat markdown
+   rather than every pre: a global rule would beat text-size utilities and
+   inherited sizes on unrelated pre surfaces (terminal previews, approvals).
+   Inline code stays relative to its sentence so it never towers over prose;
+   diffs and file previews take the size through --diffs-font-size. */
+.chat-markdown .chat-markdown-shiki .shiki,
+.chat-markdown pre code {
+  font-size: var(--font-size-code, inherit);
+}
+/* @pierre/diffs surfaces (diffs, file previews, annotatable code, search
+   lines) render inside shadow roots but consult these hooks with their own
+   literal stacks as fallback. Custom properties inherit across the shadow
+   boundary, so defining them once here routes every code surface through the
+   appearance font tokens. */
+:root {
+  --diffs-font-family: var(--font-mono);
+  --diffs-header-font-family: var(--font-sans);
 }
 /* Window drag region (frameless titlebar) */
 @@ -1090,6 +1108,24 @@ code {
   background: var(--app-scrollbar-thumb-hover);
 }
+/* Settings -> Appearance can point the composer at its own face (for example a
+   mono font); default follows the sans stack. Applied on the surface wrapper so
+   the editor and its placeholder inherit together. */
+.composer-editor-surface {
+  font-family: var(--font-composer, var(--font-sans));
+  font-size: var(--font-size-prompt, 0.875rem);
+}
+/* Touch browsers zoom the page when a focused field is under 16px, so keep
+   the floor there regardless of the preference. Gated on a coarse pointer:
+   the zoom quirk does not exist on desktop, where a narrow window must not
+   silently override a smaller chosen prompt size. */
+@media (max-width: 39.999rem) and (pointer: coarse) {
+  .composer-editor-surface {
+    font-size: max(var(--font-size-prompt, 1rem), 16px);
+  }
+}
 .t3-ghostty-canvas {
   cursor: text;
 }

apps/web/src/main.tsx-3

 @@ -5,9 +5,6 @@ import { passkeys } from "@clerk/electron/passkeys";
 import { ClerkProvider as ElectronClerkProvider } from "@clerk/electron/react";
 import { createHashHistory, createBrowserHistory } from "@tanstack/react-router";
-import "@fontsource-variable/dm-sans/index.css";
-import "@fontsource/jetbrains-mono/400.css";
-import "@fontsource/jetbrains-mono/500.css";
 import "./index.css";
 import { isElectron } from "./env";

apps/web/src/routes/__root.tsx+34

...	@@ -27,6 +27,7 @@ import {	...	@@ -27,6 +27,7 @@ import {
27	toastManager,	27	toastManager,
28	} from "../components/ui/toast";	28	} from "../components/ui/toast";
29	import { resolveAndPersistPreferredEditor } from "../editorPreferences";	29	import { resolveAndPersistPreferredEditor } from "../editorPreferences";
		30	import { applyAppearanceFontVariables } from "~/appearanceFonts";
30	import { useClientSettings } from "../hooks/useSettings";	31	import { useClientSettings } from "../hooks/useSettings";
31	import {	32	import {
32	deriveLogicalProjectKeyFromSettings,	33	deriveLogicalProjectKeyFromSettings,
...	@@ -128,6 +129,7 @@ function RootRouteView() {	...	@@ -128,6 +129,7 @@ function RootRouteView() {
128	<AnchoredToastProvider>	129	<AnchoredToastProvider>
129	<DocumentTitleSync />	130	<DocumentTitleSync />
130	<GlassAppearanceSync />	131	<GlassAppearanceSync />
		132	<FontAppearanceSync />
131	{primaryEnvironmentAuthenticated ? <AuthenticatedTracingBootstrap /> : null}	133	{primaryEnvironmentAuthenticated ? <AuthenticatedTracingBootstrap /> : null}
132	<RelayClientInstallDialog />	134	<RelayClientInstallDialog />
133	<ConnectOnboardingDialog />	135	<ConnectOnboardingDialog />
...	@@ -152,6 +154,38 @@ function GlassAppearanceSync() {	...	@@ -152,6 +154,38 @@ function GlassAppearanceSync() {
152	return null;	154	return null;
153	}	155	}
154		156
		157	function FontAppearanceSync() {
		158	const fontFamilySans = useClientSettings((settings) => settings.fontFamilySans);
		159	const fontFamilyCode = useClientSettings((settings) => settings.fontFamilyCode);
		160	const fontFamilyComposer = useClientSettings((settings) => settings.fontFamilyComposer);
		161	const fontSizeInterface = useClientSettings((settings) => settings.fontSizeInterface);
		162	const fontSizePrompt = useClientSettings((settings) => settings.fontSizePrompt);
		163	const fontSizeCode = useClientSettings((settings) => settings.fontSizeCode);
		164	const fontSmoothing = useClientSettings((settings) => settings.fontSmoothing);
		165
		166	useEffect(() => {
		167	applyAppearanceFontVariables(document.documentElement, {
		168	sans: fontFamilySans,
		169	code: fontFamilyCode,
		170	composer: fontFamilyComposer,
		171	sizeInterface: fontSizeInterface,
		172	sizePrompt: fontSizePrompt,
		173	sizeCode: fontSizeCode,
		174	smoothing: fontSmoothing,
		175	});
		176	}, [
		177	fontFamilyCode,
		178	fontFamilyComposer,
		179	fontFamilySans,
		180	fontSizeCode,
		181	fontSizeInterface,
		182	fontSizePrompt,
		183	fontSmoothing,
		184	]);
		185
		186	return null;
		187	}
		188
155	function DocumentTitleSync() {	189	function DocumentTitleSync() {
156	const primaryServerVersion =	190	const primaryServerVersion =
157	useAtomValue(primaryServerConfigAtom)?.environment.serverVersion ?? null;	191	useAtomValue(primaryServerConfigAtom)?.environment.serverVersion ?? null;

apps/web/src/terminal/ghostty/surface.test.ts+36

...	@@ -19,6 +19,7 @@ import {	...	@@ -19,6 +19,7 @@ import {
19	terminalLinkAtPosition,	19	terminalLinkAtPosition,
20	terminalContentOriginY,	20	terminalContentOriginY,
21	terminalFontFamily,	21	terminalFontFamily,
		22	fittedTerminalFontSize,
22	terminalFontSize,	23	terminalFontSize,
23	terminalWheelArrowData,	24	terminalWheelArrowData,
24	terminalWheelDeltaRows,	25	terminalWheelDeltaRows,
...	@@ -256,6 +257,41 @@ describe("terminal font resolution", () => {	...	@@ -256,6 +257,41 @@ describe("terminal font resolution", () => {
256	expect(custom.endsWith("monospace")).toBe(true);	257	expect(custom.endsWith("monospace")).toBe(true);
257	});	258	});
258		259
		260	it("ignores proportional families the cell grid cannot lay out", () => {
		261	// jsdom has no canvas metrics, so the probe answers "monospace" and the
		262	// family is kept; the guard is exercised in the browser instead. Assert the
		263	// shape stays intact so a rejected face still yields a usable stack.
		264	const stack = terminalFontFamily("Helvetica Neue");
		265	expect(stack.endsWith("monospace")).toBe(true);
		266	});
		267
		268	it("quotes families the canvas font shorthand would otherwise reject", () => {
		269	expect(terminalFontFamily("3270 Nerd Font").startsWith('"3270 Nerd Font", ')).toBe(true);
		270	expect(terminalFontFamily("M+ 1m").startsWith('"M+ 1m", ')).toBe(true);
		271	expect(terminalFontFamily("Cascadia Code, Menlo").startsWith('"Cascadia Code", Menlo, ')).toBe(
		272	true,
		273	);
		274	expect(terminalFontFamily(" , ")).toBe(DEFAULT_TERMINAL_FONT_FAMILY);
		275	});
		276
		277	it("slides the rendered size down until a full-width grid fits the canvas", () => {
		278	// SF Mono-like advance: 0.6em per cell.
		279	const cellWidthAt = (size: number) => size * 0.6;
		280	// A wide drawer keeps the preference untouched.
		281	expect(fittedTerminalFontSize(cellWidthAt, 20, 1140)).toBe(20);
		282	// A split pane at the same preference shrinks until 80 columns fit.
		283	const fitted = fittedTerminalFontSize(cellWidthAt, 20, 570);
		284	expect(fitted).toBeLessThan(20);
		285	expect(Math.floor((570 - 8) / cellWidthAt(fitted))).toBeGreaterThanOrEqual(80);
		286	// A tiny pane stops at the legibility floor instead of vanishing.
		287	expect(fittedTerminalFontSize(cellWidthAt, 20, 220)).toBe(8);
		288	// A preference below the floor is honored as-is.
		289	expect(fittedTerminalFontSize(cellWidthAt, 6, 220)).toBe(6);
		290	// Unmeasured layouts leave the preference alone.
		291	expect(fittedTerminalFontSize(cellWidthAt, 14, 0)).toBe(14);
		292	expect(fittedTerminalFontSize(() => 0, 14, 600)).toBe(14);
		293	});
		294
259	it("clamps requested font sizes to the supported range", () => {	295	it("clamps requested font sizes to the supported range", () => {
260	expect(terminalFontSize()).toBe(DEFAULT_TERMINAL_FONT_SIZE);	296	expect(terminalFontSize()).toBe(DEFAULT_TERMINAL_FONT_SIZE);
261	expect(terminalFontSize(Number.NaN)).toBe(DEFAULT_TERMINAL_FONT_SIZE);	297	expect(terminalFontSize(Number.NaN)).toBe(DEFAULT_TERMINAL_FONT_SIZE);

apps/web/src/terminal/ghostty/surface.ts+82-5

...	@@ -13,6 +13,7 @@ import {	...	@@ -13,6 +13,7 @@ import {
13	type GhosttyCellMetrics,	13	type GhosttyCellMetrics,
14	} from "./renderer";	14	} from "./renderer";
15	import symbolsFontUrl from "./fonts/SymbolsNerdFontMono-Regular.woff2?url";	15	import symbolsFontUrl from "./fonts/SymbolsNerdFontMono-Regular.woff2?url";
		16	import { isMonospaceFamily } from "../../appearanceFonts";
16		17
17	export const DEFAULT_TERMINAL_FONT_SIZE = 12;	18	export const DEFAULT_TERMINAL_FONT_SIZE = 12;
18	const MIN_TERMINAL_FONT_SIZE = 6;	19	const MIN_TERMINAL_FONT_SIZE = 6;
...	@@ -25,10 +26,11 @@ const TERMINAL_GLYPH_FALLBACKS =	...	@@ -25,10 +26,11 @@ const TERMINAL_GLYPH_FALLBACKS =
25	'"Symbols Nerd Font Mono", "Symbols Nerd Font", "JetBrainsMono Nerd Font", ' +	26	'"Symbols Nerd Font Mono", "Symbols Nerd Font", "JetBrainsMono Nerd Font", ' +
26	'"JetBrainsMono NF", "FiraCode Nerd Font", "Hack Nerd Font", "MesloLGS NF", ' +	27	'"JetBrainsMono NF", "FiraCode Nerd Font", "Hack Nerd Font", "MesloLGS NF", ' +
27	'"CaskaydiaCove Nerd Font", "PowerlineSymbols", monospace';	28	'"CaskaydiaCove Nerd Font", "PowerlineSymbols", monospace';
28	// SF Mono where the platform has it (macOS), otherwise the bundled JetBrains	29	// The platform's own monospace faces; concrete names only, because an
29	// Mono webfont, so the default rendering is identical everywhere else.	30	// unknown keyword (like ui-monospace) makes canvas font shorthand parsing
		31	// reject the whole string.
30	export const DEFAULT_TERMINAL_FONT_FAMILY =	32	export const DEFAULT_TERMINAL_FONT_FAMILY =
31	'"SF Mono", "SFMono-Regular", "JetBrains Mono", ' + TERMINAL_GLYPH_FALLBACKS;	33	'"SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", ' + TERMINAL_GLYPH_FALLBACKS;
32	const CONTENT_PADDING = 4;	34	const CONTENT_PADDING = 4;
33	const MIN_SCROLLBAR_THUMB_HEIGHT = 18;	35	const MIN_SCROLLBAR_THUMB_HEIGHT = 18;
34	/** Half a blink cycle: the visible and hidden phases are equally long. */	36	/** Half a blink cycle: the visible and hidden phases are equally long. */
...	@@ -61,13 +63,69 @@ function ensureTerminalSymbolsFont(): Promise<void> {	...	@@ -61,13 +63,69 @@ function ensureTerminalSymbolsFont(): Promise<void> {
61	return symbolsFontLoad;	63	return symbolsFontLoad;
62	}	64	}
63		65
		66	function quoteTerminalFontFamilies(list: string): string {
		67	return list
		68	.split(",")
		69	.map((name) => {
		70	const bare = name.trim();
		71	if (bare.length === 0) return "";
		72	if (/^(['"]).*\1$/.test(bare)) return bare;
		73	if (/^[a-zA-Z][a-zA-Z0-9-]*$/.test(bare)) return bare;
		74	return `"${bare.replaceAll('"', "")}"`;
		75	})
		76	.filter((name) => name.length > 0)
		77	.join(", ");
		78	}
		79
64	export function terminalFontFamily(family?: string): string {	80	export function terminalFontFamily(family?: string): string {
65	const custom = family?.trim();	81	// Quote non-ident names ("3270 Nerd Font", "M+ 1m"): an unquoted one makes
66	if (!custom) return DEFAULT_TERMINAL_FONT_FAMILY;	82	// the whole canvas font string invalid and the assignment silently no-ops.
		83	const custom = family === undefined ? "" : quoteTerminalFontFamilies(family);
		84	if (custom.length === 0) return DEFAULT_TERMINAL_FONT_FAMILY;
		85	// The grid places the cursor and selection on one cell advance, so a
		86	// proportional face would draw its text narrower than its own cells. Refuse
		87	// it here rather than render a ragged grid with a stranded cursor.
		88	if (!isMonospaceFamily(custom)) return DEFAULT_TERMINAL_FONT_FAMILY;
67	// A custom face keeps the glyph fallbacks so prompt symbols stay covered.	89	// A custom face keeps the glyph fallbacks so prompt symbols stay covered.
68	return `${custom}, ${TERMINAL_GLYPH_FALLBACKS}`;	90	return `${custom}, ${TERMINAL_GLYPH_FALLBACKS}`;
69	}	91	}
70		92
		93	/**
		94	* Grids narrower than a classic 80-column terminal wrap command output hard,
		95	* so the rendered font size follows the canvas width: the preference is the
		96	* ceiling, and the size slides down (to a legibility floor) until a full-width
		97	* grid fits. A widening pane slides it back up toward the preference.
		98	*/
		99	const MIN_TERMINAL_FIT_COLUMNS = 80;
		100	const MIN_TERMINAL_FIT_FONT_SIZE = 8;
		101
		102	export function fittedTerminalFontSize(
		103	cellWidthAt: (size: number) => number,
		104	requested: number,
		105	mountWidth: number,
		106	): number {
		107	const available = mountWidth - CONTENT_PADDING * 2;
		108	if (available <= 0) return requested;
		109	const floor = Math.min(requested, MIN_TERMINAL_FIT_FONT_SIZE);
		110	const fits = (cellWidth: number) =>
		111	cellWidth > 0 && Math.floor(available / cellWidth) >= MIN_TERMINAL_FIT_COLUMNS;
		112	let cellWidth = cellWidthAt(requested);
		113	if (cellWidth <= 0 \|\| fits(cellWidth)) return requested;
		114	// The advance scales linearly with size for monospace faces: jump close to
		115	// the fitting size, then settle the remaining rounding one step at a time.
		116	const targetCellWidth = available / MIN_TERMINAL_FIT_COLUMNS;
		117	let size = Math.max(
		118	floor,
		119	Math.min(requested, Math.floor((requested * targetCellWidth) / cellWidth)),
		120	);
		121	while (size > floor) {
		122	cellWidth = cellWidthAt(size);
		123	if (cellWidth <= 0 \|\| fits(cellWidth)) break;
		124	size -= 1;
		125	}
		126	return size;
		127	}
		128
71	export function terminalFontSize(size?: number): number {	129	export function terminalFontSize(size?: number): number {
72	if (size === undefined \|\| !Number.isFinite(size)) return DEFAULT_TERMINAL_FONT_SIZE;	130	if (size === undefined \|\| !Number.isFinite(size)) return DEFAULT_TERMINAL_FONT_SIZE;
73	return Math.max(MIN_TERMINAL_FONT_SIZE, Math.min(MAX_TERMINAL_FONT_SIZE, Math.round(size)));	131	return Math.max(MIN_TERMINAL_FONT_SIZE, Math.min(MAX_TERMINAL_FONT_SIZE, Math.round(size)));
...	@@ -350,6 +408,7 @@ export class GhosttyTerminalSurface {	...	@@ -350,6 +408,7 @@ export class GhosttyTerminalSurface {
350	private metrics: GhosttyCellMetrics;	408	private metrics: GhosttyCellMetrics;
351	private fontFamily: string;	409	private fontFamily: string;
352	private fontSize: number;	410	private fontSize: number;
		411	private requestedFontSize: number;
353	private fontEpoch = 0;	412	private fontEpoch = 0;
354	private readonly resizeObserver: ResizeObserver;	413	private readonly resizeObserver: ResizeObserver;
355	private readonly scrollbarThumb: HTMLDivElement;	414	private readonly scrollbarThumb: HTMLDivElement;
...	@@ -425,6 +484,7 @@ export class GhosttyTerminalSurface {	...	@@ -425,6 +484,7 @@ export class GhosttyTerminalSurface {
425	this.theme = options.theme;	484	this.theme = options.theme;
426	this.fontFamily = terminalFontFamily(options.font?.family);	485	this.fontFamily = terminalFontFamily(options.font?.family);
427	this.fontSize = terminalFontSize(options.font?.size);	486	this.fontSize = terminalFontSize(options.font?.size);
		487	this.requestedFontSize = this.fontSize;
428	this.resizeObserver = new ResizeObserver(() => this.fit());	488	this.resizeObserver = new ResizeObserver(() => this.fit());
429	this.installEvents();	489	this.installEvents();
430	this.watchDevicePixelRatio();	490	this.watchDevicePixelRatio();
...	@@ -544,6 +604,7 @@ export class GhosttyTerminalSurface {	...	@@ -544,6 +604,7 @@ export class GhosttyTerminalSurface {
544	}	604	}
545	if (this.disposed \|\| epoch !== this.fontEpoch) return;	605	if (this.disposed \|\| epoch !== this.fontEpoch) return;
546	this.fontFamily = fontFamily;	606	this.fontFamily = fontFamily;
		607	this.requestedFontSize = fontSize;
547	this.fontSize = fontSize;	608	this.fontSize = fontSize;
548	this.applyFontMetrics();	609	this.applyFontMetrics();
549	}	610	}
...	@@ -588,6 +649,22 @@ export class GhosttyTerminalSurface {	...	@@ -588,6 +649,22 @@ export class GhosttyTerminalSurface {
588	const width = this.mount.clientWidth;	649	const width = this.mount.clientWidth;
589	const height = this.mount.clientHeight;	650	const height = this.mount.clientHeight;
590	if (width <= 0 \|\| height <= 0) return false;	651	if (width <= 0 \|\| height <= 0) return false;
		652	const fitted = fittedTerminalFontSize(
		653	(size) => measureGhosttyCell(this.context, size, this.fontFamily).width,
		654	this.requestedFontSize,
		655	width,
		656	);
		657	if (fitted !== this.fontSize) {
		658	this.fontSize = fitted;
		659	this.metrics = measureGhosttyCell(this.context, this.fontSize, this.fontFamily);
		660	// The grid-change branch below resizes the core, but only when the
		661	// column count moved; the cell geometry always did, so sync it here.
		662	this.core.resize(this.cols, this.rows, this.metrics.width, this.metrics.height);
		663	this.inputLeft = -1;
		664	this.inputTop = -1;
		665	this.forceFullRender = true;
		666	this.scrollbarDirty = true;
		667	}
591	const ratio = window.devicePixelRatio \|\| 1;	668	const ratio = window.devicePixelRatio \|\| 1;
592	const pixelWidth = Math.max(1, Math.round(width * ratio));	669	const pixelWidth = Math.max(1, Math.round(width * ratio));
593	const pixelHeight = Math.max(1, Math.round(height * ratio));	670	const pixelHeight = Math.max(1, Math.round(height * ratio));

packages/contracts/src/settings.ts+72

...	@@ -62,10 +62,54 @@ export const GlassOpacity = Schema.Int.check(	...	@@ -62,10 +62,54 @@ export const GlassOpacity = Schema.Int.check(
62	);	62	);
63	export type GlassOpacity = typeof GlassOpacity.Type;	63	export type GlassOpacity = typeof GlassOpacity.Type;
64	export const DEFAULT_GLASS_OPACITY: GlassOpacity = 80;	64	export const DEFAULT_GLASS_OPACITY: GlassOpacity = 80;
		65	/**
		66	* Font size preferences, in CSS pixels. The ranges are deliberately narrow:
		67	* the interface size scales every rem-based dimension in the app, so the
		68	* bounds keep layouts intact rather than offering unusable extremes.
		69	*/
		70	export const MIN_INTERFACE_FONT_SIZE = 12;
		71	export const MAX_INTERFACE_FONT_SIZE = 20;
		72	export const InterfaceFontSize = Schema.Int.check(
		73	Schema.isBetween({ minimum: MIN_INTERFACE_FONT_SIZE, maximum: MAX_INTERFACE_FONT_SIZE }),
		74	);
		75	export type InterfaceFontSize = typeof InterfaceFontSize.Type;
		76	export const DEFAULT_INTERFACE_FONT_SIZE: InterfaceFontSize = 16;
		77
		78	export const MIN_PROMPT_FONT_SIZE = 12;
		79	export const MAX_PROMPT_FONT_SIZE = 20;
		80	export const PromptFontSize = Schema.Int.check(
		81	Schema.isBetween({ minimum: MIN_PROMPT_FONT_SIZE, maximum: MAX_PROMPT_FONT_SIZE }),
		82	);
		83	export type PromptFontSize = typeof PromptFontSize.Type;
		84	export const DEFAULT_PROMPT_FONT_SIZE: PromptFontSize = 14;
		85
		86	export const MIN_CODE_FONT_SIZE = 10;
		87	export const MAX_CODE_FONT_SIZE = 18;
		88	export const CodeFontSize = Schema.Int.check(
		89	Schema.isBetween({ minimum: MIN_CODE_FONT_SIZE, maximum: MAX_CODE_FONT_SIZE }),
		90	);
		91	export type CodeFontSize = typeof CodeFontSize.Type;
		92	export const DEFAULT_CODE_FONT_SIZE: CodeFontSize = 13;
		93
		94	export const MIN_TERMINAL_FONT_SIZE = 8;
		95	export const MAX_TERMINAL_FONT_SIZE = 20;
		96	export const TerminalFontSize = Schema.Int.check(
		97	Schema.isBetween({ minimum: MIN_TERMINAL_FONT_SIZE, maximum: MAX_TERMINAL_FONT_SIZE }),
		98	);
		99	export type TerminalFontSize = typeof TerminalFontSize.Type;
		100	export const DEFAULT_TERMINAL_FONT_SIZE: TerminalFontSize = 12;
		101
65	export const EnvironmentIdentificationMode = Schema.Literals(["artwork", "pill", "none"]);	102	export const EnvironmentIdentificationMode = Schema.Literals(["artwork", "pill", "none"]);
66	export type EnvironmentIdentificationMode = typeof EnvironmentIdentificationMode.Type;	103	export type EnvironmentIdentificationMode = typeof EnvironmentIdentificationMode.Type;
67	export const DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE: EnvironmentIdentificationMode = "artwork";	104	export const DEFAULT_ENVIRONMENT_IDENTIFICATION_MODE: EnvironmentIdentificationMode = "artwork";
68		105
		106	/**
		107	* A user-chosen font family (a single name or a comma-separated list). Empty
		108	* means "use the app default"; clients compose their own fallback stacks.
		109	*/
		110	export const FontFamilyPreference = Schema.String.check(Schema.isMaxLength(200));
		111	export type FontFamilyPreference = typeof FontFamilyPreference.Type;
		112
69	export const ClientSettingsSchema = Schema.Struct({	113	export const ClientSettingsSchema = Schema.Struct({
70	autoOpenPlanSidebar: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),	114	autoOpenPlanSidebar: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
71	confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),	115	confirmThreadArchive: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(false))),
...	@@ -80,6 +124,25 @@ export const ClientSettingsSchema = Schema.Struct({	...	@@ -80,6 +124,25 @@ export const ClientSettingsSchema = Schema.Struct({
80	glassOpacity: GlassOpacity.pipe(	124	glassOpacity: GlassOpacity.pipe(
81	Schema.withDecodingDefault(Effect.succeed(DEFAULT_GLASS_OPACITY)),	125	Schema.withDecodingDefault(Effect.succeed(DEFAULT_GLASS_OPACITY)),
82	),	126	),
		127	fontSizeInterface: InterfaceFontSize.pipe(
		128	Schema.withDecodingDefault(Effect.succeed(DEFAULT_INTERFACE_FONT_SIZE)),
		129	),
		130	fontSizePrompt: PromptFontSize.pipe(
		131	Schema.withDecodingDefault(Effect.succeed(DEFAULT_PROMPT_FONT_SIZE)),
		132	),
		133	fontSizeCode: CodeFontSize.pipe(
		134	Schema.withDecodingDefault(Effect.succeed(DEFAULT_CODE_FONT_SIZE)),
		135	),
		136	fontSizeTerminal: TerminalFontSize.pipe(
		137	Schema.withDecodingDefault(Effect.succeed(DEFAULT_TERMINAL_FONT_SIZE)),
		138	),
		139	fontFamilyCode: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
		140	fontFamilyComposer: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
		141	fontFamilySans: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
		142	fontFamilyTerminal: FontFamilyPreference.pipe(Schema.withDecodingDefault(Effect.succeed(""))),
		143	// Grayscale `-webkit-font-smoothing: antialiased` (thinner strokes);
		144	// disabling restores the platform's heavier default. No effect off macOS.
		145	fontSmoothing: Schema.Boolean.pipe(Schema.withDecodingDefault(Effect.succeed(true))),
83	// Model favorites. Historically keyed by provider kind, now	146	// Model favorites. Historically keyed by provider kind, now
84	// widened to `ProviderInstanceId` so users can favorite a specific model	147	// widened to `ProviderInstanceId` so users can favorite a specific model
85	// on a custom provider instance (e.g. "Codex Personal · gpt-5") without	148	// on a custom provider instance (e.g. "Codex Personal · gpt-5") without
...	@@ -690,6 +753,15 @@ export const ClientSettingsPatch = Schema.Struct({	...	@@ -690,6 +753,15 @@ export const ClientSettingsPatch = Schema.Struct({
690	diffIgnoreWhitespace: Schema.optionalKey(Schema.Boolean),	753	diffIgnoreWhitespace: Schema.optionalKey(Schema.Boolean),
691	environmentIdentificationMode: Schema.optionalKey(EnvironmentIdentificationMode),	754	environmentIdentificationMode: Schema.optionalKey(EnvironmentIdentificationMode),
692	glassOpacity: Schema.optionalKey(GlassOpacity),	755	glassOpacity: Schema.optionalKey(GlassOpacity),
		756	fontSizeInterface: Schema.optionalKey(InterfaceFontSize),
		757	fontSizePrompt: Schema.optionalKey(PromptFontSize),
		758	fontSizeCode: Schema.optionalKey(CodeFontSize),
		759	fontSizeTerminal: Schema.optionalKey(TerminalFontSize),
		760	fontFamilyCode: Schema.optionalKey(FontFamilyPreference),
		761	fontFamilyComposer: Schema.optionalKey(FontFamilyPreference),
		762	fontFamilySans: Schema.optionalKey(FontFamilyPreference),
		763	fontFamilyTerminal: Schema.optionalKey(FontFamilyPreference),
		764	fontSmoothing: Schema.optionalKey(Schema.Boolean),
693	favorites: Schema.optionalKey(	765	favorites: Schema.optionalKey(
694	Schema.Array(	766	Schema.Array(
695	Schema.Struct({	767	Schema.Struct({

pnpm-lock.yaml-16

...	@@ -532,12 +532,6 @@ importers:	...	@@ -532,12 +532,6 @@ importers:
532	'@effect/atom-react':	532	'@effect/atom-react':
533	specifier: 4.0.0-beta.103	533	specifier: 4.0.0-beta.103
534	version: 4.0.0-beta.103(effect@4.0.0-beta.103(patch_hash=a18f963109656ddbeb2a99ca45f942ecf54830986259eb01ce6a970421c9c6a9))(react@19.2.6)(scheduler@0.27.0)	534	version: 4.0.0-beta.103(effect@4.0.0-beta.103(patch_hash=a18f963109656ddbeb2a99ca45f942ecf54830986259eb01ce6a970421c9c6a9))(react@19.2.6)(scheduler@0.27.0)
535	'@fontsource-variable/dm-sans':
536	specifier: ^5.2.8
537	version: 5.2.8
538	'@fontsource/jetbrains-mono':
539	specifier: ^5.2.8
540	version: 5.2.8
541	'@formkit/auto-animate':	535	'@formkit/auto-animate':
542	specifier: ^0.9.0	536	specifier: ^0.9.0
543	version: 0.9.0	537	version: 0.9.0
...	@@ -2707,12 +2701,6 @@ packages:	...	@@ -2707,12 +2701,6 @@ packages:
2707	'@floating-ui/utils@0.2.11':	2701	'@floating-ui/utils@0.2.11':
2708	resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}	2702	resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
2709		2703
2710	'@fontsource-variable/dm-sans@5.2.8':
2711	resolution: {integrity: sha512-AxkvMTvNWgfrmlyjiV05vlHYJa+nRQCf1EfvIrQAPBpFJW0O9VTz7oAFr9S3lvbWdmnFoBk7yFqQL86u64nl2g==}
2712
2713	'@fontsource/jetbrains-mono@5.2.8':
2714	resolution: {integrity: sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==}
2715
2716	'@formkit/auto-animate@0.9.0':	2704	'@formkit/auto-animate@0.9.0':
2717	resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}	2705	resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}
2718		2706
...	@@ -12791,10 +12779,6 @@ snapshots:	...	@@ -12791,10 +12779,6 @@ snapshots:
12791		12779
12792	'@floating-ui/utils@0.2.11': {}	12780	'@floating-ui/utils@0.2.11': {}
12793		12781
12794	'@fontsource-variable/dm-sans@5.2.8': {}
12795
12796	'@fontsource/jetbrains-mono@5.2.8': {}
12797
12798	'@formkit/auto-animate@0.9.0': {}	12782	'@formkit/auto-animate@0.9.0': {}
12799		12783
12800	'@hono/node-server@1.19.14(hono@4.12.27)':	12784	'@hono/node-server@1.19.14(hono@4.12.27)':

author	Wout Stiens <71498452+StiensWout@users.noreply.github.com> 2026-08-05 00:55:06+02:00
committer	GitHub <noreply@github.com> 2026-08-05 00:55:06+02:00
log	8eca20005b47e197b3610f7996f3fd02355c1891
tree	4e7d3739950cb761867a93d3f5c879edd92ff793
parent	2fa1fec8d8f63bc8fa4579e7c0fd280b21de02ef
signature	Signed by PGP key B5690EEEBB952194

...	@@ -1,20 +1,23 @@	...	@@ -1,20 +1,23 @@
		1	// Chip metrics are in em so the pills scale with the text they sit in (the
		2	// composer honors the prompt font-size preference). The chat variant pins the
		3	// original 12px, where every em value resolves to the same pixels as before.
1	const INLINE_CHIP_CLASS_NAME =	4	const INLINE_CHIP_CLASS_NAME =
2	"inline-flex max-w-full items-center gap-1 rounded-md border border-border/70 bg-accent/40 px-1.5 py-px font-medium text-[12px] leading-[1.1] text-foreground align-middle";	5	"inline-flex max-w-full items-center gap-[0.33em] rounded-[0.5em] border border-border/70 bg-accent/40 px-[0.5em] py-[0.08em] font-medium leading-[1.1] text-foreground align-middle";
3		6
4	export const CHAT_INLINE_CHIP_CLASS_NAME = INLINE_CHIP_CLASS_NAME;	7	export const CHAT_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[12px]`;
5		8
6	export const COMPOSER_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} select-none`;	9	export const COMPOSER_INLINE_CHIP_CLASS_NAME = `${INLINE_CHIP_CLASS_NAME} text-[0.86em] select-none`;
7		10
8	export const COMPOSER_INLINE_CHIP_ICON_CLASS_NAME = "size-3.5 shrink-0 opacity-85";	11	export const COMPOSER_INLINE_CHIP_ICON_CLASS_NAME = "size-[1.17em] shrink-0 opacity-85";
9		12
10	export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";	13	export const CHAT_INLINE_CHIP_LABEL_CLASS_NAME = "truncate leading-tight";
11		14
12	export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME = `${CHAT_INLINE_CHIP_LABEL_CLASS_NAME} select-none`;	15	export const COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME = `${CHAT_INLINE_CHIP_LABEL_CLASS_NAME} select-none`;
13		16
14	export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =	17	export const COMPOSER_INLINE_SKILL_CHIP_CLASS_NAME =
15	"inline-flex max-w-full select-none items-center gap-1 rounded-md border border-fuchsia-500/25 bg-fuchsia-500/12 px-1.5 py-px font-medium text-[12px] leading-[1.1] text-fuchsia-700 align-middle dark:text-fuchsia-300";	18	"inline-flex max-w-full select-none items-center gap-[0.33em] rounded-[0.5em] border border-fuchsia-500/25 bg-fuchsia-500/12 px-[0.5em] py-[0.08em] font-medium text-[0.86em] leading-[1.1] text-fuchsia-700 align-middle dark:text-fuchsia-300";
16		19
17	export const SKILL_CHIP_ICON_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`;	20	export const SKILL_CHIP_ICON_SVG = `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`;
18		21
19	export const COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME =	22	export const COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME =
20	"ml-0.5 inline-flex size-3.5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/72 transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";	23	"ml-[0.17em] inline-flex size-[1.17em] shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/72 transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";

feat(web): configurable fonts and sizes under Settings → Appearance (#5103)