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

apps/desktop/src/preview/BrowserSession.ts

@@ -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

@@ -20,6 +20,15 @@ const clientSettings: ClientSettings = {
   diffIgnoreWhitespace: true,
   environmentIdentificationMode: "artwork",
   favorites: [],
+  fontFamilyCode: "",
+  fontFamilyComposer: "",
+  fontFamilySans: "",
+  fontFamilyTerminal: "",
+  fontSizeCode: 13,
+  fontSizeInterface: 16,
+  fontSizePrompt: 14,
+  fontSizeTerminal: 12,
+  fontSmoothing: true,
   glassOpacity: 80,
   providerModelPreferences: {},
   sidebarAutoSettleAfterDays: 3,

apps/web/index.html

@@ -47,14 +47,7 @@
       body {
         background: #ffffff;
         color: #262626;
-        font-family:
-          "DM Sans Variable",
-          "DM Sans",
-          -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          system-ui,
-          sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
       }
 
       html.dark body {

apps/web/package.json

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

apps/web/src/appearanceFonts.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  clampCodeFontSize,
+  clampInterfaceFontSize,
+  clampPromptFontSize,
+  DEFAULT_CODE_FONT_STACK,
+  DEFAULT_SANS_FONT_STACK,
+  appearanceFontStack,
+  cssFontFamilies,
+  resolveDefaultFamilyLabel,
+} from "./appearanceFonts";
+
+describe("cssFontFamilies", () => {
+  it("returns null for effectively empty input", () => {
+    expect(cssFontFamilies("")).toBeNull();
+    expect(cssFontFamilies("   ")).toBeNull();
+    expect(cssFontFamilies(" , , ")).toBeNull();
+  });
+
+  it("quotes names with spaces and keeps single idents bare", () => {
+    expect(cssFontFamilies("Fira Code")).toBe('"Fira Code"');
+    expect(cssFontFamilies("monospace")).toBe("monospace");
+    expect(cssFontFamilies('"Comic Mono"')).toBe('"Comic Mono"');
+  });
+
+  it("normalizes comma-separated lists and strips embedded quotes", () => {
+    expect(cssFontFamilies(" Fira Code , Menlo ")).toBe('"Fira Code", Menlo');
+    expect(cssFontFamilies('Bad"Name')).toBe('"BadName"');
+  });
+
+  it("quotes names that are not single CSS idents", () => {
+    expect(cssFontFamilies("3270 Nerd Font")).toBe('"3270 Nerd Font"');
+    expect(cssFontFamilies("M+ 1m")).toBe('"M+ 1m"');
+  });
+});
+
+describe("resolveDefaultFamilyLabel", () => {
+  it("skips generic keywords and returns null for a stack of only generics", () => {
+    expect(resolveDefaultFamilyLabel("system-ui, sans-serif")).toBeNull();
+    expect(resolveDefaultFamilyLabel("ui-monospace, monospace")).toBeNull();
+  });
+});
+
+describe("appearanceFontStack", () => {
+  it("prepends the custom family to the default stack", () => {
+    expect(appearanceFontStack("Fira Code", DEFAULT_CODE_FONT_STACK)).toBe(
+      `"Fira Code", ${DEFAULT_CODE_FONT_STACK}`,
+    );
+  });
+
+  it("falls back to the default stack when unset", () => {
+    expect(appearanceFontStack("", DEFAULT_SANS_FONT_STACK)).toBe(DEFAULT_SANS_FONT_STACK);
+  });
+});
+
+describe("font size clamping", () => {
+  it("keeps sizes inside the ranges the UI can absorb", () => {
+    expect(clampInterfaceFontSize(16)).toBe(16);
+    expect(clampInterfaceFontSize(2)).toBe(12);
+    expect(clampInterfaceFontSize(96)).toBe(20);
+    expect(clampPromptFontSize(40)).toBe(20);
+    expect(clampCodeFontSize(1)).toBe(10);
+  });
+
+  it("rounds fractional values and falls back for unusable input", () => {
+    expect(clampCodeFontSize(13.4)).toBe(13);
+    expect(clampInterfaceFontSize(Number.NaN)).toBe(16);
+    expect(clampPromptFontSize(Number.POSITIVE_INFINITY)).toBe(14);
+  });
+});