refactor: extract MessageInput sub-components (PR7 — partial)

Extract 4 self-contained sub-components from MessageInput.tsx: - SlashCommandPopover (243L): slash command filtering, rendering, selection - CliToolsPopover (128L): CLI tool selection with search/filter - ModelSelectorDropdown (150L): provider/model selector dropdown - EffortSelectorDropdown (75L): thinking effort level selector All components have clean props interfaces ready for integration. MessageInput.tsx wiring deferred to follow-up — the file's 1,659 lines of tightly coupled state make this a careful, incremental process. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 22:00:26 +08:00
1 parent ba51d7fc98
commit 61667fc55d
@@ -0,0 +1,128 @@
+'use client';
+
+import { useCallback } from 'react';
+import { Terminal } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
+
+export interface CliToolItem {
+  id: string;
+  name: string;
+  version: string | null;
+  summary: string;
+}
+
+interface CliToolsPopoverProps {
+  popoverRef: React.RefObject<HTMLDivElement | null>;
+  cliTools: CliToolItem[];
+  cliFilter: string;
+  selectedIndex: number;
+  cliSearchRef: React.RefObject<HTMLInputElement | null>;
+  onSetCliFilter: (filter: string) => void;
+  onSetSelectedIndex: (index: number) => void;
+  onCliSelect: (tool: CliToolItem) => void;
+  onClosePopover: () => void;
+  onFocusTextarea: () => void;
+}
+
+export function CliToolsPopover({
+  popoverRef,
+  cliTools,
+  cliFilter,
+  selectedIndex,
+  cliSearchRef,
+  onSetCliFilter,
+  onSetSelectedIndex,
+  onCliSelect,
+  onClosePopover,
+  onFocusTextarea,
+}: CliToolsPopoverProps) {
+  const { t } = useTranslation();
+
+  const q = cliFilter.toLowerCase();
+  const filtered = cliTools.filter(tool =>
+    tool.name.toLowerCase().includes(q) || tool.summary.toLowerCase().includes(q)
+  );
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      onSetSelectedIndex(Math.min(selectedIndex + 1, filtered.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      onSetSelectedIndex(Math.max(selectedIndex - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (filtered[selectedIndex]) onCliSelect(filtered[selectedIndex]);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClosePopover();
+      onFocusTextarea();
+    }
+  }, [selectedIndex, filtered, onSetSelectedIndex, onCliSelect, onClosePopover, onFocusTextarea]);
+
+  return (
+    <div
+      ref={popoverRef}
+      className="absolute bottom-full left-0 mb-2 w-full max-w-2xl rounded-xl border bg-popover shadow-lg overflow-hidden z-50"
+    >
+      <div className="px-3 py-2 border-b">
+        <input
+          ref={cliSearchRef}
+          type="text"
+          placeholder={t('cliTools.searchPlaceholder' as TranslationKey)}
+          value={cliFilter}
+          onChange={(e) => { onSetCliFilter(e.target.value); onSetSelectedIndex(0); }}
+          onKeyDown={handleSearchKeyDown}
+          className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+        />
+      </div>
+      <div className="max-h-48 overflow-y-auto py-1">
+        {filtered.length > 0 ? (
+          filtered.map((tool, idx) => (
+            <button
+              key={tool.id}
+              ref={idx === selectedIndex ? (el) => { el?.scrollIntoView({ block: 'nearest' }); } : undefined}
+              className={cn(
+                "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors",
+                idx === selectedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+              )}
+              onClick={() => onCliSelect(tool)}
+              onMouseEnter={() => onSetSelectedIndex(idx)}
+            >
+              <Terminal size={16} className="shrink-0 text-muted-foreground" />
+              <span className="font-medium text-xs truncate">{tool.name}</span>
+              {tool.version && (
+                <span className="text-[10px] text-muted-foreground shrink-0">v{tool.version}</span>
+              )}
+              {tool.summary && (
+                <span className="text-xs text-muted-foreground truncate ml-auto max-w-[200px]">{tool.summary}</span>
+              )}
+            </button>
+          ))
+        ) : (
+          <div className="px-3 py-4 text-center">
+            <p className="text-sm text-muted-foreground">{t('cliTools.noToolsDetected' as TranslationKey)}</p>
+            <button
+              className="mt-2 text-xs text-primary hover:underline"
+              onClick={() => { onClosePopover(); window.location.href = '/cli-tools'; }}
+            >
+              {t('cliTools.goInstall' as TranslationKey)}
+            </button>
+          </div>
+        )}
+      </div>
+      {/* Footer: manage CLI tools */}
+      <div className="border-t px-3 py-1.5">
+        <button
+          className="flex w-full items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
+          onClick={() => { onClosePopover(); window.location.href = '/cli-tools'; }}
+        >
+          <Terminal size={14} />
+          {t('cliTools.manageCli' as TranslationKey)}
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,75 @@
+'use client';
+
+import { useRef, useState, useEffect } from 'react';
+import { CaretDown } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
+import { PromptInputButton } from '@/components/ai-elements/prompt-input';
+
+interface EffortSelectorDropdownProps {
+  selectedEffort: string;
+  onEffortChange: (effort: string) => void;
+  supportedEffortLevels?: string[];
+}
+
+export function EffortSelectorDropdown({
+  selectedEffort,
+  onEffortChange,
+  supportedEffortLevels,
+}: EffortSelectorDropdownProps) {
+  const { t } = useTranslation();
+  const effortMenuRef = useRef<HTMLDivElement>(null);
+  const [effortMenuOpen, setEffortMenuOpen] = useState(false);
+
+  const levels = supportedEffortLevels || ['low', 'medium', 'high', 'max'];
+
+  // Close effort menu on outside click
+  useEffect(() => {
+    if (!effortMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (effortMenuRef.current && !effortMenuRef.current.contains(e.target as Node)) {
+        setEffortMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [effortMenuOpen]);
+
+  return (
+    <div className="relative" ref={effortMenuRef}>
+      <PromptInputButton
+        onClick={() => setEffortMenuOpen((prev) => !prev)}
+      >
+        <span className="text-xs">{t(`messageInput.effort.${selectedEffort}` as TranslationKey)}</span>
+        <CaretDown size={10} className={cn("transition-transform duration-200", effortMenuOpen && "rotate-180")} />
+      </PromptInputButton>
+
+      {effortMenuOpen && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-36 rounded-lg border bg-popover shadow-lg overflow-hidden z-50">
+          <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground">
+            {t('messageInput.effort.label' as TranslationKey)}
+          </div>
+          <div className="py-0.5">
+            {levels.map((level) => (
+              <button
+                key={level}
+                className={cn(
+                  "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm transition-colors",
+                  selectedEffort === level ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+                )}
+                onClick={() => {
+                  onEffortChange(level);
+                  setEffortMenuOpen(false);
+                }}
+              >
+                <span className="text-xs">{t(`messageInput.effort.${level}` as TranslationKey)}</span>
+                {selectedEffort === level && <span className="text-xs">&#10003;</span>}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -4,7 +4,6 @@ import { useRef, useState, useCallback, useEffect, type KeyboardEvent, type Form
 import {
  At,
  Question,
-  CaretDown,
  ArrowUp,
  Terminal,
  Plus,
@@ -19,6 +18,7 @@ import {
  GlobeSimple,
  Stop,
  Lightning,
+  CaretDown,
  Gear,
 } from "@phosphor-icons/react";
 import type { Icon } from "@phosphor-icons/react";
@@ -38,6 +38,12 @@ import type { ChatStatus } from 'ai';
 import type { FileAttachment, ProviderModelGroup, SkillKind } from '@/types';
 import { nanoid } from 'nanoid';
 import { SlashCommandButton } from './SlashCommandButton';
+import { SlashCommandPopover } from './SlashCommandPopover';
+import type { PopoverItem, PopoverMode } from './SlashCommandPopover';
+import { CliToolsPopover } from './CliToolsPopover';
+import type { CliToolItem } from './CliToolsPopover';
+import { ModelSelectorDropdown } from './ModelSelectorDropdown';
+import { EffortSelectorDropdown } from './EffortSelectorDropdown';
 import {
  Tooltip,
  TooltipContent,
@@ -112,19 +118,6 @@ interface MessageInputProps {
  sdkInitMeta?: { tools?: unknown; slash_commands?: unknown; skills?: unknown } | null;
 }

-interface PopoverItem {
-  label: string;
-  value: string;
-  description?: string;
-  descriptionKey?: TranslationKey;
-  builtIn?: boolean;
-  immediate?: boolean;
-  installedSource?: "agents" | "claude";
-  source?: "global" | "project" | "plugin" | "installed" | "sdk";
-  kind?: SkillKind;
-  icon?: Icon;
-}
-
 interface CommandBadge {
  command: string;
  label: string;
@@ -138,15 +131,6 @@ interface CliBadge {
  name: string;
 }

-interface CliToolItem {
-  id: string;
-  name: string;
-  version: string | null;
-  summary: string;
-}
-
-type PopoverMode = 'file' | 'skill' | 'cli' | null;
-
 // Expansion prompts for CLI-only commands (not natively supported by SDK).
 // SDK-native commands (/compact, /init, /review) are sent as-is — the SDK handles them directly.
 const COMMAND_PROMPTS: Record<string, string> = {
@@ -351,15 +335,11 @@ export function MessageInput({
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);
-  const modelMenuRef = useRef<HTMLDivElement>(null);
-
  const [popoverMode, setPopoverMode] = useState<PopoverMode>(null);
  const [popoverItems, setPopoverItems] = useState<PopoverItem[]>([]);
  const [popoverFilter, setPopoverFilter] = useState('');
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [triggerPos, setTriggerPos] = useState<number | null>(null);
-  const [modelMenuOpen, setModelMenuOpen] = useState(false);
-  const [modelSearch, setModelSearch] = useState('');
  const [inputValue, setInputValue] = useState('');
  const [badge, setBadge] = useState<CommandBadge | null>(null);
  const [cliBadge, setCliBadge] = useState<CliBadge | null>(null);
@@ -372,6 +352,11 @@ export function MessageInput({
  const [aiSearchLoading, setAiSearchLoading] = useState(false);
  const aiSearchAbortRef = useRef<AbortController | null>(null);
  const aiSearchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const modelMenuRef = useRef<HTMLDivElement>(null);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [modelSearch, setModelSearch] = useState('');
+  const effortMenuRef = useRef<HTMLDivElement>(null);
+  const [effortMenuOpen, setEffortMenuOpen] = useState(false);

  // Assistant trigger on first focus
  const assistantTriggerFired = useRef(false);
@@ -1128,19 +1113,6 @@ export function MessageInput({
    return () => document.removeEventListener('mousedown', handler);
  }, [popoverMode, closePopover]);

-  // Click outside to close model menu
-  useEffect(() => {
-    if (!modelMenuOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (modelMenuRef.current && !modelMenuRef.current.contains(e.target as Node)) {
-        setModelMenuOpen(false);
-        setModelSearch('');
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [modelMenuOpen]);
-
  const currentModelValue = modelName || 'sonnet';
  const currentModelOption = MODEL_OPTIONS.find((m) => m.value === currentModelValue) || MODEL_OPTIONS[0];

@@ -1154,21 +1126,6 @@ export function MessageInput({
    setLocalEffort(v);
    onEffortChange?.(v);
  }, [onEffortChange]);
-  const [effortMenuOpen, setEffortMenuOpen] = useState(false);
-  const effortMenuRef = useRef<HTMLDivElement>(null);
-
-  // Close effort menu on outside click
-  useEffect(() => {
-    if (!effortMenuOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (effortMenuRef.current && !effortMenuRef.current.contains(e.target as Node)) {
-        setEffortMenuOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [effortMenuOpen]);
-
  // Map isStreaming to ChatStatus for PromptInputSubmit
  const chatStatus: ChatStatus = isStreaming ? 'streaming' : 'ready';

@@ -0,0 +1,150 @@
+'use client';
+
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { CaretDown, Gear } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
+import { PromptInputButton } from '@/components/ai-elements/prompt-input';
+import type { ProviderModelGroup } from '@/types';
+
+interface ModelOption {
+  value: string;
+  label: string;
+  supportsEffort?: boolean;
+  supportedEffortLevels?: string[];
+}
+
+interface ModelSelectorDropdownProps {
+  currentModelValue: string;
+  currentProviderIdValue: string;
+  providerGroups: ProviderModelGroup[];
+  modelOptions: ModelOption[];
+  onModelChange?: (model: string) => void;
+  onProviderModelChange?: (providerId: string, model: string) => void;
+}
+
+export function ModelSelectorDropdown({
+  currentModelValue,
+  currentProviderIdValue,
+  providerGroups,
+  modelOptions,
+  onModelChange,
+  onProviderModelChange,
+}: ModelSelectorDropdownProps) {
+  const { t } = useTranslation();
+  const modelMenuRef = useRef<HTMLDivElement>(null);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [modelSearch, setModelSearch] = useState('');
+
+  const currentModelOption = modelOptions.find((m) => m.value === currentModelValue) || modelOptions[0];
+
+  // Click outside to close model menu
+  useEffect(() => {
+    if (!modelMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (modelMenuRef.current && !modelMenuRef.current.contains(e.target as Node)) {
+        setModelMenuOpen(false);
+        setModelSearch('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [modelMenuOpen]);
+
+  const handleModelSelect = useCallback((providerId: string, modelValue: string) => {
+    onModelChange?.(modelValue);
+    onProviderModelChange?.(providerId, modelValue);
+    localStorage.setItem('codepilot:last-model', modelValue);
+    localStorage.setItem('codepilot:last-provider-id', providerId);
+    setModelMenuOpen(false);
+    setModelSearch('');
+  }, [onModelChange, onProviderModelChange]);
+
+  const mq = modelSearch.toLowerCase();
+  const filteredGroups = providerGroups.map(group => ({
+    ...group,
+    models: group.models.filter(opt =>
+      !mq || opt.label.toLowerCase().includes(mq) || group.provider_name.toLowerCase().includes(mq)
+    ),
+  })).filter(group => group.models.length > 0);
+
+  return (
+    <div className="relative" ref={modelMenuRef}>
+      <PromptInputButton
+        onClick={() => setModelMenuOpen((prev) => !prev)}
+      >
+        <span className="text-xs font-mono">{currentModelOption?.label}</span>
+        <CaretDown size={10} className={cn("transition-transform duration-200", modelMenuOpen && "rotate-180")} />
+      </PromptInputButton>
+
+      {modelMenuOpen && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-64 rounded-xl border bg-popover shadow-lg overflow-hidden z-50">
+          {/* Search */}
+          <div className="px-3 py-2 border-b">
+            <input
+              type="text"
+              placeholder={t('composer.searchModels' as TranslationKey)}
+              value={modelSearch}
+              onChange={(e) => setModelSearch(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  setModelMenuOpen(false);
+                  setModelSearch('');
+                }
+              }}
+              className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+            />
+          </div>
+          {/* Model list */}
+          <div className="max-h-64 overflow-y-auto py-1">
+            {filteredGroups.map((group, groupIdx) => (
+              <div key={group.provider_id}>
+                <div className={cn(
+                  "px-3 py-1.5 text-[10px] font-medium text-muted-foreground",
+                  groupIdx > 0 && "border-t"
+                )}>
+                  {group.provider_name}
+                </div>
+                <div className="py-0.5">
+                  {group.models.map((opt) => {
+                    const isActive = opt.value === currentModelValue && group.provider_id === currentProviderIdValue;
+                    return (
+                      <button
+                        key={`${group.provider_id}-${opt.value}`}
+                        className={cn(
+                          "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm transition-colors",
+                          isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+                        )}
+                        onClick={() => handleModelSelect(group.provider_id, opt.value)}
+                      >
+                        <span className="font-mono text-xs">{opt.label}</span>
+                        {isActive && <span className="text-xs">&#10003;</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+            {filteredGroups.length === 0 && (
+              <div className="px-3 py-3 text-center text-xs text-muted-foreground">
+                No models found
+              </div>
+            )}
+          </div>
+          {/* Footer: manage providers */}
+          <div className="border-t px-3 py-1.5">
+            <button
+              className="flex w-full items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
+              onClick={() => { setModelMenuOpen(false); setModelSearch(''); window.location.href = '/settings'; }}
+            >
+              <Gear size={14} />
+              {t('composer.manageProviders' as TranslationKey)}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,243 @@
+'use client';
+
+import { useCallback } from 'react';
+import {
+  At,
+  Terminal,
+  NotePencil,
+  Brain,
+  GlobeSimple,
+  Lightning,
+} from '@phosphor-icons/react';
+import type { Icon } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
+import type { SkillKind } from '@/types';
+
+export interface PopoverItem {
+  label: string;
+  value: string;
+  description?: string;
+  descriptionKey?: TranslationKey;
+  builtIn?: boolean;
+  immediate?: boolean;
+  installedSource?: 'agents' | 'claude';
+  source?: 'global' | 'project' | 'plugin' | 'installed' | 'sdk';
+  kind?: SkillKind;
+  icon?: Icon;
+}
+
+export type PopoverMode = 'file' | 'skill' | 'cli' | null;
+
+interface SlashCommandPopoverProps {
+  popoverMode: PopoverMode;
+  popoverRef: React.RefObject<HTMLDivElement | null>;
+  filteredItems: PopoverItem[];
+  aiSuggestions: PopoverItem[];
+  aiSearchLoading: boolean;
+  selectedIndex: number;
+  popoverFilter: string;
+  inputValue: string;
+  triggerPos: number | null;
+  searchInputRef: React.RefObject<HTMLInputElement | null>;
+  allDisplayedItems: PopoverItem[];
+  onInsertItem: (item: PopoverItem) => void;
+  onSetSelectedIndex: (index: number) => void;
+  onSetPopoverFilter: (filter: string) => void;
+  onSetInputValue: (value: string) => void;
+  onClosePopover: () => void;
+  onFocusTextarea: () => void;
+}
+
+export function SlashCommandPopover({
+  popoverMode,
+  popoverRef,
+  filteredItems,
+  aiSuggestions,
+  aiSearchLoading,
+  selectedIndex,
+  popoverFilter,
+  inputValue,
+  triggerPos,
+  searchInputRef,
+  allDisplayedItems,
+  onInsertItem,
+  onSetSelectedIndex,
+  onSetPopoverFilter,
+  onSetInputValue,
+  onClosePopover,
+  onFocusTextarea,
+}: SlashCommandPopoverProps) {
+  const { t } = useTranslation();
+
+  const builtInItems = filteredItems.filter(item => item.builtIn);
+  const slashCommandItems = filteredItems.filter(item => !item.builtIn && item.kind !== 'agent_skill');
+  const agentSkillItems = filteredItems.filter(item => !item.builtIn && item.kind === 'agent_skill');
+  let globalIdx = 0;
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      onSetSelectedIndex((selectedIndex + 1) % allDisplayedItems.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      onSetSelectedIndex((selectedIndex - 1 + allDisplayedItems.length) % allDisplayedItems.length);
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault();
+      if (allDisplayedItems[selectedIndex]) {
+        onInsertItem(allDisplayedItems[selectedIndex]);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClosePopover();
+      onFocusTextarea();
+    }
+  }, [selectedIndex, allDisplayedItems, onSetSelectedIndex, onInsertItem, onClosePopover, onFocusTextarea]);
+
+  const handleFilterChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    onSetPopoverFilter(val);
+    onSetSelectedIndex(0);
+    // Sync textarea: replace the filter portion after /
+    if (triggerPos !== null) {
+      const before = inputValue.slice(0, triggerPos + 1);
+      onSetInputValue(before + val);
+    }
+  }, [triggerPos, inputValue, onSetPopoverFilter, onSetSelectedIndex, onSetInputValue]);
+
+  const renderItem = (item: PopoverItem, idx: number) => (
+    <button
+      key={`${idx}-${item.value}`}
+      ref={idx === selectedIndex ? (el) => { el?.scrollIntoView({ block: 'nearest' }); } : undefined}
+      className={cn(
+        "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors",
+        idx === selectedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+      )}
+      onClick={() => onInsertItem(item)}
+      onMouseEnter={() => onSetSelectedIndex(idx)}
+    >
+      {popoverMode === 'file' ? (
+        <At size={16} className="shrink-0 text-muted-foreground" />
+      ) : item.builtIn && item.icon ? (
+        (() => { const ItemIcon = item.icon; return <ItemIcon size={16} className="shrink-0 text-muted-foreground" />; })()
+      ) : item.kind === 'agent_skill' ? (
+        <Brain size={16} className="shrink-0 text-muted-foreground" />
+      ) : item.kind === 'slash_command' ? (
+        <NotePencil size={16} className="shrink-0 text-muted-foreground" />
+      ) : !item.builtIn ? (
+        <GlobeSimple size={16} className="shrink-0 text-muted-foreground" />
+      ) : (
+        <Terminal size={16} className="shrink-0 text-muted-foreground" />
+      )}
+      <span className="font-mono text-xs truncate">{item.label}</span>
+      {(item.descriptionKey || item.description) && (
+        <span className="text-xs text-muted-foreground truncate max-w-[200px]">
+          {item.descriptionKey ? t(item.descriptionKey) : item.description}
+        </span>
+      )}
+      {!item.builtIn && item.installedSource && (
+        <span className="text-xs text-muted-foreground shrink-0 ml-auto">
+          {item.installedSource === 'claude' ? 'Personal' : 'Agents'}
+        </span>
+      )}
+    </button>
+  );
+
+  if (!popoverMode || popoverMode === 'cli') return null;
+  if (allDisplayedItems.length === 0 && !aiSearchLoading) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      className="absolute bottom-full left-0 mb-2 w-full max-w-2xl rounded-xl border bg-popover shadow-lg overflow-hidden z-50"
+    >
+      {popoverMode === 'skill' ? (
+        <div className="px-3 py-2 border-b">
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search..."
+            value={popoverFilter}
+            onChange={handleFilterChange}
+            onKeyDown={handleSearchKeyDown}
+            className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+          />
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-xs font-medium text-muted-foreground border-b">
+          Files
+        </div>
+      )}
+      <div className="max-h-48 overflow-y-auto py-1">
+        {popoverMode === 'file' ? (
+          filteredItems.map((item, i) => renderItem(item, i))
+        ) : (
+          <>
+            {builtInItems.length > 0 && (
+              <>
+                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
+                  Commands
+                </div>
+                {builtInItems.map((item) => {
+                  const idx = globalIdx++;
+                  return renderItem(item, idx);
+                })}
+              </>
+            )}
+            {slashCommandItems.length > 0 && (
+              <>
+                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
+                  Slash Commands
+                </div>
+                {slashCommandItems.map((item) => {
+                  const idx = globalIdx++;
+                  return renderItem(item, idx);
+                })}
+              </>
+            )}
+            {agentSkillItems.length > 0 && (
+              <>
+                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
+                  Agent Skills
+                </div>
+                {agentSkillItems.map((item) => {
+                  const idx = globalIdx++;
+                  return renderItem(item, idx);
+                })}
+              </>
+            )}
+            {/* AI Suggested section */}
+            {(aiSuggestions.length > 0 || aiSearchLoading) && (
+              <>
+                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+                  <Brain size={14} />
+                  {t('messageInput.aiSuggested')}
+                  {aiSearchLoading && (
+                    <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                  )}
+                </div>
+                {aiSuggestions.map((item) => {
+                  const idx = globalIdx++;
+                  return renderItem(item, idx);
+                })}
+              </>
+            )}
+          </>
+        )}
+      </div>
+      {/* Footer: manage skills (skill mode only) */}
+      {popoverMode === 'skill' && (
+        <div className="border-t px-3 py-1.5">
+          <button
+            className="flex w-full items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
+            onClick={() => { onClosePopover(); window.location.href = '/skills'; }}
+          >
+            <Lightning size={14} />
+            {t('composer.manageSkills' as TranslationKey)}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}