nexus/frontend/src/components/dashboard/AgentModal.vue

<script setup lang="ts">
import { X, ExternalLink } from '@lucide/vue'
import type { AgentNodeData } from '../../composables/useDashboardData'

defineProps<{
  agent: AgentNodeData
  runtime: string
}>()

defineEmits<{
  close: []
}>()
</script>

<template>
  <Teleport to="body">
    <div class="modal-overlay" @click.self="$emit('close')">
      <div class="modal-card" :style="{ '--agent-color': agent.color }">
        <!-- Header -->
        <div class="modal-header">
          <div class="modal-title-row">
            <div class="modal-avatar" :style="{ background: `${agent.color}18`, color: agent.color }">
              <span class="avatar-letter">{{ agent.name.charAt(0) }}</span>
            </div>
            <div>
              <h2>{{ agent.name }}</h2>
              <span class="modal-role">{{ agent.role }}</span>
            </div>
          </div>
          <a :href="`/agents/${agent.id}`" class="agent-link-btn" title="Open agent config">
            <ExternalLink :size="14" />
          </a>
          <button class="modal-close-btn" @click="$emit('close')" aria-label="Close">
            <X :size="16" />
          </button>
        </div>

        <!-- Description -->
        <p class="modal-desc">{{ agent.description }}</p>

        <!-- Current Task -->
        <section class="modal-section">
          <h3 class="section-label">Current Task</h3>
          <p class="section-value">{{ agent.currentTask }}</p>
        </section>

        <!-- Goal + Progress -->
        <section class="modal-section">
          <h3 class="section-label">Goal</h3>
          <p class="section-value">{{ agent.goal }}</p>
          <div class="progress-row">
            <span class="progress-pct">{{ agent.progress }}%</span>
            <div class="progress-track">
              <div
                class="progress-fill"
                :style="{ width: `${agent.progress}%` }"
              ></div>
            </div>
          </div>
        </section>

        <!-- Working Feed -->
        <section class="modal-section">
          <h3 class="section-label">Working Feed</h3>
          <div class="work-feed">
            <div
              v-for="(step, idx) in agent.workingFeed"
              :key="idx"
              class="work-step"
            >
              <span class="step-dot"></span>
              <span class="step-text">{{ step }}</span>
            </div>
          </div>
        </section>

        <!-- Live Thinking -->
        <section class="modal-section">
          <h3 class="section-label">Live Thinking</h3>
          <div class="thinking-panel">
            <div class="thinking-stream" ref="thinkingStreamRef">
              <div
                v-for="(msg, idx) in agent.thinkingStream"
                :key="idx"
                class="thinking-entry"
                :style="{ animationDelay: `${idx * 0.05}s` }"
              >
                <span class="entry-time">{{ msg.time }}</span>
                <span class="entry-text">{{ msg.text }}</span>
                <span class="thinking-dots" v-if="idx === agent.thinkingStream.length - 1">
                  <span class="thinking-dot blue"></span>
                  <span class="thinking-dot violet"></span>
                </span>
              </div>
              <div v-if="!agent.thinkingStream?.length" class="thinking-placeholder">
                Waiting for thought stream...
              </div>
            </div>
          </div>
        </section>

        <!-- Footer Stats -->
        <div class="modal-footer">
          <span class="footer-badge">Runtime: {{ runtime }}</span>
          <span
            class="footer-badge"
            :style="{
              color: agent.workload > 65 ? '#eab308' : '#22c55e',
              borderColor: agent.workload > 65 ? 'rgba(234,179,8,0.2)' : 'rgba(34,197,94,0.2)',
            }"
          >
            Workload: {{ agent.workload }}%
          </span>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: overlay-in 0.2s ease;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  width: min(480px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  background: rgba(18, 22, 30, 0.96);
  border: 1px solid color-mix(in srgb, var(--agent-color) 25%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: card-in 0.25s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card::-webkit-scrollbar {
  width: 5px;
}
.modal-card::-webkit-scrollbar-track {
  background: transparent;
}
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(139, 124, 246, 0.2);
  border-radius: 3px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.avatar-letter {
  font-size: 18px;
  font-weight: 700;
}
.modal-title-row h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #e8eaf0;
}
.modal-role {
  font-size: 10px;
  color: #6b7385;
  font-weight: 500;
}
.agent-link-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: transparent;
  color: #6b7385;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  text-decoration: none;
}
.agent-link-btn:hover {
  border-color: var(--agent-color);
  color: var(--agent-color);
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: transparent;
  color: #6b7385;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: #e8eaf0;
}

.modal-desc {
  font-size: 11px;
  line-height: 1.55;
  color: #7e8799;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-section {
  margin-bottom: 16px;
}
.section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7385;
  margin: 0 0 6px;
}
.section-value {
  margin: 0;
  font-size: 12px;
  color: #e8eaf0;
  line-height: 1.4;
}

/* Progress */
.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.progress-pct {
  font-size: 11px;
  font-weight: 600;
  color: #7e8799;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--agent-color);
  transition: width 0.5s ease;
}

/* Live Thinking */
.thinking-panel {
  position: relative;
  border: 1px solid rgba(139, 124, 246, 0.2);
  border-radius: 12px;
  padding: 14px;
  background: rgba(12, 16, 22, 0.6);
  overflow: hidden;
  animation: panel-pulse 2.5s ease-in-out infinite;
}
@keyframes panel-pulse {
  0%, 100% { border-color: rgba(139, 124, 246, 0.25); box-shadow: 0 0 12px rgba(139,124,246,0.08); }
  50% { border-color: rgba(139, 124, 246, 0.5); box-shadow: 0 0 24px rgba(139,124,246,0.18), 0 0 40px rgba(139,124,246,0.06); }
}

.thinking-dots {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
  animation: spin-dots 2s linear infinite;
}
.thinking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.thinking-dot.blue { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.thinking-dot.violet { background: #8b7cf6; box-shadow: 0 0 8px #8b7cf6; }
@keyframes spin-dots {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.thinking-stream {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.thinking-entry {
  display: flex;
  gap: 10px;
  align-items: baseline;
  animation: slide-in-right 0.3s ease-out both;
  font-size: 10px;
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
.entry-time {
  font-size: 8.5px;
  color: #6b7385;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}
.entry-text {
  color: #9ea5b3;
  line-height: 1.4;
}
.thinking-placeholder {
  font-size: 10px;
  color: #4a5160;
  font-style: italic;
}

/* Working Feed */
.work-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--agent-color);
  flex-shrink: 0;
  opacity: 0.5;
}
.step-text {
  font-size: 10.5px;
  color: #7e8799;
  line-height: 1.35;
}

/* Footer */
.modal-footer {
  display: flex;
  gap: 10px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #7e8799;
}
</style>