Dynavera/site/src/views/AgentsView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { List, Typography, Button, Card, Spin, message, Tag, Space } from 'ant-design-vue'
import { apiClient, API } from '../router/api'
import type { MaybePaginated } from '../types/common'
import type { AgentConfig } from '../types/agent'

const agents = ref<AgentConfig[]>([])
const loading = ref(false)
const loadError = ref(false)

const fetchAgents = async () => {
    loading.value = true
    loadError.value = false
    try {
        const response = await apiClient.get<MaybePaginated<AgentConfig>>(API.agents.configs.list())

        const data = response.data
        agents.value = Array.isArray(data) ? data : data.results || []
    } catch (error) {
        console.error('Failed to fetch agents:', error)
        message.error('Failed to load agent configurations')
        loadError.value = true
    } finally {
        loading.value = false
    }
}

const getAgentTypeLabel = (type: string) => {
    const types: Record<string, string> = {
        curriculum: 'Curriculum Agent',
        knowledge: 'Knowledge Agent',
        assessment: 'Assessment Agent',
        monitor: 'Progress Monitor',
    }
    return types[type] || type
}

onMounted(() => {
    fetchAgents()
})
</script>

<template>
    <div class="page">
        <Typography.Title :level="2">Agent Configurations</Typography.Title>
        <Typography.Paragraph type="secondary">
            Manage your AI personas and their specific tool permissions.
        </Typography.Paragraph>

        <Card class="panel" :bordered="false">
            <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 agent configurations found.
                    </Typography.Paragraph>
                </div>

                <List v-else :data-source="agents" item-layout="horizontal">
                    <template #renderItem="{ item }">
                        <List.Item class="item">
                            <List.Item.Meta :title="item.name">
                                <template #description>
                                    <Space direction="vertical">
                                        <Tag color="blue">
                                            {{ getAgentTypeLabel(item.agent_type) }}
                                        </Tag>
                                        <span class="config-summary">
                                            Model: {{ item.llm_config?.model_id || 'Default' }}
                                        </span>
                                    </Space>
                                </template>
                            </List.Item.Meta>
                            <RouterLink :to="`/agents/${item.uuid}`">
                                <Button type="primary">Manage & Run</Button>
                            </RouterLink>
                        </List.Item>
                    </template>
                </List>
            </Spin>
        </Card>
    </div>
</template>

<style scoped>
.page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.panel {
    background: #0f172a;
    border: 1px solid #1f2937;
}
.item :deep(.ant-list-item-meta-title) {
    color: #f8fafc;
    font-weight: 600;
}
.config-summary {
    color: #94a3b8;
    font-size: 0.85rem;
}
.empty {
    padding: 3rem;
    text-align: center;
}
</style>