feat(web): collapse large git diffs by default to make chat more readable

[t3dotgg]

What changed

• adaptively expand only small latest-turn change summaries
• show a compact scope preview with representative files for large latest-turn changes
• collapse older changed-file summaries to a one-line receipt by default
• persist explicit expanded and collapsed choices across reloads
• add labeled disclosure controls and non-color-only diff-stat accessibility text

Why

Large changed-file trees dominate the conversation and make completed work difficult to scan. The inline surface should summarize scope first and leave the full tree and diff available on demand.

Behavior

• latest changes with at most 5 files and 200 changed lines expand automatically
• larger latest changes show top-level scope counts and three files selected across distinct scopes
• older turns start collapsed
• expanding a large receipt initially keeps folders collapsed to avoid another oversized view

Validation

• vp test run apps/web/src/components/chat/ChangedFilesTree.test.tsx apps/web/src/components/chat/changedFilesPresentation.test.ts apps/web/src/uiStateStore.test.ts
• vp run --filter @t3tools/web typecheck
• targeted vp lint and vp fmt --check
• isolated authenticated browser pass covering the latest-turn preview, older-turn collapse, tree expansion, folder reveal, and persisted state after reload

Note

Collapse large git diffs in chat to improve readability

• Adds collapsed, preview, and expanded display modes to ChangedFilesCard, controlled by new expanded, showCompactPreview, and onExpandedChange props; a chevron button in the header toggles between states.
• When collapsed with preview enabled, the card shows scope summary badges and a representative set of changed files, plus a 'Show all N files' button to expand.
• MessagesTimeline now auto-expands changed-file sections only for the latest turn and only when under configurable file/line limits (via new shouldAutoExpandChangedFiles in changedFilesPresentation.ts); older turns render collapsed.
• Persisted expansion state in uiStateStore is now versioned (THREAD_CHANGED_FILES_EXPANSION_VERSION = 1) and stores explicit true/false per turn; legacy unversioned state is discarded on load.
• DiffStatLabel gains role="group" and an aggregated aria-label for screen readers, with visual tokens marked aria-hidden.

^{Macroscope summarized d7abda3.}

---

Note

Low Risk
Chat UI and local UI-state persistence only; no auth, API, or data-layer changes. Versioned migration may reset prior collapse preferences once.

Overview
Changed-files blocks in the chat timeline are now collapsible instead of always showing the full tree, so large diffs don’t dominate the thread.

ChangedFilesCard gains three UI modes (expanded, preview, collapsed) driven by parent props. The latest turn auto-expands only when there are ≤5 files and ≤200 changed lines; otherwise it shows a compact preview (top-level scope counts plus up to three representative files, each opening that file’s diff). Older turns default to a one-line receipt with no file list. Disclosure is a clickable header with aria-expanded; folder expand/collapse and “Open diff” actions are updated and only shown when relevant.

Presentation logic moves into changedFilesPresentation.ts (shouldAutoExpandChangedFiles, summarizeChangedFileScopes, selectChangedFilePreview). MessagesTimeline delegates to ChangedFilesCard and passes latestTurnId via activity context for latest-vs-older behavior.

uiStateStore now persists both expanded and collapsed choices per turn, tagged with threadChangedFilesExpansionVersion: 1; legacy persisted folder-only collapse state is ignored on load. DiffStatLabel adds a screen-reader aria-label on the stat group with decorative +/- spans marked aria-hidden.

^{Reviewed by Cursor Bugbot for commit d7abda3. 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: c1d3a38f-047c-42e7-a7c1-975357e90129

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
• Commit unit tests in branch t3code/collapse-large-diffs

---

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

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

[macroscopeapp]

Approvability

Verdict: Approved

UI-only changes adding collapse/expand functionality for changed files display in chat. Self-contained presentation logic with tests, minor accessibility improvements, and UI state persistence updates. No backend or security implications.

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