debug: add console logging to trace mobile terminal black screen issue

apps/web/src/components/terminal.tsx

@@ -74,6 +74,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     wsRef.current = ws;
 
     ws.onopen = () => {
+      console.log("[Terminal] WebSocket connected");
       setStatus("connected");
       setError(null);
       reconnectAttemptsRef.current = 0;
@@ -106,13 +107,16 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       if (!termRef.current) return;
 
       if (event.data instanceof Blob) {
+        console.log("[Terminal] Received blob data:", event.data.size, "bytes");
         event.data.arrayBuffer().then((buffer) => {
           const data = new Uint8Array(buffer);
+          console.log("[Terminal] Writing", data.length, "bytes to terminal");
           termRef.current?.write(data);
         });
       } else if (typeof event.data === "string") {
         try {
           const msg = JSON.parse(event.data);
+          console.log("[Terminal] Received JSON message:", msg);
           if (msg.type === "status") {
             if (msg.status === "connected") {
               setStatus("connected");
@@ -184,7 +188,12 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
   }, [instanceId]);
 
   useEffect(() => {
-    if (!terminalRef.current) return;
+    if (!terminalRef.current) {
+      console.error("[Terminal] terminalRef is null");
+      return;
+    }
+
+    console.log("[Terminal] Initializing terminal for instance", instanceId, "isMobile:", isMobile);
 
     // Initialize terminal
     const currentFontSize = calculateFontSize();
@@ -228,18 +237,25 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 
     // Define fitTerminal before connectWebSocket so it's available in onmessage
     const fitTerminal = () => {
-      if (!fitAddonRef.current || !termRef.current) return;
+      if (!fitAddonRef.current || !termRef.current) {
+        console.log("[Terminal] fitTerminal: missing refs");
+        return;
+      }
       // Ensure terminal is opened and has valid dimensions
-      if (termRef.current.cols === 0 || termRef.current.rows === 0) return;
+      if (termRef.current.cols === 0 || termRef.current.rows === 0) {
+        console.log("[Terminal] fitTerminal: zero dimensions", termRef.current.cols, termRef.current.rows);
+        return;
+      }
       const oldCols = termRef.current.cols;
       const oldRows = termRef.current.rows;
       try {
         fitAddonRef.current.fit();
-      } catch {
+      } catch (err) {
-        // Ignore fit errors during initialization
+        console.error("[Terminal] fit error:", err);
         return;
       }
       const { cols, rows } = termRef.current;
+      console.log("[Terminal] fitTerminal:", oldCols, "x", oldRows, "->", cols, "x", rows);
       // Force refresh if dimensions changed and are valid
       if ((cols !== oldCols || rows !== oldRows) && cols > 0 && rows > 0) {
         try {
@@ -255,17 +271,24 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     };
 
     // Open xterm first (must happen before fit)
+    console.log("[Terminal] Opening xterm in container", container.clientWidth, "x", container.clientHeight);
     term.open(container);
     ws = connectWebSocket();
 
     // Initial fit after layout settles (terminal must be opened first)
     const doInitialFit = () => {
-      if (!container.isConnected) return;
+      if (!container.isConnected) {
+        console.log("[Terminal] Container not connected yet");
+        return;
+      }
       // Ensure container has dimensions before fitting
+      console.log("[Terminal] Container dimensions:", container.clientWidth, "x", container.clientHeight);
       if (container.clientWidth > 0 && container.clientHeight > 0) {
+        console.log("[Terminal] Calling initial fit");
         fitTerminal();
       } else {
         // Container not ready yet, try again
+        console.log("[Terminal] Container has no dimensions, retrying...");
         requestAnimationFrame(doInitialFit);
       }
     };