fix(webcrt): keep session across WS remount and fix blank terminal

Allow brief WebSocket re-attach after React StrictMode cleanup, ensure terminal pane has layout height, and show connect status in xterm.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/components/WebTerminal.tsx

@@ -5,11 +5,12 @@ import "@xterm/xterm/css/xterm.css";
 
 type Props = {
   wsUrl: string;
+  title?: string;
   onStatus?: (state: string, message?: string) => void;
   onReady?: () => void;
 };
 
-export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
+export function WebTerminal({ wsUrl, title, onStatus, onReady }: Props) {
   const hostRef = useRef<HTMLDivElement | null>(null);
   const termRef = useRef<Terminal | null>(null);
   const fitRef = useRef<FitAddon | null>(null);
@@ -40,13 +41,26 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
     const fit = new FitAddon();
     term.loadAddon(fit);
     term.open(host);
-    fit.fit();
     termRef.current = term;
     fitRef.current = fit;
 
+    const doFit = () => {
+      try {
+        fit.fit();
+      } catch {
+        /* ignore */
+      }
+    };
+    // Fit after layout; hidden/zero-size parents need a deferred pass.
+    requestAnimationFrame(() => {
+      doFit();
+      window.setTimeout(doFit, 50);
+    });
+
     const ws = new WebSocket(wsUrl);
     wsRef.current = ws;
     onStatusRef.current?.("connecting");
+    term.writeln(`\x1b[90mConnecting${title ? ` ${title}` : ""}…\x1b[0m`);
 
     const sendJson = (payload: Record<string, unknown>) => {
       if (ws.readyState === WebSocket.OPEN) {
@@ -55,12 +69,13 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
     };
 
     const sendResize = () => {
-      fit.fit();
+      doFit();
       sendJson({ type: "resize", cols: term.cols, rows: term.rows });
     };
 
     ws.onopen = () => {
       onStatusRef.current?.("open");
+      term.writeln("\x1b[32mConnected.\x1b[0m");
       sendResize();
       onReadyRef.current?.();
     };
@@ -79,6 +94,10 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
         }
         if (msg.type === "status") {
           onStatusRef.current?.(String(msg.state || ""), msg.message);
+          if (msg.state === "connected") {
+            // Server ack; keep terminal clean.
+            return;
+          }
           if (msg.state === "closed" || msg.state === "error") {
             const detail = msg.message ? `: ${msg.message}` : "";
             term.writeln(`\r\n\x1b[33m[session ${msg.state}${detail}]\x1b[0m`);
@@ -93,6 +112,7 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
 
     ws.onerror = () => {
       onStatusRef.current?.("error", "websocket_error");
+      term.writeln("\r\n\x1b[31m[websocket error]\x1b[0m");
     };
 
     ws.onclose = () => {
@@ -123,10 +143,8 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
       window.removeEventListener("resize", onWinResize);
       ro?.disconnect();
       dataDisposable.dispose();
+      // Do not send {type:"close"} here — React StrictMode remounts and needs reconnect.
       try {
-        if (ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: "close" }));
-        }
         ws.close();
       } catch {
         /* ignore */
@@ -136,7 +154,7 @@ export function WebTerminal({ wsUrl, onStatus, onReady }: Props) {
       termRef.current = null;
       fitRef.current = null;
     };
-  }, [wsUrl]);
+  }, [wsUrl, title]);
 
   return <div className="webcrt-term" ref={hostRef} />;
 }

web/src/index.css

@@ -1424,8 +1424,8 @@ pre {
 
 .webcrt-term {
   width: 100%;
-  height: min(70vh, 720px);
-  min-height: 360px;
+  height: 100%;
+  min-height: 240px;
   background: #0f172a;
   padding: 8px;
   box-sizing: border-box;
@@ -1656,6 +1656,9 @@ pre {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
   background: #808080;
 }
 
@@ -1666,6 +1669,7 @@ pre {
   background: #6e6e6e;
   border-bottom: 1px solid #505050;
   min-height: 28px;
+  flex-shrink: 0;
 }
 
 .webcrt-tabs__item {
@@ -1697,16 +1701,26 @@ pre {
 .webcrt-main__body {
   flex: 1;
   min-height: 0;
+  position: relative;
   background: #0f172a;
 }
 
 .webcrt-main__pane {
-  height: 100%;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.webcrt-main__pane[hidden] {
+  display: none !important;
 }
 
 .webcrt-main__pane .webcrt-term {
-  height: 100%;
-  min-height: 0;
+  flex: 1;
+  width: 100%;
+  height: auto !important;
+  min-height: 240px !important;
 }
 
 .webcrt-main__empty,
@@ -1733,6 +1747,7 @@ pre {
   border-top: 1px solid #a8a8a8;
   font-size: 11px;
   color: #334155;
+  flex-shrink: 0;
 }
 
 @media (max-width: 900px) {

web/src/pages/WebcrtPage.tsx

@@ -350,6 +350,7 @@ export function WebcrtPage() {
                   {tab.wsUrl ? (
                     <WebTerminal
                       wsUrl={tab.wsUrl}
+                      title={tab.target.ip_address || tab.target.name}
                       onStatus={(state) => {
                         if (state === "open" || state === "connected") updateTab(tab.key, { status: "connected" });
                         else if (state === "error") updateTab(tab.key, { status: "error" });