adding debugs

src/components/control-tray/ControlTray.tsx

@@ -230,24 +230,22 @@ function ControlTray({
             ref={connectButtonRef}
             className={cn("action-button connect-toggle", { connected })}
             onClick={async () => {
-              console.log('🔄 Connection button clicked');
+              console.log('🎮 ControlTray: Connection button clicked');
               try {
                 if (connected) {
-                  console.log('📴 Disconnecting...');
+                  console.log('📴 ControlTray: Initiating disconnect...');
                   await disconnect();
-                  console.log('✅ Disconnected successfully');
+                  console.log('✅ ControlTray: Disconnected successfully');
                 } else {
-                  console.log('🔌 Starting connection...');
-                  console.log('📱 Device info:', { isIOSDevice, isSafari });
+                  console.log('🔌 ControlTray: Starting connection process...');
+                  console.log('📱 ControlTray: Device info:', { isIOSDevice, isSafari });
                   
-                  // We already have mic permissions from the modal, just connect
-                  console.log('📞 Calling connect()...');
+                  console.log('📞 ControlTray: Calling LiveAPIContext.connect()...');
                   await connect();
-                  console.log('✅ Connected successfully');
+                  console.log('✅ ControlTray: Connected successfully via LiveAPIContext');
                 }
               } catch (err) {
-                console.error('❌ Failed to toggle connection:', err);
-                // Here you could add UI feedback about the error
+                console.error('❌ ControlTray: Connection error:', err);
               }
             }}
           >

src/contexts/LiveAPIContext.tsx

@@ -28,6 +28,7 @@ export const LiveAPIProvider: FC<LiveAPIProviderProps> = ({
   url = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws`,
   children,
 }) => {
+  console.log('🌟 LiveAPIContext: Initializing provider with URL:', url);
   const liveAPI = useLiveAPI({ url });
 
   return (
@@ -38,8 +39,10 @@ export const LiveAPIProvider: FC<LiveAPIProviderProps> = ({
 };
 
 export const useLiveAPIContext = () => {
+  console.log('🎯 LiveAPIContext: Hook being accessed');
   const context = useContext(LiveAPIContext);
   if (!context) {
+    console.error('❌ LiveAPIContext: Hook used outside of provider!');
     throw new Error("useLiveAPIContext must be used within a LiveAPIProvider");
   }
   return context;

src/lib/multimodal-live-client.ts

@@ -87,18 +87,21 @@ export class MultimodalLiveClient extends EventEmitter<MultimodalLiveClientEvent
 
   connect(config: LiveConfig): Promise<boolean> {
     this.config = config;
+    console.log('🔗 MultimodalLiveClient: Starting WebSocket connection to:', this.url);
 
     const ws = new WebSocket(this.url);
 
     ws.addEventListener("message", async (evt: MessageEvent) => {
       if (evt.data instanceof Blob) {
+        console.log('📩 MultimodalLiveClient: Received blob message');
         this.receive(evt.data);
       } else {
-        console.log("non blob message", evt);
+        console.log("📩 MultimodalLiveClient: Received non-blob message", evt);
       }
     });
     return new Promise((resolve, reject) => {
       const onError = (ev: Event) => {
+        console.error('❌ MultimodalLiveClient: WebSocket connection error:', ev);
         this.disconnect(ws);
         const message = `Could not connect to "${this.url}"`;
         this.log(`server.${ev.type}`, message);
@@ -107,9 +110,11 @@ export class MultimodalLiveClient extends EventEmitter<MultimodalLiveClientEvent
       ws.addEventListener("error", onError);
       ws.addEventListener("open", (ev: Event) => {
         if (!this.config) {
+          console.error('❌ MultimodalLiveClient: Invalid config provided');
           reject("Invalid config sent to `connect(config)`");
           return;
         }
+        console.log('✨ MultimodalLiveClient: WebSocket connection established');
         this.log(`client.${ev.type}`, `connected to socket`);
         this.emit("open");
 
@@ -118,12 +123,13 @@ export class MultimodalLiveClient extends EventEmitter<MultimodalLiveClientEvent
         const setupMessage: SetupMessage = {
           setup: this.config,
         };
+        console.log('📤 MultimodalLiveClient: Sending setup message');
         this._sendDirect(setupMessage);
         this.log("client.send", "setup");
 
         ws.removeEventListener("error", onError);
         ws.addEventListener("close", (ev: CloseEvent) => {
-          console.log(ev);
+          console.log('🔒 MultimodalLiveClient: WebSocket closed:', ev);
           this.disconnect(ws);
           let reason = ev.reason || "";
           if (reason.toLowerCase().includes("error")) {
@@ -164,17 +170,20 @@ export class MultimodalLiveClient extends EventEmitter<MultimodalLiveClientEvent
       blob,
     )) as LiveIncomingMessage;
     if (isToolCallMessage(response)) {
+      console.log('🛠️ MultimodalLiveClient: Received tool call');
       this.log("server.toolCall", response);
       this.emit("toolcall", response.toolCall);
       return;
     }
     if (isToolCallCancellationMessage(response)) {
+      console.log('🚫 MultimodalLiveClient: Received tool call cancellation');
       this.log("receive.toolCallCancellation", response);
       this.emit("toolcallcancellation", response.toolCallCancellation);
       return;
     }
 
     if (isSetupCompleteMessage(response)) {
+      console.log('🎉 MultimodalLiveClient: Setup complete received');
       this.log("server.send", "setupComplete");
       this.emit("setupcomplete");
       return;