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>

142
src/views/Agents.vue
View file

@ -4,103 +4,95 @@ import { List, Typography, Button, Card, Spin, message } from 'ant-design-vue';
import { apiClient } from '../lib/api'; import { apiClient } from '../lib/api';
interface Agent { interface Agent {
uuid: string; uuid: string;
id: string; id: string;
name: string; name: string;
description: string; description: string;
status: string; status: string;
} }
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;
try { loadError.value = false;
const response = await apiClient.get('/api/agent/'); try {
agents.value = response.data; const response = await apiClient.get<Agent[]>('/api/agent/');
} catch (error) { agents.value = Array.isArray(response.data) ? response.data : [];
console.error('Failed to fetch agents:', error); } catch (error) {
message.error('Failed to load agents'); console.error('Failed to fetch agents:', error);
agents.value = [ message.error('Failed to load agents');
{ agents.value = [];
uuid: 'a1', loadError.value = true;
id: 'a1', } finally {
name: 'Onboarding Bot', loading.value = false;
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;
}
}; };
onMounted(() => { onMounted(() => {
fetchAgents(); fetchAgents();
}); });
</script> </script>
<template> <template>
<div class="page"> <div class="page">
<Typography.Title :level="2">Agents</Typography.Title> <Typography.Title :level="2">Agents</Typography.Title>
<Typography.Paragraph type="secondary" <Typography.Paragraph type="secondary"
>Manage and inspect the available AI agents.</Typography.Paragraph >Manage and inspect the available AI agents.</Typography.Paragraph
> >
<Card class="panel" :bordered="false"> <Card class="panel" :bordered="false">
<Spin :spinning="loading" tip="Loading agents..."> <Spin :spinning="loading" tip="Loading agents...">
<List <div v-if="loadError" class="empty">
:data-source="agents" <Typography.Paragraph type="danger">
item-layout="horizontal" Failed to load agents.
:bordered="false" </Typography.Paragraph>
> </div>
<template #renderItem="{ item }"> <div v-else-if="!loading && agents.length === 0" class="empty">
<List.Item class="item"> <Typography.Paragraph type="secondary">
<List.Item.Meta No agents found.
:title="item.name" </Typography.Paragraph>
:description="`${item.description} • Status: ${item.status}`" </div>
/> <List
<RouterLink :to="`/agents/${item.uuid || item.id}`"> v-else
<Button type="primary" size="small" :data-source="agents"
>Open</Button item-layout="horizontal"
> :bordered="false"
</RouterLink> >
</List.Item> <template #renderItem="{ item }">
</template> <List.Item class="item">
</List> <List.Item.Meta
</Spin> :title="item.name"
</Card> :description="`${item.description} • Status: ${item.status}`"
</div> />
<RouterLink :to="`/agents/${item.uuid || item.id}`">
<Button type="primary" size="small"
>Open</Button
>
</RouterLink>
</List.Item>
</template>
</List>
</Spin>
</Card>
</div>
</template> </template>
<style scoped> <style scoped>
.page { .page {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
} }
.panel { .panel {
background: #0f172a; background: #0f172a;
border: 1px solid #1f2937; border: 1px solid #1f2937;
color: #e5e7eb; color: #e5e7eb;
} }
.item :deep(.ant-list-item-meta-title), .item :deep(.ant-list-item-meta-title),
.item :deep(.ant-list-item-meta-description) { .item :deep(.ant-list-item-meta-description) {
color: #e5e7eb; color: #e5e7eb;
} }
</style> </style>