From 3f56d5b38d29f533f217fb924036dbdb62fb9582 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 28 Sep 2026 15:15:25 +0200
Subject: [PATCH] ui : add the discover models components

The Discover surface: the curated-catalog list with its search and
skeletons, the details pane with its readme, metadata, Hub stats and
download options, and the standalone download progress bar that replaces
the plain one. The quant download button sizes its select with a new xs
trigger, so the select gains that size and the muted box look. The store
stays incomplete when a repo fails, so the next mount retries it.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../discover/DownloadProgressBar.svelte       |  32 --
 .../app/models/discover/ModelsDiscover.svelte | 138 +++++++++
 .../ModelsDiscoverChatTemplateDialog.svelte   |  67 +++++
 .../ModelsDiscoverDetails.svelte              |  96 ++++++
 ...odelsDiscoverDetailsDownloadOptions.svelte | 173 +++++++++++
 ...tailsDownloadOptionsDownloadCommand.svelte | 278 ++++++++++++++++++
 ...sDownloadOptionsQuantDownloadButton.svelte | 244 +++++++++++++++
 ...lsDiscoverDetailsDownloadOptionsRow.svelte |  60 ++++
 .../download-options.utils.ts                 |  28 ++
 .../index.ts                                  |  40 +++
 .../ModelsDiscoverDetailsHeader.svelte        |  94 ++++++
 .../ModelsDiscoverDetailsHfHubStats.svelte    |  31 ++
 .../ModelsDiscoverDetailsMetadata.svelte      |  80 +++++
 .../ModelsDiscoverDetailsMetadataItem.svelte  |  17 ++
 .../ModelsDiscoverDetailsReadme.svelte        |  17 ++
 .../ModelsDiscoverDetailsSkeleton.svelte      |  93 ++++++
 .../discover/ModelsDiscoverDetails/index.ts   |  72 +++++
 .../ModelsDiscoverList.svelte                 |  41 +++
 .../ModelsDiscoverListItem.svelte             | 129 ++++++++
 .../ModelsDiscoverListItemSkeleton.svelte     |  39 +++
 .../ModelsDiscoverListSearch.svelte           |  26 ++
 .../discover/ModelsDiscoverList/index.ts      |  38 +++
 .../components/app/models/discover/index.ts   |  39 +++
 .../ui/select/select-content.svelte           |   4 +-
 .../ui/select/select-trigger.svelte           |  14 +-
 .../stores/models-discover/index.svelte.ts    |  13 +-
 26 files changed, 1862 insertions(+), 41 deletions(-)
 delete mode 100644 tools/ui/src/lib/components/app/models/discover/DownloadProgressBar.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/index.ts
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHfHubStats.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts
 create mode 100644 tools/ui/src/lib/components/app/models/discover/index.ts

