working planpage components

Author: Fr4nc3

src/backend/app_kernel.py

@@ -772,6 +772,74 @@ async def get_agent_messages(session_id: str, request: Request) -> List[AgentMes
     return agent_messages
 
 
+@app.get("/api/agent_messages_by_plan/{plan_id}", response_model=List[AgentMessage])
+async def get_agent_messages_by_plan(
+    plan_id: str, request: Request
+) -> List[AgentMessage]:
+    """
+    Retrieve agent messages for a specific session.
+
+    ---
+    tags:
+      - Agent Messages
+    parameters:
+      - name: session_id
+        in: path
+        type: string
+        required: true
+        in: path
+        type: string
+        required: true
+        description: The ID of the session to retrieve agent messages for
+    responses:
+      200:
+        description: List of agent messages associated with the specified session
+        schema:
+          type: array
+          items:
+            type: object
+            properties:
+              id:
+                type: string
+                description: Unique ID of the agent message
+              session_id:
+                type: string
+                description: Session ID associated with the message
+              plan_id:
+                type: string
+                description: Plan ID related to the agent message
+              content:
+                type: string
+                description: Content of the message
+              source:
+                type: string
+                description: Source of the message (e.g., agent type)
+              timestamp:
+                type: string
+                format: date-time
+                description: Timestamp of the message
+              step_id:
+                type: string
+                description: Optional step ID associated with the message
+      400:
+        description: Missing or invalid user information
+      404:
+        description: Agent messages not found
+    """
+    authenticated_user = get_authenticated_user_details(request_headers=request.headers)
+    user_id = authenticated_user["user_principal_id"]
+    if not user_id:
+        track_event_if_configured(
+            "UserIdNotFound", {"status_code": 400, "detail": "no user"}
+        )
+        raise HTTPException(status_code=400, detail="no user")
+
+    # Initialize memory context
+    kernel, memory_store = await initialize_runtime_and_context("", user_id)
+    agent_messages = await memory_store.get_data_by_type_and_plan_id("agent_message")
+    return agent_messages
+
+
 @app.delete("/api/messages")
 async def delete_all_messages(request: Request) -> Dict[str, str]:
     """

src/backend/context/cosmos_memory_kernel.py

@@ -443,6 +443,27 @@ async def get_data_by_type(self, data_type: str) -> List[BaseDataModel]:
             logging.exception(f"Failed to query data by type from Cosmos DB: {e}")
             return []
 
+    async def get_data_by_type_and_plan_id(
+        self, data_type: str, plan_id: str
+    ) -> List[BaseDataModel]:
+        """Query the Cosmos DB for documents with the matching data_type, session_id and user_id."""
+        await self.ensure_initialized()
+        if self._container is None:
+            return []
+
+        model_class = self.MODEL_CLASS_MAPPING.get(data_type, BaseDataModel)
+        try:
+            query = "SELECT * FROM c WHERE c.user_id=@user_id AND c.data_type=@data_type AND c.plan_id=@plan_id ORDER BY c._ts ASC"
+            parameters = [
+                {"name": "@data_type", "value": data_type},
+                {"name": "@user_id", "value": self.user_id},
+                {"name": "@plan_id", "value": plan_id},
+            ]
+            return await self.query_items(query, parameters, model_class)
+        except Exception as e:
+            logging.exception(f"Failed to query data by type from Cosmos DB: {e}")
+            return []
+
     async def delete_item(self, item_id: str, partition_key: str) -> None:
         """Delete an item from Cosmos DB."""
         await self.ensure_initialized()

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

@@ -0,0 +1,11 @@
+import { PlanChatProps } from "@/models";
+
+const PlanChat: React.FC<PlanChatProps> = ({
+    PlanData,
+    OnChatSubmit
+}) => {
+
+    return (<>  </>);
+};
+
+export default PlanChat;

src/frontend_react/src/components/content/TaskDetails.tsx

@@ -14,10 +14,9 @@ import { TaskDetailsProps } from "../../models";
 import "../../styles/TaskDetails.css";
 
 const TaskDetails: React.FC<TaskDetailsProps> = ({
-    taskName,
-    subTasks,
-    agents,
-    humans,
+    PlanData,
+    OnApproveStep,
+    OnRejectStep
 
 }) => {
     const completedCount = subTasks.filter(t => t.status === 'completed').length;
@@ -26,7 +25,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         <div className="task-details-container">
             <div className="task-details-section">
                 <div className="task-details-progress-header">
-                    <Subtitle1>{taskName}</Subtitle1>
+                    <Subtitle1>{PlanData.plan.initial_goal}</Subtitle1>
                     <Text size={200}>
                         {completedCount} of {subTasks.length} completed
                     </Text>

src/frontend_react/src/models/plan.tsx

@@ -85,3 +85,19 @@ export interface PlanWithSteps extends Plan {
     /** Count of steps failed */
     failed: number;
 }
+
+
+/**
+ * Interface for processed plan data
+ */
+export interface ProcessedPlanData {
+    plan: PlanWithSteps;
+    agents: AgentType[];
+    steps: Step[];
+    hasHumanClarificationRequest: boolean;
+}
+
+export interface PlanChatProps {
+    PlanData: ProcessedPlanData;
+    OnChatSubmit: (message: string) => void;
+}

src/frontend_react/src/models/taskDetails.tsx

@@ -1,3 +1,5 @@
+import { ProcessedPlanData, Step } from "./plan";
+
 export interface SubTask {
     id: string;
     name: string;
@@ -19,10 +21,7 @@ export interface Human {
 }
 
 export interface TaskDetailsProps {
-    taskName: string;
-    subTasks: SubTask[];
-    agents: Agent[];
-    humans: Human[];
-    onAddAgent: () => void;
-    onAddHuman: () => void;
+    PlanData: ProcessedPlanData;
+    OnApproveStep: (step: Step) => void;
+    OnRejectStep: (step: Step) => void;
 }

src/frontend_react/src/pages/PlanPage.tsx

@@ -15,7 +15,8 @@ import {
     ErrorCircle24Regular,
     Person24Regular,
     CheckmarkCircle24Regular,
-    AlertUrgent24Regular
+    AlertUrgent24Regular,
+    Sparkle20Filled
 } from '@fluentui/react-icons';
 import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
@@ -29,6 +30,10 @@ import { PlanDataService, ProcessedPlanData } from '../services/PlanDataService'
 import { PlanWithSteps, Task, AgentType, Step } from '@/models';
 import { apiService } from '@/api';
 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';
 
 /**
  * Page component for displaying a specific plan
@@ -42,7 +47,17 @@ const PlanPage: React.FC = () => {
     const [planData, setPlanData] = useState<ProcessedPlanData | null>(null);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
+    const handleOnchatSubmit = useCallback(() => {
+        NewTaskService.handleNewTaskFromHome();
+    }, []);
 
+    const handleApproveStep = useCallback((step: Step) => {
+        NewTaskService.handleNewTaskFromHome();
+    }, []);
+
+    const handleRejectStep = useCallback((step: Step) => {
+        NewTaskService.handleNewTaskFromHome();
+    }, []);
     /**
      * Fetch plan data when component mounts or planId changes
      */
@@ -54,6 +69,7 @@ const PlanPage: React.FC = () => {
             setError(null);
 
             const data = await PlanDataService.fetchPlanData(planId);
+            console.log('Fetched plan data:', data);
             setPlanData(data);
         } catch (err) {
             console.error('Failed to load plan data:', err);
@@ -85,6 +101,19 @@ const PlanPage: React.FC = () => {
             <CoralShellRow>
                 <PlanPanelLeft onNewTaskButton={handleNewTaskButton} />
                 <Content>
+                    <ContentToolbar
+                        panelTitle={planData?.plan?.initial_goal || 'Plan Details'}
+                        panelIcon={<Sparkle20Filled />}
+                    ></ContentToolbar>
+                    <PlanChat
+                        PlanData={planData}
+                        OnChatSubmit={handleOnchatSubmit}
+                    />
+                    <TaskDetails
+                        PlanData={planData}
+                        OnApproveStep={handleApproveStep}
+                        OnRejectStep={handleRejectStep}
+                    />
 
                 </Content>
             </CoralShellRow>

src/frontend_react/src/services/PlanDataService.tsx

@@ -1,15 +1,6 @@
-import { PlanWithSteps, Step, AgentType } from '@/models';
+import { PlanWithSteps, Step, AgentType, ProcessedPlanData } 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