Improve archived sessions discovery and access

Backend improvements:
- Modify GET /api/collaborate/:id/document to return final_document for completed sessions
- Sessions archivées sont maintenant accessibles même si pas en mémoire active

Frontend improvements:
- Add search bar to filter sessions by ID or description
- Add search query state to allow real-time filtering
- Update session counts in filter buttons
- Enhance filteredSessions computed to include search query
- Add CSS styling for search input with focus effects
- Enable easy discovery and access to all archived sessions
- Sessions can now be searched, filtered by status, and browsed

backend/src/routes/collaborate.js

@@ -198,7 +198,9 @@ router.get('/:id', (req, res) => {
 
 /**
  * GET /api/collaborate/:id/document
- * Get the current document
+ * Get the current/final document
+ * For active sessions: returns currentDocument
+ * For completed sessions: returns final_document from DB
  */
 router.get('/:id/document', (req, res) => {
   try {
@@ -210,7 +212,10 @@ router.get('/:id/document', (req, res) => {
     }
 
     const activeSession = collaborativeOrchestrator.activeSessions.get(sessionId)
-    const currentDocument = activeSession?.currentDocument || ''
+    // Use final_document for completed sessions, otherwise use activeSession's current
+    const currentDocument = session.status === 'completed'
+      ? (session.final_document || '')
+      : (activeSession?.currentDocument || '')
 
     const contentType = session.document_format === 'md'
       ? 'text/markdown; charset=utf-8'

frontend/src/components/CollaborativeInput.vue

@@ -13,7 +13,9 @@ const isCreating = ref(false)
 const previousSessions = ref([])
 const loadingPreviousSessions = ref(false)
 const showAllSessions = ref(false)
+const showArchives = ref(false)
 const sessionStatusFilter = ref('all') // 'all', 'completed', 'ongoing', 'created'
+const searchQuery = ref('')
 
 onMounted(async () => {
   loadingPreviousSessions.value = true
@@ -46,6 +48,14 @@ const filteredSessions = computed(() => {
     filtered = filtered.filter(s => s.status === sessionStatusFilter.value)
   }
 
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase()
+    filtered = filtered.filter(s =>
+      s.prompt.toLowerCase().includes(query) ||
+      s.sessionId.toString().includes(query)
+    )
+  }
+
   return filtered
 })
 
@@ -153,6 +163,16 @@ const removeFile = () => {
           </div>
         </div>
 
+        <!-- Search Bar -->
+        <div class="search-bar">
+          <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search by session ID or description..."
+            class="search-input"
+          />
+        </div>
+
         <!-- Status Filter -->
         <div class="filter-tabs">
           <button
@@ -160,21 +180,21 @@ const removeFile = () => {
             class="filter-btn"
             :class="{ active: sessionStatusFilter === 'all' }"
           >
-            All Sessions
+            All Sessions ({{ previousSessions.length }})
           </button>
           <button
             @click="sessionStatusFilter = 'completed'"
             class="filter-btn"
             :class="{ active: sessionStatusFilter === 'completed' }"
           >
-            Completed
+            Completed ({{ completedCount }})
           </button>
           <button
             @click="sessionStatusFilter = 'ongoing'"
             class="filter-btn"
             :class="{ active: sessionStatusFilter === 'ongoing' }"
           >
-            In Progress
+            In Progress ({{ ongoingCount }})
           </button>
         </div>
 
@@ -739,6 +759,33 @@ const removeFile = () => {
   margin-top: 0.25rem;
 }
 
+.search-bar {
+  margin-bottom: 1.5rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  color: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  font-size: 0.95rem;
+  backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+}
+
+.search-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: rgba(102, 126, 234, 0.6);
+  background: rgba(102, 126, 234, 0.1);
+  box-shadow: 0 0 15px rgba(102, 126, 234, 0.2);
+}
+
 .filter-tabs {
   display: flex;
   gap: 0.75rem;