+
);
@@ -180,14 +323,18 @@ const DraggableTerminal = forwardRef<
return "bg-gray-500";
}
};
+
return (
+
+ {/* Resize buttons */}
+
+
+
+
-
-
-
-
+ {/* Size display */}
+
+ {dimensions.width}×{dimensions.height}
@@ -212,7 +376,6 @@ const DraggableTerminal = forwardRef<
) : (
- {/* FIX: Added a check to ensure item.id is a string before calling substring. */}
{item.status === "creating"
? "Creating..."
: item.status === "error"
@@ -226,13 +389,34 @@ const DraggableTerminal = forwardRef<
)}
-
+
+ {/* Minimize button */}
+
+
+ {/* Maximize/Restore button */}
+
+
+ {/* Close button */}
+
+
{renderTerminalContent()}
diff --git a/frontend/src/components/terminal/Terminal.tsx b/frontend/src/components/terminal/Terminal.tsx
index eaf74c3..aceffa6 100644
--- a/frontend/src/components/terminal/Terminal.tsx
+++ b/frontend/src/components/terminal/Terminal.tsx
@@ -9,17 +9,19 @@ interface XtermProps {
onData: (data: string) => void;
}
-
export interface XtermRef {
write: (data: string) => void;
focus: () => void;
+ fit: () => void;
+ getCols: () => number;
+ getRows: () => number;
}
const Xterm = forwardRef
(({ onData }, ref) => {
const terminalRef = useRef(null);
const termRef = useRef(null);
+ const fitAddonRef = useRef(null);
-
useImperativeHandle(ref, () => ({
write: (data: string) => {
termRef.current?.write(data);
@@ -27,18 +29,31 @@ const Xterm = forwardRef(({ onData }, ref) => {
focus: () => {
termRef.current?.focus();
},
- }));
+ fit: () => {
+ if (fitAddonRef.current) {
+ fitAddonRef.current.fit();
+ }
+ },
+ getCols: () => {
+ return termRef.current?.cols || 80;
+ },
+ getRows: () => {
+ return termRef.current?.rows || 24;
+ },
+ }), []);
useEffect(() => {
if (!terminalRef.current) return;
const term = new XTerminal({
cursorBlink: true,
-
+ fontSize: 14,
+ fontFamily: 'monospace',
});
termRef.current = term;
const fitAddon = new FitAddon();
+ fitAddonRef.current = fitAddon;
term.loadAddon(fitAddon);
term.open(terminalRef.current);
@@ -46,7 +61,10 @@ const Xterm = forwardRef(({ onData }, ref) => {
term.focus();
term.onData(onData);
- const handleResize = () => fitAddon.fit();
+ const handleResize = () => {
+ fitAddon.fit();
+ };
+
window.addEventListener('resize', handleResize);
return () => {
diff --git a/frontend/src/hooks/useSocket.ts b/frontend/src/hooks/useSocket.ts
index 1de9f23..67611eb 100644
--- a/frontend/src/hooks/useSocket.ts
+++ b/frontend/src/hooks/useSocket.ts
@@ -46,46 +46,54 @@ export function useTerminalSocket(
}
};
-ws.onmessage = (event) => {
+ ws.onmessage = (event) => {
try {
- const rawData = JSON.parse(event.data);
- console.log('Raw WebSocket message:', rawData);
-
- const data: SocketMessage = normalizeMessage(rawData);
- console.log('Normalized WebSocket message:', data);
-
- if (data.type === 'session_state' && data.terminals) {
- // Handle session state
- onMessage(data);
- } else if (data.type === 'terminal_created' && data.terminalId) {
- onTerminalCreated?.(data.terminalId);
- onMessage(data);
- } else if (data.type === 'terminal_error') {
- console.error('WebSocket error message:', data.error);
- onError?.(data.error || 'Unknown error');
-
- if (data.terminalId) {
- setTerminals(prev => {
- const updated = new Map(prev);
- const existing = updated.get(data.terminalId!);
- if (existing) {
- updated.set(data.terminalId!, {
- ...existing,
- status: 'error',
- error: data.error,
- });
- }
- return updated;
- });
+ const rawData = JSON.parse(event.data);
+ console.log('Raw WebSocket message:', rawData);
+
+ const data: SocketMessage = normalizeMessage(rawData);
+ console.log('Normalized WebSocket message:', data);
+
+ if (data.type === 'session_state' && data.terminals) {
+ // Handle session state
+ onMessage(data);
+ } else if (data.type === 'terminal_created' && data.terminalId) {
+ onTerminalCreated?.(data.terminalId);
+ onMessage(data);
+ } else if (data.type === 'terminal_error') {
+ console.error('WebSocket error message:', data.error);
+ onError?.(data.error || 'Unknown error');
+
+ if (data.terminalId) {
+ setTerminals(prev => {
+ const updated = new Map(prev);
+ const existing = updated.get(data.terminalId!);
+ if (existing) {
+ updated.set(data.terminalId!, {
+ ...existing,
+ status: 'error',
+ error: data.error,
+ });
}
- onMessage(data);
- } else {
- onMessage(data);
+ return updated;
+ });
}
+ onMessage(data);
+ } else if (data.type === 'terminal_resized') {
+ // Handle terminal resize updates from other clients
+ console.log('Terminal resized:', data.terminalId, data.width, data.height);
+ onMessage(data);
+ } else if (data.type === 'terminal_position_updated') {
+ // Handle position updates from other clients
+ console.log('Terminal position updated:', data.terminalId, data.x, data.y);
+ onMessage(data);
+ } else {
+ onMessage(data);
+ }
} catch (error) {
- console.error('Failed to parse incoming WebSocket message:', event.data, error);
+ console.error('Failed to parse incoming WebSocket message:', event.data, error);
}
- };
+ };
ws.onerror = (error) => {
console.error('WebSocket error:', error);
@@ -142,15 +150,13 @@ ws.onmessage = (event) => {
};
}, [sessionId, clientId, connect]);
-
- const sendMessage = useCallback((type: SocketMessage['type'], content?: string, terminalId?: string, chunkNum : number = 0) => {
+ const sendMessage = useCallback((type: SocketMessage['type'], content?: string, terminalId?: string) => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
const message: SocketMessage = {
type,
content,
sender: clientId,
terminalId,
- chunkNum,
};
console.log('Sending WebSocket message:', message);
wsRef.current.send(JSON.stringify(message));
@@ -200,20 +206,16 @@ ws.onmessage = (event) => {
}, [sendMessage]);
+ const removeTerminal = useCallback((terminalId: string) => {
+ sendMessage('remove_terminal', JSON.stringify({ terminalId }));
+ }, [sendMessage]);
+
+
const getTerminalInfo = useCallback((terminalId: string) => {
return terminals.get(terminalId);
}, [terminals]);
- const removeTerminal = useCallback((terminalId: string) => {
- setTerminals(prev => {
- const updated = new Map(prev);
- updated.delete(terminalId);
- return updated;
- });
- }, []);
-
-
const reconnect = useCallback(() => {
if (wsRef.current) {
wsRef.current.close();
@@ -225,10 +227,10 @@ ws.onmessage = (event) => {
return {
sendMessage,
createTerminal,
- getTerminalInfo,
removeTerminal,
- isConnected,
+ getTerminalInfo,
reconnect,
+ isConnected,
connectionAttempts,
terminals: Array.from(terminals.values()),
};
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 92c5a35..af0f11e 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -1,25 +1,31 @@
export interface CanvasItem {
id: string;
+ type: 'terminal';
position: { x: number; y: number };
- color: string;
+ status: 'creating' | 'ready' | 'error';
terminalId?: string;
- status: "creating" | "ready" | "error";
error?: string;
+ width?: number;
+ height?: number;
+ color?: string;
}
export interface SocketMessage {
- type: 'terminal_created' | 'pty_output' | 'pty_input' | 'create_terminal' | 'terminal_error' | 'session_state' | 'subscribe';
- content?: string;
- terminalId?: string;
- frontendId?: string;
- error?: string;
- sender?: string;
- terminals?: { terminalId: string; frontendId: string; status: string; x: number; y: number }[];
- chunkNum?: number;
- x?: number;
- y?: number;
+ type: string;
+ content?: string;
+ sender?: string;
+ terminalId?: string;
+ frontendId?: string;
+ status?: string;
+ error?: string;
+ x?: number;
+ y?: number;
+ width?: number;
+ height?: number;
+ terminals?: any[];
+ cols?: number;
+ rows?: number;
}
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function normalizeMessage(data: any): SocketMessage {
return {
@@ -30,7 +36,8 @@ export function normalizeMessage(data: any): SocketMessage {
error: data.error,
sender: data.sender,
terminals: data.terminals,
- chunkNum: data.chunkNum,
+ cols: data.cols,
+ rows: data.rows,
};
}
export interface DraggableTerminalRef {
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..332d3c5
Binary files /dev/null and b/image.png differ
diff --git a/nano.18028.save b/nano.18028.save
new file mode 100644
index 0000000..a143ffb
--- /dev/null
+++ b/nano.18028.save
@@ -0,0 +1,2 @@
+lssdks
+