streaming almost working again, no rendering and still buggy

frontend/src/app/dashboard/agents/[threadId]/page.tsx

@@ -363,6 +363,9 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
             message?: string;
             name?: string;
             arguments?: string;
+            finish_reason?: string;
+            function_name?: string;
+            xml_tag_name?: string;
             tool_call?: {
               id: string;
               function: {
@@ -374,7 +377,10 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
             };
           } | null = null;
           
-          let currentLiveToolCall: ToolCallData | null = null;
+          // Handle data: prefix format (SSE standard)
+          if (processedData.startsWith('data: ')) {
+            processedData = processedData.substring(6).trim();
+          }
           
           try {
             jsonData = JSON.parse(processedData);
@@ -417,10 +423,73 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
               return;
             }
             
+            // Handle finish message
+            if (jsonData?.type === 'finish') {
+              console.log(`[PAGE] Received finish message with reason: ${jsonData.finish_reason}`);
+              // If there's a specific finish reason, handle it
+              if (jsonData.finish_reason === 'xml_tool_limit_reached') {
+                // Potentially show a toast notification
+                toast.info('Tool execution limit reached. The agent will continue with available information.');
+              }
+              return;
+            }
+
+            // Handle content type messages (text from the agent)
+            if (jsonData?.type === 'content' && jsonData?.content) {
+              console.log('[PAGE] Adding content to stream:', jsonData.content);
+              setStreamContent(prev => prev + jsonData.content);
+              return;
+            }
+            
+            // Handle tool status messages
+            if (jsonData?.type === 'tool_status') {
+              console.log(`[PAGE] Tool status: ${jsonData.status} for ${jsonData.function_name}`);
+              
+              // Update UI based on tool status
+              if (jsonData.status === 'started') {
+                // Could show a loading indicator for the specific tool
+                const toolInfo = {
+                  id: jsonData.xml_tag_name || `tool-${Date.now()}`,
+                  name: jsonData.function_name || 'unknown',
+                  arguments: '{}',
+                  index: 0,
+                };
+                
+                setToolCallData(toolInfo);
+                // Optionally add to stream content to show tool execution
+                setStreamContent(prev => 
+                  prev + `\n\nExecuting tool: ${jsonData.function_name}\n`
+                );
+              } else if (jsonData.status === 'completed') {
+                // Update UI to show tool completion
+                setToolCallData(null);
+                // Optionally add to stream content
+                setStreamContent(prev => 
+                  prev + `\nTool execution completed: ${jsonData.function_name}\n`
+                );
+              }
+              return;
+            }
+            
+            // Handle tool result messages
+            if (jsonData?.type === 'tool_result') {
+              console.log('[PAGE] Received tool result for:', jsonData.function_name);
+              
+              // Clear the tool data since execution is complete
+              setSidePanelContent(null);
+              setToolCallData(null);
+              
+              // Add tool result to the stream content for visibility
+              setStreamContent(prev => 
+                prev + `\nReceived result from ${jsonData.function_name}\n`
+              );
+              return;
+            }
+
             // --- Handle Live Tool Call Updates for Side Panel ---
             if (jsonData?.type === 'tool_call' && jsonData.tool_call) {
               console.log('[PAGE] Received tool_call update:', jsonData.tool_call);
-              currentLiveToolCall = {
+              const currentLiveToolCall: ToolCallData = {
                 id: jsonData.tool_call.id,
                 name: jsonData.tool_call.function.name,
                 arguments: jsonData.tool_call.function.arguments,
@@ -429,25 +498,28 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
               setToolCallData(currentLiveToolCall); // Keep for stream content rendering
               setCurrentPairIndex(null); // Live data means not viewing a historical pair
               setSidePanelContent(currentLiveToolCall); // Update side panel
+              
+              // Add to stream content so it's visible
+              setStreamContent(prev => 
+                prev + `\nCalling tool: ${currentLiveToolCall.name}\n`
+              );
+              
               if (!isSidePanelOpen) {
                 // Optionally auto-open side panel? Maybe only if user hasn't closed it recently.
                 // setIsSidePanelOpen(true);
               }
-            } else if (jsonData?.type === 'tool_result') {
-              // When tool result comes in, clear the live tool from side panel?
-              // Or maybe wait until stream end?
-              console.log('[PAGE] Received tool_result, clearing live tool from side panel');
-              setSidePanelContent(null);
-              setToolCallData(null);
-              // Don't necessarily clear currentPairIndex here, user might want to navigate back
-            }
-            // --- End Side Panel Update Logic ---
-          } catch (e) {
-            console.warn('[PAGE] Failed to parse message:', e);
+              return;
             }
             
-          // Continue with normal message processing...
-          // ... rest of the onMessage handler ...
+            // If we reach here and have JSON data but it's not a recognized type,
+            // log it for debugging purposes
+            console.log('[PAGE] Unhandled message type:', jsonData?.type);
+            
+          } catch (e) {
+            // If JSON parsing fails, treat it as raw text content
+            console.warn('[PAGE] Failed to parse as JSON, treating as raw content:', e);
+            setStreamContent(prev => prev + processedData);
+          }
         } catch (error) {
           console.error('[PAGE] Error processing message:', error);
           toast.error('Failed to process agent response');