UI: Agregar botones de debug en header de lista de chats y ventana de chat

app/pages/messages/index.vue

@@ -53,11 +53,29 @@
       <!-- Chat List -->
       <div class="col-span-4 instance-card overflow-hidden flex flex-col">
         <div class="p-4 border-b border-[var(--wa-border)]">
-          <UInput
+          <div class="flex items-center gap-2">
-            v-model="searchQuery"
+            <UInput
-            placeholder="Buscar conversacion..."
+              v-model="searchQuery"
-            icon="i-lucide-search"
+              placeholder="Buscar conversacion..."
-          />
+              icon="i-lucide-search"
+              class="flex-1"
+            />
+            <button
+              @click="showChatsDebug = !showChatsDebug"
+              class="text-xs px-2 py-2 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+              title="Debug chats array"
+            >
+              <UIcon name="i-lucide-bug" class="w-4 h-4" />
+            </button>
+          </div>
+          <!-- Chats Debug Panel -->
+          <div
+            v-if="showChatsDebug"
+            class="mt-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono max-h-60 overflow-auto"
+          >
+            <div class="text-gray-400 mb-1">Chats ({{ chats.length }}):</div>
+            <pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(chats, null, 2) }}</pre>
+          </div>
         </div>
 
         <div class="flex-1 overflow-y-auto">
@@ -89,11 +107,28 @@
 
         <template v-else>
           <!-- Chat Header -->
-          <div class="p-4 border-b border-[var(--wa-border)] flex items-center gap-3">
+          <div class="p-4 border-b border-[var(--wa-border)]">
-            <UAvatar :alt="selectedChat.name" size="md" />
+            <div class="flex items-center gap-3">
-            <div>
+              <UAvatar :alt="selectedChat.name" size="md" />
-              <p class="font-medium text-[var(--wa-text)]">{{ selectedChat.name }}</p>
+              <div class="flex-1">
-              <p class="text-sm text-[var(--wa-text-muted)]">{{ selectedChat.jid }}</p>
+                <p class="font-medium text-[var(--wa-text)]">{{ selectedChat.name }}</p>
+                <p class="text-sm text-[var(--wa-text-muted)]">{{ selectedChat.jid }}</p>
+              </div>
+              <button
+                @click="showSelectedChatDebug = !showSelectedChatDebug"
+                class="text-xs px-2 py-2 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+                title="Debug selected chat"
+              >
+                <UIcon name="i-lucide-bug" class="w-4 h-4" />
+              </button>
+            </div>
+            <!-- Selected Chat Debug Panel -->
+            <div
+              v-if="showSelectedChatDebug"
+              class="mt-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono max-h-40 overflow-auto"
+            >
+              <div class="text-gray-400 mb-1">Selected Chat:</div>
+              <pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(selectedChat, null, 2) }}</pre>
             </div>
           </div>
 
@@ -134,6 +169,8 @@ const messages = ref<any[]>([])
 const loadingChats = ref(false)
 const loadingMessages = ref(false)
 const showDebugPanel = ref(false)
+const showChatsDebug = ref(false)
+const showSelectedChatDebug = ref(false)
 
 // Instance options for selector
 const instanceOptions = computed(() =>