Add scoped typography settings

[codycurley]

What changed

This adds scoped local typography controls to the web app's existing settings flow.

• add client-side settings for UI font family, user-message font mode, chat text size and line height, and code text size and line height
• apply typography through root CSS variables, with stored values applied before first paint to avoid a flash back to defaults
• let sent user messages switch between monospace and sans, with monospace mode following the code typography controls
• update the timeline height estimator so virtualization stays aligned with the rendered typography
• add focused test coverage for the new user-message typography behavior

Why it changed

Typography in the app was mostly hardcoded, which made it impossible to tune the reading experience without editing source. The requested scope was narrower than a full global typography override, so this keeps the controls tied to concrete product surfaces instead of changing every inherited sans or mono surface in one shot.

Impact

• users can tune chat and code readability directly in Settings
• user messages can keep the old monospace appearance or switch to sans
• the settings stay local-only and fit the app's existing unified settings architecture
• terminal behavior is unchanged in this PR

Validation

• bun fmt
• bun lint
• bun typecheck
• cd apps/web && bun run test src/components/timelineHeight.test.ts

Note

Add scoped typography settings for chat, user messages, and code blocks

• Adds font family, user message font, chat font size/line-height, and code font size/line-height controls to the General Settings panel in SettingsPanels.tsx.
• Introduces CSS variables for all typography properties in index.css, replacing hardcoded Tailwind font sizes in chat markdown, user messages, and Shiki code blocks.
• New typography.ts module handles default values, option lists, CSS variable generation, and applying settings to the DOM on boot and on change.
• Message height estimation in the virtualizer now accepts optional typography settings so row heights stay accurate when font size or line height changes.
• Behavioral Change: plain user messages now render in a div instead of pre, removing default pre whitespace semantics; whitespace handling is now controlled by CSS classes.

^{Macroscope summarized 481b644.}

---

Note

Medium Risk
Touches global CSS variables and chat timeline virtualization height estimates, so regressions could show up as layout/scroll glitches or inconsistent typography across renders. No security- or data-critical logic is changed.

Overview
Adds scoped typography customization via new client settings for UI font family, user message font mode, and chat/code font size + line height, including reset-to-default behavior in Settings.

Typography is applied through root CSS variables (pre-applied on startup to avoid a flash) and new utility hooks/modules (e.g. typography.ts, useTypographySettings, useAppliedTypographySettings).

Chat surfaces are updated to use the new app-chat-typography / app-user-message-typography classes, and timeline row height estimation/virtualizer re-measurement now accounts for the active typography settings (with updated/added tests to cover wrapping changes).

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

[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

Run ID: 19c4a3ba-2ff2-4448-b1b1-436f0707687d

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes 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 17dfcbb. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a new user-facing typography customization feature with new settings schema types, a new typography module, new React hooks, and settings UI controls. While well-scoped to visual presentation with no security/billing implications, the substantial new capability (700+ additions, multiple new files, new user-facing settings) warrants human review.

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