From b26366eb05ff3d71ceaac58c13311d7c4eff3c8a Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Tue, 26 Aug 2025 17:11:42 -0700
Subject: [PATCH] Fixing bugs

---
 client/package.json          |   2 +-
 client/src/App.tsx           | 325 +++++++------
 client/src/Common.ts         |  21 +-
 client/src/GlobalContext.tsx |  27 +-
 client/src/MediaControl.tsx  | 871 ++++++++++++++++++-----------------
 client/src/UserList.css      |  46 +-
 client/src/UserList.tsx      | 189 ++++----
 server/main.py               | 313 ++++++++-----
 8 files changed, 970 insertions(+), 824 deletions(-)

diff --git a/client/package.json b/client/package.json
index d3c5cfc..f1de2a4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,11 +17,11 @@
     "react-moveable": "^0.56.0",
     "react-router-dom": "^7.8.2",
     "react-scripts": "5.0.1",
+    "react-use-websocket": "^4.13.0",
     "socket.io-client": "^4.8.1",
     "web-vitals": "^5.1.0"
   },
   "devDependencies": {
-    "typescript": "^5.4.5",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.19",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0c11ae1..e01d065 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,157 +1,182 @@
-import React, { useState, useEffect, KeyboardEvent, useRef } from "react";
+import React, { useState, useEffect, KeyboardEvent } from "react";
 import { Input, Paper, Typography } from "@mui/material";
 
-import { GlobalContext, GlobalContextType } from "./GlobalContext";
+import { Session } from "./GlobalContext";
 import { UserList } from "./UserList";
 import "./App.css";
-import { base } from "./Common";
+import { ws_base, base } from "./Common";
 import { Box, Button } from "@mui/material";
 import { BrowserRouter as Router, Route, Routes, useParams } from "react-router-dom";
+import useWebSocket, { ReadyState } from "react-use-websocket";
 
 console.log(`AI Voice Chat Build: ${process.env.REACT_APP_AI_VOICECHAT_BUILD}`);
 
 type LobbyProps = {
-  lobbyId: string;
-  sessionId: string;
+  session: Session;
 };
-const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
-  const { lobbyId, sessionId } = props;
-  const [editName, setEditName] = useState<string>("");
-  const [name, setName] = useState<string>("");
-  const [ws, setWs] = useState<WebSocket | undefined>(undefined);
-  const [error, setError] = useState<string | null>(null);
-  const [global, setGlobal] = useState<GlobalContextType>({
-    connected: false,
-    ws: undefined,
-    sessionId: sessionId,
-    name: "",
-    chat: [],
-  });
 
-  const onWsMessage = (event: MessageEvent) => {
-    const data = JSON.parse(event.data);
+const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
+  const { session } = props;
+  const { lobbyName = "default" } = useParams<{ lobbyName: string }>();
+  const [lobbyId, setLobbyId] = useState<string | null>(null);
+  const [editName, setEditName] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [socketUrl, setSocketUrl] = useState<string | null>(null);
+
+  const socket = useWebSocket(socketUrl, {
+    onOpen: () => console.log("WebSocket connection opened."),
+    onClose: () => console.log("WebSocket connection closed."),
+    onError: (event) => console.error("WebSocket error observed:", event),
+    onMessage: (event) => console.log("WebSocket message received:"),
+    shouldReconnect: (closeEvent) => true, // Will attempt to reconnect on all close events.
+    reconnectInterval: 3000,
+    share: true,
+  });
+  const { sendJsonMessage, lastJsonMessage, readyState } = socket;
+
+  useEffect(() => {
+    if (lobbyId && session) {
+      setSocketUrl(`${ws_base}/${lobbyId}/${session.id}`);
+    }
+  }, [lobbyId, session]);
+
+  useEffect(() => {
+    if (!lastJsonMessage) {
+      return;
+    }
+    const data: any = lastJsonMessage;
     switch (data.type) {
       case "update":
         if ("name" in data) {
-          setName(data.name);
+          console.log(`Lobby - name set to ${data.name}`);
+          session.name = data.name;
         }
         break;
       case "error":
+        console.error(`Lobby - Server error: ${data.error}`);
         setError(data.error);
         break;
       default:
         break;
     }
+  }, [lastJsonMessage]);
+
+  useEffect(() => {
+    console.log("WebSocket connection status: ", readyState);
+  }, [readyState]);
+
+  useEffect(() => {
+    if (!session || !lobbyName) {
+      return;
+    }
+    const getLobbyId = async (lobbyName: string, session: Session) => {
+      const res = await fetch(`${base}/api/lobby/${lobbyName}/${session.id}`, {
+        method: "GET",
+        cache: "no-cache",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (res.status >= 400) {
+        const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
+        console.error(error);
+        setError(error);
+      }
+
+      const data = await res.json();
+      if (data.error) {
+        console.error(`Lobby - Server error: ${data.error}`);
+        setError(data.error);
+        return;
+      }
+
+      setLobbyId(data.lobby);
+    };
+
+    getLobbyId(lobbyName, session);
+  }, [session, lobbyName, setLobbyId]);
+
+  const setName = (name: string) => {
+    sendJsonMessage({
+      type: "set_name",
+      name: name,
+    });
   };
-  const refWsMessage = useRef(onWsMessage);
-
-  useEffect(() => {
-    refWsMessage.current = onWsMessage;
-  });
-
-  useEffect(() => {
-    if (!ws) {
-      return;
-    }
-    const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
-    ws.addEventListener("message", cbMessage);
-    return () => {
-      ws.removeEventListener("message", cbMessage);
-    };
-  }, [ws, refWsMessage]);
-
-  // Setup websocket connection on mount (only once)
-  useEffect(() => {
-    if (!lobbyId) {
-      console.log("No lobby ID");
-      return;
-    }
-    let loc = window.location,
-      new_uri;
-    if (loc.protocol === "https:") {
-      new_uri = "wss";
-    } else {
-      new_uri = "ws";
-    }
-    new_uri = `${new_uri}://${loc.host}${base}/ws/lobby/${lobbyId}`;
-    const socket = new WebSocket(new_uri);
-    socket.onopen = () => {
-      console.log("WebSocket connected");
-      setGlobal((g: GlobalContextType) => ({ ...g, connected: true }));
-      if (name) {
-        socket.send(JSON.stringify({ type: "set_name", name }));
-      }
-    };
-    setWs(socket);
-    setGlobal((g: GlobalContextType) => ({ ...g, ws: socket }));
-    return () => {
-      setGlobal((g: GlobalContextType) => ({ ...g, connected: false, ws: undefined }));
-      if (socket.readyState !== 0) {
-        socket.close();
-      }
-    };
-    // Only run once on mount
-    // eslint-disable-next-line
-  }, []);
-
-  // Update global context and send set_name when name changes
-  useEffect(() => {
-    if (!ws || !global.connected || global.name === name) {
-      return;
-    }
-    setGlobal((g: GlobalContextType) => ({ ...g, name }));
-    console.log("Sending set_name", name);
-    ws.send(JSON.stringify({ type: "set_name", name }));
-  }, [name, ws, global]);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
     if (event.key === "Enter") {
       event.preventDefault();
-      if (!editName.trim()) {
+      const newName = editName.trim();
+      if (!newName || session?.name === newName) {
         return;
       }
-      setName(editName.trim());
+      setName(newName);
       setEditName("");
     }
   };
 
   return (
     <Paper className="Lobby" sx={{ p: 2, m: 2, width: "fit-content" }}>
-      {!global.connected ? (
+      {readyState !== ReadyState.OPEN || !session ? (
         <h2>Connecting to server...</h2>
       ) : (
-        <GlobalContext.Provider value={global}>
-          {global.name && <UserList />}
-
-          {!global.name && (
-            <Box sx={{ gap: 1, display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
-              <Typography>Enter your name to join:</Typography>
-              <Box sx={{ display: "flex", gap: 1, width: "100%" }}>
-                <Input
-                  type="text"
-                  value={editName}
-                  onChange={(e): void => {
-                    setEditName(e.target.value);
-                  }}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Your name"
-                />
-                <Button
-                  variant="contained"
-                  onClick={() => {
-                    if (ws && global.connected && editName) {
-                      setName(editName.trim());
-                      setEditName("");
-                    }
-                  }}
-                  disabled={!editName.trim()}
-                >
-                  Join
-                </Button>
-              </Box>
+        <>
+          <Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: "column" }}>
+            <Box>
+              <Typography variant="h5">AI Voice Chat Lobby: {lobbyName}</Typography>
             </Box>
+            <Box>
+              {session.name && <Typography>You are logged in as: {session.name}</Typography>}
+              {!session.name && (
+                <Box sx={{ gap: 1, display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                  <Typography>Enter your name to join:</Typography>
+                  <Box sx={{ display: "flex", gap: 1, width: "100%" }}>
+                    <Input
+                      type="text"
+                      value={editName}
+                      onChange={(e): void => {
+                        setEditName(e.target.value);
+                      }}
+                      onKeyDown={handleKeyDown}
+                      placeholder="Your name"
+                    />
+                    <Button
+                      variant="contained"
+                      onClick={() => {
+                        setName(editName);
+                        setEditName("");
+                      }}
+                      disabled={!editName.trim()}
+                    >
+                      Join
+                    </Button>
+                  </Box>
+                </Box>
+              )}
+            </Box>
+          </Box>
+
+          {session.name && (
+            <>
+              {session.lobbies.map((lobby: string) => (
+                <Box key={lobby}>
+                  <Button
+                    variant="contained"
+                    href={`${base}/${lobby}`}
+                    disabled={lobby === lobbyName}
+                    sx={{ mr: 1, mb: 1 }}
+                  >
+                    {lobby === lobbyName ? `In Lobby: ${lobby}` : `Join Lobby: ${lobby}`}
+                  </Button>
+                </Box>
+              ))}
+
+              {session && socketUrl && <UserList socketUrl={socketUrl} session={session} />}
+            </>
           )}
-        </GlobalContext.Provider>
+        </>
       )}
       {error && (
         <Paper className="Error" sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ffdddd" }}>
@@ -163,48 +188,56 @@ const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
 };
 
 const App = () => {
-  const [sessionId, setSessionId] = useState(undefined);
+  const [session, setSession] = useState<Session | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const { lobbyId = "default" } = useParams<{ lobbyId: string }>();
 
   useEffect(() => {
-    console.log(`App - sessionId`, sessionId);
-  }, [sessionId]);
-
-  useEffect(() => {
-    if (sessionId) {
+    if (!session) {
       return;
     }
-    fetch(`${base}/api/lobby`, {
-      method: "GET",
-      cache: "no-cache",
-      credentials: "same-origin",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((res) => {
-        if (res.status >= 400) {
-          const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
-          console.error(error);
-          setError(error);
-        }
-        return res.json();
-      })
-      .then((data) => {
-        setSessionId(data.session);
-      })
-      .catch((error) => {});
-  }, [sessionId, setSessionId]);
+    console.log(`App - sessionId`, session.id);
+  }, [session]);
+
+  useEffect(() => {
+    if (session) {
+      return;
+    }
+    const getSession = async () => {
+      const res = await fetch(`${base}/api/session`, {
+        method: "GET",
+        cache: "no-cache",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (res.status >= 400) {
+        const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
+        console.error(error);
+        setError(error);
+        return;
+      }
+      const data = await res.json();
+      if (data.error) {
+        console.error(`App - Server error: ${data.error}`);
+        setError(data.error);
+        return;
+      }
+      setSession(data);
+    };
+
+    getSession();
+  }, [session, setSession]);
 
   return (
     <Box>
-      {!sessionId && <h2>Connecting to server...</h2>}
-      {sessionId && (
+      {!session && <h2>Connecting to server...</h2>}
+      {session && (
         <Router>
           <Routes>
-            <Route element={<Lobby sessionId={sessionId} lobbyId={lobbyId} />} path={`${base}/:lobbyId`} />
-            <Route element={<Lobby sessionId={sessionId} lobbyId={lobbyId} />} path={`${base}`} />
+            <Route element={<Lobby session={session} />} path={`${base}/:lobbyName`} />
+            <Route element={<Lobby session={session} />} path={`${base}`} />
           </Routes>
         </Router>
       )}
diff --git a/client/src/Common.ts b/client/src/Common.ts
index 1ce4345..30e70ea 100644
--- a/client/src/Common.ts
+++ b/client/src/Common.ts
@@ -1,18 +1,5 @@
-function debounce<T extends (...args: any[]) => void>(fn: T, ms: number) {
-  let timer: ReturnType<typeof setTimeout>;
-  return function(this: any, ...args: Parameters<T>) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      timer = null as any;
-      fn.apply(this, args);
-    }, ms);
-  };
-}
-
 const base = process.env.PUBLIC_URL || "";
-   
-const assetsPath = `${base}/assets`;
-const gamesPath = `${base}`;
-
-export { base, debounce, assetsPath, gamesPath };
-export {};
+const ws_base: string = `${window.location.protocol === "https:" ? "wss" : "ws"}://${
+  window.location.host
+}${base}/ws/lobby`;
+export { base, ws_base };
diff --git a/client/src/GlobalContext.tsx b/client/src/GlobalContext.tsx
index 9660a11..9e8c03f 100644
--- a/client/src/GlobalContext.tsx
+++ b/client/src/GlobalContext.tsx
@@ -1,21 +1,6 @@
-import { createContext } from "react";
-
-interface GlobalContextType {
-  connected: boolean;
-  ws?: WebSocket;
-  name?: string;
-  sessionId?: string;
-  chat?: any[];
-  [key: string]: any;
-}
-
-const GlobalContext = createContext<GlobalContextType>({
-  connected: false,
-  ws: undefined,
-  name: "",
-  sessionId: undefined,
-  chat: []
-});
-
-export { GlobalContext };
-export type { GlobalContextType };
+type Session = {
+  id: string;
+  name: string | null;
+  lobbies: string[];
+};
+export type { Session };
diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx
index ec8d998..23f0099 100644
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useContext } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import Moveable from "react-moveable";
 import "./MediaControl.css";
 import VolumeOff from "@mui/icons-material/VolumeOff";
@@ -7,27 +7,29 @@ import MicOff from "@mui/icons-material/MicOff";
 import Mic from "@mui/icons-material/Mic";
 import VideocamOff from "@mui/icons-material/VideocamOff";
 import Videocam from "@mui/icons-material/Videocam";
-import { GlobalContext } from "./GlobalContext";
 import Box from "@mui/material/Box";
+import useWebSocket from "react-use-websocket";
+import { Session } from "./GlobalContext";
 
 const debug = true;
 
 // Types for peer and track context
 interface Peer {
-  sessionId: string;
+  session_id: string;
   peerName: string;
-  hasAudio: boolean;
-  hasVideo: boolean;
+  has_audio: boolean;
+  has_video: boolean;
   attributes: Record<string, any>;
   muted: boolean;
-  videoOn: boolean;
+  video_on: boolean /* Set by client */;
   local: boolean;
   dead: boolean;
   connection?: RTCPeerConnection;
 }
+export type { Peer };
 
 interface TrackContext {
-  media: MediaStream;
+  media: MediaStream | null;
   audio: boolean;
   video: boolean;
 }
@@ -35,8 +37,8 @@ interface TrackContext {
 interface AddPeerConfig {
   peer_id: string;
   peer_name: string;
-  hasAudio: boolean;
-  hasVideo: boolean;
+  has_audio: boolean;
+  has_video: boolean;
   should_create_offer?: boolean;
 }
 
@@ -82,15 +84,48 @@ const Video: React.FC<VideoProps> = ({ srcObject, local, ...props }) => {
 };
 
 type MediaAgentProps = {
+  socketUrl: string;
+  session: Session;
+  peers: Record<string, Peer>;
   setPeers: (peers: Record<string, Peer>) => void;
 };
 
 const MediaAgent = (props: MediaAgentProps) => {
-  const { setPeers } = props;
-  const { name, ws, sessionId } = useContext(GlobalContext);
-  const [peers] = useState<Record<string, Peer>>({});
-  const [track, setTrack] = useState<TrackContext | undefined>(undefined);
-  const ignore = useRef(false);
+  const { peers, setPeers, socketUrl, session } = props;
+  // track: null = no local media, TrackContext = local media
+  const [track, setTrack] = useState<TrackContext | null>(null);
+
+  const { sendJsonMessage, lastJsonMessage } = useWebSocket(socketUrl, {
+    share: true,
+    onError: (err) => {
+      console.error(err);
+    },
+    onClose: (_event: CloseEvent) => {
+      if (!session) {
+        return;
+      }
+      console.log(`media-agent - ${session.name} Disconnected from signaling server`);
+      /* Tear down all of our peer connections and remove all the
+       * media divs when we disconnect */
+      for (let peer_id in peers) {
+        if (peers[peer_id].local) {
+          continue;
+        }
+        if (peers[peer_id].connection) {
+          peers[peer_id].connection.close();
+          peers[peer_id].connection = undefined;
+        }
+      }
+
+      for (let id in peers) {
+        peers[id].dead = true;
+        peers[id].connection = undefined;
+      }
+
+      if (debug) console.log(`media-agent - close`, peers);
+      setPeers(Object.assign({}, peers));
+    },
+  });
 
   const onTrack = useCallback(
     (event: RTCTrackEvent) => {
@@ -102,7 +137,6 @@ const MediaAgent = (props: MediaAgentProps) => {
           Object.assign(peers[peer].attributes, {
             srcObject: event.streams[0] || event.track,
           });
-          /* Trigger update of MediaControl now that a track is available */
           setPeers(Object.assign({}, peers));
         }
       }
@@ -111,326 +145,248 @@ const MediaAgent = (props: MediaAgentProps) => {
   );
   const refOnTrack = useRef(onTrack);
 
-  const sendMessage = useCallback(
-    (data: LobbyMessage) => {
-      if (!ws) {
+  const addPeer = useCallback(
+    (config: AddPeerConfig) => {
+      console.log("media-agent - addPeer - ", { config, peers });
+      if (config.peer_id in peers) {
+        if (!peers[config.peer_id].dead) {
+          console.log(`media-agent - addPeer - ${config.peer_id} already in peers`);
+          return;
+        }
+      }
+      const peer: Peer = {
+        session_id: config.peer_id,
+        peerName: config.peer_name,
+        has_audio: config.has_audio,
+        has_video: config.has_video,
+        attributes: {},
+        muted: false,
+        video_on: true,
+        local: false,
+        dead: false,
+      };
+      if (config.peer_id in peers) {
+        peer.muted = peers[config.peer_id].muted;
+        peer.video_on = peers[config.peer_id].video_on;
+      }
+      peers[config.peer_id] = peer;
+      setPeers({ ...peers });
+      const connection = new RTCPeerConnection({
+        iceServers: [
+          {
+            urls: "turns:ketrenos.com:5349",
+            username: "ketra",
+            credential: "ketran",
+          },
+        ],
+      });
+      peer.connection = connection;
+      connection.addEventListener("connectionstatechange", (event) => {
+        console.log(`media-agent - connectionstatechange - `, connection.connectionState, event);
+      });
+      connection.addEventListener("negotiationneeded", (event) => {
+        console.log(`media-agent - negotiationneeded - `, connection.connectionState, event);
+      });
+      connection.addEventListener("icecandidateerror", (event: RTCPeerConnectionIceErrorEvent) => {
+        if (event.errorCode === 701) {
+          if (connection.iceGatheringState === "gathering") {
+            console.log(`media-agent - Unable to reach host: ${event.url}`);
+          } else {
+            console.error(
+              `media-agent - icecandidateerror - `,
+              event.errorCode,
+              (event as any).hostcandidate,
+              event.url,
+              event.errorText
+            );
+          }
+        }
+      });
+      connection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
+        if (!event.candidate) {
+          console.log(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
+          return;
+        }
+        sendJsonMessage({
+          type: "relayICECandidate",
+          config: {
+            peer_id: config.peer_id,
+            candidate: event.candidate,
+          },
+        });
+      };
+      connection.ontrack = (e: RTCTrackEvent) => refOnTrack.current(e);
+      // Only add local tracks if present
+      if (track && track.media) {
+        track.media.getTracks().forEach((t) => {
+          connection.addTrack(t, track.media!);
+        });
+      }
+      if (config.should_create_offer) {
+        connection
+          .createOffer()
+          .then((local_description) => {
+            return connection.setLocalDescription(local_description).then(() => {
+              sendJsonMessage({
+                type: "relaySessionDescription",
+                config: {
+                  peer_id: config.peer_id,
+                  session_description: local_description,
+                },
+              });
+            });
+          })
+          .catch((error) => {
+            console.error(`media-agent - Offer setLocalDescription failed!`, error);
+          });
+      }
+    },
+    [peers, setPeers, track, sendJsonMessage]
+  );
+
+  const sessionDescription = useCallback(
+    ({ peer_id, session_description }: SessionDescriptionData) => {
+      const peer = peers[peer_id];
+      if (!peer) {
+        console.error(`media-agent - sessionDescription - No peer for ${peer_id}`);
         return;
       }
-      ws.send(JSON.stringify(data));
-    },
-    [ws]
-  );
-
-  const onWsMessage = useCallback(
-    (event: MessageEvent) => {
-      const addPeer = (config: AddPeerConfig) => {
-        console.log("media-agent - Signaling server said to add peer:", config);
-        if (!track) {
-          console.log(`media-agent - No local media track`);
-          return;
-        }
-        const { peer_id, peer_name } = config;
-        if (peer_id in peers) {
-          if (!peers[peer_id].dead) {
-            /* This is normal when peers are added by other connecting
-             * peers through the signaling server */
-            console.log(`media-agent - addPeer - ${peer_id} already in peers`);
-            return;
-          }
-        }
-        /* Even if reviving, allocate a new Object so <MediaControl> will
-         * have its peer state change and trigger an update from
-         * <PlayerList> */
-        const peer: Peer = {
-          sessionId: peer_id,
-          peerName: peer_name,
-          hasAudio: config.hasAudio,
-          hasVideo: config.hasVideo,
-          attributes: {},
-          muted: false,
-          videoOn: true,
-          local: false,
-          dead: false,
-        };
-        if (peer_id in peers) {
-          peer.muted = peers[peer_id].muted;
-          peer.videoOn = peers[peer_id].videoOn;
-          console.log(`media-agent - addPeer - reviving dead peer ${peer_id}`, peer);
-        } else {
-          peer.muted = false;
-          peer.videoOn = true;
-        }
-        peers[peer_id] = peer;
-        console.log(`media-agent - addPeer - remote`, peers);
-        setPeers(Object.assign({}, peers));
-        // RTCPeerConnection config should be passed directly, not as 'configuration' property
-        const connection = new RTCPeerConnection({
-          iceServers: [
-            {
-              urls: "turns:ketrenos.com:5349",
-              username: "ketra",
-              credential: "ketran",
-            },
-          ],
-        });
-        peer.connection = connection;
-
-        connection.addEventListener("connectionstatechange", (event) => {
-          console.log(`media-agent - connectionstatechange - `, connection.connectionState, event);
-        });
-
-        connection.addEventListener("negotiationneeded", (event) => {
-          console.log(`media-agent - negotiationneeded - `, connection.connectionState, event);
-        });
-
-        connection.addEventListener("icecandidateerror", (event: RTCPeerConnectionIceErrorEvent) => {
-          if (event.errorCode === 701) {
-            if (connection.iceGatheringState === "gathering") {
-              console.log(`media-agent - Unable to reach host: ${event.url}`);
-            } else {
-              // hostcandidate is deprecated and not always present
-              console.error(
-                `media-agent - icecandidateerror - `,
-                event.errorCode,
-                (event as any).hostcandidate,
-                event.url,
-                event.errorText
-              );
-            }
-          }
-        });
-
-        connection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
-          if (!event.candidate) {
-            console.log(`media-agent - icecanditate - gathering is complete: ${connection.connectionState}`);
-            return;
-          }
-          // If a srflx candidate was found, notify that the STUN server works!
-          if (event.candidate && event.candidate.type === "srflx") {
-            console.log("media-agent - The STUN server is reachable!");
-            // address is not standard, use candidate.candidate string parsing if needed
-          }
-          // If a relay candidate was found, notify that the TURN server works!
-          if (event.candidate && event.candidate.type === "relay") {
-            console.log("media-agent - The TURN server is reachable !");
-          }
-          console.log(`media-agent - onicecandidate - `, event.candidate);
-          sendMessage({
-            type: "relayICECandidate",
-            config: {
-              peer_id,
-              candidate: event.candidate,
-            },
-          });
-        };
-
-        connection.ontrack = (e: RTCTrackEvent) => refOnTrack.current(e);
-
-        // Add all tracks from local media
-        track.media.getTracks().forEach((t) => {
-          connection.addTrack(t, track.media);
-        });
-
-        /* Only one side of the peer connection should create the
-         * offer, the signaling server picks one to be the offerer.
-         * The other user will get a 'sessionDescription' event and will
-         * create an offer, then send back an answer 'sessionDescription'
-         * to us
-         */
-        if (config.should_create_offer) {
-          if (debug) console.log(`media-agent - Creating RTC offer to ${peer_id}`);
-          connection
-            .createOffer()
-            .then((local_description) => {
-              if (debug) console.log(`media-agent - Local offer description is: `, local_description);
-              return connection.setLocalDescription(local_description).then(() => {
-                sendMessage({
-                  type: "relaySessionDescription",
-                  config: {
-                    peer_id,
-                    session_description: local_description,
-                  },
-                });
-                if (debug) console.log(`media-agent - Offer setLocalDescription succeeded`);
-              });
-            })
-            .catch((error) => {
-              console.error(`media-agent - Offer setLocalDescription failed!`, error);
-            });
-        }
-      };
-
-      const sessionDescription = ({ peer_id, session_description }: SessionDescriptionData) => {
-        const peer = peers[peer_id];
-        if (!peer) {
-          console.error(`media-agent - sessionDescription - No peer for ${peer_id}`);
-          return;
-        }
-        const { connection } = peer;
-        if (!connection) {
-          console.error(`media-agent - sessionDescription - No connection for peer ${peer_id}`);
-          return;
-        }
-        const desc = new RTCSessionDescription(session_description);
-        connection
-          .setRemoteDescription(desc)
-          .then(() => {
-            if (debug) console.log(`media-agent - sessionDescription - setRemoteDescription succeeded`);
-            if (session_description.type === "offer") {
-              if (debug) console.log(`media-agent - sessionDescription - Creating answer`);
-              connection
-                .createAnswer()
-                .then((local_description) => {
-                  if (debug)
-                    console.log(`media-agent - sessionDescription - Answer description is: `, local_description);
-                  connection
-                    .setLocalDescription(local_description)
-                    .then(() => {
-                      sendMessage({
-                        type: "relaySessionDescription",
-                        config: {
-                          peer_id,
-                          session_description: local_description,
-                        },
-                      });
-                      if (debug) console.log(`media-agent - sessionDescription - Answer setLocalDescription succeeded`);
-                    })
-                    .catch(() => {
-                      console.error(`media-agent - sessionDescription - Answer setLocalDescription failed!`);
+      const { connection } = peer;
+      if (!connection) {
+        console.error(`media-agent - sessionDescription - No connection for peer ${peer_id}`);
+        return;
+      }
+      const desc = new RTCSessionDescription(session_description);
+      connection
+        .setRemoteDescription(desc)
+        .then(() => {
+          if (debug) console.log(`media-agent - sessionDescription - setRemoteDescription succeeded`);
+          if (session_description.type === "offer") {
+            if (debug) console.log(`media-agent - sessionDescription - Creating answer`);
+            connection
+              .createAnswer()
+              .then((local_description) => {
+                if (debug) console.log(`media-agent - sessionDescription - Answer description is: `, local_description);
+                connection
+                  .setLocalDescription(local_description)
+                  .then(() => {
+                    sendJsonMessage({
+                      type: "relaySessionDescription",
+                      config: {
+                        peer_id,
+                        session_description: local_description,
+                      },
                     });
-                })
-                .catch((error) => {
-                  console.error(error);
-                });
-            }
-          })
-          .catch((error) => {
-            console.log(`media-agent - sessionDescription - setRemoteDescription error: `, error);
-          });
-      };
-
-      const removePeer = ({ peer_id }: RemovePeerData) => {
-        console.log(`media-agent - removePeer - Signaling server said to ` + `remove peer ${peer_id}`);
-        if (peer_id in peers) {
-          if (peers[peer_id].connection) {
-            peers[peer_id].connection.close();
-            peers[peer_id].connection = undefined;
+                    if (debug) console.log(`media-agent - sessionDescription - Answer setLocalDescription succeeded`);
+                  })
+                  .catch(() => {
+                    console.error(`media-agent - sessionDescription - Answer setLocalDescription failed!`);
+                  });
+              })
+              .catch((error) => {
+                console.error(error);
+              });
           }
-        }
-
-        /* To maintain mute/videoOn states, we don't remove the peer but
-         * instead mark it as dead */
-        peers[peer_id].dead = true;
-        if (debug) console.log(`media-agent - removePeer`, peers);
-        setPeers(Object.assign({}, peers));
-      };
-
-      const iceCandidate = ({ peer_id, candidate }: IceCandidateData) => {
-        /**
-         * The offerer will send a number of ICE Candidate blobs to the
-         * answerer so they can begin trying to find the best path to one
-         * another on the net.
-         */
-        const peer = peers[peer_id];
-        if (!peer) {
-          console.error(`media-agent - iceCandidate - No peer for ${peer_id}`, peers);
-          return;
-        }
-        peer.connection
-          ?.addIceCandidate(new RTCIceCandidate(candidate))
-          .then(() => {
-            if (debug) console.log(`media-agent - iceCandidate - Successfully added Ice Candidate for ${peer_id}`);
-          })
-          .catch((error) => {
-            console.error(error, peer, candidate);
-          });
-      };
-
-      const data = JSON.parse(event.data);
-      if (["addPeer", "removePeer", "iceCandidate", "sessionDescription"].includes(data.type)) {
-        console.log(`media-agent - message - ${data.type}`, peers);
-      }
-      switch (data.type) {
-        case "addPeer":
-          addPeer(data.data);
-          break;
-        case "removePeer":
-          removePeer(data.data);
-          break;
-        case "iceCandidate":
-          iceCandidate(data.data);
-          break;
-        case "sessionDescription":
-          sessionDescription(data.data);
-          break;
-        default:
-          break;
-      }
+        })
+        .catch((error) => {
+          console.log(`media-agent - sessionDescription - setRemoteDescription error: `, error);
+        });
     },
-    [peers, setPeers, track, refOnTrack, sendMessage]
+    [peers, sendJsonMessage]
   );
-  const refWsMessage = useRef(onWsMessage);
 
-  const onWsClose = (_event: CloseEvent) => {
-    console.log(`media-agent - ${name} Disconnected from signaling server`);
-    /* Tear down all of our peer connections and remove all the
-     * media divs when we disconnect */
-    for (let peer_id in peers) {
-      if (peers[peer_id].local) {
-        continue;
+  const removePeer = useCallback(
+    ({ peer_id }: RemovePeerData) => {
+      console.log(`media-agent - removePeer - Signaling server said to remove peer ${peer_id}`);
+      if (peer_id in peers) {
+        if (peers[peer_id].connection) {
+          peers[peer_id].connection.close();
+          peers[peer_id].connection = undefined;
+        }
       }
-      if (peers[peer_id].connection) {
-        peers[peer_id].connection.close();
-        peers[peer_id].connection = undefined;
+
+      /* To maintain mute/videoOn states, we don't remove the peer but
+       * instead mark it as dead */
+      peers[peer_id].dead = true;
+      if (debug) console.log(`media-agent - removePeer`, peers);
+      setPeers(Object.assign({}, peers));
+    },
+    [peers, setPeers]
+  );
+
+  const iceCandidate = useCallback(
+    ({ peer_id, candidate }: IceCandidateData) => {
+      /**
+       * The offerer will send a number of ICE Candidate blobs to the
+       * answerer so they can begin trying to find the best path to one
+       * another on the net.
+       */
+      const peer = peers[peer_id];
+      if (!peer) {
+        console.error(`media-agent - iceCandidate - No peer for ${peer_id}`, peers);
+        return;
       }
-    }
-
-    for (let id in peers) {
-      peers[id].dead = true;
-      peers[id].connection = undefined;
-    }
-
-    if (debug) console.log(`media-agent - close`, peers);
-    setPeers(Object.assign({}, peers));
-  };
-  const refWsClose = useRef(onWsClose);
+      peer.connection
+        ?.addIceCandidate(new RTCIceCandidate(candidate))
+        .then(() => {
+          if (debug) console.log(`media-agent - iceCandidate - Successfully added Ice Candidate for ${peer_id}`);
+        })
+        .catch((error) => {
+          console.error(error, peer, candidate);
+        });
+    },
+    [peers]
+  );
+
+  useEffect(() => {
+    if (!lastJsonMessage) {
+      return;
+    }
+    const data: any = lastJsonMessage;
+    if (!session) {
+      return;
+    }
+    console.log("media-agent - message", data);
+    if (["addPeer", "removePeer", "iceCandidate", "sessionDescription"].includes(data.type)) {
+      console.log(`media-agent - message - ${data.type}`, peers);
+    }
+    switch (data.type) {
+      case "addPeer":
+        addPeer(data.data);
+        break;
+      case "removePeer":
+        removePeer(data.data);
+        break;
+      case "iceCandidate":
+        iceCandidate(data.data);
+        break;
+      case "sessionDescription":
+        sessionDescription(data.data);
+        break;
+      default:
+        break;
+    }
+  }, [lastJsonMessage, addPeer, removePeer, iceCandidate, sessionDescription, peers, session]);
 
   useEffect(() => {
-    refWsMessage.current = onWsMessage;
-    refWsClose.current = onWsClose;
     refOnTrack.current = onTrack;
   });
 
   useEffect(() => {
-    if (!ws) {
-      return;
-    }
-    console.log(`media-control - Binding to WebSocket`);
-    const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
-    ws.addEventListener("message", cbMessage);
-    const cbClose = (e: CloseEvent) => refWsClose.current(e);
-    ws.addEventListener("close", cbClose);
-    return () => {
-      ws.removeEventListener("message", cbMessage);
-      ws.removeEventListener("close", cbClose);
-    };
-  }, [ws, refWsMessage, refWsClose]);
-
-  useEffect(() => {
-    console.log(`media-control - WebSocket or Track changed`);
+    console.log(`media-control - Track changed`, track);
 
     const join = () => {
-      sendMessage({
+      sendJsonMessage({
         type: "join",
         data: {
-          has_audio: track?.audio ?? false,
-          has_aideo: track?.video ?? false,
+          has_audio: track && track.audio ? track.audio : false,
+          has_video: track && track.video ? track.video : false,
         },
       });
     };
 
-    if (ws && track) {
-      console.log(`media-conterol - issuing join request`);
+    if (track !== undefined) {
+      console.log(`media-control - issuing join request: `, track);
       for (let peer in peers) {
         if (peers[peer].local && peers[peer].dead) {
           /* Allocate a new Object so <MediaControl> will trigger */
@@ -442,24 +398,24 @@ const MediaAgent = (props: MediaAgentProps) => {
       }
       join();
     }
-  }, [ws, track, peers, setPeers, sendMessage]);
+  }, [track, peers, setPeers, sendJsonMessage]);
 
   useEffect(() => {
-    if (!sessionId) {
+    if (!session) {
       return;
     }
     let update = false;
     if (track) {
-      if (!(sessionId in peers)) {
+      if (!(session.id in peers)) {
         update = true;
-        peers[sessionId] = {
-          peerName: name || "Unknown",
-          sessionId: sessionId,
+        peers[session.id] = {
+          peerName: session.name || "Unknown",
+          session_id: session.id,
           local: true,
           muted: true,
-          videoOn: false,
-          hasVideo: track.video,
-          hasAudio: track.audio,
+          video_on: false,
+          has_video: track.video,
+          has_audio: track.audio,
           attributes: {
             local: true,
             srcObject: track.media,
@@ -472,7 +428,7 @@ const MediaAgent = (props: MediaAgentProps) => {
     /* Renaming the local connection requires the peer to be deleted
      * and re-established with the signaling server */
     for (let key in peers) {
-      if (peers[key].local && key !== sessionId) {
+      if (peers[key].local && key !== session.id) {
         delete peers[key];
         update = true;
       }
@@ -482,89 +438,147 @@ const MediaAgent = (props: MediaAgentProps) => {
       if (debug) console.log(`media-agent - Setting global peers`, peers);
       setPeers(Object.assign({}, peers));
     }
-  }, [peers, name, setPeers, track]);
+  }, [peers, setPeers, track, session]);
+
+  const setup_local_media = async (): Promise<TrackContext> => {
+    console.log(`media-agent - Requesting access to local audio / video inputs`);
+    const context: TrackContext = { media: null, audio: true, video: true };
+
+    // Try to get user media with fallback logic
+    while (context.audio || context.video) {
+      try {
+        context.media = await navigator.mediaDevices.getUserMedia({
+          audio: context.audio,
+          video: context.video,
+        });
+        break;
+      } catch (error) {
+        console.error(`media-agent - Error accessing local media: `, error);
+        if (context.video) {
+          console.log(`media-agent - Disabling video and trying again`);
+          context.video = false;
+        } else if (context.audio) {
+          console.log(`media-agent - Disabling audio and trying again`);
+          context.audio = false;
+        } else {
+          console.log(`media-agent - No media available`);
+          break;
+        }
+      }
+    }
+
+    // Helper function to create a black video track
+    const createBlackVideoTrack = ({ width = 640, height = 480 } = {}): MediaStreamTrack => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, width, height);
+      }
+
+      const stream = canvas.captureStream(30); // 30 FPS
+      const track = stream.getVideoTracks()[0];
+      track.enabled = true;
+      return track;
+    };
+
+    // Helper function to create a silent audio track
+    const createSilentAudioTrack = (): MediaStreamTrack => {
+      const audioContext = new AudioContext();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      const destination = audioContext.createMediaStreamDestination();
+
+      // Set gain to 0 for silence
+      gainNode.gain.value = 0;
+
+      // Connect: oscillator -> gain -> destination
+      oscillator.connect(gainNode);
+      gainNode.connect(destination);
+
+      oscillator.start();
+
+      const track = destination.stream.getAudioTracks()[0];
+      track.enabled = true;
+      return track;
+    };
+
+    // Process the results and create appropriate media stream
+    const tracks: MediaStreamTrack[] = [];
+    let hasRealAudio = false;
+    let hasRealVideo = false;
+
+    if (context.media) {
+      const audioTracks = context.media.getAudioTracks();
+      const videoTracks = context.media.getVideoTracks();
+
+      if (audioTracks.length > 0) {
+        tracks.push(audioTracks[0]);
+        hasRealAudio = true;
+        console.log("media-agent - Using real audio");
+      }
+
+      if (videoTracks.length > 0) {
+        // Apply video constraints
+        videoTracks[0].applyConstraints({
+          width: { min: 160, max: 320 },
+          height: { min: 120, max: 240 },
+        });
+        tracks.push(videoTracks[0]);
+        hasRealVideo = true;
+        console.log("media-agent - Using real video");
+      }
+    }
+
+    // Add synthetic tracks as needed
+    if (!hasRealAudio) {
+      tracks.push(createSilentAudioTrack());
+      console.log("media-agent - Using synthetic silent audio");
+    }
+
+    if (!hasRealVideo) {
+      tracks.push(createBlackVideoTrack());
+      console.log("media-agent - Using synthetic black video");
+    }
+
+    // Create final media stream
+    context.media = new MediaStream(tracks);
+
+    // Update context flags to reflect what we actually have
+    context.audio = hasRealAudio;
+    context.video = hasRealVideo;
+
+    const mediaType =
+      hasRealAudio && hasRealVideo
+        ? "audio/video"
+        : hasRealAudio
+        ? "audio only"
+        : hasRealVideo
+        ? "video only"
+        : "synthetic audio/video";
+
+    console.log(`media-agent - Final media setup: ${mediaType}`);
+
+    return context;
+  };
 
   useEffect(() => {
-    if (!ws || !name) {
+    if (!session || !session.name) {
       return;
     }
 
-    type setup_local_media_props = {
-      audio?: boolean;
-      video?: boolean;
-    }
-    const setup_local_media = async (
-      props?: setup_local_media_props
-    ): Promise<TrackContext> => {
-      const { audio = true, video = true } = props ?? {};
-      // Ask user for permission to use the computers microphone and/or camera
-      console.log(
-        `media-agent - Requesting access to local audio: ${audio} / video: ${video} inputs`
-      );
-      try {
-        const media = await navigator.mediaDevices.getUserMedia({
-          audio,
-          video,
-        });
-        sendMessage({ type: "media_status", video, audio });
-        // Optionally apply constraints
-        if (video && media.getVideoTracks().length > 0) {
-          console.log(`media-agent - Applying video constraints to ${media.getVideoTracks().length} video tracks`);
-          media.getVideoTracks().forEach((track) => {
-            track.applyConstraints({
-              width: { min: 160, max: 320 },
-              height: { min: 120, max: 240 },
-            });
-          });
-        }
-        return { media, audio, video };
-      } catch (error) {
-        if (video) {
-          console.log(`media-agent - Access to audio and video failed. Trying just audio.`);
-          // Try again with only audio if video failed
-          return setup_local_media({ audio, video: false });
-        } else if (audio) {
-          console.log(`media-agent - Access to audio failed.`);
-          sendMessage({ type: "media_status", video: false, audio: false });
-          // Return a dummy context with no media
-          return { media: new MediaStream(), audio: false, video: false };
-        } else {
-          // No media requested or available
-          sendMessage({ type: "media_status", video: false, audio: false });
-          return { media: new MediaStream(), audio: false, video: false };
-        }
-      }
-    };
-
-    if (!track) {
-      if (debug) console.log(`media-agent - WebSocket open request. ` + `Attempting to create local media.`);
+    if (track === null) {
       setup_local_media()
         .then((context) => {
-          console.log(`media-agent - local media setup complete`, context);
-          /* once the user has given us access to their
-           * microphone/camcorder, join the channel and start peering up */
-          console.log(`media-agent - ignore set to ${ignore.current}`);
-          // if (ignore.current) {
-          //   console.log(`media-agent - aborting setting local media`);
-          // } else {
-            console.log("media-agent - setTrack called with context:", context);
-            setTrack(context);
-          // }
+          sendJsonMessage({ type: "media_status", ...context, media: undefined });
+          setTrack(context);
         })
-        .catch((error) => {
-          /* user denied access to a/v */
-          console.error("media-agent - error in setup_local_media", error);
-          console.log("media-agent - Access denied for audio/video");
-        });
+        .catch(() => setTrack(null));
     }
-
-    return () => {
-      ignore.current = true;
-      if (!track) {
-        console.log(`media-agent - abort media setup!`);
-      }
-    };
-  }, [ws, track, name, sendMessage]);
+  }, [track, session, sendJsonMessage]);
 
   return <></>;
 };
@@ -579,13 +593,14 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
   const [muted, setMuted] = useState<boolean | undefined>(undefined);
   const [videoOn, setVideoOn] = useState<boolean | undefined>(undefined);
   const [target, setTarget] = useState<Element | undefined>();
+  const [isValid, setIsValid] = useState<boolean>(false);
   const [frame, setFrame] = useState<{ translate: [number, number] }>({
     translate: [0, 0],
   });
 
   useEffect(() => {
     if (peer && peer.peerName) {
-      const el = document.querySelector(`.MediaControl[data-peer="${peer.sessionId}"]`);
+      const el = document.querySelector(`.MediaControl[data-peer="${peer.session_id}"]`);
       setTarget(el ?? undefined);
     }
   }, [setTarget, peer]);
@@ -599,12 +614,10 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
       return;
     }
     setMuted(peer.muted);
-    setVideoOn(peer.videoOn);
+    setVideoOn(peer.video_on);
     setMedia(peer);
   }, [peer, setMedia, setMuted, setVideoOn]);
 
-  console.log(`media-control - render`);
-
   const toggleMute = (event: React.MouseEvent | React.TouchEvent) => {
     if (debug) console.log(`media-control - toggleMute - ${peer.peerName}`, !muted);
     if (peer) {
@@ -617,14 +630,14 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
   const toggleVideo = (event: React.MouseEvent | React.TouchEvent) => {
     if (debug) console.log(`media-control - toggleVideo - ${peer.peerName}`, !videoOn);
     if (peer) {
-      peer.videoOn = !videoOn;
-      if (peer.videoOn && media) {
+      peer.video_on = !videoOn;
+      if (peer.video_on && media) {
         const video = document.querySelector(`video[data-id="${media.peerName}"]`) as HTMLVideoElement | null;
         if (video && typeof video.play === "function") {
           video.play();
         }
       }
-      setVideoOn(peer.videoOn);
+      setVideoOn(peer.video_on);
     }
     event.stopPropagation();
   };
@@ -636,7 +649,7 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     if (media.attributes.srcObject) {
       console.log(`media-control - audio enable - ${peer.peerName}:${!muted}`);
       (media.attributes.srcObject.getAudioTracks() as MediaStreamTrack[]).forEach((track: MediaStreamTrack) => {
-        track.enabled = media.hasAudio && !muted;
+        track.enabled = media.has_audio && !muted;
       });
     }
   });
@@ -648,14 +661,22 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
     if (media.attributes.srcObject) {
       console.log(`media-control - video enable - ${peer.peerName}:${videoOn}`);
       (media.attributes.srcObject.getVideoTracks() as MediaStreamTrack[]).forEach((track: MediaStreamTrack) => {
-        track.enabled = Boolean(media.hasVideo) && Boolean(videoOn);
+        track.enabled = Boolean(media.has_video) && Boolean(videoOn);
       });
     }
   });
+  useEffect(() => {
+    if (!media || !peer || media.dead || !media.attributes || !media.attributes.srcObject) {
+      setIsValid(false);
+      console.log(`media-control - no media or peer`);
+      return;
+    }
+    console.log(`media-control - has valid peer`);
+    setIsValid(true);
+  }, [media, peer, setIsValid]);
 
-  const isValid = media && !media.dead,
-    colorAudio = isValid && media.hasAudio ? "primary" : "disabled",
-    colorVideo = isValid && media.hasVideo ? "primary" : "disabled";
+  const colorAudio = isValid && media?.has_audio ? "primary" : "disabled",
+    colorVideo = isValid && media?.has_video ? "primary" : "disabled";
 
   if (!peer) {
     console.log(`media-control - no peer`);
@@ -663,17 +684,24 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
   }
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', border: "3px solid green", minWidth: '200px', minHeight: '100px' }}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        minWidth: "200px",
+        minHeight: "100px",
+      }}
+    >
       <div className={`MediaControlSpacer ${className}`} />
-      <div className={`MediaControl ${className}`} data-peer={peer.sessionId}>
+      <div className={`MediaControl ${className}`} data-peer={peer.session_id}>
         <div className="Controls">
-          {isSelf && (
+          {isSelf ? (
             <div onTouchStart={toggleMute} onClick={toggleMute}>
               {muted && <MicOff color={colorAudio} />}
               {!muted && <Mic color={colorAudio} />}
             </div>
-          )}
-          {!isSelf && (
+          ) : (
             <div onTouchStart={toggleMute} onClick={toggleMute}>
               {muted && <VolumeOff color={colorAudio} />}
               {!muted && <VolumeUp color={colorAudio} />}
@@ -687,6 +715,7 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
         {isValid && (
           <>
             <Moveable
+              sx={{ border: "3px solid blue" }}
               pinchable={true}
               draggable={true}
               // Moveable expects HTMLElement or SVGElement, not just Element
@@ -722,13 +751,15 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
                 e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
               }}
             />
-            <Video
-              className="Video"
-              data-id={media.peerName}
-              autoPlay={true}
-              srcObject={media.attributes.srcObject}
-              {...media.attributes}
-            />
+            {media && (
+              <Video
+                className="Video"
+                data-id={media.peerName}
+                autoPlay={true}
+                srcObject={media.attributes.srcObject}
+                {...media.attributes}
+              />
+            )}
           </>
         )}
         {!isValid && <video className="Video"></video>}
diff --git a/client/src/UserList.css b/client/src/UserList.css
index adee83f..3724680 100644
--- a/client/src/UserList.css
+++ b/client/src/UserList.css
@@ -1,4 +1,4 @@
-.PlayerList {
+.UserList {
   display: flex;
   position: relative;
   padding: 0.5em;
@@ -7,14 +7,14 @@
   margin: 0.25rem 0.25rem 0.25rem 0;
 }
 
-.PlayerList .Name {
+.UserList .Name {
   flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.PlayerList .NoNetwork {
+.UserList .NoNetwork {
   display: flex;
   justify-self: flex-end;
   width: 1em;
@@ -25,29 +25,29 @@
   background-repeat: no-repeat;
 }
 
-.PlayerList .Unselected {
+.UserList .Unselected {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
 }
 
-/* Player name in the Unselected list... */
-.PlayerList .Unselected > div:nth-child(2) > div > div:first-child {
+/* User name in the Unselected list... */
+.UserList .Unselected > div:nth-child(2) > div > div:first-child {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   max-width: 100%;
 }
 
-.PlayerList .Unselected > div:nth-child(2) {
+.UserList .Unselected > div:nth-child(2) {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
 }
 
-.PlayerList .Unselected > div:nth-child(2) > div {
+.UserList .Unselected > div:nth-child(2) > div {
   justify-content: flex-end;
   display: flex;
   flex-direction: column;
@@ -59,36 +59,40 @@
   border-radius: 0.25rem;
 }
 
-.PlayerList .Unselected .Self {
+.UserList .Unselected .Self {
   border: 1px solid black;
 }
 
-.PlayerList .PlayerSelector .PlayerColor {
+.UserList .UserSelector .UserColor {
   width: 1em;
   height: 1em;
 }
 
-.PlayerList .PlayerSelector {
+.UserList .UserSelector {
   display: inline-flex;
   flex-wrap: wrap;
   flex-direction: row;
 }
 
-.PlayerList .PlayerSelector.MuiList-padding {
+.UserList .UserSelector.MuiList-padding {
   padding: 0;
 }
 
-.PlayerList .PlayerSelector .MuiTypography-body1 {
+.UserList .UserSelector .MuiTypography-body1 {
   font-size: 0.8rem;
 /*  white-space: nowrap;*/
 }
 
-.PlayerList .PlayerSelector .MuiTypography-body2 {
+.UserList .UserSelector .MuiTypography-body2 {
   font-size: 0.7rem;
   white-space: nowrap;
 }
 
-.PlayerList .PlayerSelector .PlayerEntry {
+.UserList .UserSelf {
+  border: 2px solid purple !important;
+}
+
+.UserList .UserSelector .UserEntry {
   display: flex;
   flex-direction: column;
   text-overflow: ellipsis;
@@ -103,7 +107,7 @@
   justify-content: flex-end;
 }
 
-.PlayerList .PlayerSelector .PlayerEntry > div:first-child {
+.UserList .UserSelector .UserEntry > div:first-child {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -111,27 +115,27 @@
   margin-bottom: 0.25em;
 }
 
-.PlayerList .PlayerEntry[data-selectable=true]:hover {
+.UserList .UserEntry[data-selectable=true]:hover {
   border-color: rgba(0,0,0,0.5);
   cursor: pointer;
 }
 
-.PlayerList .Players .PlayerToggle {
+.UserList .Users .UserToggle {
   min-width: 5em;
   display: inline-flex;
   align-items: flex-end;
   flex-direction: column;
 }
 
-.PlayerList .PlayerName {
+.UserList .UserName {
   padding: 0.5em;
 }
 
-.PlayerList .Players > * {
+.UserList .Users > * {
   width: 100%;
 }
 
-.PlayerList .Players .nameInput {
+.UserList .Users .nameInput {
   flex-grow: 1;
 }
 
diff --git a/client/src/UserList.tsx b/client/src/UserList.tsx
index 59d1226..d86e6fe 100644
--- a/client/src/UserList.tsx
+++ b/client/src/UserList.tsx
@@ -1,122 +1,121 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
-import Paper from '@mui/material/Paper';
-import List from '@mui/material/List';
+import React, { useState, useEffect, useCallback } from "react";
+import Paper from "@mui/material/Paper";
+import List from "@mui/material/List";
 import "./UserList.css";
-import { GlobalContext } from "./GlobalContext";
-import { MediaControl, MediaAgent } from "./MediaControl";
+import { MediaControl, MediaAgent, Peer } from "./MediaControl";
 import Box from "@mui/material/Box";
+import { Session } from "./GlobalContext";
+import useWebSocket from "react-use-websocket";
 
 type User = {
   name: string;
-  sessionId: string;
+  session_id: string;
   live: boolean;
+  is_self: boolean /* Client side variable */;
 };
 
-const UserList: React.FC = () => {
-  const { ws, name, sessionId } = useContext(GlobalContext);
-  const [users, setUsers] = useState<Record<string, User>>({});
-  const [peers, setPeers] = useState<Record<string, any>>({});
+type UserListProps = {
+  socketUrl: string;
+  session: Session;
+};
+
+const UserList: React.FC<UserListProps> = (props: UserListProps) => {
+  const { socketUrl, session } = props;
+  const [users, setUsers] = useState<User[] | null>(null);
+  const [peers, setPeers] = useState<Record<string, Peer>>({});
+  const [videoClass, setVideoClass] = useState<string>("Large");
+
+  const sortUsers = useCallback(
+    (A: any, B: any) => {
+      if (!session) {
+        return 0;
+      }
+      /* active user first */
+      if (A.name === session.name) {
+        return -1;
+      }
+      if (B.name === session.name) {
+        return +1;
+      }
+      /* Sort active users first */
+      if (A.name && !B.name) {
+        return -1;
+      }
+      if (B.name && !A.name) {
+        return +1;
+      }
+      /* Otherwise, sort by color */
+      if (A.color && B.color) {
+        return A.color.localeCompare(B.color);
+      }
+      return 0;
+    },
+    [session]
+  );
+
+  // Use the WebSocket hook for lobby events (rely on ws from context, but can use hook for message handling)
+  const { sendJsonMessage } = useWebSocket(socketUrl, {
+    share: true,
+    onMessage: (event) => {
+      if (!session) {
+        return;
+      }
+      const data = JSON.parse(event.data);
+      switch (data.type) {
+        case "users":
+          console.log(`users - lobby update`, data.users);
+          const u: User[] = data.users;
+          u.forEach((user) => {
+            user.is_self = user.session_id === session.id;
+          });
+          u.sort(sortUsers);
+          setVideoClass(u.length <= 2 ? "Medium" : "Small");
+          setUsers(u);
+          break;
+        default:
+          break;
+      }
+    },
+  });
 
   useEffect(() => {
-    console.log("Peers: ", peers);
-  }, [peers]);
-  
-  const onWsMessage = (event: MessageEvent) => {
-    const data = JSON.parse(event.data);
-    switch (data.type) {
-    case 'users':
-      console.log(`users - lobby update`, data.users);     
-      setUsers(data.users);
-      break;
-    default:
-      break;
-    }
-  };
-  const refWsMessage = useRef(onWsMessage);
-
-  useEffect(() => { refWsMessage.current = onWsMessage; });
-
-  useEffect(() => {
-    if (!ws) {
+    if (users !== null) {
       return;
     }
-    const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
-    ws.addEventListener('message', cbMessage);
-    return () => {
-      ws.removeEventListener('message', cbMessage);
-    };
-  }, [ws, refWsMessage]);
-
-  useEffect(() => {
-    if (!ws) {
-      return;
-    }
-    ws.send(JSON.stringify({ 
-      type: 'list_users', 
-    }));
-  }, [ws]);
+    sendJsonMessage({
+      type: "list_users",
+    });
+  }, [users, sendJsonMessage]);
 
   const userElements: JSX.Element[] = [];
 
-  const sortedUsers: any[] = [];
-
-  for (let key in users) {
-    if (users[key]) {
-      sortedUsers.push(users[key]);
-    }
-  }
-
-  const sortUsers = (A: any, B: any) => {
-    /* active user first */
-    if (A.name === name) {
-      return -1;
-    }
-    if (B.name === name) {
-      return +1;
-    }
-    /* Sort active users first */
-    if (A.name && !B.name) {
-      return -1;
-    }
-    if (B.name && !A.name) {
-      return +1;
-    }
-    /* Otherwise, sort by color */
-    if (A.color && B.color) {
-      return A.color.localeCompare(B.color);
-    }
-    return 0;
-  };
-
-  sortedUsers.sort(sortUsers);
-
-  const videoClass = sortedUsers.length <= 2 ? 'Medium' : 'Small';
-  
-  sortedUsers.forEach((user : User) => {
-    const userName = user.name;
-    const isSelf = user.sessionId === sessionId;
-    console.log(`User: ${userName}, Is Self: ${isSelf}, hasPeer: ${peers[user.sessionId] ? 'Yes' : 'No'}`);
+  users?.forEach((user: User) => {
+    console.log(`User: ${user.name}, Is Self: ${user.is_self}, hasPeer: ${peers[user.session_id] ? "Yes" : "No"}`);
     userElements.push(
-      <Box key={userName} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', border: "3px solid magenta" }}
-        className="UserEntry"
-        >
+      <Box
+        key={user.name}
+        sx={{ display: "flex", flexDirection: "column", alignItems: "center", border: "3px solid magenta" }}
+        className={`UserEntry ${user.is_self ? "UserSelf" : ""}`}
+      >
         <div>
-          <div className="Name">{userName ? userName : 'Available' }</div>
-          { userName && !user.live && <div className="NoNetwork"></div> }
+          <div className="Name">{user.name ? user.name : user.session_id}</div>
+          {user.name && !user.live && <div className="NoNetwork"></div>}
         </div>
-        { userName && user.live && peers[user.sessionId] && <MediaControl className={videoClass} peer={peers[user.sessionId]} isSelf={isSelf}/> }
+        {user.name && user.live && peers[user.session_id] ? (
+          <MediaControl className={videoClass} peer={peers[user.session_id]} isSelf={user.is_self} />
+        ) : (
+          <video className="Video"></video>
+        )}
       </Box>
     );
   });
 
   return (
     <Paper className={`UserList ${videoClass}`}>
-      <MediaAgent setPeers={setPeers}/>
-      <List className="UserSelector">
-        { userElements }
-      </List>
+      <MediaAgent {...{ session, socketUrl, peers, setPeers }} />
+      <List className="UserSelector">{userElements}</List>
     </Paper>
   );
-}
+};
 
-export { UserList };
\ No newline at end of file
+export { UserList };
diff --git a/server/main.py b/server/main.py
index 087da52..de23c9f 100644
--- a/server/main.py
+++ b/server/main.py
@@ -34,19 +34,19 @@ class Session:
         self.has_video = False
 
 
-def getName(session: Session | None) -> str:
-    if not session:
-        return "Admin"
-    if session.name:
+def getName(session: Session | None) -> str | None:
+    if session and session.name:
         return session.name
-    return session.id
+    return None
 
 
 class Lobby:
-    def __init__(self, id):
-        self.id = id
-        self.short = id[:8]
-        self.sessions: dict[str, Session] = {}
+    def __init__(self, name: str):
+        self.id = secrets.token_hex(16)
+        self.short = self.id[:8]
+        self.name = name
+        self.sessions: dict[str, Session] = {}  # All lobby members
+        self.peers: dict[str, Session] = {}  # RTC joined peers only
 
     def addSession(self, session: Session):
         if session.id not in self.sessions:
@@ -72,6 +72,13 @@ def getLobby(lobby_id) -> Lobby | None:
     return lobbies.get(lobby_id, None)
 
 
+def getLobbyByName(lobby_name) -> Lobby | None:
+    for lobby in lobbies.values():
+        if lobby.name == lobby_name:
+            return lobby
+    return None
+
+
 # API endpoints
 @app.get(f"{public_url}api/health")
 def health():
@@ -83,31 +90,74 @@ def health():
 # A user can be in multiple lobbies, but a session is unique to a single user.
 # A user can change their name, but the session ID remains the same and the name
 # updates for all lobbies.
-@app.get(f"{public_url}api/lobby")
-async def lobby(
+@app.get(f"{public_url}api/session")
+async def session(
     request: Request, response: Response, session_id: str = Cookie(default=None)
 ):
     if session_id is None:
         session_id = secrets.token_hex(16)
         response.set_cookie(key="session_id", value=session_id)
+    # Validate that session_id is a hex string of length 32
+    elif (
+        not isinstance(session_id, str)
+        or len(session_id) != 32
+        or not all(c in "0123456789abcdef" for c in session_id)
+    ):
+        return {"error": "Invalid session_id"}
 
     print(f"[{session_id[:8]}]: Browser hand-shake achieved.")
 
-    if session_id not in sessions:
-        sessions[session_id] = Session(session_id)
-        logger.info(f"{session_id[:8]}: New session created.")
+    session = getSession(session_id)
+    if not session:
+        session = Session(session_id)
+        sessions[session_id] = session
+        logger.info(f"{getSessionName(session)}: New session created.")
     else:
-        name = sessions[session_id].name if sessions[session_id].name else "UNSET"
-        logger.info(f"{session_id[:8]}: Existing session resumed for {name}.")
+        logger.info(f"{getSessionName(session)}: Existing session resumed.")
 
-    return {"session": session_id}
+    return {
+        "id": session_id,
+        "name": session.name if session.name else None,
+        "lobbies": [lobby.name for lobby in sessions[session_id].lobbies.values()],
+    }
 
 
-all = "[   all  ]"
-info = "[  info  ]"
-todo = "[  todo  ]"
+@app.get(public_url + "api/lobby/{lobby_name}/{session_id}")
+async def lobby(
+    request: Request,
+    response: Response,
+    lobby_name: str | None = Path(...),
+    session_id: str | None = Path(...),
+):
+    if lobby_name is None:
+        return {"error": "Missing lobby_name"}
+    if session_id is None:
+        return {"error": "Missing session_id"}
+    session = getSession(session_id)
+    if not session:
+        return {"error": f"Session not found ({session_id})"}
+
+    lobby = getLobbyByName(lobby_name)
+    if not lobby:
+        lobby = Lobby(lobby_name)
+        lobbies[lobby.id] = lobby
+        logger.info(
+            f"{getSessionName(session)} <- lobby_create({lobby.short}:{lobby.name})"
+        )
+
+    lobby.addSession(sessions[session_id])
+    sessions[session_id].lobbies[lobby.id] = lobby
+
+    return {"lobby": lobby.id}
 
 
+all_label = "[   all  ]"
+info_label = "[  info  ]"
+todo_label = "[  todo  ]"
+unset_label = "[  ----  ]"
+
+
+# Join the media session in a lobby
 async def join(
     lobby: Lobby,
     session: Session,
@@ -116,33 +166,34 @@ async def join(
 ):
     if not session.name:
         logger.error(
-            f"{session.short}:[UNSET] <- join - No name set yet. Audio not available."
+            f"{session.short}:[UNSET] <- join - No name set yet. Media not available."
         )
         return
 
     if not session.ws:
         logger.error(
-            f"{session.short}:{session.name} - No WebSocket connection. Audio not available."
+            f"{session.short}:{session.name} - No WebSocket connection. Media not available."
         )
         return
 
-    logger.info(f"{lobby.short}: <- join - {session.short}:{session.name}")
+    logger.info(f"{getSessionName(session)} <- join({getLobbyName(lobby)})")
 
-    if session.id in lobby.sessions:
-        logger.info(f"{session.short}:{session.name} - Already joined to Audio.")
+    if session.id in lobby.peers:
+        logger.info(f"{getSessionName(session)} - Already joined to Media.")
         return
 
-    for peer in lobby.sessions.values():
-        if not peer.ws:
+    # Notify all existing RTC peers
+    for peer_session in lobby.peers.values():
+        if not peer_session.ws:
             logger.warning(
-                f"{peer.short}:{peer.name} - No WebSocket connection. Skipping."
+                f"{getSessionName(peer_session)} - No WebSocket connection. Skipping."
             )
             continue
+
         logger.info(
-            f"{lobby.short}:{peer.name} -> addPeer - {session.short}:{session.name}"
+            f"{getSessionName(peer_session)} -> addPeer({getSessionName(session), getLobbyName(lobby)})"
         )
-        # Add this caller to all peers
-        await peer.ws.send_json(
+        await peer_session.ws.send_json(
             {
                 "type": "addPeer",
                 "data": {
@@ -156,100 +207,154 @@ async def join(
         )
 
         # Add each other peer to the caller
-        await session.ws.send_json(
-            {
-                "type": "addPeer",
-                "data": {
-                    "peer_id": peer.id,
-                    "peer_name": peer.name,
-                    "should_create_offer": True,
-                    "has_audio": peer.has_audio,
-                    "has_video": peer.has_video,
-                },
-            }
-        )
+        if session.ws:
+            logger.info(
+                f"{getSessionName(session)} -> addPeer({getSessionName(peer_session), getLobbyName(lobby)})"
+            )
+            await session.ws.send_json(
+                {
+                    "type": "addPeer",
+                    "data": {
+                        "peer_id": peer_session.id,
+                        "peer_name": peer_session.name,
+                        "should_create_offer": True,
+                        "has_audio": peer_session.has_audio,
+                        "has_video": peer_session.has_video,
+                    },
+                }
+            )
 
-    # Add this user as a peer connected to this WebSocket
-    lobby.sessions[session.id] = session
+    # Add this user as an RTC peer
+    lobby.peers[session.id] = session
+    await update_users(lobby)
 
 
 async def part(
     lobby: Lobby,
     session: Session,
 ):
-    if not session.ws:
-        logger.error(
-            f"{session.id}:{session.name} - No WebSocket connection. Audio not available."
+    if session.id not in lobby.peers:
+        logger.info(
+            f"{getSessionName(session)}: <- part({getLobbyName(lobby)}) - Does not exist in RTC peers."
         )
         return
 
-    if session.id not in lobby.sessions:
-        logger.info(f"{session.id}: <- {session.name} - Does not exist in lobby audio.")
-        return
+    logger.info(
+        f"{getSessionName(session)}: <- part({getLobbyName(lobby)}) - Media part."
+    )
 
-    logger.info(f"{session.id}: <- {session.name} - Audio part.")
-    logger.info(f"{lobby.short}: -> remove_peer - {session.short}:{session.name}")
+    del lobby.peers[session.id]
 
-    del lobby.sessions[session.id]
-
-    # Remove this peer from all other peers, and remove each peer from this peer
-    for peer in lobby.sessions.values():
-        if not peer.ws:
+    # Remove this peer from all other RTC peers, and remove each peer from this peer
+    for peer_session in lobby.peers.values():
+        if not peer_session.ws:
             logger.warning(
-                f"{peer.short}:{peer.name} - No WebSocket connection. Skipping."
+                f"{getSessionName(peer_session)} <- part({getLobbyName(lobby)}) - No WebSocket connection. Skipping."
             )
             continue
-        await peer.ws.send_json(
+        logger.info(
+            f"{getSessionName(peer_session)} <- remove_peer({getSessionName(session)})"
+        )
+        await peer_session.ws.send_json(
             {"type": "remove_peer", "data": {"peer_id": session.id}}
         )
 
         if session.ws:
+            logger.info(
+                f"{getSessionName(session)} <- remove_peer({getSessionName(peer_session)})"
+            )
             await session.ws.send_json(
-                {"type": "remove_peer", "data": {"peer_id": peer.id}}
+                {"type": "remove_peer", "data": {"peer_id": peer_session.id}}
             )
         else:
-            logger.warning(f"{session.short}:{session.name} - No WebSocket connection.")
+            logger.error(
+                f"{getSessionName(session)} <- part({getLobbyName(lobby)}) - No WebSocket connection."
+            )
+
+
+async def update_users(lobby: Lobby, requesting_session: Session | None = None):
+    users = [
+        {"name": s.name, "live": True if s.ws else False, "session_id": s.id}
+        for s in lobby.sessions.values()
+        if s.name
+    ]
+    if requesting_session:
+        logger.info(
+            f"{requesting_session.short}:{requesting_session.name} -> list_users({lobby.name})"
+        )
+        if requesting_session.ws:
+            await requesting_session.ws.send_json({"type": "users", "users": users})
+        else:
+            logger.warning(
+                f"{requesting_session.short}:{requesting_session.name} - No WebSocket connection."
+            )
+    else:
+        for s in lobby.sessions.values():
+            logger.info(
+                f"{s.short}:{s.name if s.name else unset_label} -> list_users({lobby.name})"
+            )
+            if s.ws:
+                await s.ws.send_json({"type": "users", "users": users})
+
+
+def getSessionName(session: Session) -> str:
+    return f"{session.short}:{session.name if session.name else unset_label}"
+
+
+def getLobbyName(lobby: Lobby) -> str:
+    return f"{lobby.short}:{lobby.name}"
 
 
 # Register websocket endpoint directly on app with full public_url path
-@app.websocket(f"{public_url}" + "ws/lobby/{lobby_id}")
+@app.websocket(f"{public_url}" + "ws/lobby/{lobby_id}/{session_id}")
 async def websocket_lobby(
     websocket: WebSocket,
     lobby_id: str | None = Path(...),
-    session_id: str = Cookie(default=None),
+    session_id: str | None = Path(...),
 ):
     await websocket.accept()
-    if session_id is None:
+    if lobby_id is None:
         await websocket.send_json(
-            {"type": "error", "error": "Invalid or missing user session"}
+            {"type": "error", "error": "Invalid or missing lobby"}
+        )
+        await websocket.close()
+        return
+    if session_id is None:
+        await websocket.send_json(
+            {"type": "error", "error": "Invalid or missing session"}
         )
         await websocket.close()
         return
-    short = session_id[:8]
-    logger.info(f"Session ID from cookie: {session_id}")
-
     session = getSession(session_id)
     if not session:
-        logger.error(f"{short}: Invalid session ID {session_id}")
+        logger.error(f"Invalid session ID {session_id}")
         await websocket.send_json(
             {"type": "error", "error": f"Invalid session ID {session_id}"}
         )
         await websocket.close()
         return
-    session.ws = websocket
-
-    if lobby_id is None:
-        lobby_id = "default"
-
     lobby = getLobby(lobby_id)
     if not lobby:
-        lobby = Lobby(lobby_id)
-        lobbies[lobby_id] = lobby
-        logger.info(f"{short}: Lobby {lobby_id} - New Lobby")
+        logger.error(f"Invalid lobby ID {lobby_id}")
+        await websocket.send_json(
+            {"type": "error", "error": f"Invalid lobby ID {lobby_id}"}
+        )
+        await websocket.close()
+        return
+
+    logger.info(
+        f"{getSessionName(session)} <- lobby_connect({lobby.short}:{lobby.name})"
+    )
+
+    session.ws = websocket
+
+    # This user session just went from Dead to Live, so update everyone's user list
+    await update_users(lobby)
 
     try:
         while True:
             data = await websocket.receive_json()
+            # logger.info(f"{getSessionName(session)} <- RAW Rx: {data}")
             match data.get("type"):
                 case "set_name":
                     name = data.get("name")
@@ -266,20 +371,20 @@ async def websocket_lobby(
                         continue
 
                     session.name = name
-                    logger.info(f"{session.short}: Name set to {session.name}")
+                    logger.info(
+                        f"{getSessionName(session)} <- set_name({session.name})"
+                    )
                     await websocket.send_json({"type": "update", "name": name})
+                    await update_users(lobby)
+
                 case "list_users":
-                    users = [
-                        {"name": s.name, "live": True, "sessionId": s.id}
-                        for s in sessions.values()
-                    ]
-                    await websocket.send_json({"type": "users", "users": users})
+                    await update_users(lobby, session)
 
                 case "media_status":
                     has_audio = data.get("audio", False)
                     has_video = data.get("video", False)
                     logger.info(
-                        f"{session.short}: <- media-status - audio: {has_audio}, video: {has_video}"
+                        f"{getSessionName(session)}: <- media-status(audio: {has_audio}, video: {has_video})"
                     )
                     session.has_audio = has_audio
                     session.has_video = has_video
@@ -293,10 +398,10 @@ async def websocket_lobby(
                     await part(lobby, session)
 
                 case "relayICECandidate":
-                    logger.info(data)
-                    if session.id not in lobby.sessions:
+                    logger.info(f"{getSessionName(session)} <- relayICECandidate")
+                    if session.id not in lobby.peers:
                         logger.error(
-                            f"{session.short}:{session.name} <- relayICECandidate - Does not have Audio"
+                            f"{session.short}:{session.name} <- relayICECandidate - Not an RTC peer"
                         )
                         return
 
@@ -308,21 +413,22 @@ async def websocket_lobby(
                         "data": {"peer_id": session.id, "candidate": candidate},
                     }
 
-                    if peer_id in lobby.sessions:
-                        ws = lobby.sessions[peer_id].ws
+                    if peer_id in lobby.peers:
+                        ws = lobby.peers[peer_id].ws
                         if not ws:
                             logger.warning(
-                                f"{lobby.sessions[peer_id].short}:{lobby.sessions[peer_id].name} - No WebSocket connection. Skipping."
+                                f"{lobby.peers[peer_id].short}:{lobby.peers[peer_id].name} - No WebSocket connection. Skipping."
                             )
-                            continue
+                            return
                         await ws.send_json(message)
 
                 case "relaySessionDescription":
-                    # todo: if audio doesn't work, figure out if its because of peer_id/session_description missing
-                    if session.id not in lobby.sessions:
+                    logger.info(f"{getSessionName(session)} <- relaySessionDescription")
+                    if session.id not in lobby.peers:
                         logger.error(
-                            f"{session.short}:{session.name} - relaySessionDescription - Does not have Audio"
+                            f"{session.short}:{session.name} - relaySessionDescription - Not an RTC peer"
                         )
+                        return
                     peer_id = data.get("config", {}).get("peer_id")
                     session_description = data.get("config", {}).get(
                         "session_description"
@@ -334,13 +440,13 @@ async def websocket_lobby(
                             "session_description": session_description,
                         },
                     }
-                    if peer_id in lobby.sessions:
-                        ws = lobby.sessions[peer_id].ws
+                    if peer_id in lobby.peers:
+                        ws = lobby.peers[peer_id].ws
                         if not ws:
                             logger.warning(
-                                f"{lobby.sessions[peer_id].short}:{lobby.sessions[peer_id].name} - No WebSocket connection. Skipping."
+                                f"{lobby.peers[peer_id].short}:{lobby.peers[peer_id].name} - No WebSocket connection. Skipping."
                             )
-                            continue
+                            return
                         await ws.send_json(message)
 
                 case _:
@@ -352,11 +458,12 @@ async def websocket_lobby(
                     )
 
     except WebSocketDisconnect:
-        logger.info(f"WebSocket disconnected for user {session_id}")
+        logger.info(f"{getSessionName(session)} <- WebSocket disconnected for user.")
         # Cleanup: remove session from lobby and sessions dict
         session.ws = None
         if lobby and session:
             await part(lobby, session)
+        await update_users(lobby)
         # if session_id in sessions:
         #     del sessions[session_id]
 
@@ -421,7 +528,7 @@ else:
 
     @app.websocket("/ws")
     async def websocket_proxy(websocket: StarletteWebSocket):
-        logger.info("WebSocket proxy connection established.")
+        logger.info("REACT: WebSocket proxy connection established.")
         # Get scheme from websocket.url (should be 'ws' or 'wss')
         scheme = websocket.url.scheme if hasattr(websocket, "url") else "ws"
         target_url = f"{scheme}://static-frontend:3000/ws"
@@ -449,7 +556,7 @@ else:
                 try:
                     await asyncio.gather(client_to_server(), server_to_client())
                 except (WebSocketDisconnect, websockets.ConnectionClosed):
-                    logger.info("WebSocket proxy connection closed.")
+                    logger.info("REACT: WebSocket proxy connection closed.")
         except Exception as e:
-            logger.error(f"WebSocket proxy error: {e}")
+            logger.error(f"REACT: WebSocket proxy error: {e}")
             await websocket.close()