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:
@@ -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(() => {
|
||||
|
||||
@@ -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 =
|
||||
|
||||
Reference in New Issue
Block a user