diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte index e343a8d504..08ef662264 100644 --- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte @@ -51,11 +51,14 @@ // only llama-compat servers report a load state const isLlamaCompat = (option: ModelOption) => getBackendCapabilities(getBackend(option.backendId)).loadUnload; - const loaded = visible.filter( + // hidden models drop out of the sections and get their own block at the end + const shown = visible.filter((option) => !modelsStore.isHidden(option.id)); + const hidden = visible.filter((option) => modelsStore.isHidden(option.id)); + const loaded = shown.filter( (option) => isLlamaCompat(option) && modelsStore.isModelLoaded(option.model) ); const claimed = new SvelteSet(loaded.map((option) => option.id)); - const favorites = visible.filter( + const favorites = shown.filter( (option) => !claimed.has(option.id) && modelsStore.favoriteModelIds.has(option.model) ); @@ -63,7 +66,7 @@ const byBackend = new SvelteMap(); - for (const option of visible) { + for (const option of shown) { if (claimed.has(option.id)) continue; const backendId = option.backendId ?? LOCAL_BACKEND_ID; @@ -127,6 +130,17 @@ } } + if (hidden.length) { + ordered.push({ + backendId: null, + isLocal: false, + items: hidden, + key: 'hidden', + kind: 'hidden', + label: 'Hidden models' + }); + } + return ordered; }); let matches = $derived(groups.flatMap((group) => group.items)); diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte index 91fa142f30..38777e5d8b 100644 --- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte @@ -89,7 +89,7 @@ : []), { icon: isHidden ? Eye : EyeOff, - label: isHidden ? 'Show in selector' : 'Hide from selector', + label: isHidden ? 'Unhide model' : 'Hide model', onclick: () => modelsStore.toggleHidden(option.id), separator: true } @@ -133,10 +133,6 @@ - {#if isHidden} - - {/if} - {:else if group.kind === 'loaded'} + {:else if group.kind === 'hidden'} + {:else if group.kind === 'local'} {/if} @@ -224,6 +222,7 @@ count={group.items.length} icon={group.kind === 'provider' ? undefined : groupIcon} label={group.label} + open={group.kind !== 'hidden'} sticky > {#each group.items as option (option.id)} diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/utils.ts b/tools/ui/src/lib/components/app/models/ModelsManager/utils.ts index e4131f0e60..f4d75a3b3e 100644 --- a/tools/ui/src/lib/components/app/models/ModelsManager/utils.ts +++ b/tools/ui/src/lib/components/app/models/ModelsManager/utils.ts @@ -45,7 +45,7 @@ export interface ModelsTableGroup { items: ModelOption[]; key: string; /** Picks the header icon; providers use their backend logo instead. */ - kind: 'favorites' | 'loaded' | 'local' | 'provider'; + kind: 'favorites' | 'hidden' | 'loaded' | 'local' | 'provider'; label: string; } diff --git a/tools/ui/src/lib/components/app/models/ModelsSection.svelte b/tools/ui/src/lib/components/app/models/ModelsSection.svelte index 61e9d5f963..6abc585c00 100644 --- a/tools/ui/src/lib/components/app/models/ModelsSection.svelte +++ b/tools/ui/src/lib/components/app/models/ModelsSection.svelte @@ -19,6 +19,8 @@ loading?: boolean; /** Renders the back control, for a drilled-in provider. */ onBack?: () => void; + /** Start expanded; the manager collapses its hidden block. */ + open?: boolean; revealChevronOnHover?: boolean; sectionHeaderClass?: string; /** Sticks the header to the top of the scrollport. */ @@ -34,6 +36,7 @@ label, loading = false, onBack, + open = true, revealChevronOnHover = false, sectionHeaderClass = 'm-0 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none', sticky = false @@ -46,7 +49,7 @@ let triggerStyle = $derived(sticky ? 'top: var(--dropdown-sticky-height, 0px)' : ''); - + {#snippet trigger()} {#if onBack}