hop2 0.9.0 → 0.9.1

package/hay/apps/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, useCallback, type FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState, useCallback, type CSSProperties, type FormEvent } from "react";
 import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "xterm";
 import "xterm/css/xterm.css";
@@ -13,6 +13,28 @@ import { MobileKeyboard } from "./components/MobileKeyboard";
 
 const createRoomId = () => `room-${Math.random().toString(36).slice(2, 7)}`;
 
+const parseSessionNameFromPath = (pathname: string) => {
+  const match = pathname.match(/^\/s\/([^/]+)\/?$/);
+  if (!match) {
+    return null;
+  }
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return match[1];
+  }
+};
+
+const getLocationRoom = () => {
+  const pathRoom = parseSessionNameFromPath(window.location.pathname);
+  if (pathRoom) {
+    return pathRoom;
+  }
+  return new URLSearchParams(window.location.search).get("room");
+};
+
+const buildSessionPath = (sessionName: string) => `/s/${encodeURIComponent(sessionName)}/`;
+
 const resolveWsUrl = () => {
   // Check for hop session config (when embedded in hop)
   const hopSession = (window as unknown as { __HOP_SESSION__?: { wsUrl?: string } }).__HOP_SESSION__;
@@ -72,6 +94,9 @@ const isMobileDevice = () => {
 };
 
 type ConnectionStatus = "idle" | "connecting" | "connected" | "disconnected";
+type SessionSwitchMode = "page" | "instant";
+const DEFAULT_SESSION_SWITCH_MODE: SessionSwitchMode = "instant";
+const SESSION_LIST_STALE_MS = 5000;
 
 type SessionInfo = {
   name: string;
@@ -89,22 +114,21 @@ const isEmbeddedInHop = () => !!getHopSession()?.room;
 const App = () => {
   const params = new URLSearchParams(window.location.search);
   const hopSession = getHopSession();
+  const initialRoom = hopSession?.room ?? getLocationRoom() ?? createRoomId();
 
   const [name, setName] = useState(() => {
     return params.get("name") ?? localStorage.getItem("hay_name") ?? "User";
   });
-  const [room, setRoom] = useState(() => {
-    if (hopSession?.room) return hopSession.room;
-    return params.get("room") ?? createRoomId();
-  });
+  const [room, setRoom] = useState(() => initialRoom);
   // Auto-start session when embedded in Hop (skip join page)
   const [session, setSession] = useState<{ name: string; room: string } | null>(() => {
     if (hopSession?.room) {
       const userName = params.get("name") ?? localStorage.getItem("hay_name") ?? "User";
-      return { name: userName, room: hopSession.room };
+      return { name: userName, room: initialRoom };
     }
     return null;
   });
+  const [sessionLabel, setSessionLabel] = useState(() => initialRoom);
   const [status, setStatus] = useState<ConnectionStatus>("idle");
   const [presence, setPresence] = useState<PresenceClient[]>([]);
   const [collabMode, setCollabMode] = useState(true);
@@ -120,6 +144,7 @@ const App = () => {
   const fabDragRef = useRef<{ dragging: boolean; startX: number; startY: number; startPosX: number; startPosY: number } | null>(null);
   const [isMobile] = useState(() => isMobileDevice());
   const [keyboardVisible, setKeyboardVisible] = useState(() => isMobileDevice());
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [selectionMode, setSelectionMode] = useState(() => {
     const saved = localStorage.getItem("hay_selection_mode");
     return saved === "true";
@@ -130,6 +155,20 @@ const App = () => {
   });
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loadingSessions, setLoadingSessions] = useState(false);
+  const [sessionSwitchMode, setSessionSwitchMode] = useState<SessionSwitchMode>(() => {
+    const saved = localStorage.getItem("hay_session_switch_mode");
+    // Keep "page" as a legacy fallback while we validate instant mode end-to-end.
+    if (saved === "page") {
+      return "page";
+    }
+    return DEFAULT_SESSION_SWITCH_MODE;
+  });
+
+  useEffect(() => {
+    if (session?.room) {
+      setSessionLabel(session.room);
+    }
+  }, [session?.room]);
   const [fontSize, setFontSize] = useState(() => {
     const saved = localStorage.getItem("hay_font_size");
     return saved ? parseInt(saved, 10) : 14;
@@ -156,6 +195,9 @@ const App = () => {
   useEffect(() => {
     localStorage.setItem("hay_haptics_enabled", hapticsEnabled ? "true" : "false");
   }, [hapticsEnabled]);
+  useEffect(() => {
+    localStorage.setItem("hay_session_switch_mode", sessionSwitchMode);
+  }, [sessionSwitchMode]);
 
   const typingActive = useRef(false);
   const noticeTimeout = useRef<number | null>(null);
@@ -164,6 +206,11 @@ const App = () => {
   const reconnectAttemptRef = useRef(0);
   const reconnectTimerRef = useRef<number | null>(null);
   const shouldReconnectRef = useRef(true);
+  const connectNonceRef = useRef(0);
+  const userScrolledUpRef = useRef(false);
+  const activeSessionRoomRef = useRef<string | null>(null);
+  const sessionListLoadedRef = useRef(false);
+  const sessionListFetchedAtRef = useRef(0);
 
   const pushNotice = (message: string) => {
     setNotice(message);
@@ -175,9 +222,16 @@ const App = () => {
     }, 3000);
   };
 
+  useEffect(() => {
+    activeSessionRoomRef.current = session?.room ?? null;
+  }, [session?.room]);
+
   const shareUrl = useMemo(() => {
-    return session ? createShareLink(session.room) : createShareLink(room);
-  }, [session, room]);
+    if (session) {
+      return createShareLink(sessionLabel || session.room);
+    }
+    return createShareLink(room);
+  }, [session, room, sessionLabel]);
 
   const sortedPresence = useMemo(() => sortPresence(presence, clientId), [presence, clientId]);
 
@@ -297,17 +351,12 @@ const App = () => {
     if (!termRef.current) {
       return;
     }
-    // Check if currently at bottom before writing (standard terminal follow behavior)
-    const viewport = containerRef.current?.querySelector('.xterm-viewport');
-    const wasAtBottom = viewport
-      ? viewport.scrollTop >= viewport.scrollHeight - viewport.clientHeight - 5
-      : true;
 
     // Filter focus reporting sequences that can leak as visible text
     const filtered = data.replace(/\x1b\[I/g, '').replace(/\x1b\[O/g, '');
     termRef.current.write(filtered, () => {
-      // Only scroll to bottom if we were already at bottom (follow output behavior)
-      if (wasAtBottom) {
+      // Auto-scroll to bottom unless the user has explicitly scrolled up
+      if (!userScrolledUpRef.current) {
         termRef.current?.scrollToBottom();
       }
     });
@@ -331,12 +380,15 @@ const App = () => {
   };
 
   const connect = (nextSession: { name: string; room: string }) => {
+    const targetRoom = nextSession.room;
     // Clear any pending reconnect
     if (reconnectTimerRef.current) {
       window.clearTimeout(reconnectTimerRef.current);
       reconnectTimerRef.current = null;
     }
 
+    const connectionNonce = ++connectNonceRef.current;
+
     const wsUrl = resolveWsUrl();
     const cols = termRef.current?.cols ?? 80;
     const rows = termRef.current?.rows ?? 24;
@@ -352,6 +404,10 @@ const App = () => {
     wsRef.current = ws;
 
     ws.addEventListener("open", () => {
+      if (connectionNonce !== connectNonceRef.current || activeSessionRoomRef.current !== targetRoom) {
+        ws.close();
+        return;
+      }
       setStatus("connected");
       reconnectAttemptRef.current = 0; // Reset backoff on successful connection
       handleResize();
@@ -381,6 +437,7 @@ const App = () => {
           break;
         case "snapshot":
           optimisticEchoRef.current.reset();
+          userScrolledUpRef.current = false;
           if (termRef.current) {
             termRef.current.clear();
           }
@@ -394,6 +451,14 @@ const App = () => {
               termRef.current.write('\x1b[?25l');
             }
           }
+          // Auto-fit and scroll to end once after snapshot load
+          if (viewModeRef.current === "fit") {
+            setTimeout(() => {
+              fitToViewport();
+              handleResize();
+              termRef.current?.scrollToBottom();
+            }, 0);
+          }
           break;
         case "collab":
           setCollabMode(message.enabled);
@@ -420,18 +485,37 @@ const App = () => {
           ws.close();
           setStatus("disconnected");
           break;
+        case "session_renamed":
+          setSessionLabel(message.displayName);
+          pushNotice(`Session renamed to ${message.displayName}`);
+          break;
         default:
           break;
       }
     });
 
     ws.addEventListener("close", () => {
+      if (connectionNonce !== connectNonceRef.current) {
+        return;
+      }
+      if (activeSessionRoomRef.current !== targetRoom) {
+        return;
+      }
+      if (!shouldReconnectRef.current) {
+        return;
+      }
       optimisticEchoRef.current.reset();
       setStatus("disconnected");
       scheduleReconnect(nextSession);
     });
 
     ws.addEventListener("error", () => {
+      if (connectionNonce !== connectNonceRef.current) {
+        return;
+      }
+      if (activeSessionRoomRef.current !== targetRoom || !shouldReconnectRef.current) {
+        return;
+      }
       optimisticEchoRef.current.reset();
       setStatus("disconnected");
       // Error is usually followed by close, so don't double-schedule
@@ -534,12 +618,24 @@ const App = () => {
         handleResize();
       }
     });
+    (terminal as any).__resizeObserver = resizeObserver;
 
     const scrollContainer = containerRef.current.closest(".terminal-scroll");
     if (scrollContainer) {
       resizeObserver.observe(scrollContainer);
     }
 
+    // Track user scroll to implement follow-mode:
+    // Auto-scroll stays on until the user scrolls up, and resumes when they scroll back to bottom.
+    const xtermViewport = containerRef.current.querySelector('.xterm-viewport');
+    if (xtermViewport) {
+      xtermViewport.addEventListener('scroll', () => {
+        const el = xtermViewport as HTMLElement;
+        const atBottom = el.scrollTop >= el.scrollHeight - el.clientHeight - 5;
+        userScrolledUpRef.current = !atBottom;
+      });
+    }
+
     if (import.meta.env.VITE_E2E === "true") {
       (window as any).__hay = {
         getBufferText: () => {
@@ -553,17 +649,6 @@ const App = () => {
       };
     }
 
-    return () => {
-      resizeObserver.disconnect();
-      // Clean up touch handlers
-      if ((terminal as any).__touchCleanup) {
-        (terminal as any).__touchCleanup();
-      }
-      terminal.dispose();
-      termRef.current = null;
-      fitRef.current = null;
-      setTerminalReady(false);
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session]);
 
@@ -891,17 +976,68 @@ const App = () => {
       optimisticEchoRef.current.reset();
       reconnectAttemptRef.current = 0;
     }
+  }, [session]);
+
+  useEffect(() => {
     return () => {
+      const terminal = termRef.current;
+      const resizeObserver = (terminal as any)?.__resizeObserver as ResizeObserver | undefined;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      if (terminal) {
+        // Clear any custom touch cleanup hooks from the momentum handler.
+        if ((terminal as any).__touchCleanup) {
+          (terminal as any).__touchCleanup();
+          (terminal as any).__touchCleanup = null;
+        }
+        terminal.dispose();
+        termRef.current = null;
+        fitRef.current = null;
+      }
+
       shouldReconnectRef.current = false;
       if (reconnectTimerRef.current) {
         window.clearTimeout(reconnectTimerRef.current);
       }
       wsRef.current?.close();
     };
-  }, [session]);
+  }, []);
 
-  const fetchSessions = useCallback(async () => {
-    setLoadingSessions(true);
+  useEffect(() => {
+    const handlePopState = () => {
+      const nextRoom = getLocationRoom();
+      const nextName =
+        new URLSearchParams(window.location.search).get("name") ??
+        localStorage.getItem("hay_name") ??
+        name;
+      if (!nextRoom) {
+        if (!isEmbeddedInHop()) {
+          setSession(null);
+        }
+        return;
+      }
+      setRoom(nextRoom);
+      setSession((current) => {
+        const resolvedName = current?.name ?? nextName ?? "User";
+        if (current?.room === nextRoom && current.name === resolvedName) {
+          return current;
+        }
+        return { name: resolvedName, room: nextRoom };
+      });
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [name]);
+
+  const fetchSessions = useCallback(async (options: { showLoading?: boolean } = {}) => {
+    const { showLoading = true } = options;
+    if (showLoading) {
+      setLoadingSessions(true);
+    }
     try {
       const res = await fetch("/api/sessions");
       const data = await res.json();
@@ -932,25 +1068,34 @@ const App = () => {
       }
 
       setSessions(Array.from(sessionMap.values()));
+      sessionListLoadedRef.current = true;
+      sessionListFetchedAtRef.current = Date.now();
     } catch (err) {
       console.error("Failed to fetch sessions:", err);
     } finally {
-      setLoadingSessions(false);
+      if (showLoading) {
+        setLoadingSessions(false);
+      }
     }
   }, []);
 
   // Fetch sessions when drawer opens
   useEffect(() => {
     if (drawerOpen) {
-      fetchSessions();
+      const isFreshEnough = Date.now() - sessionListFetchedAtRef.current <= SESSION_LIST_STALE_MS;
+      const shouldRefresh = !sessionListLoadedRef.current || !isFreshEnough;
+      if (shouldRefresh) {
+        fetchSessions({
+          showLoading: !sessionListLoadedRef.current
+        });
+      }
     }
   }, [drawerOpen, fetchSessions]);
 
-  // Fetch sessions on desktop (no drawer)
+  // Fetch sessions once on mount; mobile keeps list warm for instant drawer open.
   useEffect(() => {
-    if (isMobile) return;
     fetchSessions();
-  }, [fetchSessions, isMobile]);
+  }, [fetchSessions]);
 
   // Update terminal font size when it changes
   useEffect(() => {
@@ -966,9 +1111,51 @@ const App = () => {
     localStorage.setItem("hay_font_size", String(fontSize));
   }, [fontSize]);
 
-  const switchSession = (sessionName: string) => {
-    // Navigate to the new session
-    window.location.href = `/s/${encodeURIComponent(sessionName)}/`;
+  useEffect(() => {
+    if (!isMobile || !terminalReady || !keyboardVisible || keyboardHeight <= 0) {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      if (viewModeRef.current === "fit") {
+        fitToViewport();
+        handleResize();
+      }
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [isMobile, terminalReady, keyboardVisible, keyboardHeight]);
+
+  const switchSession = (nextSession: SessionInfo) => {
+    const nextPath = buildSessionPath(nextSession.name);
+    const currentRoom = session?.room ?? sessionLabel;
+    const canSwitchInPlace = sessionSwitchMode === "instant" && nextSession.type !== "port";
+
+    if (!canSwitchInPlace) {
+      window.location.href = nextPath;
+      return;
+    }
+
+    if (currentRoom === nextSession.name) {
+      setDrawerOpen(false);
+      return;
+    }
+
+    optimisticEchoRef.current.reset();
+    setPresence([]);
+    setControllerId(null);
+    setClientId(null);
+    setStatus("connecting");
+    setRoom(nextSession.name);
+    setSessionLabel(nextSession.displayName || nextSession.name);
+    setSession((current) => ({
+      name: current?.name ?? name.trim() ?? "User",
+      room: nextSession.name
+    }));
+    window.history.pushState({}, "", nextPath);
+    setDrawerOpen(false);
   };
 
   const handleJoin = (event: FormEvent) => {
@@ -1053,6 +1240,10 @@ const App = () => {
     []
   );
 
+  const sessionStyle = isMobile
+    ? ({ "--mobile-keyboard-height": `${keyboardVisible ? keyboardHeight : 0}px` } as CSSProperties)
+    : undefined;
+
   return (
     <div className="app">
       <header className="topbar">
@@ -1110,6 +1301,7 @@ const App = () => {
       ) : (
         <main
           className={`session${isMobile && keyboardVisible ? " has-keyboard" : ""}${selectionMode ? " selection-mode" : ""}`}
+          style={sessionStyle}
         >
           <button
             type="button"
@@ -1141,7 +1333,7 @@ const App = () => {
             </button>
             <div className="room-info">
               <p className="room-label">Session</p>
-              <h2>{session.room}</h2>
+              <h2>{sessionLabel || session.room}</h2>
               <p className="room-meta">
                 {status === "connected" ? "Live" : status === "connecting" ? "Connecting" : "Offline"}
               </p>
@@ -1191,6 +1383,25 @@ const App = () => {
                 </button>
               </div>
             </div>
+            <div className="view-mode-control">
+              <label>Session switch</label>
+              <div className="view-mode-buttons">
+                <button
+                  type="button"
+                  className={sessionSwitchMode === "page" ? "active" : ""}
+                  onClick={() => setSessionSwitchMode("page")}
+                >
+                  Page load
+                </button>
+                <button
+                  type="button"
+                  className={sessionSwitchMode === "instant" ? "active" : ""}
+                  onClick={() => setSessionSwitchMode("instant")}
+                >
+                  Instant
+                </button>
+              </div>
+            </div>
             {isMobile && (
               <div className="selection-mode-control">
                 <label>Selection mode</label>
@@ -1235,7 +1446,8 @@ const App = () => {
             )}
             {notice && <p className="notice">{notice}</p>}
             {(() => {
-              const otherSessions = sessions.filter((s) => s.name !== session?.room);
+              const currentSessionName = sessionLabel || session?.room;
+              const otherSessions = sessions.filter((s) => s.name !== currentSessionName);
               return (
                 <div className="session-switcher">
                   <p className="session-switcher-label">Switch session</p>
@@ -1250,7 +1462,7 @@ const App = () => {
                           key={s.name}
                           type="button"
                           className={`session-list-item${s.active ? " active" : ""}${s.starting ? " starting" : ""}`}
-                          onClick={() => switchSession(s.name)}
+                          onClick={() => switchSession(s)}
                         >
                           <span className="session-list-name">{s.displayName}</span>
                           {s.active && <span className="session-badge live">LIVE</span>}
@@ -1290,6 +1502,7 @@ const App = () => {
               onInput={handleKeyboardInput}
               visible={keyboardVisible}
               onToggle={handleKeyboardToggle}
+              onHeightChange={setKeyboardHeight}
               hapticsEnabled={hapticsEnabled}
             />
           )}

package/hay/apps/web/src/components/MobileKeyboard.tsx

@@ -12,6 +12,7 @@ interface MobileKeyboardProps {
   onInput: (data: string) => void;
   visible: boolean;
   onToggle: () => void;
+  onHeightChange?: (height: number) => void;
   hapticsEnabled?: boolean;
 }
 
@@ -91,7 +92,13 @@ const PasteIcon = () => (
   </svg>
 );
 
-export const MobileKeyboard = ({ onInput, visible, onToggle, hapticsEnabled = true }: MobileKeyboardProps) => {
+export const MobileKeyboard = ({
+  onInput,
+  visible,
+  onToggle,
+  onHeightChange,
+  hapticsEnabled = true
+}: MobileKeyboardProps) => {
   const [view, setView] = useState<KeyboardView>("abc");
   const [shift, setShift] = useState(false);
   const [caps, setCaps] = useState(false);
@@ -107,6 +114,7 @@ export const MobileKeyboard = ({ onInput, visible, onToggle, hapticsEnabled = tr
   const bkspInterval = useRef<number | null>(null);
   const sysInputRef = useRef<HTMLTextAreaElement>(null);
   const hapticLabelRef = useRef<HTMLLabelElement | null>(null);
+  const keyboardRef = useRef<HTMLDivElement>(null);
 
   // Use refs to avoid stale closures in rapid key presses
   const onInputRef = useRef(onInput);
@@ -296,6 +304,39 @@ export const MobileKeyboard = ({ onInput, visible, onToggle, hapticsEnabled = tr
     resizeSysTextarea();
   }, [sysKbDraft, sysKbOpen, resizeSysTextarea]);
 
+  useEffect(() => {
+    if (!visible) {
+      onHeightChange?.(0);
+      return;
+    }
+
+    const el = keyboardRef.current;
+    if (!el) {
+      return;
+    }
+
+    const reportHeight = () => {
+      onHeightChange?.(Math.ceil(el.getBoundingClientRect().height));
+    };
+
+    reportHeight();
+    window.addEventListener("resize", reportHeight);
+
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        window.removeEventListener("resize", reportHeight);
+      };
+    }
+
+    const observer = new ResizeObserver(reportHeight);
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", reportHeight);
+    };
+  }, [visible, onHeightChange]);
+
   const handleShift = useCallback(() => {
     const now = Date.now();
     const doubleTap = shiftTapAt.current && now - shiftTapAt.current < 300;
@@ -591,7 +632,7 @@ export const MobileKeyboard = ({ onInput, visible, onToggle, hapticsEnabled = tr
         </div>
       )}
 
-      <div className="mobile-keyboard">
+      <div ref={keyboardRef} className="mobile-keyboard">
         {/* Accessory row - Esc, Tab, Ctrl, Alt, arrows, system keyboard */}
         <div className="kb-acc-row">
           {ACC_KEYS.map((k, i) => {

package/hay/apps/web/src/styles.css

@@ -564,6 +564,7 @@ button.primary {
     flex-direction: column;
     overflow: hidden;
     background: #0b1117;
+    --mobile-keyboard-height: 0px;
   }
 
   .session .terminal {
@@ -780,14 +781,20 @@ button.primary {
 }
 
 .mobile-keyboard {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
   background: #d1d3d9;
-  padding: 2px max(2px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom, 0px)) max(2px, env(safe-area-inset-left));
+  padding: 2px max(2px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(2px, env(safe-area-inset-left));
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
   box-sizing: border-box;
   overflow-x: hidden;
   -webkit-user-select: none;
   user-select: none;
   flex-shrink: 0;
+  z-index: 150;
 }
 
 .kb-acc-row {
@@ -1065,7 +1072,7 @@ button.primary {
 
 /* Keyboard visibility state - when keyboard is shown, maximize terminal space */
 .session.has-keyboard {
-  padding-bottom: 0;
+  padding-bottom: var(--mobile-keyboard-height, 0px);
   padding-top: 8px;
 }
 

package/hay/package-lock.json

@@ -15,7 +15,7 @@
     },
     "apps/cli": {
       "name": "hay-cli",
-      "version": "0.1.0",
+      "version": "0.8.0",
       "dependencies": {
         "hay-shared": "*",
         "ws": "^8.18.0",
@@ -34,7 +34,7 @@
     },
     "apps/server": {
       "name": "hay-server",
-      "version": "0.1.0",
+      "version": "0.8.0",
       "dependencies": {
         "express": "^4.21.2",
         "hay-shared": "*",
@@ -53,7 +53,7 @@
     },
     "apps/web": {
       "name": "hay-web",
-      "version": "0.1.0",
+      "version": "0.8.0",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",
         "hay-shared": "*",
@@ -5973,7 +5973,7 @@
     },
     "packages/shared": {
       "name": "hay-shared",
-      "version": "0.1.0",
+      "version": "0.8.0",
       "dependencies": {
         "zod": "^3.24.1"
       },

package/hay/packages/shared/src/protocol.ts

@@ -50,6 +50,10 @@ export const serverMessageSchema = z.discriminatedUnion("type", [
     signal: z.string().nullable(),
     message: z.string()
   }),
+  z.object({
+    type: z.literal("session_renamed"),
+    displayName: z.string()
+  }),
   z.object({ type: z.literal("pong"), t: z.number() }),
   // Broadcast when active user's terminal size should be followed
   z.object({ type: z.literal("active_size"), clientId: z.string(), cols: z.number().int(), rows: z.number().int() })