Refactor team selection display logic

Moved team selection UI logic from PlanPanelLeft to conditionally render TeamSelector on the home page and TeamSelected elsewhere. Updated TeamSelected to use local styles and removed unused props. Cleaned up fallback team selection logic in HomePage.

Author: Fr4nc3

src/frontend/src/components/common/TeamSelected.tsx

@@ -1,19 +1,18 @@
 import { TeamConfig } from "@/models";
 import { Body1, Caption1 } from "@fluentui/react-components";
-
+import styles from '../../styles/TeamSelector.module.css';
 export interface TeamSelectedProps {
     selectedTeam?: TeamConfig | null;
-    styles: { [key: string]: string };
 }
 
-const TeamSelected: React.FC<TeamSelectedProps> = ({ selectedTeam, styles }) => {
+const TeamSelected: React.FC<TeamSelectedProps> = ({ selectedTeam }) => {
     return (
         <div className={styles.teamSelectorContent}>
             <Caption1 className={styles.currentTeamLabel}>
                 Current Team
             </Caption1>
             <Body1 className={styles.currentTeamName}>
-                {selectedTeam ? selectedTeam.name : 'No team selected'}
+                {"     "}  {selectedTeam ? selectedTeam.name : 'No team selected'}
             </Body1>
         </div>
     );

src/frontend/src/components/content/PlanPanelLeft.tsx

@@ -30,6 +30,8 @@ import PanelUserCard from "../../coral/components/Panels/UserCard";
 import { getUserInfoGlobal } from "@/api/config";
 import TeamSelector from "../common/TeamSelector";
 import { TeamConfig } from "../../models/Team";
+import TeamSelected from "../common/TeamSelected";
+import TeamService from "@/services/TeamService";
 
 const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
   reloadTasks,
@@ -172,13 +174,23 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
         </PanelLeftToolbar>
 
         {/* Team Selector right under the toolbar */}
+
         <div style={{ marginTop: '8px', marginBottom: '8px' }}>
-          <TeamSelector
-            onTeamSelect={handleTeamSelect}
-            onTeamUpload={onTeamUpload}
-            selectedTeam={selectedTeam}
-            isHomePage={isHomePage}
-          />
+          {isHomePage && (
+            <TeamSelector
+              onTeamSelect={handleTeamSelect}
+              onTeamUpload={onTeamUpload}
+              selectedTeam={selectedTeam}
+              isHomePage={isHomePage}
+            />
+          )}
+
+          {!isHomePage && (
+            <TeamSelected
+              selectedTeam={TeamService.getStoredTeam()}
+            />
+          )}
+
         </div>
         <div
           className="tab tab-new-task"

src/frontend/src/pages/HomePage.tsx

@@ -155,20 +155,6 @@ const HomePage: React.FC = () => {
                             `${initializedTeam.name} team initialized successfully with ${initializedTeam.agents?.length || 0} agents`,
                             "success"
                         );
-                    } else {
-                        // Fallback: if we can't find the specific team, use HR team or first available
-                        console.log('Specific team not found, using default selection logic');
-                        const hrTeam = teams.find(team => team.name === "Human Resources Team");
-                        const defaultTeam = hrTeam || teams[0];
-
-                        if (defaultTeam) {
-                            setSelectedTeam(defaultTeam);
-                            TeamService.storageTeam(defaultTeam);
-                            showToast(
-                                `${defaultTeam.name} team loaded as default`,
-                                "success"
-                            );
-                        }
                     }
 
                 } else {