Dynavera/src/views/AgentDetailView.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Card, Typography, Button, List, Space, Spin, Input, message, Tag } from 'ant-design-vue'
import { useAgentStore } from '../stores/agentStore'
import { apiClient, isAxiosError, API } from '../router/api'

const route = useRoute()
const agentStore = useAgentStore()

const agentId = route.params.id as string

const agent = ref<Record<string, unknown>>({
    id: agentId,
    name: 'Loading...',
    description: '',
    status: 'idle',
})

const queryInput = ref('')
const isRunning = computed(() => agentStore.executionStatus === 'running')
const isConnected = computed(() => agentStore.isConnected ?? false)

const agentResponse = computed(() => {
    const completedEvent = agentStore.eventLog?.find((event) => event.type === 'completed')
    if (completedEvent?.content && typeof completedEvent.content === 'object') {
        const output = completedEvent.content as Record<string, unknown>
        const direct = output.response
        if (typeof direct === 'string' && direct.trim()) return direct

        const result = output.result
        if (result && typeof result === 'object') {
            const nested = (result as Record<string, unknown>).response
            if (typeof nested === 'string' && nested.trim()) return nested
        }
    }
    return null
})

const statusColor = (status: string) => {
    const colors: Record<string, string> = {
        idle: 'default',
        running: 'processing',
        completed: 'success',
        failed: 'error',
        stopped: 'warning',
    }
    return colors[status] || 'default'
}

const fetchAgent = async () => {
    try {
        const response = await apiClient.get<Record<string, unknown>>(API.agent(agentId))
        agent.value = response.data
    } catch (error) {
        console.error('Failed to fetch agent:', error)
        if (isAxiosError(error)) {
            console.error('Axios error details:', {
                status: error.response?.status,
                data: error.response?.data,
                message: error.message,
            })
        }
        message.error('Failed to load agent details')
    }
}

const startAgent = () => {
    if (!agentStore.isConnected) {
        message.error('WebSocket not connected')
        return
    }

    if (!queryInput.value.trim()) {
        message.error('Please enter a query')
        return
    }

    const data = {
        query: queryInput.value.trim(),
    }

    agentStore.startAgent(data)
    message.success('Agent execution started')
}

const startFineTune = () => {
    if (!agentStore.isConnected) {
        message.error('WebSocket not connected')
        return
    }

    agentStore.startFineTune()
    message.success('Fine-tune started')
}

const stopAgent = () => {
    agentStore.stopAgent(agentStore.lastExecutionId || undefined)
    message.success('Agent stop requested')
}

onMounted(() => {
    fetchAgent()
    agentStore.connect(agentId)
})

onUnmounted(() => {
    agentStore.disconnect()
})
</script>

<template>
    <div class="page">
        <Card class="panel" :bordered="false">
            <div class="header">
                <Typography.Title :level="2">{{ agent.name }}</Typography.Title>
                <Tag :color="statusColor(String(agentStore.executionStatus || 'idle'))">
                    {{ (agentStore.executionStatus || 'idle').toString().toUpperCase() }}
                </Tag>
            </div>

            <Typography.Paragraph type="secondary">
                {{ agent.description || 'No description available' }}
            </Typography.Paragraph>

            <div class="connection-status">
                <span>WebSocket Status:</span>
                <Tag :color="agentStore.isConnected ? 'green' : 'red'">
                    {{ agentStore.isConnected ? 'CONNECTED' : 'DISCONNECTED' }}
                </Tag>
            </div>

            <Typography.Title :level="4" class="section-title">Execution</Typography.Title>

            <div class="execution-controls">
                <Space direction="vertical" style="width: 100%">
                    <div>
                        <Typography.Text>Query:</Typography.Text>
                        <Input.TextArea
                            v-model:value="queryInput"
                            :disabled="isRunning"
                            placeholder="Enter your query here..."
                            :rows="4"
                        />
                    </div>

                    <Space>
                        <Button type="primary" :disabled="isRunning || !isConnected" @click="startAgent">
                            Run Agent
                        </Button>
                        <Button :disabled="isRunning || !isConnected" @click="startFineTune">
                            Fine-Tune
                        </Button>
                        <Button danger :disabled="!isRunning" @click="stopAgent">
                            Stop Agent
                        </Button>
                    </Space>
                </Space>
            </div>

            <div v-if="agentResponse" class="response-section">
                <Typography.Title :level="4" class="section-title">Final Response</Typography.Title>
                <Card class="response-card response-final" :bordered="false">
                    <div class="response-content">
                        {{ agentResponse }}
                    </div>
                </Card>
            </div>

            <Typography.Title :level="4" class="section-title">Execution Log</Typography.Title>

            <Spin :spinning="isRunning" tip="Agent running...">
                <div class="log-container">
                    <List
                        v-if="(agentStore.eventLog?.length ?? 0) > 0"
                        :data-source="agentStore.eventLog || []"
                        :bordered="false"
                    >
                        <template #renderItem="{ item }">
                            <List.Item class="log-item">
                                <div class="log-entry">
                                    <Tag class="log-type">{{ item.type }}</Tag>
                                    <span class="log-time">{{ item.timestamp.toLocaleTimeString() }}</span>
                                    <div v-if="item.message" class="log-message">
                                        {{ item.message }}
                                    </div>
                                    <div v-if="item.content && typeof item.content === 'object'" class="log-content">
                                        <pre>{{ JSON.stringify(item.content, null, 2) }}</pre>
                                    </div>
                                    <div v-else-if="item.content" class="log-content">
                                        {{ item.content }}
                                    </div>
                                </div>
                            </List.Item>
                        </template>
                    </List>
                    <Typography.Paragraph v-else type="secondary">
                        No events yet. Start the agent to see execution logs.
                    </Typography.Paragraph>
                </div>
            </Spin>
        </Card>
    </div>
</template>

<style scoped>
.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.panel {
    background: #0f172a;
    border: 1px solid #1f2937;
    color: #e5e7eb;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem;
    background: #1f2937;
    border-radius: 4px;
}

.execution-controls {
    background: #1f2937;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.log-container {
    background: #1f2937;
    border-radius: 4px;
    max-height: 500px;
    overflow-y: auto;
}

.log-item {
    border-bottom: 1px solid #374151 !important;
    padding: 0.75rem !important;
}

.log-entry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.log-type {
    width: fit-content;
}

.log-time {
    font-size: 0.75rem;
    color: #9ca3af;
}

.log-message {
    color: #e5e7eb;
    font-size: 0.9rem;
}

.log-content {
    background: #111827;
    padding: 0.5rem;
    border-radius: 3px;
    overflow-x: auto;
}

.log-content pre {
    margin: 0;
    font-size: 0.8rem;
    color: #d1d5db;
}

.response-section {
    margin-top: 2rem;
}

.response-card {
    background: #1f2937;
    border: 1px solid #374151;
}

.response-final {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.response-content {
    color: #e5e7eb;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0.5rem;
}
</style>