Feat: Agregar sistema de alias para chats

- Agregar campo alias a tabla chats con migración 003
- Crear endpoint PUT /api/messages/:instanceId/:chatId/alias
- Modificar MCP para priorizar alias sobre nombres automáticos
- Crear modal ChatAliasModal para editar alias desde UI
- Agregar botón de editar alias en ChatItem
- Integrar modal en página de mensajes

El alias permite asignar nombres personalizados a chats que tienen
prioridad sobre los nombres de WhatsApp tanto en la interfaz como
en el MCP para agentes IA.

app/components/messages/ChatAliasModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <UModal v-model:open="isOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-white">Editar Alias</h3>
+            <UButton
+              variant="ghost"
+              icon="i-lucide-x"
+              size="sm"
+              @click="isOpen = false"
+            />
+          </div>
+        </template>
+
+        <div class="space-y-4">
+          <p class="text-sm text-[var(--wa-text-muted)]">
+            Asigna un nombre personalizado a este chat. El alias tiene prioridad sobre el nombre de WhatsApp.
+          </p>
+
+          <UFormField label="Alias">
+            <UInput
+              v-model="aliasValue"
+              placeholder="Nombre personalizado (dejar vacio para usar nombre original)"
+              icon="i-lucide-pencil"
+              size="lg"
+            />
+          </UFormField>
+
+          <div v-if="chat" class="p-3 rounded-lg bg-[var(--wa-bg-light)]">
+            <p class="text-xs text-[var(--wa-text-muted)] mb-1">Nombre original:</p>
+            <p class="text-sm text-white">{{ chat.originalName || chat.jid }}</p>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-between gap-2">
+            <UButton
+              v-if="aliasValue"
+              variant="ghost"
+              color="error"
+              icon="i-lucide-trash-2"
+              @click="clearAlias"
+            >
+              Quitar alias
+            </UButton>
+            <div class="flex-1" />
+            <UButton variant="ghost" @click="isOpen = false">
+              Cancelar
+            </UButton>
+            <UButton
+              :loading="isSaving"
+              @click="handleSave"
+            >
+              Guardar
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+interface Chat {
+  id: string
+  jid: string
+  name: string
+  alias?: string | null
+  originalName?: string
+  isGroup?: boolean
+}
+
+const props = defineProps<{
+  chat: Chat | null
+  instanceId: string
+}>()
+
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const emit = defineEmits<{
+  saved: [chat: Chat]
+}>()
+
+const isSaving = ref(false)
+const aliasValue = ref('')
+
+const clearAlias = () => {
+  aliasValue.value = ''
+}
+
+const handleSave = async () => {
+  if (!props.chat || !props.instanceId) return
+
+  isSaving.value = true
+  try {
+    const response = await $fetch(`/api/messages/${props.instanceId}/${props.chat.id}/alias`, {
+      method: 'PUT',
+      body: {
+        alias: aliasValue.value.trim() || null
+      }
+    })
+
+    if (response.success) {
+      emit('saved', {
+        ...props.chat,
+        alias: response.chat.alias,
+        name: response.chat.alias || props.chat.originalName || props.chat.name
+      })
+      isOpen.value = false
+    }
+  } catch (error) {
+    console.error('Error saving alias:', error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// Initialize alias when modal opens or chat changes
+watch([isOpen, () => props.chat], ([open, chat]) => {
+  if (open && chat) {
+    aliasValue.value = chat.alias || ''
+  }
+}, { immediate: true })
+</script>

app/components/messages/ChatItem.vue

@@ -13,9 +13,25 @@
 
       <div class="flex-1 min-w-0">
         <div class="flex items-center justify-between">
-          <p class="font-medium text-[var(--wa-text)] truncate">{{ chat.name }}</p>
+          <div class="flex items-center gap-1 min-w-0">
+            <p class="font-medium text-[var(--wa-text)] truncate">{{ chat.name }}</p>
+            <UIcon
+              v-if="chat.alias"
+              name="i-lucide-pencil"
+              class="w-3 h-3 text-[var(--wa-blue)] flex-shrink-0"
+              title="Tiene alias personalizado"
+            />
+          </div>
           <div class="flex items-center gap-1">
             <span class="text-xs text-[var(--wa-text-muted)]">{{ formatTime(chat.lastMessageAt) }}</span>
+            <!-- Edit alias button -->
+            <button
+              @click.stop="$emit('editAlias', chat)"
+              class="text-xs text-[var(--wa-text-muted)] hover:text-[var(--wa-blue)] opacity-50 hover:opacity-100"
+              title="Editar alias"
+            >
+              <UIcon name="i-lucide-user-pen" class="w-3 h-3" />
+            </button>
             <!-- Debug button -->
             <button
               @click.stop="showDebug = !showDebug"
@@ -72,6 +88,8 @@ interface Chat {
   lastMessageType?: string
   unreadCount: number
   isGroup?: boolean
+  alias?: string | null
+  originalName?: string
 }
 
 interface Props {
@@ -82,6 +100,7 @@ interface Props {
 const props = defineProps<Props>()
 defineEmits<{
   click: []
+  editAlias: [chat: Chat]
 }>()
 
 const showDebug = ref(false)

app/pages/messages/index.vue

@@ -118,6 +118,7 @@
               :chat="chat"
               :active="selectedChat?.id === chat.id"
               @click="selectedChat = chat"
+              @edit-alias="openAliasModal"
             />
           </div>
         </div>
@@ -251,6 +252,14 @@
       </div>
     </div>
 
+    <!-- Alias Modal -->
+    <MessagesChatAliasModal
+      v-model:open="showAliasModal"
+      :chat="chatToEditAlias"
+      :instance-id="selectedInstance?.value || ''"
+      @saved="handleAliasSaved"
+    />
+
     <!-- New Chat Modal -->
     <UModal v-model:open="showNewChatModal">
       <template #content>
@@ -344,6 +353,10 @@ const newChatPhoneNumber = ref('')
 const newChatLoading = ref(false)
 const newChatError = ref('')
 
+// Alias modal state
+const showAliasModal = ref(false)
+const chatToEditAlias = ref<any>(null)
+
 // Instance options for selector
 const instanceOptions = computed(() =>
   instances.value
@@ -723,6 +736,36 @@ const handleReact = async (message: any, emoji: string) => {
   }
 }
 
+// Alias modal functions
+const openAliasModal = (chat: any) => {
+  chatToEditAlias.value = {
+    ...chat,
+    originalName: chat.originalName || chat.name
+  }
+  showAliasModal.value = true
+}
+
+const handleAliasSaved = (updatedChat: any) => {
+  // Update chat in list
+  const index = chats.value.findIndex(c => c.id === updatedChat.id)
+  if (index !== -1) {
+    chats.value[index] = {
+      ...chats.value[index],
+      alias: updatedChat.alias,
+      name: updatedChat.name
+    }
+  }
+
+  // Update selected chat if it's the same
+  if (selectedChat.value?.id === updatedChat.id) {
+    selectedChat.value = {
+      ...selectedChat.value,
+      alias: updatedChat.alias,
+      name: updatedChat.name
+    }
+  }
+}
+
 // New chat modal functions
 const closeNewChatModal = () => {
   showNewChatModal.value = false