diff --git a/tools/ui/src/lib/components/app/models/discover/DownloadProgressBar.svelte b/tools/ui/src/lib/components/app/models/discover/DownloadProgressBar.svelte
deleted file mode 100644
index c3a89c0ba4..0000000000
--- a/tools/ui/src/lib/components/app/models/discover/DownloadProgressBar.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	interface Props {
-		downloadedBytes: number;
-		totalBytes: number;
-		overlay?: boolean;
-	}
-
-	let { downloadedBytes, overlay = false, totalBytes }: Props = $props();
-
-	let fraction = $derived.by(() => {
-		if (totalBytes <= 0) return 0;
-
-		return Math.min(Math.max(downloadedBytes / totalBytes, 0), 1);
-	});
-	let percent = $derived(Math.round(fraction * 100));
-</script>
-
-{#if overlay}
-	<div class="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 overflow-hidden rounded-b-sm">
-		<div
-			class="h-full animate-pulse bg-primary transition-[width] duration-200 ease-out"
-			style="width: {percent}%"
-		></div>
-	</div>
-{:else}
-	<div class="h-1 w-full overflow-hidden rounded-full bg-muted">
-		<div
-			class="h-full animate-pulse bg-primary transition-[width] duration-200 ease-out"
-			style="width: {percent}%"
-		></div>
-	</div>
-{/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
new file mode 100644
index 0000000000..01b4e90e0a
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import {
+		ModelsDiscoverDetails,
+		ModelsDiscoverList,
+		ModelsDiscoverListSearch
+	} from '$lib/components/app/models/discover';
+	import { Button } from '$lib/components/ui/button';
+	import { HuggingFaceService } from '$lib/services';
+	import { modelsDiscoverStore } from '$lib/stores';
+	import type { HfModelDetailInfo, HfModelSibling } from '$lib/types';
+
+	let selectedId = $state<string | null>(null);
+	let searchQuery = $state('');
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	// Detail pane state, reloaded when the selection changes.
+	let details = $state<HfModelDetailInfo | null>(null);
+	let files = $state<HfModelSibling[]>([]);
+	let readme = $state<string | null>(null);
+	let detailLoading = $state(false);
+	let detailError = $state<string | null>(null);
+
+	// Load the sidebar list on mount (the component is mounted when the dialog opens).
+	$effect(() => {
+		void modelsDiscoverStore.fetch();
+		void modelsDiscoverStore.search('');
+	});
+
+	// Auto-select the first model.
+	$effect(() => {
+		const first = modelsDiscoverStore.firstModel;
+
+		if (!selectedId && first) {
+			selectedId = first.id;
+		}
+	});
+
+	function handleSearchInput(value: string) {
+		searchQuery = value;
+
+		if (searchTimeout) clearTimeout(searchTimeout);
+
+		searchTimeout = setTimeout(() => {
+			void modelsDiscoverStore.search(value);
+		}, 300);
+	}
+
+	// Load the detail pane for the selected model (component is reused across
+	// selections, so this re-fetches on every change).
+	$effect(() => {
+		const id = selectedId;
+
+		if (!id) return;
+
+		let cancelled = false;
+
+		detailLoading = true;
+		detailError = null;
+
+		void (async () => {
+			try {
+				const [info, tree, readmeText] = await Promise.all([
+					HuggingFaceService.getDetails(id),
+					HuggingFaceService.getTree(id),
+					HuggingFaceService.getReadme(id)
+				]);
+
+				if (cancelled) return;
+
+				if (!info) {
+					detailError = 'Model not found';
+
+					return;
+				}
+
+				details = info;
+				files = HuggingFaceService.filterByExtension(
+					HuggingFaceService.collapseGgufShards(tree),
+					'.gguf'
+				);
+				readme = readmeText;
+			} catch (err) {
+				if (cancelled) return;
+
+				detailError = err instanceof Error ? err.message : 'Failed to load model';
+			} finally {
+				if (!cancelled) detailLoading = false;
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+</script>
+
+<aside
+	class="w-md shrink-0 self-start border-r border-border/40 bg-background overflow-y-auto md:pr-4 h-full space-y-4"
+>
+	<ModelsDiscoverListSearch bind:value={searchQuery} onSearch={handleSearchInput} />
+
+	<!-- One list instance, so the rows keep their state across search round trips;
+		 skeleton rows replace them while the initial catalog or a query loads. -->
+	<div>
+		{#if modelsDiscoverStore.error}
+			<div class="flex flex-col items-start gap-2 p-4">
+				<p class="text-sm text-destructive">{modelsDiscoverStore.error}</p>
+
+				<Button onclick={() => void modelsDiscoverStore.fetch()} size="sm" variant="outline">
+					Retry
+				</Button>
+			</div>
+		{:else if !modelsDiscoverStore.loading && !modelsDiscoverStore.searching && modelsDiscoverStore.models.length === 0}
+			<p class="p-4 text-sm text-muted-foreground">No models found</p>
+		{:else}
+			<ModelsDiscoverList
+				activeId={selectedId}
+				loading={modelsDiscoverStore.loading || modelsDiscoverStore.searching}
+				models={modelsDiscoverStore.models}
+				onSelect={(id) => (selectedId = id)}
+				showBaseModelAvatar
+			/>
+		{/if}
+	</div>
+</aside>
+
+<main class="overflow-y-auto">
+	{#if selectedId}
+		<ModelsDiscoverDetails
+			{details}
+			error={detailError}
+			{files}
+			loading={detailLoading}
+			modelId={selectedId}
+			{readme}
+		/>
+	{/if}
+</main>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte
new file mode 100644
index 0000000000..45eb209a2a
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Check, Copy, X } from '@lucide/svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { copyToClipboard } from '$lib/utils';
+
+	interface Props {
+		open?: boolean;
+		chatTemplate: string;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { chatTemplate, onOpenChange, open = $bindable(false) }: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+		onOpenChange?.(value);
+	}
+
+	let copied = $state(false);
+
+	async function copy() {
+		await copyToClipboard(chatTemplate);
+		copied = true;
+		setTimeout(() => (copied = false), 1500);
+	}
+</script>
+
+<Dialog.Root onOpenChange={handleOpenChange} {open}>
+	<Dialog.Content
+		class="flex max-h-[calc(100vh-4rem)] flex-col gap-0 p-0 md:w-[calc(100vw-4rem)]! md:max-w-4xl!"
+	>
+		<!-- The header's corner-pinned close X never lines up with a padded flex row,
+		     so it is replaced by one inside the row, aligned with the title -->
+		<Dialog.Header
+			class="flex-row items-center gap-2 border-b border-border/40 p-4"
+			showCloseButton={false}
+		>
+			<Dialog.Title class="text-sm font-semibold">Chat template</Dialog.Title>
+
+			<button
+				aria-label="Copy chat template"
+				class="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border/30 px-2 py-1 text-xs font-medium shadow-sm transition-colors hover:bg-muted dark:border-border/20"
+				onclick={() => void copy()}
+				type="button"
+			>
+				{#if copied}
+					<Check class="h-3.5 w-3.5 text-green-500" />
+				{:else}
+					<Copy class="h-3.5 w-3.5" />
+				{/if}
+
+				Copy
+			</button>
+
+			<Dialog.Close
+				aria-label="Close"
+				class="ml-auto inline-flex cursor-pointer items-center justify-center rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted-foreground/10 hover:text-foreground"
+				type="button"
+			>
+				<X class="h-4 w-4" />
+			</Dialog.Close>
+		</Dialog.Header>
+
+		<pre
+			class="flex-1 overflow-auto p-4 font-mono text-xs break-all whitespace-pre-wrap text-muted-foreground">{chatTemplate}</pre>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
new file mode 100644
index 0000000000..cecdda738c
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { ModelsDiscoverDetailsDownloadOptions } from './ModelsDiscoverDetailsDownloadOptions';
+	import ModelsDiscoverDetailsHeader from './ModelsDiscoverDetailsHeader.svelte';
+	import ModelsDiscoverDetailsReadme from './ModelsDiscoverDetailsReadme.svelte';
+	import ModelsDiscoverDetailsSkeleton from './ModelsDiscoverDetailsSkeleton.svelte';
+	import { OTHER_BIT_DEPTH } from '$lib/constants';
+	import { ModelAuxSidecar } from '$lib/enums';
+	import { HuggingFaceService } from '$lib/services';
+	import type { HfModelDetailInfo, HfModelSibling, ModelBitDepthRow } from '$lib/types';
+	import { detectThinkingSupport, detectToolUseSupport } from '$lib/utils';
+	import { SvelteMap } from 'svelte/reactivity';
+
+	interface Props {
+		/** Full HuggingFace model id, e.g. `ggml-org/gemma-3-4b-it-GGUF`. */
+		modelId: string;
+		/** Model details from `/api/models/{id}?full=true`; null while loading. */
+		details: HfModelDetailInfo | null;
+		/** GGUF files of the repo, shards collapsed, sorted by size desc. */
+		files: HfModelSibling[];
+		/** README.md content, frontmatter stripped; null when unavailable. */
+		readme: string | null;
+		/** True while the model data is being fetched. */
+		loading?: boolean;
+		/** Error message when loading failed. */
+		error?: string | null;
+	}
+
+	let { details, error = null, files, loading = false, modelId, readme }: Props = $props();
+
+	let gguf = $derived(details?.gguf);
+	let baseModels = $derived(HuggingFaceService.getBaseModels(details));
+	let licenseTag = $derived.by(() => {
+		const tags = details?.tags ?? [];
+
+		return tags.find((t) => t.startsWith('license:'))?.replace('license:', '') ?? null;
+	});
+
+	// Capabilities derived from HF metadata. Vision comes from an mmproj sidecar
+	// or a multimodal pipeline tag; tool use / reasoning from the chat template.
+	let hasMmproj = $derived(
+		files.some(
+			(f) => HuggingFaceService.extractQuantMeta(f.path)?.sidecar === ModelAuxSidecar.MMPROJ
+		)
+	);
+	let hasVision = $derived(hasMmproj || details?.pipeline_tag === 'image-text-to-text');
+	let hasTools = $derived(detectToolUseSupport(gguf?.chat_template ?? ''));
+	let hasReasoning = $derived(detectThinkingSupport(gguf?.chat_template ?? ''));
+
+	let bitDepthRows = $derived.by<ModelBitDepthRow[]>(() => {
+		const rows = new SvelteMap<number, HfModelSibling[]>();
+
+		for (const file of files) {
+			const meta = HuggingFaceService.extractQuantMeta(file.path);
+
+			// mmproj sidecars are already conveyed by the Vision capability badge;
+			// imatrix ships as a normal chip with its own badge.
+			if (meta?.sidecar === ModelAuxSidecar.MMPROJ) continue;
+
+			const depth = meta?.quant ? HuggingFaceService.getBitDepth(meta.quant) : null;
+			const bucket = depth ?? OTHER_BIT_DEPTH;
+			const list = rows.get(bucket) ?? [];
+
+			list.push(file);
+			rows.set(bucket, list);
+		}
+
+		return Array.from(rows.entries())
+			.map(([bitDepth, rowFiles]) => ({ bitDepth, files: rowFiles }))
+			.sort((a, b) => a.bitDepth - b.bitDepth);
+	});
+</script>
+
+{#if loading}
+	<ModelsDiscoverDetailsSkeleton />
+{:else if error}
+	<div class="flex h-full items-center justify-center py-20">
+		<p class="text-sm text-destructive">{error}</p>
+	</div>
+{:else if details}
+	<div class="space-y-6 p-6 pr-0">
+		<ModelsDiscoverDetailsHeader
+			{baseModels}
+			{details}
+			{gguf}
+			{hasReasoning}
+			{hasTools}
+			{hasVision}
+			{licenseTag}
+			{modelId}
+		/>
+
+		<ModelsDiscoverDetailsDownloadOptions {bitDepthRows} {modelId} />
+
+		<ModelsDiscoverDetailsReadme {readme} />
+	</div>
+{/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
new file mode 100644
index 0000000000..75ecef320e
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { classify, labelFor } from './download-options.utils';
+	import ModelsDiscoverDetailsDownloadOptionsDownloadCommand from './ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte';
+	import ModelsDiscoverDetailsDownloadOptionsRow from './ModelsDiscoverDetailsDownloadOptionsRow.svelte';
+	import { DialogConfirmDownload } from '$lib/components/app/dialogs';
+	import { ModelDownloadConfirmAction, ModelSelectableFileKind } from '$lib/enums';
+	import { HuggingFaceService, ModelsService } from '$lib/services';
+	import { modelsStore } from '$lib/stores';
+	import type {
+		ModelBitDepthRow,
+		ModelDownloadEntryState,
+		ModelQuantOption,
+		ModelSelectableFile
+	} from '$lib/types';
+
+	interface Props {
+		/** Full HuggingFace repo id, e.g. `ggml-org/gemma-3-4b-it-GGUF`. */
+		modelId: string;
+		/** GGUF files grouped by bit depth. */
+		bitDepthRows: ModelBitDepthRow[];
+		/** Download state lookup; defaults to the models store status feed. */
+		getDownloadState?: (
+			repoWithTag: string,
+			filePath: string,
+			isSidecar: boolean
+		) => ModelDownloadEntryState;
+	}
+
+	let { bitDepthRows, getDownloadState, modelId }: Props = $props();
+
+	// Destructive chip actions (delete a downloaded model, cancel a download) are
+	// confirmed here rather than inside each chip: a single shared dialog owned by
+	// the options panel, keyed by the repo+tag the user acted on, so one dialog is
+	// mounted for the whole panel instead of one per chip.
+	// The acted-on target is kept after closing so the copy stays rendered through
+	// the dialog's close transition.
+	let pending: { action: ModelDownloadConfirmAction; repoWithTag: string } = $state({
+		action: ModelDownloadConfirmAction.CANCEL,
+		repoWithTag: ''
+	});
+	let confirmOpen = $state(false);
+
+	function requestCancel(repoWithTag: string) {
+		pending = { action: ModelDownloadConfirmAction.CANCEL, repoWithTag };
+		confirmOpen = true;
+	}
+
+	function requestDelete(repoWithTag: string) {
+		pending = { action: ModelDownloadConfirmAction.DELETE, repoWithTag };
+		confirmOpen = true;
+	}
+
+	function stateFor(
+		repoWithTag: string,
+		filePath: string,
+		isSidecar: boolean
+	): ModelDownloadEntryState {
+		if (getDownloadState) return getDownloadState(repoWithTag, filePath, isSidecar);
+
+		const isDownloading = modelsStore.status.isDownloadInProgress(repoWithTag);
+		const isPaused = modelsStore.status.isDownloadPaused(repoWithTag);
+
+		return {
+			// solo downloads register in /v1/models under the tag (args stay empty),
+			// while drafts pulled by a loaded model only show up as its --model-draft
+			isDownloaded:
+				!isDownloading &&
+				(modelsStore.status.isModelDownloaded(repoWithTag) ||
+					(isSidecar && modelsStore.status.isSidecarDownloaded(modelId, filePath))),
+			isDownloading,
+			isFailed: modelsStore.status.hasFailedDownload(repoWithTag),
+			isPaused,
+			// live progress while downloading, else the frozen snapshot of the pause
+			progress:
+				modelsStore.status.getDownloadProgress(repoWithTag) ??
+				modelsStore.status.getPausedDownloadProgress(repoWithTag),
+			repoWithTag
+		};
+	}
+
+	/**
+	 * Every selectable file with its kind and download state, in row order.
+	 * Single source of truth for the chip rows and the command selects.
+	 */
+	let selectableFiles = $derived.by(() => {
+		const files: (ModelSelectableFile & { state: ModelDownloadEntryState })[] = [];
+
+		for (const row of bitDepthRows) {
+			for (const file of row.files) {
+				const meta = HuggingFaceService.extractQuantMeta(file.path);
+				const tag = ModelsService.buildDownloadTag(
+					modelId,
+					meta?.quant ?? null,
+					meta?.sidecar ?? null
+				);
+
+				files.push({
+					...file,
+					kind: classify(file.path),
+					state: stateFor(tag, file.path, Boolean(meta?.sidecar))
+				});
+			}
+		}
+
+		return files;
+	});
+
+	/** Rows for the row component: per-bit-depth files with state attached. */
+	let rows = $derived.by(() =>
+		bitDepthRows.map((row) => {
+			const paths = new Set(row.files.map((f) => f.path));
+
+			return {
+				bitDepth: row.bitDepth,
+				files: selectableFiles.filter((f) => paths.has(f.path))
+			};
+		})
+	);
+
+	function optionFor(file: ModelSelectableFile): ModelQuantOption {
+		return {
+			label: labelFor(file.path),
+			path: file.path
+		};
+	}
+
+	/** Non-draft quants for the command's base select, in row order. */
+	let mainOptions = $derived(
+		selectableFiles.filter((f) => f.kind === ModelSelectableFileKind.MAIN).map(optionFor)
+	);
+
+	/**
+	 * Draft options for the command's draft select, with their sidecar type
+	 * (MTP, DFLASH...) since a repo can ship more than one draft flavour.
+	 */
+	let draftOptions = $derived(
+		selectableFiles
+			.filter((f) => f.kind === ModelSelectableFileKind.DRAFT)
+			.map((f) => ({
+				...optionFor(f),
+				badge: HuggingFaceService.extractQuantMeta(f.path)?.sidecar ?? null
+			}))
+	);
+</script>
+
+{#if bitDepthRows.length}
+	<section class="rounded-3xl border border-border/30 bg-muted/60 shadow-sm dark:border-border/20">
+		<!-- One chip per file, each an independent download action with its own
+			 lifecycle state; nothing here selects anything. -->
+		<div class="flex w-full flex-col divide-y divide-border/50 px-4 pb-1 dark:divide-border/35">
+			{#each rows as row (row.bitDepth)}
+				<ModelsDiscoverDetailsDownloadOptionsRow
+					bitDepth={row.bitDepth}
+					files={row.files}
+					onRequestCancel={requestCancel}
+					onRequestDelete={requestDelete}
+				/>
+			{/each}
+		</div>
+
+		<!-- Terminal command preview, standalone: its picks are not bound to the chips. -->
+		<div class="border-t border-border/50 px-4 pt-3.5 pb-4 dark:border-border/35">
+			<ModelsDiscoverDetailsDownloadOptionsDownloadCommand {draftOptions} {mainOptions} {modelId} />
+		</div>
+	</section>
+{/if}
+
+<DialogConfirmDownload
+	action={pending.action}
+	onClose={() => (confirmOpen = false)}
+	open={confirmOpen}
+	repoWithTag={pending.repoWithTag}
+/>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte
new file mode 100644
index 0000000000..e380505f38
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte
@@ -0,0 +1,278 @@
+<script lang="ts">
+	import { Check, Copy, Plus, X } from '@lucide/svelte';
+	import * as Select from '$lib/components/ui/select';
+	import {
+		DEFAULT_BASE_BIT_DEPTH,
+		MODEL_ID,
+		type ModelSidecar,
+		OTHER_BIT_DEPTH,
+		SERVE_COMMAND,
+		SPEC_TYPE
+	} from '$lib/constants';
+	import { HuggingFaceService } from '$lib/services';
+	import type { ModelQuantOption } from '$lib/types';
+	import { copyToClipboard } from '$lib/utils';
+
+	interface Props {
+		modelId: string;
+		/** Non-draft quants of the repo, in bit-depth row order. */
+		mainOptions: ModelQuantOption[];
+		/** Draft sidecar files with their sidecar badge; empty when the repo ships none. */
+		draftOptions: (ModelQuantOption & { badge: ModelSidecar | null })[];
+	}
+
+	let { draftOptions, mainOptions, modelId }: Props = $props();
+
+	// Command picks, owned here: nothing two-way binds them to the quant chips.
+	let basePick = $state<string | null>(null);
+	let draftPick = $state<string | null>(null);
+	let draftTypePick = $state<ModelSidecar | null>(null);
+	let withDraft = $state(false);
+
+	function bitDepthOf(path: string): number {
+		const quant = HuggingFaceService.extractQuantMeta(path)?.quant;
+
+		return quant ? (HuggingFaceService.getBitDepth(quant) ?? OTHER_BIT_DEPTH) : OTHER_BIT_DEPTH;
+	}
+
+	/**
+	 * Base file the command points at: the user's pick while it still exists in
+	 * the options, else the 4-bit file, else the lowest bit depth available. A
+	 * stale pick (the details pane switched models) falls back on its own.
+	 */
+	let baseOption = $derived.by(() => {
+		const picked = mainOptions.find((option) => option.path === basePick);
+
+		if (picked) return picked;
+
+		const preferred = mainOptions.find(
+			(option) => bitDepthOf(option.path) === DEFAULT_BASE_BIT_DEPTH
+		);
+
+		if (preferred) return preferred;
+
+		const ranked = [...mainOptions].sort((a, b) => bitDepthOf(a.path) - bitDepthOf(b.path));
+
+		return ranked[0] ?? null;
+	});
+
+	/** Draft sidecar types the repo ships, in option order. */
+	let specTypes = $derived(
+		draftOptions
+			.map((option) => option.badge)
+			.filter((badge): badge is ModelSidecar => badge !== null)
+			.filter((badge, index, all) => all.indexOf(badge) === index)
+	);
+
+	/**
+	 * Draft type the --spec-type select points at: the user's pick while it
+	 * still exists, else the first type the repo ships.
+	 */
+	let draftType = $derived(
+		draftTypePick && specTypes.includes(draftTypePick) ? draftTypePick : (specTypes[0] ?? null)
+	);
+
+	/** Draft files of the picked type; the quant select only offers these. */
+	let typeDraftOptions = $derived(draftOptions.filter((option) => option.badge === draftType));
+
+	/** Draft file the -hfd tag points at: the user's pick, else the first of the type. */
+	let draftOption = $derived(
+		withDraft
+			? (typeDraftOptions.find((option) => option.path === draftPick) ??
+					typeDraftOptions[0] ??
+					null)
+			: null
+	);
+
+	/** Quant of the file the `-hf` tag points at; null when the file carries no quant. */
+	let mainQuant = $derived(
+		baseOption ? (HuggingFaceService.extractQuantMeta(baseOption.path)?.quant ?? null) : null
+	);
+
+	/** Quant of the file the `-hfd` tag points at. */
+	let draftQuant = $derived(
+		draftOption ? (HuggingFaceService.extractQuantMeta(draftOption.path)?.quant ?? null) : null
+	);
+
+	/** `--spec-type` value; null when no draft type resolved. */
+	let specType = $derived(draftType ? SPEC_TYPE[draftType] : null);
+
+	/** The llama serve command, composed from the inline picks. */
+	let command = $derived.by(() => {
+		const parts = [
+			SERVE_COMMAND.BIN,
+			SERVE_COMMAND.SUBCOMMAND,
+			SERVE_COMMAND.MODEL_FLAG,
+			mainQuant ? `${modelId}${MODEL_ID.QUANTIZATION_SEPARATOR}${mainQuant}` : modelId
+		];
+
+		if (draftOption && draftQuant) {
+			parts.push(
+				SERVE_COMMAND.DRAFT_FLAG,
+				`${modelId}${MODEL_ID.QUANTIZATION_SEPARATOR}${draftQuant}`,
+				SERVE_COMMAND.SPEC_TYPE_FLAG,
+				specType ?? ''
+			);
+		}
+
+		return parts.join(' ');
+	});
+
+	let copied = $state(false);
+
+	async function copy() {
+		await copyToClipboard(command);
+		copied = true;
+		setTimeout(() => (copied = false), 1500);
+	}
+</script>
+
+<!-- <div aria-hidden="true" class="flex items-center gap-3 mt-2 mb-4">
+	<span class="h-px flex-1 bg-border/50"></span>
+
+	<span class="text-xs whitespace-nowrap text-muted-foreground"> or run in your terminal </span>
+
+	<span class="h-px flex-1 bg-border/50"></span>
+</div> -->
+
+<div
+	class="relative flex items-center gap-2 overflow-hidden rounded-lg border border-border/40 bg-background py-2.5 pl-4 pr-10 shadow-xs dark:border-border/35 dark:bg-background/50"
+>
+	<!-- Single line: long commands scroll horizontally instead of wrapping. -->
+	<div
+		class="flex min-w-0 flex-1 items-center gap-x-2 overflow-x-auto py-0.5 font-mono text-xs whitespace-nowrap text-foreground/90"
+	>
+		<span class="shrink-0">{SERVE_COMMAND.BIN}</span>
+
+		<span class="shrink-0">{SERVE_COMMAND.SUBCOMMAND}</span>
+
+		<span class="shrink-0">{SERVE_COMMAND.MODEL_FLAG}</span>
+
+		<span class="shrink-0">
+			{modelId}{mainQuant ? MODEL_ID.QUANTIZATION_SEPARATOR : ''}
+		</span>
+
+		<!-- Base quant: always part of the command, the 4-bit file by default. -->
+		{#if baseOption}
+			<Select.Root onValueChange={(v) => v && (basePick = v)} type="single" value={baseOption.path}>
+				<Select.Trigger
+					aria-label="Base model quantization"
+					class="-ml-2 border-primary/15 bg-primary/[0.07] font-mono text-foreground hover:bg-primary/15 focus-visible:border-primary/40 focus-visible:ring-0"
+					size="xs"
+				>
+					{baseOption.label}
+				</Select.Trigger>
+
+				<Select.Content class="font-mono text-xs">
+					{#each mainOptions as option (option.path)}
+						<Select.Item class="text-xs" label={option.label} value={option.path}>
+							{option.label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		{/if}
+
+		<!-- Draft add: a tiny dashed affordance right of the base part; gone once added. -->
+		{#if draftOptions.length && !withDraft}
+			<button
+				aria-label="Add draft model"
+				class="mx-1 inline-flex h-5 shrink-0 cursor-pointer items-center gap-1 rounded-md border border-dashed border-border/60 px-1.5 text-[10px] text-muted-foreground transition-colors hover:border-border hover:text-foreground"
+				onclick={() => (withDraft = true)}
+				type="button"
+			>
+				<Plus class="h-3 w-3" />
+
+				add draft model
+			</button>
+		{/if}
+
+		<!-- Draft segment: quant and spec type of the picked draft flavour. The X
+				 at the end drops the whole segment (the add button is gone once added);
+				 it only appears while hovering the segment, or directly on touch -->
+		{#if draftOption}
+			<span class="group/draft inline-flex shrink-0 items-center gap-x-2">
+				<span>{SERVE_COMMAND.DRAFT_FLAG}</span>
+
+				<span class="shrink-0">
+					{modelId}{draftQuant ? MODEL_ID.QUANTIZATION_SEPARATOR : ''}
+				</span>
+
+				<Select.Root
+					onValueChange={(v) => v && (draftPick = v)}
+					type="single"
+					value={draftOption.path}
+				>
+					<Select.Trigger
+						aria-label="Draft model quantization"
+						class="-ml-2 border-primary/15 bg-primary/[0.07] font-mono text-foreground hover:bg-primary/15 focus-visible:border-primary/40 focus-visible:ring-0"
+						size="xs"
+					>
+						{draftOption.label}
+					</Select.Trigger>
+
+					<Select.Content class="font-mono text-xs">
+						{#each typeDraftOptions as option (option.path)}
+							<Select.Item class="text-xs" label={option.label} value={option.path}>
+								{option.label}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+
+				{#if draftType}
+					<span>{SERVE_COMMAND.SPEC_TYPE_FLAG}</span>
+
+					<!-- the select only earns its chrome when there is a real choice to make -->
+					{#if specTypes.length > 1}
+						<Select.Root
+							onValueChange={(v) => v && (draftTypePick = v as ModelSidecar)}
+							type="single"
+							value={draftType}
+						>
+							<Select.Trigger
+								aria-label="Draft type"
+								class="border-primary/15 bg-primary/[0.07] font-mono text-foreground hover:bg-primary/15 focus-visible:border-primary/40 focus-visible:ring-0"
+								size="xs"
+							>
+								{SPEC_TYPE[draftType]}
+							</Select.Trigger>
+
+							<Select.Content class="font-mono text-xs">
+								{#each specTypes as type (type)}
+									<Select.Item class="text-xs" label={SPEC_TYPE[type]} value={type}>
+										{SPEC_TYPE[type]}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{:else}
+						<span>{SPEC_TYPE[draftType]}</span>
+					{/if}
+				{/if}
+
+				<button
+					aria-label="Remove draft model"
+					class="shrink-0 cursor-pointer text-muted-foreground/60 opacity-0 transition-[opacity,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:text-destructive group-hover/draft:opacity-100 [@media(pointer:coarse)]:opacity-100"
+					onclick={() => (withDraft = false)}
+					type="button"
+				>
+					<X class="h-3 w-3" />
+				</button>
+			</span>
+		{/if}
+	</div>
+
+	<button
+		aria-label="Copy command"
+		class="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-primary/10 hover:text-foreground"
+		onclick={copy}
+		type="button"
+	>
+		{#if copied}
+			<Check class="h-3.5 w-3.5 text-green-500" />
+		{:else}
+			<Copy class="h-3.5 w-3.5" />
+		{/if}
+	</button>
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
new file mode 100644
index 0000000000..2908ea97a3
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+	import ModelsDiscoverDownloadProgressBar from '../../ModelsDiscoverDownloadProgressBar.svelte';
+	import { labelFor } from './download-options.utils';
+	import { Check, Download, Loader2, Pause, Play, RotateCw, X } from '@lucide/svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { HuggingFaceService } from '$lib/services';
+	import { modelsStore } from '$lib/stores';
+	import type { HfModelSibling, ModelDownloadEntryState } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** GGUF file the chip stands for. */
+		file: HfModelSibling;
+		/** Download state of the file, from the parent's status feed. */
+		entry: ModelDownloadEntryState;
+		/**
+		 * Ask the parent to confirm deleting a downloaded model. The chip owns no
+		 * dialog; the parent renders the single confirmation and acts on confirm.
+		 */
+		onRequestDelete?: (repoWithTag: string) => void;
+		/** Ask the parent to confirm cancelling an in-flight download. */
+		onRequestCancel?: (repoWithTag: string) => void;
+	}
+
+	let { entry, file, onRequestCancel, onRequestDelete }: Props = $props();
+
+	// Sidecar kind (mtp, mmproj, ...) tag shown on every chip state; one source so
+	// the idle, in-flight and downloaded variants stay identical.
+	const SIDECAR_BADGE_CLASS =
+		'rounded-md bg-primary px-1 py-0.5 text-[10px] font-semibold tracking-wide text-primary-foreground uppercase';
+
+	/** Queue the download; a failed attempt leaves partial files, drop them first. */
+	async function startDownload() {
+		try {
+			if (entry.isFailed) await modelsStore.status.cancelDownload(entry.repoWithTag);
+
+			await modelsStore.status.downloadModel(entry.repoWithTag);
+		} catch {
+			// the store already toasted the failure
+		}
+	}
+
+	let meta = $derived(HuggingFaceService.extractQuantMeta(file.path));
+	let label = $derived(labelFor(file.path));
+
+	let percent = $derived(
+		entry.progress && entry.progress.totalBytes > 0
+			? Math.round((entry.progress.downloadedBytes / entry.progress.totalBytes) * 100)
+			: null
+	);
+
+	let tooltipText = $derived(
+		entry.isDownloading
+			? 'Pause downloading'
+			: entry.isPaused
+				? 'Resume downloading'
+				: entry.isDownloaded
+					? 'Delete model'
+					: entry.isFailed
+						? `Retry download: ${file.path}`
+						: `Download ${file.path}`
+	);
+</script>
+
+{#snippet chipBody(dividerClass: string)}
+	<!-- badge, label and divider: identical on every chip state -->
+	{#if meta?.sidecar}
+		<span class={SIDECAR_BADGE_CLASS}>
+			{meta.sidecar}
+		</span>
+	{/if}
+
+	<span class="font-medium">{label}</span>
+
+	<span class={dividerClass}></span>
+{/snippet}
+
+<!-- every chip is a tooltip trigger; the button renders as the trigger's child
+     so no nested button element is created -->
+{#snippet tooltipTrigger(tip: string, button: Snippet<[Record<string, unknown>]>)}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render button(props)}
+			{/snippet}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content>
+			<p>{tip}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+{#snippet deleteChip(props: Record<string, unknown>)}
+	<!-- downloaded chips are delete actions: green check by default, red X on hover -->
+	<button
+		{...props}
+		aria-label={tooltipText}
+		class="group relative inline-flex h-auto cursor-pointer items-center gap-1 rounded-md! border px-2 py-1 text-left font-mono text-xs shadow-sm transition-[background-color,border-color,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]
+					border-green-600/25 bg-green-500/5 hover:border-destructive/50 hover:bg-destructive/10 dark:border-green-500/30 dark:bg-green-500/10 dark:hover:border-destructive/50 dark:hover:bg-destructive/15"
+		onclick={() => onRequestDelete?.(entry.repoWithTag)}
+		type="button"
+	>
+		{@render chipBody(
+			'-my-1 mx-0.75 w-px self-stretch bg-green-600/25 transition-colors duration-200 group-hover:bg-destructive/30 dark:bg-green-600/30 dark:group-hover:bg-destructive/30'
+		)}
+
+		<span>{HuggingFaceService.formatFileSize(file.size ?? 0)}</span>
+
+		<!-- icon slot: crossfade check -> x; touch devices show the delete affordance directly -->
+		<span class="relative inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+			<Check
+				class="absolute h-3.5 w-3.5 text-green-500 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-75 group-hover:opacity-0 [@media(pointer:coarse)]:hidden"
+			/>
+
+			<X
+				class="absolute h-3.5 w-3.5 scale-75 text-destructive opacity-0 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-100 group-hover:opacity-100 [@media(pointer:coarse)]:scale-100 [@media(pointer:coarse)]:opacity-100"
+			/>
+		</span>
+	</button>
+{/snippet}
+
+{#snippet pauseResumeChip(props: Record<string, unknown>)}
+	<button
+		{...props}
+		aria-label={tooltipText}
+		class="flex h-auto min-w-0 flex-1 cursor-pointer items-center gap-1 text-left"
+		onclick={() => {
+			if (entry.isDownloading) void modelsStore.status.pauseDownload(entry.repoWithTag);
+			else void modelsStore.status.downloadModel(entry.repoWithTag).catch(() => {});
+		}}
+		type="button"
+	>
+		{@render chipBody('-my-1 mx-0.75 w-px self-stretch bg-border')}
+
+		{#if percent !== null}
+			<span class="mr-1 tabular-nums">{percent}%</span>
+		{:else if entry.isPaused}
+			<span>Paused</span>
+		{:else}
+			<span>{HuggingFaceService.formatFileSize(file.size ?? 0)}</span>
+		{/if}
+
+		{#if entry.isDownloading}
+			<!-- spinner fades into the pause affordance on hover; opacity only, the
+			     spin keyframes own the transform so scale would fight them -->
+			<span class="relative inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+				<Loader2
+					class="absolute h-3.5 w-3.5 animate-spin text-muted-foreground transition-opacity duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-0 [@media(pointer:coarse)]:hidden"
+				/>
+
+				<Pause
+					class="absolute h-3.5 w-3.5 opacity-0 transition-opacity duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:opacity-100 [@media(pointer:coarse)]:opacity-100"
+				/>
+			</span>
+		{:else}
+			<!-- paused: the play affordance fades in on hover; visible directly on touch -->
+			<span class="relative inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+				<Play
+					class="absolute h-3.5 w-3.5 scale-75 opacity-0 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-100 group-hover:opacity-100 [@media(pointer:coarse)]:scale-100 [@media(pointer:coarse)]:opacity-100"
+				/>
+			</span>
+		{/if}
+	</button>
+{/snippet}
+
+{#snippet cancelChip(props: Record<string, unknown>)}
+	<!-- cancel slot: same fixed slot and fade as the pause / play affordances
+	     so the two icons line up exactly; the X turns destructive on its hover -->
+	<button
+		{...props}
+		aria-label="Cancel downloading"
+		class="relative grid h-3.5 w-3.5 shrink-0 cursor-pointer items-center justify-center text-muted-foreground/70"
+		onclick={() => onRequestCancel?.(entry.repoWithTag)}
+		type="button"
+	>
+		<X
+			class="h-3.5 w-3.5 transition-[opacity,transform,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] text-destructive [@media(pointer:coarse)]:scale-100 [@media(pointer:coarse)]:opacity-100"
+		/>
+	</button>
+{/snippet}
+
+{#snippet downloadChip(props: Record<string, unknown>)}
+	<!-- idle chips download on click (retry when the last attempt failed) -->
+	<button
+		{...props}
+		aria-label={tooltipText}
+		class="group relative inline-flex h-auto cursor-pointer items-center gap-1 overflow-hidden rounded-md! border px-2 py-1 text-left font-mono text-xs shadow-sm transition-[background-color,border-color,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]
+				border-border/30 bg-background hover:bg-muted-foreground/10 dark:border-border/20 dark:bg-muted-foreground/15 dark:text-secondary-foreground dark:hover:bg-muted-foreground/25
+				{entry.isFailed ? 'border-destructive!' : ''}"
+		onclick={() => void startDownload()}
+		type="button"
+	>
+		{#if entry.isFailed}
+			<span
+				class="rounded-md bg-destructive px-1 py-0.5 text-[10px] font-semibold tracking-wide text-destructive-foreground uppercase"
+			>
+				Failed
+			</span>
+		{/if}
+
+		{@render chipBody('-my-1 mx-0.75 w-px self-stretch bg-border')}
+
+		<span>{HuggingFaceService.formatFileSize(file.size ?? 0)}</span>
+
+		<span class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+			{#if entry.isFailed}
+				<RotateCw class="h-3.5 w-3.5 text-destructive" />
+			{:else}
+				<Download
+					class="h-3.5 w-3.5 text-muted-foreground transition-colors duration-150 group-hover:text-foreground"
+				/>
+			{/if}
+		</span>
+	</button>
+{/snippet}
+
+{#if entry.isDownloaded}
+	{@render tooltipTrigger(tooltipText, deleteChip)}
+{:else if entry.isDownloading || entry.isPaused}
+	<!-- in-flight / paused chips: the chip body pauses / resumes on click, the X
+	     inside the chip cancels (stops and discards the partial files). The X slot
+	     is reserved, so the chip never reflows when the affordance fades in -->
+	<div
+		class="group relative inline-flex h-auto items-center gap-1 overflow-hidden rounded-md! border px-2 py-1 text-left font-mono text-xs shadow-sm transition-[background-color,border-color,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]
+			{entry.isPaused
+			? 'border-yellow-600/40 bg-yellow-500/10 hover:bg-yellow-500/20 dark:border-yellow-500/30 dark:bg-yellow-500/10'
+			: 'border-border/30 bg-background hover:bg-muted-foreground/10 dark:border-border/20 dark:bg-muted-foreground/15'}"
+	>
+		{@render tooltipTrigger(tooltipText, pauseResumeChip)}
+
+		{@render tooltipTrigger('Cancel downloading', cancelChip)}
+
+		{#if percent !== null}
+			<ModelsDiscoverDownloadProgressBar
+				downloadedBytes={entry.progress?.downloadedBytes ?? 0}
+				overlay
+				totalBytes={entry.progress?.totalBytes ?? 0}
+			/>
+		{/if}
+	</div>
+{:else}
+	{@render tooltipTrigger(tooltipText, downloadChip)}
+{/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
new file mode 100644
index 0000000000..11bfe45d42
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton from './ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte';
+	import {
+		BIT_DEPTH_LABEL_SUFFIX,
+		GIGABYTE_LABEL,
+		OTHER_BIT_DEPTH,
+		OTHER_BIT_DEPTH_LABEL
+	} from '$lib/constants';
+	import { ModelSelectableFileKind } from '$lib/enums';
+	import type { ModelDownloadEntryState, ModelSelectableFile } from '$lib/types';
+	import { minMemoryTierGb } from '$lib/utils';
+
+	interface Props {
+		/** Bit depth of the row; `99` renders as "Other". */
+		bitDepth: number;
+		/** Every GGUF of this bit depth, with download state attached. */
+		files: (ModelSelectableFile & { state: ModelDownloadEntryState })[];
+		/** Forwarded to each chip: ask the parent to confirm a cancel. */
+		onRequestCancel?: (repoWithTag: string) => void;
+		/** Forwarded to each chip: ask the parent to confirm a delete. */
+		onRequestDelete?: (repoWithTag: string) => void;
+	}
+
+	let { bitDepth, files, onRequestCancel, onRequestDelete }: Props = $props();
+
+	let mainFile = $derived(files.find((f) => f.kind === ModelSelectableFileKind.MAIN) ?? null);
+	let draftFile = $derived(files.find((f) => f.kind === ModelSelectableFileKind.DRAFT) ?? null);
+
+	let mainMemGb = $derived(mainFile ? minMemoryTierGb(mainFile.size ?? 0) : null);
+	let draftMemGb = $derived(draftFile ? minMemoryTierGb(draftFile.size ?? 0) : null);
+</script>
+
+<div class="grid grid-cols-[5rem_1fr] items-center gap-3 py-3">
+	<div class="pt-1 text-sm tabular-nums text-muted-foreground">
+		{#if bitDepth === OTHER_BIT_DEPTH}
+			{OTHER_BIT_DEPTH_LABEL}
+		{:else}
+			{bitDepth}{BIT_DEPTH_LABEL_SUFFIX}
+		{/if}
+
+		{#if mainMemGb}
+			<span class="block text-[10px] whitespace-nowrap text-muted-foreground/60">
+				needs at least {mainMemGb}{GIGABYTE_LABEL}{draftMemGb
+					? ` + ${draftMemGb}${GIGABYTE_LABEL}`
+					: ''} memory
+			</span>
+		{/if}
+	</div>
+
+	<div class="flex flex-wrap justify-end gap-1.5">
+		{#each files as file (file.path)}
+			<ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton
+				entry={file.state}
+				{file}
+				{onRequestCancel}
+				{onRequestDelete}
+			/>
+		{/each}
+	</div>
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
new file mode 100644
index 0000000000..4dd8accb42
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
@@ -0,0 +1,28 @@
+import { DRAFT_FILE_LABEL, MODEL_ID, PATH_SEPARATOR } from '$lib/constants';
+import { ModelSelectableFileKind } from '$lib/enums';
+import { HuggingFaceService } from '$lib/services';
+import { isAuxSidecar, isDraftSidecar } from '$lib/utils';
+
+/** Kind of a file path: the main weights, a draft sidecar, or an aux sidecar (mmproj). */
+export function classify(path: string): ModelSelectableFileKind {
+	const sidecar = HuggingFaceService.extractQuantMeta(path)?.sidecar;
+
+	if (!sidecar) return ModelSelectableFileKind.MAIN;
+
+	return isAuxSidecar(sidecar) ? ModelSelectableFileKind.AUX : ModelSelectableFileKind.DRAFT;
+}
+
+/** Display label of a file: its quant, else the file name without the extension. */
+export function labelFor(path: string): string {
+	const meta = HuggingFaceService.extractQuantMeta(path);
+
+	if (meta?.quant) return meta.quant;
+
+	// Quantless sidecar files: the chip badge already carries the sidecar type,
+	// so the label only marks draft files; aux sidecars badge alone.
+	if (meta?.sidecar) return isDraftSidecar(meta.sidecar) ? DRAFT_FILE_LABEL : '';
+
+	const basename = path.split(PATH_SEPARATOR).pop() ?? path;
+
+	return basename.replace(MODEL_ID.WEIGHT_EXTENSION_REGEX, '');
+}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/index.ts b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/index.ts
new file mode 100644
index 0000000000..b5c0ebef67
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/index.ts
@@ -0,0 +1,40 @@
+/**
+ *
+ * MODELS DISCOVER - DETAILS - DOWNLOAD OPTIONS
+ *
+ * The download area of the detail pane: GGUF files grouped by bit depth, each an
+ * independent download action chip, plus the standalone terminal command preview.
+ *
+ */
+
+/**
+ * **ModelsDiscoverDetailsDownloadOptions** - GGUF download options
+ *
+ * Groups GGUF files by bit depth and renders one independent download
+ * action chip per file, plus the standalone terminal command preview.
+ */
+export { default as ModelsDiscoverDetailsDownloadOptions } from './ModelsDiscoverDetailsDownloadOptions.svelte';
+
+/**
+ * **ModelsDiscoverDetailsDownloadOptionsRow** - One bit-depth group of quants
+ *
+ * A single bit-depth row inside ModelsDiscoverDetailsDownloadOptions: the
+ * depth label with its memory hint and the quant chips of that depth.
+ */
+export { default as ModelsDiscoverDetailsDownloadOptionsRow } from './ModelsDiscoverDetailsDownloadOptionsRow.svelte';
+
+/**
+ * **ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton** - One quant chip
+ *
+ * A single GGUF file as an independent action chip: download / retry when
+ * idle, pause / resume / cancel while in flight, delete when downloaded.
+ */
+export { default as ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton } from './ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte';
+
+/**
+ * **ModelsDiscoverDetailsDownloadOptionsDownloadCommand** - Terminal command
+ *
+ * The `llama serve -hf ...` command box with inline quant selects and a copy
+ * button; owns its picks, nothing two-way binds them to the quant chips.
+ */
+export { default as ModelsDiscoverDetailsDownloadOptionsDownloadCommand } from './ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte';
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
new file mode 100644
index 0000000000..a216283436
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import ModelCapabilityIcons from '../../ModelCapabilityIcons.svelte';
+	import ModelsDiscoverAvatar from '../ModelsDiscoverAvatar.svelte';
+	import ModelsDiscoverDetailsHfHubStats from './ModelsDiscoverDetailsHfHubStats.svelte';
+	import ModelsDiscoverDetailsMetadata from './ModelsDiscoverDetailsMetadata.svelte';
+	import { ExternalLink } from '@lucide/svelte';
+	import { base } from '$app/paths';
+	import { ICON_CLASS_SM } from '$lib/constants';
+	import { HuggingFaceService } from '$lib/services';
+	import type { HfModelDetailInfo, HfModelGguf } from '$lib/types/huggingface';
+	import { orgOf } from '$lib/utils';
+
+	interface Props {
+		modelId: string;
+		details: HfModelDetailInfo;
+		gguf?: HfModelGguf;
+		baseModels: string[];
+		licenseTag: string | null;
+		hasVision: boolean;
+		hasTools: boolean;
+		hasReasoning: boolean;
+	}
+
+	let { baseModels, details, gguf, hasReasoning, hasTools, hasVision, licenseTag, modelId }: Props =
+		$props();
+
+	// Avatar shows the base model's org (e.g. the Qwen logo for a ggml-org GGUF)
+	// with the quant org as a corner badge when they differ.
+	let repoOrg = $derived(orgOf(details.id) || orgOf(modelId));
+	let baseOrg = $derived(orgOf(baseModels[0]));
+	let avatarOrg = $derived(baseOrg || repoOrg);
+	let quantOrg = $derived(baseOrg && baseOrg !== repoOrg ? repoOrg : undefined);
+</script>
+
+<header class="space-y-3">
+	<div class="flex items-start justify-between gap-3">
+		<div class="flex min-w-0 items-center gap-2">
+			<ModelsDiscoverAvatar
+				org={avatarOrg}
+				{quantOrg}
+				quantPositionClass="-bottom-1.5 -right-1.5"
+				quantSize="h-6 w-6"
+				size="h-12 w-12"
+			/>
+
+			<div class="min-w-0">
+				<div class="flex items-center gap-2">
+					<h1 class="truncate text-lg font-semibold">{details.id ?? modelId}</h1>
+
+					<ModelCapabilityIcons
+						gapClass="gap-2"
+						iconSize="h-4 w-4"
+						modalities={{ audio: false, video: false, vision: hasVision }}
+						supportsThinking={hasReasoning}
+						supportsToolUse={hasTools}
+					/>
+				</div>
+
+				{#if baseModels.length}
+					<div class="flex items-center gap-1">
+						<span class="truncate text-xs text-muted-foreground">{baseModels.join(', ')}</span>
+
+						<a
+							aria-label="View base model on HuggingFace"
+							class="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+							href={HuggingFaceService.getModelUrl(baseModels[0])}
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							<ExternalLink class="h-3 w-3" />
+						</a>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<a
+			class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border/30 px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors hover:bg-muted dark:border-border/20"
+			href={HuggingFaceService.getModelUrl(modelId)}
+			rel="noopener noreferrer"
+			target="_blank"
+		>
+			<img alt="" class="h-3.5 w-3.5" src="{base}/recommended-mcp/huggingface.ico" />
+
+			View on Hugging Face
+
+			<ExternalLink class={ICON_CLASS_SM} />
+		</a>
+	</div>
+
+	<ModelsDiscoverDetailsHfHubStats {details} />
+
+	<ModelsDiscoverDetailsMetadata {details} {gguf} {licenseTag} {modelId} />
+</header>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHfHubStats.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHfHubStats.svelte
new file mode 100644
index 0000000000..b848a9bfeb
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHfHubStats.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Download, Heart } from '@lucide/svelte';
+	import { HuggingFaceService } from '$lib/services';
+	import type { HfModelDetailInfo } from '$lib/types/huggingface';
+
+	interface Props {
+		details: HfModelDetailInfo;
+	}
+
+	let { details }: Props = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+	{#if typeof details.downloads === 'number'}
+		<span class="inline-flex items-center gap-1.5">
+			<Download class="h-3.5 w-3.5" />
+			{HuggingFaceService.formatDownloads(details.downloads)}
+		</span>
+	{/if}
+
+	{#if typeof details.likes === 'number'}
+		<span class="inline-flex items-center gap-1.5">
+			<Heart class="h-3.5 w-3.5" />
+			{HuggingFaceService.formatLikes(details.likes)}
+		</span>
+	{/if}
+
+	{#if details.lastModified}
+		<span>Updated {HuggingFaceService.formatRelativeTime(details.lastModified)}</span>
+	{/if}
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
new file mode 100644
index 0000000000..9f0184ac9f
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import ModelsDiscoverChatTemplateDialog from './ModelsDiscoverChatTemplateDialog.svelte';
+	import ModelsDiscoverDetailsMetadataItem from './ModelsDiscoverDetailsMetadataItem.svelte';
+	import { MessageSquareCode } from '@lucide/svelte';
+	import { modelsDiscoverStore } from '$lib/stores';
+	import type { HfModelDetailInfo, HfModelGguf } from '$lib/types/huggingface';
+	import { formatParameters } from '$lib/utils';
+
+	interface Props {
+		/** Full HuggingFace model id, e.g. `ggml-org/gemma-3-4b-it-GGUF`. */
+		modelId: string;
+		details: HfModelDetailInfo;
+		gguf?: HfModelGguf;
+		licenseTag: string | null;
+	}
+
+	let { details, gguf, licenseTag, modelId }: Props = $props();
+
+	// Catalog family description when curated, else the HF card description.
+	let description = $derived(
+		modelsDiscoverStore.descriptionFor(modelId) ?? details.cardData?.description
+	);
+
+	let chatTemplateOpen = $state(false);
+</script>
+
+{#if description}
+	<p class="text-sm text-muted-foreground">{description}</p>
+{/if}
+
+<!-- Metadata chips: label | value pairs, matching the HF model page style -->
+<div class="flex flex-wrap items-center gap-1.5">
+	{#if gguf?.total}
+		<ModelsDiscoverDetailsMetadataItem
+			label="Model size"
+			value="{formatParameters(gguf.total)} params"
+		/>
+	{/if}
+
+	{#if gguf?.context_length}
+		<ModelsDiscoverDetailsMetadataItem
+			label="Context"
+			value={gguf.context_length.toLocaleString()}
+		/>
+	{/if}
+
+	{#if gguf?.architecture}
+		<ModelsDiscoverDetailsMetadataItem label="Architecture" value={gguf.architecture} />
+	{/if}
+
+	{#if gguf?.chat_template}
+		<button
+			class="inline-flex items-center gap-1.5 rounded-md border border-border/30 px-2.5 py-1 text-xs font-medium shadow-sm transition-colors hover:bg-muted dark:border-border/20"
+			onclick={() => (chatTemplateOpen = true)}
+			type="button"
+		>
+			<MessageSquareCode class="h-3 w-3" />
+			Chat template
+		</button>
+	{/if}
+
+	{#if licenseTag}
+		<ModelsDiscoverDetailsMetadataItem label="License" value={licenseTag} />
+	{/if}
+
+	{#if details.gated === true}
+		<span
+			class="rounded bg-yellow-500/10 px-2 py-0.5 text-xs font-medium text-yellow-600 dark:text-yellow-400"
+		>
+			gated
+		</span>
+	{/if}
+</div>
+
+{#if gguf?.chat_template}
+	<ModelsDiscoverChatTemplateDialog
+		bind:open={chatTemplateOpen}
+		chatTemplate={gguf.chat_template}
+	/>
+{/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte
new file mode 100644
index 0000000000..90c3c4c74f
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+	}
+
+	let { label, value }: Props = $props();
+</script>
+
+<!-- Metadata chip: label | value pair, matching the HF model page style -->
+<span
+	class="inline-flex items-center divide-x divide-border rounded-md border border-border/30 text-xs shadow-sm dark:border-border/20"
+>
+	<span class="px-2.5 py-1 text-muted-foreground">{label}</span>
+
+	<span class="px-2.5 py-1 font-medium">{value}</span>
+</span>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte
new file mode 100644
index 0000000000..fbf043b797
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MarkdownContent } from '$lib/components/app';
+
+	interface Props {
+		readme: string | null;
+	}
+
+	let { readme }: Props = $props();
+</script>
+
+{#if readme}
+	<section
+		class="p-3 rounded-3xl border border-border/30 bg-muted/60 shadow-sm dark:border-border/20"
+	>
+		<MarkdownContent allowHtml class="prose-sm max-w-none" content={readme} />
+	</section>
+{/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
new file mode 100644
index 0000000000..030d90fa58
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { Skeleton } from '$lib/components/ui/skeleton';
+</script>
+
+<!-- Static skeleton of ModelsDiscoverDetails: header, metadata chips, download options and readme lines. -->
+<div class="space-y-6 p-6" data-slot="model-details-skeleton">
+	<!-- Header: avatar, name with capability icons, base model line, HF link -->
+	<div class="space-y-3">
+		<div class="flex items-start justify-between gap-3">
+			<div class="flex min-w-0 items-center gap-2">
+				<Skeleton class="h-12 w-12 rounded-md" />
+
+				<div class="min-w-0 space-y-1.5">
+					<Skeleton class="h-5 w-56 max-w-full" />
+
+					<Skeleton class="h-3 w-40 max-w-full" />
+				</div>
+			</div>
+
+			<Skeleton class="h-7.5 w-44 shrink-0 rounded-md" />
+		</div>
+
+		<!-- downloads / likes / last updated -->
+		<div class="flex items-center gap-4">
+			<Skeleton class="h-3.5 w-16" />
+
+			<Skeleton class="h-3.5 w-12" />
+
+			<Skeleton class="h-3.5 w-24" />
+		</div>
+
+		<!-- metadata chips -->
+		<div class="space-y-3">
+			<div class="flex flex-wrap items-center gap-1.5">
+				<Skeleton class="h-7 w-36 rounded-md" />
+
+				<Skeleton class="h-7 w-28 rounded-md" />
+
+				<Skeleton class="h-7 w-32 rounded-md" />
+
+				<Skeleton class="h-7 w-24 rounded-md" />
+			</div>
+		</div>
+	</div>
+
+	<!-- Download options: quant rows, CTA, terminal command -->
+	<div
+		class="rounded-3xl border border-border/30 bg-muted/40 p-4 shadow-sm dark:border-border/20 dark:bg-muted/50"
+	>
+		<div class="space-y-3 divide-y divide-border/50 dark:divide-border/35 pb-1">
+			{#each [0, 1, 2] as _, index (index)}
+				<div class="grid grid-cols-[5rem_1fr] items-start gap-3 py-3">
+					<div class="space-y-1.5 pt-1">
+						<Skeleton class="h-4 w-14" />
+
+						<Skeleton class="h-2.5 w-24" />
+					</div>
+
+					<div class="flex flex-wrap items-center justify-end gap-1.5">
+						<Skeleton class="h-6 w-28 rounded-md" />
+
+						<Skeleton class="h-6 w-20 rounded-md" />
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div class="space-y-2.5 border-t border-border/50 pt-3.5 dark:border-border/35">
+			<Skeleton class="h-9 w-full rounded-md" />
+
+			<div class="flex items-center gap-3">
+				<span class="h-px flex-1 bg-border/50"></span>
+
+				<Skeleton class="h-3 w-44" />
+
+				<span class="h-px flex-1 bg-border/50"></span>
+			</div>
+
+			<Skeleton class="h-11 w-full rounded-md" />
+		</div>
+	</div>
+
+	<!-- Readme -->
+	<div class="space-y-2.5">
+		<Skeleton class="h-3.5 w-full" />
+
+		<Skeleton class="h-3.5 w-full" />
+
+		<Skeleton class="h-3.5 w-5/6" />
+
+		<Skeleton class="h-3.5 w-2/3" />
+	</div>
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts
new file mode 100644
index 0000000000..2420bd5ef2
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts
@@ -0,0 +1,72 @@
+/**
+ *
+ * MODELS DISCOVER - DETAILS
+ *
+ * The right-hand detail pane of the discover view: header (avatar, name, stats, metadata
+ * chips, capability badges), the download options area and the model-card README.
+ *
+ */
+
+/**
+ * **ModelsDiscoverDetails** - Model detail view
+ *
+ * Detail pane for the selected model. Loads its own data (details + GGUF file
+ * list) from HuggingFaceService based on the `modelId` route param.
+ */
+export { default as ModelsDiscoverDetails } from './ModelsDiscoverDetails.svelte';
+
+/**
+ * **ModelsDiscoverDetailsHeader** - Detail view header
+ *
+ * Shows the model avatar (base org + quant org corner badge), name, base model
+ * info, stats, metadata chips and capability badges.
+ */
+export { default as ModelsDiscoverDetailsHeader } from './ModelsDiscoverDetailsHeader.svelte';
+
+/**
+ * **ModelsDiscoverDetailsHfHubStats** - HuggingFace Hub stats row
+ *
+ * Downloads, likes and last-updated for the viewed model, formatted the way
+ * the Hub shows them.
+ */
+export { default as ModelsDiscoverDetailsHfHubStats } from './ModelsDiscoverDetailsHfHubStats.svelte';
+
+/**
+ * **ModelsDiscoverDetailsSkeleton** - Detail view loading skeleton
+ *
+ * Static placeholder matching the detail layout: header with avatar and name,
+ * metadata chips, the download options box and readme text lines.
+ */
+export { default as ModelsDiscoverDetailsSkeleton } from './ModelsDiscoverDetailsSkeleton.svelte';
+
+/**
+ * **ModelsDiscoverDetailsReadme** - Detail view README
+ *
+ * Renders the model card README as markdown.
+ */
+export { default as ModelsDiscoverDetailsReadme } from './ModelsDiscoverDetailsReadme.svelte';
+
+/**
+ * **ModelsDiscoverDetailsMetadata** - Detail view metadata row
+ *
+ * The detail view's metadata chips (model size, context, architecture, license,
+ * chat template).
+ */
+export { default as ModelsDiscoverDetailsMetadata } from './ModelsDiscoverDetailsMetadata.svelte';
+
+/**
+ * **ModelsDiscoverDetailsMetadataItem** - Single metadata chip
+ *
+ * One label | value chip of the detail view's metadata row (model size,
+ * context, architecture, license).
+ */
+export { default as ModelsDiscoverDetailsMetadataItem } from './ModelsDiscoverDetailsMetadataItem.svelte';
+
+/**
+ * **ModelsDiscoverChatTemplateDialog** - Chat template viewer
+ *
+ * Shows the model's chat template in a scrollable dialog with a copy button.
+ */
+export { default as ModelsDiscoverChatTemplateDialog } from './ModelsDiscoverChatTemplateDialog.svelte';
+
+export * from './ModelsDiscoverDetailsDownloadOptions';
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte
new file mode 100644
index 0000000000..5ebff7230d
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import ModelsDiscoverListItem from './ModelsDiscoverListItem.svelte';
+	import ModelsDiscoverListItemSkeleton from './ModelsDiscoverListItemSkeleton.svelte';
+	import type { HfModelInfo } from '$lib/types/huggingface';
+
+	interface Props {
+		models: HfModelInfo[];
+		activeId?: string | null;
+		loading?: boolean;
+		loadingSkeletonRowsCount?: number;
+		/** Show the original (base) model's org avatar instead of the repo's org. */
+		showBaseModelAvatar?: boolean;
+		onSelect?: (modelId: string) => void;
+	}
+
+	let {
+		activeId = null,
+		loading = false,
+		loadingSkeletonRowsCount = 8,
+		models,
+		onSelect,
+		showBaseModelAvatar = false
+	}: Props = $props();
+</script>
+
+<ul class="space-y-0.5">
+	{#if loading}
+		{#each Array(loadingSkeletonRowsCount) as _, index (index)}
+			<ModelsDiscoverListItemSkeleton {index} />
+		{/each}
+	{:else}
+		{#each models as model (model.id)}
+			<ModelsDiscoverListItem
+				active={model.id === activeId}
+				{model}
+				{onSelect}
+				{showBaseModelAvatar}
+			/>
+		{/each}
+	{/if}
+</ul>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
new file mode 100644
index 0000000000..b1b1cdb85b
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import ModelId from '../../ModelId.svelte';
+	import ModelsDiscoverAvatar from '../ModelsDiscoverAvatar.svelte';
+	import {
+		HF_MMPROJ_FILENAME_TOKEN,
+		HF_MODALITY_PIPELINE_TAGS,
+		type ModelSidecar
+	} from '$lib/constants';
+	import { HuggingFaceService } from '$lib/services';
+	import { modelsDiscoverStore } from '$lib/stores';
+	import type { ModelsDiscoverSizeRange } from '$lib/stores/models-discover/index.svelte';
+	import type { HfModelInfo } from '$lib/types/huggingface';
+	import type { ModelModalities } from '$lib/types/models';
+	import { detectThinkingSupport, detectToolUseSupport, isAuxSidecar, orgOf } from '$lib/utils';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	interface Props {
+		model: HfModelInfo;
+		active?: boolean;
+		/** Show the original (base) model's org avatar instead of the repo's org. */
+		showBaseModelAvatar?: boolean;
+		onSelect?: (modelId: string) => void;
+	}
+
+	let { active = false, model, onSelect, showBaseModelAvatar = false }: Props = $props();
+
+	let org = $derived(orgOf(model.id));
+
+	// Org whose avatar is shown: the base model's org when showBaseModelAvatar
+	// (e.g. the Qwen logo for ggml-org/Qwen3.8-27B-GGUF), else the repo's org.
+	let avatarOrg = $derived.by(() => {
+		if (!showBaseModelAvatar) return org;
+
+		return orgOf(HuggingFaceService.getBaseModels(model)[0]) || org;
+	});
+
+	let contextLength = $derived(model.gguf?.context_length);
+
+	// Reasoning support from the chat template, matching the details view.
+	let supportsThinking = $derived(detectThinkingSupport(model.gguf?.chat_template ?? ''));
+
+	// Tool use support from the chat template.
+	let supportsToolUse = $derived(detectToolUseSupport(model.gguf?.chat_template ?? ''));
+
+	// Modalities derived from HF metadata: vision from an mmproj sidecar or a
+	// multimodal pipeline tag, audio/video from their pipeline tags.
+	let modalities = $derived.by<ModelModalities>(() => {
+		const tag = model.pipeline_tag ?? '';
+		const vision =
+			HF_MODALITY_PIPELINE_TAGS.vision.includes(tag) ||
+			Boolean(
+				model.siblings?.some((s) => s.rfilename.toLowerCase().includes(HF_MMPROJ_FILENAME_TOKEN))
+			);
+		const audio = HF_MODALITY_PIPELINE_TAGS.audio.includes(tag);
+		const video = HF_MODALITY_PIPELINE_TAGS.video.includes(tag);
+
+		return { audio, video, vision };
+	});
+
+	// Draft sidecars (mtp, dflash, dspark, eagle3) present in the repo, e.g.
+	// speculative-decoding drafts. mmproj is excluded: it is vision, already
+	// conveyed by the modalities.
+	let draftSidecars = $derived.by<ModelSidecar[]>(() => {
+		const set = new SvelteSet<ModelSidecar>();
+
+		for (const sibling of model.siblings ?? []) {
+			const sidecar = HuggingFaceService.extractQuantMeta(sibling.rfilename)?.sidecar;
+
+			if (sidecar && !isAuxSidecar(sidecar)) set.add(sidecar);
+		}
+
+		return [...set];
+	});
+
+	// Min/max size across the repo's quants, draft sidecars included. The store
+	// has catalog rows covered already; any other row (a search hit) measures
+	// its repo once here and the result is cached per repo.
+	let measuredSize = $state<ModelsDiscoverSizeRange | null>(null);
+	let sizeRange = $derived(modelsDiscoverStore.cachedSizeRangeFor(model.id) ?? measuredSize);
+
+	$effect(() => {
+		const id = model.id;
+
+		if (modelsDiscoverStore.cachedSizeRangeFor(id)) return;
+
+		let cancelled = false;
+
+		void modelsDiscoverStore.sizeRange(id).then((range) => {
+			if (!cancelled) measuredSize = range ?? null;
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+</script>
+
+<li>
+	<button
+		aria-current={active ? 'page' : undefined}
+		class="flex w-full cursor-pointer items-start gap-2.5 rounded-lg p-2.5 text-left transition-colors {active
+			? 'bg-primary/10 hover:bg-primary/15'
+			: 'hover:bg-muted/60'}"
+		onclick={() => onSelect?.(model.id)}
+		type="button"
+	>
+		<ModelsDiscoverAvatar
+			class="mt-1"
+			org={avatarOrg}
+			quantOrg={showBaseModelAvatar ? org : undefined}
+		/>
+
+		<span class="min-w-0 flex-1">
+			<ModelId
+				class="min-w-0"
+				{contextLength}
+				{draftSidecars}
+				hideOrgName
+				iconsOnNewLine
+				{modalities}
+				modelId={model.id}
+				{sizeRange}
+				{supportsThinking}
+				{supportsToolUse}
+				wrap
+			/>
+		</span>
+	</button>
+</li>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte
new file mode 100644
index 0000000000..851abc5238
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Skeleton } from '$lib/components/ui/skeleton';
+
+	interface Props {
+		/** Row index; varies skeleton widths so the list does not look mechanical. */
+		index?: number;
+	}
+
+	let { index = 0 }: Props = $props();
+
+	// Deterministic width variations keyed by row position.
+	const NAME_WIDTHS = ['w-40', 'w-52', 'w-44', 'w-56'];
+	const BADGE_WIDTHS = [
+		['w-12', 'w-14', 'w-10'],
+		['w-16', 'w-12', 'w-12'],
+		['w-10', 'w-16', 'w-10'],
+		['w-14', 'w-10', 'w-14']
+	];
+
+	let nameWidth = $derived(NAME_WIDTHS[index % NAME_WIDTHS.length]);
+	let badgeWidths = $derived(BADGE_WIDTHS[index % BADGE_WIDTHS.length]);
+</script>
+
+<!-- Static skeleton of ModelsDiscoverListItem: avatar, name and badge rows. -->
+<li>
+	<div class="flex w-full items-start gap-2.5 rounded-lg p-2.5 text-left">
+		<Skeleton class="h-9 w-9 shrink-0 rounded-md" />
+
+		<div class="min-w-0 flex-1 space-y-1.5">
+			<Skeleton class="{nameWidth} h-4 max-w-full" />
+
+			<div class="flex items-center gap-1">
+				{#each badgeWidths as width, i (i)}
+					<Skeleton class="{width} h-3.5 rounded" />
+				{/each}
+			</div>
+		</div>
+	</div>
+</li>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte
new file mode 100644
index 0000000000..dce949a0f6
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { SearchInput } from '$lib/components/app';
+
+	interface Props {
+		value?: string;
+		/** Search callback; the parent owns debouncing. */
+		onSearch?: (query: string) => void;
+		placeholder?: string;
+	}
+
+	let {
+		onSearch,
+		placeholder = 'Search models on Hugging Face',
+		value = $bindable('')
+	}: Props = $props();
+
+	function handleInput(next: string) {
+		value = next;
+
+		onSearch?.(value);
+	}
+</script>
+
+<div class="sticky top-0 z-99">
+	<SearchInput bind:value onInput={(v) => handleInput(v)} {placeholder} size="sm" />
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts
new file mode 100644
index 0000000000..d888343a15
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts
@@ -0,0 +1,38 @@
+/**
+ *
+ * MODELS DISCOVER - LIST
+ *
+ * The discover sidebar column: a debounced search field above a navigable list of
+ * HuggingFace GGUF models, with skeleton rows while loading.
+ *
+ */
+
+/**
+ * **ModelsDiscoverList** - Sidebar model list
+ *
+ * Renders the discover model list as a navigable column. Each row links to the
+ * model's detail and highlights the active one.
+ */
+export { default as ModelsDiscoverList } from './ModelsDiscoverList.svelte';
+
+/**
+ * **ModelsDiscoverListSearch** - Sidebar search input
+ *
+ * Debounced search field for the model list.
+ */
+export { default as ModelsDiscoverListSearch } from './ModelsDiscoverListSearch.svelte';
+
+/**
+ * **ModelsDiscoverListItem** - Single sidebar row
+ *
+ * One model entry in the discover sidebar list, selectable via `onSelect`.
+ */
+export { default as ModelsDiscoverListItem } from './ModelsDiscoverListItem.svelte';
+
+/**
+ * **ModelsDiscoverListItemSkeleton** - Skeleton sidebar row
+ *
+ * Pulsing placeholder matching a ModelsDiscoverListItem row, shown while the
+ * list is loading.
+ */
+export { default as ModelsDiscoverListItemSkeleton } from './ModelsDiscoverListItemSkeleton.svelte';
diff --git a/tools/ui/src/lib/components/app/models/discover/index.ts b/tools/ui/src/lib/components/app/models/discover/index.ts
new file mode 100644
index 0000000000..5926b75153
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/index.ts
@@ -0,0 +1,39 @@
+/**
+ *
+ * MODELS DISCOVER
+ *
+ * Components for the Models Discover view: a sidebar search + list of
+ * HuggingFace GGUF models and a detail view for the selected model, used as the
+ * body of the discovery dialog. The list and detail trees live in their own
+ * subfolders; this barrel re-exports them alongside the shared leaves.
+ *
+ */
+
+/**
+ * **ModelsDiscover** - Models discover explorer
+ *
+ * The complete discovery layout: a sidebar search + model list on the left and a
+ * detail view for the selected model on the right. Used as the body of the
+ * discovery dialog.
+ */
+export { default as ModelsDiscover } from './ModelsDiscover.svelte';
+
+/**
+ * **ModelsDiscoverAvatar** - Org avatar for a model row
+ *
+ * Shows the org's avatar image, falling back to a monogram on a stable hue
+ * derived from the org name when the image fails to load. Shared by the list,
+ * the detail header and the model selector rows.
+ */
+export { default as ModelsDiscoverAvatar } from './ModelsDiscoverAvatar.svelte';
+
+/**
+ * **ModelsDiscoverDownloadProgressBar** - Thin download progress bar
+ *
+ * Normalizes bytes to a 0..100% bar; can pin to the bottom edge as an overlay.
+ * Shared by the quant chips and the model selector's download rows.
+ */
+export { default as ModelsDiscoverDownloadProgressBar } from './ModelsDiscoverDownloadProgressBar.svelte';
+
+export * from './ModelsDiscoverList';
+export * from './ModelsDiscoverDetails';
diff --git a/tools/ui/src/lib/components/ui/select/select-content.svelte b/tools/ui/src/lib/components/ui/select/select-content.svelte
index f8792f8a9d..a8263819a1 100644
--- a/tools/ui/src/lib/components/ui/select/select-content.svelte
+++ b/tools/ui/src/lib/components/ui/select/select-content.svelte
@@ -88,7 +88,7 @@
 	<SelectPrimitive.Content
 		bind:ref
 		class={cn(
-			'relative z-[var(--layer-popover,1000000)] max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+			'relative z-[var(--layer-popover,1000000)] max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover dark:border-border/20 text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		data-slot="select-content"
@@ -99,7 +99,7 @@
 
 		<SelectPrimitive.Viewport
 			class={cn(
-				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1.5'
 			)}
 		>
 			{@render children?.()}
diff --git a/tools/ui/src/lib/components/ui/select/select-trigger.svelte b/tools/ui/src/lib/components/ui/select/select-trigger.svelte
index 9f642819ec..de3abcdf21 100644
--- a/tools/ui/src/lib/components/ui/select/select-trigger.svelte
+++ b/tools/ui/src/lib/components/ui/select/select-trigger.svelte
@@ -11,20 +11,26 @@
 		variant = 'default',
 		...restProps
 	}: WithoutChild<SelectPrimitive.TriggerProps> & {
-		size?: 'sm' | 'default';
+		size?: 'xs' | 'sm' | 'default';
 		variant?: 'default' | 'plain';
 	} = $props();
 
+	// Super small trigger: fits its selected value, for dense inline use.
+	const xsClasses =
+		"group flex h-6 w-fit items-center justify-between gap-1 rounded-md border border-border/30 bg-muted/60 px-2 py-0 text-xs whitespace-nowrap outline-none select-none transition-colors hover:bg-muted/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground dark:border-border/20 dark:bg-muted/75 dark:hover:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground";
+
 	const baseClasses = $derived(
 		variant === 'plain'
 			? "group inline-flex w-full items-center justify-end gap-2 whitespace-nowrap px-0 py-0 text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3 [&_svg:not([class*='text-'])]:text-muted-foreground"
-			: "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground"
+			: size === 'xs'
+				? xsClasses
+				: "flex w-fit items-center justify-between gap-2 rounded-md border border-border/30 bg-muted/60 px-3 py-2 text-sm whitespace-nowrap shadow-sm transition-colors outline-none select-none hover:bg-muted/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:border-border/20 dark:bg-muted/75 dark:hover:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground"
 	);
 
 	const chevronClasses = $derived(
-		variant === 'plain'
+		variant === 'plain' || size === 'xs'
 			? 'size-3 opacity-60 transition-transform group-data-[state=open]:-rotate-180'
-			: 'size-4 opacity-50'
+			: 'size-3.5 opacity-60 transition-transform group-data-[state=open]:-rotate-180'
 	);
 </script>
 
diff --git a/tools/ui/src/lib/stores/models-discover/index.svelte.ts b/tools/ui/src/lib/stores/models-discover/index.svelte.ts
index 91a5cb6783..28cc66f00d 100644
--- a/tools/ui/src/lib/stores/models-discover/index.svelte.ts
+++ b/tools/ui/src/lib/stores/models-discover/index.svelte.ts
@@ -2,7 +2,7 @@
  * modelsDiscoverStore - Models Discover browse state
  *
  * Owns the HuggingFace GGUF model list shown in the discover sidebar
- * (DialogModelsDiscover). By default the list is the curated catalog set;
+ * (the Discover tab of DialogManageModels). By default the list is the curated catalog set;
  * search replaces it with matches across all of HuggingFace. Both paths fetch
  * the same fields, so a row renders the same badges and sizes either way.
  */
@@ -80,6 +80,7 @@ class ModelsDiscoverStore {
 			this.catalog = catalog;
 
 			const builds = this.catalogBuilds();
+			const failedBuilds: HfCatalogBuild[] = [];
 
 			this.defaultModels = [];
 
@@ -98,7 +99,11 @@ class ModelsDiscoverStore {
 				);
 
 				for (const { build, info, tree } of batch) {
-					if (!info) continue;
+					if (!info) {
+						failedBuilds.push(build);
+
+						continue;
+					}
 
 					this.catalogSizeRanges.set(build.repo, this.sizeRangeFor(build, tree));
 
@@ -112,7 +117,9 @@ class ModelsDiscoverStore {
 				}
 			}
 
-			this.fetched = true;
+			// stay incomplete when some repos failed, so the next mount retries
+			// them; succeeded repos are served from the service cache for free
+			this.fetched = failedBuilds.length === 0;
 		} catch (err) {
 			this.error = err instanceof Error ? err.message : 'Failed to fetch models';
 		} finally {