feat: live message viewer

public/scripts/view-models.js

@@ -1243,6 +1243,9 @@ class EventViewModel extends ViewModel {
         super();
         this.setMultiple({
             events: new Map(), // Map of topic -> { parts: [], count: number, lastSeen: timestamp }
+            allMessages: [], // Array of all messages for live viewing
+            allMessagesCounter: 0, // Counter to trigger updates
+            selectedTopic: null, // Currently selected topic for drawer
             isLoading: false,
             error: null,
             lastUpdateTime: null
@@ -1265,6 +1268,26 @@ class EventViewModel extends ViewModel {
             const topic = data.topic || data.type;
             
             if (topic) {
+                // Store the full message
+                const allMessages = this.get('allMessages') || [];
+                const newMessage = {
+                    ...data,
+                    topic: topic,
+                    timestamp: new Date().toISOString(),
+                    id: `${topic}-${Date.now()}-${Math.random()}`
+                };
+                allMessages.push(newMessage);
+                
+                // Keep only the last 1000 messages to prevent memory issues
+                const maxMessages = 1000;
+                if (allMessages.length > maxMessages) {
+                    allMessages.splice(0, allMessages.length - maxMessages);
+                }
+                
+                // Update messages and trigger change notification
+                this.set('allMessages', allMessages);
+                this.set('allMessagesCounter', this.get('allMessagesCounter') + 1);
+                
                 this.addTopic(topic, data);
             }
         });
@@ -1278,6 +1301,36 @@ class EventViewModel extends ViewModel {
             logger.debug('EventViewModel: WebSocket disconnected');
         });
     }
+    
+    // Get messages for a specific topic
+    getMessagesForTopic(topic) {
+        const allMessages = this.get('allMessages') || [];
+        return allMessages.filter(msg => {
+            // Handle nested events from cluster/event
+            if (msg.topic === 'cluster/event' && msg.data) {
+                try {
+                    const parsedData = typeof msg.data === 'string' ? JSON.parse(msg.data) : msg.data;
+                    if (parsedData && parsedData.event) {
+                        const fullTopic = `${msg.topic}/${parsedData.event}`;
+                        return fullTopic === topic;
+                    }
+                } catch (e) {
+                    // If parsing fails, just use the original topic
+                }
+            }
+            return msg.topic === topic;
+        });
+    }
+    
+    // Set the selected topic for drawer
+    setSelectedTopic(topic) {
+        this.set('selectedTopic', topic);
+    }
+    
+    // Clear selected topic
+    clearSelectedTopic() {
+        this.set('selectedTopic', null);
+    }
 
     // Add a topic (parsed by "/" separator)
     addTopic(topic, data = null) {