Refactor clarification and result message handling

Updated the HumanClarification model and related API/service methods to use new fields (request_id, answer, plan_id, m_plan_id). Improved PlanPage to handle clarification and final result messages via websocket, updating UI state and agent message history accordingly. Added robust parsing functions for user clarification and final result messages in PlanDataService.

Author: Fr4nc3

src/frontend/src/api/apiService.tsx

@@ -290,14 +290,16 @@ export class APIService {
      * @returns Promise with response object
      */
     async submitClarification(
-        planId: string,
-        sessionId: string,
-        clarification: string
+        request_id: string = "",
+        answer: string = "",
+        plan_id: string = "",
+        m_plan_id: string = ""
     ): Promise<{ status: string; session_id: string }> {
         const clarificationData: HumanClarification = {
-            plan_id: planId,
-            session_id: sessionId,
-            human_clarification: clarification
+            request_id,
+            answer,
+            plan_id,
+            m_plan_id
         };
 
         const response = await apiClient.post(
@@ -306,7 +308,7 @@ export class APIService {
         );
 
         // Invalidate cached data
-        this._cache.invalidate(new RegExp(`^(plan|steps)_${planId}`));
+        this._cache.invalidate(new RegExp(`^(plan|steps)_${plan_id}`));
         this._cache.invalidate(new RegExp(`^plans_`));
 
         return response;

src/frontend/src/models/agentMessage.tsx

@@ -28,4 +28,4 @@ export interface AgentMessageData {
     next_steps: [];  // intentionally always empty
     raw_content: string;
     raw_data: string;
-}
+}

src/frontend/src/models/messages.tsx

@@ -65,12 +65,10 @@ export interface HumanFeedback {
  * Message containing human clarification on a plan
  */
 export interface HumanClarification {
-    /** Plan identifier */
+    request_id: string;
+    answer: string;
     plan_id: string;
-    /** Session identifier */
-    session_id: string;
-    /** Clarification from human */
-    human_clarification: string;
+    m_plan_id: 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, AgentMessageData } from "../models";
+import { ProcessedPlanData, PlanWithSteps, WebsocketMessageType, MPlanData, AgentMessageData, AgentMessageType, ParsedUserClarification } from "../models";
 import PlanChat from "../components/content/PlanChat";
 import PlanPanelRight from "../components/content/PlanPanelRight";
 import PlanPanelLeft from "../components/content/PlanPanelLeft";
@@ -42,8 +42,9 @@ const PlanPage: React.FC = () => {
     const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
     const [allPlans, setAllPlans] = useState<ProcessedPlanData[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
-    const [submittingChatDisableInput, setSubmittingChatDisableInput] = useState<boolean>(false);
+    const [submittingChatDisableInput, setSubmittingChatDisableInput] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
+    const [clarificationMessage, setClarificationMessage] = useState<ParsedUserClarification | null>(null);
 
     const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
     const [reloadLeftList, setReloadLeftList] = useState(true);
@@ -52,8 +53,7 @@ const PlanPage: React.FC = () => {
     const [wsConnected, setWsConnected] = useState(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
     const [streamingMessageBuffer, setStreamingMessageBuffer] = useState<string>("");
-    // RAI Error state
-    const [raiError, setRAIError] = useState<RAIErrorData | null>(null);
+
 
     const [agentMessages, setAgentMessages] = useState<AgentMessageData[]>([]);
     // Team config state
@@ -137,6 +137,19 @@ const PlanPage: React.FC = () => {
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.USER_CLARIFICATION_REQUEST, (clarificationMessage: any) => {
             console.log('📋 Clarification Message', clarificationMessage);
+            const agentMessageData = {
+                agent: 'ProxyAgent',
+                agent_type: AgentMessageType.AI_AGENT,
+                timestamp: clarificationMessage.timestamp || Date.now(),
+                steps: [],   // intentionally always empty
+                next_steps: [],  // intentionally always empty
+                raw_content: clarificationMessage.data.question || '',
+                raw_data: clarificationMessage.data || '',
+            } as AgentMessageData;
+            console.log('✅ Parsed clarification message:', agentMessageData);
+            setClarificationMessage(clarificationMessage.data as ParsedUserClarification | null);
+            setAgentMessages(prev => [...prev, agentMessageData]);
+            setSubmittingChatDisableInput(false);
             scrollToBottom();
 
         });
@@ -154,6 +167,31 @@ const PlanPage: React.FC = () => {
         return () => unsubscribe();
     }, [scrollToBottom]);
 
+
+    //WebsocketMessageType.FINAL_RESULT_MESSAGE
+    useEffect(() => {
+        const unsubscribe = webSocketService.on(WebsocketMessageType.FINAL_RESULT_MESSAGE, (finalMessage: any) => {
+            console.log('📋 Final Result Message', finalMessage);
+            const agentMessageData = {
+                agent: 'ProxyAgent',
+                agent_type: AgentMessageType.AI_AGENT,
+                timestamp: Date.now(),
+                steps: [],   // intentionally always empty
+                next_steps: [],  // intentionally always empty
+                raw_content: finalMessage.content || '',
+                raw_data: finalMessage || '',
+            } as AgentMessageData;
+            console.log('✅ Parsed final result message:', agentMessageData);
+            setAgentMessages(prev => [...prev, agentMessageData]);
+            setSubmittingChatDisableInput(true);
+            scrollToBottom();
+
+        });
+
+        return () => unsubscribe();
+    }, [scrollToBottom]);
+
+
     //WebsocketMessageType.AGENT_MESSAGE
     useEffect(() => {
         const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, (agentMessage: any) => {
@@ -332,17 +370,32 @@ const PlanPage: React.FC = () => {
 
             try {
                 // Use legacy method for non-v3 backends
-                await PlanDataService.submitClarification(
-                    planData.plan.id,
-                    planData.plan.session_id,
-                    chatInput
-                );
-
+                const response = await PlanDataService.submitClarification({
+                    request_id: clarificationMessage?.request_id || "",
+                    answer: chatInput,
+                    plan_id: planData?.plan.id,
+                    m_plan_id: planApprovalRequest?.id || ""
+                });
 
+                console.log("Clarification submitted successfully:", response);
                 setInput("");
                 dismissToast(id);
                 showToast("Clarification submitted successfully", "success");
-                await loadPlanData(false);
+                setClarificationMessage(null);
+                const agentMessageData = {
+                    agent: 'You',
+                    agent_type: AgentMessageType.HUMAN_AGENT,
+                    timestamp: Date.now(),
+                    steps: [],   // intentionally always empty
+                    next_steps: [],  // intentionally always empty
+                    raw_content: chatInput || '',
+                    raw_data: chatInput || '',
+                } as AgentMessageData;
+
+                setAgentMessages(prev => [...prev, agentMessageData]);
+                setSubmittingChatDisableInput(true);
+                scrollToBottom();
+
             } catch (error: any) {
                 dismissToast(id);
 

src/frontend/src/services/PlanDataService.tsx

@@ -48,7 +48,7 @@ export class PlanDataService {
     messages: PlanMessage[]
   ): ProcessedPlanData {
     // Extract unique agents from steps
-    console.log("Processing plan data for plan ID:", plan);
+
     const uniqueAgents = new Set<AgentType>();
     if (plan.steps && plan.steps.length > 0) {
       plan.steps.forEach((step) => {
@@ -141,13 +141,19 @@ export class PlanDataService {
    * @param clarification Clarification text
    * @returns Promise with API response
    */
-  static async submitClarification(
-    planId: string,
-    sessionId: string,
-    clarification: string
-  ) {
+  static async submitClarification({
+    request_id,
+    answer,
+    plan_id,
+    m_plan_id
+  }: {
+    request_id: string;
+    answer: string;
+    plan_id: string;
+    m_plan_id: string;
+  }) {
     try {
-      return apiService.submitClarification(planId, sessionId, clarification);
+      return apiService.submitClarification(request_id, answer, plan_id, m_plan_id);
     } catch (error) {
       console.log("Failed to submit clarification:", error);
       throw error;
@@ -536,22 +542,27 @@ export class PlanDataService {
    * }
    * Returns ParsedUserClarification or null if not parsable.
    */
+  // ...existing code...
+  /**
+   * Parse a user clarification request message (possibly deeply nested).
+   * Enhanced to support:
+   *  - question in single OR double quotes
+   *  - request_id in single OR double quotes
+   *  - escaped newline / quote sequences
+   */
   static parseUserClarificationRequest(rawData: any): ParsedUserClarification | null {
     try {
-      // Depth-first search to locate the innermost string starting with UserClarificationRequest(
       const extractString = (val: any, depth = 0): string | null => {
-        if (depth > 10) return null; // safety
+        if (depth > 15) return null;
         if (typeof val === 'string') {
-          if (val.startsWith('UserClarificationRequest(')) return val;
-          return null;
+          return val.startsWith('UserClarificationRequest(') ? val : null;
         }
         if (val && typeof val === 'object') {
-          // Common pattern: { type: 'user_clarification_request', data: ... }
+          // Prefer .data traversal
           if (val.data !== undefined) {
             const inner = extractString(val.data, depth + 1);
             if (inner) return inner;
           }
-          // Also scan other enumerable props just in case
           for (const k of Object.keys(val)) {
             if (k === 'data') continue;
             const inner = extractString(val[k], depth + 1);
@@ -564,21 +575,23 @@ export class PlanDataService {
       const source = extractString(rawData);
       if (!source) return null;
 
-      // Extract question and request_id
-      // question='...'
-      const questionMatch = source.match(/question='((?:\\'|[^'])*)'/);
-      const requestIdMatch = source.match(/request_id='([a-fA-F0-9-]+)'/);
-
-      if (!questionMatch || !requestIdMatch) return null;
+      // question=( "...") OR ('...')
+      const questionRegex = /question=(?:"((?:\\.|[^"])*)"|'((?:\\.|[^'])*)')/;
+      const qMatch = source.match(questionRegex);
+      if (!qMatch) return null;
 
-      let question = questionMatch[1]
+      let question = (qMatch[1] ?? qMatch[2] ?? '')
         .replace(/\\n/g, '\n')
         .replace(/\\'/g, "'")
         .replace(/\\"/g, '"')
         .replace(/\\\\/g, '\\')
         .trim();
 
-      const request_id = requestIdMatch[1];
+      // request_id='uuid' or "uuid"
+      const requestIdRegex = /request_id=(?:"([a-fA-F0-9-]+)"|'([a-fA-F0-9-]+)')/;
+      const rMatch = source.match(requestIdRegex);
+      if (!rMatch) return null;
+      const request_id = rMatch[1] ?? rMatch[2];
 
       return {
         type: WebsocketMessageType.USER_CLARIFICATION_REQUEST,
@@ -590,6 +603,75 @@ export class PlanDataService {
       return null;
     }
   }
+  // ...inside export class PlanDataService (place near other parsers) ...
+
+  /**
+   * Parse a final result message (possibly nested).
+   * Accepts structures like:
+   * {
+   *   type: 'final_result_message',
+   *   data: { type: 'final_result_message', data: { content: '...', status: 'completed', timestamp: 12345.6 } }
+   * }
+   * Returns null if not parsable.
+   */
+  static parseFinalResultMessage(rawData: any): {
+    type: WebsocketMessageType;
+    content: string;
+    status: string;
+    timestamp: number | null;
+    raw_data: any;
+  } | null {
+    try {
+      const extractPayload = (val: any, depth = 0): any => {
+        if (depth > 10) return null;
+        if (!val || typeof val !== 'object') return null;
+        // If it has content & status, assume it's the payload
+        if (('content' in val) && ('status' in val)) return val;
+        if ('data' in val) {
+          const inner = extractPayload(val.data, depth + 1);
+          if (inner) return inner;
+        }
+        // Scan other keys as fallback
+        for (const k of Object.keys(val)) {
+          if (k === 'data') continue;
+          const inner = extractPayload(val[k], depth + 1);
+          if (inner) return inner;
+        }
+        return null;
+      };
+
+      const payload = extractPayload(rawData);
+      if (!payload) return null;
+
+      let content = typeof payload.content === 'string' ? payload.content : '';
+      content = content
+        .replace(/\\n/g, '\n')
+        .replace(/\\'/g, "'")
+        .replace(/\\"/g, '"')
+        .replace(/\\\\/g, '\\')
+        .trim();
+
+      const statusRaw = (payload.status || 'completed').toString().trim();
+      const status = statusRaw.toLowerCase();
+
+      let timestamp: number | null = null;
+      if (payload.timestamp != null) {
+        const num = Number(payload.timestamp);
+        if (!Number.isNaN(num)) timestamp = num;
+      }
+
+      return {
+        type: WebsocketMessageType.FINAL_RESULT_MESSAGE,
+        content,
+        status,
+        timestamp,
+        raw_data: rawData
+      };
+    } catch (e) {
+      console.error('parseFinalResultMessage failed:', e);
+      return null;
+    }
+  }
 
 
 }