Feature: debug buttons + SSE realtime updates

- Agregar boton debug en MessageBubble para ver objeto completo
- Agregar boton debug en ChatItem para ver objeto completo
- Crear useRealtime composable para conectar a SSE
- Agregar indicador de estado SSE en mensajes
- Agregar panel debug para ver ultimo evento SSE
- Auto-recargar chats/mensajes cuando llegan nuevos mensajes

app/pages/messages/index.vue

@@ -6,6 +6,36 @@
         <h1 class="text-2xl font-bold text-[var(--wa-text)]">Mensajes</h1>
         <p class="text-[var(--wa-text-muted)]">Vista de conversaciones de todas las instancias</p>
       </div>
+      <div class="flex items-center gap-2">
+        <!-- SSE Status -->
+        <span
+          class="flex items-center gap-1 text-xs px-2 py-1 rounded"
+          :class="isConnected ? 'bg-green-900/50 text-green-400' : 'bg-red-900/50 text-red-400'"
+        >
+          <span class="w-2 h-2 rounded-full" :class="isConnected ? 'bg-green-400' : 'bg-red-400'" />
+          {{ isConnected ? 'Realtime' : 'Offline' }}
+        </span>
+        <!-- Debug toggle -->
+        <button
+          @click="showDebugPanel = !showDebugPanel"
+          class="text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+        >
+          <UIcon name="i-lucide-bug" class="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Debug Panel -->
+    <div
+      v-if="showDebugPanel"
+      class="p-4 rounded bg-gray-900 border border-gray-700 text-xs font-mono"
+    >
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-gray-400">Last SSE Event:</span>
+        <span class="text-gray-500">{{ lastEvent?.timestamp?.toLocaleTimeString() || 'N/A' }}</span>
+      </div>
+      <pre v-if="lastEvent" class="text-green-400 whitespace-pre-wrap overflow-x-auto max-h-40">{{ JSON.stringify(lastEvent, null, 2) }}</pre>
+      <p v-else class="text-gray-500">No events received yet</p>
     </div>
 
     <!-- Instance Selector -->
@@ -94,6 +124,7 @@ definePageMeta({
 })
 
 const { instances, fetchInstances } = useInstances()
+const { isConnected, lastEvent, on } = useRealtime()
 
 const selectedInstance = ref<{ label: string; value: string } | null>(null)
 const searchQuery = ref('')
@@ -102,6 +133,7 @@ const chats = ref<any[]>([])
 const messages = ref<any[]>([])
 const loadingChats = ref(false)
 const loadingMessages = ref(false)
+const showDebugPanel = ref(false)
 
 // Instance options for selector
 const instanceOptions = computed(() =>
@@ -176,8 +208,48 @@ const handleSendMessage = async (content: string) => {
   }
 }
 
+// Reload chats for current instance
+const reloadChats = async () => {
+  if (!selectedInstance.value?.value) return
+  try {
+    chats.value = await $fetch(`/api/messages/${selectedInstance.value.value}/chats`)
+  } catch (e) {
+    console.error('Error reloading chats:', e)
+  }
+}
+
+// Reload messages for current chat
+const reloadMessages = async () => {
+  if (!selectedInstance.value?.value || !selectedChat.value) return
+  try {
+    messages.value = await $fetch(`/api/messages/${selectedInstance.value.value}/${selectedChat.value.id}`)
+  } catch (e) {
+    console.error('Error reloading messages:', e)
+  }
+}
+
 // Load instances on mount
 onMounted(() => {
   fetchInstances()
+
+  // Listen for real-time message events
+  on('message.received', (data) => {
+    console.log('[Messages] New message received:', data)
+
+    // If it's for the current instance, reload chats
+    if (data.instanceId === selectedInstance.value?.value) {
+      reloadChats()
+
+      // If it's for the current chat, reload messages
+      if (selectedChat.value?.jid === data.message?.key?.remoteJid) {
+        reloadMessages()
+      }
+    }
+  })
+
+  on('message.sent', (data) => {
+    console.log('[Messages] Message sent:', data)
+    // Already handled by the send function
+  })
 })
 </script>