From 45df407b7879494ac856b7c77b8f752eba116266 Mon Sep 17 00:00:00 2001
From: shine1i <wasimysdev@gmail.com>
Date: Mon, 2 Feb 2026 13:16:08 +0100
Subject: [PATCH] refactor: simplify model and dataset combobox logic, remove
 curated items, and streamline search handling across components

---
 studio/frontend/src/components/ui/tooltip.tsx |   2 +-
 .../components/steps/dataset-step.tsx         | 129 +++-----------
 .../components/steps/model-selection-step.tsx | 139 ++++-----------
 .../studio/sections/dataset-section.tsx       | 158 +++---------------
 .../studio/sections/model-section.tsx         | 117 +++----------
 .../src/hooks/use-hf-dataset-search.ts        |   4 +-
 .../frontend/src/hooks/use-hf-model-search.ts |  29 +++-
 .../src/hooks/use-hf-paginated-search.ts      |  19 +--
 .../frontend/src/hooks/use-infinite-scroll.ts |   4 +-
 9 files changed, 139 insertions(+), 462 deletions(-)

diff --git a/studio/frontend/src/components/ui/tooltip.tsx b/studio/frontend/src/components/ui/tooltip.tsx
index 516d2b8d5f..6da22c3b65 100644
--- a/studio/frontend/src/components/ui/tooltip.tsx
+++ b/studio/frontend/src/components/ui/tooltip.tsx
@@ -4,7 +4,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
-  delayDuration = 0,
+  delayDuration = 400,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
diff --git a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
index 24f6564e66..39664f290f 100644
--- a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
@@ -32,7 +32,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { DATASETS } from "@/config/training";
 import {
   useDebouncedValue,
   useHfDatasetSearch,
@@ -86,88 +85,24 @@ export function DatasetStep() {
   );
 
   const [inputValue, setInputValue] = useState("");
+  const selectingRef = useRef(false);
   const debouncedQuery = useDebouncedValue(inputValue);
   const {
     results: hfResults,
     isLoading,
     isLoadingMore,
-    hasMore,
     fetchMore,
   } = useHfDatasetSearch(debouncedQuery, {
     accessToken: hfToken || undefined,
   });
 
-  const curatedDatasets = useMemo(
-    () =>
-      [...DATASETS].sort(
-        (a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0),
-      ),
-    [],
-  );
-
-  const datasetMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        label: string;
-        description?: string;
-        size?: string;
-        totalExamples?: number;
-        sizeCategory?: string;
-        downloads?: number;
-        recommended?: boolean;
-      }
-    >();
-    for (const d of curatedDatasets) {
-      map.set(d.id, {
-        label: d.name,
-        description: d.description,
-        size: d.size,
-        recommended: d.recommended,
-      });
-    }
-    for (const r of hfResults) {
-      if (!map.has(r.id)) {
-        map.set(r.id, {
-          label: r.id,
-          downloads: r.downloads,
-          totalExamples: r.totalExamples,
-          sizeCategory: r.sizeCategory,
-        });
-      }
-    }
-    return map;
-  }, [curatedDatasets, hfResults]);
-
-  const displayIds = useMemo(() => {
-    if (!debouncedQuery.trim()) {
-      return curatedDatasets.map((d) => d.id);
-    }
-    const q = debouncedQuery.toLowerCase();
-    const curatedIds = curatedDatasets
-      .filter(
-        (d) =>
-          d.name.toLowerCase().includes(q) || d.id.toLowerCase().includes(q),
-      )
-      .map((d) => d.id);
-    const liveIds = hfResults
-      .map((r) => r.id)
-      .filter((id) => !curatedIds.includes(id));
-    return [...curatedIds, ...liveIds];
-  }, [debouncedQuery, curatedDatasets, hfResults]);
-
-  const allIds = useMemo(
-    () => [
-      ...new Set([
-        ...curatedDatasets.map((d) => d.id),
-        ...hfResults.map((r) => r.id),
-      ]),
-    ],
-    [curatedDatasets, hfResults],
-  );
+  const resultIds = useMemo(() => hfResults.map((r) => r.id), [hfResults]);
 
   const comboboxAnchorRef = useRef<HTMLDivElement>(null);
