add new details components and using coral layout

Author: Fr4nc3

src/frontend_react/src/components/AppProvider.tsx

@@ -9,39 +9,14 @@ interface AppProviderProps {
 }
 
 // Create a custom theme with brand colors for your application
-const myTheme: ITheme = createTheme({
-    palette: {
-        themePrimary: '#643A61',
-        themeLighterAlt: '#F2B8FF',
-        themeLighter: '#CE85DA',
-        themeLight: '#B26BB1',
-        themeTertiary: '#9F5E9D',
-        themeSecondary: '#8B5189',
-        themeDarkAlt: '#774575',
-        themeDark: '#643A61',
-        themeDarker: '#512F4E',
-        neutralLighterAlt: '#faf9f8',
-        neutralLighter: '#f3f2f1',
-        neutralLight: '#edebe9',
-        neutralQuaternaryAlt: '#e1dfdd',
-        neutralQuaternary: '#d0d0d0',
-        neutralTertiaryAlt: '#c8c6c4',
-        neutralTertiary: '#a19f9d',
-        neutralSecondary: '#605e5c',
-        neutralPrimaryAlt: '#3b3a39',
-        neutralPrimary: '#323130',
-        neutralDark: '#201f1e',
-        black: '#000000',
-        white: '#ffffff',
-    }
-});
+
 
 /**
  * Provider component to initialize the Fluent UI theme provider
  */
 const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
     return (
-        <ThemeProvider theme={myTheme}>
+        <ThemeProvider>
             {children}
         </ThemeProvider>
     );

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

