feat(shell): PTY resize via HTTP + frontend xterm.onResize hook

The PTY was hardcoded to 80x24 at start, so full-screen programs
(htop, vim, less, tmux, top) drew themselves for 80x24 regardless
of the actual xterm window. Add a path for the frontend to push the
real cols/rows to the backend, which calls pty.Setsize on the pty
file.

Backend:
- internal/shell/manager.go: Resize(workspaceID, cols, rows) added to
  the Manager interface and implemented on LocalManager. Looks up the
  session, type-asserts sess.Stdin.(*os.File), calls pty.Setsize.
  Validates cols/rows in [1, 10000] and returns CodeBadRequest on
  bad input, CodeNotFound when no session.
- internal/service/shell_service.go: ShellService.Resize wrapper that
  checks workspace existence first.
- internal/api/shell_handler.go: resize handler, 204 on success.
- internal/api/router.go: register POST /workspaces/:id/shell/resize.
- internal/model/shell.go: ShellResizeRequest{Cols, Rows}.
- internal/shell/manager_test.go: 3 new tests (valid resize via
  pty.Getsize round-trip, invalid size, missing session).

Frontend:
- web/src/lib/api/process.ts: useShellResize mutation hook.
- web/src/components/terminal/TerminalPanel.tsx: terminal.onResize
  subscription with 100ms debounce; filters 0x0; only fires when
  workspaceId is set; cleanup clears timeout + disposes listener.

E2E: 'stty size' after POST /shell/resize {cols:200, rows:50} returns
'50 200'. 0x40 → 400, missing workspace → 404, valid → 204.

Conversation: 019f360a-5eba-7c81-94d3-e5d58ad3c026
This commit is contained in:
tao.chen
2026-07-06 14:16:09 +08:00
parent 5ed618494d
commit f5a6ff8b0d
8 changed files with 158 additions and 2 deletions
+25 -1
View File
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
import {
useShellStart,
useShellStatus,
useShellResize,
useShellWebSocket,
} from "@/lib/api/process";
@@ -26,6 +27,8 @@ export function TerminalPanel({ workspaceId }: TerminalPanelProps) {
const { status, send, onData } = useShellWebSocket(workspaceId, shellRunning);
const startShell = useShellStart();
const resize = useShellResize();
// Initialize xterm once and keep it alive across WS status changes.
useEffect(() => {
const container = containerRef.current;
@@ -33,6 +36,8 @@ export function TerminalPanel({ workspaceId }: TerminalPanelProps) {
let terminal: Terminal | undefined;
let fitAddon: FitAddon | undefined;
let debounceRef: number | undefined;
let removeResize: (() => void) | undefined;
try {
terminal = new Terminal({
@@ -55,6 +60,20 @@ export function TerminalPanel({ workspaceId }: TerminalPanelProps) {
fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.open(container);
removeResize = terminal.onResize(({ cols, rows }) => {
if (!workspaceId) return;
if (cols <= 0 || rows <= 0) return;
if (debounceRef !== undefined) {
window.clearTimeout(debounceRef);
}
debounceRef = window.setTimeout(() => {
debounceRef = undefined;
if (!workspaceId) return;
resize.mutate({ workspaceId, cols, rows });
}, 100);
}).dispose;
terminalRef.current = terminal;
fitAddonRef.current = fitAddon;
} catch {
@@ -91,6 +110,11 @@ export function TerminalPanel({ workspaceId }: TerminalPanelProps) {
if (rafId !== undefined) {
cancelAnimationFrame(rafId);
}
if (debounceRef !== undefined) {
window.clearTimeout(debounceRef);
debounceRef = undefined;
}
removeResize?.();
resizeObserver.disconnect();
window.removeEventListener("resize", handleResize);
terminal?.dispose();
@@ -98,7 +122,7 @@ export function TerminalPanel({ workspaceId }: TerminalPanelProps) {
terminalRef.current = null;
fitAddonRef.current = null;
};
}, []);
}, [resize, workspaceId]);
// Reset per-workspace state and wire the active socket to xterm.
useEffect(() => {
+25 -1
View File
@@ -148,7 +148,31 @@ export function useShellStop(): UseMutationResult<void, Error, string> {
}
export function useShellRestart(): UseMutationResult<void, Error, string> {
return useShellActionMutation("restart");
return useShellActionMutation("restart");
}
export interface ShellResizeVariables {
workspaceId: string;
cols: number;
rows: number;
}
export function useShellResize(): UseMutationResult<void, Error, ShellResizeVariables> {
return useMutation({
mutationFn: async ({ workspaceId, cols, rows }) => {
const res = await apiClient(
`/api/workspaces/${encodeURIComponent(workspaceId)}/shell/resize`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cols, rows }),
},
);
if (!res.ok) {
throw new Error(`Failed to resize shell: ${res.status}`);
}
},
});
}
export type ProcessWebSocketStatus =