ui: Models Manager as Route + UI improvements

tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -477,12 +477,9 @@
 		queueMicrotask(() => inputRef?.focus());
 	}
 
-	// A flow outside the chat, e.g. the models manager closing onto it, asks for the
-	// composer back. The dialog's focus scope is still tearing down, so focus on a
-	// frame of its own.
+	// A flow outside the chat, e.g. the models page returning to it, asks for the
+	// composer back. Focus on a frame of its own, once the route has settled.
 	$effect(() => {
-		if (uiStore.manageModelsOpen) return;
-
 		if (!uiStore.composerFocusRequested) return;
 
 		uiStore.composerFocusRequested = false;

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import ModelsDiscover from '$lib/components/app/models/discover/ModelsDiscover.svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { DISCOVER_ICON } from '$lib/constants';
+	import { uiStore } from '$lib/stores';
+	import { untrack } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
+
+	// the setting can be turned off while the dialog is open: it closes and drops the
+	// repo it was asked to show
+	$effect(() => {
+		if (open && !uiStore.isDiscoverEnabled) {
+			untrack(() => {
+				uiStore.discoverModelFocus = null;
+				handleOpenChange(false);
+			});
+		}
+	});
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+		onOpenChange?.(value);
+	}
+</script>
+
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
+	<Dialog.Content
+		class="max-md:h-[100dvh]! max-md:w-screen! max-md:max-w-none! max-md:rounded-none! max-md:border-0! md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-380! flex flex-col p-4 pb-0"
+		onOpenAutoFocus={(event) => event.preventDefault()}
+	>
+		<Dialog.Header class="flex flex-row items-center p-2 pr-8">
+			<Dialog.Title class="flex min-h-7 items-center gap-2">
+				<DISCOVER_ICON class="h-5 w-5" />
+
+				<span>Discover</span>
+			</Dialog.Title>
+
+			<Dialog.Description class="sr-only">
+				Find models on Hugging Face and download them to the server.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="grid min-h-0 flex-1 overflow-hidden" style="grid-template-columns: auto 1fr;">
+			<ModelsDiscover />
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

tools/ui/src/lib/components/app/dialogs/index.ts

@@ -500,5 +500,5 @@ export { default as DialogMcpResourcePreview } from './DialogMcpResourcePreview.
  */
 export { default as DialogMermaidPreview } from './DialogMermaidPreview.svelte';
 
-/** **DialogManageModels** - shell for the models manager. */
-export { default as DialogManageModels } from './DialogManageModels.svelte';
+/** **DialogDiscoverModels** - shell for the Hugging Face model discovery view. */
+export { default as DialogDiscoverModels } from './DialogDiscoverModels.svelte';