frontend/src/views/AgentDetails.vue

<template>
  <div class="agent-details">
    <!-- Agent Details Header -->
    <div class="details-header">
      <button 
        @click="$router.push('/')"
        class="saap-button-secondary mb-4"
      >
        ← Back to Dashboard
      </button>
      
      <div v-if="agent" class="agent-header">
        <div class="agent-avatar" :style="{ backgroundColor: agent.color }">
          {{ agent.name.charAt(0) }}
        </div>
        <div>
          <h1 class="saap-heading-2">{{ agent.name }}</h1>
          <p class="saap-body text-saap-gray-600">{{ agent.description }}</p>
          <div class="agent-status">
            <span 
              class="status-badge"
              :class="`status-${agent.status}`"
            >
              {{ agent.status }}
            </span>
          </div>
        </div>
      </div>

      <!-- Agent not found -->
      <div v-else class="empty-state">
        <h2 class="saap-heading-3">Agent nicht gefunden</h2>
        <p class="saap-body">Der angeforderte Agent existiert nicht.</p>
      </div>
    </div>

    <!-- Agent Configuration -->
    <div v-if="agent" class="agent-config saap-card p-6">
      <h2 class="saap-heading-3 mb-4">Configuration</h2>
      <div class="config-grid">
        <div class="config-item">
          <label class="config-label">Agent ID</label>
          <span class="config-value saap-mono">{{ agent.id }}</span>
        </div>
        <div class="config-item">
          <label class="config-label">Type</label>
          <span class="config-value">{{ agent.type }}</span>
        </div>
        <div class="config-item">
          <label class="config-label">Status</label>
          <span class="config-value">{{ agent.status }}</span>
        </div>
        <div class="config-item">
          <label class="config-label">Model</label>
          <span class="config-value saap-mono">{{ agent.llm_config?.model || 'N/A' }}</span>
        </div>
      </div>
    </div>

    <!-- Agent Actions -->
    <div v-if="agent" class="agent-actions saap-card p-6">
      <h2 class="saap-heading-3 mb-4">Actions</h2>
      <div class="actions-grid">
        <button 
          v-if="agent.status === 'inactive'"
          @click="startAgent"
          class="saap-button-primary"
        >
          Start Agent
        </button>
        <button 
          v-if="agent.status === 'active'"
          @click="stopAgent"
          class="saap-button-secondary"
        >
          Stop Agent
        </button>
        <button 
          v-if="agent.status === 'active'"
          @click="openChat"
          class="saap-button-accent"
        >
          Chat with Agent
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAgentStore } from '@/stores/agents'

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

const agentId = computed(() => route.params.id)
const agent = computed(() => {
  const foundAgent = agentStore.agentById(agentId.value)
  return foundAgent || null
})

const startAgent = async () => {
  try {
    await agentStore.startAgent(agent.value.id)
    console.log(`✅ Agent ${agent.value.name} started`)
  } catch (error) {
    console.error('❌ Failed to start agent:', error)
  }
}

const stopAgent = async () => {
  try {
    await agentStore.stopAgent(agent.value.id)
    console.log(`✅ Agent ${agent.value.name} stopped`)
  } catch (error) {
    console.error('❌ Failed to stop agent:', error)
  }
}

const openChat = () => {
  router.push(`/agents/${agent.value.id}/chat`)
}

onMounted(async () => {
  await agentStore.initialize()
  
  // Redirect if agent doesn't exist
  if (!agent.value) {
    console.warn(`⚠️ Agent ${agentId.value} not found, redirecting to dashboard`)
    setTimeout(() => {
      router.push('/')
    }, 2000)
  }
})
</script>

<style scoped>
.agent-details {
  @apply space-y-6 max-w-4xl mx-auto;
}

.details-header {
  @apply space-y-4;
}

.agent-header {
  @apply flex items-start space-x-4;
}

.agent-avatar {
  @apply w-16 h-16 rounded-xl flex items-center justify-center;
  @apply text-white font-bold text-xl flex-shrink-0;
}

.agent-status {
  @apply mt-2;
}

.status-badge {
  @apply inline-flex px-3 py-1 rounded-full text-xs font-medium;
}

.status-active {
  @apply bg-saap-secondary-100 text-saap-secondary-800;
}

.status-inactive {
  @apply bg-saap-gray-100 text-saap-gray-800;
}

.status-starting {
  @apply bg-saap-accent-100 text-saap-accent-800;
}

.config-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.config-item {
  @apply flex flex-col space-y-1;
}

.config-label {
  @apply text-sm font-medium text-saap-gray-700;
}

.config-value {
  @apply text-base text-saap-gray-900;
}

.actions-grid {
  @apply flex flex-wrap gap-3;
}

.actions-grid button {
  @apply flex-shrink-0;
}

.empty-state {
  @apply text-center py-12 bg-saap-gray-50 rounded-lg;
}

.empty-state h2 {
  @apply mb-2;
}

/* Responsive improvements */
@media (max-width: 640px) {
  .agent-header {
    @apply flex-col space-x-0 space-y-4 text-center;
  }
  
  .agent-avatar {
    @apply mx-auto;
  }
  
  .config-grid {
    @apply grid-cols-1;
  }
  
  .actions-grid {
    @apply flex-col;
  }
  
  .actions-grid button {
    @apply w-full;
  }
}
</style>