Refactor plan creation flow and update routes

Removed the '/plan/:planId/create' route and updated navigation to use '/plan/:planId' after plan creation. Made 'team_id' mandatory in InputTask, cleaned up code formatting, and clarified comments. This streamlines the plan creation process and ensures consistent routing and data requirements.

Author: Fr4nc3

src/frontend/src/App.tsx

@@ -8,7 +8,6 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/plan/:planId/create" element={<PlanCreatePage />} />
         <Route path="/plan/:planId" element={<PlanPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/frontend/src/api/apiService.tsx

@@ -127,7 +127,7 @@ export class APIService {
     async getPlans(sessionId?: string, useCache = true): Promise<PlanWithSteps[]> {
         const cacheKey = `plans_${sessionId || 'all'}`;
         const params = sessionId ? { session_id: sessionId } : {};
-
+        // TODO replace session for team_id 
         const fetcher = async () => {
             const data = await apiClient.get(API_ENDPOINTS.PLANS, { params });
             if (useCache) {

src/frontend/src/components/content/HomeInput.tsx

@@ -40,36 +40,36 @@ import { Send } from "@/coral/imports/bundleicons";
 
 // Icon mapping function to convert string icons to FluentUI icons
 const getIconFromString = (iconString: string | React.ReactNode): React.ReactNode => {
-  // If it's already a React node, return it
-  if (typeof iconString !== 'string') {
-    return iconString;
-  }
-  
-  const iconMap: Record<string, React.ReactNode> = {
-    // Task/Logo icons
-    'Wrench': <Wrench20Regular />,
-    'TestTube': <Clipboard20Regular />, // Fallback since TestTube20Regular doesn't exist
-    'Terminal': <WindowConsole20Regular />,
-    'MonitorCog': <Desktop20Regular />,
-    'BookMarked': <BookmarkMultiple20Regular />,
-    'Search': <Search20Regular />,
-    'Robot': <Person20Regular />, // Fallback since Robot20Regular doesn't exist
-    'Code': <Code20Regular />,
-    'Play': <Play20Regular />,
-    'Shield': <Shield20Regular />,
-    'Globe': <Globe20Regular />,
-    'Person': <Person20Regular />,
-    'Database': <Database20Regular />,
-    'Document': <Document20Regular />,
-    'Building': <Building20Regular />,
-    'Desktop': <Desktop20Regular />,
-    
-    // Default fallback
-    '📋': <Clipboard20Regular />,
-    'default': <Clipboard20Regular />,
-  };
-  
-  return iconMap[iconString] || iconMap['default'] || <Clipboard20Regular />;
+    // If it's already a React node, return it
+    if (typeof iconString !== 'string') {
+        return iconString;
+    }
+
+    const iconMap: Record<string, React.ReactNode> = {
+        // Task/Logo icons
+        'Wrench': <Wrench20Regular />,
+        'TestTube': <Clipboard20Regular />, // Fallback since TestTube20Regular doesn't exist
+        'Terminal': <WindowConsole20Regular />,
+        'MonitorCog': <Desktop20Regular />,
+        'BookMarked': <BookmarkMultiple20Regular />,
+        'Search': <Search20Regular />,
+        'Robot': <Person20Regular />, // Fallback since Robot20Regular doesn't exist
+        'Code': <Code20Regular />,
+        'Play': <Play20Regular />,
+        'Shield': <Shield20Regular />,
+        'Globe': <Globe20Regular />,
+        'Person': <Person20Regular />,
+        'Database': <Database20Regular />,
+        'Document': <Document20Regular />,
+        'Building': <Building20Regular />,
+        'Desktop': <Desktop20Regular />,
+
+        // Default fallback
+        '📋': <Clipboard20Regular />,
+        'default': <Clipboard20Regular />,
+    };
+
+    return iconMap[iconString] || iconMap['default'] || <Clipboard20Regular />;
 };
 
 const HomeInput: React.FC<HomeInputProps> = ({
@@ -114,7 +114,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
 
             try {
                 const response = await TaskService.createPlan(
-                    input.trim(), 
+                    input.trim(),
                     selectedTeam?.team_id
                 );
                 setInput("");
@@ -126,17 +126,17 @@ const HomeInput: React.FC<HomeInputProps> = ({
                 if (response.plan_id && response.plan_id !== null) {
                     showToast("Plan created!", "success");
                     dismissToast(id);
-                    
+
                     // Navigate to create page (no team ID in URL anymore)
                     console.log('HomeInput: Navigating to plan creation with team:', selectedTeam?.name);
-                    navigate(`/plan/${response.plan_id}/create`);
+                    navigate(`/plan/${response.plan_id}`);
                 } else {
                     showToast("Failed to create plan", "error");
                     dismissToast(id);
                 }
             } catch (error: any) {
                 dismissToast(id);
-                
+
                 // Check if this is an RAI validation error
                 let errorDetail = null;
                 try {
@@ -156,11 +156,11 @@ const HomeInput: React.FC<HomeInputProps> = ({
                     setRAIError(errorDetail);
                 } else {
                     // Handle other errors with toast messages
-                    const errorMessage = errorDetail?.description || 
-                                        errorDetail?.message || 
-                                        error?.response?.data?.message ||
-                                        error?.message || 
-                                        "Something went wrong";
+                    const errorMessage = errorDetail?.description ||
+                        errorDetail?.message ||
+                        error?.response?.data?.message ||
+                        error?.message ||
+                        "Something went wrong";
                     showToast(errorMessage, "error");
                 }
 
@@ -188,7 +188,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
     }, [input]);
 
     // Convert team starting_tasks to QuickTask format
-    const tasksToDisplay: QuickTask[] = selectedTeam && selectedTeam.starting_tasks ? 
+    const tasksToDisplay: QuickTask[] = selectedTeam && selectedTeam.starting_tasks ?
         selectedTeam.starting_tasks.map((task, index) => {
             // Handle both string tasks and StartingTask objects
             if (typeof task === 'string') {
@@ -273,17 +273,17 @@ const HomeInput: React.FC<HomeInputProps> = ({
                             </>
                         )}
                         {tasksToDisplay.length === 0 && selectedTeam && (
-                            <div style={{ 
-                                textAlign: 'center', 
+                            <div style={{
+                                textAlign: 'center',
                                 padding: '32px 16px',
                                 color: '#666'
                             }}>
                                 <Caption1>No starting tasks available for this team</Caption1>
                             </div>
                         )}
                         {!selectedTeam && (
-                            <div style={{ 
-                                textAlign: 'center', 
+                            <div style={{
+                                textAlign: 'center',
                                 padding: '32px 16px',
                                 color: '#666'
                             }}>

src/frontend/src/models/inputTask.tsx

@@ -6,8 +6,8 @@ export interface InputTask {
     session_id?: string;
     /** The task description or goal */
     description: string;
-    /** Optional team identifier to use for this plan */
-    team_id?: string;
+    /** MANDATORY team identifier to use for this plan */
+    team_id: string;
 }
 
 /**

src/frontend/src/pages/HomePage.tsx

@@ -111,15 +111,15 @@ const HomePage: React.FC = () => {
         try {
             const teams = await TeamService.getUserTeams();
             console.log('Teams refreshed after upload:', teams.length);
-            
+
             if (teams.length > 0) {
                 // Always keep "Business Operations Team" as default, even after new uploads
                 const businessOpsTeam = teams.find(team => team.name === "Business Operations Team");
                 const defaultTeam = businessOpsTeam || teams[0];
                 setSelectedTeam(defaultTeam);
                 console.log('Default team after upload:', defaultTeam.name);
                 console.log('Business Operations Team remains default');
-                
+
                 // Show a toast notification about the upload success
                 dispatchToast(
                     <Toast>
@@ -144,10 +144,10 @@ const HomePage: React.FC = () => {
         if (taskName.trim()) {
             try {
                 const response = await TaskService.createPlan(
-                    taskName.trim(), 
+                    taskName.trim(),
                     selectedTeam?.team_id
                 );
-                
+
                 if (response.plan_id && response.plan_id !== null) {
                     dispatchToast(
                         <Toast>
@@ -159,10 +159,10 @@ const HomePage: React.FC = () => {
                         </Toast>,
                         { intent: "success" }
                     );
-                    
+
                     // Navigate to create page (no team ID in URL anymore)
                     console.log('Navigating to plan creation with team:', selectedTeam?.name);
-                    navigate(`/plan/${response.plan_id}/create`);
+                    navigate(`/plan/${response.plan_id}`);
                 } else {
                     dispatchToast(
                         <Toast>
@@ -213,11 +213,11 @@ const HomePage: React.FC = () => {
                                 selectedTeam={selectedTeam}
                             />
                         ) : (
-                            <div style={{ 
-                                display: 'flex', 
-                                justifyContent: 'center', 
-                                alignItems: 'center', 
-                                height: '200px' 
+                            <div style={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: '200px'
                             }}>
                                 <Spinner label="Loading team configuration..." />
                             </div>

src/frontend/src/pages/PlanCreatePage.tsx

@@ -29,7 +29,6 @@ import { TeamService } from "../services/TeamService";
 
 /**
  * Page component for creating and viewing a plan being generated
- * Accessible via the route /plan/{plan_id}/create/{team_id?}
  */
 const PlanCreatePage: React.FC = () => {
     const { planId, teamId } = useParams<{ planId: string; teamId?: string }>();
@@ -81,7 +80,7 @@ const PlanCreatePage: React.FC = () => {
                 }
             }
         };
-        
+
         loadTeamData();
     }, [teamId]);
 
@@ -98,9 +97,9 @@ const PlanCreatePage: React.FC = () => {
         try {
             setLoading(true);
             setError(null);
-            
+
             let toastId = showToast("Generating plan steps...", "progress");
-            
+
             // Call the generate_plan endpoint using apiClient for proper authentication
             const result = await apiClient.post('/generate_plan', {
                 plan_id: planId
@@ -109,10 +108,10 @@ const PlanCreatePage: React.FC = () => {
             dismissToast(toastId);
             showToast("Plan generated successfully!", "success");
             setPlanGenerated(true);
-            
+
             // Now load the plan data to display it
             await loadPlanData(false);
-            
+
         } catch (err) {
             console.error("Failed to generate plan:", err);
             setError(
@@ -145,12 +144,12 @@ const PlanCreatePage: React.FC = () => {
                     plans.push(data);
                 }
                 setAllPlans(plans);
-                
+
                 // If plan has steps and we haven't generated yet, mark as generated
                 if (data.plan.steps && data.plan.steps.length > 0 && !planGenerated) {
                     setPlanGenerated(true);
                 }
-                
+
             } catch (err) {
                 console.log("Failed to load plan data:", err);
                 setError(
@@ -186,7 +185,7 @@ const PlanCreatePage: React.FC = () => {
                 await loadPlanData(false);
             } catch (error: any) {
                 dismissToast(id);
-                
+
                 // Check if this is an RAI validation error
                 let errorDetail = null;
                 try {
@@ -246,7 +245,7 @@ const PlanCreatePage: React.FC = () => {
             // Load the basic plan data first
             await loadPlanData(true);
         };
-        
+
         initializePage();
     }, []);
 
@@ -272,10 +271,10 @@ const PlanCreatePage: React.FC = () => {
     return (
         <CoralShellColumn>
             <CoralShellRow>
-                <PlanPanelLeft 
-                    onNewTaskButton={handleNewTaskButton} 
-                    reloadTasks={reloadLeftList} 
-                    restReload={()=>setReloadLeftList(false)}
+                <PlanPanelLeft
+                    onNewTaskButton={handleNewTaskButton}
+                    reloadTasks={reloadLeftList}
+                    restReload={() => setReloadLeftList(false)}
                     selectedTeam={selectedTeam}
                 />
 
@@ -300,7 +299,7 @@ const PlanCreatePage: React.FC = () => {
                                     />
                                 </PanelRightToggles>
                             </ContentToolbar>
-                            
+
                             {/* Show RAI error if present */}
                             {raiError && (
                                 <div style={{ padding: '16px 24px 0' }}>
@@ -313,7 +312,7 @@ const PlanCreatePage: React.FC = () => {
                                     />
                                 </div>
                             )}
-                            
+
                             <PlanChat
                                 planData={planData}
                                 OnChatSubmit={handleOnchatSubmit}