sessions: add mobile-compatible PWA layout for agent sessions

Introduce a responsive mobile layout for the agent sessions window,
enabling a native app-like experience when accessed via mobile browsers
or installed as a PWA. The implementation uses mobile Part subclasses,
a MobileTopBar chrome component, CSS overrides, and when-clause gating
to progressively enhance the desktop sessions workbench for phone
viewports.

Key changes:

Layout policy & viewport detection:
- SessionsLayoutPolicy with observable viewport classification
  (phone <640px, tablet 640-1024, desktop >1024)
- Context keys: ViewportClassContext, IsMobileLayoutContext,
  KeyboardVisibleContext
- Runtime viewport class change detection in layout()

Mobile chrome components:
- MobileTopBar: hamburger + session title + new session (+)
- MobileNavigationStack: history.pushState integration for Android
  back button
- Sidebar drawer overlay with backdrop dismiss

Mobile Part subclasses:
- MobileChatBarPart, MobileSidebarPart, MobileAuxiliaryBarPart,
  MobilePanelPart override layout()/updateStyles() only
- AgenticPaneCompositePartService conditionally instantiates
  mobile vs desktop Parts

View gating:
- Desktop-only views hidden on mobile via IsMobileLayoutContext:
  Changes, Files, Logs, Terminal, Code Review, Open in VS Code
- Customization toolbar hidden via CSS on phone

CSS & PWA:
- Edge-to-edge chat (no card chrome on phone)
- Safe area insets, touch targets (44px min), overscroll containment
- PWA manifest with standalone display mode
- viewport-fit=cover meta tag
- Dynamic theme-color meta created programmatically

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: osortega

extensions/copilot/package-lock.json

@@ -5,6 +5,9 @@
 	"lang": "en-US",
 	"display": "standalone",
 	"display_override": ["window-controls-overlay"],
