agora-ai/frontend/src/components/TimelinePanel.vue

<script setup>
import { computed } from 'vue'
import { useCollaborationStore } from '../stores/collaboration'

const collaborationStore = useCollaborationStore()

const conversationHistory = computed(() => collaborationStore.conversationHistory)
const currentRound = computed(() => collaborationStore.currentRound)
const agents = computed(() => collaborationStore.currentSession?.agents || [])
const agentCount = computed(() => collaborationStore.currentSession?.agentCount || 0)

const getAgentStatus = (round) => {
  if (!round.agentsMadeChanges) return agents.value.map(agent => ({ name: agent, made_changes: false }))
  return agents.value.map(agent => ({
    name: agent,
    made_changes: round.agentsMadeChanges.includes(agent)
  }))
}

const roundProgress = computed(() => {
  if (agentCount.value === 0 || conversationHistory.value.length === 0) return 0
  // Estimate progress: assume ~10 rounds max before convergence
  const maxRounds = Math.ceil(agentCount.value * 1.5)
  return Math.min(Math.round((conversationHistory.value.length / maxRounds) * 100), 100)
})
</script>

<template>
  <div class="timeline-panel">
    <!-- Progress Bar -->
    <div class="progress-section">
      <div class="progress-header">
        <span class="progress-label">Session Progress</span>
        <span class="progress-percent">{{ roundProgress }}%</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: roundProgress + '%' }"></div>
      </div>
      <div class="round-counter">Round {{ currentRound }}</div>
    </div>

    <!-- Timeline -->
    <div class="timeline-list">
      <div
        v-for="(round, index) in conversationHistory"
        :key="index"
        class="timeline-entry"
      >
        <div class="entry-header">
          <div class="round-number">{{ index + 1 }}</div>
          <div class="round-label">Round {{ round.roundNumber }}</div>
        </div>

        <!-- Agent status for this round -->
        <div class="agent-list">
          <div
            v-for="agent in getAgentStatus(round)"
            :key="agent.name"
            class="agent-item"
            :class="{ active: agent.made_changes }"
            :title="agent.made_changes ? 'Made changes' : 'No changes'"
          >
            <span class="agent-dot" :class="{ changed: agent.made_changes }"></span>
            <span class="agent-name">{{ agent.name }}</span>
          </div>
        </div>

        <!-- Changes summary -->
        <div v-if="round.agentsMadeChanges && round.agentsMadeChanges.length > 0" class="changes-count">
          {{ round.agentsMadeChanges.length }} agent{{ round.agentsMadeChanges.length !== 1 ? 's' : '' }} modified
        </div>
        <div v-else class="no-changes-text">No changes</div>
      </div>

      <!-- Empty state -->
      <div v-if="conversationHistory.length === 0" class="empty-state">
        <p>Waiting for first round...</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.timeline-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.progress-section {
  padding: 1rem;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.progress-label {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.progress-percent {
  color: var(--primary);
  font-weight: 600;
}

.progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.round-counter {
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  overflow-y: auto;
}

.timeline-entry {
  padding: 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.timeline-entry:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(102, 126, 234, 0.4);
}

.entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.round-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(102, 126, 234, 0.5);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.round-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.agent-list {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: help;
  transition: all 0.2s ease;
}

.agent-item.active {
  background: rgba(76, 175, 80, 0.2);
  color: rgba(76, 175, 80, 0.9);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.agent-dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.agent-dot.changed {
  background: rgba(76, 175, 80, 0.8);
  width: 5px;
  height: 5px;
}

.agent-name {
  font-weight: 600;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

.changes-count {
  font-size: 0.75rem;
  color: rgba(76, 175, 80, 0.8);
  font-weight: 500;
}

.no-changes-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-size: 0.875rem;
}

/* Scrollbar */
.timeline-list::-webkit-scrollbar {
  width: 6px;
}

.timeline-list::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-list::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.3);
  border-radius: 3px;
}

.timeline-list::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.5);
}
</style>