From 587c43ef8f13e83e70ca39a711e858a1a9a7583f Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Fri, 4 Sep 2026 11:12:34 +0200
Subject: [PATCH] ui : group discover and selector components into folders

Move the ModelsDiscover components into ModelsDiscoverList/ and
ModelsDiscoverDetails/ subfolders (with ModelsDiscoverDetailsDownloadOptions/
nested inside), and the model selector components into a ModelsSelector/
subfolder. Rename ModelsDiscoverModelDetails* to ModelsDiscoverDetails* for
consistency, add per-folder index.ts barrels, and keep shared leaves
(ModelId, ModelBadge, ModelLoadHighlight, ModelsDiscoverAvatar,
DownloadProgressBar) at their folder roots.
---
 .../ModelsSelectorDownloadItem.svelte         |   4 +-
 .../ModelsSelectorDropdown.svelte             |   2 +-
 .../ModelsSelectorList.svelte                 |   0
 .../ModelsSelectorOption.svelte               |   4 +-
 .../ModelsSelectorReasoningPanel.svelte       |   0
 .../ModelsSelectorSheet.svelte                |   2 +-
 .../app/models/ModelsSelector/index.ts        |  95 ++++++++++++++
 .../app/models/discover/ModelsDiscover.svelte |   6 +-
 .../ModelsDiscoverChatTemplateDialog.svelte   |   0
 .../ModelsDiscoverDetails.svelte}             |  20 +--
 ...delsDiscoverDetailsDownloadOptions.svelte} |  12 +-
 ...ailsDownloadOptionsDownloadCommand.svelte} |   0
 ...DownloadOptionsQuantDownloadButton.svelte} |   2 +-
 ...sDiscoverDetailsDownloadOptionsRow.svelte} |   4 +-
 .../download-options.utils.ts                 |   2 +-
 .../index.ts                                  |  40 ++++++
 .../ModelsDiscoverDetailsHeader.svelte}       |   6 +-
 .../ModelsDiscoverDetailsMetadata.svelte}     |  10 +-
 .../ModelsDiscoverDetailsMetadataItem.svelte} |   0
 .../ModelsDiscoverDetailsReadme.svelte}       |   0
 .../ModelsDiscoverDetailsSkeleton.svelte}     |   2 +-
 .../discover/ModelsDiscoverDetails/index.ts   |  64 +++++++++
 .../ModelsDiscoverList.svelte                 |   0
 .../ModelsDiscoverListItem.svelte             |   4 +-
 .../ModelsDiscoverListItemSkeleton.svelte     |   0
 .../ModelsDiscoverListSearch.svelte           |   0
 .../discover/ModelsDiscoverList/index.ts      |  38 ++++++
 .../components/app/models/discover/index.ts   | 123 ++----------------
 .../ui/src/lib/components/app/models/index.ts |  87 +------------
 .../src/lib/stores/models-hub/index.svelte.ts |   2 +-
 ...e => ModelsDiscoverDetails.stories.svelte} |  26 ++--
 .../stories/ModelsDiscoverList.stories.svelte |   4 +-
 .../stories/ModelsSelector.stories.svelte     |   4 +-
 33 files changed, 310 insertions(+), 253 deletions(-)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorDownloadItem.svelte (97%)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorDropdown.svelte (99%)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorList.svelte (100%)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorOption.svelte (98%)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorReasoningPanel.svelte (100%)
 rename tools/ui/src/lib/components/app/models/{ => ModelsSelector}/ModelsSelectorSheet.svelte (99%)
 create mode 100644 tools/ui/src/lib/components/app/models/ModelsSelector/index.ts
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverDetails}/ModelsDiscoverChatTemplateDialog.svelte (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetails.svelte => ModelsDiscoverDetails/ModelsDiscoverDetails.svelte} (81%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsDownloadOptions.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte} (89%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte} (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte} (99%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsDownloadOptionsRow.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte} (83%)
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions}/download-options.utils.ts (100%)
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/index.ts
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsHeader.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte} (94%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsMetadata.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte} (84%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsMetadataItem.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte} (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsReadme.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte} (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ModelsDiscoverModelDetailsSkeleton.svelte => ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte} (95%)
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverList}/ModelsDiscoverList.svelte (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverList}/ModelsDiscoverListItem.svelte (97%)
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverList}/ModelsDiscoverListItemSkeleton.svelte (100%)
 rename tools/ui/src/lib/components/app/models/discover/{ => ModelsDiscoverList}/ModelsDiscoverListSearch.svelte (100%)
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts
 rename tools/ui/tests/stories/{ModelsDiscoverModelDetails.stories.svelte => ModelsDiscoverDetails.stories.svelte} (79%)

diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorDownloadItem.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte
similarity index 97%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorDownloadItem.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte
index 6a31787829..963c380937 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorDownloadItem.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDownloadItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import DownloadProgressBar from './discover/DownloadProgressBar.svelte';
-	import ModelsDiscoverAvatar from './discover/ModelsDiscoverAvatar.svelte';
+	import DownloadProgressBar from '../discover/DownloadProgressBar.svelte';
+	import ModelsDiscoverAvatar from '../discover/ModelsDiscoverAvatar.svelte';
 	import { Loader2, Pause, Play, X } from '@lucide/svelte';
 	import { ModelId } from '$lib/components/app';
 	import DialogConfirmation from '$lib/components/app/dialogs/DialogConfirmation.svelte';
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
similarity index 99%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
index d6a98b4133..c2c2512518 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
 	import { ChevronDown, Lightbulb, Loader2 } from '@lucide/svelte';
 	import {
 		DialogModelInformation,
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
similarity index 98%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
index c1b1bbc6f7..d181cc704f 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import ModelsDiscoverAvatar from './discover/ModelsDiscoverAvatar.svelte';
-	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import ModelsDiscoverAvatar from '../discover/ModelsDiscoverAvatar.svelte';
+	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
 	import {
 		CircleAlert,
 		Heart,
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorReasoningPanel.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorReasoningPanel.svelte
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
similarity index 99%
rename from tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte
rename to tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
index 5ccbdbb7fb..f781368ebb 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
 	import { ChevronDown, Loader2, Package } from '@lucide/svelte';
 	import {
 		DialogModelInformation,
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/index.ts b/tools/ui/src/lib/components/app/models/ModelsSelector/index.ts
new file mode 100644
index 0000000000..4599317acd
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/index.ts
@@ -0,0 +1,95 @@
+/**
+ *
+ * MODELS SELECTOR
+ *
+ * Model selection UI for the chat form: a desktop dropdown and a mobile sheet,
+ * each backed by a shared grouped options list, option rows, in-flight download
+ * rows and an inline reasoning-effort picker. Supports two server modes:
+ * - **Single model mode**: Server runs with one model, selector shows model info
+ * - **Router mode**: Server runs with multiple models, selector enables switching
+ *
+ * Integrates with modelsStore for model data and serverStore for mode detection.
+ *
+ */
+
+/**
+ * **ModelsSelectorDropdown** - Model selection dropdown (desktop)
+ *
+ * Dropdown for selecting AI models with status indicators,
+ * search, and model information display. Adapts UI based on server mode.
+ *
+ * **Architecture:**
+ * - Uses DropdownMenuSearchable for model list
+ * - Integrates with modelsStore for model options and selection
+ * - Detects router vs single mode from serverStore
+ * - Opens DialogModelInformation for model details
+ *
+ * **Features:**
+ * - Searchable model list with keyboard navigation
+ * - Model status indicators (loading/ready/error/updating)
+ * - Model capabilities badges (vision, tools, etc.)
+ * - Current/active model highlighting
+ * - Model information dialog on info button click
+ * - Router mode: shows all available models with status
+ * - Single mode: shows current model name only
+ * - Loading/updating skeleton states
+ * - Global selection support for form integration
+ *
+ * @example
+ * ```svelte
+ * <ModelsSelectorDropdown
+ *   currentModel={conversation.modelId}
+ *   onModelChange={(id, name) => updateModel(id)}
+ *   useGlobalSelection
+ * />
+ * ```
+ */
+export { default as ModelsSelectorDropdown } from './ModelsSelectorDropdown.svelte';
+
+/**
+ * **ModelsSelectorList** - Grouped model options list
+ *
+ * Renders grouped model options (loaded, favorites, available) with section
+ * headers and org subgroups. Shared between ModelsSelectorDropdown and ModelsSelectorSheet
+ * to avoid template duplication.
+ *
+ * Accepts an optional `renderOption` snippet to customize how each option is
+ * rendered (e.g., to add keyboard navigation or highlighting).
+ */
+export { default as ModelsSelectorList } from './ModelsSelectorList.svelte';
+
+/**
+ * **ModelsSelectorDownloadItem** - Single in-flight download row
+ *
+ * One "Download in progress" row for the models selector: live progress bar,
+ * pause / resume on click and a hover-revealed cancel, mirroring the discover
+ * quant chips.
+ */
+export { default as ModelsSelectorDownloadItem } from './ModelsSelectorDownloadItem.svelte';
+
+/**
+ * **ModelsSelectorOption** - Single model option row
+ *
+ * Renders a single model option with selection state, favorite toggle,
+ * load/unload actions, status indicators, and an info button.
+ * Used inside ModelsSelectorList or directly in custom render snippets.
+ */
+export { default as ModelsSelectorOption } from './ModelsSelectorOption.svelte';
+
+/**
+ * **ModelsSelectorReasoningPanel** - Inline reasoning effort picker
+ *
+ * Collapsible row that expands in place to reveal the reasoning effort levels.
+ * Used in the sticky footer of ModelsSelectorDropdown, where a flyout submenu
+ * would float over the model list it belongs to.
+ */
+export { default as ModelsSelectorReasoningPanel } from './ModelsSelectorReasoningPanel.svelte';
+
+/**
+ * **ModelsSelectorSheet** - Mobile model selection sheet
+ *
+ * Bottom sheet variant of ModelsSelectorDropdown optimized for touch interaction
+ * on mobile devices. Same functionality as ModelsSelectorDropdown but uses Sheet UI
+ * instead of DropdownMenu.
+ */
+export { default as ModelsSelectorSheet } from './ModelsSelectorSheet.svelte';
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
index 980809ad61..85233eb4e0 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscover.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import {
+		ModelsDiscoverDetails,
 		ModelsDiscoverList,
-		ModelsDiscoverListSearch,
-		ModelsDiscoverModelDetails
+		ModelsDiscoverListSearch
 	} from '$lib/components/app/models/discover';
 	import { HuggingFaceService } from '$lib/services';
 	import { modelsHubStore } from '$lib/stores';
@@ -119,7 +119,7 @@
 
 <main class="overflow-y-auto">
 	{#if selectedId}
-		<ModelsDiscoverModelDetails
+		<ModelsDiscoverDetails
 			{details}
 			error={detailError}
 			{files}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
similarity index 81%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
index aa5fcc01f9..d5ecf4edb2 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import ModelsDiscoverModelDetailsDownloadOptions from './ModelsDiscoverModelDetailsDownloadOptions.svelte';
-	import ModelsDiscoverModelDetailsHeader from './ModelsDiscoverModelDetailsHeader.svelte';
-	import ModelsDiscoverModelDetailsReadme from './ModelsDiscoverModelDetailsReadme.svelte';
-	import ModelsDiscoverModelDetailsSkeleton from './ModelsDiscoverModelDetailsSkeleton.svelte';
+	import { ModelsDiscoverDetailsDownloadOptions } from './ModelsDiscoverDetailsDownloadOptions';
+	import ModelsDiscoverDetailsHeader from './ModelsDiscoverDetailsHeader.svelte';
+	import ModelsDiscoverDetailsReadme from './ModelsDiscoverDetailsReadme.svelte';
+	import ModelsDiscoverDetailsSkeleton from './ModelsDiscoverDetailsSkeleton.svelte';
 	import { ModelAuxSidecar } from '$lib/enums';
 	import { HuggingFaceService } from '$lib/services';
 	import type { HfModelDetailInfo, HfModelSibling } from '$lib/types/huggingface';
@@ -37,7 +37,9 @@
 	// 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)
+		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 ?? ''));
@@ -72,14 +74,14 @@
 </script>
 
 {#if loading}
-	<ModelsDiscoverModelDetailsSkeleton />
+	<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">
-		<ModelsDiscoverModelDetailsHeader
+		<ModelsDiscoverDetailsHeader
 			{baseModels}
 			{details}
 			{gguf}
@@ -90,8 +92,8 @@
 			{modelId}
 		/>
 
-		<ModelsDiscoverModelDetailsDownloadOptions {bitDepthRows} {modelId} />
+		<ModelsDiscoverDetailsDownloadOptions {bitDepthRows} {modelId} />
 
-		<ModelsDiscoverModelDetailsReadme {readme} />
+		<ModelsDiscoverDetailsReadme {readme} />
 	</div>
 {/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
similarity index 89%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
index db6955b598..0e934033c4 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte
@@ -7,8 +7,8 @@
 		type QuantOption,
 		type SelectableFile
 	} from './download-options.utils';
-	import ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand from './ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte';
-	import ModelsDiscoverModelDetailsDownloadOptionsRow from './ModelsDiscoverModelDetailsDownloadOptionsRow.svelte';
+	import ModelsDiscoverDetailsDownloadOptionsDownloadCommand from './ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte';
+	import ModelsDiscoverDetailsDownloadOptionsRow from './ModelsDiscoverDetailsDownloadOptionsRow.svelte';
 	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import { modelsStore } from '$lib/stores';
 
@@ -120,17 +120,13 @@
 			 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)}
-				<ModelsDiscoverModelDetailsDownloadOptionsRow bitDepth={row.bitDepth} files={row.files} />
+				<ModelsDiscoverDetailsDownloadOptionsRow bitDepth={row.bitDepth} files={row.files} />
 			{/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">
-			<ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand
-				{draftOptions}
-				{mainOptions}
-				{modelId}
-			/>
+			<ModelsDiscoverDetailsDownloadOptionsDownloadCommand {draftOptions} {mainOptions} {modelId} />
 		</div>
 	</section>
 {/if}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsDownloadCommand.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
similarity index 99%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
index bf78af4075..2bc96e63ed 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import DownloadProgressBar from '../../DownloadProgressBar.svelte';
 	import { type DownloadEntryState, labelFor } from './download-options.utils';
-	import DownloadProgressBar from './DownloadProgressBar.svelte';
 	import { Check, Download, Loader2, Pause, Play, RotateCw, X } from '@lucide/svelte';
 	import DialogConfirmation from '$lib/components/app/dialogs/DialogConfirmation.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
similarity index 83%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
index dc9ad479f3..ad56d9d94a 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsRow.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptionsRow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DownloadEntryState, SelectableFile } from './download-options.utils';
-	import ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton from './ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.svelte';
+	import ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton from './ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton.svelte';
 	import { minMemoryTierGb } from '$lib/utils';
 
 	interface Props {
@@ -36,7 +36,7 @@
 
 	<div class="flex flex-wrap justify-end gap-1.5">
 		{#each files as file (file.path)}
-			<ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton entry={file.state} {file} />
+			<ModelsDiscoverDetailsDownloadOptionsQuantDownloadButton entry={file.state} {file} />
 		{/each}
 	</div>
 </div>
diff --git a/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/download-options.utils.ts
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
index 69eb42704f..58d46e6549 100644
--- a/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/download-options.utils.ts
@@ -71,8 +71,8 @@ export function quantBitDepth(quant: string | null): number {
 
 // LLAMA-APP-REUSE: --spec-type value for each draft sidecar; aux sidecars stay empty
 export const SPEC_TYPE: Record<ModelSidecar, string> = {
-	[ModelAuxSidecar.MMPROJ]: '',
 	[ModelAuxSidecar.IMATRIX]: '',
+	[ModelAuxSidecar.MMPROJ]: '',
 	[ModelDraftSidecar.DFLASH]: 'draft-dflash',
 	[ModelDraftSidecar.DSPARK]: 'draft-dspark',
 	[ModelDraftSidecar.EAGLE3]: 'eagle3',
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..a9b06213a3
--- /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/ModelsDiscoverModelDetailsHeader.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
similarity index 94%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsHeader.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
index 22a1ec5889..30d30e262d 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsHeader.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import ModelsDiscoverAvatar from './ModelsDiscoverAvatar.svelte';
-	import ModelsDiscoverModelDetailsMetadata from './ModelsDiscoverModelDetailsMetadata.svelte';
+	import ModelsDiscoverAvatar from '../ModelsDiscoverAvatar.svelte';
+	import ModelsDiscoverDetailsMetadata from './ModelsDiscoverDetailsMetadata.svelte';
 	import { Download, ExternalLink, Heart, Image, Lightbulb, Wrench } from '@lucide/svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { ICON_CLASS_SM } from '$lib/constants';
@@ -137,5 +137,5 @@
 		{/if}
 	</div>
 
-	<ModelsDiscoverModelDetailsMetadata {details} {gguf} {licenseTag} {modelId} />
+	<ModelsDiscoverDetailsMetadata {details} {gguf} {licenseTag} {modelId} />
 </header>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsMetadata.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
similarity index 84%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsMetadata.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
index 3e48b89e23..ecbcb3f89d 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsMetadata.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadata.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelsDiscoverChatTemplateDialog from './ModelsDiscoverChatTemplateDialog.svelte';
-	import ModelsDiscoverModelDetailsMetadataItem from './ModelsDiscoverModelDetailsMetadataItem.svelte';
+	import ModelsDiscoverDetailsMetadataItem from './ModelsDiscoverDetailsMetadataItem.svelte';
 	import { MessageSquareCode } from '@lucide/svelte';
 	import { modelsHubStore } from '$lib/stores';
 	import type { HfModelDetailInfo, HfModelGguf } from '$lib/types/huggingface';
@@ -31,21 +31,21 @@
 <!-- Metadata chips: label | value pairs, matching the HF model page style -->
 <div class="flex flex-wrap items-center gap-1.5">
 	{#if gguf?.total}
-		<ModelsDiscoverModelDetailsMetadataItem
+		<ModelsDiscoverDetailsMetadataItem
 			label="Model size"
 			value="{formatParameters(gguf.total)} params"
 		/>
 	{/if}
 
 	{#if gguf?.context_length}
-		<ModelsDiscoverModelDetailsMetadataItem
+		<ModelsDiscoverDetailsMetadataItem
 			label="Context"
 			value={gguf.context_length.toLocaleString()}
 		/>
 	{/if}
 
 	{#if gguf?.architecture}
-		<ModelsDiscoverModelDetailsMetadataItem label="Architecture" value={gguf.architecture} />
+		<ModelsDiscoverDetailsMetadataItem label="Architecture" value={gguf.architecture} />
 	{/if}
 
 	{#if gguf?.chat_template}
@@ -60,7 +60,7 @@
 	{/if}
 
 	{#if licenseTag}
-		<ModelsDiscoverModelDetailsMetadataItem label="License" value={licenseTag} />
+		<ModelsDiscoverDetailsMetadataItem label="License" value={licenseTag} />
 	{/if}
 
 	{#if details.gated === true}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsMetadataItem.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsMetadataItem.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsMetadataItem.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
similarity index 95%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
index 9204b60d9c..e6fb8914b8 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsSkeleton.svelte
@@ -2,7 +2,7 @@
 	import { Skeleton } from '$lib/components/ui/skeleton';
 </script>
 
-<!-- Static skeleton of ModelsDiscoverModelDetails: header, metadata chips, download options and readme lines. -->
+<!-- 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">
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..165070ae83
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverDetails/index.ts
@@ -0,0 +1,64 @@
+/**
+ *
+ * MODELS DISCOVER — DETAILS
+ *
+ * The right-hand detail pane of the hub: 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';
+
+/**
+ * **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.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItem.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
similarity index 97%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItem.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
index b83978f69e..d26333eaff 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItem.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import ModelId from '../ModelId.svelte';
-	import ModelsDiscoverAvatar from './ModelsDiscoverAvatar.svelte';
+	import ModelId from '../../ModelId.svelte';
+	import ModelsDiscoverAvatar from '../ModelsDiscoverAvatar.svelte';
 	import { isAuxSidecar, type ModelSidecar } from '$lib/constants';
 	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import { modelsHubStore } from '$lib/stores';
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItemSkeleton.svelte
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListSearch.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte
similarity index 100%
rename from tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListSearch.svelte
rename to tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListSearch.svelte
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..ecd5db70cc
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList/index.ts
@@ -0,0 +1,38 @@
+/**
+ *
+ * MODELS DISCOVER — LIST
+ *
+ * The hub's 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 hub's model list as a navigable column. Each row links to the
+ * model's detail route 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 sidebar list. Links to `/models-hub/[org]/[model]`.
+ */
+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
index 3063e8312b..a1a247e62c 100644
--- a/tools/ui/src/lib/components/app/models/discover/index.ts
+++ b/tools/ui/src/lib/components/app/models/discover/index.ts
@@ -1,9 +1,11 @@
 /**
  *
- * MODELS HUB
+ * MODELS DISCOVER
  *
- * Components for the Models Hub route (`/models-hub`): a sidebar list of
- * HuggingFace GGUF models and a detail view for the selected model.
+ * Components for the Models Discover hub: 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.
  *
  */
 
@@ -16,125 +18,22 @@
  */
 export { default as ModelsDiscover } from './ModelsDiscover.svelte';
 
-/**
- * **ModelsDiscoverList** - Sidebar model list
- *
- * Renders the hub's model list as a navigable column. Each row links to the
- * model's detail route 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';
-
-/**
- * **ModelsDiscoverItem** - Single sidebar row
- *
- * One model entry in the sidebar list. Links to `/models-hub/[org]/[model]`.
- */
-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';
-
 /**
  * **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.
+ * 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';
 
-/**
- * **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 ModelsDiscoverModelDetails } from './ModelsDiscoverModelDetails.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 ModelsDiscoverModelDetailsHeader } from './ModelsDiscoverModelDetailsHeader.svelte';
-
-/**
- * **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 ModelsDiscoverModelDetailsDownloadOptions } from './ModelsDiscoverModelDetailsDownloadOptions.svelte';
-
-/**
- * **ModelsDiscoverDetailsDownloadOptionsRow** - One bit-depth group of quants
- *
- * A single bit-depth row inside ModelsDiscoverModelDetailsDownloadOptions: the
- * depth label with its memory hint and the quant chips of that depth.
- */
-export { default as ModelsDiscoverModelDetailsDownloadOptionsRow } from './ModelsDiscoverModelDetailsDownloadOptionsRow.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 ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton } from './ModelsDiscoverModelDetailsDownloadOptionsQuantDownloadButton.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 ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand } from './ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.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 ModelsDiscoverModelDetailsSkeleton } from './ModelsDiscoverModelDetailsSkeleton.svelte';
-
-/**
- * **ModelsDiscoverDetailsMetadataItem** - Single metadata chip
- *
- * One label | value chip of the detail view's metadata row (model size,
- * context, architecture, license).
- */
-export { default as ModelsDiscoverModelDetailsMetadataItem } from './ModelsDiscoverModelDetailsMetadataItem.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';
-
-/**
- * **ModelsDiscoverDetailsReadme** - Detail view README
- *
- * Renders the model card README as markdown.
- */
-export { default as ModelsDiscoverModelDetailsReadme } from './ModelsDiscoverModelDetailsReadme.svelte';
-
 /**
  * **DownloadProgressBar** - 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 DownloadProgressBar } from './DownloadProgressBar.svelte';
+
+export * from './ModelsDiscoverList';
+export * from './ModelsDiscoverDetails';
diff --git a/tools/ui/src/lib/components/app/models/index.ts b/tools/ui/src/lib/components/app/models/index.ts
index 30c0d7f1ba..8bd7b879e4 100644
--- a/tools/ui/src/lib/components/app/models/index.ts
+++ b/tools/ui/src/lib/components/app/models/index.ts
@@ -8,90 +8,11 @@
  *
  * Integrates with modelsStore for model data and serverStore for mode detection.
  *
+ * The selection UI lives in the ModelsSelector subfolder; the shared model
+ * display primitives (id / badge rendering) stay here.
+ *
  */
 
-/**
- * **ModelsSelectorDropdown** - Model selection dropdown (desktop)
- *
- * Dropdown for selecting AI models with status indicators,
- * search, and model information display. Adapts UI based on server mode.
- *
- * **Architecture:**
- * - Uses DropdownMenuSearchable for model list
- * - Integrates with modelsStore for model options and selection
- * - Detects router vs single mode from serverStore
- * - Opens DialogModelInformation for model details
- *
- * **Features:**
- * - Searchable model list with keyboard navigation
- * - Model status indicators (loading/ready/error/updating)
- * - Model capabilities badges (vision, tools, etc.)
- * - Current/active model highlighting
- * - Model information dialog on info button click
- * - Router mode: shows all available models with status
- * - Single mode: shows current model name only
- * - Loading/updating skeleton states
- * - Global selection support for form integration
- *
- * @example
- * ```svelte
- * <ModelsSelectorDropdown
- *   currentModel={conversation.modelId}
- *   onModelChange={(id, name) => updateModel(id)}
- *   useGlobalSelection
- * />
- * ```
- */
-export { default as ModelsSelectorDropdown } from './ModelsSelectorDropdown.svelte';
-
-/**
- * **ModelsSelectorList** - Grouped model options list
- *
- * Renders grouped model options (loaded, favorites, available) with section
- * headers and org subgroups. Shared between ModelsSelectorDropdown and ModelsSelectorSheet
- * to avoid template duplication.
- *
- * Accepts an optional `renderOption` snippet to customize how each option is
- * rendered (e.g., to add keyboard navigation or highlighting).
- */
-export { default as ModelsSelectorList } from './ModelsSelectorList.svelte';
-
-/**
- * **ModelsSelectorDownloadItem** - Single in-flight download row
- *
- * One "Download in progress" row for the models selector: live progress bar,
- * pause / resume on click and a hover-revealed cancel, mirroring the discover
- * quant chips.
- */
-export { default as ModelsSelectorDownloadItem } from './ModelsSelectorDownloadItem.svelte';
-
-/**
- * **ModelsSelectorOption** - Single model option row
- *
- * Renders a single model option with selection state, favorite toggle,
- * load/unload actions, status indicators, and an info button.
- * Used inside ModelsSelectorList or directly in custom render snippets.
- */
-export { default as ModelsSelectorOption } from './ModelsSelectorOption.svelte';
-
-/**
- * **ModelsSelectorReasoningPanel** - Inline reasoning effort picker
- *
- * Collapsible row that expands in place to reveal the reasoning effort levels.
- * Used in the sticky footer of ModelsSelectorDropdown, where a flyout submenu
- * would float over the model list it belongs to.
- */
-export { default as ModelsSelectorReasoningPanel } from './ModelsSelectorReasoningPanel.svelte';
-
-/**
- * **ModelsSelectorSheet** - Mobile model selection sheet
- *
- * Bottom sheet variant of ModelsSelectorDropdown optimized for touch interaction
- * on mobile devices. Same functionality as ModelsSelectorDropdown but uses Sheet UI
- * instead of DropdownMenu.
- */
-export { default as ModelsSelectorSheet } from './ModelsSelectorSheet.svelte';
-
 /** * **ModelBadge** - Model name display badge
  *
  * Compact badge showing current model name with package icon.
@@ -127,3 +48,5 @@ export { default as ModelBadge } from './ModelBadge.svelte';
  * Respects the user's `showRawModelNames` setting.
  */
 export { default as ModelId } from './ModelId.svelte';
+
+export * from './ModelsSelector';
diff --git a/tools/ui/src/lib/stores/models-hub/index.svelte.ts b/tools/ui/src/lib/stores/models-hub/index.svelte.ts
index b04d2c26eb..7b6234bd83 100644
--- a/tools/ui/src/lib/stores/models-hub/index.svelte.ts
+++ b/tools/ui/src/lib/stores/models-hub/index.svelte.ts
@@ -8,7 +8,7 @@
  * with matching models across all of HuggingFace. Both paths fetch the same
  * fields (chat template, context length, repo files), so a row renders the same
  * badges and sizes whether it came from the catalog or from a query.
- * Detail data is loaded by ModelsDiscoverModelDetails, not here.
+ * Detail data is loaded by ModelsDiscoverDetails, not here.
  */
 
 import { isAuxSidecar } from '$lib/constants';
diff --git a/tools/ui/tests/stories/ModelsDiscoverModelDetails.stories.svelte b/tools/ui/tests/stories/ModelsDiscoverDetails.stories.svelte
similarity index 79%
rename from tools/ui/tests/stories/ModelsDiscoverModelDetails.stories.svelte
rename to tools/ui/tests/stories/ModelsDiscoverDetails.stories.svelte
index 58bb21b7ee..682d87545c 100644
--- a/tools/ui/tests/stories/ModelsDiscoverModelDetails.stories.svelte
+++ b/tools/ui/tests/stories/ModelsDiscoverDetails.stories.svelte
@@ -1,11 +1,11 @@
 <script lang="ts" module>
 	import { mockDetails, mockSiblings } from './fixtures/models-discover';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ModelsDiscoverChatTemplateDialog from '$lib/components/app/models/discover/ModelsDiscoverChatTemplateDialog.svelte';
-	import ModelsDiscoverModelDetails from '$lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte';
-	import ModelsDiscoverModelDetailsDownloadOptions from '$lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte';
-	import ModelsDiscoverModelDetailsHeader from '$lib/components/app/models/discover/ModelsDiscoverModelDetailsHeader.svelte';
-	import ModelsDiscoverModelDetailsReadme from '$lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte';
+	import ModelsDiscoverChatTemplateDialog from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverChatTemplateDialog.svelte';
+	import ModelsDiscoverDetails from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetails.svelte';
+	import ModelsDiscoverDetailsDownloadOptions from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsDownloadOptions/ModelsDiscoverDetailsDownloadOptions.svelte';
+	import ModelsDiscoverDetailsHeader from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsHeader.svelte';
+	import ModelsDiscoverDetailsReadme from '$lib/components/app/models/discover/ModelsDiscoverDetails/ModelsDiscoverDetailsReadme.svelte';
 	import type { HfModelSibling } from '$lib/types';
 
 	const { Story } = defineMeta({
@@ -31,7 +31,7 @@
 
 <Story name="Header">
 	<div class="w-160 p-4">
-		<ModelsDiscoverModelDetailsHeader
+		<ModelsDiscoverDetailsHeader
 			baseModels={mockDetails.cardData?.base_model ? [String(mockDetails.cardData.base_model)] : []}
 			details={mockDetails}
 			hasReasoning
@@ -47,7 +47,7 @@
 
 <Story name="Download options">
 	<div class="w-200 p-4">
-		<ModelsDiscoverModelDetailsDownloadOptions
+		<ModelsDiscoverDetailsDownloadOptions
 			bitDepthRows={[
 				{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
 				{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) },
@@ -60,7 +60,7 @@
 
 <Story name="Download options (unknown device)">
 	<div class="w-200 p-4">
-		<ModelsDiscoverModelDetailsDownloadOptions
+		<ModelsDiscoverDetailsDownloadOptions
 			bitDepthRows={[
 				{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
 				{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) }
@@ -74,7 +74,7 @@
 		paused, downloaded and the failed retry badge. -->
 <Story name="Download options (download states)">
 	<div class="w-200 p-4">
-		<ModelsDiscoverModelDetailsDownloadOptions
+		<ModelsDiscoverDetailsDownloadOptions
 			bitDepthRows={[
 				{ bitDepth: 4, files: files.filter((f) => f.path.includes('Q4_K_M')) },
 				{ bitDepth: 8, files: files.filter((f) => f.path.includes('Q8_0')) },
@@ -99,7 +99,7 @@
 
 <Story name="Readme">
 	<div class="w-160 p-4">
-		<ModelsDiscoverModelDetailsReadme {readme} />
+		<ModelsDiscoverDetailsReadme {readme} />
 	</div>
 </Story>
 
@@ -111,7 +111,7 @@
 
 <Story name="Details (loading)">
 	<div class="h-96 w-200 border">
-		<ModelsDiscoverModelDetails
+		<ModelsDiscoverDetails
 			details={null}
 			files={[]}
 			loading
@@ -123,7 +123,7 @@
 
 <Story name="Details (error)">
 	<div class="h-96 w-200 border">
-		<ModelsDiscoverModelDetails
+		<ModelsDiscoverDetails
 			details={null}
 			error="Model not found"
 			files={[]}
@@ -135,7 +135,7 @@
 
 <Story name="Details (loaded)">
 	<div class="h-96 w-200 overflow-y-auto border">
-		<ModelsDiscoverModelDetails
+		<ModelsDiscoverDetails
 			details={mockDetails}
 			{files}
 			modelId={mockDetails.id ?? 'ggml-org/gemma-4-12b-it-GGUF'}
diff --git a/tools/ui/tests/stories/ModelsDiscoverList.stories.svelte b/tools/ui/tests/stories/ModelsDiscoverList.stories.svelte
index 8df2ec1f52..2660f3ff96 100644
--- a/tools/ui/tests/stories/ModelsDiscoverList.stories.svelte
+++ b/tools/ui/tests/stories/ModelsDiscoverList.stories.svelte
@@ -2,8 +2,8 @@
 	import { mockGemma, mockListModels, mockQwen } from './fixtures/models-discover';
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import ModelsDiscoverAvatar from '$lib/components/app/models/discover/ModelsDiscoverAvatar.svelte';
-	import ModelsDiscoverList from '$lib/components/app/models/discover/ModelsDiscoverList.svelte';
-	import ModelsDiscoverListItem from '$lib/components/app/models/discover/ModelsDiscoverListItem.svelte';
+	import ModelsDiscoverList from '$lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverList.svelte';
+	import ModelsDiscoverListItem from '$lib/components/app/models/discover/ModelsDiscoverList/ModelsDiscoverListItem.svelte';
 
 	const { Story } = defineMeta({
 		tags: ['autodocs'],
diff --git a/tools/ui/tests/stories/ModelsSelector.stories.svelte b/tools/ui/tests/stories/ModelsSelector.stories.svelte
index 3ea9db0ad1..f0c5733cf8 100644
--- a/tools/ui/tests/stories/ModelsSelector.stories.svelte
+++ b/tools/ui/tests/stories/ModelsSelector.stories.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ModelsSelectorList from '$lib/components/app/models/ModelsSelectorList.svelte';
-	import ModelsSelectorOption from '$lib/components/app/models/ModelsSelectorOption.svelte';
+	import ModelsSelectorList from '$lib/components/app/models/ModelsSelector/ModelsSelectorList.svelte';
+	import ModelsSelectorOption from '$lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte';
 	import type { GroupedModelOptions, ModelItem } from '$lib/components/app/navigation/utils';
 	import { ServerModelStatus } from '$lib/enums';
 	import { modelsStore } from '$lib/stores/models/index.svelte';