+	"background_color": "#1e1e1e",
+	"theme_color": "#1e1e1e",
+	"orientation": "any",
 	"icons": [
 		{
 			"src": "code-192.png",

resources/server/manifest.json

@@ -12,9 +12,10 @@
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-title" content="Code">
 		<link rel="apple-touch-icon" href="{{WORKBENCH_WEB_BASE_URL}}/resources/server/code-192.png" />
+		<link rel="apple-touch-startup-image" href="{{WORKBENCH_WEB_BASE_URL}}/favicon.ico">
 
 		<!-- Disable pinch zooming -->
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
 		<!-- Workbench Configuration -->
 		<meta id="vscode-workbench-web-configuration" data-settings="{{WORKBENCH_WEB_CONFIGURATION}}">

src/vs/code/browser/workbench/workbench.html

@@ -0,0 +1,157 @@
+# Mobile Agent Sessions — Architecture
+
+## Core Principle
+
+**Every feature accessible in the desktop window must be accessible on mobile — same functionality, different presentation.** Mobile is NOT "desktop minus stuff." It is a parallel UI layer where the same services, views, and actions are rendered through mobile-native interaction patterns.
+
+## Architecture
+
+### Mobile Part Subclasses
+
+Desktop Parts (`ChatBarPart`, `SidebarPart`, `PanelPart`, `AuxiliaryBarPart`) remain unchanged. Each has a **mobile subclass** that extends it and overrides only `layout()` and/or `updateStyles()` to remove card margins, border insets, and inline theme styles. `AgenticPaneCompositePartService` conditionally instantiates the mobile or desktop variant at startup based on viewport width (`< 640px` → phone).
+
+This means:
+- Desktop code has **zero** phone-layout checks — all mobile logic lives in mobile subclasses, `MobileTopBar`, and CSS.
+
+**Known limitation:** Part classes are chosen once at construction and never swapped at runtime. If the viewport changes class (e.g., device rotation from portrait to landscape), the original Part implementations remain. This is acceptable because real mobile devices don't switch between phone and desktop — the scenario only occurs in DevTools emulation.
+
+### View & Action Gating
+
+Views, menu items, and actions use `when` clauses with the `sessionsIsMobileLayout` context key to control visibility per viewport class. This follows a **default-deny** approach for mobile:
+
+- **Desktop-only features** add `when: IsMobileLayoutContext.negate()` to their view descriptors and menu registrations. They simply don't appear on mobile.
+- **Mobile-compatible features** (chat, sessions list) have no mobile gate — they render on all viewports.
+- **Mobile-specific replacements** (when ready) register with `when: IsMobileLayoutContext` and live in separate files under `parts/mobile/contributions/`.
+
+Two registrations can target the same slot with opposite `when` clauses, pointing to different view classes in different files — giving full file separation with no internal branching.
+
+#### Current Gating Status
+
+| Feature | Mobile Status | Mechanism |
+|---------|--------------|-----------|
+| Sessions list (sidebar) | ✅ Compatible | No gate |
+| Chat views (ChatBar) | ✅ Compatible | No gate |
+| Changes view (AuxiliaryBar) | ❌ Gated | `when: !sessionsIsMobileLayout` on view descriptor |
+| Files view (AuxiliaryBar) | ❌ Gated | `when: !sessionsIsMobileLayout` on view descriptor |
+| Logs view (Panel) | ❌ Gated | `when: !sessionsIsMobileLayout` on view descriptor |
+| Terminal actions | ❌ Gated | `when: !sessionsIsMobileLayout` on menu item |
+| "Open in VS Code" action | ❌ Gated | `when: !sessionsIsMobileLayout` on menu item |
+| Code review toolbar | ❌ Gated | `when: !sessionsIsMobileLayout` on menu item |
+| Customizations toolbar | ❌ Hidden | CSS `display: none` on phone |
+| Titlebar | ❌ Hidden | Grid `visible: false` + CSS + MobileTopBar replacement |
+
+### Phone Layout
+
+On phone-sized viewports (`< 640px` width):
+
+```
+┌──────────────────────────────────┐
+│  [☰]  Session Title          [+] │  ← MobileTopBar (prepended before grid)
+├──────────────────────────────────┤
+│                                  │
+│     Chat (edge-to-edge)          │  ← Grid: ChatBarPart fills 100%
+│                                  │
+│                                  │
+│                                  │
+│  ┌──────────────────────────┐    │
+│  │  Chat input              │    │  ← Pinned to bottom
+│  └──────────────────────────┘    │
+└──────────────────────────────────┘
+```
+
+- **MobileTopBar** is a DOM element prepended above the grid. It has a hamburger (☰), session title, and new session (+) button.
+- **Sidebar** is hidden by default and opens as an **85% width drawer overlay** with a backdrop when the hamburger is tapped. CSS makes its `split-view-view` absolutely positioned with `z-index: 250`. The workbench manually calls `sidebarPart.layout()` with drawer dimensions after opening. Closing the drawer clears the navigation stack.
+- **Titlebar** is hidden in the grid (`visible: false`) and via CSS — replaced by MobileTopBar.
+- **SessionCompositeBar** (chat tabs) is hidden via CSS.
+- The grid uses `display: flex; flex-direction: column` and all `split-view-view:has(> .part)` containers are positioned absolutely at `100% width/height`.
+
+### Viewport Classification
+
+`SessionsLayoutPolicy` classifies the viewport:
+- **phone**: `width < 640px`
+- **tablet**: `640px ≤ width < 1024px`
+- **desktop**: `width ≥ 1024px`
+
+The workbench toggles CSS classes (`phone-layout`, `mobile-layout`) on `layout()` and creates/destroys mobile components when the viewport class changes at runtime (e.g., DevTools device emulation). MobileTopBar lifecycle is managed via a `DisposableStore` that is cleared on viewport transitions to prevent leaks.
+
+### Context Keys
+
+| Key | Type | Purpose |
+|-----|------|---------|
+| `sessionsViewportClass` | `string` | `'phone'`, `'tablet'`, or `'desktop'` |
+| `sessionsIsMobileLayout` | `boolean` | `true` when phone or tablet |
+| `sessionsKeyboardVisible` | `boolean` | `true` when virtual keyboard is visible |
+
+### Desktop → Mobile Component Mapping
+
+| Desktop Component | Mobile Equivalent | How Accessed |
+|---|---|---|
+| **Titlebar** (3-section toolbar) | **MobileTopBar** (☰ / title / +) | Always visible at top |
+| **Sidebar** (sessions list) | Drawer overlay (85% width) | Hamburger button (☰) |
+| **ChatBar** (chat widget) | Same Part, edge-to-edge, no card chrome | Default view (always visible) |
+| **AuxiliaryBar** (files, changes) | Gated — not shown on mobile | Planned: mobile-specific view |
+| **Panel** (terminal, output) | Gated — not shown on mobile | Planned: mobile-specific view |
+| **SessionCompositeBar** (chat tabs) | Hidden on phone | — |
+| **New Session** (sidebar button) | + button in MobileTopBar | Always visible in top bar |
+
+## File Map
+
+### Mobile Part Subclasses
+
+| File | Purpose |
+|------|---------|
+| `src/vs/sessions/browser/parts/mobile/mobileChatBarPart.ts` | Extends `ChatBarPart`. Overrides `layout()` (no card margins) and `updateStyles()` (no inline card styles). |
+| `src/vs/sessions/browser/parts/mobile/mobileSidebarPart.ts` | Extends `SidebarPart`. Overrides `updateStyles()` (no inline card/title styles). |
+| `src/vs/sessions/browser/parts/mobile/mobileAuxiliaryBarPart.ts` | Extends `AuxiliaryBarPart`. Overrides `layout()` and `updateStyles()` (no card margins or inline styles). |
+| `src/vs/sessions/browser/parts/mobile/mobilePanelPart.ts` | Extends `PanelPart`. Overrides `layout()` and `updateStyles()` (no card margins or inline styles). |
+
+### Mobile Chrome Components
+
+| File | Purpose |
+|------|---------|
+| `src/vs/sessions/browser/parts/mobile/mobileTopBar.ts` | Phone top bar: hamburger (☰), session title, new session (+). Emits `onDidClickHamburger`, `onDidClickNewSession`, `onDidClickTitle`. |
+| `src/vs/sessions/browser/parts/mobile/mobileChatShell.css` | **Single source of truth** for all phone-layout CSS: flex column layout, split-view-view absolute positioning, card chrome removal, part/content width overrides, sidebar title hiding, composite bar hiding, welcome page layout, sash hiding, button focus overrides, mobile pickers. |
+
+### Layout & Navigation
+
+| File | Purpose |
+|------|---------|
+| `src/vs/sessions/browser/layoutPolicy.ts` | `SessionsLayoutPolicy`: observable viewport classification (phone/tablet/desktop), platform flags (isIOS, isAndroid, isTouchDevice), part visibility and size defaults. |
+| `src/vs/sessions/browser/mobileNavigationStack.ts` | `MobileNavigationStack`: Android back button integration via `history.pushState` / `popstate`. Supports `push()`, `pop()`, and `clear()`. |
+| `src/vs/sessions/common/contextkeys.ts` | Mobile context keys: `ViewportClassContext`, `IsMobileLayoutContext`, `KeyboardVisibleContext`. |
+
+### Part Instantiation
+
+| File | Purpose |
+|------|---------|
+| `src/vs/sessions/browser/paneCompositePartService.ts` | `AgenticPaneCompositePartService`: checks viewport width at construction time and instantiates `Mobile*Part` vs desktop `*Part` classes accordingly. |
+
+### Workbench Integration
+
+| File | Key Changes |
+|------|-------------|
+| `src/vs/sessions/browser/workbench.ts` | Layout policy integration, MobileTopBar creation/destruction (via `DisposableStore`), sidebar drawer open/close with backdrop, viewport-class-change detection, window resize listener, grid height calculation (subtracts MobileTopBar height), titlebar grid visibility toggle, `ISessionsManagementService` for new session button. |
+| `src/vs/sessions/browser/parts/chatBarPart.ts` | `_lastLayout` changed from `private` to `protected` for mobile subclass access. |
+
+### Styling
+
+| File | Purpose |
+|------|---------|
+| `src/vs/sessions/browser/parts/mobile/mobileChatShell.css` | All phone-layout CSS (see above). |
+| `src/vs/sessions/browser/parts/media/sidebarPart.css` | Sidebar drawer overlay CSS: 85% width, z-index 250, slide-in animation, backdrop. |
+| `src/vs/sessions/browser/media/style.css` | Mobile overscroll containment, 44px touch targets, quick pick bottom sheets, context menu action sheets, dialog sizing, notification positioning, hover card suppression, editor modal full-screen. |
+
+### PWA & Viewport
+
+| File | Purpose |
+|------|---------|
+| `src/vs/code/browser/workbench/workbench.html` | `viewport-fit=cover` meta tag, `theme-color` meta tag. |
+| `resources/server/manifest.json` | PWA manifest: `background_color`, `theme_color`, `orientation`. |
+
+## Remaining Work
+
+- **Session title sync**: MobileTopBar shows hardcoded "New Session" — needs to subscribe to `sessionsManagementService.activeSession` and update title when session changes.
+- **Files & Terminal access**: Should become mobile-specific views gated with `when: IsMobileLayoutContext`.
+- **iOS keyboard handling**: Adjust layout when virtual keyboard appears (context key exists, but no layout response yet).
+- **Session list inline actions**: Make always-visible on touch devices (no hover-to-reveal).
+- **Customizations on mobile**: Currently hidden — needs a mobile-friendly alternative.

src/vs/sessions/MOBILE.md

@@ -0,0 +1,152 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from '../../base/common/lifecycle.js';
+import { observableValue, derived, IObservable } from '../../base/common/observable.js';
+import { isIOS } from '../../base/common/platform.js';
+import { isAndroid } from '../../base/browser/browser.js';
+import { Gesture } from '../../base/browser/touch.js';
+
+/** Viewport classification based on container width. */
+export type ViewportClass = 'phone' | 'tablet' | 'desktop';
+
+/** Default visibility for each workbench part. */
+export interface IPartVisibilityDefaults {
+	readonly sidebar: boolean;
+	readonly auxiliaryBar: boolean;
+	readonly panel: boolean;
+	readonly chatBar: boolean;
+	readonly editor: boolean;
+}
+
+/** Default sizes (in pixels) for each workbench part. */
+export interface IPartSizeDefaults {
+	readonly sideBarSize: number;
+	readonly auxiliaryBarSize: number;
+	readonly panelSize: number;
+	readonly chatBarWidth: number;
+}
+
+const PHONE_MAX_WIDTH = 640;
+const TABLET_MAX_WIDTH = 1024;
+
+/**
+ * Classifies the viewport into one of three classes based on width.
+ */
+function classifyViewport(width: number): ViewportClass {
+	if (width < PHONE_MAX_WIDTH) {
+		return 'phone';
+	}
+	if (width < TABLET_MAX_WIDTH) {
+		return 'tablet';
+	}
+	return 'desktop';
+}
+
+/**
+ * Observable-based viewport classification and layout policy for
+ * the Sessions workbench. Consumed by `SessionsWorkbench` to drive
+ * part visibility, sizing, and behavior based on viewport dimensions
+ * and platform.
+ */
+export class SessionsLayoutPolicy extends Disposable {
+
+	// --- Platform flags (static, read once) ---
+
+	/** Whether the current platform is iOS. */
+	readonly isIOS: boolean;
+
+	/** Whether the current platform is Android. */
+	readonly isAndroid: boolean;
+
+	/** Whether the current device supports touch input. */
+	readonly isTouchDevice: boolean;
+
+	// --- Observables ---
+
+	private readonly _viewportClass = observableValue<ViewportClass>(this, 'desktop');
+
+	/** Current viewport class derived from the most recent `update()` call. */
+	readonly viewportClass: IObservable<ViewportClass> = this._viewportClass;
+
+	/** `true` when the viewport class is `phone` or `tablet`. */
+	readonly isMobileLayout: IObservable<boolean> = derived(this, reader => {
+		const vc = this._viewportClass.read(reader);
+		return vc === 'phone' || vc === 'tablet';
+	});
+
+	constructor() {
+		super();
+
+		this.isIOS = isIOS;
+		this.isAndroid = isAndroid;
+		this.isTouchDevice = Gesture.isTouchDevice();
+	}
+
+	/**
+	 * Update the viewport classification. Call this from the workbench
+	 * `layout()` method whenever the container dimensions change.
+	 *
+	 * @param width  Container width in pixels.
+	 * @param height Container height in pixels (reserved for future use).
+	 */
+	update(width: number, _height: number): void {
+		const next = classifyViewport(width);
+		if (this._viewportClass.get() !== next) {
+			this._viewportClass.set(next, undefined);
+		}
+	}
+
+	/**
+	 * Returns the default part visibility for the given viewport class.
+	 * If no class is supplied the current observed class is used.
+	 */
+	getPartVisibilityDefaults(viewportClass?: ViewportClass): IPartVisibilityDefaults {
+		const vc = viewportClass ?? this._viewportClass.get();
+		switch (vc) {
+			case 'phone':
+				return { sidebar: false, auxiliaryBar: false, panel: false, chatBar: true, editor: false };
+			case 'tablet':
+				return { sidebar: true, auxiliaryBar: false, panel: false, chatBar: true, editor: false };
+			case 'desktop':
+				return { sidebar: true, auxiliaryBar: false, panel: false, chatBar: true, editor: false };
+		}
+	}
+
+	/**
+	 * Returns the default part sizes for the given viewport dimensions.
+	 * If no viewport class is supplied the current observed class is used.
+	 *
+	 * @param width  Container width in pixels.
+	 * @param height Container height in pixels (reserved for future use).
+	 * @param viewportClass Optional explicit viewport class override.
+	 */
+	getPartSizes(width: number, _height: number, viewportClass?: ViewportClass): IPartSizeDefaults {
+		const vc = viewportClass ?? this._viewportClass.get();
+		switch (vc) {
+			case 'phone':
+				return {
+					sideBarSize: 0,
+					auxiliaryBarSize: 0,
+					panelSize: 0,
+					chatBarWidth: width,
+				};
+			case 'tablet':
+				return {
+					sideBarSize: 250,
+					auxiliaryBarSize: 300,
+					panelSize: 250,
+					chatBarWidth: width - 250,
+				};
+			case 'desktop':
+				return {
+					sideBarSize: 300,
+					auxiliaryBarSize: 380,
+					panelSize: 300,
+					chatBarWidth: width - 300,
+				};
+		}
+	}
+}