Model picker

Effort slider exports EffortPicker. Props are models, model, onModelChange, effort, onEffortChange, fast, onFastChange, defaultEffort and initialView. A model is an id, a name and a note. defaultEffort starts at Medium. initialView can be closed, effort or models, for demos. The trigger is a dialog button. The panel morphs between the effort view and the model list. Fast mode is a pressed toggle. Reset is labelled Reset to the default effort. The track is labelled Reasoning effort. Dragging or the arrow keys snap to the six stops. Home and End jump to the ends. In fast mode, bubbles drift through the fill, and more of them appear as the index rises. Without fast mode, small stops stay visible inside the fill. Ultra uses a violet gradient. The model list's first row shows its note inline. Other notes appear in a tooltip beside the row, hidden below the sm breakpoint. Choosing a model returns to the effort view. The first demo model is Default, with the note Picks a model for each task. A popover tries to stay inside the nearest data-popover-bounds element.

By provider exports T3Picker. Props are providers, model, onModelChange, effort, onEffortChange, fast, onFastChange, favorites, onFavoritesChange and defaultOpen. A provider has an id, a name, an icon, a color, an optional badge and models. A model can set short and legacy. The left trigger's accessible name is Model: plus the current name, and it shows the provider glyph and the short name. The right trigger is Effort: plus the level, and it adds fast mode on when fast is true, with a bolt. The model dialog is labelled Choose a model. A vertical tablist labelled Providers starts with Favorites, then one tab per provider. Search models filters provider name plus model name across the whole catalog. Legacy models is a row that shows the count and expands. Starring calls onFavoritesChange. The button reads Add or Remove, the model name, and to favorites or from favorites. An empty favorite tab says No favorites yet, and Star a model to keep it here. A failed search says Nothing matches. The effort dialog is labelled Effort and speed. Four bars form a radio group labelled Effort, with notes from Short answers, barely any thinking up to Takes its time on the hardest tasks. Hover previews a level without selecting it. Fast mode is a switch whose caption is Quicker replies, costs more.

Dropdown exports ModelPickerDropdown. Props are models, value, onChange and defaultOpen. Each model has an id, a name, a note, speed from 1 to 3, cost from 1 to 3, and an optional tag. The trigger shows the current name and a chevron that turns when open. Arrow keys on the trigger open the list. The listbox is labelled Model. Speed is three bolt icons, with an accessible name of Speed: N of 3. Cost is dollar signs, Cost: N of 3, the active ones in a darker zinc and the rest faded. A tag renders as a small pill. The demo marks Sonnet 5.5 with Default. The selected row gets a check. Highlight follows the pointer and the keyboard independently of selection, until Enter or Space commits and returns focus to the trigger. Escape and Tab close it. A pointer outside closes it too.

Segmented exports ModelPickerSegmented, plus the efforts table. Props are only value and onChange, and value is fast, balanced or deep. The group is labelled Response mode. Fast is Haiku 5.5 and Quick answers in a second or two. Balanced is Sonnet 5.5 and Good for most questions. Deep is Opus 5.5 and Thinks longer before it answers. The button title joins the model and the hint. Icons are hidden below sm. Arrow keys wrap and move focus. The selected tab is the only one in the tab order. The demo sits the control in a fake composer, next to a Send message button that is not part of the picker, and prints the model and hint underneath in a live region that swaps with a short vertical motion. Changing the choice does not change any other prop, because there is no model id to report.