Improve plan chat UI and team selection handling

Standardizes chat input placeholder text and refines color logic in PlanChatBody. Adds selected team state management to PlanPage and ensures left panel reloads after plan completion. Updates PlanDataService to improve parsing of user clarification responses. Enhances PlanPanelLeft to reload plans when tasks change and improves user info handling.

Author: Fr4nc3

src/frontend/src/components/content/PlanChatBody.tsx

@@ -41,11 +41,7 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
                 onChange={setInput}
                 onEnter={() => OnChatSubmit(input)}
                 disabledChat={submittingChatDisableInput}
-                placeholder={
-                    waitingForPlan
-                        ? "Creating plan..."
-                        : "Type your message here..."
-                }
+                placeholder="Type your message here..."
                 style={{
                     fontSize: '16px',
                     borderRadius: '8px',
@@ -68,7 +64,7 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
                         backgroundColor: 'transparent',
                         border: 'none',
                         color: (submittingChatDisableInput || !input.trim())
-                            ? 'var(--colorNeutralForegroundDisabled)' 
+                            ? 'var(--colorNeutralForegroundDisabled)'
                             : 'var(--colorBrandForeground1)',
                         flexShrink: 0,
                     }}

src/frontend/src/components/content/PlanPanelLeft.tsx

@@ -79,6 +79,13 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
     setUserInfo(getUserInfoGlobal());
   }, [loadPlansData, setUserInfo]);
 
+
+  useEffect(() => {
+    console.log("Reload tasks changed:", reloadTasks);
+    if (reloadTasks) {
+      loadPlansData();
+    }
+  }, [loadPlansData, setUserInfo, reloadTasks]);
   useEffect(() => {
     if (plans) {
       const { inProgress, completed } =
@@ -215,7 +222,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
           <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '100%' }}>
             {/* User Card */}
             <PanelUserCard
-              name={userInfo ? userInfo.user_first_last_name : "Guest"}
+              name={userInfo?.user_first_last_name || "Guest"}
               // alias={userInfo ? userInfo.user_email : ""}
               size={32}
             />

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, WebsocketMessageType, MPlanData, AgentMessageData, AgentMessageType, ParsedUserClarification, AgentType, PlanStatus, FinalMessage } from "../models";
+import { ProcessedPlanData, WebsocketMessageType, MPlanData, AgentMessageData, AgentMessageType, ParsedUserClarification, AgentType, PlanStatus, FinalMessage, TeamConfig } from "../models";
 import PlanChat from "../components/content/PlanChat";
 import PlanPanelRight from "../components/content/PlanPanelRight";
 import PlanPanelLeft from "../components/content/PlanPanelLeft";
@@ -48,6 +48,7 @@ const PlanPage: React.FC = () => {
     const [showProcessingPlanSpinner, setShowProcessingPlanSpinner] = useState<boolean>(false);
     const [showApprovalButtons, setShowApprovalButtons] = useState<boolean>(true);
     const [continueWithWebsocketFlow, setContinueWithWebsocketFlow] = useState<boolean>(false);
+    const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
     // WebSocket connection state
     const [wsConnected, setWsConnected] = useState<boolean>(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
@@ -261,6 +262,7 @@ const PlanPage: React.FC = () => {
                 setShowBufferingText(true);
                 setShowProcessingPlanSpinner(false);
                 setAgentMessages(prev => [...prev, agentMessageData]);
+                setSelectedTeam(planData?.team || null);
                 scrollToBottom();
                 // Persist the agent message
                 const is_final = true;
@@ -270,13 +272,19 @@ const PlanPage: React.FC = () => {
                 }
 
                 processAgentMessage(agentMessageData, planData, is_final, streamingMessageBuffer);
+
+                setTimeout(() => {
+                    console.log('✅ Plan completed, refreshing left list');
+                    setReloadLeftList(true);
+                }, 1000);
+
             }
 
 
         });
 
         return () => unsubscribe();
-    }, [scrollToBottom, planData, processAgentMessage, streamingMessageBuffer]);
+    }, [scrollToBottom, planData, processAgentMessage, streamingMessageBuffer, setSelectedTeam, setReloadLeftList]);
 
     //WebsocketMessageType.AGENT_MESSAGE
     useEffect(() => {
@@ -591,7 +599,7 @@ const PlanPage: React.FC = () => {
                     onTeamSelect={() => { }}
                     onTeamUpload={async () => { }}
                     isHomePage={false}
-                    selectedTeam={null}
+                    selectedTeam={selectedTeam}
                 />
 
                 <Content>

src/frontend/src/services/PlanDataService.tsx

@@ -893,16 +893,30 @@ export class PlanDataService {
     }
 
     // Capture the inside of UserClarificationResponse(...)
-    const outerMatch = line.match(/Human clarification:\s*UserClarificationResponse\((.*?)\)/s);
+    const outerMatch = line.match(/Human clarification:\s*UserClarificationResponse\((.*)\)$/s);
     if (!outerMatch) return line;
 
     const inner = outerMatch[1];
 
-    // Find answer= '...' | "..."
-    const answerMatch = inner.match(/answer=(?:"((?:\\.|[^"])*)"|'((?:\\.|[^'])*)')/);
-    if (!answerMatch) return line;
+    // Find answer= '...' | "..." - Updated regex to handle the full content properly
+    const answerMatch = inner.match(/answer='([^']*(?:''[^']*)*)'/);
+    if (!answerMatch) {
+      // Try double quotes if single quotes don't work
+      const doubleQuoteMatch = inner.match(/answer="([^"]*(?:""[^"]*)*)"/);
+      if (!doubleQuoteMatch) return line;
 
-    let answer = answerMatch[1] ?? answerMatch[2] ?? '';
+      let answer = doubleQuoteMatch[1];
+      answer = answer
+        .replace(/\\n/g, '\n')
+        .replace(/\\'/g, "'")
+        .replace(/\\"/g, '"')
+        .replace(/\\\\/g, '\\')
+        .trim();
+
+      return `Human clarification: ${answer}`;
+    }
+
+    let answer = answerMatch[1];
     // Unescape common sequences
     answer = answer
       .replace(/\\n/g, '\n')