From 45c01c09bc56767a4a77fe055ec9fff105586125 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Mon, 22 Jun 2026 22:11:45 -0700
Subject: [PATCH] Studio: model picker search placeholder, Search Hub tooltip,
 list polish (#6592)

Polish for the in-chat model picker popover and its guided-tour step.

- Search box placeholder reads Search Unsloth models, matching the Unsloth-only listing.
- Search Hub button shows a Search all models tooltip on hover.
- Floating Eject pill moves 1px lower so it sits closer to the bottom edge.
- Results list max height trimmed by 1px (21rem to 335px) from the bottom only.
- Chat guided tour Two tabs step updated to describe Unsloth-scoped search plus Search Hub for all of Hugging Face.
---
 .../assistant-ui/model-selector/pickers.tsx   | 29 +++++++++++--------
 .../frontend/src/features/chat/tour/steps.tsx |  7 +++--
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
index 46b6fe2e63..90c1c04106 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
@@ -2336,7 +2336,7 @@ export function HubModelPicker({
           <Input
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="Search models"
+            placeholder="Search Unsloth models"
             data-model-picker-search-input={true}
             className="field-soft h-9 border-0 pl-8 pr-8"
           />
@@ -2345,15 +2345,20 @@ export function HubModelPicker({
           )}
         </div>
         {onBrowseHub ? (
-          <button
-            type="button"
-            onClick={onBrowseHub}
-            aria-label="Search more models on the Hub"
-            className="hub-tab-toggle-pill flex h-9 w-[110px] shrink-0 items-center justify-center gap-[5px] rounded-full border-0 text-xs text-foreground transition-colors"
-          >
-            <HugeiconsIcon icon={DashboardCircleIcon} className="size-4" />
-            Search Hub
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={onBrowseHub}
+                aria-label="Search more models on the Hub"
+                className="hub-tab-toggle-pill flex h-9 w-[110px] shrink-0 items-center justify-center gap-[5px] rounded-full border-0 text-xs text-foreground transition-colors"
+              >
+                <HugeiconsIcon icon={DashboardCircleIcon} className="size-4" />
+                Search Hub
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Search all models</TooltipContent>
+          </Tooltip>
         ) : null}
       </div>
 
@@ -2386,7 +2391,7 @@ export function HubModelPicker({
           // Height tracks the content up to the cap, so short lists do not
           // leave white space. scroll-py + symmetric px keep the focus ring off
           // the overflow clip edges during keyboard nav.
-          "model-list-scroll max-h-[21rem] overflow-y-auto scroll-py-1.5 px-0.5 mr-1",
+          "model-list-scroll max-h-[335px] overflow-y-auto scroll-py-1.5 px-0.5 mr-1",
           listScrolled && "is-scrolled",
           listMoreBelow && "is-bottom-faded",
         )}
@@ -3362,7 +3367,7 @@ export function HubModelPicker({
       {/* Floating eject pill: overlaid on the list bottom, outside the scroll
           so the edge fade never touches it. Only the pill catches clicks. */}
       {onEject ? (
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-end pr-3.5 pb-5">
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-end pr-3.5 pb-[19px]">
           <button
             type="button"
             onClick={onEject}
diff --git a/studio/frontend/src/features/chat/tour/steps.tsx b/studio/frontend/src/features/chat/tour/steps.tsx
index cbbb7bae4f..7e304ed590 100644
--- a/studio/frontend/src/features/chat/tour/steps.tsx
+++ b/studio/frontend/src/features/chat/tour/steps.tsx
@@ -38,9 +38,10 @@ export function buildChatTourSteps({
       title: "Two tabs",
       body: (
         <>
-          Hub: search Hugging Face models. Fine-tuned: local Unsloth outputs you’ve
-          trained or exported. If results look off, compare base vs fine-tuned
-          outputs to see what changed.
+          Hub: search Unsloth’s models here, or hit Search Hub to browse all of
+          Hugging Face. Fine-tuned: local Unsloth outputs you’ve trained or
+          exported. If results look off, compare base vs fine-tuned outputs to
+          see what changed.
         </>
       ),
       onEnter: openModelSelector,