Merge branch 'dev' of ssh://git.commumedia.org:2222/alex/headquarter into dev

apps/web/src/components/terminal.tsx

@@ -115,6 +115,20 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
             if (msg.status === "connected") {
               setStatus("connected");
               setError(null);
+              // Clear terminal and refit after reset/reconnect
+              if (termRef.current) {
+                termRef.current.clear();
+                requestAnimationFrame(() => {
+                  if (fitAddonRef.current && termRef.current) {
+                    fitAddonRef.current.fit();
+                    const { cols, rows } = termRef.current;
+                    const currentWs = wsRef.current;
+                    if (currentWs?.readyState === WebSocket.OPEN) {
+                      currentWs.send(JSON.stringify({ type: "resize", cols, rows }));
+                    }
+                  }
+                });
+              }
             } else if (msg.status === "resetting") {
               setStatus("resetting");
             }
@@ -210,11 +224,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     const container = terminalRef.current;
     let ws: WebSocket;
 
-    // Open xterm immediately
-    term.open(container);
-    ws = connectWebSocket();
-
-    // Fit terminal and notify backend
+    // Define fitTerminal before connectWebSocket so it's available in onmessage
     const fitTerminal = () => {
       if (!fitAddonRef.current || !termRef.current) return;
       const oldCols = termRef.current.cols;
@@ -225,8 +235,9 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       if (cols !== oldCols || rows !== oldRows) {
         termRef.current.refresh(0, rows - 1);
       }
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: "resize", cols, rows }));
+      const currentWs = wsRef.current;
+      if (currentWs?.readyState === WebSocket.OPEN) {
+        currentWs.send(JSON.stringify({ type: "resize", cols, rows }));
       }
     };
 
@@ -237,6 +248,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       });
     });
 
+    // Open xterm immediately
+    term.open(container);
+    ws = connectWebSocket();
+
     // Refit after font load (metrics may change)
     document.fonts.ready.then(() => {
       requestAnimationFrame(() => fitTerminal());
@@ -244,20 +259,21 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 
     // Handle terminal input
     term.onData((data) => {
-      if (ws.readyState !== WebSocket.OPEN) return;
+      const currentWs = wsRef.current;
+      if (currentWs?.readyState !== WebSocket.OPEN) return;
 
       // Apply active modifier to single-character input
       const modifier = activeModifierRef.current;
       if (modifier && data.length === 1) {
         const modified = applyModifierToChar(data, modifier);
         if (modified) {
-          ws.send(modified);
+          currentWs.send(modified);
           onModifierChange?.(null);
           return;
         }
       }
 
-      ws.send(data);
+      currentWs.send(data);
     });
 
     // Handle container resize with ResizeObserver for accurate dimension tracking
@@ -302,8 +318,9 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     // Notify parent about terminal readiness
     if (onTerminalReadyRef.current) {
       const sendData = (data: string) => {
-        if (ws.readyState === WebSocket.OPEN) {
-          ws.send(data);
+        const currentWs = wsRef.current;
+        if (currentWs?.readyState === WebSocket.OPEN) {
+          currentWs.send(data);
         }
       };
       const focusInput = () => {