nexus/frontend/src/views/TeamView.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import TeamNetwork from '../components/team/TeamNetwork.vue'

const router = useRouter()

interface AgentCardData {
  id: string
  name: string
  role: string
  description: string
  tags: string[]
  color: string
  icon: string
  hero?: boolean
}

const agents: AgentCardData[] = [
  {
    id: 'iris',
    name: 'Iris',
    role: 'Chief of Staff',
    description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.',
    tags: ['Orchestration', 'Delegation', 'Approval'],
    color: '#8b7cf6',
    icon: 'bot',
    hero: true,
  },
  {
    id: 'programmer',
    name: 'Programmer',
    role: 'Lead Developer',
    description: 'Implementiert Features, schreibt Code, führt Builds und Tests aus. Arbeitet autonom im Scope.',
    tags: ['coding', 'development', 'builds'],
    color: '#3b82f6',
    icon: 'code',
  },
  {
    id: 'reviewer',
    name: 'Reviewer',
    role: 'Code QA',
    description: 'Prüft Code auf Bugs, Sicherheit und Wartbarkeit. Fixt Probleme eigenständig.',
    tags: ['Quality Assurance', 'Security', 'Code Review'],
    color: '#a855f7',
    icon: 'shield',
  },
  {
    id: 'researcher',
    name: 'Researcher',
    role: 'Research Analyst',
    description: 'Recherchiert, analysiert Quellen, prüft Fakten. Nur Lese-Rechte, keine Aktionen.',
    tags: ['Research', 'Analysis', 'Fact-Checking'],
    color: '#22c55e',
    icon: 'search',
  },
  {
    id: 'executor',
    name: 'DevOps',
    role: 'Host Executor',
    description: 'Führt Host-Kommandos auf dem VPS aus. Nur auf Iris-Befehl, niemals eigeninitiativ.',
    tags: ['Execution', 'Deployment', 'VPS'],
    color: '#eab308',
    icon: 'terminal',
  },
]

const activeAgents = ref<string[]>(['programmer'])

function goToAgent(id: string) {
  router.push(`/agents/${id}`)
}
</script>

<template>
  <div class="team-page">
    <!-- Quote Pill -->
    <div class="quote-pill">
      <span class="quote-text">"An autonomous organization of AI agents that does work for me and produces value 24/7"</span>
    </div>

    <!-- Header -->
    <div class="team-header">
      <h1 class="team-title">AI Team Network</h1>
      <p class="team-subtitle">{{ agents.length }} AI agents, connected in real-time.</p>
      <p class="team-description">Mission Control orchestriert ein Team spezialisierter Agenten — jeder mit eigener Identität, eigenem Workspace und klaren Verantwortlichkeiten. Die Pulse zeigen aktive Kommunikationsflüsse.</p>
    </div>

    <!-- Network Visualization -->
    <div class="network-container">
      <TeamNetwork
        :agents="agents"
        hero-id="iris"
        :active-agents="activeAgents"
        @select="goToAgent"
      />
    </div>

    <!-- Legend -->
    <div class="legend-row">
      <div class="legend-item">
        <span class="legend-dot active-pulse"></span>
        <span>Aktive Verbindung</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot idle-pulse"></span>
        <span>Idle</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot pulse-dot"></span>
        <span>Datenfluss (Pulse)</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.team-page {
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.quote-pill {
  background: var(--panel);
  border: 1px solid rgba(139, 124, 246, 0.25);
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 24px;
  box-shadow: 0 0 18px rgba(139, 124, 246, 0.06), inset 0 0 18px rgba(139, 124, 246, 0.03);
  text-align: center;
}
.quote-text {
  font-style: italic;
  font-size: 12px;
  color: #9ea5b3;
  line-height: 1.5;
}

.team-header {
  text-align: center;
  margin-bottom: 28px;
}
.team-title {
  font-size: 26px;
  font-weight: 600;
  color: #e8eaf0;
  margin: 0 0 6px;
}
.team-subtitle {
  font-size: 12px;
  color: #7e8799;
  margin: 0 0 4px;
}
.team-description {
  font-size: 10.5px;
  color: #6b7385;
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.network-container {
  margin-top: 10px;
  padding: 0;
}

.legend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #7e8799;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.active-pulse {
  background: #51d49a;
  box-shadow: 0 0 6px rgba(81, 212, 154, 0.6);
}
.idle-pulse {
  background: #3a3f4b;
}
.pulse-dot {
  background: white;
  width: 6px;
  height: 6px;
  animation: legend-pulse 1.5s ease-in-out infinite;
}
@keyframes legend-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
</style>