Separate recommended models from rest to make it more clear

[lambertjosh]

This PR splits out the model list into two sections, a recommended section and the rest. We already sorted this so that recommended models appeared at the top, but other than the ordering there was no hint. This makes it more clear what we recommend folks to use and what should work well.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5e8812a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kiloconnect]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

This PR adds section headers ("Recommended models" and "All models") to model selection dropdowns. The implementation is clean and well-tested.

Key Changes:

• Added new DropdownOptionType.LABEL for section headers in select-dropdown.tsx
• Refactored usePreferredModels.ts to useGroupedModelIds returning { preferredModelIds, restModelIds }
• Updated ModelSelector.tsx and ModelPicker.tsx to use sectioned options
• Added translations for all 21 locales

Code Quality:

• ✅ Proper handling of edge cases (missing selected model, empty sections)
• ✅ Labels excluded from search but included in filtered results
• ✅ Empty labels (with no items after them) are properly removed
• ✅ Good test coverage for the new functionality

Files Reviewed (26 files)

• .changeset/model-picker-sections.md - changeset
• webview-ui/src/components/kilocode/chat/ModelSelector.tsx - main implementation
• webview-ui/src/components/kilocode/chat/__tests__/ModelSelector.spec.tsx - tests
• webview-ui/src/components/settings/ModelPicker.tsx - settings implementation
• webview-ui/src/components/ui/select-dropdown.tsx - LABEL type support
• webview-ui/src/components/ui/__tests__/select-dropdown.spec.tsx - tests
• webview-ui/src/components/ui/hooks/kilocode/usePreferredModels.ts - hook refactor
• webview-ui/src/components/ui/hooks/kilocode/__tests__/usePreferredModels.spec.ts - tests
• 21 locale files with new translation keys

[lambertjosh]

Session view:

Settings view:

[lambertjosh]

Note I am not seeing any models in the CLI, please hold.

[lambertjosh]

Note I am not seeing any models in the CLI, please hold.

Nevermind, rebasing fixed the issue I was seeing with the CLI. It's working fine and these changes are anyway localized to the webview.

[hassoncs]

Looks good to me! It's kind of annoying that we have two extremely similar yet different implementations of this dropdown that you had to update 😅

maybe remove those component tests, but otherwise approved!

[hassoncs]

I'd probably just leave these tests out– they aren't checking anything useful

[lambertjosh]

Thanks! I think I removed the section you were referring to.

[hassoncs]

#nit

Suggested change

	key={`section-${index}`}
	key={`label-${index}`}

[lambertjosh]

Fixed!

[hassoncs]

Do we need hasPreferred here? Could we just check to see if the preferredModelIds array is empty or not?

[lambertjosh]

Nope, I dithered on removing it and sure enough it is cleaner, thanks for the suggestion!

[lambertjosh]

@hassoncs - I think I addressed your feedback, can you do another pass?

[hassoncs]

LGTM! Thanks for updating it! :D