From 9efd64488bfcbd8feddb32997bf4f5adfdcfe11e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Kr=C3=BCger?= Date: Thu, 6 Aug 2026 10:52:16 +0200 Subject: [PATCH] Sync CloudShell backend PTY size on terminal resize Resizing the browser window only re-fit the local xterm; the remote shell kept its original column count, so typed input wrapped/broke at the wrong column. Add resizeTerminal() client call to the CloudShell terminals/{id}/size endpoint and register a debounced terminal.onResize handler that pushes new dimensions to the backend. --- .../CloudShellTab/CloudShellTerminalCore.tsx | 48 ++++++++++++++++- .../Data/CloudShellClient.test.tsx | 53 +++++++++++++++++++ .../CloudShellTab/Data/CloudShellClient.tsx | 24 +++++++++ 3 files changed, 123 insertions(+), 2 deletions(-) diff --git a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx index a706e0691..c69d9016e 100644 --- a/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx +++ b/src/Explorer/Tabs/CloudShellTab/CloudShellTerminalCore.tsx @@ -10,6 +10,7 @@ import { provisionConsole, putEphemeralUserSettings, registerCloudShellProvider, + resizeTerminal, verifyCloudShellProviderRegistration, } from "./Data/CloudShellClient"; import { CloudShellProviderInfo, ProvisionConsoleResponse } from "./Models/DataModels"; @@ -26,6 +27,7 @@ const DEFAULT_FAIRFAX_CLOUDSHELL_REGION = "usgovvirginia"; const POLLING_INTERVAL_MS = 2000; const MAX_RETRY_COUNT = 10; const MAX_PING_COUNT = 120 * 60; // 120 minutes (60 seconds/minute) +const TERMINAL_RESIZE_DEBOUNCE_MS = 300; let pingCount = 0; let keepAliveID: NodeJS.Timeout = null; @@ -96,6 +98,7 @@ export const startCloudShellTerminal = async (terminal: Terminal, shellType: Ter socketUri?: string; provisionConsoleResponse?: ProvisionConsoleResponse; targetUri?: string; + terminalId?: string; } = await provisionCloudShellSession(resolvedRegion, terminal); if (!sessionDetails.socketUri) { @@ -108,6 +111,14 @@ export const startCloudShellTerminal = async (terminal: Terminal, shellType: Ter // Configure WebSocket connection with shell-specific commands const socket = await establishTerminalConnection(terminal, shellHandler, sessionDetails.socketUri); + // Keep the backend PTY size in sync with the frontend terminal. Without this, resizing the + // browser window only re-fits the local xterm while the remote shell keeps its original + // column count, causing typed input to wrap/break at the wrong column. + const consoleUri = sessionDetails.provisionConsoleResponse?.properties?.uri; + if (consoleUri && sessionDetails.terminalId) { + registerTerminalResizeHandler(terminal, consoleUri, sessionDetails.terminalId); + } + TelemetryProcessor.traceSuccess( Action.CloudShellTerminalSession, { @@ -159,13 +170,46 @@ export const determineCloudShellRegion = (): string => { return getNormalizedRegion(userContext.databaseAccount?.location, defaultRegion); }; +/** + * Registers a debounced handler that notifies the CloudShell backend whenever the frontend + * terminal is resized (e.g. after a browser window resize triggers FitAddon.fit()), keeping the + * remote PTY column/row count in sync with what the user sees. + */ +export const registerTerminalResizeHandler = (terminal: Terminal, consoleUri: string, terminalId: string): void => { + let debounceTimer: NodeJS.Timeout | null = null; + let lastCols = terminal.cols; + let lastRows = terminal.rows; + + terminal.onResize(({ cols, rows }) => { + if (cols === lastCols && rows === lastRows) { + return; + } + lastCols = cols; + lastRows = rows; + + if (debounceTimer) { + clearTimeout(debounceTimer); + } + debounceTimer = setTimeout(() => { + resizeTerminal(consoleUri, terminalId, { cols, rows }).catch((err) => { + console.warn("CloudShell: failed to resize backend terminal", err); + }); + }, TERMINAL_RESIZE_DEBOUNCE_MS); + }); +}; + /** * Provisions a CloudShell session */ export const provisionCloudShellSession = async ( resolvedRegion: string, terminal: Terminal, -): Promise<{ socketUri?: string; provisionConsoleResponse?: ProvisionConsoleResponse; targetUri?: string }> => { +): Promise<{ + socketUri?: string; + provisionConsoleResponse?: ProvisionConsoleResponse; + targetUri?: string; + terminalId?: string; +}> => { // Apply user settings await putEphemeralUserSettings(userContext.subscriptionId, resolvedRegion); @@ -217,7 +261,7 @@ export const provisionCloudShellSession = async ( socketUri = `wss://${targetUriBodyArr[0]}/$hc/${targetUriBodyArr[1]}/terminals/${termId}`; } - return { socketUri, provisionConsoleResponse, targetUri }; + return { socketUri, provisionConsoleResponse, targetUri, terminalId: termId }; }; /** diff --git a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx index cc89cb34f..3cd066a9a 100644 --- a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx +++ b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.test.tsx @@ -6,6 +6,7 @@ import { provisionConsole, putEphemeralUserSettings, registerCloudShellProvider, + resizeTerminal, verifyCloudShellProviderRegistration, } from "./CloudShellClient"; @@ -340,4 +341,56 @@ describe("CloudShellClient", () => { ); }); }); + + describe("resizeTerminal", () => { + it("should call fetch with correct parameters", async () => { + const consoleUri = "https://shell.azure.com/console123"; + const terminalId = "terminal-id"; + const size = { rows: 40, cols: 120 }; + + await resizeTerminal(consoleUri, terminalId, size); + + expect(global.fetch).toHaveBeenCalledWith( + "https://shell.azure.com/console123/terminals/terminal-id/size?cols=120&rows=40&version=2019-01-01", + { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + "Content-Length": "2", + Authorization: "Bearer mock-token", + "x-ms-client-request-id": "mocked-uuid", + "Accept-Language": "en-US", + }, + body: "{}", + }, + ); + }); + + it("should handle errors when terminal resize fails", async () => { + const consoleUri = "https://shell.azure.com/console123"; + const terminalId = "terminal-id"; + const size = { rows: 40, cols: 120 }; + + global.fetch = jest.fn().mockImplementationOnce(() => { + return { + ok: false, + status: 500, + statusText: "Internal Server Error", + json: jest.fn().mockRejectedValue(new Error("Failed to parse JSON")), + text: jest.fn().mockResolvedValue("Server Error"), + headers: new Headers(), + } as unknown as Promise; + }); + + await expect(resizeTerminal(consoleUri, terminalId, size)).rejects.toThrow( + "Failed to resize terminal: 500 Internal Server Error", + ); + + expect(global.fetch).toHaveBeenCalledWith( + "https://shell.azure.com/console123/terminals/terminal-id/size?cols=120&rows=40&version=2019-01-01", + expect.any(Object), + ); + }); + }); }); diff --git a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx index 2f7926cae..38cf1b03c 100644 --- a/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx +++ b/src/Explorer/Tabs/CloudShellTab/Data/CloudShellClient.tsx @@ -125,3 +125,27 @@ export const connectTerminal = async ( return resp.json(); }; + +export const resizeTerminal = async ( + consoleUri: string, + terminalId: string, + size: { rows: number; cols: number }, +): Promise => { + const targetUri = consoleUri + `/terminals/${terminalId}/size?cols=${size.cols}&rows=${size.rows}&version=2019-01-01`; + const resp = await fetch(targetUri, { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + "Content-Length": "2", + Authorization: userContext.authorizationToken, + "x-ms-client-request-id": uuidv4(), + "Accept-Language": getLocale(), + }, + body: "{}", // empty body is necessary + }); + + if (!resp.ok) { + throw new Error(`Failed to resize terminal: ${resp.status} ${resp.statusText}`); + } +};