fishy/Dynavera
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added typed record

Browse source
This commit is contained in:
Viswamedha Nalabotu 2025-12-17 15:05:30 +00:00
parent a5f039d021
commit 4448d5b006
2 changed files with 102 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/views/AgentDetail.vue
View file

@ -16,16 +16,16 @@ import { useAgentStore } from '../stores/agentStore';
import { apiClient, isAxiosError } from '../lib/api'; import { apiClient, isAxiosError } from '../lib/api';
const route = useRoute(); const route = useRoute();
console.log('[AgentDetail] Route params:', route.params); console.log('Route params:', route.params);
const agentStore = useAgentStore(); const agentStore = useAgentStore();
console.log('[AgentDetail] Store instance:', agentStore); console.log('Store instance:', agentStore);
const agentId = route.params.id as string; const agentId = route.params.id as string;
console.log('[AgentDetail] Agent ID:', agentId); console.log('Agent ID:', agentId);
if (!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<Record<string, unknown>>({ const agent = ref<Record<string, unknown>>({
@ -35,21 +35,18 @@ const agent = ref<Record<string, unknown>>({
status: 'idle', status: 'idle',
}); });
console.log('[AgentDetail] Initial agent state:', agent.value); console.log('Initial agent state:', agent.value);
const queryInput = ref(''); const queryInput = ref('');
const isRunning = computed(() => { const isRunning = computed(() => {
console.log( console.log(
'[AgentDetail] isRunning computed - executionStatus:', 'isRunning computed - executionStatus:',
agentStore.executionStatus agentStore.executionStatus
); );
return agentStore.executionStatus === 'running'; return agentStore.executionStatus === 'running';
}); });
const isConnected = computed(() => { const isConnected = computed(() => {
console.log( console.log('isConnected computed - isConnected:', agentStore.isConnected);
'[AgentDetail] isConnected computed - isConnected:',
agentStore.isConnected
);
return agentStore.isConnected ?? false; return agentStore.isConnected ?? false;
}); });
@ -76,15 +73,17 @@ const statusColor = (status: string) => {
}; };
const fetchAgent = async () => { const fetchAgent = async () => {
console.log('[AgentDetail] Fetching agent details for ID:', agentId); console.log('Fetching agent details for ID:', agentId);
try { try {
const response = await apiClient.get(`/api/agent/${agentId}/`); const response = await apiClient.get<Record<string, unknown>>(
`/api/agent/${agentId}/`
);
agent.value = response.data; agent.value = response.data;
console.log('[AgentDetail] Agent fetched successfully:', agent.value); console.log('Agent fetched successfully:', agent.value);
} catch (error) { } catch (error) {
console.error('[AgentDetail] ERROR - Failed to fetch agent:', error); console.error('ERROR - Failed to fetch agent:', error);
if (isAxiosError(error)) { if (isAxiosError(error)) {
console.error('[AgentDetail] Axios error details:', { console.error('Axios error details:', {
status: error.response?.status, status: error.response?.status,
data: error.response?.data, data: error.response?.data,
message: error.message, message: error.message,
@ -95,11 +94,11 @@ const fetchAgent = async () => {
}; };
const startAgent = () => { const startAgent = () => {
console.log('[AgentDetail] Starting agent execution'); console.log('Starting agent execution');
if (!agentStore.isConnected) { if (!agentStore.isConnected) {
console.warn('[AgentDetail] WARNING: WebSocket not connected'); console.warn('WARNING: WebSocket not connected');
console.log('[AgentDetail] Connection state:', { console.log('Connection state:', {
isConnected: agentStore.isConnected, isConnected: agentStore.isConnected,
}); });
message.error('WebSocket not connected'); message.error('WebSocket not connected');
@ -115,65 +114,56 @@ const startAgent = () => {
const data = { const data = {
query: queryInput.value.trim(), 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); agentStore.startAgent(data);
console.log('[AgentDetail] Agent execution initiated'); console.log('Agent execution initiated');
message.success('Agent execution started'); message.success('Agent execution started');
} catch (error) { } 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'); message.error('Failed to start agent');
} }
}; };
const stopAgent = () => { const stopAgent = () => {
console.log('[AgentDetail] Stopping agent execution'); console.log('Stopping agent execution');
try { try {
console.log('[AgentDetail] Calling stopAgent on store'); console.log('Calling stopAgent on store');
agentStore.stopAgent(); agentStore.stopAgent();
console.log('[AgentDetail] Agent stop signal sent'); console.log('Agent stop signal sent');
message.success('Agent stop requested'); message.success('Agent stop requested');
} catch (error) { } catch (error) {
console.error('[AgentDetail] ERROR - Failed to stop agent:', error); console.error('ERROR - Failed to stop agent:', error);
} }
}; };
onMounted(() => { onMounted(() => {
console.log('[AgentDetail] Component mounted'); console.log('Component mounted');
console.log('[AgentDetail] Lifecycle: onMounted - starting initialization'); console.log('Lifecycle: onMounted - starting initialization');
fetchAgent(); fetchAgent();
console.log( console.log('Attempting WebSocket connection for agent:', agentId);
'[AgentDetail] Attempting WebSocket connection for agent:',
agentId
);
try { try {
agentStore.connect(agentId); agentStore.connect(agentId);
console.log('[AgentDetail] WebSocket connection initiated'); console.log('WebSocket connection initiated');
} catch (error) { } catch (error) {
console.error( console.error('ERROR - Failed to connect WebSocket:', error);
'[AgentDetail] ERROR - Failed to connect WebSocket:',
error
);
} }
}); });
onUnmounted(() => { onUnmounted(() => {
console.log('[AgentDetail] Component unmounted'); console.log('Component unmounted');
console.log('[AgentDetail] Lifecycle: onUnmounted - cleaning up'); console.log('Lifecycle: onUnmounted - cleaning up');
try { try {
console.log('[AgentDetail] Disconnecting WebSocket'); console.log('Disconnecting WebSocket');
agentStore.disconnect(); agentStore.disconnect();
console.log('[AgentDetail] WebSocket disconnected successfully'); console.log('WebSocket disconnected successfully');
} catch (error) { } catch (error) {
console.error( console.error('ERROR - Failed to disconnect WebSocket:', error);
'[AgentDetail] ERROR - Failed to disconnect WebSocket:',
error
);
} }
}); });
</script> </script>

42
src/views/Agents.vue
View file

@ -13,38 +13,19 @@ interface Agent {
const agents = ref<Agent[]>([]); const agents = ref<Agent[]>([]);
const loading = ref(false); const loading = ref(false);
const loadError = ref(false);
const fetchAgents = async () => { const fetchAgents = async () => {
loading.value = true; loading.value = true;
loadError.value = false;
try { try {
const response = await apiClient.get('/api/agent/'); const response = await apiClient.get<Agent[]>('/api/agent/');
agents.value = response.data; agents.value = Array.isArray(response.data) ? response.data : [];
} catch (error) { } catch (error) {
console.error('Failed to fetch agents:', error); console.error('Failed to fetch agents:', error);
message.error('Failed to load agents'); message.error('Failed to load agents');
agents.value = [ agents.value = [];
{ loadError.value = true;
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 { } finally {
loading.value = false; loading.value = false;
} }
@ -64,7 +45,18 @@ onMounted(() => {
<Card class="panel" :bordered="false"> <Card class="panel" :bordered="false">
<Spin :spinning="loading" tip="Loading agents..."> <Spin :spinning="loading" tip="Loading agents...">
<div v-if="loadError" class="empty">
<Typography.Paragraph type="danger">
Failed to load agents.
</Typography.Paragraph>
</div>
<div v-else-if="!loading && agents.length === 0" class="empty">
<Typography.Paragraph type="secondary">
No agents found.
</Typography.Paragraph>
</div>
<List <List
v-else
:data-source="agents" :data-source="agents"
item-layout="horizontal" item-layout="horizontal"
:bordered="false" :bordered="false"