API call for plan page

Author: Fr4nc3

src/backend/context/cosmos_memory_kernel.py

@@ -231,6 +231,17 @@ async def get_plan_by_session(self, session_id: str) -> Optional[Plan]:
         plans = await self.query_items(query, parameters, Plan)
         return plans[0] if plans else None
 
+    async def get_plan_by_plan_id(self, plan_id: str) -> Optional[Plan]:
+        """Retrieve a plan associated with a session."""
+        query = "SELECT * FROM c WHERE c.id=@id AND c.user_id=@user_id AND c.data_type=@data_type"
+        parameters = [
+            {"name": "@id", "value": plan_id},
+            {"name": "@data_type", "value": "plan"},
+            {"name": "@user_id", "value": self.user_id},
+        ]
+        plans = await self.query_items(query, parameters, Plan)
+        return plans[0] if plans else None
+
     async def get_thread_by_session(self, session_id: str) -> Optional[Any]:
         """Retrieve a plan associated with a session."""
         query = "SELECT * FROM c WHERE c.session_id=@session_id AND c.user_id=@user_id AND c.data_type=@data_type"

src/frontend_react/src/api/apiService.tsx

@@ -131,6 +131,41 @@ export class APIService {
         return fetcher();
     }
 
+    /**
+     * Get a single plan by plan ID
+     * @param planId Plan ID to fetch
+     * @param useCache Whether to use cached data or force fresh fetch
+     * @returns Promise with the plan and its steps
+     */
+    async getPlanById(planId: string, useCache = true): Promise<PlanWithSteps> {
+        const cacheKey = `plan_by_id_${planId}`;
+        const params = { plan_id: planId };
+
+        const fetcher = async () => {
+            const data = await apiClient.get(API_ENDPOINTS.PLANS, { params });
+
+            // The API returns an array, but with plan_id filter it should have only one item
+            if (!data || data.length === 0) {
+                throw new Error(`Plan with ID ${planId} not found`);
+            }
+
+            const plan = data[0];
+            if (useCache) {
+                this._cache.set(cacheKey, plan, 30000); // Cache for 30 seconds
+            }
+            return plan;
+        };
+
+        if (useCache) {
+            const cachedPlan = this._cache.get<PlanWithSteps>(cacheKey);
+            if (cachedPlan) return cachedPlan;
+
+            return this._requestTracker.trackRequest(cacheKey, fetcher);
+        }
+
+        return fetcher();
+    }
+
     /**
      * Get a specific plan with its steps
      * @param sessionId Session ID

src/frontend_react/src/pages/PlanPage.tsx

@@ -6,12 +6,16 @@ import {
     Card,
     CardHeader,
     useToastController,
-    Spinner
+    Spinner,
+    Badge
 } from '@fluentui/react-components';
 import {
     Add20Regular,
     ArrowLeft24Regular,
-    ErrorCircle24Regular
+    ErrorCircle24Regular,
+    Person24Regular,
+    CheckmarkCircle24Regular,
+    AlertUrgent24Regular
 } from '@fluentui/react-icons';
 import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
@@ -21,7 +25,8 @@ 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 { PlanWithSteps, Task } from '@/models';
+import { PlanDataService, ProcessedPlanData } from '../services/PlanDataService';
+import { PlanWithSteps, Task, AgentType, Step } from '@/models';
 import { apiService } from '@/api';
 import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 
@@ -33,15 +38,40 @@ const PlanPage: React.FC = () => {
     const { planId } = useParams<{ planId: string }>();
     const navigate = useNavigate();
 
+    // State for plan data
+    const [planData, setPlanData] = useState<ProcessedPlanData | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<Error | null>(null);
 
+    /**
+     * Fetch plan data when component mounts or planId changes
+     */
+    const loadPlanData = useCallback(async () => {
+        if (!planId) return;
 
+        try {
+            setLoading(true);
+            setError(null);
+
+            const data = await PlanDataService.fetchPlanData(planId);
+            setPlanData(data);
+        } catch (err) {
+            console.error('Failed to load plan data:', err);
+            setError(err instanceof Error ? err : new Error('Failed to load plan data'));
+        } finally {
+            setLoading(false);
+        }
+    }, [planId]);
+
+    // Load plan data on mount and when planId changes
+    useEffect(() => {
+        loadPlanData();
+    }, [loadPlanData]);
 
     const handleNewTaskButton = () => {
         // Use NewTaskService to handle navigation to homepage and reset textarea
         NewTaskService.handleNewTaskFromPlan(navigate);
-    };
-
-    // Show error if no planId is provided
+    };    // Show error if no planId is provided
     if (!planId) {
         return (
             <div style={{ padding: '20px' }}>
@@ -50,20 +80,18 @@ const PlanPage: React.FC = () => {
         );
     }
 
-
     return (
         <CoralShellColumn>
             <CoralShellRow>
-                <PlanPanelLeft
-                    onNewTaskButton={handleNewTaskButton}
-                />
+                <PlanPanelLeft onNewTaskButton={handleNewTaskButton} />
                 <Content>
 
                 </Content>
-
             </CoralShellRow>
         </CoralShellColumn>
     );
+
+
 };
 
 export default PlanPage;

