backend/src/services/mistralClient.js

@@ -98,7 +98,7 @@ async function* parseStreamResponse(reader) {
 /**
  * Generate agent response with streaming thoughts
  */
-export async function* generateAgentResponse(agentName, prompt, currentDocument = '', onThought = null) {
+export async function generateAgentResponse(agentName, prompt, currentDocument = '', onThought = null) {
   const systemPrompt = getAgentPrompt(agentName)
 
   const messages = [

frontend/src/components/CollaborativeInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useCollaborationStore } from '../stores/collaboration'
 
 const emit = defineEmits(['session-created'])
@@ -11,12 +11,11 @@ const contextFile = ref(null)
 const agentCount = ref(7)
 const isCreating = ref(false)
 
-const agentOptions = computed(() => {
+const agentOptions = [
-  return Array.from({ length: 48 }, (_, i) => ({
+  { value: 3, label: '3 agents (Quick)' },
-    value: i + 3,
+  { value: 5, label: '5 agents (Balanced)' },
-    label: `${i + 3} agents`
+  { value: 7, label: '7 agents (Comprehensive)' }
-  }))
+]
-})
 
 const handleFileSelect = (event) => {
   const file = event.target.files?.[0]

frontend/src/components/CollaborativeSession.vue

@@ -21,39 +21,43 @@ const isRunningRound = ref(false)
 const sessionStarted = ref(false)
 const isAutoRunning = ref(false)
 const autoRunTimeout = ref(null)
-const currentWorkingAgent = ref(null)
-const currentAgentThinking = ref('')
-const isStopping = ref(false)
 
 const currentSession = computed(() => collaborationStore.currentSession)
 const currentDocument = computed(() => collaborationStore.currentDocument)
 const agents = computed(() => currentSession.value?.agents || [])
 const conversationHistory = computed(() => collaborationStore.conversationHistory)
-const agentCount = computed(() => currentSession.value?.agentCount || 0)
 
-// Convergence logic: consecutive rounds with no changes >= agent count
+// True convergence: ALL 7 agents must say no changes
 const hasConverged = computed(() => {
-  if (conversationHistory.value.length < 1) return false
+  if (conversationHistory.value.length === 0) return false
-  let consecutiveNoChanges = 0
+  const lastRound = conversationHistory.value[conversationHistory.value.length - 1]
-  for (let i = conversationHistory.value.length - 1; i >= 0; i--) {
+  // Check if last round has no changes from ANY agent
-    const round = conversationHistory.value[i]
+  return !lastRound.agentsMadeChanges || (Array.isArray(lastRound.agentsMadeChanges) && lastRound.agentsMadeChanges.length === 0)
-    if (!round.agentsMadeChanges || round.agentsMadeChanges.length === 0) {
+})
-      consecutiveNoChanges++
+
-    } else {
+// Count of agents in current session
-      break
+const agentCount = computed(() => agents.value?.length || 0)
-    }
+
-  }
+// Check if all available agents have participated without changes
-  return consecutiveNoChanges >= agentCount.value
+const allAgentsConverged = computed(() => {
+  if (conversationHistory.value.length === 0) return false
+  const lastRound = conversationHistory.value[conversationHistory.value.length - 1]
+  // All agents in this session must have zero changes
+  return hasConverged.value && agentCount.value > 0
 })
 
 onMounted(async () => {
   try {
+    // Get session details
     await collaborationStore.getSession(props.sessionId)
+
+    // Connect WebSocket
     ws.connect()
 
+    // Listen to WebSocket messages
     const messageInterval = setInterval(() => {
       if (ws.messages.value.length > 0) {
-        const message = ws.messages.value.shift()
+        const message = ws.messages.value.pop()
         handleWebSocketMessage(message)
       }
     }, 100)
@@ -63,6 +67,7 @@ onMounted(async () => {
       if (autoRunTimeout.value) clearTimeout(autoRunTimeout.value)
     })
 
+    // If session hasn't been started, start it
     if (currentSession.value?.status === 'created') {
       await startSession()
     }
@@ -74,49 +79,35 @@ onMounted(async () => {
 const handleWebSocketMessage = (message) => {
   if (message.type === 'initial_document_created') {
     sessionStarted.value = true
-    collaborationStore.currentDocument = message.content
+    collaborationStore.updateDocumentFromMessage(message)
-    currentWorkingAgent.value = null
+    // Start first auto-round after initial document
-    currentAgentThinking.value = ''
     scheduleNextRound(2000)
   } else if (message.type === 'document_modified') {
-    collaborationStore.currentDocument = message.content
+    collaborationStore.updateDocumentFromMessage(message)
-  } else if (message.type === 'agent_working') {
-    currentWorkingAgent.value = message.agentName
-    currentAgentThinking.value = ''
-  } else if (message.type === 'agent_thinking') {
-    currentAgentThinking.value = message.thinking || ''
   } else if (message.type === 'round_complete') {
     isRunningRound.value = false
-    collaborationStore.conversationHistory.push({
+    collaborationStore.updateDocumentFromMessage(message)
-      roundNumber: message.roundNumber,
-      agentsMadeChanges: message.agentsMadeChanges,
-      timestamp: Date.now()
-    })
-    currentWorkingAgent.value = null
-    currentAgentThinking.value = ''
 
-    if (hasConverged.value) {
+    // Check convergence
+    if (hasConverged.value && allAgentsConverged.value) {
+      // All agents converged - auto-complete after delay
       isAutoRunning.value = false
       setTimeout(() => {
         completeSession()
       }, 2000)
     } else {
+      // Schedule next round with delay
       scheduleNextRound(1500)
     }
   } else if (message.type === 'session_error') {
     console.error('Session error:', message.error)
     isRunningRound.value = false
     isAutoRunning.value = false
-    currentWorkingAgent.value = null
-  } else if (message.type === 'session_completed') {
-    currentWorkingAgent.value = null
-    isAutoRunning.value = false
   }
 }
 
 const scheduleNextRound = (delay) => {
   if (autoRunTimeout.value) clearTimeout(autoRunTimeout.value)
-  if (isStopping.value) return
   isAutoRunning.value = true
   autoRunTimeout.value = setTimeout(() => {
     runNextRoundAuto()
@@ -124,13 +115,13 @@ const scheduleNextRound = (delay) => {
 }
 
 const runNextRoundAuto = async () => {
-  if (isRunningRound.value || hasConverged.value || isStopping.value) return
+  if (isRunningRound.value || hasConverged.value) return
 
   isRunningRound.value = true
   try {
     await collaborationStore.runRound(props.sessionId)
   } catch (error) {
-    console.error('Error running round:', error)
+    console.error('Error running auto round:', error)
     isRunningRound.value = false
     isAutoRunning.value = false
   }
@@ -155,35 +146,23 @@ const completeSession = async () => {
   }
 }
 
-const stopSession = async () => {
-  isStopping.value = true
-  isAutoRunning.value = false
-  if (autoRunTimeout.value) clearTimeout(autoRunTimeout.value)
-  await completeSession()
-}
-
 const downloadDocument = () => {
   const format = currentSession.value?.documentFormat || 'md'
   const extension = format === 'md' ? 'md' : 'txt'
   collaborationStore.downloadDocument(`collaborative-document.${extension}`)
 }
-
-function formatAgentName(agent) {
-  if (!agent) return 'Unknown'
-  return agent.charAt(0).toUpperCase() + agent.slice(1)
-}
 </script>
 
 <template>
   <div class="collaborative-session">
-    <!-- Header -->
+    <!-- Header with minimal controls -->
     <div class="session-header">
       <div class="header-content">
         <h1>Collaborative Design</h1>
         <p class="session-meta">
           <span>Session #{{ sessionId }}</span>
-          <span class="badge" :class="{ active: sessionStarted, converged: hasConverged }">
+          <span class="badge" :class="{ active: sessionStarted, converged: allAgentsConverged }">
-            {{ hasConverged ? 'Converged' : sessionStarted ? 'Active' : 'Waiting' }}
+            {{ allAgentsConverged ? 'Converged' : sessionStarted ? 'Active' : 'Waiting' }}
           </span>
         </p>
       </div>
@@ -198,15 +177,6 @@ function formatAgentName(agent) {
           Download
         </button>
 
-        <button
-          v-if="isAutoRunning || isRunningRound"
-          @click="stopSession"
-          class="stop-btn"
-          title="Stop the session"
-        >
-          Stop
-        </button>
-
         <div v-if="isAutoRunning || isRunningRound" class="auto-run-indicator">
           <span class="pulse"></span>
           Auto-running...
@@ -214,31 +184,13 @@ function formatAgentName(agent) {
       </div>
     </div>
 
-    <!-- Working Agent Display -->
+    <!-- Status message -->
-    <div v-if="currentWorkingAgent" class="working-agent-card">
+    <div v-if="allAgentsConverged" class="convergence-message">
-      <div class="working-agent-header">
-        <div class="raised-hand-animation">
-          <span class="hand">✋</span>
-        </div>
-        <div class="agent-name-display">
-          <h3>{{ formatAgentName(currentWorkingAgent) }}</h3>
-          <p class="agent-label">is reviewing...</p>
-        </div>
-      </div>
-
-      <div v-if="currentAgentThinking" class="agent-thinking">
-        <p class="thinking-label">Thinking:</p>
-        <p class="thinking-content">{{ currentAgentThinking }}</p>
-      </div>
-    </div>
-
-    <!-- Convergence Message -->
-    <div v-if="hasConverged" class="convergence-message">
       <span class="checkmark">[OK]</span>
-      All {{ agentCount }} agents have reviewed and approved. Session complete!
+      All {{ agentCount }} agents have reviewed and approved. Auto-completing...
     </div>
 
-    <!-- Team Display -->
+    <!-- Team agents display -->
     <div class="team-display">
       <h3>Team</h3>
       <div class="team-grid">
@@ -248,7 +200,7 @@ function formatAgentName(agent) {
       </div>
     </div>
 
-    <!-- Main Document -->
+    <!-- Main Document Viewer -->
     <div class="document-section">
       <div class="document-header">
         <h2>Architecture Document</h2>
@@ -268,14 +220,6 @@ function formatAgentName(agent) {
   50% { opacity: 0.5; }
 }
 
-@keyframes raise-hand {
-  0% { transform: translateY(0) rotate(0deg); }
-  25% { transform: translateY(-10px) rotate(-5deg); }
-  50% { transform: translateY(-20px) rotate(5deg); }
-  75% { transform: translateY(-10px) rotate(-5deg); }
-  100% { transform: translateY(0) rotate(0deg); }
-}
-
 .collaborative-session {
   width: 100%;
   display: flex;
@@ -367,24 +311,6 @@ function formatAgentName(agent) {
   cursor: not-allowed;
 }
 
-.stop-btn {
-  padding: 0.75rem 1.5rem;
-  background: rgba(244, 67, 54, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  border-radius: 10px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-}
-
-.stop-btn:hover {
-  background: rgba(244, 67, 54, 0.95);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3);
-}
-
 .auto-run-indicator {
   display: flex;
   align-items: center;
@@ -407,70 +333,6 @@ function formatAgentName(agent) {
   animation: pulse 1.5s infinite;
 }
 
-.working-agent-card {
-  padding: 1.5rem;
-  background: rgba(102, 126, 234, 0.1);
-  border: 2px solid rgba(102, 126, 234, 0.4);
-  border-radius: 16px;
-  backdrop-filter: blur(10px);
-}
-
-.working-agent-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.raised-hand-animation {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  background: rgba(102, 126, 234, 0.2);
-  border-radius: 50%;
-}
-
-.hand {
-  font-size: 2rem;
-  animation: raise-hand 1s infinite;
-}
-
-.agent-name-display h3 {
-  margin: 0;
-  font-size: 1.3rem;
-  color: rgba(102, 126, 234, 0.95);
-}
-
-.agent-label {
-  margin: 0.25rem 0 0 0;
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.agent-thinking {
-  padding: 1rem;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-}
-
-.thinking-label {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: rgba(102, 126, 234, 0.9);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.thinking-content {
-  margin: 0;
-  font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 1.5;
-}
-
 .convergence-message {
   display: flex;
   align-items: center;
@@ -569,3 +431,12 @@ function formatAgentName(agent) {
   letter-spacing: 0.5px;
 }
 </style>
+
+<script>
+function formatAgentName(agent) {
+  return agent
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+</script>

frontend/src/components/TimelinePanel.vue

@@ -6,23 +6,28 @@ 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 allAgents = ['lead_architect', 'backend_engineer', 'frontend_engineer', 'ui_designer', 'devops_engineer', 'product_manager', 'security_specialist']
 
 const getAgentStatus = (round) => {
-  if (!round.agentsMadeChanges) return agents.value.map(agent => ({ name: agent, made_changes: false }))
+  if (!round.agentsMadeChanges) return []
-  return agents.value.map(agent => ({
+  return allAgents.map(agent => ({
-    name: agent,
+    name: formatAgentName(agent),
-    made_changes: round.agentsMadeChanges.includes(agent)
+    made_changes: round.agentsMadeChanges.includes(agent) || round.agentsMadeChanges.some(a => a.includes(agent))
   }))
 }
 
 const roundProgress = computed(() => {
-  if (agentCount.value === 0 || conversationHistory.value.length === 0) return 0
+  if (conversationHistory.value.length === 0) return 0
-  // Estimate progress: assume ~10 rounds max before convergence
+  return Math.round((conversationHistory.value.length / 10) * 100)
-  const maxRounds = Math.ceil(agentCount.value * 1.5)
-  return Math.min(Math.round((conversationHistory.value.length / maxRounds) * 100), 100)
 })
+
+function formatAgentName(agent) {
+  return agent
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
 </script>
 
 <template>
@@ -61,7 +66,7 @@ const roundProgress = computed(() => {
             :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>
+            <span class="agent-short">{{ agent.name.split(' ')[0].slice(0, 1) }}</span>
           </div>
         </div>
 
@@ -223,13 +228,9 @@ const roundProgress = computed(() => {
   height: 5px;
 }
 
-.agent-name {
+.agent-short {
   font-weight: 600;
-  font-size: 0.7rem;
+  font-size: 0.65rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 60px;
 }
 
 .changes-count {

frontend/src/stores/collaboration.js

@@ -143,14 +143,14 @@ export const useCollaborationStore = defineStore('collaboration', () => {
    */
   function updateDocumentFromMessage(message) {
     if (message.type === 'initial_document_created') {
-      currentDocument.value = message.content
+      currentDocument.value = message.document
       currentRound.value = 1
     } else if (message.type === 'document_modified') {
-      currentDocument.value = message.content
+      currentDocument.value = message.document
     } else if (message.type === 'round_complete') {
       conversationHistory.value.push({
         roundNumber: message.roundNumber,
-        agentsMadeChanges: message.agentsMadeChanges
+        agentsMadeChanges: message.agentsWhoModified
       })
     }
   }