feat: Add WebSocket ping/pong + detailed streaming debug + initial review messages

frontend/src/components/ReviewStream.tsx

@@ -37,46 +37,89 @@ export const ReviewStream: React.FC<ReviewStreamProps> = ({ reviewId }) => {
     console.log('👀 Watching for review ID:', reviewId);
     
     const ws = new WebSocket(WS_URL);
+    let pingInterval: number;
 
     ws.onopen = () => {
       console.log('✅ WebSocket connected for streaming');
       setIsConnected(true);
+      
+      // Start ping interval (every 30 seconds)
+      pingInterval = window.setInterval(() => {
+        if (ws.readyState === WebSocket.OPEN) {
+          console.log('🏓 Sending ping...');
+          ws.send('ping');
+        }
+      }, 30000);
     };
 
     ws.onmessage = (event) => {
       try {
         console.log('📨 WebSocket message received:', event.data);
-        const data: StreamEvent = JSON.parse(event.data);
+        const data: any = JSON.parse(event.data);
         console.log('📦 Parsed event:', data);
-        console.log(`🔍 Event review_id: ${data.review_id}, Expected: ${reviewId}`);
         
-        // Filter events for this review
-        if (data.review_id === reviewId) {
-          console.log('✅ Event matches review ID, adding to events');
-          setEvents((prev) => [...prev, data]);
+        // Handle different message types
+        if (data.type === 'connection') {
+          console.log('🔗 Connection confirmed:', data.message);
+          return;
+        }
+        
+        if (data.type === 'pong') {
+          console.log('🏓 Pong received');
+          return;
+        }
+        
+        if (data.type === 'echo') {
+          console.log('📢 Echo:', data.message);
+          return;
+        }
+        
+        // Review events
+        if (data.review_id !== undefined) {
+          console.log(`🔍 Event review_id: ${data.review_id}, Expected: ${reviewId}, Type: ${data.type}`);
+          
+          // Filter events for this review OR show all for debugging
+          if (data.review_id === reviewId || true) { // Allow all for now for debugging
+            console.log(`✅ Processing event type: ${data.type}`);
+            setEvents((prev) => [...prev, data]);
 
-          // Update current step
-          if (data.data.type === 'agent_step') {
-            console.log('🚶 Agent step:', data.data.step);
-            setCurrentStep(data.data.step || '');
-          }
+            // Update current step
+            if (data.type === 'agent_step' || data.data?.type === 'agent_step') {
+              const step = data.data?.step || data.step;
+              console.log('🚶 Agent step:', step);
+              setCurrentStep(step || '');
+            }
 
-          // Collect LLM messages
-          if (data.data.type === 'llm_message') {
-            console.log('💬 LLM message:', data.data.message);
-            setLlmMessages((prev) => [...prev, data.data.message || '']);
+            // Collect LLM messages
+            if (data.type === 'llm_message' || data.data?.type === 'llm_message') {
+              const message = data.data?.message || data.message;
+              console.log('💬 LLM message:', message);
+              setLlmMessages((prev) => [...prev, message || '']);
+            }
+            
+            // Handle special events
+            if (data.type === 'review_started') {
+              console.log('🎬 Review started:', data.data?.message);
+            }
+            
+            if (data.type === 'review_completed') {
+              console.log('🎉 Review completed:', data.data?.message);
+            }
+          } else {
+            console.log('⏭️ Event is for different review, skipping');
           }
-        } else {
-          console.log('⏭️ Event is for different review, skipping');
         }
       } catch (error) {
-        console.error('❌ Error parsing WebSocket message:', error);
+        console.error('❌ Error parsing WebSocket message:', error, 'Data:', event.data);
       }
     };
 
     ws.onclose = () => {
       console.log('🔌 WebSocket disconnected');
       setIsConnected(false);
+      if (pingInterval) {
+        window.clearInterval(pingInterval);
+      }
     };
 
     ws.onerror = (error) => {
@@ -85,6 +128,9 @@ export const ReviewStream: React.FC<ReviewStreamProps> = ({ reviewId }) => {
 
     return () => {
       console.log('🔌 Closing WebSocket');
+      if (pingInterval) {
+        window.clearInterval(pingInterval);
+      }
       ws.close();
     };
   }, [reviewId]);
@@ -142,38 +188,53 @@ export const ReviewStream: React.FC<ReviewStreamProps> = ({ reviewId }) => {
     if (events.length === 0) {
       return (
         <div className="text-center text-dark-text-muted py-4">
-          Ожидание событий...
+          <div className="animate-pulse">⏳ Ожидание событий...</div>
+          <div className="text-xs mt-2">
+            {isConnected ? '✅ WebSocket подключен' : '❌ WebSocket отключен'}
+          </div>
         </div>
       );
     }
 
     return (
       <div className="space-y-2 max-h-60 overflow-y-auto">
-        {events.map((event, index) => (
-          <div
-            key={index}
-            className="bg-dark-card border border-dark-border rounded-lg p-3 text-sm"
-          >
-            <div className="flex items-center justify-between mb-1">
-              <span className="text-dark-text-secondary text-xs">
-                {new Date(event.timestamp).toLocaleTimeString()}
-              </span>
-              <span className="text-xs bg-blue-900/30 text-blue-400 px-2 py-1 rounded">
-                {event.data.type}
-              </span>
+        {events.map((event: any, index) => {
+          const eventType = event.type || event.data?.type;
+          const eventMessage = event.data?.message || event.message;
+          const eventStep = event.data?.step || event.step;
+          
+          return (
+            <div
+              key={index}
+              className="bg-dark-card border border-dark-border rounded-lg p-3 text-sm"
+            >
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-dark-text-secondary text-xs">
+                  {new Date(event.timestamp).toLocaleTimeString('ru-RU')}
+                </span>
+                <span className={`text-xs px-2 py-1 rounded ${
+                  eventType === 'review_started' ? 'bg-green-900/30 text-green-400' :
+                  eventType === 'review_completed' ? 'bg-blue-900/30 text-blue-400' :
+                  eventType === 'agent_step' ? 'bg-purple-900/30 text-purple-400' :
+                  eventType === 'llm_message' ? 'bg-yellow-900/30 text-yellow-400' :
+                  'bg-gray-900/30 text-gray-400'
+                }`}>
+                  {eventType}
+                </span>
+              </div>
+              {eventStep && (
+                <div className="text-dark-text-primary">
+                  {getStepInfo(eventStep).icon} {getStepInfo(eventStep).name}
+                </div>
+              )}
+              {eventMessage && (
+                <div className="text-dark-text-muted mt-1 text-xs">
+                  {eventMessage}
+                </div>
+              )}
             </div>
-            {event.data.step && (
-              <div className="text-dark-text-primary">
-                {getStepInfo(event.data.step).icon} {getStepInfo(event.data.step).name}
-              </div>
-            )}
-            {event.data.message && (
-              <div className="text-dark-text-muted mt-1 text-xs">
-                {event.data.message}
-              </div>
-            )}
-          </div>
-        ))}
+          );
+        })}
       </div>
     );
   };