[otavio]

The chat timeline and composer are capped at 48rem, so on a large monitor most of the window stays empty and wide content such as markdown tables has to scroll sideways.

This adds a Chat width setting under Settings → Appearance with three options: Comfortable (the current 48rem, still the default), Wide (72rem), and Full. It is a client setting, like diff colors. The root sets data-chat-width on <html>, CSS maps it to --chat-max-width, and the six chat containers that used max-w-3xl now use max-w-(--chat-max-width). The setting has a reset button, appears in settings search, and is included in "Restore defaults".

Desktop picks this up through the web app. Mobile has no fixed-width chat column, so nothing changes there.

The commits are split for review: the contracts setting and its test, the layout change, then the settings control.

Screenshots use a seeded test thread.

Before (Comfortable)	After (Full)

Wide:

Setting:

Made with Claude Opus 5 in Claude Code, running inside T3 Code.

Summary by CodeRabbit

• New Features
  • Added a Chat width setting with Comfortable, Wide, and Full options to adjust the chat timeline and composer.
  • Added Chat width to settings search.
  • Added a not-found page with a button to return home.
• Bug Fixes
  • Improved timeline minimap navigation at different chat widths; controls are interactive when there is enough space.
  • Updated the error page’s retry action.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds a persisted, user-facing chat layout feature that changes production rendering across the timeline and composer, with multiple opt-in width modes. The existing default is preserved, but the distributed implementation has no accompanying tests for the new behavior.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 74d174fa-c63d-4a9e-9f09-602b320dc2cf

📥 Commits

Reviewing files that changed from the base of the PR and between 89f7d1804d836ac1dde2d4264e8f6682b609909b and c1f0f25.

📒 Files selected for processing (11)

• apps/web/src/components/ChatView.tsx
• apps/web/src/components/chat/ChatComposer.tsx
• apps/web/src/components/chat/MessagesTimeline.logic.ts
• apps/web/src/components/chat/MessagesTimeline.test.tsx
• apps/web/src/components/chat/MessagesTimeline.tsx
• apps/web/src/components/settings/SettingsPanels.tsx
• apps/web/src/components/settings/settingsSearch.ts
• apps/web/src/index.css
• apps/web/src/routes/__root.tsx
• packages/contracts/src/settings.test.ts
• packages/contracts/src/settings.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/ChatView.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds a chatWidth setting with Comfortable, Wide, and Full options. The setting updates a root data attribute and CSS width token. Chat containers use that token, and the timeline minimap measures rendered content width to calculate gutters and navigation interaction.

Changes

Chat width setting

Layer / File(s)	Summary
Setting contract and Appearance controls packages/contracts/src/settings.ts, packages/contracts/src/settings.test.ts, apps/web/src/components/settings/SettingsPanels.tsx, apps/web/src/components/settings/settingsSearch.ts	Defines the ChatWidth schema and adds the setting to client settings and patches. The Appearance UI supports the three values, search, validation, change tracking, and reset behavior. Tests cover defaults, supported values, patches, and invalid values.
Root width state and CSS token apps/web/src/routes/__root.tsx, apps/web/src/index.css	Synchronizes chatWidth to the root element’s data-chat-width attribute. Defines the width token for comfortable, wide, and full modes.
Chat container widths and minimap behavior apps/web/src/components/ChatView.tsx, apps/web/src/components/chat/ChatComposer.tsx, apps/web/src/components/chat/ComposerSurface.tsx, apps/web/src/components/chat/MessagesTimeline.tsx, apps/web/src/components/chat/MessagesTimeline.logic.ts, apps/web/src/components/chat/MessagesTimeline.test.tsx	Uses the CSS variable for chat container widths. The minimap uses rendered content width for gutter calculations, remeasures when chatWidth changes, and gates navigation-button pointer interaction by hit-strip width. Tests cover gutter, strip, and navigation-interactivity calculations.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ClientSettings
  participant ContrastAppearanceSync
  participant DocumentRoot
  participant ChatLayout
  ClientSettings->>ContrastAppearanceSync: provide chatWidth
  ContrastAppearanceSync->>DocumentRoot: set data-chat-width
  DocumentRoot->>ChatLayout: expose --chat-max-width

Loading

Merge Risk: ⚪ Minimal · up to c1f0f

The chat-width setting and minimap adjustments appear ready for normal checks before merge.

Security Architecture Review

Security architecture risk: 🔵 Low · up to c1f0f

The new preference is limited to three layout choices and does not appear to change access to messages or privileged operations. Compatibility with older clients and some downstream coverage remain unverified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The evidenced effect is the current client's chat presentation and minimap controls; the examined flow does not expand message or service authority.

Trust Boundaries and Controls

• observed — The shared contract limits the preference to comfortable, wide, or full before the root copies it into the document attribute; CSS defines width behavior for those choices rather than interpreting an arbitrary width string.

Resilience and Maintainability Implications

• observed — Hydration and queued patches preserve update ordering, but a failed persistence write is logged without reversing the displayed optimistic value. Older-client recovery after reading the extended contract remains unverified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 15 functions across 11 files. (1 skipped:…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: adding a chat width setting for wide screens. It is concise and specific.
Description check	✅ Passed	The description explains what changed and why, documents the UI behavior, lists the available width modes, describes desktop and mobile impact, and includes before/after screenshots. It does not repro…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 15 functions across 11 files. (1 skipped: 1 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

[cursor]

Bugbot is paused — on-demand spend limit reached

Bugbot uses usage-based billing for this team and has hit its on-demand spend limit.

A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue.

[OmarAlaaeldein]

This would fix a real pain for me too — on a wide monitor the thread/composer sits at 768px and uses less than half the available width, with no setting to change it. Wide tables/code output constantly need horizontal scroll despite all the whitespace.

Love the Comfortable / Wide / Full approach with Comfortable staying default. That matches the existing readable / wide / expanded pattern already used for workspace pages, just extended to chat where it's actually needed.

[v1b3coder]

Supporting the need — on a 3440px-wide monitor the fixed 48rem column leaves most of the pane empty and wide output still scrolls sideways. Comfortable / Wide / Full with Comfortable as the default looks like the right shape, and as a client setting it also covers desktop and remote connections.

One gap in the diff: TIMELINE_CONTENT_MAX_WIDTH = 768 in MessagesTimeline.logic.ts still drives resolveTimelineMinimapHasPersistentGutter and resolveTimelineMinimapHitStripWidth. Those assume a centered column at most 768px wide, and the comment above the hit-strip helper warns that a too-wide strip sits on top of the message text and swallows its pointer events. With full, at a 2560px viewport the helper still computes a ~896px gutter and returns the full 40px strip while the real gutter is 0, so the strip covers the first ~40px of the message column. The setting needs to feed those helpers, or they should measure the lane element.

[saphid]

@otavio I opened OSSystems#1 against feat/chat-width-setting to close the minimap gap @v1b3coder described above. If you merge it, this PR picks it up.

• The minimap gutter and hover-strip helpers now take the rendered column width instead of assuming 768px, and they re-measure when chatWidth changes.
• The minimap's prev/next turn buttons ignore the pointer when the gutter is too narrow to hold them. Before this, they also covered message text at Full width.

I measured it in a real dev build. At Full width, the 40px strip used to overlap the column by 26px, so clicks on the text's left edge landed on the strip. It now shrinks to 14px with no overlap. Comfortable and Wide are unchanged. Focused tests and web typecheck pass. Details are in the linked PR.

Made with Claude Opus 5.5 in Claude Code, running inside T3 Code.