ui : open the manager on a model from its download row

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte

@@ -18,9 +18,9 @@
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
-		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-360! flex flex-col"
+		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-360! flex flex-col p-4"
 	>
-		<Dialog.Header>
+		<Dialog.Header class="p-2">
 			<Dialog.Title class="flex items-center gap-2">
 				<Logo class="h-5 w-5" style="--size: 1.25rem" />
 

tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte

@@ -11,7 +11,7 @@
 		saveOverrides
 	} from './utils';
 	import { LOCAL_BACKEND_ID } from '$lib/constants';
-	import { backendsStore, conversationsStore, modelsStore } from '$lib/stores';
+	import { backendsStore, conversationsStore, modelsStore, uiStore } from '$lib/stores';
 	import type { ModelOption } from '$lib/types/models';
 	import { getBackend } from '$lib/utils/api-base';
 	import { getBackendCapabilities } from '$lib/utils/backend';
@@ -164,6 +164,19 @@
 			.join(' · ');
 	});
 
+	// a caller can ask for one model to be revealed, the download rows do
+	$effect(() => {
+		const focus = uiStore.manageModelFocus;
+
+		if (!focus) return;
+
+		const option = allModels.find((model) => model.id === focus || model.model === focus);
+
+		if (option) selectedId = option.id;
+
+		uiStore.manageModelFocus = null;
+	});
+
 	async function toggleLoad(option: ModelOption): Promise<void> {
 		if (modelsStore.isModelLoaded(option.model)) {
 			await modelsStore.status.unload(option.model);

tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ModelsDiscoverAvatar from '../discover/ModelsDiscoverAvatar.svelte';
 	import ModelsDiscoverDownloadProgressBar from '../discover/ModelsDiscoverDownloadProgressBar.svelte';
-	import { Loader2, Pause, Play, X } from '@lucide/svelte';
+	import { Boxes, Loader2, Pause, Play, X } from '@lucide/svelte';
 	import { ModelId } from '$lib/components/app';
 	import { HuggingFaceService, ModelsService } from '$lib/services';
-	import { modelsStore } from '$lib/stores';
+	import { modelsStore, uiStore } from '$lib/stores';
 	import type { ModelDownloadProgress } from '$lib/types';
 
 	interface Props {
@@ -108,6 +108,15 @@
 		</span>
 	</button>
 
+	<button
+		aria-label="Manage model"
+		class="inline-flex h-4 w-4 shrink-0 scale-75 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/70 opacity-0 transition-[opacity,transform,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-foreground group-hover:scale-100 group-hover:opacity-100 [@media(pointer:coarse)]:scale-100 [@media(pointer:coarse)]:opacity-100"
+		onclick={() => uiStore.openModelsManager(entry.repoWithTag)}
+		type="button"
+	>
+		<Boxes class="h-4 w-4" />
+	</button>
+
 	<button
 		aria-label="Cancel downloading"
 		class="inline-flex h-4 w-4 shrink-0 scale-75 cursor-pointer items-center justify-center rounded-sm text-muted-foreground/70 opacity-0 transition-[opacity,transform,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-destructive group-hover:scale-100 group-hover:opacity-100 [@media(pointer:coarse)]:scale-100 [@media(pointer:coarse)]:opacity-100"

tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte

@@ -95,7 +95,6 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
-	let manageModelsOpen = $state(false);
 	let modelsDiscoverOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
@@ -394,7 +393,7 @@
 				class="px-2"
 				isExpandedMode={innerWidth > 768 ? uiStore.isSidebarExpanded : true}
 				onDiscoverModelsClick={() => (modelsDiscoverOpen = true)}
-				onManageModelsClick={() => (manageModelsOpen = true)}
+				onManageModelsClick={() => uiStore.openModelsManager()}
 				onNewChat={() => {
 					if (deviceStore.isMobile) {
 						scheduleMobileCollapse();
@@ -458,7 +457,7 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
-<DialogManageModels bind:open={manageModelsOpen} />
+<DialogManageModels bind:open={uiStore.manageModelsOpen} />
 
 <DialogModelsDiscover bind:open={modelsDiscoverOpen} />
 

tools/ui/src/lib/stores/ui.svelte.ts

@@ -9,6 +9,16 @@
 class UiStore {
 	/** Whether the desktop sidebar is expanded (open). */
 	isSidebarExpanded = $state(false);
+	/** Model the manager reveals when it opens, a qualified id or a raw model name. */
+	manageModelFocus = $state<string | null>(null);
+	/** Open state of the models manager, driven from the sidebar and from model rows. */
+	manageModelsOpen = $state(false);
+
+	/** Open the models manager, optionally focused on one model. */
+	openModelsManager(focus?: string): void {
+		this.manageModelFocus = focus ?? null;
+		this.manageModelsOpen = true;
+	}
 }
 
 export const uiStore = new UiStore();