From 7b9072aaed6493cbabb6d5e497bb6c3b797b90a1 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 22 Sep 2026 14:11:12 +0200
Subject: [PATCH] ui : strip the manage models chrome and match the discover
 shell

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/dialogs/DialogManageModels.svelte     | 18 ++------
 .../models/ModelsManager/ModelsManager.svelte |  5 +--
 .../ModelsManagerModelsTable.svelte           | 44 +++----------------
 .../SidebarNavigation.svelte                  |  8 +---
 4 files changed, 12 insertions(+), 63 deletions(-)

diff --git a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
index b3ecb910f0..b9cbcc6532 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-	import { Logo } from '$lib/components/app/misc';
 	import ModelsManager from '$lib/components/app/models/ModelsManager/ModelsManager.svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 
 	interface Props {
-		onOpenDiscover?: () => void;
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { onOpenChange, onOpenDiscover, open = $bindable(false) }: Props = $props();
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
 
 	function handleOpenChange(value: boolean) {
 		open = value;
@@ -19,18 +17,10 @@
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
-		class="flex flex-col md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-380! md:overflow-hidden"
+		class="grid gap-0 p-0 md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-380! md:overflow-hidden"
 	>
-		<Dialog.Header>
-			<Dialog.Title class="flex items-center gap-2">
-				<Logo class="h-5 w-5" style="--size: 1.25rem" />
+		<Dialog.Title class="sr-only">Manage models</Dialog.Title>
 
-				<span>Manage models</span>
-			</Dialog.Title>
-
-			<Dialog.Description>Model management goes here.</Dialog.Description>
-		</Dialog.Header>
-
-		<ModelsManager {onOpenDiscover} />
+		<ModelsManager />
 	</Dialog.Content>
 </Dialog.Root>
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 dec7eb028d..9db1aa92bb 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
@@ -21,10 +21,9 @@
 
 	interface Props {
 		onClose?: () => void;
-		onOpenDiscover?: () => void;
 	}
 
-	let { onClose, onOpenDiscover }: Props = $props();
+	let { onClose }: Props = $props();
 
 	let filter = $state('');
 	let selectedId = $state<string | null>(null);
@@ -187,14 +186,12 @@
 			{groups}
 			{isFavorite}
 			onCopyId={copyId}
-			onGetModels={() => onOpenDiscover?.()}
 			onSelect={(option) => (selectedId = option.id)}
 			onToggleFavorite={toggleFavorite}
 			onToggleLoad={(option) => void toggleLoad(option)}
 			onUseInNewChat={(option) => void useInNewChat(option)}
 			{selectedId}
 			{summary}
-			title="All models"
 		/>
 	</div>
 
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 eee37bc85f..b5ec7c2340 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ModelsTableGroup } from './utils';
 	import { modelParamsLabel, modelSizeLabel } from './utils';
-	import { ArrowUpDown, Heart, Loader2, MoreHorizontal, Plus } from '@lucide/svelte';
+	import { Heart, Loader2, MoreHorizontal } from '@lucide/svelte';
 	import { ModelAvatar, ModelId, ModelsSection } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -15,14 +15,12 @@
 		groups: ModelsTableGroup[];
 		isFavorite: (option: ModelOption) => boolean;
 		onCopyId: (option: ModelOption) => void;
-		onGetModels: () => void;
 		onSelect: (option: ModelOption) => void;
 		onToggleFavorite: (option: ModelOption) => void;
 		onToggleLoad: (option: ModelOption) => void;
 		onUseInNewChat: (option: ModelOption) => void;
 		selectedId: string | null;
 		summary: string;
-		title: string;
 	}
 
 	let {
@@ -30,25 +28,15 @@
 		groups,
 		isFavorite,
 		onCopyId,
-		onGetModels,
 		onSelect,
 		onToggleFavorite,
 		onToggleLoad,
 		onUseInNewChat,
 		selectedId,
-		summary,
-		title
+		summary
 	}: Props = $props();
 
-	let descending = $state(false);
-	let sortedGroups = $derived(
-		groups.map((group) => {
-			const items = [...group.items].sort((a, b) => a.name.localeCompare(b.name));
-
-			return { ...group, items: descending ? items.reverse() : items };
-		})
-	);
-	let isEmpty = $derived(sortedGroups.every((group) => group.items.length === 0));
+	let isEmpty = $derived(groups.every((group) => group.items.length === 0));
 	const rowGrid = 'grid grid-cols-[3.5rem_minmax(0,1fr)_5.5rem_3rem_4.5rem] items-center gap-3';
 
 	function stateOf(option: ModelOption): ServerModelStatus | null {
@@ -170,30 +158,10 @@
 {/snippet}
 
 <div class="flex h-full min-h-0 flex-col">
-	<div class="flex shrink-0 items-center gap-2 px-4 pt-3 pb-2">
-		<h3 class="text-sm font-medium">{title}</h3>
+	<div class="flex shrink-0 items-center gap-2 px-4 py-3">
+		<Input bind:value={filter} class="h-8 max-w-64 text-sm" placeholder="Filter models..." />
 
 		<span class="ml-auto text-xs text-muted-foreground">{summary}</span>
-
-		<Button class="h-7 gap-1 px-2 text-xs" onclick={onGetModels} variant="ghost">
-			<Plus class="h-3.5 w-3.5" />
-
-			Get models
-		</Button>
-
-		<Button
-			aria-label="Sort by name"
-			class="h-7 w-7"
-			onclick={() => (descending = !descending)}
-			size="icon"
-			variant="ghost"
-		>
-			<ArrowUpDown class="h-3.5 w-3.5" />
-		</Button>
-	</div>
-
-	<div class="flex shrink-0 items-center gap-2 px-4 pb-3">
-		<Input bind:value={filter} class="h-8 max-w-64 text-sm" placeholder="Filter models..." />
 	</div>
 
 	<div
@@ -211,7 +179,7 @@
 	</div>
 
 	<div class="min-h-0 flex-1 overflow-y-auto py-2">
-		{#each sortedGroups as group (group.key)}
+		{#each groups as group (group.key)}
 			{#if group.items.length > 0}
 				<ModelsSection
 					backendId={group.backendId ?? undefined}
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index e28836402a..0ef973d649 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -458,13 +458,7 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
-<DialogManageModels
-	bind:open={manageModelsOpen}
-	onOpenDiscover={() => {
-		manageModelsOpen = false;
-		modelsDiscoverOpen = true;
-	}}
-/>
+<DialogManageModels bind:open={manageModelsOpen} />
 
 <DialogModelsDiscover bind:open={modelsDiscoverOpen} />