fix: handle agent-initiated disconnect and guard handleEndCall (#25)

* diag: instrument ElevenLabs callbacks to capture disconnect reason

Add diagnostic logging to understand why the WebSocket closes
immediately after the agent starts speaking:

- onDisconnect now logs reason ("error"|"agent"|"user"), closeCode,
  closeReason, and uptime-since-connect so we can see the root cause
- onError now logs the full message + context object (not just a
  string cast) — the context carries the raw Event/closeCode
- onModeChange logs a timestamp so we can measure the speaking→dead
  delta precisely
- connectTimeRef tracks the connect timestamp for uptime calculation

No behaviour changes — diagnostics only. The actual fix will follow
once we have real disconnect-reason data from a reproduction.

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

* fix: prevent double endSession causing WebSocket already-closing error

When the user clicks End Call / Back:
1. handleEndCall calls conversation.endSession() — socket enters CLOSING state
2. onBack() triggers setMode('select') — UserPhoneInterface unmounts
3. The unmount cleanup fired endSession() again on the already-closed socket
   → "WebSocket is already in CLOSING or CLOSED state"

Guard the cleanup to only call endSession when status !== 'disconnected'.

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

* fix: handle agent-initiated disconnect and guard handleEndCall

Two related issues:

1. When the ElevenLabs agent closes the call (reason: "agent", e.g. says
   "thank you for calling" then hangs up), the WebSocket is already CLOSED.
   If the user then clicks End Call, conversation.endSession() threw
   "WebSocket is already in CLOSING or CLOSED state".
   Fix: guard handleEndCall to skip endSession() if status === 'disconnected'.

2. When the agent closes the call, onDisconnect fired but the call session
   was never cleaned up — the UI stayed in the "active call" state with no
   way to restart. Fix: call endCall() in onDisconnect for reason !== 'user'.

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: amethystani

src/components/DemoCall/UserPhoneInterface.tsx

@@ -76,7 +76,13 @@ export default function UserPhoneInterface({
         });
 
         setAgentStatus('idle');
-    }, []);
+
+        // If the agent or an error closed the socket (not the user pressing End Call),
+        // clean up the call session so the UI returns to the idle/start state.
+        if (details?.reason !== 'user') {
+            endCall();
+        }
+    }, [endCall]);
 
     const onMessage = useCallback((message: { source: string; message: string }) => {
         console.log(`📞 [${message.source}]: ${message.message}`);
@@ -198,8 +204,13 @@ export default function UserPhoneInterface({
         console.log('🔴 End call button pressed');
         setIsEnding(true);
 
-        // End ElevenLabs session
-        await conversation.endSession();
+        // Only close the socket if it's still open — the agent may have already
+        // closed it (e.g. it said "thank you for calling" and hung up), in which
+        // case calling endSession() again throws "WebSocket is already in CLOSING
+        // or CLOSED state".
+        if (conversation.status !== 'disconnected') {
+            await conversation.endSession();
+        }
 
         setAgentStatus('idle');
         await endCall();