Add agent message streaming to plan chat

Introduces support for streaming agent messages in the plan chat by adding the AgentMessageData model, a new StreamingAgentMessage renderer, and updating PlanChat and PlanPage to handle and display agent messages. This enhances visibility into agent activity during plan generation.

Author: Fr4nc3

src/frontend/src/components/content/PlanChat.tsx

@@ -24,22 +24,23 @@ import ChatInput from "../../coral/modules/ChatInput";
 import InlineToaster, {
   useInlineToaster,
 } from "../toast/InlineToaster";
-import { WebsocketMessageType } from "@/models";
+import { AgentMessageData, WebsocketMessageType } from "@/models";
 import getUserPlan from "./streaming/StreamingUserPlan";
 import renderUserPlanMessage from "./streaming/StreamingUserPlanMessage";
 import renderPlanResponse from "./streaming/StreamingPlanResponse";
 import renderThinkingState from "./streaming/StreamingPlanState";
 import ContentNotFound from "../NotFound/ContentNotFound";
 import PlanChatBody from "./PlanChatBody";
 import renderBufferMessage from "./streaming/StreamingBufferMessage";
+import renderAgentMessages from "./streaming/StreamingAgentMessage";
 interface SimplifiedPlanChatProps extends PlanChatProps {
   onPlanReceived?: (planData: MPlanData) => void;
   initialTask?: string;
   planApprovalRequest: MPlanData | null;
   waitingForPlan: boolean;
   messagesContainerRef: React.RefObject<HTMLDivElement>;
   streamingMessageBuffer: string;
-  agentMessages: any[];
+  agentMessages: AgentMessageData[];
 }
 
 const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
@@ -159,6 +160,8 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
 
         {/* Plan response with all information */}
         {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
+        {renderAgentMessages(agentMessages)}
+
 
         {/* Streaming plan updates */}
         {renderBufferMessage(streamingMessageBuffer)}

src/frontend/src/components/content/streaming/StreamingAgentMessage.tsx

@@ -0,0 +1,30 @@
+import { AgentMessageData } from "@/models";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypePrism from "rehype-prism";
+// Render AI thinking/planning state
+const renderAgentMessages = (agentMessages: AgentMessageData[]) => {
+    if (!agentMessages || agentMessages.length === 0) return null;
+
+    return (
+        <div >
+            {agentMessages.map((msg, index) => {
+                const trimmed = msg.raw_content?.trim();
+                if (!trimmed) return null; // skip if empty, null, or whitespace
+                return (
+                    <div key={index} style={{ marginBottom: '16px' }}>
+                        <strong>{msg.agent}</strong>:
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypePrism]}
+                        >
+                            {trimmed}
+                        </ReactMarkdown>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+export default renderAgentMessages;

src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx

@@ -7,7 +7,7 @@ import {
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypePrism from "rehype-prism";
-import { useState } from "react";
+
 // Render AI thinking/planning state
 const renderBufferMessage = (streamingMessageBuffer: string) => {
     if (!streamingMessageBuffer || streamingMessageBuffer.trim() === "") return null;

src/frontend/src/models/agentMessage.tsx

@@ -17,3 +17,12 @@ export interface AgentMessage extends BaseModel {
     /** Optional step identifier associated with the message */
     step_id?: string;
 }
+
+export interface AgentMessageData {
+    agent: string;
+    timestamp: number;
+    steps: any[];       // intentionally always empty
+    next_steps: [];  // intentionally always empty
+    raw_content: string;
+    raw_data: string;
+}

src/frontend/src/pages/PlanPage.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState, useMemo } from "react"
 import { useParams, useNavigate } from "react-router-dom";
 import { Spinner, Text } from "@fluentui/react-components";
 import { PlanDataService } from "../services/PlanDataService";
-import { ProcessedPlanData, PlanWithSteps, WebsocketMessageType, MPlanData } from "../models";
+import { ProcessedPlanData, PlanWithSteps, WebsocketMessageType, MPlanData, AgentMessageData } from "../models";
 import PlanChat from "../components/content/PlanChat";
 import PlanPanelRight from "../components/content/PlanPanelRight";
 import PlanPanelLeft from "../components/content/PlanPanelLeft";
@@ -57,7 +57,7 @@ const PlanPage: React.FC = () => {
     // RAI Error state
     const [raiError, setRAIError] = useState<RAIErrorData | null>(null);
 
-    const [agentMessages, setAgentMessages] = useState<any[]>([]);
+    const [agentMessages, setAgentMessages] = useState<AgentMessageData[]>([]);
     // Team config state
     const [teamConfig, setTeamConfig] = useState<TeamConfig | null>(null);
     const [loadingTeamConfig, setLoadingTeamConfig] = useState(true);
@@ -137,7 +137,8 @@ const PlanPage: React.FC = () => {
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, (agentMessage: any) => {
             console.log('📋 Agent Message', agentMessage);
-            setAgentMessages(prev => [...prev, agentMessage]);
+            const agentMessageData = agentMessage.data as AgentMessageData;
+            setAgentMessages(prev => [...prev, agentMessageData]);
             scrollToBottom();
         });