-  const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore);
+  const { scrollRef, sentinelRef } = useInfiniteScroll(
+    fetchMore,
+    hfResults.length,
+  );
 
   const handleFileUpload = () => {
     setUploadedFile("my_dataset.jsonl");
@@ -239,13 +174,13 @@ export function DatasetStep() {
             <FieldLabel>Search datasets</FieldLabel>
             <div ref={comboboxAnchorRef}>
               <Combobox
-                items={allIds}
-                filteredItems={displayIds}
+                items={resultIds}
+                filteredItems={resultIds}
                 filter={null}
                 value={dataset}
-                onValueChange={(id) => setDataset(id)}
-                onInputValueChange={(val) => setInputValue(val)}
-                itemToStringValue={(id) => datasetMap.get(id)?.label ?? id}
+                onValueChange={(id) => { selectingRef.current = true; setDataset(id); }}
+                onInputValueChange={(val) => { if (selectingRef.current) { selectingRef.current = false; return; } setInputValue(val); }}
+                itemToStringValue={(id) => id}
                 autoHighlight={true}
               >
                 <ComboboxInput
@@ -259,7 +194,7 @@ export function DatasetStep() {
                 <ComboboxContent anchor={comboboxAnchorRef}>
                   {isLoading ? (
                     <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
-                      <Spinner className="size-4" /> Searching…
+                      <Spinner className="size-4" /> Searching...
                     </div>
                   ) : (
                     <ComboboxEmpty>No datasets found</ComboboxEmpty>
@@ -270,13 +205,10 @@ export function DatasetStep() {
                   >
                     <ComboboxList className="p-1 !max-h-none !overflow-visible">
                       {(id: string) => {
-                        const meta = datasetMap.get(id);
-                        const label = meta?.label ?? id;
-                        const rowLabel =
-                          meta?.size ??
-                          (meta?.totalExamples
-                            ? `${formatCompact(meta.totalExamples)} rows`
-                            : null);
+                        const r = hfResults.find((r) => r.id === id);
+                        const detail = r?.totalExamples
+                          ? `${formatCompact(r.totalExamples)} rows`
+                          : (r?.sizeCategory ?? null);
                         return (
                           <ComboboxItem
                             key={id}
@@ -284,41 +216,32 @@ export function DatasetStep() {
                             className="justify-between"
                           >
                             <Tooltip>
-                              <TooltipTrigger asChild={true}>
-                                <div className="flex flex-col gap-0.5 min-w-0 flex-1">
-                                  <span className="truncate">{label}</span>
-                                  {meta?.description && (
-                                    <span className="text-xs text-muted-foreground truncate">
-                                      {meta.description}
-                                    </span>
-                                  )}
-                                </div>
+                              <TooltipTrigger asChild>
+                                <span className="min-w-0 flex-1 truncate">
+                                  {id}
+                                </span>
                               </TooltipTrigger>
                               <TooltipContent
                                 side="left"
                                 className="max-w-xs break-all"
                               >
-                                {label}
+                                {id}
                               </TooltipContent>
                             </Tooltip>
-                            {rowLabel ? (
-                              <Badge variant="outline" className="shrink-0">
-                                {rowLabel}
-                              </Badge>
-                            ) : meta?.sizeCategory ? (
+                            {detail ? (
                               <span className="text-[10px] text-muted-foreground shrink-0">
-                                {meta.sizeCategory}
+                                {detail}
                               </span>
-                            ) : meta?.downloads != null ? (
+                            ) : r?.downloads != null ? (
                               <span className="text-[10px] text-muted-foreground shrink-0">
-                                ↓{formatCompact(meta.downloads)}
+                                ↓{formatCompact(r.downloads)}
                               </span>
                             ) : null}
                           </ComboboxItem>
                         );
                       }}
                     </ComboboxList>
-                    {hasMore && <div ref={sentinelRef} className="h-px" />}
+                    <div ref={sentinelRef} className="h-px" />
                     {isLoadingMore && (
                       <div className="flex items-center justify-center py-2">
                         <Spinner className="size-3.5 text-muted-foreground" />
diff --git a/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx b/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
index dd71ebc219..7f8346f2ff 100644
--- a/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/model-selection-step.tsx
@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import {
   Combobox,
   ComboboxContent,
@@ -31,7 +30,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { MODELS, MODEL_TYPE_TO_HF_TASK } from "@/config/training";
+import { MODEL_TYPE_TO_HF_TASK } from "@/config/training";
 import {
   useDebouncedValue,
   useHfModelSearch,
@@ -71,92 +70,26 @@ export function ModelSelectionStep() {
   );
 
   const [inputValue, setInputValue] = useState("");
+  const selectingRef = useRef(false);
   const debouncedQuery = useDebouncedValue(inputValue);
   const task = modelType ? MODEL_TYPE_TO_HF_TASK[modelType] : undefined;
   const {
     results: hfResults,
     isLoading,
     isLoadingMore,
-    hasMore,
     fetchMore,
   } = useHfModelSearch(debouncedQuery, {
     task,
     accessToken: hfToken || undefined,
   });
 
-  const curatedModels = useMemo(() => {
-    if (!modelType) {
-      return [];
-    }
-    return MODELS.filter((m) => m.type === modelType).sort(
-      (a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0),
-    );
-  }, [modelType]);
+  const resultIds = useMemo(() => hfResults.map((r) => r.id), [hfResults]);
 
-  const modelMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        label: string;
-        params?: string;
-        totalParams?: number;
-        downloads?: number;
-        recommended?: boolean;
-      }
-    >();
-    for (const m of curatedModels) {
-      map.set(m.hfRepo ?? m.id, {
-        label: m.name,
-        params: m.params,
-        recommended: m.recommended,
-      });
-    }
-    for (const r of hfResults) {
-      if (!map.has(r.id)) {
-        map.set(r.id, {
-          label: r.id,
-          downloads: r.downloads,
-          totalParams: r.totalParams,
-        });
-      }
-    }
-    return map;
-  }, [curatedModels, hfResults]);
-
-  const displayIds = useMemo(() => {
-    if (!debouncedQuery.trim()) {
-      return curatedModels.map((m) => m.hfRepo ?? m.id);
-    }
-    const q = debouncedQuery.toLowerCase();
-    const curatedIds = curatedModels
-      .filter(
-        (m) =>
-          m.name.toLowerCase().includes(q) ||
-          m.id.toLowerCase().includes(q) ||
-          m.hfRepo?.toLowerCase().includes(q),
-      )
-      .map((m) => m.hfRepo ?? m.id);
-    const liveIds = hfResults
-      .map((r) => r.id)
-      .filter((id) => !curatedIds.includes(id));
-    return [...curatedIds, ...liveIds];
-  }, [debouncedQuery, curatedModels, hfResults]);
-
-  const allIds = useMemo(
-    () => [
-      ...new Set([
-        ...curatedModels.map((m) => m.hfRepo ?? m.id),
-        ...hfResults.map((r) => r.id),
-      ]),
-    ],
-    [curatedModels, hfResults],
-  );
-
-  const selectedModelData = MODELS.find(
-    (m) => m.id === selectedModel || m.hfRepo === selectedModel,
-  );
   const comboboxAnchorRef = useRef<HTMLDivElement>(null);
-  const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore);
+  const { scrollRef, sentinelRef } = useInfiniteScroll(
+    fetchMore,
+    hfResults.length,
+  );
 
   return (
     <FieldGroup>
@@ -219,13 +152,13 @@ export function ModelSelectionStep() {
         </FieldLabel>
         <div ref={comboboxAnchorRef}>
           <Combobox
-            items={allIds}
-            filteredItems={displayIds}
+            items={resultIds}
+            filteredItems={resultIds}
             filter={null}
             value={selectedModel}
-            onValueChange={(id) => setSelectedModel(id)}
-            onInputValueChange={(val) => setInputValue(val)}
-            itemToStringValue={(id) => modelMap.get(id)?.label ?? id}
+            onValueChange={(id) => { selectingRef.current = true; setSelectedModel(id); }}
+            onInputValueChange={(val) => { if (selectingRef.current) { selectingRef.current = false; return; } setInputValue(val); }}
+            itemToStringValue={(id) => id}
             autoHighlight={true}
           >
             <ComboboxInput placeholder="Search models..." className="w-full">
@@ -247,13 +180,10 @@ export function ModelSelectionStep() {
               >
                 <ComboboxList className="p-1 !max-h-none !overflow-visible">
                   {(id: string) => {
-                    const meta = modelMap.get(id);
-                    const label = meta?.label ?? id;
-                    const sizeLabel =
-                      meta?.params ??
-                      (meta?.totalParams
-                        ? formatCompact(meta.totalParams)
-                        : null);
+                    const r = hfResults.find((r) => r.id === id);
+                    const sizeLabel = r?.totalParams
+                      ? formatCompact(r.totalParams)
+                      : null;
                     return (
                       <ComboboxItem
                         key={id}
@@ -263,38 +193,30 @@ export function ModelSelectionStep() {
                         <Tooltip>
                           <TooltipTrigger asChild={true}>
                             <span className="min-w-0 flex-1 truncate">
-                              {label}
+                              {id}
                             </span>
                           </TooltipTrigger>
                           <TooltipContent
                             side="left"
                             className="max-w-xs break-all"
                           >
-                            {label}
+                            {id}
                           </TooltipContent>
                         </Tooltip>
-                        <span className="flex items-center gap-1.5 shrink-0">
-                          {meta?.recommended && (
-                            <Badge
-                              variant="outline"
-                              className="text-[10px] px-1.5 py-0 text-emerald-600 border-emerald-200 dark:border-emerald-800 dark:text-emerald-400"
-                            >
-                              Recommended
-                            </Badge>
-                          )}
-                          {sizeLabel ? (
-                            <Badge variant="outline">{sizeLabel}</Badge>
-                          ) : meta?.downloads != null ? (
-                            <span className="text-[10px] text-muted-foreground">
-                              ↓{formatCompact(meta.downloads)}
-                            </span>
-                          ) : null}
-                        </span>
+                        {sizeLabel ? (
+                          <span className="text-xs text-muted-foreground shrink-0">
+                            {sizeLabel}
+                          </span>
+                        ) : r?.downloads != null ? (
+                          <span className="text-[10px] text-muted-foreground shrink-0">
+                            ↓{formatCompact(r.downloads)}
+                          </span>
+                        ) : null}
                       </ComboboxItem>
                     );
                   }}
                 </ComboboxList>
-                {hasMore && <div ref={sentinelRef} className="h-px" />}
+                <div ref={sentinelRef} className="h-px" />
                 {isLoadingMore && (
                   <div className="flex items-center justify-center py-2">
                     <Spinner className="size-3.5 text-muted-foreground" />
@@ -306,7 +228,7 @@ export function ModelSelectionStep() {
         </div>
       </Field>
 
-      {(selectedModelData || selectedModel) && (
+      {selectedModel && (
         <Field>
           <div className="flex items-center justify-between">
             <div>
@@ -340,8 +262,7 @@ export function ModelSelectionStep() {
                 </Tooltip>
               </FieldLabel>
               <FieldDescription>
-                Choose how to fine-tune{" "}
-                {selectedModelData?.name ?? selectedModel}
+                Choose how to fine-tune {selectedModel}
               </FieldDescription>
             </div>
             <Select
diff --git a/studio/frontend/src/features/studio/sections/dataset-section.tsx b/studio/frontend/src/features/studio/sections/dataset-section.tsx
index 4db8d93d99..466565a479 100644
--- a/studio/frontend/src/features/studio/sections/dataset-section.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-section.tsx
@@ -1,10 +1,5 @@
 import { SectionCard } from "@/components/section-card";
 import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import {
   Combobox,
   ComboboxContent,
@@ -27,7 +22,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { DATASETS } from "@/config/training";
 import {
   useDebouncedValue,
   useHfDatasetSearch,
@@ -36,7 +30,6 @@ import {
 import { formatCompact } from "@/lib/utils";
 import { useWizardStore } from "@/stores/training";
 import {
-  ArrowDown01Icon,
   CloudUploadIcon,
   Database02Icon,
   FileAttachmentIcon,
@@ -59,89 +52,26 @@ export function DatasetSection() {
         hfToken: s.hfToken,
       })),
     );
-  const [recOpen, setRecOpen] = useState(false);
 
   const [inputValue, setInputValue] = useState("");
+  const selectingRef = useRef(false);
   const debouncedQuery = useDebouncedValue(inputValue);
   const {
     results: hfResults,
     isLoading,
     isLoadingMore,
-    hasMore,
     fetchMore,
   } = useHfDatasetSearch(debouncedQuery, {
     accessToken: hfToken || undefined,
   });
 
-  const curatedDatasets = useMemo(
-    () =>
-      [...DATASETS].sort(
-        (a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0),
-      ),
-    [],
-  );
-
-  const datasetMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        label: string;
-        description?: string;
-        size?: string;
-        totalExamples?: number;
-        sizeCategory?: string;
-        downloads?: number;
-      }
-    >();
-    for (const d of curatedDatasets) {
-      map.set(d.id, {
-        label: d.name,
-        description: d.description,
-        size: d.size,
-      });
-    }
-    for (const r of hfResults) {
-      if (!map.has(r.id)) {
-        map.set(r.id, {
-          label: r.id,
-          downloads: r.downloads,
-          totalExamples: r.totalExamples,
-          sizeCategory: r.sizeCategory,
-        });
-      }
-    }
-    return map;
-  }, [curatedDatasets, hfResults]);
-
-  const displayIds = useMemo(() => {
-    if (!debouncedQuery.trim()) {
-      return curatedDatasets.map((d) => d.id);
-    }
-    const q = debouncedQuery.toLowerCase();
-    const curatedIds = curatedDatasets
-      .filter(
-        (d) =>
-          d.name.toLowerCase().includes(q) || d.id.toLowerCase().includes(q),
-      )
-      .map((d) => d.id);
-    const liveIds = hfResults
-      .map((r) => r.id)
-      .filter((id) => !curatedIds.includes(id));
-    return [...curatedIds, ...liveIds];
-  }, [debouncedQuery, curatedDatasets, hfResults]);
-
-  const allIds = useMemo(
-    () => [
-      ...new Set([
-        ...curatedDatasets.map((d) => d.id),
-        ...hfResults.map((r) => r.id),
-      ]),
-    ],
-    [curatedDatasets, hfResults],
-  );
+  const resultIds = useMemo(() => hfResults.map((r) => r.id), [hfResults]);
 
   const comboboxAnchorRef = useRef<HTMLDivElement>(null);
-  const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore);
+  const { scrollRef, sentinelRef } = useInfiniteScroll(
+    fetchMore,
+    hfResults.length,
+  );
 
   return (
     <SectionCard
@@ -184,13 +114,13 @@ export function DatasetSection() {
           </span>
           <div ref={comboboxAnchorRef}>
             <Combobox
-              items={allIds}
-              filteredItems={displayIds}
+              items={resultIds}
+              filteredItems={resultIds}
               filter={null}
               value={dataset}
-              onValueChange={(id) => setDataset(id)}
-              onInputValueChange={(val) => setInputValue(val)}
-              itemToStringValue={(id) => datasetMap.get(id)?.label ?? id}
+              onValueChange={(id) => { selectingRef.current = true; setDataset(id); }}
+              onInputValueChange={(val) => { if (selectingRef.current) { selectingRef.current = false; return; } setInputValue(val); }}
+              itemToStringValue={(id) => id}
               autoHighlight={true}
             >
               <ComboboxInput
@@ -204,7 +134,7 @@ export function DatasetSection() {
               <ComboboxContent anchor={comboboxAnchorRef}>
                 {isLoading ? (
                   <div className="flex items-center justify-center py-4 gap-2 text-xs text-muted-foreground">
-                    <Spinner className="size-4" /> Searching…
+                    <Spinner className="size-4" /> Searching...
                   </div>
                 ) : (
                   <ComboboxEmpty>No datasets found</ComboboxEmpty>
@@ -215,13 +145,10 @@ export function DatasetSection() {
                 >
                   <ComboboxList className="p-1 !max-h-none !overflow-visible">
                     {(id: string) => {
-                      const meta = datasetMap.get(id);
-                      const label = meta?.label ?? id;
-                      const rowLabel =
-                        meta?.size ??
-                        (meta?.totalExamples
-                          ? `${formatCompact(meta.totalExamples)} rows`
-                          : null);
+                      const r = hfResults.find((r) => r.id === id);
+                      const detail = r?.totalExamples
+                        ? `${formatCompact(r.totalExamples)} rows`
+                        : (r?.sizeCategory ?? null);
                       return (
                         <ComboboxItem
                           key={id}
@@ -231,34 +158,30 @@ export function DatasetSection() {
                           <Tooltip>
                             <TooltipTrigger asChild={true}>
                               <span className="min-w-0 flex-1 truncate">
-                                {label}
+                                {id}
                               </span>
                             </TooltipTrigger>
                             <TooltipContent
                               side="left"
                               className="max-w-xs break-all"
                             >
-                              {label}
+                              {id}
                             </TooltipContent>
                           </Tooltip>
-                          {rowLabel ? (
-                            <span className="text-xs text-muted-foreground shrink-0">
-                              {rowLabel}
-                            </span>
-                          ) : meta?.sizeCategory ? (
+                          {detail ? (
                             <span className="text-[10px] text-muted-foreground shrink-0">
-                              {meta.sizeCategory}
+                              {detail}
                             </span>
-                          ) : meta?.downloads != null ? (
+                          ) : r?.downloads != null ? (
                             <span className="text-[10px] text-muted-foreground shrink-0">
-                              ↓{formatCompact(meta.downloads)}
+                              ↓{formatCompact(r.downloads)}
                             </span>
                           ) : null}
                         </ComboboxItem>
                       );
                     }}
                   </ComboboxList>
-                  {hasMore && <div ref={sentinelRef} className="h-px" />}
+                  <div ref={sentinelRef} className="h-px" />
                   {isLoadingMore && (
                     <div className="flex items-center justify-center py-2">
                       <Spinner className="size-3.5 text-muted-foreground" />
@@ -346,41 +269,6 @@ export function DatasetSection() {
           </div>
         )}
 
-        {/* Recommended */}
-        <Collapsible open={recOpen} onOpenChange={setRecOpen}>
-          <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
-            <HugeiconsIcon
-              icon={ArrowDown01Icon}
-              className={`size-3.5 transition-transform ${recOpen ? "rotate-180" : ""}`}
-            />
-            Common Datasets
-          </CollapsibleTrigger>
-          <CollapsibleContent className="mt-3 flex flex-col gap-1.5">
-            {DATASETS.filter((d) => d.recommended).map((d) => (
-              <button
-                type="button"
-                key={d.id}
-                onClick={() => setDataset(d.id)}
-                className="flex w-full corner-squircle cursor-pointer items-center gap-2.5 rounded-2xl border bg-muted/30 px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/60"
-              >
-                <HugeiconsIcon
-                  icon={Database02Icon}
-                  className="size-4 shrink-0 text-muted-foreground"
-                />
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs font-medium">{d.name}</p>
-                  <p className="text-[10px] text-muted-foreground">
-                    {d.description}
-                  </p>
-                </div>
-                <span className="text-[10px] font-mono text-muted-foreground mt-0.5">
-                  {d.size}
-                </span>
-              </button>
-            ))}
-          </CollapsibleContent>
-        </Collapsible>
-
         {/* Action buttons */}
         <div className="grid grid-cols-2 gap-2">
           <Button
diff --git a/studio/frontend/src/features/studio/sections/model-section.tsx b/studio/frontend/src/features/studio/sections/model-section.tsx
index e6f8849ff0..24eb4ca264 100644
--- a/studio/frontend/src/features/studio/sections/model-section.tsx
+++ b/studio/frontend/src/features/studio/sections/model-section.tsx
@@ -25,7 +25,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { MODELS, MODEL_TYPE_TO_HF_TASK } from "@/config/training";
+import { MODEL_TYPE_TO_HF_TASK } from "@/config/training";
 import {
   useDebouncedValue,
   useHfModelSearch,
@@ -78,89 +78,26 @@ export function ModelSection() {
   );
 
   const [inputValue, setInputValue] = useState("");
+  const selectingRef = useRef(false);
   const debouncedQuery = useDebouncedValue(inputValue);
   const task = modelType ? MODEL_TYPE_TO_HF_TASK[modelType] : undefined;
   const {
     results: hfResults,
     isLoading,
     isLoadingMore,
-    hasMore,
     fetchMore,
   } = useHfModelSearch(debouncedQuery, {
     task,
     accessToken: hfToken || undefined,
   });
 
-  const curatedModels = useMemo(() => {
-    if (!modelType) {
-      return MODELS;
-    }
-    return MODELS.filter((m) => m.type === modelType).sort(
-      (a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0),
-    );
-  }, [modelType]);
-
-  const modelMap = useMemo(() => {
-    const map = new Map<
-      string,
-      {
-        label: string;
-        params?: string;
-        totalParams?: number;
-        downloads?: number;
-        recommended?: boolean;
-      }
-    >();
-    for (const m of curatedModels) {
-      map.set(m.hfRepo ?? m.id, {
-        label: m.name,
-        params: m.params,
-        recommended: m.recommended,
-      });
-    }
-    for (const r of hfResults) {
-      if (!map.has(r.id)) {
-        map.set(r.id, {
-          label: r.id,
-          downloads: r.downloads,
-          totalParams: r.totalParams,
-        });
-      }
-    }
-    return map;
-  }, [curatedModels, hfResults]);
-
-  const displayIds = useMemo(() => {
-    if (!debouncedQuery.trim()) {
-      return curatedModels.map((m) => m.hfRepo ?? m.id);
-    }
-    const q = debouncedQuery.toLowerCase();
-    const curatedIds = curatedModels
-      .filter(
-        (m) =>
-          m.name.toLowerCase().includes(q) ||
-          m.id.toLowerCase().includes(q) ||
-          m.hfRepo?.toLowerCase().includes(q),
-      )
-      .map((m) => m.hfRepo ?? m.id);
-    const liveIds = hfResults
-      .map((r) => r.id)
-      .filter((id) => !curatedIds.includes(id));
-    return [...curatedIds, ...liveIds];
-  }, [debouncedQuery, curatedModels, hfResults]);
-
-  const allIds = useMemo(
-    () => [
-      ...new Set([
-        ...curatedModels.map((m) => m.hfRepo ?? m.id),
-        ...hfResults.map((r) => r.id),
-      ]),
-    ],
-    [curatedModels, hfResults],
-  );
+  const resultIds = useMemo(() => hfResults.map((r) => r.id), [hfResults]);
 
   const comboboxAnchorRef = useRef<HTMLDivElement>(null);
-  const { scrollRef, sentinelRef } = useInfiniteScroll(fetchMore);
+  const { scrollRef, sentinelRef } = useInfiniteScroll(
+    fetchMore,
+    hfResults.length,
+  );
 
   return (
     <SectionCard
@@ -200,14 +137,7 @@ export function ModelSection() {
             </InputGroupAddon>
             <InputGroupInput
               placeholder="./models/my-model"
-              value={
-                selectedModel
-                  ? (MODELS.find(
-                      (m) =>
-                        m.id === selectedModel || m.hfRepo === selectedModel,
-                    )?.hfRepo ?? selectedModel)
-                  : ""
-              }
+              value={selectedModel ?? ""}
               onChange={(e) => setSelectedModel(e.target.value || null)}
             />
           </InputGroup>
@@ -244,13 +174,13 @@ export function ModelSection() {
           </span>
           <div ref={comboboxAnchorRef}>
             <Combobox
-              items={allIds}
-              filteredItems={displayIds}
+              items={resultIds}
+              filteredItems={resultIds}
               filter={null}
               value={selectedModel}
-              onValueChange={(id) => setSelectedModel(id)}
-              onInputValueChange={(val) => setInputValue(val)}
-              itemToStringValue={(id) => modelMap.get(id)?.label ?? id}
+              onValueChange={(id) => { selectingRef.current = true; setSelectedModel(id); }}
+              onInputValueChange={(val) => { if (selectingRef.current) { selectingRef.current = false; return; } setInputValue(val); }}
+              itemToStringValue={(id) => id}
               autoHighlight={true}
             >
               <ComboboxInput placeholder="Search models..." className="w-full">
@@ -272,13 +202,10 @@ export function ModelSection() {
                 >
                   <ComboboxList className="p-1 !max-h-none !overflow-visible">
                     {(id: string) => {
-                      const meta = modelMap.get(id);
-                      const label = meta?.label ?? id;
-                      const sizeLabel =
-                        meta?.params ??
-                        (meta?.totalParams
-                          ? formatCompact(meta.totalParams)
-                          : null);
+                      const r = hfResults.find((r) => r.id === id);
+                      const sizeLabel = r?.totalParams
+                        ? formatCompact(r.totalParams)
+                        : null;
                       return (
                         <ComboboxItem
                           key={id}
@@ -288,30 +215,30 @@ export function ModelSection() {
                           <Tooltip>
                             <TooltipTrigger asChild={true}>
                               <span className="min-w-0 flex-1 truncate">
-                                {label}
+                                {id}
                               </span>
                             </TooltipTrigger>
                             <TooltipContent
                               side="left"
                               className="max-w-xs break-all"
                             >
-                              {label}
+                              {id}
                             </TooltipContent>
                           </Tooltip>
                           {sizeLabel ? (
                             <span className="text-xs text-muted-foreground shrink-0">
                               {sizeLabel}
                             </span>
-                          ) : meta?.downloads != null ? (
+                          ) : r?.downloads != null ? (
                             <span className="text-[10px] text-muted-foreground shrink-0">
-                              ↓{formatCompact(meta.downloads)}
+                              ↓{formatCompact(r.downloads)}
                             </span>
                           ) : null}
                         </ComboboxItem>
                       );
                     }}
                   </ComboboxList>
-                  {hasMore && <div ref={sentinelRef} className="h-px" />}
+                  <div ref={sentinelRef} className="h-px" />
                   {isLoadingMore && (
                     <div className="flex items-center justify-center py-2">
                       <Spinner className="size-3.5 text-muted-foreground" />
diff --git a/studio/frontend/src/hooks/use-hf-dataset-search.ts b/studio/frontend/src/hooks/use-hf-dataset-search.ts
index d10b7d11e9..ee7bfc989c 100644
--- a/studio/frontend/src/hooks/use-hf-dataset-search.ts
+++ b/studio/frontend/src/hooks/use-hf-dataset-search.ts
@@ -76,12 +76,12 @@ export function useHfDatasetSearch(
   const createIter = useCallback(
     () =>
       listDatasets({
-        search: { query },
+        search: query.trim() ? { query } : {},
         additionalFields: ["cardData"],
         ...(accessToken ? { credentials: { accessToken } } : {}),
       }) as AsyncGenerator<unknown>,
     [query, accessToken],
   );
 
-  return useHfPaginatedSearch(query, createIter, mapDataset);
+  return useHfPaginatedSearch(createIter, mapDataset);
 }
diff --git a/studio/frontend/src/hooks/use-hf-model-search.ts b/studio/frontend/src/hooks/use-hf-model-search.ts
index 7b1ef0ee14..b972fc56ee 100644
--- a/studio/frontend/src/hooks/use-hf-model-search.ts
+++ b/studio/frontend/src/hooks/use-hf-model-search.ts
@@ -10,13 +10,30 @@ export interface HfModelResult {
   totalParams?: number;
 }
 
-function mapModel(raw: unknown): HfModelResult {
+const EXCLUDED_TAGS = new Set([
+  "gguf",
+  "gptq",
+  "awq",
+  "exl2",
+  "mlx",
+  "onnx",
+  "openvino",
+  "coreml",
+  "tflite",
+  "ctranslate2",
+]);
+
+function mapModel(raw: unknown): HfModelResult | null {
   const m = raw as {
     name: string;
     downloads: number;
     likes: number;
     safetensors?: { total: number };
+    tags?: string[];
   };
+  if (m.tags?.some((t) => EXCLUDED_TAGS.has(t))) {
+    return null;
+  }
   return {
     id: m.name,
     downloads: m.downloads,
@@ -34,12 +51,16 @@ export function useHfModelSearch(
   const createIter = useCallback(
     () =>
       listModels({
-        search: { query, ...(task ? { task } : {}) },
-        additionalFields: ["safetensors"],
+        search: {
+          ...(query.trim() ? { query } : {}),
+          tags: ["transformers"],
+          ...(task ? { task } : {}),
+        },
+        additionalFields: ["safetensors", "tags"],
         ...(accessToken ? { credentials: { accessToken } } : {}),
       }) as AsyncGenerator<unknown>,
     [query, task, accessToken],
   );
 
-  return useHfPaginatedSearch(query, createIter, mapModel);
+  return useHfPaginatedSearch(createIter, mapModel);
 }
diff --git a/studio/frontend/src/hooks/use-hf-paginated-search.ts b/studio/frontend/src/hooks/use-hf-paginated-search.ts
index bc76b96613..cfed37b38f 100644
--- a/studio/frontend/src/hooks/use-hf-paginated-search.ts
+++ b/studio/frontend/src/hooks/use-hf-paginated-search.ts
@@ -19,24 +19,26 @@ const BATCH = 20;
 
 async function pullBatch<T>(
   iter: AsyncGenerator<unknown>,
-  mapItem: (raw: unknown) => T,
+  mapItem: (raw: unknown) => T | null,
   size: number,
 ) {
   const items: T[] = [];
-  for (let i = 0; i < size; i++) {
+  while (items.length < size) {
     const result = await iter.next();
     if (result.done) {
       return { items, done: true };
     }
-    items.push(mapItem(result.value));
+    const mapped = mapItem(result.value);
+    if (mapped !== null) {
+      items.push(mapped);
+    }
   }
   return { items, done: false };
 }
 
 export function useHfPaginatedSearch<T>(
-  query: string,
   createIter: () => AsyncGenerator<unknown>,
-  mapItem: (raw: unknown) => T,
+  mapItem: (raw: unknown) => T | null,
 ): HfPaginatedState<T> & { fetchMore: () => void } {
   const [state, setState] = useState<HfPaginatedState<T>>(
     INITIAL as HfPaginatedState<T>,
@@ -51,11 +53,6 @@ export function useHfPaginatedSearch<T>(
     const v = ++versionRef.current;
     iterRef.current = null;
 
-    if (!query.trim()) {
-      setState(INITIAL as HfPaginatedState<T>);
-      return;
-    }
-
     setState((prev) => ({
       ...prev,
       results: [],
@@ -92,7 +89,7 @@ export function useHfPaginatedSearch<T>(
           error: err instanceof Error ? err.message : "Search failed",
         });
       });
-  }, [query, createIter, mapItem]);
+  }, [createIter, mapItem]);
 
   const fetchMore = useCallback(() => {
     const iter = iterRef.current;
diff --git a/studio/frontend/src/hooks/use-infinite-scroll.ts b/studio/frontend/src/hooks/use-infinite-scroll.ts
index 14c80f4810..31ef9db402 100644
--- a/studio/frontend/src/hooks/use-infinite-scroll.ts
+++ b/studio/frontend/src/hooks/use-infinite-scroll.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-export function useInfiniteScroll(fetchMore: () => void) {
+export function useInfiniteScroll(fetchMore: () => void, itemCount: number) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const sentinelRef = useRef<HTMLDivElement>(null);
 
@@ -19,7 +19,7 @@ export function useInfiniteScroll(fetchMore: () => void) {
     );
     obs.observe(el);
     return () => obs.disconnect();
-  }, [fetchMore]);
+  }, [fetchMore, itemCount]);
 
   return { scrollRef, sentinelRef };
 }