update plan clarification behavior

Author: Fr4nc3

src/frontend_react/src/api/apiService.tsx

@@ -323,18 +323,14 @@ export class APIService {
         sessionId: string,
         approved: boolean,
         stepId?: string,
-        humanFeedback?: string,
-        updatedAction?: string
     ): Promise<{ status: string }> {
         const response = await apiClient.post(
             API_ENDPOINTS.APPROVE_STEPS,
             {
                 step_id: stepId,
                 plan_id: planId,
                 session_id: sessionId,
-                approved,
-                human_feedback: humanFeedback,
-                updated_action: updatedAction
+                approved
             }
         );
 

src/frontend_react/src/components/content/PlanChat.tsx

@@ -24,8 +24,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
 
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const inputContainerRef = useRef<HTMLDivElement>(null);
-    const sendMessage = async () => {
-    };
+
     const scrollToBottom = () => {
     };
     const clearChat = async () => {
@@ -91,12 +90,12 @@ const PlanChat: React.FC<PlanChatProps> = ({
                     <ChatInput
                         value={input}
                         onChange={setInput}
-                        onEnter={sendMessage}
+                        onEnter={OnChatSubmit}
 
                     >
                         <Button
                             appearance="transparent"
-                            onClick={sendMessage}
+                            onClick={OnChatSubmit}
                             icon={<Send />}
                             disabled={planData.hasHumanClarificationRequest && (isTyping || !input.trim())}
                         />

src/frontend_react/src/pages/PlanPage.tsx

@@ -22,17 +22,11 @@ import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
 import CoralShellRow from '../coral/components/Layout/CoralShellRow';
 import Content from '../coral/components/Content/Content';
-import PanelLeft from '../coral/components/Panels/PanelLeft';
-import PanelLeftToolbar from '../coral/components/Panels/PanelLeftToolbar';
-import TaskList from '../components/content/TaskList';
 import { NewTaskService } from '../services/NewTaskService';
 import { PlanDataService } from '../services/PlanDataService';
-import { PlanWithSteps, Task, AgentType, Step, ProcessedPlanData } from '@/models';
-import { apiService } from '@/api';
+import { Step, ProcessedPlanData } from '@/models';
 import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 import ContentToolbar from '@/coral/components/Content/ContentToolbar';
-import Chat from '@/coral/modules/Chat';
-import TaskDetails from '@/components/content/TaskDetails';
 import PlanChat from '@/components/content/PlanChat';
 import PlanPanelRight from '@/components/content/PlanPanelRight';
 
@@ -48,17 +42,7 @@ const PlanPage: React.FC = () => {
     const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
-    const handleOnchatSubmit = useCallback(() => {
-        NewTaskService.handleNewTaskFromHome();
-    }, []);
 
-    const handleApproveStep = useCallback((step: Step) => {
-        console.log('Approving step:', step);
-    }, []);
-
-    const handleRejectStep = useCallback((step: Step) => {
-        console.log('Rejecting step:', step);
-    }, []);
     /**
      * Fetch plan data when component mounts or planId changes
      */
@@ -80,6 +64,43 @@ const PlanPage: React.FC = () => {
         }
     }, [planId]);
 
+    // Accept chat input and submit clarification
+    const handleOnchatSubmit = useCallback(
+        async (chatInput: string) => {
+            if (!planData?.plan) return;
+            try {
+                await PlanDataService.submitClarification(
+                    planData.plan.id, // plan_id
+                    planData.plan.session_id, // session_id
+                    chatInput // human_clarification
+                );
+                await loadPlanData();
+            } catch (error) {
+                console.error('Failed to submit clarification:', error);
+            }
+        },
+        [planData, loadPlanData]
+    );
+
+    // Move handlers here to fix dependency order
+    const handleApproveStep = useCallback(async (step: Step) => {
+        try {
+            await PlanDataService.approveStep(step);
+            await loadPlanData();
+        } catch (error) {
+            console.error('Failed to approve step:', error);
+        }
+    }, [loadPlanData]);
+
+    const handleRejectStep = useCallback(async (step: Step) => {
+        try {
+            await PlanDataService.rejectStep(step);
+            await loadPlanData();
+        } catch (error) {
+            console.error('Failed to reject step:', error);
+        }
+    }, [loadPlanData]);
+
     // Load plan data on mount and when planId changes
     useEffect(() => {
         loadPlanData();

src/frontend_react/src/services/PlanDataService.tsx

@@ -90,4 +90,43 @@ export class PlanDataService {    /**
     static getPlanCompletionPercentage(plan: PlanWithSteps): number {
         return apiService.getPlanCompletionPercentage(plan);
     }
+
+    /**
+     * Approve a plan step
+     * @param step Step to approve
+     * @returns Promise with API response
+     */
+    static async approveStep(step: Step): Promise<{ status: string }> {
+        return apiService.approveSteps(
+            step.plan_id,
+            step.session_id,
+            true, // approved
+            step.id
+        );
+    }
+
+    /**
+     * Reject a plan step
+     * @param step Step to reject
+     * @returns Promise with API response
+     */
+    static async rejectStep(step: Step): Promise<{ status: string }> {
+        return apiService.approveSteps(
+            step.plan_id,
+            step.session_id,
+            false, // not approved
+            step.id
+        );
+    }
+
+    /**
+     * Submit human clarification for a plan
+     * @param planId Plan ID
+     * @param sessionId Session ID
+     * @param clarification Clarification text
+     * @returns Promise with API response
+     */
+    static async submitClarification(planId: string, sessionId: string, clarification: string) {
+        return apiService.submitClarification(planId, sessionId, clarification);
+    }
 }