Support complex user_request structure in MPlan

Updated backend and frontend to handle user_request as either a string or a structured object. Added new TypeScript interfaces for user_request, adjusted PlanDataService to extract text from complex user_request objects, and modified PlanPage logic for improved UI state handling.

Author: Fr4nc3

src/backend/v3/api/router.py

@@ -1340,12 +1340,13 @@ async def get_plan_by_id(request: Request,  plan_id: Optional[str] = Query(None)
 
             team = await memory_store.get_team_by_id(team_id=plan.team_id)
             agent_messages = await memory_store.get_agent_messages(plan_id=plan.plan_id)
-
+            mplan = plan.m_plan if plan.m_plan else None
+            plan.m_plan = None  # remove m_plan from plan object for response
             return {
                 "plan": plan,
                 "team": team if team else None,
                 "messages": agent_messages,
-                "m_plan": plan.m_plan,
+                "m_plan": mplan,
             }
         else:
             track_event_if_configured(

src/frontend/src/models/plan.tsx

@@ -127,10 +127,50 @@ export interface MStepBE {
     /** Action to be performed */
     action: string;
 }
+/**
+ * Represents a user request item within the user_request object
+ */
+export interface UserRequestItem {
+    /** AI model identifier */
+    ai_model_id?: string | null;
+    /** Metadata */
+    metadata?: Record<string, any>;
+    /** Content type */
+    content_type?: string;
+    /** Text content */
+    text?: string;
+    /** Encoding */
+    encoding?: string | null;
+}
 
-export interface MPlanBE extends BaseModel {
-    /** The type of data model */
-    data_type: "m_plan";
+/**
+ * Represents the user_request object structure from the database
+ */
+export interface UserRequestObject {
+    /** AI model identifier */
+    ai_model_id?: string | null;
+    /** Metadata */
+    metadata?: Record<string, any>;
+    /** Content type */
+    content_type?: string;
+    /** Role */
+    role?: string;
+    /** Name */
+    name?: string | null;
+    /** Items array containing the actual request text */
+    items?: UserRequestItem[];
+    /** Encoding */
+    encoding?: string | null;
+    /** Finish reason */
+    finish_reason?: string | null;
+    /** Status */
+    status?: string | null;
+}
+
+export interface MPlanBE {
+
+    /** Unique identifier */
+    id: string;
     /** User identifier */
     user_id: string;
     /** Team identifier */
@@ -139,8 +179,8 @@ export interface MPlanBE extends BaseModel {
     plan_id: string;
     /** Overall status of the plan */
     overall_status: PlanStatus;
-    /** User's original request */
-    user_request: string;
+    /** User's original request - can be string or complex object */
+    user_request: string | UserRequestObject;
     /** List of team member names */
     team: string[];
     /** Facts or context for the plan */

src/frontend/src/pages/PlanPage.tsx

@@ -47,7 +47,7 @@ const PlanPage: React.FC = () => {
     const [waitingForPlan, setWaitingForPlan] = useState<boolean>(true);
     const [showProcessingPlanSpinner, setShowProcessingPlanSpinner] = useState<boolean>(false);
     const [showApprovalButtons, setShowApprovalButtons] = useState<boolean>(true);
-    const [continueWithWebsocketFlow, setContinueWithWebsocketFlow] = useState<boolean>(true);
+    const [continueWithWebsocketFlow, setContinueWithWebsocketFlow] = useState<boolean>(false);
     // WebSocket connection state
     const [wsConnected, setWsConnected] = useState<boolean>(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
@@ -279,7 +279,7 @@ const PlanPage: React.FC = () => {
     // WebSocket connection with proper error handling and v3 backend compatibility
     useEffect(() => {
         if (planId && continueWithWebsocketFlow) {
-            console.log('🔌 Connecting WebSocket:', { planId });
+            console.log('🔌 Connecting WebSocket:', { planId, continueWithWebsocketFlow });
 
             const connectWebSocket = async () => {
                 try {
@@ -355,6 +355,7 @@ const PlanPage: React.FC = () => {
                     setShowApprovalButtons(true);
 
                 } else {
+                    setShowApprovalButtons(false);
                     setWaitingForPlan(false);
                 }
                 if (planResult?.plan?.overall_status !== PlanStatus.COMPLETED) {

src/frontend/src/services/PlanDataService.tsx

@@ -122,6 +122,37 @@ export class PlanDataService {
       }))
     };
   }
+  /**
+  * Extracts the actual text from a user_request object or string
+  * @param userRequest - Either a string or UserRequestObject
+  * @returns The extracted text string
+  */
+  static extractUserRequestText(userRequest: string | UserRequestObject): string {
+    if (typeof userRequest === 'string') {
+      return userRequest;
+    }
+
+    if (userRequest && typeof userRequest === 'object') {
+      // Look for text in the items array
+      if (Array.isArray(userRequest.items)) {
+        const textItem = userRequest.items.find(item => item.text);
+        if (textItem?.text) {
+          return textItem.text;
+        }
+      }
+
+      // Fallback: try to find any text content
+      if (userRequest.content_type === 'text' && 'text' in userRequest) {
+        return (userRequest as any).text || '';
+      }
+
+      // Last resort: stringify the object
+      return JSON.stringify(userRequest);
+    }
+
+    return '';
+  }
+
   /**
    * Converts MPlanBE to MPlanData
    * @param mplanBE - MPlanBE from backend
@@ -132,6 +163,9 @@ export class PlanDataService {
       return null;
     }
 
+    // Extract the actual user request text
+    const userRequestText = this.extractUserRequestText(mplanBE.user_request);
+
     // Convert MStepBE[] to the MPlanData steps format
     const steps = mplanBE.steps.map((stepBE: MStepBE, index: number) => ({
       id: index + 1, // MPlanData expects numeric id starting from 1
@@ -151,12 +185,12 @@ export class PlanDataService {
     return {
       id: mplanBE.id,
       status: mplanBE.overall_status.toString().toUpperCase(),
-      user_request: mplanBE.user_request,
+      user_request: userRequestText,
       team: mplanBE.team,
       facts: mplanBE.facts,
       steps: steps,
       context: {
-        task: mplanBE.user_request,
+        task: userRequestText,
         participant_descriptions: {} // Default empty object since it's not in MPlanBE
       },
       // Additional fields from m_plan