src/frontend_react/src/services/PlanDataService.tsx

@@ -0,0 +1,101 @@
+import { PlanWithSteps, Step, AgentType } from '@/models';
+import { apiService } from '@/api';
+
+/**
+ * Interface for processed plan data
+ */
+export interface ProcessedPlanData {
+    plan: PlanWithSteps;
+    agents: AgentType[];
+    steps: Step[];
+    hasHumanClarificationRequest: boolean;
+}
+
+/**
+ * Service for processing and managing plan data operations
+ */
+export class PlanDataService {    /**
+     * Fetch plan details by plan ID and process the data
+     * @param planId Plan ID to fetch
+     * @returns Promise with processed plan data
+     */
+    static async fetchPlanData(planId: string): Promise<ProcessedPlanData> {
+        try {
+            // Use optimized getPlanById method for better performance
+            const plan = await apiService.getPlanById(planId);
+            return this.processPlanData(plan);
+        } catch (error) {
+            console.error('Failed to fetch plan data:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Process plan data to extract agents, steps, and clarification status
+     * @param plan PlanWithSteps object to process
+     * @returns Processed plan data
+     */
+    static processPlanData(plan: PlanWithSteps): ProcessedPlanData {
+        // Extract unique agents from steps
+        const uniqueAgents = new Set<AgentType>();
+        plan.steps.forEach(step => {
+            if (step.agent) {
+                uniqueAgents.add(step.agent);
+            }
+        });
+
+        // Convert Set to Array for easier handling
+        const agents = Array.from(uniqueAgents);
+
+        // Get all steps
+        const steps = plan.steps;
+
+        // Check if human_clarification_request is not null
+        const hasHumanClarificationRequest = plan.human_clarification_request != null &&
+            plan.human_clarification_request.trim().length > 0;
+
+        return {
+            plan,
+            agents,
+            steps,
+            hasHumanClarificationRequest
+        };
+    }
+
+    /**
+     * Get steps for a specific agent type
+     * @param plan Plan with steps
+     * @param agentType Agent type to filter by
+     * @returns Array of steps for the specified agent
+     */
+    static getStepsForAgent(plan: PlanWithSteps, agentType: AgentType): Step[] {
+        return apiService.getStepsForAgent(plan, agentType);
+    }
+
+    /**
+     * Get steps that are awaiting human feedback
+     * @param plan Plan with steps
+     * @returns Array of steps awaiting feedback
+     */
+    static getStepsAwaitingFeedback(plan: PlanWithSteps): Step[] {
+        return apiService.getStepsAwaitingFeedback(plan);
+    }
+
+    /**
+     * Check if plan is complete
+     * @param plan Plan with steps
+     * @returns Boolean indicating if plan is complete
+     */
+    static isPlanComplete(plan: PlanWithSteps): boolean {
+        return apiService.isPlanComplete(plan);
+    }
+
+    /**
+     * Get plan completion percentage
+     * @param plan Plan with steps
+     * @returns Completion percentage (0-100)
+     */
+    static getPlanCompletionPercentage(plan: PlanWithSteps): number {
+        return apiService.getPlanCompletionPercentage(plan);
+    }
+}