test: cover bidirectional terminal resizing

Author: markwylde

e2e/remote-terminal-convergence.spec.ts

@@ -52,6 +52,7 @@ async function exposeDesktopOnLan(mainWindow: Page): Promise<string> {
 }
 
 async function connectBrowser(page: Page, pairingUrl: string): Promise<void> {
+	await page.setViewportSize({ width: 640, height: 900 });
 	await page.goto(pairingUrl);
 	await expect(
 		page.getByRole('dialog', { name: 'Enroll browser device' }),
@@ -64,6 +65,33 @@ async function connectBrowser(page: Page, pairingUrl: string): Promise<void> {
 	});
 }
 
+async function readTerminalColumns(page: Page, panel: Locator, marker: string): Promise<number> {
+	const input = panel.locator('.xterm-helper-textarea');
+	await input.focus();
+	await page.keyboard.type(`printf '${marker}%s__\\n' "$(tput cols)"`);
+	await page.keyboard.press('Enter');
+	const outputPattern = new RegExp(`${marker}(\\d+)__`, 'gu');
+	let text = '';
+	await expect.poll(async () => {
+		text = await panel.locator('.xterm-rows').innerText();
+		outputPattern.lastIndex = 0;
+		return outputPattern.test(text);
+	}).toBe(true);
+	outputPattern.lastIndex = 0;
+	const matches = [...text.matchAll(outputPattern)];
+	const value = Number(matches.at(-1)?.[1]);
+	if (!Number.isSafeInteger(value) || value <= 0) throw new Error(`Unable to read terminal columns for ${marker}`);
+	return value;
+}
+
+async function expectMatchingLogicalGrid(first: Locator, second: Locator): Promise<void> {
+	const [firstWidth, secondWidth] = await Promise.all([
+		first.locator('.xterm-screen').evaluate((element) => (element as HTMLElement).offsetWidth),
+		second.locator('.xterm-screen').evaluate((element) => (element as HTMLElement).offsetWidth),
+	]);
+	expect(Math.abs(firstWidth - secondWidth)).toBeLessThanOrEqual(2);
+}
+
 async function stopExposure(mainWindow: Page): Promise<void> {
 	await mainWindow.evaluate(async () => {
 		const status = await window.terminayRemoteAccessStatusHost.getStatus();
@@ -153,6 +181,11 @@ test('Desktop and browser converge on terminal tabs and one shared PTY output st
 			screenWidth: panel.querySelector('.xterm-screen')?.getBoundingClientRect().width ?? 0,
 		}));
 		expect(desktopGeometry.screenWidth).toBeGreaterThan(desktopGeometry.panelWidth * 0.9);
+		const desktopColumnsBeforeTakeover = await readTerminalColumns(
+			mainWindow,
+			desktopPanel,
+			'__TD0__',
+		);
 		await expect(
 			browserPanel.getByText('Another device is controlling this terminal.', { exact: true }),
 		).toBeVisible();
@@ -219,10 +252,15 @@ test('Desktop and browser converge on terminal tabs and one shared PTY output st
 			.getByRole('button', { name: 'Take back control of terminal' })
 			.click();
 		await expect(browserPanel.locator('.terminal-presentation-control')).toHaveCount(0);
+		await expect(browserPanel).not.toHaveClass(/terminal-panel--remote-size-override/u);
+		await expect(desktopPanel).toHaveClass(/terminal-panel--remote-size-override/u);
 		await expect(
 			desktopPanel.getByText('Another device is controlling this terminal.', { exact: true }),
 		).toBeVisible();
 		await expectControlBarLayout(desktopPanel);
+		const browserColumns = await readTerminalColumns(page, browserPanel, '__TB1__');
+		expect(browserColumns).toBeLessThan(desktopColumnsBeforeTakeover);
+		await expectMatchingLogicalGrid(browserPanel, desktopPanel);
 
 		const takeoverProof = '__TERMINAY_BROWSER_TAKEOVER_INPUT__';
 		await browserPanel.locator('.xterm-helper-textarea').focus();
@@ -231,6 +269,20 @@ test('Desktop and browser converge on terminal tabs and one shared PTY output st
 		await expect(browserPanel).toContainText(takeoverProof);
 		await expect(desktopPanel).toContainText(takeoverProof);
 
+		await desktopPanel
+			.getByRole('button', { name: 'Take back control of terminal' })
+			.click();
+		await expect(desktopPanel.locator('.terminal-presentation-control')).toHaveCount(0);
+		await expect(desktopPanel).not.toHaveClass(/terminal-panel--remote-size-override/u);
+		await expect(browserPanel).toHaveClass(/terminal-panel--remote-size-override/u);
+		const desktopColumnsAfterTakeback = await readTerminalColumns(
+			mainWindow,
+			desktopPanel,
+			'__TD2__',
+		);
+		expect(desktopColumnsAfterTakeback).toBeGreaterThan(browserColumns);
+		await expectMatchingLogicalGrid(desktopPanel, browserPanel);
+
 		const remoteConnections = await mainWindow.evaluate(() =>
 			window.terminayTest.listRemoteProtocolConnections(),
 		);

packages/client-core/test/terminal-panel.test.mjs

@@ -160,17 +160,21 @@ test("terminal panel forwards raw replay and filters output, exit, and resync li
   const outputs = [];
   const exits = [];
   const resyncs = [];
+  const events = [];
+  panel.onEvent((event) => events.push(event));
   panel.onOutput((event) => outputs.push({ bytes: [...event.bytes], position: event.position }));
   panel.onExit((event) => exits.push({ exitCode: event.exitCode, signal: event.signal }));
   panel.onResync((event) => resyncs.push({ replayFrom: event.replayFrom, outputPosition: event.outputPosition }));
 
   source.emit(output(3, new Uint8Array([0x00, 0xc3, 0xa9])));
   source.emit({ ...identity, type: "exit", exitCode: 7, signal: 15 });
   source.emit({ ...identity, type: "resync_required", fromPosition: 6, replayFrom: 9, outputPosition: 12 });
+  source.emit({ ...identity, type: "dimensions", cols: 44, rows: 16 });
 
   assert.deepEqual(outputs, [{ bytes: [0x00, 0xc3, 0xa9], position: 3 }]);
   assert.deepEqual(exits, [{ exitCode: 7, signal: 15 }]);
   assert.deepEqual(resyncs, [{ replayFrom: 9, outputPosition: 12 }]);
+  assert.deepEqual(events.at(-1), { ...identity, type: "dimensions", cols: 44, rows: 16 });
   await panel.detach();
 });
 

packages/server-core/test/terminal-protocol.test.mjs

@@ -172,10 +172,17 @@ test("terminal attach refuses an arbitrary replay suffix when the complete prese
 
     assert.equal(attached.ok, true);
     assert.equal(attached.result.fromPosition, 6);
-    assert.equal(attached.result.events.length, 1);
-    assert.equal(attached.result.events[0].type, "presentation_unavailable");
-    assert.equal(attached.result.events[0].requestedFromPosition, 0);
-    assert.equal(attached.result.events[0].outputPosition, 6);
+    assert.deepEqual(attached.result.events[0], {
+      ...identity,
+      attachmentId: attached.result.attachmentId,
+      clientId: "client-a",
+      type: "dimensions",
+      cols: 80,
+      rows: 24,
+    });
+    const unavailable = attached.result.events.find((event) => event.type === "presentation_unavailable");
+    assert.equal(unavailable.requestedFromPosition, 0);
+    assert.equal(unavailable.outputPosition, 6);
   } finally {
     await service.shutdown();
   }
@@ -211,6 +218,70 @@ test("only the explicit presentation holder can forward emulator replies", async
   await service.shutdown();
 });
 
+test("the presentation holder publishes canonical dimensions to every exact attachment", async () => {
+  const pty = createPtyFactory();
+  const service = new TerminalService({ serverId: "server-dimensions", ptyFactory: pty, generateSessionId: () => "session-dimensions" });
+  const session = await service.createSession({ projectId: "project-dimensions", cols: 80, rows: 24 });
+  const journal = new OrderedEventJournal();
+  const registry = createTerminalOperationRegistry({ service, eventJournal: journal, allowUnresolvedTestSessions: true });
+  const dispatcher = createOperationDispatcher(registry.operations);
+  const identity = { serverId: service.serverId, projectId: "project-dimensions", sessionId: session.sessionId };
+  const attach = async (clientId) => (await dispatcher.command(request(
+    "terminal.attach",
+    { clientId, identity, fromPosition: 0 },
+    `attach-${clientId}`,
+    "write",
+    clientId,
+  ))).result;
+  const resize = (attachment, clientId, cols, rows, id) => dispatcher.command(request(
+    "terminal.resize",
+    { clientId, identity, attachmentId: attachment.attachmentId, cols, rows },
+    id,
+    "write",
+    clientId,
+  ));
+
+  try {
+    const desktop = await attach("desktop");
+    const browser = await attach("browser");
+    assert.deepEqual(desktop.events[0], {
+      ...identity,
+      attachmentId: desktop.attachmentId,
+      clientId: "desktop",
+      type: "dimensions",
+      cols: 80,
+      rows: 24,
+    });
+
+    assert.equal((await resize(desktop, "desktop", 120, 40, "desktop-resize")).ok, true);
+    assert.equal((await resize(browser, "browser", 40, 16, "observer-resize")).ok, false);
+
+    const takeover = await dispatcher.command(request(
+      "terminal.presentation",
+      { clientId: "browser", identity, attachmentId: browser.attachmentId, mode: "takeover" },
+      "browser-takeover",
+      "write",
+      "browser",
+    ));
+    assert.equal(takeover.ok, true);
+    assert.equal((await resize(desktop, "desktop", 100, 30, "stale-desktop-resize")).ok, false);
+    assert.equal((await resize(browser, "browser", 40, 16, "browser-resize")).ok, true);
+
+    assert.deepEqual(pty.processes[0].resizes, [{ cols: 120, rows: 40 }, { cols: 40, rows: 16 }]);
+    const dimensions = journal.replay(0).events
+      .map((event) => event.payload)
+      .filter((event) => event.type === "dimensions");
+    assert.deepEqual(dimensions.map((event) => [event.clientId, event.attachmentId, event.cols, event.rows]), [
+      ["desktop", desktop.attachmentId, 120, 40],
+      ["browser", browser.attachmentId, 120, 40],
+      ["desktop", desktop.attachmentId, 40, 16],
+      ["browser", browser.attachmentId, 40, 16],
+    ]);
+  } finally {
+    await service.shutdown();
+  }
+});
+
 test("fresh presentation replay preserves complete hostile control sequences at every emitted byte boundary", async () => {
   const pty = createPtyFactory();
   const service = new TerminalService({ serverId: "server-boundaries", ptyFactory: pty, generateSessionId: () => "session-boundaries", maxReplayBytes: 64 * 1024 });
@@ -222,9 +293,9 @@ test("fresh presentation replay preserves complete hostile control sequences at
   for (const byte of transcript) pty.processes[0].emitData(new Uint8Array([byte]));
   const attached = await dispatcher.command(request("terminal.attach", { clientId: "fresh", identity, fromPosition: 0, freshPresentation: true, maxInitialReplayBytes: 32 * 1024 }, "attach-boundaries", "write", "fresh"));
   assert.equal(attached.ok, true);
-  assert.equal(attached.result.events.length, 1);
-  assert.equal(attached.result.events[0].position, 0);
-  assert.deepEqual(Buffer.from(attached.result.events[0].bytes, "base64"), Buffer.from(transcript));
+  const replay = attached.result.events.find((event) => event.type === "output");
+  assert.equal(replay.position, 0);
+  assert.deepEqual(Buffer.from(replay.bytes, "base64"), Buffer.from(transcript));
   await service.shutdown();
 });
 
@@ -271,9 +342,14 @@ test("framed terminal attach keeps an overstated fragmented replay inside the pr
       maxInitialReplayBytes: 128 * 1024,
     });
 
-    assert.equal(attached.initialEvents.length, 1);
-    assert.equal(attached.initialEvents[0].type, "presentation_unavailable");
-    assert.equal(attached.initialEvents[0].requestedFromPosition, 0);
+    assert.equal(attached.initialEvents[0].type, "dimensions");
+    assert.equal(attached.initialEvents[0].serverId, "server-protocol-budget");
+    assert.equal(attached.initialEvents[0].projectId, "project-protocol-budget");
+    assert.equal(attached.initialEvents[0].sessionId, session.sessionId);
+    assert.equal(attached.initialEvents[0].cols, 80);
+    assert.equal(attached.initialEvents[0].rows, 24);
+    const unavailable = attached.initialEvents.find((event) => event.type === "presentation_unavailable");
+    assert.equal(unavailable.requestedFromPosition, 0);
     assert.equal(attached.position, 40_000);
   } finally {
     await protocolClient.close();