UI improvements: Stay on session page, simplified progress, gray inactive agents

Features:
- Session no longer redirects to home when converged
- Added 'Home' button to return to main page when session complete
- Simplified progress display: just shows 'Round N' instead of percentages
- Agents who didn't modify document appear in gray
- Better visual distinction between active and inactive agents

This provides better UX by keeping users on the session page until they
explicitly choose to start a new one, while still showing clear round
progress and agent contribution status.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.vue

@@ -48,7 +48,7 @@ function startNewCollaboration() {
         <CollaborativeSession
           v-if="currentSessionId"
           :session-id="currentSessionId"
-          @session-completed="startNewCollaboration"
+          @go-home="startNewCollaboration"
         />
       </div>
     </div>

frontend/src/components/CollaborativeSession.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['session-completed'])
+const emit = defineEmits(['go-home'])
 
 const collaborationStore = useCollaborationStore()
 const ws = useWebSocket(props.sessionId)
@@ -149,7 +149,7 @@ const completeSession = async () => {
     isAutoRunning.value = false
     if (autoRunTimeout.value) clearTimeout(autoRunTimeout.value)
     await collaborationStore.completeSession(props.sessionId)
-    emit('session-completed')
+    // Stay on the session page - don't redirect
   } catch (error) {
     console.error('Error completing session:', error)
   }
@@ -199,7 +199,7 @@ function formatAgentName(agent) {
         </button>
 
         <button
-          v-if="isAutoRunning || isRunningRound"
+          v-if="!hasConverged && (isAutoRunning || isRunningRound)"
           @click="stopSession"
           class="stop-btn"
           title="Stop the session"
@@ -207,6 +207,15 @@ function formatAgentName(agent) {
           Stop
         </button>
 
+        <button
+          v-if="hasConverged"
+          @click="$emit('go-home')"
+          class="home-btn"
+          title="Start new session"
+        >
+          Home
+        </button>
+
         <div v-if="isAutoRunning || isRunningRound" class="auto-run-indicator">
           <span class="pulse"></span>
           Auto-running...
@@ -385,6 +394,24 @@ function formatAgentName(agent) {
   box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3);
 }
 
+.home-btn {
+  padding: 0.75rem 1.5rem;
+  background: rgba(76, 175, 80, 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);
+}
+
+.home-btn:hover {
+  background: rgba(76, 175, 80, 0.95);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
+}
+
 .auto-run-indicator {
   display: flex;
   align-items: center;

frontend/src/components/TimelinePanel.vue

@@ -17,26 +17,14 @@ const getAgentStatus = (round) => {
   }))
 }
 
-const roundProgress = computed(() => {
+const totalRounds = computed(() => conversationHistory.value.length)
-  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 -->
+    <!-- Round Counter -->
     <div class="progress-section">
-      <div class="progress-header">
+      <div class="round-counter">Round {{ totalRounds }}</div>
-        <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 -->
@@ -90,50 +78,18 @@ const roundProgress = computed(() => {
 
 .progress-section {
   padding: 1rem;
-  background: rgba(102, 126, 234, 0.1);
+  background: rgba(102, 126, 234, 0.12);
   border: 1px solid rgba(102, 126, 234, 0.3);
   border-radius: 12px;
   backdrop-filter: blur(10px);
-}
+  text-align: center;
-
-.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: 1.2rem;
-  font-size: 0.875rem;
+  color: rgba(102, 126, 234, 0.9);
-  color: rgba(255, 255, 255, 0.6);
+  font-weight: 600;
-  font-weight: 500;
+  letter-spacing: 0.5px;
 }
 
 .timeline-list {
@@ -196,18 +152,18 @@ const roundProgress = computed(() => {
   align-items: center;
   gap: 0.3rem;
   padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(150, 150, 150, 0.15);
   border-radius: 6px;
   font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.35);
   cursor: help;
   transition: all 0.2s ease;
 }
 
 .agent-item.active {
-  background: rgba(76, 175, 80, 0.2);
+  background: rgba(76, 175, 80, 0.25);
-  color: rgba(76, 175, 80, 0.9);
+  color: rgba(76, 175, 80, 0.95);
-  border: 1px solid rgba(76, 175, 80, 0.3);
+  border: 1px solid rgba(76, 175, 80, 0.4);
 }
 
 .agent-dot {