feat(web): add transcript presentation settings

[charlielockyer-rice]

Claude Code Desktop already exposes transcript text-size and width controls. This PR brings the same presentation model to T3 Code without changing the existing default.

What Changed

• Add Small, Medium, and Large transcript text sizes.
• Add Narrow, Medium, and Wide transcript widths.
• Apply the selected width consistently to the transcript, composer, banners, and context strip.
• Keep Medium/Medium as the default, matching the previous fixed presentation.

Why

The fixed transcript column can feel too narrow on large displays, while different readers may prefer smaller or larger conversation text. These settings make both adjustable without changing the existing experience for anyone who leaves the defaults alone.

UI Changes

The old fixed presentation corresponds to Medium text / Medium width.

Before	After

All nine transcript combinations

Text size	Narrow	Medium	Wide
Small
Medium
Large

Validation

• Focused formatting and lint checks for the changed files.
• vp run --filter @t3tools/contracts typecheck
• vp run --filter @t3tools/web typecheck
• Schema decoding smoke coverage for defaults, supported values, and invalid values.
• Verified all nine combinations in the web client and restored Medium/Medium afterward.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI changes
• No animation or interaction change requires a video

Note

Add transcript text size and width presentation settings

• Adds transcriptTextSize and transcriptWidth settings (each with small/medium/large or narrow/medium/wide options) to ClientSettingsSchema and the General Settings panel UI.
• The chat column sets data-transcript-text-size and data-transcript-width data attributes, which drive CSS variables (--transcript-text-size, --chat-content-max-width) defined in index.css to scale typography and max-width dynamically.
• Minimap helpers in MessagesTimeline.logic.ts now accept a caller-measured sideGutter instead of computing it from viewport width internally.
• Behavioral Change: text-sm is replaced by a CSS variable in several timeline components, so font size now follows the user's transcript text size setting rather than a fixed value.

^{Macroscope summarized 160179d.}

---

Note

Low Risk
Presentation-only settings with medium defaults; changes are mostly CSS variables and layout measurement, with schema tests for invalid values.

Overview
Adds transcript text size (small / medium / large) and transcript width (narrow / medium / wide) as persisted client settings, with medium for both as the default so behavior matches the old fixed layout.

Settings & contracts: New transcriptTextSize and transcriptWidth on ClientSettings / patch schemas with validation tests. General settings gets two toggle groups plus reset-to-default wiring in restore-defaults.

Chat UI: ChatView exposes data-transcript-text-size and data-transcript-width on the chat column; index.css maps those to --chat-content-max-width (40 / 48 / 64rem) and --transcript-text-size / compact sizes. Timeline, composer, banners, context strip, and markdown use max-w-[var(--chat-content-max-width,48rem)] instead of max-w-3xl; user/review message text and .chat-markdown scale via CSS variables (headings use em relative to base).

Timeline minimap: Gutter/hit-strip logic no longer assumes a fixed 768px column—it measures the side gutter from the [data-timeline-root] element and recomputes when transcriptWidth changes.

^{Reviewed by Cursor Bugbot for commit 160179d. 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 Plus

Run ID: 40fd34b6-2540-47cf-b97a-5af111ef73e9

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

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

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

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

[cursor]

Details summary ignores text size

Medium Severity

ThreadErrorBanner still caps at hardcoded 48rem while living under the new data-transcript-width column. Composer banners now follow --chat-content-max-width, so Narrow/Wide leaves the thread error banner misaligned with the transcript and composer.

Additional Locations (1)

• apps/web/src/components/chat/ComposerBannerStack.tsx#L85-L90

 

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

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces new user-facing presentation settings with cross-cutting UI changes. Additionally, there is an unresolved review comment identifying a consistency bug where ThreadErrorBanner doesn't respect the new width setting.

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