CF-Incidents Agents - Interactive browser terminals in Sandboxes

[ENF News Bot]

The Sandbox SDK ↗︎ now supports PTY (pseudo-terminal) passthrough, enabling browser-based terminal UIs to connect to sandbox shells via WebSocket.

sandbox.terminal(request)​

https://developers.cloudflare.com/changelog/rss/#sandboxterminalrequest

The new terminal() method proxies a WebSocket upgrade to the container's PTY endpoint, with output buffering for replay on reconnect.

// Worker: proxy WebSocket to container terminal
return sandbox.terminal(request, { cols: 80, rows: 24 });

// Worker: proxy WebSocket to container terminal
return sandbox.terminal(request, { cols: 80, rows: 24 });

Multiple terminals per sandbox​

https://developers.cloudflare.com/changelog/rss/#multiple-terminals-per-sandbox

Each session can have its own terminal with an isolated working directory and environment, so users can run separate shells side-by-side in the same container.

// Multiple isolated terminals in the same sandbox
const dev = await sandbox.getSession("dev");
return dev.terminal(request);

// Multiple isolated terminals in the same sandbox
const dev = await sandbox.getSession("dev");
return dev.terminal(request);

xterm.js addon​

https://developers.cloudflare.com/changelog/rss/#xtermjs-addon

The new @cloudflare/sandbox/xterm export provides a SandboxAddon for xterm.js ↗︎ with automatic reconnection (exponential backoff + jitter), buffered output replay, and resize forwarding.

import { SandboxAddon } from "@cloudflare/sandbox/xterm";

const addon = new SandboxAddon({
	getWebSocketUrl: ({ sandboxId, origin }) =>
		`${origin}/ws/terminal?id=${sandboxId}`,
	onStateChange: (state, error) => updateUI(state),
});
terminal.loadAddon(addon);
addon.connect({ sandboxId: "my-sandbox" });

import { SandboxAddon } from "@cloudflare/sandbox/xterm";

const addon = new SandboxAddon({
	getWebSocketUrl: ({ sandboxId, origin }) =>
		`${origin}/ws/terminal?id=${sandboxId}`,
	onStateChange: (state, error) => updateUI(state),
});
terminal.loadAddon(addon);
addon.connect({ sandboxId: "my-sandbox" });

Upgrade​

https://developers.cloudflare.com/changelog/rss/#upgrade

To update to the latest version:


npm i @cloudflare/sandbox@latest

Continue reading...