Add file-backed appearance config for font overrides

[nassimna]

Summary

• Add a global appearance.json config in the server state directory so users can change UI and terminal font family / size now, before a dedicated settings UI exists.
• Bootstrap appearance.json automatically on first run so existing users and fresh installs do not hit startup errors when the file is missing.
• Validate and watch the appearance config on the server, expose the resolved appearance through server.getConfig, and push section-aware server.configUpdated events on reload.
• Apply the resolved appearance live in the web app through CSS variables and terminal updates so editing appearance.json immediately affects typography.
• Convert the targeted fixed pixel text utilities to rem so UI font-size changes actually scale across the main surfaces.
• Add settings-page visibility for the appearance.json path plus an open-in-editor action, so users can find and edit the config file easily.
• Leave full in-app font controls for a later PR so the core T3 Code team can design that UI in the style they want.

Context

This is aimed at a real usability problem on high-resolution monitors, especially QHD and above, where the default typography can read too small.

This PR intentionally solves that immediately with a user-editable config file. Users can change the font values now by editing appearance.json. A later PR can add a proper in-app settings UI for the same values.

Testing

• bun run test src/appearance.test.ts src/wsServer.test.ts in apps/server
• bun run test src/appearance.test.ts src/wsNativeApi.test.ts in apps/web
• bun run test src/appearance.test.ts in packages/contracts
• bun lint
• bun typecheck

Refs #418
Refs #254

Note

Add file‑backed appearance config and apply terminal font overrides across web and server components

Introduce a server Appearance service with file‑backed appearance.json, broadcast config updates with changedSections and split issue arrays, load appearance in serverGetConfig, and wire the layer into runtime; on the web, add an in‑memory appearance store that applies CSS variables and a useResolvedAppearance hook, sync server appearance at app root, and update TerminalViewport to use appearance.monoFontFamily and appearance.terminalFontSizePx with a shared fitTerminalAndSyncSize util; convert fixed px font sizes to rem across UI. Key types and payloads in contracts are updated to include appearance and separate issue arrays. Core entry points: apps/server/src/appearance.ts, apps/server/src/wsServer.ts, packages/contracts/src/server.ts, and apps/web/src/appearance.ts.

📍Where to Start

Start with the makeAppearance service and change stream in apps/server/src/appearance.ts, then review the WebSocket wiring in apps/server/src/wsServer.ts and the web runtime application in apps/web/src/appearance.ts.

^{Macroscope summarized 6bc6850.}

[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: 7435c118-cb95-48ac-9549-e5d742a303ac

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
• Post copyable unit tests in a comment

---

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.}