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

[StiensWout]

What changed

Settings → Appearance gains a Fonts section: four surfaces, each with a family picker and a size slider, a live preview rendered in the resolved family and size, and a per-row reset.

Setting	Covers	Size range
Interface font	everything outside code blocks and the terminal	12–20px
Prompt font	the composer textarea and its placeholder only	12–20px
Code font	code blocks, diffs, and file previews	10–18px
Terminal font	terminal output	8–20px

The family pickers are grouped by category (Sans serif / Monospace) and filtered to faces that are actually installed, probed with canvas metrics — document.fonts.check() reports true for absent families, so it cannot filter anything. "Custom…" accepts any name: it edits a local draft that commits 400ms after typing pauses (or on Enter/blur) and only once the name resolves, so the applied font holds while a partial name is typed.

Cell-grid surfaces stay monospace. The terminal draws on a fixed cell lattice, so a proportional face renders its text narrower than its own cells and strands the cursor to the right. The Code and Terminal pickers offer monospace faces only, and the renderer independently measures the requested family and falls back to the default when it is not monospace, so a previously stored value cannot leave the terminal in that state.

The terminal size adapts to its canvas. The preference is a ceiling: narrow panes (splits, the side panel) slide the rendered size down until a classic 80-column grid fits, down to an 8px legibility floor, and widening slides it back up. The measurement lives in fit(), so drags, splits, and window resizes all pass through it.

The composer context strip degrades instead of colliding. Its controls truncate, and once even truncated labels cannot fit they animate shut to icons (measured from laid-out content, with hysteresis, restoring as space returns).

Under the hood:

• eight client settings in the contracts schema (four families, four sizes), persisted client-side like the other appearance preferences, all covered by Restore defaults
• the --font-sans / --font-mono theme tokens move out of @theme inline so Tailwind utilities reference the variables; body, pre/code, and the @pierre/diffs shadow-root hooks route through them
• the interface size drives the root font size (and with it every rem-based dimension); prompt and code sizes stay in absolute pixels so they do not scale twice
• custom names are normalized and quoted before reaching CSS or the canvas font shorthand, where an unquoted non-ident name silently voids the whole declaration
• font application survives async settings hydration, including terminals created while settings were still loading

Validation

• full web suite (1760 tests), desktop settings tests, contracts tests
• web + desktop + contracts typecheck, lint, formatting
• end-to-end against a live dev server: picker filtering, live application per surface, reload persistence, terminal width fitting, and the strip's collapse/restore behaviour

🤖 Generated with Claude Code

---

Note

Medium Risk
Interface font size drives root rem scaling app-wide, and typography touches terminal rendering and persisted client settings; preview local-fonts denial is an intentional security guard.

Overview
Adds Settings → Appearance → Typography so users can pick interface, prompt, code, and terminal font families and sizes (with optional Advanced per-surface overrides, macOS font smoothing, and live previews on real composer/diff/Ghostty surfaces).

Runtime wiring: new client settings flow through FontAppearanceSync into CSS variables (--font-sans, --font-mono, --font-composer, size tokens); bundled DM Sans / JetBrains Mono are removed in favor of system stacks. Family pickers use the Local Font Access API where available, with canvas/DOM probing for installed and monospace faces.

Terminal: Ghostty honors preferences, rejects proportional fonts, shrinks size to keep ~80 columns in narrow panes, and reapplies fonts after async hydration. Composer context strip collapses labels to icons when space is tight. Preview browser sessions deliberately omit local-fonts permission so untrusted pages cannot fingerprint installed fonts.

^{Reviewed by Cursor Bugbot for commit 284ea9f. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add configurable font family and size controls to Settings → Appearance

• Adds a Typography section to the Appearance settings panel with font family and size controls for interface, prompt, code, and terminal surfaces, each with a live preview.
• Introduces a FontFamilyPicker component that enumerates installed local fonts via the Local Font Access API with search and virtualized list rendering; falls back to a validated text input when the API is unavailable.
• Adds CSS variable-driven typography (--font-sans, --font-mono, --font-composer, --font-size-prompt, --font-size-code) applied to document.documentElement at runtime via a new FontAppearanceSync root component.
• Removes bundled DM Sans and JetBrains Mono font packages; the app now uses system UI fonts by default with user-configurable overrides.
• Terminal font rendering now rejects proportional families, sanitizes family name quoting, and auto-reduces font size to ensure at least 80 columns fit within the available width.
• Risk: .glass-opacity-slider CSS class and --glass-slider-* custom properties are renamed to .settings-slider / --settings-slider-*; any external references will break.

^{Macroscope summarized 284ea9f.}

closes #4376

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8d549a6f-3824-4f8b-9a41-f675fb1ef973

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new user-facing feature (configurable fonts and sizes in Settings → Appearance) with substantial new components, font picker UI with Local Font Access API integration, and changes to how fonts render across all app surfaces. New features of this scope warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit deb9252. Configure here.}

[cursor]

Repeat search skips Advanced expand

Medium Severity

The lastExpandedTargetRef isn't reset when the search target is cleared. This prevents the "Advanced" typography section from expanding on subsequent searches for the same advanced setting, making the target unscrollable.

 

^{Reviewed by Cursor Bugbot for commit deb9252. Configure here.}

[shubham-cpp]

@juliusmarminge the goat