diff --git a/packages/opencode-config/package.json b/packages/opencode-config/package.json index a1771bb5..3ec5198a 100644 --- a/packages/opencode-config/package.json +++ b/packages/opencode-config/package.json @@ -3,6 +3,6 @@ "version": "0.5.0", "private": true, "dependencies": { - "@opencode-ai/plugin": "1.1.30" + "@opencode-ai/plugin": "1.1.36" } } diff --git a/packages/server/src/config/schema.ts b/packages/server/src/config/schema.ts index d3cfeefc..10b6b325 100644 --- a/packages/server/src/config/schema.ts +++ b/packages/server/src/config/schema.ts @@ -16,6 +16,7 @@ const PreferencesSchema = z.object({ locale: z.string().optional(), environmentVariables: z.record(z.string()).default({}), modelRecents: z.array(ModelPreferenceSchema).default([]), + modelFavorites: z.array(ModelPreferenceSchema).default([]), modelThinkingSelections: z.record(z.string(), z.string()).default({}), diffViewMode: z.enum(["split", "unified"]).default("split"), toolOutputExpansion: z.enum(["expanded", "collapsed"]).default("expanded"), diff --git a/packages/ui/src/components/model-selector.tsx b/packages/ui/src/components/model-selector.tsx index 55078e1d..0c836813 100644 --- a/packages/ui/src/components/model-selector.tsx +++ b/packages/ui/src/components/model-selector.tsx @@ -1,10 +1,11 @@ import { Combobox } from "@kobalte/core/combobox" import { createEffect, createMemo, createSignal } from "solid-js" import { providers, fetchProviders } from "../stores/sessions" -import { ChevronDown } from "lucide-solid" +import { ChevronDown, Star } from "lucide-solid" import type { Model } from "../types/session" import { useI18n } from "../lib/i18n" import { getLogger } from "../lib/logger" +import { preferences, toggleFavoriteModelPreference } from "../stores/preferences" import Kbd from "./kbd" const log = getLogger("session") @@ -26,8 +27,19 @@ export default function ModelSelector(props: ModelSelectorProps) { const { t } = useI18n() const instanceProviders = () => providers().get(props.instanceId) || [] const [isOpen, setIsOpen] = createSignal(false) + const [manualAll, setManualAll] = createSignal(false) + const [explicitFavorites, setExplicitFavorites] = createSignal(false) + const [autoFavoritesEligibleAtOpen, setAutoFavoritesEligibleAtOpen] = createSignal(false) + const [searchDirty, setSearchDirty] = createSignal(false) + const [initialQuery, setInitialQuery] = createSignal("") + const [initialQueryReady, setInitialQueryReady] = createSignal(false) + const [inputValue, setInputValue] = createSignal("") let triggerRef!: HTMLButtonElement let searchInputRef!: HTMLInputElement + let listboxRef!: HTMLUListElement + let suppressNextClose = false + let wasFavoritesOnlyEnabled = false + let wasCurrentModelFavorite = false createEffect(() => { if (instanceProviders().length === 0) { @@ -46,61 +58,232 @@ export default function ModelSelector(props: ModelSelectorProps) { ), ) + const favoriteKeySet = createMemo(() => { + const result = new Set() + for (const item of preferences().modelFavorites ?? []) { + if (item.providerId && item.modelId) { + result.add(`${item.providerId}/${item.modelId}`) + } + } + return result + }) + + const favoriteModels = createMemo(() => { + const keys = favoriteKeySet() + if (keys.size === 0) return [] + return allModels().filter((m) => keys.has(m.key)) + }) + + const hasFavorites = createMemo(() => favoriteModels().length > 0) + const currentModelValue = createMemo(() => allModels().find((m) => m.providerId === props.currentModel.providerId && m.id === props.currentModel.modelId), ) + const currentModelIsFavorite = createMemo(() => { + const current = props.currentModel + return favoriteKeySet().has(`${current.providerId}/${current.modelId}`) + }) + + const currentModelKey = createMemo(() => { + const current = props.currentModel + return `${current.providerId}/${current.modelId}` + }) + + const searchActive = createMemo(() => { + if (!searchDirty()) return false + const next = inputValue().trim() + return next.length > 0 + }) + + const favoritesOnlyEnabled = createMemo(() => { + if (searchActive()) return false + if (manualAll()) return false + if (!hasFavorites()) return false + return explicitFavorites() || autoFavoritesEligibleAtOpen() + }) + + const visibleOptions = createMemo(() => { + if (!favoritesOnlyEnabled()) { + return allModels() + } + return favoriteModels() + }) + const handleChange = async (value: FlatModel | null) => { if (!value) return await props.onModelChange({ providerId: value.providerId, modelId: value.id }) } - const customFilter = (option: FlatModel, inputValue: string) => { - return option.searchText.toLowerCase().includes(inputValue.toLowerCase()) + const customFilter = (option: FlatModel, rawInput: string) => { + if (!searchDirty()) return true + return option.searchText.toLowerCase().includes(rawInput.toLowerCase()) } createEffect(() => { if (isOpen()) { + setManualAll(false) + setExplicitFavorites(false) + setAutoFavoritesEligibleAtOpen(hasFavorites() && currentModelIsFavorite()) + setSearchDirty(false) + setInitialQuery("") + setInputValue("") + setInitialQueryReady(false) setTimeout(() => { + const seeded = searchInputRef?.value ?? "" + setInitialQuery(seeded) + setInputValue(seeded) + setInitialQueryReady(true) searchInputRef?.focus() + searchInputRef?.select() }, 100) + } else { + setInitialQueryReady(false) + setSearchDirty(false) + setAutoFavoritesEligibleAtOpen(false) } }) + createEffect(() => { + if (!isOpen()) { + wasFavoritesOnlyEnabled = favoritesOnlyEnabled() + wasCurrentModelFavorite = currentModelIsFavorite() + return + } + + const nowFavoritesOnlyEnabled = favoritesOnlyEnabled() + const nowCurrentModelFavorite = currentModelIsFavorite() + + if (wasFavoritesOnlyEnabled && !nowFavoritesOnlyEnabled && wasCurrentModelFavorite && !nowCurrentModelFavorite) { + setTimeout(() => { + const key = currentModelKey() + const target = listboxRef?.querySelector(`[data-key="${key}"]`) as HTMLElement | null + target?.scrollIntoView({ block: "nearest" }) + }, 0) + } + + wasFavoritesOnlyEnabled = nowFavoritesOnlyEnabled + wasCurrentModelFavorite = nowCurrentModelFavorite + }) + + const handleSearchInput = (event: InputEvent & { currentTarget: HTMLInputElement }) => { + const next = event.currentTarget.value + setInputValue(next) + if (!initialQueryReady()) return + if (searchDirty()) return + if (next !== initialQuery()) { + setSearchDirty(true) + } + } + + const preventListboxPress = (event: PointerEvent | MouseEvent) => { + event.preventDefault() + event.stopImmediatePropagation?.() + event.stopPropagation() + suppressNextClose = true + setTimeout(() => { + suppressNextClose = false + }, 0) + } + + const toggleFavoritesOnly = () => { + if (!hasFavorites()) return + if (searchActive()) return + + if (favoritesOnlyEnabled()) { + setManualAll(true) + setExplicitFavorites(false) + setAutoFavoritesEligibleAtOpen(false) + return + } + + setExplicitFavorites(true) + setManualAll(false) + } + + const showAllModels = () => { + setManualAll(true) + setExplicitFavorites(false) + setAutoFavoritesEligibleAtOpen(false) + setTimeout(() => searchInputRef?.focus(), 0) + } + return (
+ open={isOpen()} value={currentModelValue()} onChange={handleChange} - onOpenChange={setIsOpen} - options={allModels()} + onOpenChange={(next) => { + if (!next && suppressNextClose) return + setIsOpen(next) + }} + options={visibleOptions()} optionValue="key" optionTextValue="searchText" optionLabel="name" placeholder={t("modelSelector.placeholder.search")} defaultFilter={customFilter} allowsEmptyCollection - itemComponent={(itemProps) => ( - -
- - {itemProps.item.rawValue.name} - - - {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/ - {itemProps.item.rawValue.id} - -
- - - - - - - )} + itemComponent={(itemProps) => { + const isFavorite = () => favoriteKeySet().has(itemProps.item.rawValue.key) + return ( + + <> +
+ {itemProps.item.rawValue.name} + + {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/{itemProps.item.rawValue.id} + +
+ + + + + + + + + ) + }} > @@ -130,13 +313,53 @@ export default function ModelSelector(props: ModelSelectorProps) {
- +
+ + +
+
+ +
+
- diff --git a/packages/ui/src/lib/i18n/messages/en/settings.ts b/packages/ui/src/lib/i18n/messages/en/settings.ts index 1b14c1ec..6ba19291 100644 --- a/packages/ui/src/lib/i18n/messages/en/settings.ts +++ b/packages/ui/src/lib/i18n/messages/en/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "Search models...", "modelSelector.none": "None", "modelSelector.trigger.primary": "Model: {model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "Toggle favorites only", + "modelSelector.favoritesOnly.showAll": "Show all models", + "modelSelector.favorite.add": "Add to favorites", + "modelSelector.favorite.remove": "Remove from favorites", "thinkingSelector.variant.default": "Default", "thinkingSelector.label": "Thinking: {variant}", diff --git a/packages/ui/src/lib/i18n/messages/es/settings.ts b/packages/ui/src/lib/i18n/messages/es/settings.ts index ca0a14f2..a504c18a 100644 --- a/packages/ui/src/lib/i18n/messages/es/settings.ts +++ b/packages/ui/src/lib/i18n/messages/es/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "Buscar modelos...", "modelSelector.none": "Ninguno", "modelSelector.trigger.primary": "Modelo: {model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "Alternar solo favoritos", + "modelSelector.favoritesOnly.showAll": "Mostrar todos los modelos", + "modelSelector.favorite.add": "Agregar a favoritos", + "modelSelector.favorite.remove": "Quitar de favoritos", "thinkingSelector.variant.default": "Por defecto", "thinkingSelector.label": "Pensamiento: {variant}", diff --git a/packages/ui/src/lib/i18n/messages/fr/settings.ts b/packages/ui/src/lib/i18n/messages/fr/settings.ts index 4c4badf8..facdaad2 100644 --- a/packages/ui/src/lib/i18n/messages/fr/settings.ts +++ b/packages/ui/src/lib/i18n/messages/fr/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "Rechercher des modèles...", "modelSelector.none": "Aucun", "modelSelector.trigger.primary": "Modèle : {model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "Basculer en favoris uniquement", + "modelSelector.favoritesOnly.showAll": "Afficher tous les modèles", + "modelSelector.favorite.add": "Ajouter aux favoris", + "modelSelector.favorite.remove": "Retirer des favoris", "thinkingSelector.variant.default": "Par défaut", "thinkingSelector.label": "Réflexion : {variant}", diff --git a/packages/ui/src/lib/i18n/messages/ja/settings.ts b/packages/ui/src/lib/i18n/messages/ja/settings.ts index 7f649992..3856fead 100644 --- a/packages/ui/src/lib/i18n/messages/ja/settings.ts +++ b/packages/ui/src/lib/i18n/messages/ja/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "モデルを検索...", "modelSelector.none": "なし", "modelSelector.trigger.primary": "モデル: {model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "お気に入りのみ", + "modelSelector.favoritesOnly.showAll": "すべてのモデルを表示", + "modelSelector.favorite.add": "お気に入りに追加", + "modelSelector.favorite.remove": "お気に入りから削除", "thinkingSelector.variant.default": "デフォルト", "thinkingSelector.label": "思考: {variant}", diff --git a/packages/ui/src/lib/i18n/messages/ru/settings.ts b/packages/ui/src/lib/i18n/messages/ru/settings.ts index 6f9c88a8..09cb228b 100644 --- a/packages/ui/src/lib/i18n/messages/ru/settings.ts +++ b/packages/ui/src/lib/i18n/messages/ru/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "Поиск моделей…", "modelSelector.none": "Нет", "modelSelector.trigger.primary": "Модель: {model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "Только избранное", + "modelSelector.favoritesOnly.showAll": "Показать все модели", + "modelSelector.favorite.add": "Добавить в избранное", + "modelSelector.favorite.remove": "Удалить из избранного", "thinkingSelector.variant.default": "По умолчанию", "thinkingSelector.label": "Размышления: {variant}", diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts index 179c10ed..77400102 100644 --- a/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts +++ b/packages/ui/src/lib/i18n/messages/zh-Hans/settings.ts @@ -28,6 +28,10 @@ export const settingsMessages = { "modelSelector.placeholder.search": "搜索模型...", "modelSelector.none": "无", "modelSelector.trigger.primary": "模型：{model}", + "modelSelector.favoritesOnly.toggle.ariaLabel": "仅显示收藏", + "modelSelector.favoritesOnly.showAll": "显示所有模型", + "modelSelector.favorite.add": "添加到收藏", + "modelSelector.favorite.remove": "从收藏移除", "thinkingSelector.variant.default": "默认", "thinkingSelector.label": "思考：{variant}", diff --git a/packages/ui/src/stores/preferences.tsx b/packages/ui/src/stores/preferences.tsx index 6ed3377f..95d623cf 100644 --- a/packages/ui/src/stores/preferences.tsx +++ b/packages/ui/src/stores/preferences.tsx @@ -40,6 +40,7 @@ export interface Preferences { locale?: string environmentVariables: Record modelRecents: ModelPreference[] + modelFavorites: ModelPreference[] modelThinkingSelections: Record diffViewMode: DiffViewMode toolOutputExpansion: ExpansionPreference @@ -66,6 +67,7 @@ export type ThemePreference = NonNullable const MAX_RECENT_FOLDERS = 20 const MAX_RECENT_MODELS = 5 +const MAX_FAVORITE_MODELS = 50 const defaultPreferences: Preferences = { showThinkingBlocks: false, @@ -73,6 +75,7 @@ const defaultPreferences: Preferences = { showTimelineTools: true, environmentVariables: {}, modelRecents: [], + modelFavorites: [], modelThinkingSelections: {}, diffViewMode: "split", toolOutputExpansion: "expanded", @@ -105,6 +108,9 @@ function normalizePreferences(pref?: Partial & { agentModelSelectio const sourceModelRecents = sanitized.modelRecents ?? defaultPreferences.modelRecents const modelRecents = sourceModelRecents.map((item) => ({ ...item })) + const sourceModelFavorites = sanitized.modelFavorites ?? defaultPreferences.modelFavorites + const modelFavorites = sourceModelFavorites.map((item) => ({ ...item })) + const modelThinkingSelections = { ...defaultPreferences.modelThinkingSelections, ...(sanitized.modelThinkingSelections ?? {}), @@ -118,6 +124,7 @@ function normalizePreferences(pref?: Partial & { agentModelSelectio locale: sanitized.locale ?? defaultPreferences.locale, environmentVariables, modelRecents, + modelFavorites, modelThinkingSelections, diffViewMode: sanitized.diffViewMode ?? defaultPreferences.diffViewMode, toolOutputExpansion: sanitized.toolOutputExpansion ?? defaultPreferences.toolOutputExpansion, @@ -132,6 +139,29 @@ function getModelKey(model: { providerId: string; modelId: string }): string { return `${model.providerId}/${model.modelId}` } +function isFavoriteModelPreference(model: ModelPreference): boolean { + if (!model.providerId || !model.modelId) return false + return (preferences().modelFavorites ?? []).some( + (item) => item.providerId === model.providerId && item.modelId === model.modelId, + ) +} + +function toggleFavoriteModelPreference(model: ModelPreference): void { + if (!model.providerId || !model.modelId) return + const favorites = preferences().modelFavorites ?? [] + const exists = favorites.some((item) => item.providerId === model.providerId && item.modelId === model.modelId) + + if (exists) { + const updated = favorites.filter((item) => item.providerId !== model.providerId || item.modelId !== model.modelId) + updatePreferences({ modelFavorites: updated }) + return + } + + const filtered = favorites.filter((item) => item.providerId !== model.providerId || item.modelId !== model.modelId) + const updated = [model, ...filtered].slice(0, MAX_FAVORITE_MODELS) + updatePreferences({ modelFavorites: updated }) +} + function getModelThinkingSelection(model: { providerId: string; modelId: string }): string | undefined { if (!model.providerId || !model.modelId) return undefined return preferences().modelThinkingSelections?.[getModelKey(model)] @@ -566,6 +596,8 @@ export { addEnvironmentVariable, removeEnvironmentVariable, addRecentModelPreference, + isFavoriteModelPreference, + toggleFavoriteModelPreference, getModelThinkingSelection, setModelThinkingSelection, setAgentModelPreference, diff --git a/packages/ui/src/styles/components/selector.css b/packages/ui/src/styles/components/selector.css index 0c6ba1aa..f6ea59fd 100644 --- a/packages/ui/src/styles/components/selector.css +++ b/packages/ui/src/styles/components/selector.css @@ -148,6 +148,61 @@ color: var(--accent-primary); } +.selector-option-action { + @apply flex items-center justify-center py-1; + color: var(--text-muted); +} + +.selector-option-star { + @apply p-1 rounded transition-colors flex-shrink-0 mt-0.5; + color: var(--text-muted); +} + +.selector-option-star[data-active="true"] { + color: var(--accent-primary); +} + +.selector-option-star:hover { + background-color: var(--surface-hover); +} + +.selector-option-star:focus-visible { + @apply ring-2; + ring-color: var(--accent-primary); +} + +.selector-favorites-toggle { + @apply p-2 rounded border transition-colors flex items-center justify-center; + background-color: var(--surface-base); + border-color: var(--border-base); + color: var(--text-muted); +} + +.selector-favorites-toggle[data-active="true"] { + color: var(--accent-primary); +} + +.selector-favorites-toggle:hover { + background-color: var(--surface-hover); +} + +.selector-favorites-toggle:focus-visible { + @apply ring-2; + ring-color: var(--accent-primary); +} + +.selector-favorites-toggle:disabled { + @apply opacity-50 cursor-not-allowed; +} + +.selector-footer { + @apply border-t; + border-color: var(--border-base); + background-color: var(--surface-base); + position: relative; + z-index: 1; +} + .selector-section { @apply px-3 py-2 border-b; border-color: var(--border-base);