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 scales all rem-based layout globally; terminal font fitting and async hydration re-apply paths add edge cases, but changes are localized to appearance settings and rendering surfaces with validation for monospace terminals.

Overview
Adds Settings → Appearance → Fonts: four contexts (interface, prompt, code, terminal) with family pickers, size sliders, live previews, and restore-defaults integration. Eight new client settings land in contracts (four families, four clamped sizes).

Runtime application: appearanceFonts.ts normalizes family names, probes installed faces via canvas (not document.fonts.check()), validates monospace for cell-grid surfaces, and FontAppearanceSync writes --font-sans, --font-mono, --font-composer, and size tokens on the document root. Interface size drives root font-size (rem layout); prompt and code sizes stay in px. CSS moves font tokens to @theme so overrides work; body, composer, chat code, and @pierre/diffs hooks route through the variables.

Terminal: ThreadTerminalDrawer applies fontFamilyTerminal / fontSizeTerminal at create and on live updates; proportional families are rejected; narrow panes auto-shrink rendered size toward an 80-column fit via fittedTerminalFontSize.

Composer strip: BranchToolbar collapses context labels to icons when space is tight (useLabelsOverflow, resize/font-load aware, hysteresis).

UI polish: Glass opacity slider class renamed to .settings-slider; composer prompt size drops hardcoded Tailwind text sizes in favor of .composer-editor-surface.

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

Note

Add configurable font families and sizes to Settings → Appearance

• Adds four font family selectors (Interface, Prompt, Code, Terminal) and corresponding size sliders to the Appearance settings panel, with live preview cards for each.
• Introduces appearanceFonts.ts with utilities for font stack normalization, canvas-based font availability detection, monospace validation, and CSS variable application via applyAppearanceFontVariables.
• Adds font size and family fields (fontSizeInterface, fontSizePrompt, fontSizeCode, fontSizeTerminal, fontFamilySans, fontFamilyComposer, fontFamilyCode, fontFamilyTerminal) to ClientSettingsSchema in packages/contracts/src/settings.ts.
• Syncs settings to CSS variables on the document root via a new FontAppearanceSync component mounted in the app shell.
• The embedded terminal reads fontFamilyTerminal and fontSizeTerminal from client settings, applies them at creation, and updates live; the terminal surface also dynamically reduces font size to preserve at least 80 columns within available canvas width.
• The BranchToolbar gains overflow-aware compact mode that collapses labels to icons under constrained widths, triggered by a new useLabelsOverflow hook that accounts for font changes.
• Behavioral Change: the glass opacity slider CSS class and variables are renamed from .glass-opacity-slider/--glass-slider-* to .settings-slider/--settings-slider-*.

^{Macroscope summarized a6f5f65.}

[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: 3e03bdb5-1fbb-42c3-9e3a-0a6bbf0d9ace

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 new UI components, settings fields, font detection logic, and terminal auto-sizing. New features warrant human review.

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