Mobile titlebar: live session title + web host widget on welcome#312261
Draft
Mobile titlebar: live session title + web host widget on welcome#312261
Conversation
On phone layouts the desktop titlebar is hidden and replaced by a mobile-specific bar above the grid. Two issues fixed here: 1. The title was hardcoded to "New Session" because `setTitle()` was never called. It now subscribes to `ISessionsManagementService.activeSession.title` via `autorun` and updates live. 2. On the home/empty (welcome) screen there was no way to pick an agent host or connect on mobile web. The host filter widget (dropdown + connection status/connect button) from the web titlebar is now surfaced in the mobile titlebar's center slot while the welcome view is visible. ## Implementation - New `MobileTitlebarPart` under `browser/parts/mobile/` replaces the old `MobileTopBar`. It hosts a hamburger, a center slot with a title element and a `MenuWorkbenchToolBar` for a new `Menus.MobileTitleBarCenter` menu id, and a new-session button. The center slot switches between title and toolbar based on `SessionsWelcomeVisibleContext` AND whether the toolbar has any contributed items, so empty menus (e.g., desktop/electron) fall back to showing the title. - Instantiated via `IInstantiationService.createInstance` so it can consume `ISessionsManagementService` / `IContextKeyService`. - `hostFilter.contribution.ts` registers a second menu entry on `Menus.MobileTitleBarCenter` (gated by `IsWeb && !AuxiliaryWindow && HasAgentHosts && SessionsWelcomeVisible`) plus a matching `IActionViewItemService.register()` call reusing the existing `HostFilterActionViewItem`. No new widget code. - Layering is preserved: `browser/` never imports from `contrib/`; the mobile part only knows about the menu id. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Agent Sessions (Agents window) phone layout to make the mobile titlebar reflect the active session title live and to expose the web agent-host picker on the welcome screen, bringing feature parity with the desktop/web titlebar while keeping layering intact.
Changes:
- Replace the old
MobileTopBarDOM component with a new DI-friendlyMobileTitlebarPartthat syncs toactiveSession.titleand can host a center-slot toolbar. - Introduce
Menus.MobileTitleBarCenterand contribute the existing host filter widget to it on web while the welcome overlay is visible. - Update phone-layout CSS and documentation to match the new component and behavior.
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/MOBILE.md | Updates mobile layout documentation and references to the new mobile titlebar implementation. |
| src/vs/sessions/contrib/remoteAgentHost/browser/hostFilter.contribution.ts | Adds a second menu location + action view item registration to surface the host filter in the mobile titlebar center slot on web welcome. |
| src/vs/sessions/browser/workbench.ts | Wires creation/destruction of MobileTitlebarPart for phone layouts via DI and uses its height for layout offsets. |
| src/vs/sessions/browser/parts/mobile/mobileTopBar.ts | Removes the old hardcoded-title mobile top bar implementation. |
| src/vs/sessions/browser/parts/mobile/mobileTitlebarPart.ts | New mobile titlebar part: live session title via autorun, center-slot MenuWorkbenchToolBar, welcome-driven mode switch. |
| src/vs/sessions/browser/parts/mobile/mobileChatShell.css | Adds layout/styles for the center slot and toggling between title vs. toolbar actions. |
| src/vs/sessions/browser/menus.ts | Adds the new Menus.MobileTitleBarCenter menu id. |
Copilot's findings
- Files reviewed: 7/7 changed files
- Comments generated: 2
| // Center slot: title and/or actions container (mutually exclusive) | ||
| const center = append(this.element, $('div.mobile-top-bar-center')); | ||
|
|
||
| this.sessionTitleElement = append(center, $('div.mobile-session-title')); |
There was a problem hiding this comment.
sessionTitleElement is rendered as a plain div but wired up as a click target. As-is it is not keyboard-focusable and doesn’t follow the established sessions UI pattern for custom tap targets on touch devices (Gesture + TouchEventType.Tap). Consider rendering this as a real <button> (preferred) or adding tabIndex=0, role='button', EventType.KEY_DOWN (Enter/Space), and Gesture.addTarget + Tap handling so it works reliably on iOS and for keyboard/screen-reader users (see sessionTypePicker.ts / sessionWorkspacePicker.ts for the pattern).
Suggested change
| this.sessionTitleElement = append(center, $('div.mobile-session-title')); | |
| this.sessionTitleElement = append(center, $('button.mobile-session-title')); | |
| this.sessionTitleElement.setAttribute('type', 'button'); |
Comment on lines
+50
to
+63
| }, { | ||
| // On phone/mobile layouts the desktop titlebar is replaced | ||
| // by the MobileTitlebarPart. Surface the host picker in its | ||
| // center slot while the welcome (home/empty) screen is | ||
| // visible, so users can still switch hosts and connect. | ||
| id: Menus.MobileTitleBarCenter, | ||
| group: 'navigation', | ||
| order: 0, | ||
| when: ContextKeyExpr.and( | ||
| IsWebContext, | ||
| IsAuxiliaryWindowContext.toNegated(), | ||
| HasAgentHostsContext, | ||
| SessionsWelcomeVisibleContext, | ||
| ), |
There was a problem hiding this comment.
This change surfaces HostFilterActionViewItem in the mobile titlebar on web welcome. However HostFilterActionViewItem’s interactive elements are divs that currently only listen for EventType.CLICK (no Gesture.addTarget / TouchEventType.Tap). In the sessions UI, custom tap targets typically use Gesture+Tap to work reliably on iOS touch (e.g. sessionTypePicker.ts, sessionWorkspacePicker.ts). It would be good to update the host filter widget accordingly; otherwise the new mobile entry may not respond to taps consistently on iOS.
- MobileTitlebarPart: render the session title as a <button> so it is keyboard-focusable and handles touch via native button semantics. - HostFilterActionViewItem: register Gesture.addTarget on both the dropdown pill and the connection button, and listen for TouchEventType.Tap alongside CLICK so iOS taps work reliably. Use dom.EventHelper.stop for consistency. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
SessionsWelcomeVisibleContext is only true during the first-run walkthrough overlay, not on the home/new-session screen. As a result the host picker was never registered into the mobile titlebar's center slot (the MenuWorkbenchToolBar reported zero items and the title stayed visible). Switch the gate to IsNewChatSessionContext, which is true whenever a new (empty) chat session is active, so the widget shows on the phone home screen and hides once a real session starts. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The '.monaco-action-bar .action-item' base rule sets display:block with higher specificity than '.agent-host-filter-combo', which caused the dropdown pill and connect button inside the li to stack vertically on the mobile titlebar. Qualify the combo selector with the action-item class to override that rule and restore the intended horizontal layout. Also switch '.mobile-top-bar-actions' to flex-direction: column so future mobile titlebar actions can stack while each compound item still lays out its internal controls as a row. Co-authored-by: Copilot <223556219+Copilot@users.noreply.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.
On phone layouts the desktop titlebar is hidden and replaced by a mobile-specific bar above the grid. Two issues fixed here:
setTitle()was never called. It now subscribes toISessionsManagementService.activeSession.titleviaautorunand updates live.Implementation
MobileTitlebarPartunderbrowser/parts/mobile/replaces the oldMobileTopBar. It hosts a hamburger, a center slot with a title element and aMenuWorkbenchToolBarfor a newMenus.MobileTitleBarCentermenu id, and a new-session button. The center slot switches between title and toolbar based onSessionsWelcomeVisibleContextAND whether the toolbar has any contributed items, so empty menus (e.g., desktop/electron) fall back to showing the title.IInstantiationService.createInstanceso it can consumeISessionsManagementService/IContextKeyService.hostFilter.contribution.tsregisters a second menu entry onMenus.MobileTitleBarCenter(gated byIsWeb && !AuxiliaryWindow && HasAgentHosts && SessionsWelcomeVisible) plus a matchingIActionViewItemService.register()call reusing the existingHostFilterActionViewItem. No new widget code.browser/never imports fromcontrib/; the mobile part only knows about the menu id.Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com