Add mobile multi-diff view#318081
Merged
Merged
Conversation
Introduces MobileMultiDiffView with sticky per-file headers, fold/unfold via a chevron-only toggle target (click, tap, keyboard), and async per-file content loading; wires it into the mobile overlay/titlebar plumbing and adds a Vite playground entry for iteration.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new phone-focused multi-file diff overlay to the Agents (sessions) window, and routes the existing “changes” entry point to this stacked multi-diff experience for better mobile browsing of session outputs.
Changes:
- Introduces
MobileMultiDiffView, a full-screen overlay that renders multiple file diffs in one scroll view with sticky per-file headers and collapsible sections. - Updates the mobile “session changes” command to open multi-diff (or fall back to single-file diff when only one diffable file exists), with a notification when no file-level diffs are available.
- Tweaks mobile diff/titlebar UI and shared overlay styles, plus adds a Vite playground page for iterating on the new multi-diff UI.
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/contrib/sessions/browser/mobile/mobileOverlayContribution.ts | Routes the mobile “changes” command to multi-diff (and single-diff shortcut), adds notification for no diffable files. |
| src/vs/sessions/browser/parts/mobile/mobileTitlebarPart.ts | Adjusts “changes” pill visibility/content to support sessions with file changes but zero line deltas. |
| src/vs/sessions/browser/parts/mobile/contributions/mobileMultiDiffView.ts | New multi-file diff overlay implementation with async per-file rendering and tokenization. |
| src/vs/sessions/browser/parts/mobile/contributions/mobileDiffView.ts | Small header layout tweak (inline header info) and removes back label text. |
| src/vs/sessions/browser/parts/mobile/contributions/media/mobileOverlayViews.css | Adds inline header layout and refines diff layout spacing/background. |
| src/vs/sessions/browser/parts/mobile/contributions/media/mobileMultiDiffView.css | New styling for the stacked multi-diff view with sticky file headers and per-file horizontal scrolling. |
| build/vite/mobile-multi-diff.ts | Adds a Vite playground TS entry that renders MobileMultiDiffView with mocked services/content. |
| build/vite/mobile-multi-diff.html | Adds a Vite playground HTML page to host the multi-diff view for iteration. |
Copilot's findings
- Files reviewed: 8/8 changed files
- Comments generated: 6
osortega
approved these changes
May 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduces MobileMultiDiffView with sticky per-file headers, fold/unfold via a chevron-only toggle target (click, tap, keyboard), and async per-file content loading; wires it into the mobile overlay/titlebar plumbing and adds a Vite playground entry for iteration.