From 4448d5b00689f771adae2b7bdef08066b5a54a5d Mon Sep 17 00:00:00 2001 From: Viswamedha Nalabotu Date: Wed, 17 Dec 2025 15:05:30 +0000 Subject: [PATCH] Added typed record --- src/views/AgentDetail.vue | 80 ++++++++++----------- src/views/Agents.vue | 142 ++++++++++++++++++-------------------- 2 files changed, 102 insertions(+), 120 deletions(-) diff --git a/src/views/AgentDetail.vue b/src/views/AgentDetail.vue index f95c52c..7244406 100644 --- a/src/views/AgentDetail.vue +++ b/src/views/AgentDetail.vue @@ -16,16 +16,16 @@ import { useAgentStore } from '../stores/agentStore'; import { apiClient, isAxiosError } from '../lib/api'; const route = useRoute(); -console.log('[AgentDetail] Route params:', route.params); +console.log('Route params:', route.params); const agentStore = useAgentStore(); -console.log('[AgentDetail] Store instance:', agentStore); +console.log('Store instance:', agentStore); const agentId = route.params.id as string; -console.log('[AgentDetail] Agent ID:', agentId); +console.log('Agent ID:', agentId); if (!agentId) { - console.error('[AgentDetail] ERROR: No agent ID in route params'); + console.error('ERROR: No agent ID in route params'); } const agent = ref>({ @@ -35,21 +35,18 @@ const agent = ref>({ status: 'idle', }); -console.log('[AgentDetail] Initial agent state:', agent.value); +console.log('Initial agent state:', agent.value); const queryInput = ref(''); const isRunning = computed(() => { console.log( - '[AgentDetail] isRunning computed - executionStatus:', + 'isRunning computed - executionStatus:', agentStore.executionStatus ); return agentStore.executionStatus === 'running'; }); const isConnected = computed(() => { - console.log( - '[AgentDetail] isConnected computed - isConnected:', - agentStore.isConnected - ); + console.log('isConnected computed - isConnected:', agentStore.isConnected); return agentStore.isConnected ?? false; }); @@ -76,15 +73,17 @@ const statusColor = (status: string) => { }; const fetchAgent = async () => { - console.log('[AgentDetail] Fetching agent details for ID:', agentId); + console.log('Fetching agent details for ID:', agentId); try { - const response = await apiClient.get(`/api/agent/${agentId}/`); + const response = await apiClient.get>( + `/api/agent/${agentId}/` + ); agent.value = response.data; - console.log('[AgentDetail] Agent fetched successfully:', agent.value); + console.log('Agent fetched successfully:', agent.value); } catch (error) { - console.error('[AgentDetail] ERROR - Failed to fetch agent:', error); + console.error('ERROR - Failed to fetch agent:', error); if (isAxiosError(error)) { - console.error('[AgentDetail] Axios error details:', { + console.error('Axios error details:', { status: error.response?.status, data: error.response?.data, message: error.message, @@ -95,11 +94,11 @@ const fetchAgent = async () => { }; const startAgent = () => { - console.log('[AgentDetail] Starting agent execution'); + console.log('Starting agent execution'); if (!agentStore.isConnected) { - console.warn('[AgentDetail] WARNING: WebSocket not connected'); - console.log('[AgentDetail] Connection state:', { + console.warn('WARNING: WebSocket not connected'); + console.log('Connection state:', { isConnected: agentStore.isConnected, }); message.error('WebSocket not connected'); @@ -115,65 +114,56 @@ const startAgent = () => { const data = { query: queryInput.value.trim(), }; - console.log('[AgentDetail] Sending data:', data); + console.log('Sending data:', data); - console.log('[AgentDetail] Calling startAgent on store'); + console.log('Calling startAgent on store'); agentStore.startAgent(data); - console.log('[AgentDetail] Agent execution initiated'); + console.log('Agent execution initiated'); message.success('Agent execution started'); } catch (error) { - console.error('[AgentDetail] ERROR - Failed to start agent:', error); + console.error('ERROR - Failed to start agent:', error); message.error('Failed to start agent'); } }; const stopAgent = () => { - console.log('[AgentDetail] Stopping agent execution'); + console.log('Stopping agent execution'); try { - console.log('[AgentDetail] Calling stopAgent on store'); + console.log('Calling stopAgent on store'); agentStore.stopAgent(); - console.log('[AgentDetail] Agent stop signal sent'); + console.log('Agent stop signal sent'); message.success('Agent stop requested'); } catch (error) { - console.error('[AgentDetail] ERROR - Failed to stop agent:', error); + console.error('ERROR - Failed to stop agent:', error); } }; onMounted(() => { - console.log('[AgentDetail] Component mounted'); - console.log('[AgentDetail] Lifecycle: onMounted - starting initialization'); + console.log('Component mounted'); + console.log('Lifecycle: onMounted - starting initialization'); fetchAgent(); - console.log( - '[AgentDetail] Attempting WebSocket connection for agent:', - agentId - ); + console.log('Attempting WebSocket connection for agent:', agentId); try { agentStore.connect(agentId); - console.log('[AgentDetail] WebSocket connection initiated'); + console.log('WebSocket connection initiated'); } catch (error) { - console.error( - '[AgentDetail] ERROR - Failed to connect WebSocket:', - error - ); + console.error('ERROR - Failed to connect WebSocket:', error); } }); onUnmounted(() => { - console.log('[AgentDetail] Component unmounted'); - console.log('[AgentDetail] Lifecycle: onUnmounted - cleaning up'); + console.log('Component unmounted'); + console.log('Lifecycle: onUnmounted - cleaning up'); try { - console.log('[AgentDetail] Disconnecting WebSocket'); + console.log('Disconnecting WebSocket'); agentStore.disconnect(); - console.log('[AgentDetail] WebSocket disconnected successfully'); + console.log('WebSocket disconnected successfully'); } catch (error) { - console.error( - '[AgentDetail] ERROR - Failed to disconnect WebSocket:', - error - ); + console.error('ERROR - Failed to disconnect WebSocket:', error); } }); diff --git a/src/views/Agents.vue b/src/views/Agents.vue index a9e62e8..88a7b26 100644 --- a/src/views/Agents.vue +++ b/src/views/Agents.vue @@ -4,103 +4,95 @@ import { List, Typography, Button, Card, Spin, message } from 'ant-design-vue'; import { apiClient } from '../lib/api'; interface Agent { - uuid: string; - id: string; - name: string; - description: string; - status: string; + uuid: string; + id: string; + name: string; + description: string; + status: string; } const agents = ref([]); const loading = ref(false); +const loadError = ref(false); const fetchAgents = async () => { - loading.value = true; - try { - const response = await apiClient.get('/api/agent/'); - agents.value = response.data; - } catch (error) { - console.error('Failed to fetch agents:', error); - message.error('Failed to load agents'); - agents.value = [ - { - uuid: 'a1', - id: 'a1', - name: 'Onboarding Bot', - description: 'Guided tours', - status: 'idle', - }, - { - uuid: 'a2', - id: 'a2', - name: 'Docs Helper', - description: 'Knowledge base', - status: 'idle', - }, - { - uuid: 'a3', - id: 'a3', - name: 'QA Coach', - description: 'Assessment', - status: 'idle', - }, - ]; - } finally { - loading.value = false; - } + loading.value = true; + loadError.value = false; + try { + const response = await apiClient.get('/api/agent/'); + agents.value = Array.isArray(response.data) ? response.data : []; + } catch (error) { + console.error('Failed to fetch agents:', error); + message.error('Failed to load agents'); + agents.value = []; + loadError.value = true; + } finally { + loading.value = false; + } }; onMounted(() => { - fetchAgents(); + fetchAgents(); });