/** * SAAP API Composable - Backend Integration * Centralized API service for SAAP FastAPI Backend */ import { ref, reactive } from 'vue' import axios, { type AxiosResponse, type AxiosError } from 'axios' // Types interface SaapAgent { id: string name: string type: 'coordinator' | 'developer' | 'specialist' | 'analyst' color?: string avatar?: string description: string status: 'active' | 'inactive' | 'starting' | 'error' capabilities?: string[] personality?: { system_prompt?: string communication_style?: string } llm_config?: { model?: string temperature?: number max_tokens?: number } metrics?: { messages_processed?: number average_response_time?: number last_active?: string uptime?: string error_rate?: number } created_at?: string updated_at?: string tags?: string[] } interface ChatMessage { agent_id: string agent_name?: string user_message: string agent_response: string response_time?: number timestamp: string model?: string } interface SystemStatus { system: string status: string agents: { total: number active: number inactive: number } active_agents: Array<{ id: string name: string type: string }> timestamp: string } // API Configuration const API_BASE_URL = 'http://localhost:8000' const api = axios.create({ baseURL: API_BASE_URL, timeout: 30000, headers: { 'Content-Type': 'application/json', }, }) // Request/Response interceptors api.interceptors.request.use( (config) => { console.log(`🌐 API Request: ${config.method?.toUpperCase()} ${config.url}`) return config }, (error) => { console.error('🔥 API Request Error:', error) return Promise.reject(error) } ) api.interceptors.response.use( (response) => { console.log(`✅ API Response: ${response.config.url} (${response.status})`) return response }, (error: AxiosError) => { console.error(`❌ API Error: ${error.config?.url}`, error.response?.data) return Promise.reject(error) } ) export const useApi = () => { const loading = ref(false) const error = ref(null) // Helper function to handle API calls const handleApiCall = async ( apiCall: () => Promise>, loadingState: boolean = true ): Promise => { try { if (loadingState) loading.value = true error.value = null const response = await apiCall() return response.data } catch (err: any) { const errorMessage = err.response?.data?.detail || err.message || 'API Error' error.value = errorMessage console.error('API Error:', errorMessage) return null } finally { if (loadingState) loading.value = false } } // ===================================================== // SYSTEM STATUS API // ===================================================== const getSystemStatus = async (): Promise => { return handleApiCall(async () => { return await api.get('/api/v1/health') }) } const getRootStatus = async () => { return handleApiCall(async () => { return await api.get('/') }) } // ===================================================== // AGENT MANAGEMENT API // ===================================================== const getAgents = async (): Promise => { return handleApiCall(async () => { return await api.get('/api/v1/agents') }) } const getAgent = async (agentId: string): Promise => { return handleApiCall(async () => { return await api.get(`/api/v1/agents/${agentId}`) }) } const createAgent = async (agentData: Partial): Promise => { return handleApiCall(async () => { return await api.post('/api/v1/agents', agentData) }) } const updateAgent = async (agentId: string, agentData: Partial): Promise => { return handleApiCall(async () => { return await api.put(`/api/v1/agents/${agentId}`, agentData) }) } const deleteAgent = async (agentId: string): Promise => { return handleApiCall(async () => { return await api.delete(`/api/v1/agents/${agentId}`) }) } // ===================================================== // AGENT LIFECYCLE API // ===================================================== const startAgent = async (agentId: string): Promise => { return handleApiCall(async () => { return await api.post(`/api/v1/agents/${agentId}/start`) }) } const stopAgent = async (agentId: string): Promise => { return handleApiCall(async () => { return await api.post(`/api/v1/agents/${agentId}/stop`) }) } // ===================================================== // AGENT COMMUNICATION API // ===================================================== const chatWithAgent = async (agentId: string, message: string): Promise => { return handleApiCall(async () => { return await api.post(`/api/v1/agents/${agentId}/chat`, { message: message }) }) } // ===================================================== // AGENT TEMPLATES API // ===================================================== const getAgentTemplates = async (): Promise => { return handleApiCall(async () => { return await api.get('/api/v1/templates/agents') }) } const createAgentFromTemplate = async (templateName: string): Promise => { return handleApiCall(async () => { return await api.post(`/api/v1/templates/agents/${templateName}`) }) } // ===================================================== // HEALTH & TESTING // ===================================================== const testConnection = async (): Promise => { try { loading.value = true const response = await api.get('/api/v1/health', { timeout: 5000 }) return response.status === 200 } catch (err) { console.error('❌ Backend connection failed:', err) return false } finally { loading.value = false } } return { // State loading, error, // System getSystemStatus, getRootStatus, testConnection, // Agent Management getAgents, getAgent, createAgent, updateAgent, deleteAgent, // Agent Lifecycle startAgent, stopAgent, // Communication chatWithAgent, // Templates getAgentTemplates, createAgentFromTemplate, // Configuration API_BASE_URL, } } // Export types for use in components export type { SaapAgent, ChatMessage, SystemStatus }