El menú de menciones se maneja con el teclado

[ErickUser1]

Qué pasaba

Lo reportó un usuario: "A veces me quiere autocompletar por ejemplo el @agent y mi instinto es darle tab".

El menú de menciones solo funcionaba con el mouse:

• Tab sacaba el cursor de la caja.
• Enter mandaba el mensaje con el @ag a medias, que no despierta a nadie.
• No había opción resaltada ni forma de moverse con flechas.
• El hover tampoco se veía: --panel es del mismo tono que el fondo del menú.

Cambios

• MentionMenu.tsx: las opciones salen de opcionesDeMencion() (exportada), para que la caja de escribir sepa qué acepta el teclado. El menú recibe seleccion, marca la resaltada (mention-activo, con role="listbox"/"option") y el clic sigue igual.
• App.tsx: con el menú abierto, Tab o Enter aceptan la resaltada y ↑/↓ la mueven, dando la vuelta. Al cambiar lo escrito se vuelve a la primera. Con el menú cerrado, Enter manda como siempre, Shift+Enter hace salto de línea y Esc cierra el menú.
• styles.css: la resaltada y el hover se distinguen con un fondo más claro y una raya del color de acento.

Cómo se probó

Playwright contra el server real, en una sala con agente-1 (el menú ofrece @agente-1 y @agente). main falla 8 de 14; la rama pasa las 14:

• La primera opción sale resaltada.
• @ag + Tab da @agente-1 , el cursor sigue en la caja y el menú se cierra.
• ↓ + Tab da @agente ; ↑ desde la primera da la vuelta a la última.
• Enter con el menú abierto elige y no manda; Enter con el menú cerrado sí manda.
• Esc cierra el menú, y luego Tab no toca el texto.
• Con el mouse sigue funcionando.

Regresiones: primer mensaje (#105), mensajes confirmados (#106, sus 6 escenarios), npm run typecheck, npm run build y las 8 demos.

🤖 Generated with Claude Code

https://claude.ai/code/session_01HJ5oT2Xm3VZMvbPAcgKbz4

---

Generated by Claude Code