Agents web: Host filtering improvements and mobile improvements#313062
Merged
Conversation
…view, tool cards - Feature 1: Add horizontally scrollable filter chips below session list header on phone layout. Chips for Completed, In Progress, and Failed status filters; active state highlights chip. - Feature 2: Improve touch targets for collapsible tool cards in chat on mobile. Minimum 44px height for tool card toggle buttons and always-visible chevron. - Feature 3: Add dedicated full-screen mobile terminal view overlay. Tapping a terminal tool invocation on phone opens a full-screen output view with back navigation, monospace output, and copy/search footer actions. - Feature 4: Add dedicated full-screen mobile diff view overlay. Tapping a file change on phone opens a Diff/File segmented control view with inline unified diff (colored +/- gutters) and full file content tab. All features are phone-only (IsPhoneLayoutContext). Desktop behavior is unchanged. Layer rules preserved: sessions/browser imports only vs/workbench/services; contrib-layer command handlers bridge to local-interface view functions. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds several phone-only UX enhancements to the Agents (sessions) window: a session-list status chip row, improved touch targets for collapsible tool cards, and new full-screen mobile overlay views for terminal output and diffs, with command-based entry points gated by IsPhoneLayoutContext.
Changes:
- Add mobile session status filter chips to the Sessions view (phone layout).
- Introduce phone-only commands to open new mobile terminal/diff overlay views, and ensure they’re registered from the chat contribution.
- Add new mobile overlay view implementations + shared CSS, and tweak mobile chat shell CSS for better touch affordances.
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/contrib/sessions/browser/views/sessionsView.ts | Conditionally creates a DOM slot and instantiates MobileSessionFilterChips on phone layout. |
| src/vs/sessions/contrib/sessions/browser/mobile/mobileOverlayContribution.ts | Registers phone-only commands that open the terminal/diff overlay views. |
| src/vs/sessions/contrib/chat/browser/chat.contribution.ts | Side-effect import to ensure mobile overlay commands are registered. |
| src/vs/sessions/browser/parts/mobile/mobileSessionFilterChips.ts | New chip-row widget that drives status filtering via the sessions list host. |
| src/vs/sessions/browser/parts/mobile/mobileChatShell.css | CSS tweaks to improve touch targets and chevron visibility on phone. |
| src/vs/sessions/browser/parts/mobile/media/mobileSessionFilterChips.css | Styling for the new chip row. |
| src/vs/sessions/browser/parts/mobile/contributions/mobileTerminalView.ts | New full-screen phone overlay to show terminal tool output + actions. |
| src/vs/sessions/browser/parts/mobile/contributions/mobileDiffView.ts | New full-screen phone overlay to show a unified diff and file view (custom diff engine). |
| src/vs/sessions/browser/parts/mobile/contributions/media/mobileOverlayViews.css | Shared overlay CSS + terminal/diff specific styling. |
Copilot's findings
- Files reviewed: 9/9 changed files
- Comments generated: 15
osortega
changed the title
Co-authored-by: Copilot <copilot@github.com>
roblourens
approved these changes
Apr 28, 2026
dpearson2699
pushed a commit
to dpearson2699/vscode
that referenced
this pull request
Apr 29, 2026
…osoft#313062) * sessions: mobile UI improvements — filter chips, terminal view, diff view, tool cards - Feature 1: Add horizontally scrollable filter chips below session list header on phone layout. Chips for Completed, In Progress, and Failed status filters; active state highlights chip. - Feature 2: Improve touch targets for collapsible tool cards in chat on mobile. Minimum 44px height for tool card toggle buttons and always-visible chevron. - Feature 3: Add dedicated full-screen mobile terminal view overlay. Tapping a terminal tool invocation on phone opens a full-screen output view with back navigation, monospace output, and copy/search footer actions. - Feature 4: Add dedicated full-screen mobile diff view overlay. Tapping a file change on phone opens a Diff/File segmented control view with inline unified diff (colored +/- gutters) and full file content tab. All features are phone-only (IsPhoneLayoutContext). Desktop behavior is unchanged. Layer rules preserved: sessions/browser imports only vs/workbench/services; contrib-layer command handlers bridge to local-interface view functions. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * MVP Co-authored-by: Copilot <copilot@github.com> * Review * Clean up * Filter fixes * Search fix Co-authored-by: Copilot <copilot@github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: Copilot <copilot@github.com>
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.
Mobile UI Improvements for Agents Window
Four phone-only UX improvements for the
vscode.dev/agentsworkbench, based on the Copilot Mobile redesign mockup evaluation.All features are gated on
IsPhoneLayoutContext. Desktop behavior is unchanged.Feature 1: Filter Chips for Session List
Adds a horizontally scrollable chip row below the session list header (phone only).
Completed,In Progress,Failedstatus chips — act as inclusive togglesbadge.background/badge.foreground)MobileSessionFilterChipsinbrowser/parts/mobile/mobileSessionFilterChips.tsFeature 2: Touch-Friendly Tool Cards
Improves touch targets for collapsible tool cards in the chat thread on phone.
mobileChatShell.cssFeature 3: Dedicated Mobile Terminal View
Full-screen overlay for terminal tool output on phone, replacing the gated-out desktop panel.
← Back+ command name + exit code/duration badgebrowser/parts/mobile/contributions/mobileTerminalView.tsFeature 4: Dedicated Mobile Diff View
Full-screen overlay for file changes produced by a coding session.
Diff | Filetabsbrowser/parts/mobile/contributions/mobileDiffView.tsArchitecture
vs/sessions/browser/**imports only fromvs/workbench/services/**; contrib-layer command handlers (vs/sessions/contrib/sessions/browser/mobile/) bridge to view functions via local interfaces (TypeScript structural typing)position: fixed; inset: 0pattern,safe-area-inset-bottomfor iOS, andGesture.addTarget+EventType.CLICK+TouchEventType.Tapfor touch compatibility