diff --git a/src/components/room/MentionPopover.tsx b/src/components/room/MentionPopover.tsx
index f8b34df..734849c 100644
--- a/src/components/room/MentionPopover.tsx
+++ b/src/components/room/MentionPopover.tsx
@@ -1,13 +1,31 @@
 import type { ProjectRepositoryItem, RoomMemberResponse } from '@/client';
 import { buildMentionHtml, type MentionMentionType } from '@/lib/mention-ast';
 import { cn } from '@/lib/utils';
-import { Bot, Check, ChevronRight, SearchX } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ModelIcon } from './icon-match';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Bot,
+  Check,
+  ChevronRight,
+  Database,
+  GitBranch,
+  SearchX,
+  Sparkles,
+  User,
+} from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 /** Room AI config — the configured model for this room */
 export interface RoomAiConfig {
-  model: string; // model UID / model ID
+  model: string;
   modelName?: string;
 }
 
@@ -15,9 +33,7 @@ interface MentionSuggestion {
   type: 'category' | 'item';
   category?: MentionMentionType;
   label: string;
-  /** Display sub-label (e.g. "member · repo_name") */
   sublabel?: string;
-  /** ID used when building HTML mention (absent for category headers) */
   mentionId?: string;
   avatar?: string | null;
 }
@@ -35,13 +51,9 @@ interface PopoverPosition {
 }
 
 interface MentionPopoverProps {
-  /** Available members for @user: mention suggestions */
   members: RoomMemberResponse[];
-  /** Available repositories for @repository: mention suggestions */
   repos?: ProjectRepositoryItem[];
-  /** Room AI configs for @ai: mention suggestions */
   aiConfigs?: RoomAiConfig[];
-  /** Whether repos/aiConfigs are still loading */
   reposLoading?: boolean;
   aiConfigsLoading?: boolean;
   inputValue: string;
@@ -51,6 +63,304 @@ interface MentionPopoverProps {
   onOpenChange: (open: boolean) => void;
 }
 
+// Category configuration with icons and colors
+const CATEGORY_CONFIG: Record<
+  string,
+  {
+    icon: React.ReactNode;
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    gradient: string;
+  }
+> = {
+  repository: {
+    icon: <GitBranch className="h-3.5 w-3.5" />,
+    color: 'text-violet-600 dark:text-violet-400',
+    bgColor: 'bg-violet-500/10 dark:bg-violet-500/15',
+    borderColor: 'border-violet-500/20',
+    gradient: 'from-violet-500/5 to-transparent',
+  },
+  user: {
+    icon: <User className="h-3.5 w-3.5" />,
+    color: 'text-sky-600 dark:text-sky-400',
+    bgColor: 'bg-sky-500/10 dark:bg-sky-500/15',
+    borderColor: 'border-sky-500/20',
+    gradient: 'from-sky-500/5 to-transparent',
+  },
+  ai: {
+    icon: <Sparkles className="h-3.5 w-3.5" />,
+    color: 'text-emerald-600 dark:text-emerald-400',
+    bgColor: 'bg-emerald-500/10 dark:bg-emerald-500/15',
+    borderColor: 'border-emerald-500/20',
+    gradient: 'from-emerald-500/5 to-transparent',
+  },
+};
+
+// Highlight matched text
+function HighlightMatch({ text, match }: { text: string; match: string }) {
+  if (!match) return <>{text}</>;
+  const regex = new RegExp(`(${escapeRegExp(match)})`, 'gi');
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <span
+            key={i}
+            className="bg-yellow-500/20 text-yellow-700 dark:text-yellow-300 font-semibold rounded px-0.5"
+          >
+            {part}
+          </span>
+        ) : (
+          <span key={i}>{part}</span>
+        ),
+      )}
+    </>
+  );
+}
+
+function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Animated container component
+function AnimatedContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'animate-in fade-in zoom-in-95 duration-150 ease-out',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Category header component
+function CategoryHeader({
+  suggestion,
+  isSelected,
+}: {
+  suggestion: MentionSuggestion;
+  isSelected: boolean;
+}) {
+  const config = suggestion.category
+    ? CATEGORY_CONFIG[suggestion.category]
+    : null;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-3 py-2.5 text-xs font-medium text-muted-foreground',
+        'transition-colors duration-150',
+        isSelected && 'text-foreground bg-muted/50',
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-5 w-5 items-center justify-center rounded-md border',
+          config?.bgColor,
+          config?.borderColor,
+          config?.color,
+        )}
+      >
+        {config?.icon ?? <ChevronRight className="h-3 w-3" />}
+      </div>
+      <span className="flex-1">{suggestion.label}</span>
+      <ChevronRight className="h-3.5 w-3.5 opacity-50" />
+    </div>
+  );
+}
+
+// Item row component
+function SuggestionItem({
+  suggestion,
+  isSelected,
+  onSelect,
+  onMouseEnter,
+  searchTerm,
+}: {
+  suggestion: MentionSuggestion;
+  isSelected: boolean;
+  onSelect: () => void;
+  onMouseEnter: () => void;
+  searchTerm: string;
+}) {
+  const config = suggestion.category
+    ? CATEGORY_CONFIG[suggestion.category]
+    : null;
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-center gap-3 px-3 py-2.5 cursor-pointer',
+        'transition-all duration-150 ease-out',
+        'border-l-2 border-transparent',
+        isSelected && [
+          'bg-gradient-to-r',
+          config?.gradient ?? 'from-muted to-transparent',
+          'border-l-current',
+          config?.color ?? 'text-foreground',
+        ],
+        !isSelected && 'hover:bg-muted/40',
+      )}
+      onPointerDown={(e) => e.preventDefault()}
+      onClick={onSelect}
+      onMouseEnter={onMouseEnter}
+    >
+      {/* Avatar/Icon */}
+      <div className="relative shrink-0">
+        {suggestion.category === 'ai' ? (
+          <div
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg',
+              'bg-gradient-to-br from-emerald-500/20 to-emerald-600/10',
+              'border border-emerald-500/20',
+              'shadow-sm',
+            )}
+          >
+            <Bot className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+          </div>
+        ) : suggestion.category === 'repository' ? (
+          <div
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg',
+              'bg-gradient-to-br from-violet-500/20 to-violet-600/10',
+              'border border-violet-500/20',
+              'shadow-sm',
+            )}
+          >
+            <Database className="h-4 w-4 text-violet-600 dark:text-violet-400" />
+          </div>
+        ) : suggestion.avatar ? (
+          <Avatar size="sm" className="h-8 w-8 ring-2 ring-background">
+            <AvatarImage src={suggestion.avatar} alt={suggestion.label} />
+            <AvatarFallback className="bg-sky-500/10 text-sky-600 text-xs font-medium">
+              {suggestion.label.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          <div
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg',
+              'bg-gradient-to-br from-sky-500/20 to-sky-600/10',
+              'border border-sky-500/20',
+              'shadow-sm',
+            )}
+          >
+            <span className="text-xs font-semibold text-sky-600 dark:text-sky-400">
+              {suggestion.label[0]?.toUpperCase()}
+            </span>
+          </div>
+        )}
+
+        {/* Selection indicator dot */}
+        <div
+          className={cn(
+            'absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full',
+            'bg-primary border-2 border-background',
+            'transition-transform duration-150',
+            isSelected ? 'scale-100' : 'scale-0',
+          )}
+        />
+      </div>
+
+      {/* Text content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="block truncate text-sm font-medium">
+            <HighlightMatch text={suggestion.label} match={searchTerm} />
+          </span>
+          {suggestion.category && (
+            <span
+              className={cn(
+                'text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0',
+                'border',
+                config?.bgColor,
+                config?.color,
+                config?.borderColor,
+              )}
+            >
+              {suggestion.category}
+            </span>
+          )}
+        </div>
+        {suggestion.sublabel && (
+          <span className="block truncate text-xs text-muted-foreground mt-0.5">
+            {suggestion.sublabel}
+          </span>
+        )}
+      </div>
+
+      {/* Check mark for selected */}
+      <div
+        className={cn(
+          'flex items-center justify-center w-5 h-5 rounded-full',
+          'transition-all duration-150',
+          isSelected
+            ? 'bg-primary/10 text-primary'
+            : 'opacity-0 group-hover:opacity-30',
+        )}
+      >
+        <Check className="h-3.5 w-3.5" />
+      </div>
+    </div>
+  );
+}
+
+// Loading skeleton
+function LoadingSkeleton() {
+  return (
+    <div className="px-3 py-3 space-y-2">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center gap-3 py-1">
+          <Skeleton className="h-8 w-8 rounded-lg shrink-0" />
+          <div className="flex-1 space-y-1.5">
+            <Skeleton className="h-3.5 w-24" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Empty state
+function EmptyState({ loading }: { loading?: boolean }) {
+  return (
+    <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
+      <div
+        className={cn(
+          'flex h-12 w-12 items-center justify-center rounded-xl mb-3',
+          'bg-muted/80',
+        )}
+      >
+        {loading ? (
+          <div className="h-5 w-5 rounded-full border-2 border-primary/30 border-t-primary animate-spin" />
+        ) : (
+          <SearchX className="h-5 w-5 text-muted-foreground" />
+        )}
+      </div>
+      <p className="text-sm font-medium text-foreground">
+        {loading ? 'Loading suggestions...' : 'No matches found'}
+      </p>
+      <p className="text-xs text-muted-foreground mt-1">
+        {loading
+          ? 'Please wait a moment'
+          : 'Try a different search term'}
+      </p>
+    </div>
+  );
+}
+
 export function MentionPopover({
   members,
   repos = [],
@@ -66,18 +376,18 @@ export function MentionPopover({
   const [position, setPosition] = useState<PopoverPosition>({ top: 0, left: 0 });
   const [selectedIndex, setSelectedIndex] = useState(0);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const itemsRef = useRef<HTMLDivElement[]>([]);
 
-  // Stable mutable refs so keyboard handler always reads fresh values
+  // Stable mutable refs
   const mentionStateRef = useRef<MentionState | null>(null);
   const visibleSuggestionsRef = useRef<MentionSuggestion[]>([]);
   const selectedIndexRef = useRef(selectedIndex);
   const handleSelectRef = useRef<(s: MentionSuggestion) => void>(() => {});
   const closePopoverRef = useRef<() => void>(() => {});
 
-  // Parse mention state from input
+  // Parse mention state
   const mentionState = useMemo<MentionState | null>(() => {
     const textBeforeCursor = inputValue.slice(0, cursorPosition);
-    // Match @ but NOT @@ or mentions already inside HTML tags
     const atMatch = textBeforeCursor.match(/@([^:@\s<]*)(:([^\s<]*))?$/);
     if (!atMatch) return null;
 
@@ -92,13 +402,12 @@ export function MentionPopover({
     };
   }, [inputValue, cursorPosition]);
 
-  // Keep refs in sync with state
   mentionStateRef.current = mentionState;
 
   const categories: MentionSuggestion[] = [
-    { type: 'category', category: 'repository', label: 'Repository', value: '@repository:' },
-    { type: 'category', category: 'user', label: 'User', value: '@user:' },
-    { type: 'category', category: 'ai', label: 'AI', value: '@ai:' },
+    { type: 'category', category: 'repository', label: 'Repository' },
+    { type: 'category', category: 'user', label: 'User' },
+    { type: 'category', category: 'ai', label: 'AI' },
   ];
 
   const suggestions = useMemo((): MentionSuggestion[] => {
@@ -106,19 +415,17 @@ export function MentionPopover({
 
     const { category, item, hasColon } = mentionState;
 
-    // Before colon: show filtered category headers
     if (!hasColon) {
       if (!category) return categories;
       return categories.filter((c) => c.category?.startsWith(category));
     }
 
-    // Unknown category after colon: fallback to filtered categories
     if (!['repository', 'user', 'ai'].includes(category)) {
       return categories.filter((c) => c.category?.startsWith(category));
     }
 
     if (category === 'repository') {
-      if (reposLoading) return [{ type: 'category', label: 'Loading...', value: '' }];
+      if (reposLoading) return [{ type: 'category', label: 'Loading...' }];
       return repos
         .filter((r) => !item || r.repo_name.toLowerCase().includes(item))
         .slice(0, 8)
@@ -150,8 +457,7 @@ export function MentionPopover({
         });
     }
 
-    // category === 'ai'
-    if (aiConfigsLoading) return [{ type: 'category', label: 'Loading...', value: '' }];
+    if (aiConfigsLoading) return [{ type: 'category', label: 'Loading...' }];
     return aiConfigs
       .filter((cfg) => {
         const n = cfg.modelName ?? cfg.model;
@@ -172,23 +478,19 @@ export function MentionPopover({
   const visibleSuggestions = suggestions;
   visibleSuggestionsRef.current = visibleSuggestions;
 
-  // Auto-select first item when suggestion list changes
-  const prevSuggestionsLenRef = useRef(0);
+  // Auto-select first item
   useEffect(() => {
-    if (visibleSuggestions.length !== prevSuggestionsLenRef.current) {
-      setSelectedIndex(0);
-      prevSuggestionsLenRef.current = visibleSuggestions.length;
-    }
-  }, [visibleSuggestions.length]);
+    setSelectedIndex(0);
+    selectedIndexRef.current = 0;
+  }, [visibleSuggestions.length, mentionState?.category]);
 
-  // Auto-select best match: first item if category changed
-  const prevCategoryRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (mentionState?.category !== prevCategoryRef.current) {
-      setSelectedIndex(0);
-      prevCategoryRef.current = mentionState?.category ?? null;
+  // Scroll selected item into view
+  useLayoutEffect(() => {
+    const el = itemsRef.current[selectedIndex];
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
-  }, [mentionState?.category]);
+  }, [selectedIndex]);
 
   const closePopover = useCallback(() => {
     onOpenChange(false);
@@ -203,7 +505,11 @@ export function MentionPopover({
 
       const before = inputValue.slice(0, ms.startPos);
       const after = inputValue.slice(cursorPosition);
-      const html = buildMentionHtml(suggestion.category!, suggestion.mentionId!, suggestion.label);
+      const html = buildMentionHtml(
+        suggestion.category!,
+        suggestion.mentionId!,
+        suggestion.label,
+      );
       const spacer = ' ';
       const newValue = before + html + spacer + after;
       const newCursorPos = ms.startPos + html.length + spacer.length;
@@ -215,42 +521,40 @@ export function MentionPopover({
 
   handleSelectRef.current = handleSelect;
 
-  // Position cache: only recalculate when mentionState or cursor changes meaningfully
-  const posCacheRef = useRef<{
-    text: string;
-    cursor: number;
-    top: number;
-    left: number;
-  } | null>(null);
-
+  // Position calculation
   useEffect(() => {
     if (!mentionState || !textareaRef.current) return;
 
-    const cache = posCacheRef.current;
-    const text = inputValue.slice(0, cursorPosition);
-    if (cache && cache.text === text && cache.cursor === cursorPosition) {
-      setPosition({ top: cache.top, left: cache.left });
-      return;
-    }
-
     const textarea = textareaRef.current;
     const styles = window.getComputedStyle(textarea);
 
-    // Reuse a cached DOM element if possible; create only when needed
-    let tempDiv = (textarea as unknown as { _mentionTempDiv?: HTMLDivElement })._mentionTempDiv;
+    let tempDiv = (textarea as unknown as { _mentionTempDiv?: HTMLDivElement })
+      ._mentionTempDiv;
     if (!tempDiv) {
       tempDiv = document.createElement('div');
-      (textarea as unknown as { _mentionTempDiv: HTMLDivElement })._mentionTempDiv = tempDiv;
+      (textarea as unknown as { _mentionTempDiv: HTMLDivElement })._mentionTempDiv =
+        tempDiv;
       tempDiv.style.cssText =
         'position:absolute;visibility:hidden;top:-9999px;left:-9999px;pointer-events:none;';
       document.body.appendChild(tempDiv);
     }
 
+    const text = inputValue.slice(0, cursorPosition);
     const styleProps = [
-      'font-family', 'font-size', 'font-weight', 'line-height',
-      'padding-left', 'padding-right', 'padding-top', 'padding-bottom',
-      'border-left-width', 'border-right-width', 'border-top-width', 'border-bottom-width',
-      'box-sizing', 'width',
+      'font-family',
+      'font-size',
+      'font-weight',
+      'line-height',
+      'padding-left',
+      'padding-right',
+      'padding-top',
+      'padding-bottom',
+      'border-left-width',
+      'border-right-width',
+      'border-top-width',
+      'border-bottom-width',
+      'box-sizing',
+      'width',
     ] as const;
 
     tempDiv.style.width = styles.width;
@@ -270,17 +574,20 @@ export function MentionPopover({
     const contentTop = rect.top + borderTop + span.offsetTop - textarea.scrollTop;
     const contentLeft = rect.left + borderLeft + span.offsetLeft - textarea.scrollLeft;
 
-    const popoverWidth = 288;
-    const popoverHeight = Math.min(320, visibleSuggestions.length * 44 + 80);
-    const vp = 8;
+    const popoverWidth = 320;
+    const popoverHeight = Math.min(360, visibleSuggestions.length * 56 + 100);
+    const vp = 16;
 
-    const left = Math.min(Math.max(contentLeft, vp), window.innerWidth - popoverWidth - vp);
-    const shouldBelow = contentTop + lineHeight + 8 + popoverHeight < window.innerHeight - vp;
+    const left = Math.min(
+      Math.max(contentLeft, vp),
+      window.innerWidth - popoverWidth - vp,
+    );
+    const shouldBelow =
+      contentTop + lineHeight + 8 + popoverHeight < window.innerHeight - vp;
     const top = shouldBelow
       ? contentTop + lineHeight + 8
       : Math.max(vp, contentTop - popoverHeight - 8);
 
-    posCacheRef.current = { text, cursor: cursorPosition, top, left };
     setPosition({ top, left });
   }, [mentionState, inputValue, textareaRef, cursorPosition, visibleSuggestions.length]);
 
@@ -302,7 +609,8 @@ export function MentionPopover({
         selectedIndexRef.current = next;
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        const prev = (selectedIndexRef.current - 1 + vis.length) % Math.max(vis.length, 1);
+        const prev =
+          (selectedIndexRef.current - 1 + vis.length) % Math.max(vis.length, 1);
         setSelectedIndex(prev);
         selectedIndexRef.current = prev;
       } else if (e.key === 'Enter' || e.key === 'Tab') {
@@ -325,7 +633,8 @@ export function MentionPopover({
   useEffect(() => {
     const onPointerDown = (e: PointerEvent) => {
       const t = e.target as Node;
-      if (popoverRef.current?.contains(t) || textareaRef.current?.contains(t)) return;
+      if (popoverRef.current?.contains(t) || textareaRef.current?.contains(t))
+        return;
       closePopover();
     };
     document.addEventListener('pointerdown', onPointerDown);
@@ -339,91 +648,144 @@ export function MentionPopover({
   if (!mentionState) return null;
 
   const selectedItem = visibleSuggestions[selectedIndex];
+  const isLoading =
+    (mentionState.category === 'repository' && reposLoading) ||
+    (mentionState.category === 'ai' && aiConfigsLoading);
+
+  // Get current category for styling
+  const currentCategory = mentionState.hasColon
+    ? mentionState.category
+    : null;
+  const categoryConfig = currentCategory
+    ? CATEGORY_CONFIG[currentCategory]
+    : null;
 
   return (
-    <div
-      ref={popoverRef}
-      className="fixed z-50 w-72 overflow-hidden rounded-xl border border-border/90 bg-popover shadow-2xl"
-      style={{ top: position.top, left: position.left }}
-    >
-      {/* Header */}
-      <div className="flex items-center gap-1.5 border-b border-border/70 px-3 py-2">
-        <span className="text-xs font-medium text-muted-foreground">@</span>
-        <span className="text-xs text-muted-foreground truncate flex-1">
-          {mentionState.hasColon ? mentionState.category : 'type to filter'}
-          {mentionState.item ? `: ${mentionState.item}` : ''}
-        </span>
-      </div>
-
-      {/* Suggestion list */}
-      {visibleSuggestions.length > 0 ? (
-        <div className="max-h-72 overflow-y-auto p-1">
-          {visibleSuggestions.map((s, i) => (
-            <div
-              key={s.label + i}
-              className={cn(
-                'group flex items-center gap-2.5 rounded-lg px-3 py-2 cursor-pointer transition-colors',
-                i === selectedIndex
-                  ? 'bg-accent text-accent-foreground'
-                  : 'hover:bg-accent/60',
-              )}
-              onPointerDown={(e) => e.preventDefault()}
-              onClick={() => s.type === 'item' && handleSelect(s)}
-              onMouseEnter={() => {
-                setSelectedIndex(i);
-                selectedIndexRef.current = i;
-              }}
-            >
-              {/* Icon */}
-              <div
-                className={cn(
-                  'flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold',
-                  s.category === 'repository' && 'bg-purple-500/10 text-purple-600',
-                  s.category === 'user' && 'bg-blue-500/10 text-blue-600',
-                  s.category === 'ai' && 'bg-green-500/10 text-green-600',
-                  s.type === 'category' && 'bg-muted text-muted-foreground',
+    <AnimatedContainer>
+      <div
+        ref={popoverRef}
+        className={cn(
+          'fixed z-50 w-80 overflow-hidden',
+          'rounded-xl border border-border/50',
+          'bg-popover/95 backdrop-blur-xl',
+          'shadow-2xl shadow-black/10 dark:shadow-black/20',
+          'ring-1 ring-black/5 dark:ring-white/10',
+        )}
+        style={{ top: position.top, left: position.left }}
+      >
+        {/* Header */}
+        <div
+          className={cn(
+            'flex items-center gap-2 px-3 py-2.5 border-b border-border/50',
+            'bg-gradient-to-r from-muted/50 to-transparent',
+            categoryConfig && `from-${categoryConfig.gradient.split(' ')[0].replace('from-', '')}`,
+          )}
+        >
+          <div
+            className={cn(
+              'flex h-6 w-6 items-center justify-center rounded-md',
+              'bg-muted border border-border/50',
+              categoryConfig?.bgColor,
+              categoryConfig?.borderColor,
+            )}
+          >
+            <span className="text-xs font-semibold text-muted-foreground">@</span>
+          </div>
+          <div className="flex-1 flex items-center gap-1.5 min-w-0">
+            {mentionState.hasColon ? (
+              <>
+                <span
+                  className={cn(
+                    'text-xs font-medium px-1.5 py-0.5 rounded-md',
+                    categoryConfig?.bgColor,
+                    categoryConfig?.color,
+                  )}
+                >
+                  {mentionState.category}
+                </span>
+                {mentionState.item && (
+                  <>
+                    <span className="text-muted-foreground">/</span>
+                    <span className="text-xs text-foreground font-medium truncate">
+                      {mentionState.item}
+                    </span>
+                  </>
                 )}
-              >
-                {s.type === 'category' ? (
-                  <ChevronRight className="h-3.5 w-3.5" />
-                ) : s.category === 'ai' ? (
-                  <Bot className="h-4 w-4" />
-                ) : s.avatar ? (
-                  <img src={s.avatar} alt="" className="h-full w-full rounded-full object-cover" />
+              </>
+            ) : (
+              <span className="text-xs text-muted-foreground">
+                Type to filter mentions
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+            <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border/50 font-mono">
+              ↑↓
+            </kbd>
+            <span>navigate</span>
+          </div>
+        </div>
+
+        {/* Content */}
+        {visibleSuggestions.length > 0 ? (
+          <ScrollArea className="max-h-80">
+            <div className="py-1">
+              {visibleSuggestions.map((s, i) =>
+                s.type === 'category' ? (
+                  <CategoryHeader
+                    key={s.label + i}
+                    suggestion={s}
+                    isSelected={i === selectedIndex}
+                  />
                 ) : (
-                  s.label[0]?.toUpperCase()
-                )}
-              </div>
-
-              {/* Label */}
-              <div className="flex-1 min-w-0">
-                <span className="block truncate text-sm font-medium leading-tight">{s.label}</span>
-                {s.sublabel && (
-                  <span className="block truncate text-xs text-muted-foreground leading-tight">{s.sublabel}</span>
-                )}
-              </div>
-
-              {/* Check mark */}
-              {i === selectedIndex && s.type === 'item' && (
-                <Check className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <SuggestionItem
+                    key={s.mentionId || s.label + i}
+                    suggestion={s}
+                    isSelected={i === selectedIndex}
+                    onSelect={() => handleSelect(s)}
+                    onMouseEnter={() => {
+                      setSelectedIndex(i);
+                      selectedIndexRef.current = i;
+                    }}
+                    searchTerm={mentionState.item}
+                    ref={(el) => {
+                      if (el) itemsRef.current[i] = el;
+                    }}
+                  />
+                ),
               )}
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="flex items-center gap-2 px-3 py-5 text-sm text-muted-foreground">
-          <SearchX className="h-4 w-4 shrink-0" />
-          {reposLoading || aiConfigsLoading ? 'Loading…' : 'No matches'}
-        </div>
-      )}
+          </ScrollArea>
+        ) : isLoading ? (
+          <LoadingSkeleton />
+        ) : (
+          <EmptyState loading={isLoading} />
+        )}
 
-      {/* Footer hint */}
-      {selectedItem?.type === 'item' && (
-        <div className="border-t border-border/70 px-3 py-1.5 text-[11px] text-muted-foreground flex items-center gap-1.5">
-          <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">↵</kbd>
-          <span>to insert</span>
-        </div>
-      )}
-    </div>
+        {/* Footer */}
+        {selectedItem?.type === 'item' && (
+          <div className="flex items-center justify-between px-3 py-2 border-t border-border/50 bg-muted/30">
+            <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+              <span
+                className={cn(
+                  'px-1.5 py-0.5 rounded-md font-medium',
+                  categoryConfig?.bgColor,
+                  categoryConfig?.color,
+                )}
+              >
+                {selectedItem.category}
+              </span>
+              <span className="truncate max-w-[140px]">{selectedItem.label}</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <kbd className="px-1.5 py-0.5 rounded bg-muted border border-border/50 font-mono text-[10px]">
+                Enter
+              </kbd>
+              <span className="text-[10px] text-muted-foreground">to insert</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </AnimatedContainer>
   );
 }