Improve conditional rendering and logging in chat components

PlanChat now conditionally renders the plan response only when approval buttons are shown. Added targeted logging for messages containing 'clarification' in WebSocketService. PlanPage received additional comments for clarity on WebSocket message types. StreamingAgentMessage includes commented-out style suggestions for agent message container.

Author: Fr4nc3

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

@@ -159,7 +159,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderThinkingState(waitingForPlan)}
 
         {/* Plan response with all information */}
-        {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
+        {showApprovalButtons && renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
         {renderAgentMessages(agentMessages)}
 
 

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

@@ -8,7 +8,16 @@ const renderAgentMessages = (agentMessages: AgentMessageData[]) => {
     if (!agentMessages || agentMessages.length === 0) return null;
 
     return (
-        <div >
+        <div
+        // style={{
+        //     height: 200,
+        //     maxHeight: 200,
+        //     overflowY: 'auto',     // or 'hidden' if you don't want scrolling
+        //     overflowX: 'hidden',
+        //     flex: '0 0 200px'      // prevents flex parents from stretching it
+        // }}
+
+        >
             {agentMessages.map((msg, index) => {
                 const trimmed = msg.raw_content?.trim();
                 if (!trimmed) return null; // skip if empty, null, or whitespace

src/frontend/src/pages/PlanPage.tsx

@@ -82,6 +82,7 @@ const PlanPage: React.FC = () => {
         }, 100);
     }, []);
 
+    //WebsocketMessageType.PLAN_APPROVAL_REQUEST
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, (approvalRequest: any) => {
             console.log('📋 Plan received:', approvalRequest);
@@ -122,7 +123,7 @@ const PlanPage: React.FC = () => {
         return () => unsubscribe();
     }, [scrollToBottom]); //onPlanReceived, scrollToBottom
 
-
+    //(WebsocketMessageType.AGENT_MESSAGE_STREAMING
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE_STREAMING, (streamingMessage: any) => {
             // console.log('📋 Streaming Message', streamingMessage);
@@ -134,6 +135,7 @@ const PlanPage: React.FC = () => {
         return () => unsubscribe();
     }, [scrollToBottom]); //onPlanReceived, scrollToBottom
 
+    //WebsocketMessageType.USER_CLARIFICATION_REQUEST
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.USER_CLARIFICATION_REQUEST, (clarificationMessage: any) => {
             console.log('📋 Clarification Message', clarificationMessage);
@@ -143,7 +145,7 @@ const PlanPage: React.FC = () => {
 
         return () => unsubscribe();
     }, [scrollToBottom]);
-
+    //WebsocketMessageType.AGENT_TOOL_MESSAGE
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_TOOL_MESSAGE, (toolMessage: any) => {
             console.log('📋 Tool Message', toolMessage);
@@ -154,7 +156,7 @@ const PlanPage: React.FC = () => {
         return () => unsubscribe();
     }, [scrollToBottom]);
 
-
+    //WebsocketMessageType.AGENT_MESSAGE
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, (agentMessage: any) => {
             console.log('📋 Agent Message', agentMessage);

src/frontend/src/services/WebSocketService.tsx

@@ -166,8 +166,11 @@ class WebSocketService {
 
     private handleMessage(message: StreamMessage): void {
 
-
-        console.log('WebSocket message received:', message);
+        //console.log('WebSocket message received:', message);
+        const hasClarification = /\bclarifications?\b/i.test(message.data || '');
+        if (hasClarification) {
+            console.log("Message contains 'clarification':", message.data);
+        }
         switch (message.type) {
             case WebsocketMessageType.PLAN_APPROVAL_REQUEST: {
                 console.log("enter plan approval request");