From 85196c718b2d4fc074db65d8d1520fd0b8c8bfd2 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Wed, 16 Sep 2026 23:01:58 +0200 Subject: [PATCH] ui : apply the org name setting to every model id in the selector Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash --- .../ModelsSelectorDownloadItem.svelte | 6 +++-- .../ModelsSelectorDropdown.svelte | 21 ++++++++++------ .../ModelsSelector/ModelsSelectorList.svelte | 19 ++++++++------ .../ModelsSelector/ModelsSelectorSheet.svelte | 13 ++++++++-- .../lib/constants/settings-keys.constants.ts | 2 +- .../src/lib/constants/settings.constants.ts | 8 +++--- .../src/lib/stores/settings/index.svelte.ts | 25 +++++++++++++++++++ 7 files changed, 69 insertions(+), 25 deletions(-) diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte index 4a88a103ee..f2d9e64453 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte @@ -15,9 +15,11 @@ * the list renders a single shared confirmation. */ onRequestCancel?: (repoWithTag: string) => void; + /** Show the organization name in the repo id, as the other selector rows do. */ + showOrgName?: boolean; } - let { entry, onRequestCancel }: Props = $props(); + let { entry, onRequestCancel, showOrgName = true }: Props = $props(); let percent = $derived( entry.progress && entry.progress.totalBytes > 0 @@ -79,7 +81,7 @@ /> {/if} - + {#if percent !== null} {percent}% diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte index 192ebdb63b..9f0abc6685 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte @@ -76,9 +76,8 @@ const selectedOption = $derived(ms.getDisplayOption()); const triggerModel = $derived(selectedOption?.model ?? null); - const showOrgNameInTrigger = $derived( - settingsStore.config[SETTINGS_KEYS.SHOW_MODEL_ORG_NAME_IN_TRIGGER] ?? false - ); + // one setting for every model id in the selector: the trigger and the rows + const showOrgName = $derived(settingsStore.config[SETTINGS_KEYS.SHOW_MODEL_ORG_NAME] ?? true); $effect(() => { void ms.searchTerm; @@ -240,7 +239,7 @@ {#if selectedOption} @@ -309,7 +308,12 @@ role="option" type="button" > - + (not available) @@ -319,14 +323,14 @@

{ms.emptyMessage}

{/if} - {#snippet modelOption(item: ModelItem, _hideOrgName: boolean)} + {#snippet modelOption(item: ModelItem, hideOrgName: boolean)} {@const { option } = item} {@const isSelected = currentModel === option.model || ms.activeId === option.id} {@const isHighlighted = option.id === highlightedId} {@const isFav = ms.isFavorite(option.model)} @@ -400,7 +405,7 @@ {#if selectedOption} diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte index 2a493a33cf..b47ef970c3 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte @@ -17,6 +17,8 @@ renderOption?: import('svelte').Snippet<[ModelItem, boolean]>; /** Favorite models of every backend; shown on the favorites tab. */ favorites?: ModelItem[]; + /** Show the organization name in every model id of the list. */ + showOrgName?: boolean; /** Open one provider's full list, offered when a section is cut short. */ onProviderOpen?: (backendId: string) => void; /** Leave the drilled-in provider; enables the back affordance. */ @@ -33,7 +35,8 @@ onProviderOpen, onSelect, renderOption, - sectionHeaderClass = 'm-0 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none' + sectionHeaderClass = 'm-0 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none', + showOrgName = true }: Props = $props(); let render = $derived(renderOption ?? defaultOption); // section headers stick right below the search/tabs block of the dropdown @@ -57,13 +60,13 @@ } -{#snippet defaultOption(item: ModelItem, _hideOrgName: boolean)} +{#snippet defaultOption(item: ModelItem, hideOrgName: boolean)} {@const { option } = item} {@const isSelected = currentModel === option.model || activeId === option.id} {@const isFav = modelsStore.favoriteModelIds.has(option.model)} {#each favorites as item (`fav-${item.option.id}`)} - {@render render(item, true)} + {@render render(item, !showOrgName)} {/each} {#if getDownloadEntries.length > 0}

Download in progress

{#each getDownloadEntries as entry (entry.repoWithTag)} - + {/each} {/if} {#each groups.loaded as item (`loaded-${item.option.id}`)} - {@render render(item, false)} + {@render render(item, !showOrgName)} {/each} {#each groups.available as group (group.orgName)} {#each group.items as item (item.option.id)} - {@render render(item, true)} + {@render render(item, !showOrgName)} {/each} {/each} @@ -125,7 +128,7 @@ {#if provider.items.length > 0} {#each provider.items as item (`${provider.backendId}-${item.option.id}`)} - {@render render(item, true)} + {@render render(item, !showOrgName)} {/each} {#if onProviderOpen && provider.matched > provider.items.length} diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte index 5ecf0ab448..5735eaf39d 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte @@ -11,10 +11,11 @@ } from '$lib/components/app'; import { DialogBackendForm } from '$lib/components/app/backends'; import * as Sheet from '$lib/components/ui/sheet'; + import { SETTINGS_KEYS } from '$lib/constants'; import { ServerModelStatus } from '$lib/enums'; import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte'; import { useReasoningMenu } from '$lib/hooks/use-reasoning-menu.svelte'; - import { modelsStore } from '$lib/stores'; + import { modelsStore, settingsStore } from '$lib/stores'; import { modelLoadFraction } from '$lib/utils'; interface Props { @@ -50,6 +51,8 @@ }); const reasoning = useReasoningMenu(); + // one setting for every model id in the selector: the trigger and the rows + const showOrgName = $derived(settingsStore.config[SETTINGS_KEYS.SHOW_MODEL_ORG_NAME] ?? true); export function open() { ms.handleOpenChange(true); @@ -195,6 +198,7 @@ onProviderOpen={ms.openProvider} onSelect={ms.handleSelect} sectionHeaderClass="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none" + {showOrgName} /> @@ -222,7 +226,12 @@ > - + {#if ms.updating} diff --git a/tools/ui/src/lib/constants/settings-keys.constants.ts b/tools/ui/src/lib/constants/settings-keys.constants.ts index 4c7147fd98..f26c50cae1 100644 --- a/tools/ui/src/lib/constants/settings-keys.constants.ts +++ b/tools/ui/src/lib/constants/settings-keys.constants.ts @@ -57,7 +57,7 @@ export const SETTINGS_KEYS = { SHOW_FULL_PATH_IN_MENTIONS: 'showFullPathInMentions', // Display SHOW_MESSAGE_STATS: 'showMessageStats', - SHOW_MODEL_ORG_NAME_IN_TRIGGER: 'showModelOrgNameInTrigger', + SHOW_MODEL_ORG_NAME: 'showModelOrgName', SHOW_MODEL_QUANTIZATION: 'showModelQuantization', SHOW_MODEL_TAGS: 'showModelTags', SHOW_RAW_MODEL_NAMES: 'showRawModelNames', diff --git a/tools/ui/src/lib/constants/settings.constants.ts b/tools/ui/src/lib/constants/settings.constants.ts index cc4fda00b7..ed731678f7 100644 --- a/tools/ui/src/lib/constants/settings.constants.ts +++ b/tools/ui/src/lib/constants/settings.constants.ts @@ -318,10 +318,10 @@ export const SETTINGS_REGISTRY: SettingsSectionEntry[] = [ type: SettingsFieldType.CHECKBOX }, { - defaultValue: false, - help: 'Display the organization name in the model selector trigger button.', - key: SETTINGS_KEYS.SHOW_MODEL_ORG_NAME_IN_TRIGGER, - label: 'Show organization name in model selector trigger', + defaultValue: true, + help: 'Display the organization name alongside model names in the model selector, in the trigger and in the model rows.', + key: SETTINGS_KEYS.SHOW_MODEL_ORG_NAME, + label: 'Show organization name in model selector', type: SettingsFieldType.CHECKBOX }, { diff --git a/tools/ui/src/lib/stores/settings/index.svelte.ts b/tools/ui/src/lib/stores/settings/index.svelte.ts index a583a1423f..8ff59fd2b5 100644 --- a/tools/ui/src/lib/stores/settings/index.svelte.ts +++ b/tools/ui/src/lib/stores/settings/index.svelte.ts @@ -220,6 +220,7 @@ class SettingsStore { try { this.loadConfig(); this.migrateLegacyTheme(); + this.migrateModelOrgNameKey(); // Apply the persisted theme from config on initial load setMode(this.config[SETTINGS_KEYS.THEME] as ColorMode); this.isInitialized = true; @@ -475,6 +476,30 @@ class SettingsStore { } } + /** + * Move the trigger-only org name key onto the selector wide one. The setting + * grew from the trigger to every model id, so an explicit choice has to + * survive the rename. + */ + private migrateModelOrgNameKey() { + if (!browser) return; + + const legacyKey = 'showModelOrgNameInTrigger'; + const { config: saved } = SettingsService.loadConfig(); + + if (!(legacyKey in saved)) return; + + this.config[SETTINGS_KEYS.SHOW_MODEL_ORG_NAME] = Boolean(saved[legacyKey]); + + if (this.userOverrides.delete(legacyKey)) { + this.userOverrides.add(SETTINGS_KEYS.SHOW_MODEL_ORG_NAME); + } + + delete (this.config as Record)[legacyKey]; + + this.saveConfig(); + } + /** * Save the current configuration to localStorage via the persistence service. */