Function SuggestionMenu

cli/src/components/suggestion-menu.tsx:24–207

({
  items,
  selectedIndex,
  maxVisible,
  prefix = '/',
  onItemClick,
}: SuggestionMenuProps)

}

export const SuggestionMenu = ({
  items,
  selectedIndex,
  maxVisible,
  prefix = '/',
  onItemClick,
}: SuggestionMenuProps) => {
  const theme = useTheme()
  const { terminalWidth } = useTerminalDimensions()
  const screenPadding = 4
  const menuWidth = Math.max(10, terminalWidth - screenPadding * 2)

  // Hover state: only highlight on hover after user has moved mouse
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  const [hasHoveredSinceOpen, setHasHoveredSinceOpen] = useState(false)

  // Reset hover state when items change (new menu session)
  useEffect(() => {
    setHasHoveredSinceOpen(false)
    setHoveredIndex(null)
  }, [items])

  if (items.length === 0) {
    return null
  }

  const effectivePrefix = prefix ?? ''

  const clampedSelected = Math.min(
    Math.max(selectedIndex, 0),
    Math.max(items.length - 1, 0),
  )
  const visibleCount = Math.min(Math.max(maxVisible, 1), items.length)

  const maxStart = Math.max(items.length - visibleCount, 0)
  const idealStart = clampedSelected - Math.floor((visibleCount - 1) / 2)
  const start = Math.max(0, Math.min(idealStart, maxStart))
  const visibleItems = items.slice(start, start + visibleCount)

  // Calculate max label length for alignment
  const maxLabelLength = Math.max(
    ...visibleItems.map(
      (item) => effectivePrefix.length + item.label.length,
    ),
  )

  // Find the longest description to determine if we can use same-line layout
  const maxDescriptionLength = Math.max(
    ...visibleItems.map((item) => item.description.length),
  )

  // Check if all items can fit on same line with aligned descriptions
  const minWidthForSameLine = maxLabelLength + 2 + maxDescriptionLength
  const useSameLine = menuWidth >= minWidthForSameLine

  const renderSuggestionItem = (item: SuggestionItem, idx: number) => {
    const absoluteIndex = start + idx
    const isSelected = absoluteIndex === clampedSelected