frontend/src/components/agent/AgentCard.vue

<template>
  <div class="agent-card">
    <div class="agent-header">
      <div class="agent-avatar" :style="{ backgroundColor: agent.color || '#6B7280' }">
        {{ agent.name?.charAt(0) || 'A' }}
      </div>
      <div class="agent-info">
        <h3 class="agent-name">{{ agent.name || 'Unknown Agent' }}</h3>
        <p class="agent-type">{{ agent.type || 'Generic' }}</p>
      </div>
      <div class="agent-status">
        <div 
          class="status-dot"
          :class="{
            'bg-green-400': agent.status === 'active',
            'bg-red-400': agent.status === 'inactive',
            'bg-yellow-400': agent.status === 'starting'
          }"
        ></div>
        <span class="status-text">{{ agent.status || 'Unknown' }}</span>
      </div>
    </div>

    <div class="agent-metrics">
      <div class="metric">
        <span class="metric-value">{{ agent.metrics?.messages_processed || 0 }}</span>
        <span class="metric-label">Messages</span>
      </div>
      <div class="metric">
        <span class="metric-value">{{ agent.metrics?.average_response_time?.toFixed(1) || '0.0' }}s</span>
        <span class="metric-label">Response Time</span>
      </div>
    </div>

    <div class="agent-actions">
      <button 
        v-if="agent.status !== 'active'"
        class="action-button start-button"
        @click="$emit('start', agent)"
      >
        ▶ Start
      </button>
      <button 
        v-else
        class="action-button stop-button"
        @click="$emit('stop', agent)"
      >
        ⏸ Stop
      </button>
      <button 
        class="action-button chat-button"
        @click="$emit('chat', agent)"
      >
        💬 Chat
      </button>
      <button 
        class="action-button details-button"
        @click="$emit('details', agent)"
      >
        📋 Details
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AgentCard',
  props: {
    agent: {
      type: Object,
      required: true
    }
  },
  emits: ['start', 'stop', 'chat', 'details']
}
</script>

<style scoped>
.agent-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow;
  @apply flex flex-col;
  height: 320px;
}

.agent-header {
  @apply flex items-start justify-between mb-4;
  flex-shrink: 0;
}

.agent-avatar {
  @apply w-12 h-12 rounded-lg flex items-center justify-center text-white font-medium text-lg mr-4;
}

.agent-info {
  @apply flex-1;
}

.agent-name {
  @apply font-semibold text-gray-900 text-lg;
}

.agent-type {
  @apply text-sm text-gray-600 mt-1;
}

.agent-status {
  @apply flex items-center space-x-2;
}

.status-dot {
  @apply w-3 h-3 rounded-full;
}

.status-text {
  @apply text-sm font-medium text-gray-700 capitalize;
}

.agent-metrics {
  @apply flex space-x-6 mb-4 py-3 border-y border-gray-100;
  flex: 1 1 auto;
  min-height: 80px;
}

.metric {
  @apply text-center;
}

.metric-value {
  @apply block text-xl font-bold text-gray-900;
}

.metric-label {
  @apply text-xs text-gray-500 uppercase tracking-wide;
}

.agent-actions {
  @apply flex space-x-2;
  flex-shrink: 0;
}

.action-button {
  @apply flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors;
}

.start-button {
  @apply bg-green-50 text-green-700 border-green-200 hover:bg-green-100;
}

.stop-button {
  @apply bg-red-50 text-red-700 border-red-200 hover:bg-red-100;
}

.chat-button {
  @apply bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100;
}

.details-button {
  @apply bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100;
}
</style>