@codingame/monaco-vscode-chat-service-override 37.2.0 → 37.3.1

package/vscode/src/vs/sessions/contrib/providers/remoteAgentHost/browser/media/hostPickerSheet.css

@@ -0,0 +1,351 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* ---- Mobile Host Picker bottom sheet ----
+ * Slides up from the bottom of the viewport over a translucent backdrop.
+ * Replaces the desktop context menu / anchored dropdown for the host
+ * picker on phone-sized layouts. */
+
+.host-picker-sheet-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 2000;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	pointer-events: none;
+}
+
+.host-picker-sheet-overlay > * {
+	pointer-events: auto;
+}
+
+.host-picker-sheet-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
+	animation: host-picker-sheet-fade-in 180ms ease-out;
+}
+
+.host-picker-sheet-backdrop.closing {
+	animation: host-picker-sheet-fade-out 180ms ease-in forwards;
+}
+
+.host-picker-sheet {
+	position: relative;
+	width: 100%;
+	max-height: 80vh;
+	display: flex;
+	flex-direction: column;
+	background: var(--vscode-menu-background, var(--vscode-editor-background));
+	color: var(--vscode-menu-foreground, var(--vscode-foreground));
+	border-top-left-radius: 16px;
+	border-top-right-radius: 16px;
+	padding-bottom: env(safe-area-inset-bottom);
+	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
+	animation: host-picker-sheet-slide-up 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
+	overflow: hidden;
+}
+
+.host-picker-sheet.closing {
+	animation: host-picker-sheet-slide-down 180ms ease-in forwards;
+}
+
+/* iOS-style drag-handle hint. Decorative — drag-to-dismiss is not wired up. */
+.host-picker-sheet-handle {
+	width: 36px;
+	height: 4px;
+	margin: 8px auto 4px;
+	border-radius: var(--vscode-cornerRadius-xSmall);
+	background: color-mix(in srgb, var(--vscode-foreground) 30%, transparent);
+	flex-shrink: 0;
+}
+
+.host-picker-sheet-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 16px 4px;
+	flex-shrink: 0;
+}
+
+.host-picker-sheet-title {
+	flex: 1;
+	min-width: 0;
+	font-size: 16px;
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.host-picker-sheet-close {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border: none;
+	background: transparent;
+	color: var(--vscode-foreground);
+	cursor: pointer;
+	border-radius: 50%;
+	flex-shrink: 0;
+	font-size: 16px;
+	padding: 0;
+	touch-action: manipulation;
+}
+
+.host-picker-sheet-close:active {
+	background: var(--vscode-toolbar-hoverBackground);
+}
+
+.host-picker-sheet-subtitle {
+	padding: 0 16px 12px;
+	color: var(--vscode-descriptionForeground);
+	font-size: 13px;
+	line-height: 1.4;
+	flex-shrink: 0;
+}
+
+.host-picker-sheet-body {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.host-picker-sheet-section-title {
+	padding: 12px 16px 4px;
+	font-size: 11px;
+	font-weight: var(--vscode-fontWeight-semiBold);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--vscode-descriptionForeground);
+}
+
+.host-picker-sheet-divider {
+	height: 1px;
+	margin: 8px 16px;
+	background: color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
+}
+
+/* --- Host row -------------------------------------------------------- */
+
+.host-picker-sheet-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	min-height: 56px;
+	padding: 8px 16px;
+	border: none;
+	background: transparent;
+	color: inherit;
+	font-size: 15px;
+	text-align: left;
+	cursor: pointer;
+	touch-action: manipulation;
+	font-family: inherit;
+}
+
+.host-picker-sheet-item:focus {
+	outline: none;
+}
+
+.host-picker-sheet-item:focus-visible {
+	outline: 2px solid var(--vscode-focusBorder);
+	outline-offset: -2px;
+}
+
+.host-picker-sheet-item:active {
+	background: var(--vscode-toolbar-hoverBackground);
+}
+
+.host-picker-sheet-item.checked .host-picker-sheet-item-name {
+	font-weight: 600;
+	color: var(--vscode-menu-selectionForeground, var(--vscode-foreground));
+}
+
+.host-picker-sheet-item-icon {
+	position: relative;
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--vscode-foreground);
+	flex-shrink: 0;
+}
+
+.host-picker-sheet-item-icon .codicon {
+	font-size: 18px;
+}
+
+/* Small status dot in the bottom-right of the host icon. */
+.host-picker-sheet-item-status {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--vscode-descriptionForeground);
+	border: 2px solid var(--vscode-menu-background, var(--vscode-editor-background));
+	box-sizing: content-box;
+}
+
+.host-picker-sheet-item-status.connected {
+	background: var(--vscode-testing-iconPassed, var(--vscode-debugIcon-startForeground, #388a34));
+}
+
+.host-picker-sheet-item-status.connecting {
+	background: var(--vscode-debugIcon-startForeground, #388a34);
+	animation: host-picker-sheet-blink 1.2s ease-in-out infinite;
+}
+
+.host-picker-sheet-item-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.host-picker-sheet-item-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.host-picker-sheet-item-sub {
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.host-picker-sheet-item-check {
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--vscode-textLink-foreground, var(--vscode-button-background));
+	font-size: 14px;
+	flex-shrink: 0;
+}
+
+/* --- Empty state ----------------------------------------------------- */
+
+.host-picker-sheet-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	padding: 16px;
+	color: var(--vscode-descriptionForeground);
+	font-size: 13px;
+	text-align: center;
+}
+
+/* --- Footer (always-visible re-discover action) ---------------------- */
+
+.host-picker-sheet-footer {
+	flex-shrink: 0;
+	border-top: 1px solid color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
+}
+
+.host-picker-sheet-action {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+	min-height: 48px;
+	padding: 0 16px;
+	border: none;
+	background: transparent;
+	color: var(--vscode-textLink-foreground, var(--vscode-button-background));
+	font-size: 14px;
+	font-weight: var(--vscode-fontWeight-semiBold);
+	text-align: left;
+	cursor: pointer;
+	touch-action: manipulation;
+	font-family: inherit;
+}
+
+.host-picker-sheet-action:active {
+	background: var(--vscode-toolbar-hoverBackground);
+}
+
+.host-picker-sheet-action[aria-disabled='true'] {
+	opacity: 0.6;
+	cursor: default;
+}
+
+.host-picker-sheet-action-icon {
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+}
+
+.host-picker-sheet-action.discovering .host-picker-sheet-action-icon .codicon {
+	animation: host-picker-sheet-spin 1.2s linear infinite;
+}
+
+@keyframes host-picker-sheet-slide-up {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+@keyframes host-picker-sheet-slide-down {
+	from {
+		transform: translateY(0);
+	}
+	to {
+		transform: translateY(100%);
+	}
+}
+
+@keyframes host-picker-sheet-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes host-picker-sheet-fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes host-picker-sheet-blink {
+	0%, 100% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
+@keyframes host-picker-sheet-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}

package/vscode/src/vs/sessions/contrib/providers/remoteAgentHost/browser/mobileHostFilterActionViewItem.d.ts

@@ -0,0 +1,36 @@
+import { IAction } from "@codingame/monaco-vscode-api/vscode/vs/base/common/actions";
+import { IContextMenuService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service";
+import { IHoverService } from "@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service";
+import { IAgentHostFilterService } from "@codingame/monaco-vscode-api/vscode/vs/sessions/services/agentHostFilter/common/agentHostFilter.service";
+import { HostFilterActionViewItem } from "./hostFilterActionViewItem.js";
+/**
+ * Mobile variant of {@link HostFilterActionViewItem}.
+ *
+ * On phone-sized layouts the host picker is rendered as a bottom sheet
+ * that slides up from the bottom of the viewport. The sheet is always
+ * tappable (even when no hosts are known) and always exposes a
+ * "Re-discover hosts" action so the user can retry discovery without
+ * leaving the home screen.
+ */
+export declare class MobileHostFilterActionViewItem extends HostFilterActionViewItem {
+    private readonly _sheet;
+    constructor(action: IAction, filterService: IAgentHostFilterService, contextMenuService: IContextMenuService, hoverService: IHoverService);
+    /**
+     * Always interactive on mobile — even with zero hosts the sheet
+     * shows an empty state and the always-visible "Re-discover hosts"
+     * action. This is the primary entry point for retrying discovery
+     * when no hosts have been found yet.
+     */
+    protected _isInteractive(): boolean;
+    /**
+     * Tapping always opens the sheet, which carries its own "Re-discover
+     * hosts" action, so the pill never reads as a re-discovery trigger.
+     */
+    protected _retriesOnClick(): boolean;
+    protected _showMenu(_e: Event): void;
+    private _showSheet;
+    private _renderHostList;
+    private _renderHostItem;
+    private _statusLabel;
+    private _renderRediscoverAction;
+}

package/vscode/src/vs/sessions/contrib/providers/remoteAgentHost/browser/mobileHostFilterActionViewItem.js

@@ -0,0 +1,236 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+import { $ as $$1, getWindow, findParentWithClass, append, EventType, addDisposableListener, EventHelper, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { Gesture, EventType as EventType$1 } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/touch';
+import { renderLabelWithIcons } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/iconLabel/iconLabels';
+import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
+import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
+import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
+import { MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+import { AgentHostFilterConnectionStatus } from '@codingame/monaco-vscode-api/vscode/vs/sessions/services/agentHostFilter/common/agentHostFilter';
+import { IAgentHostFilterService } from '@codingame/monaco-vscode-api/vscode/vs/sessions/services/agentHostFilter/common/agentHostFilter.service';
+import { HostFilterActionViewItem } from './hostFilterActionViewItem.js';
+import * as hostPickerSheet from './media/hostPickerSheet.css';
+
+registerCss(hostPickerSheet, 1);
+const $ = $$1;
+let MobileHostFilterActionViewItem = class MobileHostFilterActionViewItem extends HostFilterActionViewItem {
+    constructor(action, filterService, contextMenuService, hoverService) {
+        super(action, "titlebar", filterService, contextMenuService, hoverService);
+        this._sheet = this._register(( new MutableDisposable()));
+    }
+    _isInteractive() {
+        return true;
+    }
+    _retriesOnClick() {
+        return false;
+    }
+    _showMenu(_e) {
+        if (!this.element) {
+            return;
+        }
+        this._showSheet();
+    }
+    _showSheet() {
+        this._sheet.clear();
+        const disposables = ( new DisposableStore());
+        this._sheet.value = disposables;
+        const targetWindow = getWindow(this.element);
+        const targetDocument = targetWindow.document;
+        const workbenchContainer = findParentWithClass(this.element, "monaco-workbench") ?? targetDocument.body;
+        const overlay = append(workbenchContainer, $("div.host-picker-sheet-overlay"));
+        const backdrop = append(overlay, $("div.host-picker-sheet-backdrop"));
+        const sheet = append(overlay, $("div.host-picker-sheet"));
+        sheet.setAttribute("role", "dialog");
+        sheet.setAttribute("aria-modal", "true");
+        sheet.setAttribute("aria-label", ( localize(4293, "Hosts")));
+        let dismissing = false;
+        const finish = () => {
+            if (dismissing) {
+                return;
+            }
+            dismissing = true;
+            sheet.classList.add("closing");
+            backdrop.classList.add("closing");
+            const close = () => {
+                if (this._sheet.value === disposables) {
+                    this._sheet.clear();
+                }
+            };
+            sheet.addEventListener("animationend", close, {
+                once: true
+            });
+            const fallback = setTimeout(close, 220);
+            disposables.add({
+                dispose: () => clearTimeout(fallback)
+            });
+        };
+        disposables.add({
+            dispose: () => overlay.remove()
+        });
+        append(sheet, $("div.host-picker-sheet-handle"));
+        const header = append(sheet, $("div.host-picker-sheet-header"));
+        append(header, $("div.host-picker-sheet-title")).textContent = ( localize(4294, "Hosts"));
+        const closeBtn = append(header, $("button.host-picker-sheet-close", {
+            type: "button"
+        }));
+        closeBtn.setAttribute("aria-label", ( localize(4295, "Close")));
+        append(closeBtn, $("span.codicon.codicon-close"));
+        disposables.add(Gesture.addTarget(closeBtn));
+        for (const eventType of [EventType.CLICK, EventType$1.Tap]) {
+            disposables.add(addDisposableListener(closeBtn, eventType, e => {
+                EventHelper.stop(e, true);
+                finish();
+            }));
+        }
+        append(sheet, $("div.host-picker-sheet-subtitle")).textContent = ( localize(
+            4296,
+            "Sessions are scoped to a host. Switching hosts shows that machine's sessions and runs new sessions there."
+        ));
+        const body = append(sheet, $("div.host-picker-sheet-body"));
+        const bodyDisposables = disposables.add(( new DisposableStore()));
+        const focusRefs = {};
+        const renderBody = () => {
+            bodyDisposables.clear();
+            clearNode(body);
+            focusRefs.firstHost = undefined;
+            focusRefs.firstCheckedHost = undefined;
+            this._renderHostList(bodyDisposables, body, finish, focusRefs);
+        };
+        renderBody();
+        disposables.add(this._filterService.onDidChange(renderBody));
+        disposables.add(this._filterService.onDidChangeDiscovering(renderBody));
+        const footer = append(sheet, $("div.host-picker-sheet-footer"));
+        focusRefs.rediscover = this._renderRediscoverAction(disposables, footer);
+        disposables.add(
+            addDisposableListener(sheet, EventType.CLICK, e => e.stopPropagation())
+        );
+        disposables.add(Gesture.addTarget(sheet));
+        disposables.add(
+            addDisposableListener(sheet, EventType$1.Tap, e => EventHelper.stop(e, true))
+        );
+        disposables.add(Gesture.addTarget(backdrop));
+        for (const eventType of [EventType.CLICK, EventType$1.Tap]) {
+            disposables.add(addDisposableListener(backdrop, eventType, e => {
+                EventHelper.stop(e, true);
+                finish();
+            }));
+        }
+        disposables.add(addDisposableListener(targetDocument, EventType.KEY_DOWN, e => {
+            if (( new StandardKeyboardEvent(e)).equals(KeyCode.Escape)) {
+                EventHelper.stop(e, true);
+                finish();
+            }
+        }));
+        focusRefs.firstCheckedHost?.focus();
+    }
+    _renderHostList(disposables, body, finish, focusRefs) {
+        const hosts = this._filterService.hosts;
+        const selectedId = this._filterService.selectedHostId;
+        if (hosts.length === 0) {
+            const empty = append(body, $("div.host-picker-sheet-empty"));
+            empty.textContent = this._filterService.isDiscovering ? ( localize(4297, "Searching for hosts…")) : ( localize(4298, "No hosts found yet."));
+            return;
+        }
+        append(body, $("div.host-picker-sheet-section-title")).textContent = ( localize(4299, "Available"));
+        for (const host of hosts) {
+            const row = this._renderHostItem(disposables, body, host, selectedId === host.id, finish);
+            focusRefs.firstHost ??= row;
+            if (selectedId === host.id) {
+                focusRefs.firstCheckedHost ??= row;
+            }
+        }
+    }
+    _renderHostItem(disposables, body, host, checked, finish) {
+        const row = append(body, $("button.host-picker-sheet-item", {
+            type: "button"
+        }));
+        row.setAttribute("role", "menuitemradio");
+        row.setAttribute("aria-checked", String(checked));
+        if (checked) {
+            row.classList.add("checked");
+        }
+        const iconWrap = append(row, $("span.host-picker-sheet-item-icon"));
+        iconWrap.append(...renderLabelWithIcons(`$(${host.icon.id})`));
+        if (host.connectable) {
+            const status = append(iconWrap, $("span.host-picker-sheet-item-status"));
+            switch (host.status) {
+            case AgentHostFilterConnectionStatus.Connected:
+                status.classList.add("connected");
+                break;
+            case AgentHostFilterConnectionStatus.Connecting:
+                status.classList.add("connecting");
+                break;
+            }
+        }
+        const text = append(row, $("span.host-picker-sheet-item-text"));
+        append(text, $("span.host-picker-sheet-item-name")).textContent = host.label;
+        if (host.connectable) {
+            append(text, $("span.host-picker-sheet-item-sub")).textContent = this._statusLabel(host.status);
+        }
+        if (checked) {
+            const check = append(row, $("span.host-picker-sheet-item-check"));
+            check.append(...renderLabelWithIcons(`$(${Codicon.check.id})`));
+        }
+        const select = e => {
+            if (e) {
+                EventHelper.stop(e, true);
+            }
+            this._filterService.setSelectedHostId(host.id);
+            finish();
+        };
+        disposables.add(Gesture.addTarget(row));
+        disposables.add(addDisposableListener(row, EventType.CLICK, e => select(e)));
+        disposables.add(addDisposableListener(row, EventType$1.Tap, e => select(e)));
+        return row;
+    }
+    _statusLabel(status) {
+        switch (status) {
+        case AgentHostFilterConnectionStatus.Connected:
+            return localize(4300, "Connected");
+        case AgentHostFilterConnectionStatus.Connecting:
+            return localize(4301, "Connecting…");
+        case AgentHostFilterConnectionStatus.Disconnected:
+        default:
+            return localize(4302, "Disconnected");
+        }
+    }
+    _renderRediscoverAction(disposables, footer) {
+        const action = append(footer, $("button.host-picker-sheet-action", {
+            type: "button"
+        }));
+        action.setAttribute("role", "menuitem");
+        action.setAttribute("aria-label", ( localize(4303, "Re-discover hosts")));
+        const iconSpan = append(action, $("span.host-picker-sheet-action-icon"));
+        iconSpan.append(...renderLabelWithIcons(`$(${Codicon.refresh.id})`));
+        const labelSpan = append(action, $("span"));
+        const update = () => {
+            const discovering = this._filterService.isDiscovering;
+            action.classList.toggle("discovering", discovering);
+            action.setAttribute("aria-disabled", String(discovering));
+            labelSpan.textContent = discovering ? ( localize(4304, "Searching…")) : ( localize(4305, "Re-discover hosts"));
+        };
+        update();
+        disposables.add(this._filterService.onDidChangeDiscovering(update));
+        const trigger = e => {
+            if (e) {
+                EventHelper.stop(e, true);
+            }
+            if (this._filterService.isDiscovering) {
+                return;
+            }
+            this._filterService.rediscover();
+        };
+        disposables.add(Gesture.addTarget(action));
+        disposables.add(addDisposableListener(action, EventType.CLICK, e => trigger(e)));
+        disposables.add(addDisposableListener(action, EventType$1.Tap, e => trigger(e)));
+        return action;
+    }
+};
+MobileHostFilterActionViewItem = ( __decorate([( __param(1, IAgentHostFilterService)), ( __param(2, IContextMenuService)), ( __param(3, IHoverService))], MobileHostFilterActionViewItem));
+
+export { MobileHostFilterActionViewItem };