@@ -0,0 +1,82 @@
+import {
+    Body1,
+    Button,
+    Card,
+    Checkbox,
+    Divider,
+    Persona,
+    Text,
+    Subtitle1,
+} from "@fluentui/react-components";
+import { Add20Regular } from "@fluentui/react-icons";
+import React from "react";
+import { TaskDetailsProps } from "../../models";
+import "../../styles/TaskDetails.css";
+
+const TaskDetails: React.FC<TaskDetailsProps> = ({
+    taskName,
+    subTasks,
+    agents,
+    humans,
+
+}) => {
+    const completedCount = subTasks.filter(t => t.status === 'completed').length;
+
+    return (
+        <div className="task-details-container">
+            <div className="task-details-section">
+                <div className="task-details-progress-header">
+                    <Subtitle1>{taskName}</Subtitle1>
+                    <Text size={200}>
+                        {completedCount} of {subTasks.length} completed
+                    </Text>
+                </div>
+                <div className="task-details-subtask-list">
+                    {subTasks.map((subtask) => (
+                        <Checkbox
+                            key={subtask.id}
+                            checked={subtask.status === 'completed'}
+                            disabled
+                            label={subtask.name}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <Divider />
+
+            <div className="task-details-section">
+                <Subtitle1>Agents</Subtitle1>
+                {agents.map((agent) => (
+                    <Card key={agent.id} className="task-details-agent-card">
+                        <Persona
+                            name={agent.name}
+                            secondaryText={agent.description}
+                            avatar={{ image: { src: agent.avatarUrl } }}
+                            presence={{ status: "available" }}
+                        />
+                    </Card>
+                ))}
+
+            </div>
+
+            <Divider />
+
+            <div className="task-details-section">
+                <Subtitle1>Humans</Subtitle1>
+                {humans.map((human) => (
+                    <Card key={human.id} className="task-details-agent-card">
+                        <Persona
+                            name={human.name}
+                            secondaryText={human.email}
+                            avatar={{ image: { src: human.avatarUrl } }}
+                            presence={{ status: "available" }}
+                        />
+                    </Card>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default TaskDetails; 

src/frontend_react/src/models/index.tsx

@@ -10,5 +10,6 @@ export * from './plan';
 export * from './messages';
 export * from './inputTask';
 export * from './agentMessage';
+export * from './taskDetails';
 
 // Add other model exports as needed

src/frontend_react/src/models/taskDetails.tsx

@@ -0,0 +1,28 @@
+export interface SubTask {
+    id: string;
+    name: string;
+    status: 'completed' | 'working' | 'removed';
+}
+
+export interface Agent {
+    id: string;
+    name: string;
+    description: string;
+    avatarUrl?: string;
+}
+
+export interface Human {
+    id: string;
+    name: string;
+    email: string;
+    avatarUrl?: string;
+}
+
+export interface TaskDetailsProps {
+    taskName: string;
+    subTasks: SubTask[];
+    agents: Agent[];
+    humans: Human[];
+    onAddAgent: () => void;
+    onAddHuman: () => void;
+}

src/frontend_react/src/pages/HomePage.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+    Button,
+    Text,
+    Card,
+    CardHeader
+} from '@fluentui/react-components';
+import {
+    ArrowLeft24Regular,
+    ErrorCircle24Regular
+} from '@fluentui/react-icons';
+import PlanView from '../components/PlanView';
+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';
+
+/**
+ * Page component for displaying a specific plan
+ * Accessible via the route /plan/{plan_id}
+ */
+const HomePage: React.FC = () => {
+    const { planId } = useParams<{ planId: string }>();
+    const navigate = useNavigate();
+
+    // Handle back navigation
+    const handleBackClick = () => {
+        navigate(-1);
+    };
+
+    // Show error if no planId is provided
+
+
+    return (
+        <CoralShellColumn>
+            <CoralShellRow>
+                <Content>
+
+                </Content>
+
+            </CoralShellRow>
+        </CoralShellColumn>
+    );
+};
+
+export default HomePage;

src/frontend_react/src/pages/PlanPage.tsx

@@ -12,6 +12,9 @@ import {
 } from '@fluentui/react-icons';
 import PlanView from '../components/PlanView';
 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';
 
 /**
  * Page component for displaying a specific plan
@@ -27,51 +30,17 @@ const PlanPage: React.FC = () => {
     };
 
     // Show error if no planId is provided
-    if (!planId) {
-        return (
-            <div className="plan-page-container">
-                <div className="plan-page-error">
-                    <Card>
-                        <CardHeader
-                            header={
-                                <div className="error-header">
-                                    <ErrorCircle24Regular />
-                                    <Text weight="semibold">Invalid Plan ID</Text>
-                                </div>
-                            }
-                        />
-                        <div className="card-content">
-                            <Text>No plan ID was provided in the URL. Please check the URL and try again.</Text>
-                        </div>
-                    </Card>
-                </div>
-            </div>
-        );
-    }
+
 
     return (
-        <div className="plan-page-container">
-            <div className="plan-page-header">
-                <Button
-                    className="back-button"
-                    appearance="subtle"
-                    icon={<ArrowLeft24Regular />}
-                    onClick={handleBackClick}
-                >
-                    Back
-                </Button>
-                <Text className="page-title" size={800} weight="bold">
-                    Plan Details
-                </Text>
-            </div>
+        <CoralShellColumn>
+            <CoralShellRow>
+                <Content>
+
+                </Content>
 
-            <div className="plan-page-content">
-                <PlanView
-                    sessionId="default" // TODO: Get from context/state management
-                    planId={planId}
-                />
-            </div>
-        </div>
+            </CoralShellRow>
+        </CoralShellColumn>
     );
 };
 

src/frontend_react/src/styles/TaskDetails.css

@@ -0,0 +1,44 @@
+/* TaskDetails.css */
+.task-details-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fafafa; /* tokens.colorNeutralBackground1 equivalent */
+  overflow: auto;
+}
+
+.task-details-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.task-details-progress-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.task-details-subtask-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-details-agent-card {
+  cursor: default;
+  padding: 12px;
+}
+
+.task-details-add-button {
+  align-self: flex-start;
+}
+
+.task-details-section-title {
+  font-weight: 600; /* tokens.fontWeightSemibold equivalent */
+}
+
+.task-details-task-title {
+  font-weight: 600; /* tokens.fontWeightSemibold equivalent */
+}