feat: implement team selection API and frontend integration

- Add POST /api/v3/select_team endpoint with TeamSelectionRequest model

Author: blessing-sanusi

src/backend/v3/api/router.py

@@ -2,6 +2,8 @@
 import logging
 import json
 from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Request
+from typing import Optional
+from pydantic import BaseModel
 
 from auth.auth_utils import get_authenticated_user_details
 from common.models.messages_kernel import (
@@ -24,6 +26,13 @@
 from v3.models.orchestration_models import AgentType
 from common.config.app_config import config
 
+
+class TeamSelectionRequest(BaseModel):
+    """Request model for team selection."""
+    team_id: str
+    session_id: Optional[str] = None
+
+
 app_v3 = APIRouter(
     prefix="/api/v3",
     responses={404: {"description": "Not found"}},
@@ -597,6 +606,126 @@ async def get_model_deployments_endpoint(request: Request):
         raise HTTPException(status_code=500, detail="Internal server error occurred")
 
 
+@app_v3.post("/select_team")
+async def select_team_endpoint(selection: TeamSelectionRequest, request: Request):
+    """
+    Update team selection for a plan or session.
+    
+    Used when users change teams on the plan page.
+
+    ---
+    tags:
+      - Team Selection
+    parameters:
+      - name: user_principal_id
+        in: header
+        type: string
+        required: true
+        description: User ID extracted from the authentication header
+      - name: body
+        in: body
+        required: true
+        schema:
+          type: object
+          properties:
+            team_id:
+              type: string
+              description: The ID of the team to select
+            session_id:
+              type: string
+              description: Optional session ID to associate with the team selection
+    responses:
+      200:
+        description: Team selection updated successfully
+        schema:
+          type: object
+          properties:
+            status:
+              type: string
+            message:
+              type: string
+            team_id:
+              type: string
+            team_name:
+              type: string
+            session_id:
+              type: string
+      400:
+        description: Invalid request
+      401:
+        description: Missing or invalid user information
+      404:
+        description: Team configuration not found
+    """
+    # Validate user authentication
+    authenticated_user = get_authenticated_user_details(request_headers=request.headers)
+    user_id = authenticated_user["user_principal_id"]
+    if not user_id:
+        raise HTTPException(
+            status_code=401, detail="Missing or invalid user information"
+        )
+
+    if not selection.team_id:
+        raise HTTPException(status_code=400, detail="Team ID is required")
+
+    try:
+        # Initialize memory store and service
+        memory_store = await DatabaseFactory.get_database(user_id=user_id)
+        team_service = TeamService(memory_store)
+
+        # Verify the team exists and user has access to it
+        team_config = await team_service.get_team_configuration(selection.team_id, user_id)
+        if team_config is None:
+            raise HTTPException(
+                status_code=404, 
+                detail=f"Team configuration '{selection.team_id}' not found or access denied"
+            )
+
+        # Generate session ID if not provided
+        session_id = selection.session_id or str(uuid.uuid4())
+
+        # Here you could store the team selection in user preferences, session data, etc.
+        # For now, we'll just validate and return the selection
+        
+        # Track the team selection event
+        track_event_if_configured(
+            "Team selected",
+            {
+                "status": "success",
+                "team_id": selection.team_id,
+                "team_name": team_config.name,
+                "user_id": user_id,
+                "session_id": session_id,
+            },
+        )
+
+        return {
+            "status": "success",
+            "message": f"Team '{team_config.name}' selected successfully",
+            "team_id": selection.team_id,
+            "team_name": team_config.name,
+            "session_id": session_id,
+            "agents_count": len(team_config.agents),
+            "team_description": team_config.description,
+        }
+
+    except HTTPException:
+        # Re-raise HTTP exceptions
+        raise
+    except Exception as e:
+        logging.error(f"Error selecting team: {str(e)}")
+        track_event_if_configured(
+            "Team selection error",
+            {
+                "status": "error",
+                "team_id": selection.team_id,
+                "user_id": user_id,
+                "error": str(e),
+            },
+        )
+        raise HTTPException(status_code=500, detail="Internal server error occurred")
+
+
 @app_v3.get("/search_indexes")
 async def get_search_indexes_endpoint(request: Request):
     """

src/frontend/src/components/common/TeamSelector.tsx

@@ -74,12 +74,14 @@ interface TeamSelectorProps {
   onTeamSelect?: (team: TeamConfig | null) => void;
   onTeamUpload?: () => Promise<void>;
   selectedTeam?: TeamConfig | null;
+  sessionId?: string; // Optional session ID for team selection
 }
 
 const TeamSelector: React.FC<TeamSelectorProps> = ({
   onTeamSelect,
   onTeamUpload,
   selectedTeam,
+  sessionId,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [teams, setTeams] = useState<TeamConfig[]>([]);
@@ -93,6 +95,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
   const [teamToDelete, setTeamToDelete] = useState<TeamConfig | null>(null);
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [activeTab, setActiveTab] = useState<string>('teams');
+  const [selectionLoading, setSelectionLoading] = useState(false);
 
   const loadTeams = async () => {
     setLoading(true);
@@ -124,11 +127,31 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
     }
   };
 
-  const handleContinue = () => {
-    if (tempSelectedTeam) {
-      onTeamSelect?.(tempSelectedTeam);
+  const handleContinue = async () => {
+    if (!tempSelectedTeam) return;
+
+    setSelectionLoading(true);
+    setError(null);
+
+    try {
+      // Call the backend API to select the team
+      const result = await TeamService.selectTeam(tempSelectedTeam.team_id, sessionId);
+      
+      if (result.success) {
+        // Successfully selected team on backend
+        console.log('Team selected:', result.data);
+        onTeamSelect?.(tempSelectedTeam);
+        setIsOpen(false);
+      } else {
+        // Handle selection error
+        setError(result.error || 'Failed to select team');
+      }
+    } catch (err: any) {
+      console.error('Error selecting team:', err);
+      setError('Failed to select team. Please try again.');
+    } finally {
+      setSelectionLoading(false);
     }
-    setIsOpen(false);
   };
 
   const handleCancel = () => {
@@ -624,10 +647,10 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
             <Button 
               appearance="primary" 
               onClick={handleContinue}
-              disabled={!tempSelectedTeam}
+              disabled={!tempSelectedTeam || selectionLoading}
               className={styles.continueButton}
             >
-              Continue
+              {selectionLoading ? 'Selecting...' : 'Continue'}
             </Button>
           </DialogActions>
         </DialogSurface>

src/frontend/src/hooks/useTeamSelection.tsx

@@ -0,0 +1,94 @@
+import { useState, useCallback } from 'react';
+import { TeamConfig } from '../models/Team';
+import { TeamService } from '../services/TeamService';
+
+interface UseTeamSelectionProps {
+  sessionId?: string;
+  onTeamSelected?: (team: TeamConfig, result: any) => void;
+  onError?: (error: string) => void;
+}
+
+interface UseTeamSelectionReturn {
+  selectedTeam: TeamConfig | null;
+  isLoading: boolean;
+  error: string | null;
+  selectTeam: (team: TeamConfig) => Promise<boolean>;
+  clearSelection: () => void;
+  clearError: () => void;
+}
+
+/**
+ * React hook for managing team selection with backend integration
+ */
+export const useTeamSelection = ({
+  sessionId,
+  onTeamSelected,
+  onError,
+}: UseTeamSelectionProps = {}): UseTeamSelectionReturn => {
+  const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const selectTeam = useCallback(async (team: TeamConfig): Promise<boolean> => {
+    if (isLoading) return false;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      console.log('Selecting team:', team.name, 'with session ID:', sessionId);
+      
+      const result = await TeamService.selectTeam(team.team_id, sessionId);
+      
+      if (result.success) {
+        setSelectedTeam(team);
+        console.log('Team selection successful:', result.data);
+        
+        // Call success callback
+        onTeamSelected?.(team, result.data);
+        
+        return true;
+      } else {
+        const errorMessage = result.error || 'Failed to select team';
+        setError(errorMessage);
+        
+        // Call error callback
+        onError?.(errorMessage);
+        
+        return false;
+      }
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to select team';
+      setError(errorMessage);
+      
+      console.error('Team selection error:', err);
+      
+      // Call error callback
+      onError?.(errorMessage);
+      
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isLoading, sessionId, onTeamSelected, onError]);
+
+  const clearSelection = useCallback(() => {
+    setSelectedTeam(null);
+    setError(null);
+  }, []);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    selectedTeam,
+    isLoading,
+    error,
+    selectTeam,
+    clearSelection,
+    clearError,
+  };
+};
+
+export default useTeamSelection;

src/frontend/src/services/TeamService.tsx

@@ -127,6 +127,40 @@ export class TeamService {
         }
     }
 
+    /**
+     * Select a team for a plan/session
+     */
+    static async selectTeam(teamId: string, sessionId?: string): Promise<{
+        success: boolean;
+        data?: any;
+        error?: string;
+    }> {
+        try {
+            const response = await apiClient.post('/v3/select_team', {
+                team_id: teamId,
+                session_id: sessionId
+            });
+
+            return {
+                success: true,
+                data: response
+            };
+        } catch (error: any) {
+            let errorMessage = 'Failed to select team';
+            
+            if (error.response?.data?.detail) {
+                errorMessage = error.response.data.detail;
+            } else if (error.message) {
+                errorMessage = error.message;
+            }
+
+            return {
+                success: false,
+                error: errorMessage
+            };
+        }
+    }
+
     /**
      * Validate a team configuration JSON structure
      */