cleanup: remove debug log panel (#27)

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

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

Author: amethystani

src/components/DemoCall/UserPhoneInterface.tsx

@@ -38,24 +38,9 @@ export default function UserPhoneInterface({
     const [isEnding, setIsEnding] = useState(false);
     const [connectionError, setConnectionError] = useState<string | null>(null);
 
-    // ─── ON-SCREEN DEBUG LOG ───────────────────────────────────────────────────
-    const [debugLogs, setDebugLogs] = useState<string[]>([]);
-    const [showDebug, setShowDebug] = useState(false);
-    const addLog = useCallback((msg: string) => {
-        const ts = new Date().toTimeString().slice(0, 8);
-        const line = `[${ts}] ${msg}`;
-        console.log('📞 [DIAG]', line);
-        setDebugLogs(prev => [...prev.slice(-49), line]); // keep last 50
-    }, []);
-    // ──────────────────────────────────────────────────────────────────────────
-
     const timerRef = useRef<NodeJS.Timeout | null>(null);
 
-    // Tracks when the WebSocket connected so we can log the live-to-dead delta.
-    const connectTimeRef = useRef<number | null>(null);
-
     // Inline type that matches @elevenlabs/types DisconnectionDetails union.
-    // Defined here so diagnostics compile even before node_modules is installed.
     type DisconnectionDetails =
         | { reason: 'error'; message: string; context?: Event; closeCode?: number; closeReason?: string }
         | { reason: 'agent'; context?: CloseEvent; closeCode?: number; closeReason?: string }
@@ -64,36 +49,18 @@ export default function UserPhoneInterface({
     // Memoized callbacks — stable references prevent useConversation from
     // re-initialising on every render, which can reset the active WebSocket.
     const onConnect = useCallback(() => {
-        connectTimeRef.current = Date.now();
-        addLog('✅ CONNECTED');
         setConnectionError(null);
         setAgentStatus('listening');
-    }, [addLog]);
+    }, []);
 
     const onDisconnect = useCallback((details?: DisconnectionDetails) => {
-        const uptime = connectTimeRef.current !== null
-            ? Date.now() - connectTimeRef.current
-            : null;
-        connectTimeRef.current = null;
-
-        const reason      = details?.reason ?? '(none)';
-        const closeCode   = (details as { closeCode?: number })?.closeCode ?? '';
-        const closeReason = (details as { closeReason?: string })?.closeReason ?? '';
-        const errMsg      = (details as { message?: string })?.message ?? '';
-
-        addLog(`❌ DISCONNECTED reason=${reason} uptimeMs=${uptime ?? '?'} closeCode=${closeCode} closeReason="${closeReason}" errMsg="${errMsg}"`);
-
         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, addLog]);
+    }, [endCall]);
 
     const onMessage = useCallback((message: { source: string; message: string }) => {
-        addLog(`💬 ${message.source.toUpperCase()}: "${message.message}"`);
         if (message.source === 'user') {
             setCurrentTranscript(message.message);
             addMessage('user', message.message);
@@ -104,24 +71,20 @@ export default function UserPhoneInterface({
             addMessage('agent', message.message);
             onTranscript?.(message.message, 'agent');
         }
-    }, [addMessage, onTranscript, addLog]);
+    }, [addMessage, onTranscript]);
 
-    const onError = useCallback((message: string, context?: unknown) => {
-        let ctxStr = '';
-        try { ctxStr = JSON.stringify(context); } catch { ctxStr = String(context); }
-        addLog(`🔴 ERROR: "${message}" ctx=${ctxStr}`);
+    const onError = useCallback((message: string) => {
         setConnectionError(message ?? 'Connection error');
-    }, [addLog]);
+    }, []);
 
     const onModeChange = useCallback((modeEvent: { mode: string }) => {
-        addLog(`🔄 MODE → ${modeEvent.mode}`);
         if (modeEvent.mode === 'speaking') {
             setAgentStatus('speaking');
             setCurrentTranscript('');
         } else if (modeEvent.mode === 'listening') {
             setAgentStatus('listening');
         }
-    }, [addLog]);
+    }, []);
 
     // ElevenLabs Conversational AI — handles STT + LLM + TTS in one WebSocket
     const conversation = useConversation({
@@ -193,22 +156,17 @@ export default function UserPhoneInterface({
         }
 
         startCall('voice');
-        addLog('🟡 Fetching signed URL…');
 
         try {
             const signedUrl = await getSignedUrl();
-            addLog(`🟡 Got signed URL, starting session…`);
             await conversation.startSession({ signedUrl });
         } catch (error) {
-            const msg = error instanceof Error ? error.message : String(error);
-            addLog(`🔴 startSession failed: ${msg}`);
-            setConnectionError(msg || 'Failed to connect');
+            setConnectionError(error instanceof Error ? error.message : 'Failed to connect');
             setAgentStatus('idle');
         }
-    }, [startCall, getSignedUrl, conversation, addLog]);
+    }, [startCall, getSignedUrl, conversation]);
 
     const handleEndCall = useCallback(async () => {
-        console.log('🔴 End call button pressed');
         setIsEnding(true);
 
         // Only close the socket if it's still open — the agent may have already
@@ -402,26 +360,6 @@ export default function UserPhoneInterface({
                     </div>
                 </div>
 
-                {/* ── On-screen debug log ── */}
-                <div className="absolute top-4 right-4 z-30 text-left">
-                    <button
-                        onClick={() => setShowDebug(v => !v)}
-                        className="text-[10px] font-mono px-2 py-1 rounded bg-white/10 text-white/50 hover:bg-white/20"
-                    >
-                        {showDebug ? 'hide log' : 'show log'}
-                    </button>
-                    {showDebug && (
-                        <div className="mt-1 w-80 max-h-52 overflow-y-auto rounded-xl bg-black/80 border border-white/10 p-2">
-                            {debugLogs.length === 0
-                                ? <p className="text-white/30 text-[10px] font-mono">No events yet.</p>
-                                : debugLogs.map((l, i) => (
-                                    <p key={i} className="text-[10px] font-mono text-white/70 leading-relaxed break-all">{l}</p>
-                                ))
-                            }
-                        </div>
-                    )}
-                </div>
-
                 {/* Bottom Controls */}
                 <div className="p-8 pb-[max(2rem,env(safe-area-inset-bottom))] w-full z-20 bg-gradient-to-t from-black via-black/80 to-transparent">
                     <div className="flex items-center justify-center gap-6 max-w-lg mx-auto">
@@ -482,26 +420,6 @@ export default function UserPhoneInterface({
                     </div>
                 )}
 
-                {/* ── On-screen debug log ── */}
-                <div className="absolute top-4 right-4 z-30 text-left">
-                    <button
-                        onClick={() => setShowDebug(v => !v)}
-                        className="text-[10px] font-mono px-2 py-1 rounded bg-white/10 text-white/50 hover:bg-white/20"
-                    >
-                        {showDebug ? 'hide log' : 'show log'}
-                    </button>
-                    {showDebug && (
-                        <div className="mt-1 w-80 max-h-52 overflow-y-auto rounded-xl bg-black/80 border border-white/10 p-2">
-                            {debugLogs.length === 0
-                                ? <p className="text-white/30 text-[10px] font-mono">No events yet.</p>
-                                : debugLogs.map((l, i) => (
-                                    <p key={i} className="text-[10px] font-mono text-white/70 leading-relaxed break-all">{l}</p>
-                                ))
-                            }
-                        </div>
-                    )}
-                </div>
-
                 {/* Main Content Area */}
                 <div className="flex-1 flex flex-col items-center justify-center relative px-6 z-10 w-full max-w-[92vw] sm:max-w-lg mx-auto">
                     {/* Avatar */}