feat: mprove model selector with search and keyboard navigation

Add Ctrl+M keyboard shortcut to open model selector
Use desktop dropdowns in VSCode runtime instead of mobile panels

packages/desktop/src-tauri/Cargo.lock

@@ -2847,7 +2847,7 @@ dependencies = [
 
 [[package]]
 name = "openchamber-desktop"
-version = "1.3.9"
+version = "1.4.0"
 dependencies = [
  "anyhow",
  "axum",

packages/ui/src/components/chat/ChatInput.tsx

@@ -1064,11 +1064,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                 <ServerFilePicker
                     onFilesSelected={handleServerFilesSelected}
                     multiSelect
-                    presentation={isMobile || isVSCode ? 'modal' : 'dropdown'}
+                    presentation={isMobile ? 'modal' : 'dropdown'}
                     open={projectFilePickerOpen}
                     onOpenChange={setProjectFilePickerOpen}
                 >
-                    {isMobile || isVSCode ? null : (
+                    {isMobile ? null : (
                         <button
                             type="button"
                             tabIndex={-1}

packages/ui/src/components/chat/ModelControls.tsx

@@ -5,6 +5,7 @@ import {
     RiArrowDownSLine,
     RiArrowRightSLine,
     RiBrainAi3Line,
+    RiCheckLine,
     RiCheckboxCircleLine,
     RiCloseCircleLine,
     RiFileImageLine,
@@ -26,10 +27,8 @@ import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
+    DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
@@ -237,13 +236,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
     } = useSessionStore();
 
     const contextHydrated = useContextStore((state) => state.hasHydrated);
-    const { toggleFavoriteModel, isFavoriteModel, addRecentModel } = useUIStore();
+    const { toggleFavoriteModel, isFavoriteModel, addRecentModel, isModelSelectorOpen, setModelSelectorOpen } = useUIStore();
     const { favoriteModelsList, recentModelsList } = useModelLists();
 
     const { isMobile } = useDeviceInfo();
     const isDesktopRuntime = useIsDesktopRuntime();
     const isVSCodeRuntime = useIsVSCodeRuntime();
-    const isCompact = isMobile || isVSCodeRuntime;
+    // Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
+    const isCompact = isMobile;
     const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | null>(null);
     const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState<'model' | 'agent' | null>(null);
     const [mobileModelQuery, setMobileModelQuery] = React.useState('');
@@ -258,9 +258,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         return initial;
     });
     const [mobileEditOptionsOpen, setMobileEditOptionsOpen] = React.useState(false);
-    const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
+    // Use global state for model selector (allows Ctrl+M shortcut)
+    const agentMenuOpen = isModelSelectorOpen;
+    const setAgentMenuOpen = setModelSelectorOpen;
     const [desktopEditOptionsOpen, setDesktopEditOptionsOpen] = React.useState(false);
     const desktopEditOptionsId = React.useId();
+    const [desktopModelQuery, setDesktopModelQuery] = React.useState('');
+    const [modelSelectedIndex, setModelSelectedIndex] = React.useState(0);
+    const modelItemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
     React.useEffect(() => {
         if (activeMobilePanel === 'model') {
@@ -283,11 +288,30 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         }
     }, [activeMobilePanel]);
 
+    const prevAgentMenuOpenRef = React.useRef(agentMenuOpen);
     React.useEffect(() => {
+        const wasOpen = prevAgentMenuOpenRef.current;
+        prevAgentMenuOpenRef.current = agentMenuOpen;
+
         if (!agentMenuOpen) {
             setDesktopEditOptionsOpen(false);
+            setDesktopModelQuery('');
+            setModelSelectedIndex(0);
+
+            // Restore focus to chat input when model selector closes
+            if (wasOpen && !isCompact) {
+                requestAnimationFrame(() => {
+                    const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
+                    textarea?.focus();
+                });
+            }
         }
-    }, [agentMenuOpen]);
+    }, [agentMenuOpen, isCompact]);
+
+    // Reset selected index when search query changes
+    React.useEffect(() => {
+        setModelSelectedIndex(0);
+    }, [desktopModelQuery]);
 
     const currentAgent = getCurrentAgent?.();
     const agentPermissionRaw = currentAgent?.permission?.edit;
@@ -785,6 +809,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
             if (isCompact) {
                 closeMobilePanel();
             }
+            // Restore focus to chat input after model selection
+            requestAnimationFrame(() => {
+                const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
+                textarea?.focus();
+            });
         } catch (error) {
             console.error('[ModelControls] Handle model change error:', error);
         }
@@ -1171,7 +1200,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                 {favoriteModelsList.map(({ model, providerID, modelID }) => {
                                     const isSelected = providerID === currentProviderId && modelID === currentModelId;
                                     const metadata = getModelMetadata(providerID, modelID);
-                                    
+
                                     return (
                                         <button
                                             key={`fav-mobile-${providerID}-${modelID}`}
@@ -1217,7 +1246,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                 {recentModelsList.map(({ model, providerID, modelID }) => {
                                     const isSelected = providerID === currentProviderId && modelID === currentModelId;
                                     const metadata = getModelMetadata(providerID, modelID);
-                                    
+
                                     return (
                                         <button
                                             key={`recent-mobile-${providerID}-${modelID}`}
@@ -1600,8 +1629,194 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         </TooltipContent>
     );
 
-    const renderModelSelector = () => (
+    // Helper to render a single model row in the flat dropdown
-        <Tooltip delayDuration={1000}>
+    const renderModelRow = (
+        model: ProviderModel,
+        providerID: string,
+        modelID: string,
+        keyPrefix: string,
+        flatIndex: number,
+        isHighlighted: boolean
+    ) => {
+        const metadata = getModelMetadata(providerID, modelID);
+        const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
+            ...icon,
+            id: `cap-${icon.key}`,
+        }));
+        const modalityIcons = [
+            ...getModalityIcons(metadata, 'input'),
+            ...getModalityIcons(metadata, 'output'),
+        ];
+        const uniqueModalityIcons = Array.from(
+            new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
+        ).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
+        const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
+        const contextTokens = formatTokens(metadata?.limit?.context);
+        const isSelected = currentProviderId === providerID && currentModelId === modelID;
+        const isFavorite = isFavoriteModel(providerID, modelID);
+
+        return (
+            <div
+                key={`${keyPrefix}-${providerID}-${modelID}`}
+                ref={(el) => { modelItemRefs.current[flatIndex] = el; }}
+                className={cn(
+                    "typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
+                    isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+                )}
+                onClick={() => handleProviderAndModelChange(providerID, modelID)}
+                onMouseEnter={() => setModelSelectedIndex(flatIndex)}
+            >
+                <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                    <span className="font-medium truncate">
+                        {getModelDisplayName(model)}
+                    </span>
+                    {metadata?.limit?.context ? (
+                        <span className="typography-micro text-muted-foreground flex-shrink-0">
+                            {contextTokens}
+                        </span>
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0">
+                    {indicatorIcons.length > 0 && (
+                        <div className={cn("items-center gap-0.5", isHighlighted ? "flex" : "hidden group-hover:flex")}>
+                            {indicatorIcons.map(({ id, icon: Icon, label }) => (
+                                <span
+                                    key={id}
+                                    className="flex h-3.5 w-3.5 items-center justify-center text-muted-foreground"
+                                    aria-label={label}
+                                    role="img"
+                                    title={label}
+                                >
+                                    <Icon className="h-2.5 w-2.5" />
+                                </span>
+                            ))}
+                        </div>
+                    )}
+                    {isSelected && (
+                        <RiCheckLine className="h-4 w-4 text-primary" />
+                    )}
+                    <button
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleFavoriteModel(providerID, modelID);
+                        }}
+                        className={cn(
+                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
+                            isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                        )}
+                        aria-label={isFavorite ? "Unfavorite" : "Favorite"}
+                        title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+                    >
+                        {isFavorite ? (
+                            <RiStarFill className="h-3.5 w-3.5" />
+                        ) : (
+                            <RiStarLine className="h-3.5 w-3.5" />
+                        )}
+                    </button>
+                </div>
+            </div>
+        );
+    };
+
+    // Filter models based on search query
+    const filterByQuery = (modelName: string, providerName: string, query: string) => {
+        if (!query.trim()) return true;
+        const lowerQuery = query.toLowerCase();
+        return (
+            modelName.toLowerCase().includes(lowerQuery) ||
+            providerName.toLowerCase().includes(lowerQuery)
+        );
+    };
+
+    const renderModelSelector = () => {
+        // Filter favorites
+        const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
+            const provider = providers.find(p => p.id === providerID);
+            const providerName = provider?.name || providerID;
+            const modelName = getModelDisplayName(model);
+            return filterByQuery(modelName, providerName, desktopModelQuery);
+        });
+
+        // Filter recents
+        const filteredRecents = recentModelsList.filter(({ model, providerID }) => {
+            const provider = providers.find(p => p.id === providerID);
+            const providerName = provider?.name || providerID;
+            const modelName = getModelDisplayName(model);
+            return filterByQuery(modelName, providerName, desktopModelQuery);
+        });
+
+        // Filter providers and their models
+        const filteredProviders = providers
+            .map((provider) => {
+                const providerModels = Array.isArray(provider.models) ? provider.models : [];
+                const filteredModels = providerModels.filter((model: ProviderModel) => {
+                    const modelName = getModelDisplayName(model);
+                    return filterByQuery(modelName, provider.name || provider.id || '', desktopModelQuery);
+                });
+                return { ...provider, models: filteredModels };
+            })
+            .filter((provider) => provider.models.length > 0);
+
+        const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
+
+        // Build flat list for keyboard navigation
+        type FlatModelItem = { model: ProviderModel; providerID: string; modelID: string; section: string };
+        const flatModelList: FlatModelItem[] = [];
+
+        filteredFavorites.forEach(({ model, providerID, modelID }) => {
+            flatModelList.push({ model, providerID, modelID, section: 'fav' });
+        });
+        filteredRecents.forEach(({ model, providerID, modelID }) => {
+            flatModelList.push({ model, providerID, modelID, section: 'recent' });
+        });
+        filteredProviders.forEach((provider) => {
+            (provider.models as ProviderModel[]).forEach((model) => {
+                flatModelList.push({ model, providerID: provider.id as string, modelID: model.id as string, section: 'provider' });
+            });
+        });
+
+        const totalItems = flatModelList.length;
+
+        // Handle keyboard navigation
+        const handleModelKeyDown = (e: React.KeyboardEvent) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                e.stopPropagation();
+                setModelSelectedIndex((prev) => (prev + 1) % Math.max(1, totalItems));
+                // Scroll into view
+                setTimeout(() => {
+                    const nextIndex = (modelSelectedIndex + 1) % Math.max(1, totalItems);
+                    modelItemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }, 0);
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                setModelSelectedIndex((prev) => (prev - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems));
+                // Scroll into view
+                setTimeout(() => {
+                    const prevIndex = (modelSelectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
+                    modelItemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }, 0);
+            } else if (e.key === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+                const selectedItem = flatModelList[modelSelectedIndex];
+                if (selectedItem) {
+                    handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
+                }
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                setAgentMenuOpen(false);
+            }
+        };
+
+        // Build index mapping for rendering
+        let currentFlatIndex = 0;
+
+        return (
+            <Tooltip delayDuration={1000}>
                 {!isCompact ? (
                     <DropdownMenu open={agentMenuOpen} onOpenChange={setAgentMenuOpen}>
                         <TooltipTrigger asChild>
@@ -1637,307 +1852,90 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                 </div>
                             </DropdownMenuTrigger>
                         </TooltipTrigger>
-                        <DropdownMenuContent className="max-w-[300px]">
+                        <DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start" alignOffset={-200}>
-                            {/* Favorites Section */}
+                            {/* Search Input */}
-                            {favoriteModelsList.length > 0 && (
+                            <div className="p-2 border-b border-border/40">
-                                <DropdownMenuSub>
+                                <div className="relative">
-                                    <DropdownMenuSubTrigger className="typography-meta">
+                                    <RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-                                        <RiStarFill className="h-3 w-3 flex-shrink-0 mr-2 text-primary" />
+                                    <Input
-                                        Favorites
+                                        type="text"
-                                    </DropdownMenuSubTrigger>
+                                        placeholder="Search models"
-                                    <DropdownMenuSubContent
+                                        value={desktopModelQuery}
-                                        className="max-h-[320px] min-w-[200px]"
+                                        onChange={(e) => setDesktopModelQuery(e.target.value)}
-                                        sideOffset={2}
+                                        onKeyDown={handleModelKeyDown}
-                                        collisionPadding={8}
+                                        className="pl-8 h-8 typography-meta"
-                                        avoidCollisions={true}
+                                        autoFocus
-                                    >
+                                    />
-                                        <ScrollableOverlay
+                                </div>
-                                            outerClassName="max-h-[320px] min-w-[200px]"
+                            </div>
-                                        >
-                                {favoriteModelsList.map(({ model, providerID, modelID }) => {
-                                                const metadata = getModelMetadata(providerID, modelID);
-                                                const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
-                                                    ...icon,
-                                                    id: `cap-${icon.key}`,
-                                                }));
-                                                const modalityIcons = [
-                                                    ...getModalityIcons(metadata, 'input'),
-                                                    ...getModalityIcons(metadata, 'output'),
-                                                ];
-                                                const uniqueModalityIcons = Array.from(
-                                                    new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
-                                                ).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
-                                                const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
-                                                const contextTokens = formatTokens(metadata?.limit?.context);
-                                                const outputTokens = formatTokens(metadata?.limit?.output);
 
-                                                return (
+                            {/* Scrollable content */}
-                                                    <DropdownMenuItem
+                            <ScrollableOverlay outerClassName="max-h-[400px] flex-1">
-                                                        key={`fav-${providerID}-${modelID}`}
+                                <div className="p-1">
-                                                        className="typography-meta"
+                                    {!hasResults && (
-                                                        onSelect={() => {
+                                        <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
-                                                            handleProviderAndModelChange(providerID, modelID);
+                                            No models found
-                                                        }}
+                                        </div>
-                                                    >
+                                    )}
-                                                        <div className="flex items-center gap-2 w-full">
+
-                                                            <div className="flex flex-col flex-1 min-w-0">
+                                    {/* Favorites Section */}
-                                                                <span className="font-medium truncate">
+                                    {filteredFavorites.length > 0 && (
-                                                                    {getModelDisplayName(model)}
+                                        <>
-                                                                </span>
+                                            <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
-                                                                {metadata?.limit?.context || metadata?.limit?.output ? (
+                                                <RiStarFill className="h-4 w-4 text-primary" />
-                                                                    <span className="typography-meta text-muted-foreground">
+                                                Favorites
-                                                                        {metadata?.limit?.context ? `${contextTokens} ctx` : ''}
+                                            </DropdownMenuLabel>
-                                                                        {metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
+                                            {filteredFavorites.map(({ model, providerID, modelID }) => {
-                                                                        {metadata?.limit?.output ? `${outputTokens} out` : ''}
+                                                const idx = currentFlatIndex++;
-                                                                    </span>
+                                                return renderModelRow(model, providerID, modelID, 'fav', idx, modelSelectedIndex === idx);
-                                                                ) : null}
-                                                            </div>
-                                                            <div className="flex items-center gap-1 flex-shrink-0">
-                                                                {indicatorIcons.map(({ id, icon: Icon, label }) => (
-                                                                    <span
-                                                                        key={id}
-                                                                        className="flex h-4 w-4 items-center justify-center text-muted-foreground"
-                                                                        aria-label={label}
-                                                                        role="img"
-                                                                        title={label}
-                                                                    >
-                                                                        <Icon className="h-3 w-3" />
-                                                                    </span>
-                                                                ))}
-                                                                <button
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        toggleFavoriteModel(providerID, modelID);
-                                                                    }}
-                                                                    className="model-favorite-button flex h-4 w-4 items-center justify-center text-yellow-500 hover:text-yellow-600"
-                                                                    aria-label="Unfavorite"
-                                                                    title="Remove from favorites"
-                                                                >
-                                                                    <RiStarFill className="h-3.5 w-3.5" />
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </DropdownMenuItem>
-                                                );
                                             })}
-                                        </ScrollableOverlay>
+                                        </>
-                                    </DropdownMenuSubContent>
+                                    )}
-                                </DropdownMenuSub>
-                            )}
-                            
-                            {/* Recents Section */}
-                            {recentModelsList.length > 0 && (
-                                <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger className="typography-meta">
-                                        <RiTimeLine className="h-3 w-3 flex-shrink-0 mr-2 text-muted-foreground" />
-                                        Recent
-                                    </DropdownMenuSubTrigger>
-                                    <DropdownMenuSubContent
-                                        className="max-h-[320px] min-w-[200px]"
-                                        sideOffset={2}
-                                        collisionPadding={8}
-                                        avoidCollisions={true}
-                                    >
-                                        <ScrollableOverlay
-                                            outerClassName="max-h-[320px] min-w-[200px]"
-                                        >
-                                {recentModelsList.map(({ model, providerID, modelID }) => {
-                                                const metadata = getModelMetadata(providerID, modelID);
-                                                const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
-                                                    ...icon,
-                                                    id: `cap-${icon.key}`,
-                                                }));
-                                                const modalityIcons = [
-                                                    ...getModalityIcons(metadata, 'input'),
-                                                    ...getModalityIcons(metadata, 'output'),
-                                                ];
-                                                const uniqueModalityIcons = Array.from(
-                                                    new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
-                                                ).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
-                                                const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
-                                                const contextTokens = formatTokens(metadata?.limit?.context);
-                                                const outputTokens = formatTokens(metadata?.limit?.output);
 
-                                                return (
+                                    {/* Recents Section */}
-                                                    <DropdownMenuItem
+                                    {filteredRecents.length > 0 && (
-                                                        key={`recent-${providerID}-${modelID}`}
+                                        <>
-                                                        className="typography-meta"
+                                            {filteredFavorites.length > 0 && <DropdownMenuSeparator />}
-                                                        onSelect={() => {
+                                            <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
-                                                            handleProviderAndModelChange(providerID, modelID);
+                                                <RiTimeLine className="h-4 w-4" />
-                                                        }}
+                                                Recent
-                                                    >
+                                            </DropdownMenuLabel>
-                                                        <div className="flex items-center gap-2 w-full">
+                                            {filteredRecents.map(({ model, providerID, modelID }) => {
-                                                            <div className="flex flex-col flex-1 min-w-0">
+                                                const idx = currentFlatIndex++;
-                                                                <span className="font-medium truncate">
+                                                return renderModelRow(model, providerID, modelID, 'recent', idx, modelSelectedIndex === idx);
-                                                                    {getModelDisplayName(model)}
-                                                                </span>
-                                                                {metadata?.limit?.context || metadata?.limit?.output ? (
-                                                                    <span className="typography-meta text-muted-foreground">
-                                                                        {metadata?.limit?.context ? `${contextTokens} ctx` : ''}
-                                                                        {metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
-                                                                        {metadata?.limit?.output ? `${outputTokens} out` : ''}
-                                                                    </span>
-                                                                ) : null}
-                                                            </div>
-                                                            <div className="flex items-center gap-1 flex-shrink-0">
-                                                                {indicatorIcons.map(({ id, icon: Icon, label }) => (
-                                                                    <span
-                                                                        key={id}
-                                                                        className="flex h-4 w-4 items-center justify-center text-muted-foreground"
-                                                                        aria-label={label}
-                                                                        role="img"
-                                                                        title={label}
-                                                                    >
-                                                                        <Icon className="h-3 w-3" />
-                                                                    </span>
-                                                                ))}
-                                                                <button
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        toggleFavoriteModel(providerID, modelID);
-                                                                    }}
-                                                                    className="model-favorite-button flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-yellow-600"
-                                                                    aria-label="Favorite"
-                                                                    title="Add to favorites"
-                                                                >
-                                                                    <RiStarLine className="h-3.5 w-3.5" />
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </DropdownMenuItem>
-                                                );
                                             })}
-                                        </ScrollableOverlay>
+                                        </>
-                                    </DropdownMenuSubContent>
+                                    )}
-                                </DropdownMenuSub>
-                            )}
-                            
-                            {/* Separator before providers */}
-                            {(favoriteModelsList.length > 0 || recentModelsList.length > 0) && (
-                                <DropdownMenuSeparator />
-                            )}
-                            
-                            {/* All Providers Section */}
-                            {providers.map((provider) => {
-                                const providerModels = Array.isArray(provider.models) ? provider.models : [];
 
-                                if (providerModels.length === 0) {
+                                    {/* Separator before providers */}
-                                    return (
+                                    {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
-                                        <DropdownMenuItem
+                                        <DropdownMenuSeparator />
-                                            key={provider.id}
+                                    )}
-                                            disabled
-                                            className="typography-meta text-muted-foreground"
-                                        >
-                                            <ProviderLogo
-                                                providerId={provider.id}
-                                                className="h-3 w-3 flex-shrink-0 mr-2"
-                                            />
-                                            {provider.name} (No models)
-                                        </DropdownMenuItem>
-                                    );
-                                }
 
-                                return (
+                                    {/* All Providers - Flat List */}
-                                    <DropdownMenuSub key={provider.id}>
+                                    {filteredProviders.map((provider, index) => (
-                                        <DropdownMenuSubTrigger className="typography-meta">
+                                        <React.Fragment key={provider.id}>
-                                            <ProviderLogo
+                                            {index > 0 && <DropdownMenuSeparator />}
-                                                providerId={provider.id}
+                                            <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
-                                                className="h-3 w-3 flex-shrink-0 mr-2"
+                                                <ProviderLogo
-                                            />
+                                                    providerId={provider.id}
-                                            {provider.name}
+                                                    className="h-4 w-4 flex-shrink-0"
-                                        </DropdownMenuSubTrigger>
+                                                />
-                                        <DropdownMenuSubContent
+                                                {provider.name}
-                                            className="max-h-[320px] min-w-[200px]"
+                                            </DropdownMenuLabel>
-                                            sideOffset={2}
+                                            {(provider.models as ProviderModel[]).map((model: ProviderModel) => {
-                                            collisionPadding={8}
+                                                const idx = currentFlatIndex++;
-                                            avoidCollisions={true}
+                                                return renderModelRow(model, provider.id as string, model.id as string, 'provider', idx, modelSelectedIndex === idx);
-                                        >
+                                            })}
-                                            <ScrollableOverlay
+                                        </React.Fragment>
-                                                outerClassName="max-h-[320px] min-w-[200px]"
+                                    ))}
-                                            >
+                                </div>
-                                                {providerModels.map((model: ProviderModel) => {
+                            </ScrollableOverlay>
-                                                const metadata = getModelMetadata(provider.id, model.id!);
-                                                const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
-                                                    ...icon,
-                                                    id: `cap-${icon.key}`,
-                                                }));
-                                                const modalityIcons = [
-                                                    ...getModalityIcons(metadata, 'input'),
-                                                    ...getModalityIcons(metadata, 'output'),
-                                                ];
-                                                const uniqueModalityIcons = Array.from(
-                                                    new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
-                                                ).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
-                                                const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
-                                                const contextTokens = formatTokens(metadata?.limit?.context);
-                                                const outputTokens = formatTokens(metadata?.limit?.output);
 
-                                                return (
+                            {/* Keyboard hints footer */}
-                                                    <DropdownMenuItem
+                            <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
-                                                        key={model.id}
+                                ↑↓ navigate • Enter select • Esc close
-                                                        className="typography-meta"
+                            </div>
-                                                        onSelect={() => {
-                                                            handleProviderAndModelChange(provider.id as string, model.id as string);
-                                                        }}
-                                                    >
-                                                        <div className="flex items-center gap-2 w-full">
-                                                            <div className="flex flex-col flex-1 min-w-0">
-                                                                <span className="font-medium truncate">
-                                                                    {getModelDisplayName(model)}
-                                                                </span>
-                                                                 {metadata?.limit?.context || metadata?.limit?.output ? (
-                                                                     <span className="typography-meta text-muted-foreground">
-                                                                         {metadata?.limit?.context ? `${contextTokens} ctx` : ''}
-                                                                         {metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
-                                                                         {metadata?.limit?.output ? `${outputTokens} out` : ''}
-                                                                     </span>
-                                                                 ) : null}
-                                                            </div>
-                                                            <div className="flex items-center gap-1 flex-shrink-0">
-                                                                {indicatorIcons.map(({ id, icon: Icon, label }) => (
-                                                                    <span
-                                                                        key={id}
-                                                                        className="flex h-4 w-4 items-center justify-center text-muted-foreground"
-                                                                        aria-label={label}
-                                                                        role="img"
-                                                                        title={label}
-                                                                    >
-                                                                        <Icon className="h-3 w-3" />
-                                                                    </span>
-                                                                ))}
-                                                                <button
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        toggleFavoriteModel(provider.id as string, model.id as string);
-                                                                    }}
-                                                                    className={cn(
-                                                                        "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
-                                                                        isFavoriteModel(provider.id as string, model.id as string)
-                                                                            ? "text-yellow-500"
-                                                                            : "text-muted-foreground"
-                                                                    )}
-                                                                    aria-label={isFavoriteModel(provider.id as string, model.id as string) ? "Unfavorite" : "Favorite"}
-                                                                    title={isFavoriteModel(provider.id as string, model.id as string) ? "Remove from favorites" : "Add to favorites"}
-                                                                >
-                                                                    {isFavoriteModel(provider.id as string, model.id as string) ? (
-                                                                        <RiStarFill className="h-3.5 w-3.5" />
-                                                                    ) : (
-                                                                        <RiStarLine className="h-3.5 w-3.5" />
-                                                                    )}
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </DropdownMenuItem>
-                                                    );
-                                                })}
-                                            </ScrollableOverlay>
-                                        </DropdownMenuSubContent>
-                                    </DropdownMenuSub>
-                                );
-                            })}
                         </DropdownMenuContent>
                     </DropdownMenu>
                 ) : (
@@ -1974,6 +1972,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                 {renderModelTooltipContent()}
             </Tooltip>
         );
+    };
 
     const renderAgentTooltipContent = () => {
         if (!currentAgent) {
@@ -2148,7 +2147,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                     </div>
                                 </DropdownMenuTrigger>
                             </TooltipTrigger>
-                            <DropdownMenuContent align="end">
+                            <DropdownMenuContent align="end" alignOffset={-40} className="w-[min(280px,calc(100vw-2rem))]">
                                 {agents.filter(agent => isPrimaryMode(agent.mode)).map((agent) => (
                                     <DropdownMenuItem
                                         key={agent.name}

packages/ui/src/components/chat/ServerFilePicker.tsx

@@ -17,8 +17,6 @@ import { useDeviceInfo } from '@/lib/device';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { useFileSearchStore } from '@/stores/useFileSearchStore';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
-import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
-
 interface FileInfo {
   name: string;
   path: string;
@@ -46,8 +44,8 @@ export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
   presentation = 'dropdown',
 }) => {
   const { isMobile } = useDeviceInfo();
-  const isVSCodeRuntime = useIsVSCodeRuntime();
+  // Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
-  const isCompact = isMobile || isVSCodeRuntime;
+  const isCompact = isMobile;
   const { currentDirectory } = useDirectoryStore();
   const searchFiles = useFileSearchStore((state) => state.searchFiles);
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);

packages/ui/src/components/multirun/MultiRunLauncher.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RiAddLine, RiCloseLine, RiPlayLine, RiSearchLine } from '@remixicon/react';
+import { RiAddLine, RiCheckLine, RiCloseLine, RiPlayLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -23,7 +23,9 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useMultiRunStore } from '@/stores/useMultiRunStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useUIStore } from '@/stores/useUIStore';
+import { useModelLists } from '@/hooks/useModelLists';
 import type { CreateMultiRunParams, MultiRunModelSelection } from '@/types/multirun';
+import type { ModelMetadata } from '@/types';
 
 interface MultiRunLauncherProps {
   /** Prefill prompt textarea (optional) */
@@ -67,6 +69,24 @@ const ModelChip: React.FC<{
   );
 };
 
+const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  compactDisplay: 'short',
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 0,
+});
+
+const formatTokens = (value?: number | null) => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return '';
+  }
+  if (value === 0) {
+    return '0';
+  }
+  const formatted = COMPACT_NUMBER_FORMATTER.format(value);
+  return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
+};
+
 /**
  * Model selector for multi-run (allows selecting multiple unique models).
  */
@@ -75,34 +95,79 @@ const ModelMultiSelect: React.FC<{
   onAdd: (model: MultiRunModelSelection) => void;
   onRemove: (index: number) => void;
 }> = ({ selectedModels, onAdd, onRemove }) => {
-  const providers = useConfigStore((state) => state.providers);
+  const { providers, modelsMetadata } = useConfigStore();
+  const { favoriteModelsList, recentModelsList } = useModelLists();
   const [isOpen, setIsOpen] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
 
   // Get set of already selected model keys
   const selectedKeys = React.useMemo(() => {
     return new Set(selectedModels.map((m) => `${m.providerID}:${m.modelID}`));
   }, [selectedModels]);
 
-  // Filter models based on search query
+  const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
-  const filteredProviders = React.useMemo(() => {
+    const key = `${provId}/${modId}`;
-    if (!searchQuery.trim()) return providers;
+    return modelsMetadata.get(key);
+  };
 
-    const query = searchQuery.toLowerCase();
+  const getModelDisplayName = (model: Record<string, unknown>) => {
+    const name = model?.name || model?.id || '';
+    const nameStr = String(name);
+    if (nameStr.length > 40) {
+      return nameStr.substring(0, 37) + '...';
+    }
+    return nameStr;
+  };
+
+  // Filter helper
+  const filterByQuery = React.useCallback((modelName: string, providerName: string) => {
+    if (!searchQuery.trim()) return true;
+    const lowerQuery = searchQuery.toLowerCase();
+    return (
+      modelName.toLowerCase().includes(lowerQuery) ||
+      providerName.toLowerCase().includes(lowerQuery)
+    );
+  }, [searchQuery]);
+
+  // Filter favorites
+  const filteredFavorites = React.useMemo(() => {
+    return favoriteModelsList.filter(({ model, providerID }) => {
+      const provider = providers.find(p => p.id === providerID);
+      const providerName = provider?.name || providerID;
+      const modelName = getModelDisplayName(model);
+      return filterByQuery(modelName, providerName);
+    });
+  }, [favoriteModelsList, providers, filterByQuery]);
+
+  // Filter recents
+  const filteredRecents = React.useMemo(() => {
+    return recentModelsList.filter(({ model, providerID }) => {
+      const provider = providers.find(p => p.id === providerID);
+      const providerName = provider?.name || providerID;
+      const modelName = getModelDisplayName(model);
+      return filterByQuery(modelName, providerName);
+    });
+  }, [recentModelsList, providers, filterByQuery]);
+
+  // Filter providers
+  const filteredProviders = React.useMemo(() => {
     return providers
       .map((provider) => {
         const models = Array.isArray(provider.models) ? provider.models : [];
         const filteredModels = models.filter((model) => {
-          const modelName = (model.name || model.id || '').toString().toLowerCase();
+          const modelName = getModelDisplayName(model);
-          const providerName = provider.name.toLowerCase();
+          return filterByQuery(modelName, provider.name || provider.id || '');
-          return modelName.includes(query) || providerName.includes(query);
         });
         return { ...provider, models: filteredModels };
       })
       .filter((provider) => provider.models.length > 0);
-  }, [providers, searchQuery]);
+  }, [providers, filterByQuery]);
+
+  const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
 
   // Focus search input when opened
   React.useEffect(() => {
@@ -119,6 +184,7 @@ const ModelMultiSelect: React.FC<{
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
         setSearchQuery('');
+        setSelectedIndex(0);
       }
     };
 
@@ -126,6 +192,66 @@ const ModelMultiSelect: React.FC<{
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [isOpen]);
 
+  // Reset selection when search query changes
+  React.useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery]);
+
+  // Render a model row
+  const renderModelRow = (
+    model: Record<string, unknown>,
+    providerID: string,
+    modelID: string,
+    keyPrefix: string,
+    flatIndex: number,
+    isHighlighted: boolean
+  ) => {
+    const key = `${providerID}:${modelID}`;
+    const isSelected = selectedKeys.has(key);
+    const metadata = getModelMetadata(providerID, modelID);
+    const contextTokens = formatTokens(metadata?.limit?.context);
+
+    return (
+      <button
+        key={`${keyPrefix}-${key}`}
+        ref={(el) => { itemRefs.current[flatIndex] = el; }}
+        type="button"
+        disabled={isSelected}
+        onClick={() => {
+          onAdd({
+            providerID,
+            modelID,
+            displayName: (model.name as string) || modelID,
+          });
+          // Don't close dropdown - allow selecting multiple
+        }}
+        onMouseEnter={() => setSelectedIndex(flatIndex)}
+        className={cn(
+          'w-full text-left px-2 py-1.5 rounded-md typography-meta transition-colors flex items-center gap-2',
+          isSelected
+            ? 'text-muted-foreground/50 cursor-not-allowed bg-accent/20'
+            : isHighlighted
+              ? 'bg-accent'
+              : 'hover:bg-accent/50'
+        )}
+      >
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+          <span className="font-medium truncate">
+            {getModelDisplayName(model)}
+          </span>
+          {contextTokens && (
+            <span className="typography-micro text-muted-foreground flex-shrink-0">
+              {contextTokens}
+            </span>
+          )}
+        </div>
+        {isSelected && (
+          <RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />
+        )}
+      </button>
+    );
+  };
+
   return (
     <div className="space-y-2">
       <div className="flex flex-wrap gap-1.5 items-center">
@@ -142,83 +268,153 @@ const ModelMultiSelect: React.FC<{
             Add model
           </Button>
 
-          {isOpen && (
+          {isOpen && (() => {
-            <div className="absolute top-full left-0 mt-1 z-50 border border-border/30 rounded-lg overflow-hidden bg-background shadow-lg w-72">
+            // Build flat list for keyboard navigation
-              {/* Search input */}
+            type FlatModelItem = { model: Record<string, unknown>; providerID: string; modelID: string; section: string };
-              <div className="p-2 border-b border-border/30">
+            const flatModelList: FlatModelItem[] = [];
-                <div className="relative">
+            
-                  <RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            filteredFavorites.forEach(({ model, providerID, modelID }) => {
-                  <Input
+              flatModelList.push({ model, providerID, modelID, section: 'fav' });
-                    ref={searchInputRef}
+            });
-                    type="text"
+            filteredRecents.forEach(({ model, providerID, modelID }) => {
-                    placeholder="Search models..."
+              flatModelList.push({ model, providerID, modelID, section: 'recent' });
-                    value={searchQuery}
+            });
-                    onChange={(e) => setSearchQuery(e.target.value)}
+            filteredProviders.forEach((provider) => {
-                    className="h-8 pl-8 typography-meta"
+              provider.models.forEach((model) => {
-                  />
+                flatModelList.push({ model, providerID: provider.id, modelID: model.id as string, section: 'provider' });
+              });
+            });
+
+            const totalItems = flatModelList.length;
+
+            // Handle keyboard navigation
+            const handleKeyDown = (e: React.KeyboardEvent) => {
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                e.stopPropagation();
+                const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
+                setSelectedIndex(nextIndex);
+                setTimeout(() => {
+                  itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }, 0);
+              } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
+                setSelectedIndex(prevIndex);
+                setTimeout(() => {
+                  itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }, 0);
+              } else if (e.key === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+                const selectedItem = flatModelList[selectedIndex];
+                if (selectedItem && !selectedKeys.has(`${selectedItem.providerID}:${selectedItem.modelID}`)) {
+                  onAdd({
+                    providerID: selectedItem.providerID,
+                    modelID: selectedItem.modelID,
+                    displayName: (selectedItem.model.name as string) || selectedItem.modelID,
+                  });
+                }
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsOpen(false);
+                setSearchQuery('');
+                setSelectedIndex(0);
+              }
+            };
+
+            let currentFlatIndex = 0;
+
+            return (
+              <div className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden bg-background shadow-lg w-[min(380px,calc(100vw-2rem))] flex flex-col">
+                {/* Search input */}
+                <div className="p-2 border-b border-border/40">
+                  <div className="relative">
+                    <RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                    <Input
+                      ref={searchInputRef}
+                      type="text"
+                      placeholder="Search models"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      className="h-8 pl-8 typography-meta"
+                    />
+                  </div>
+                </div>
+
+                {/* Models list */}
+                <ScrollableOverlay outerClassName="max-h-[400px] flex-1">
+                  <div className="p-1">
+                    {!hasResults && (
+                      <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
+                        No models found
+                      </div>
+                    )}
+
+                    {/* Favorites Section */}
+                    {filteredFavorites.length > 0 && (
+                      <>
+                        <div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
+                          <RiStarFill className="h-4 w-4 text-primary" />
+                          Favorites
+                        </div>
+                        {filteredFavorites.map(({ model, providerID, modelID }) => {
+                          const idx = currentFlatIndex++;
+                          return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
+                        })}
+                      </>
+                    )}
+
+                    {/* Recents Section */}
+                    {filteredRecents.length > 0 && (
+                      <>
+                        {filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
+                        <div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
+                          <RiTimeLine className="h-4 w-4" />
+                          Recent
+                        </div>
+                        {filteredRecents.map(({ model, providerID, modelID }) => {
+                          const idx = currentFlatIndex++;
+                          return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
+                        })}
+                      </>
+                    )}
+
+                    {/* Separator before providers */}
+                    {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
+                      <div className="h-px bg-border/40 my-1" />
+                    )}
+
+                    {/* All Providers - Flat List */}
+                    {filteredProviders.map((provider, index) => (
+                      <React.Fragment key={provider.id}>
+                        {index > 0 && <div className="h-px bg-border/40 my-1" />}
+                        <div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
+                          <ProviderLogo
+                            providerId={provider.id}
+                            className="h-4 w-4 flex-shrink-0"
+                          />
+                          {provider.name}
+                        </div>
+                        {provider.models.map((model) => {
+                          const idx = currentFlatIndex++;
+                          return renderModelRow(model, provider.id, model.id as string, 'provider', idx, selectedIndex === idx);
+                        })}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </ScrollableOverlay>
+
+                {/* Keyboard hints footer */}
+                <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
+                  ↑↓ navigate • Enter select • Esc close
                 </div>
               </div>
-
+            );
-              {/* Models list */}
+          })()}
-              <ScrollableOverlay
-                outerClassName="max-h-[240px]"
-                className="p-2 space-y-1"
-              >
-                {filteredProviders.length === 0 ? (
-                  <div className="py-4 text-center text-muted-foreground typography-meta">
-                    No models found
-                  </div>
-                ) : (
-                  filteredProviders.map((provider) => {
-                    const models = Array.isArray(provider.models) ? provider.models : [];
-                    if (models.length === 0) return null;
-
-                    return (
-                      <div key={provider.id} className="space-y-0.5">
-                        <div className="flex items-center gap-2 py-1 text-muted-foreground">
-                          <ProviderLogo providerId={provider.id} className="h-3 w-3" />
-                          <span className="typography-micro font-medium uppercase tracking-wider">
-                            {provider.name}
-                          </span>
-                        </div>
-                        {models.map((model) => {
-                          const key = `${provider.id}:${model.id}`;
-                          const isSelected = selectedKeys.has(key);
-
-                          return (
-                            <button
-                              key={model.id as string}
-                              type="button"
-                              disabled={isSelected}
-                              onClick={() => {
-                                onAdd({
-                                  providerID: provider.id,
-                                  modelID: model.id as string,
-                                  displayName: model.name as string || model.id as string,
-                                });
-                                // Don't close dropdown - allow selecting multiple
-                              }}
-                              className={cn(
-                                'w-full text-left px-2 py-1 rounded-md typography-meta transition-colors',
-                                isSelected
-                                  ? 'text-muted-foreground/50 cursor-not-allowed'
-                                  : 'hover:bg-accent/50'
-                              )}
-                            >
-                              {model.name || model.id}
-                              {isSelected && (
-                                <span className="ml-2 text-muted-foreground/50">(selected)</span>
-                              )}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    );
-                  })
-                )}
-              </ScrollableOverlay>
-            </div>
-          )}
         </div>
 
         {/* Selected models */}

packages/ui/src/components/sections/agents/ModelSelector.tsx

@@ -2,22 +2,21 @@ import React from 'react';
 import {
     DropdownMenu,
     DropdownMenuContent,
-    DropdownMenuItem,
+    DropdownMenuLabel,
     DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useDeviceInfo } from '@/lib/device';
-import { RiArrowDownSLine, RiArrowRightSLine, RiPencilAiLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiPencilAiLine, RiSearchLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { useModelLists } from '@/hooks/useModelLists';
+import type { ModelMetadata } from '@/types';
 
 type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
 
@@ -28,6 +27,24 @@ interface ModelSelectorProps {
     className?: string;
 }
 
+const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0,
+});
+
+const formatTokens = (value?: number | null) => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+        return '';
+    }
+    if (value === 0) {
+        return '0';
+    }
+    const formatted = COMPACT_NUMBER_FORMATTER.format(value);
+    return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
+};
+
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
     providerId,
     modelId,
@@ -43,21 +60,36 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
 
     const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
     const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(new Set());
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
     const closeMobilePanel = () => setIsMobilePanelOpen(false);
-    const toggleMobileProviderExpansion = (providerId: string) => {
+    const toggleMobileProviderExpansion = (provId: string) => {
         setExpandedMobileProviders(prev => {
             const newSet = new Set(prev);
-            if (newSet.has(providerId)) {
+            if (newSet.has(provId)) {
-                newSet.delete(providerId);
+                newSet.delete(provId);
             } else {
-                newSet.add(providerId);
+                newSet.add(provId);
             }
             return newSet;
         });
     };
 
+    // Reset search and selection when dropdown closes
+    React.useEffect(() => {
+        if (!isDropdownOpen) {
+            setSearchQuery('');
+            setSelectedIndex(0);
+        }
+    }, [isDropdownOpen]);
 
+    // Reset selection when search query changes
+    React.useEffect(() => {
+        setSelectedIndex(0);
+    }, [searchQuery]);
 
     const getModelDisplayName = (model: Record<string, unknown>) => {
         const name = model?.name || model?.id || '';
@@ -68,17 +100,120 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
         return nameStr;
     };
 
-    const getModelMetadata = (providerId: string, modelId: string) => {
+    const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
-        const key = `${providerId}/${modelId}`;
+        const key = `${provId}/${modId}`;
         return modelsMetadata.get(key);
     };
 
     const handleProviderAndModelChange = (newProviderId: string, newModelId: string) => {
         onChange(newProviderId, newModelId);
-        // Add to recent models on successful selection
+        if (newProviderId && newModelId) {
-        addRecentModel(newProviderId, newModelId);
+            addRecentModel(newProviderId, newModelId);
+        }
+        setIsDropdownOpen(false);
     };
 
+    // Filter helper
+    const filterByQuery = (modelName: string, providerName: string) => {
+        if (!searchQuery.trim()) return true;
+        const lowerQuery = searchQuery.toLowerCase();
+        return (
+            modelName.toLowerCase().includes(lowerQuery) ||
+            providerName.toLowerCase().includes(lowerQuery)
+        );
+    };
+
+    // Render a model row for desktop dropdown
+    const renderModelRow = (
+        model: ProviderModel,
+        provID: string,
+        modID: string,
+        keyPrefix: string,
+        flatIndex: number,
+        isHighlighted: boolean
+    ) => {
+        const metadata = getModelMetadata(provID, modID);
+        const contextTokens = formatTokens(metadata?.limit?.context);
+        const isSelected = providerId === provID && modelId === modID;
+        const isFavorite = isFavoriteModel(provID, modID);
+
+        return (
+            <div
+                key={`${keyPrefix}-${provID}-${modID}`}
+                ref={(el) => { itemRefs.current[flatIndex] = el; }}
+                className={cn(
+                    "typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
+                    isHighlighted ? "bg-accent" : "hover:bg-accent/50"
+                )}
+                onClick={() => handleProviderAndModelChange(provID, modID)}
+                onMouseEnter={() => setSelectedIndex(flatIndex)}
+            >
+                <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                    <span className="font-medium truncate">
+                        {getModelDisplayName(model)}
+                    </span>
+                    {contextTokens ? (
+                        <span className="typography-micro text-muted-foreground flex-shrink-0">
+                            {contextTokens}
+                        </span>
+                    ) : null}
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0">
+                    {isSelected && (
+                        <RiCheckLine className="h-4 w-4 text-primary" />
+                    )}
+                    <button
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleFavoriteModel(provID, modID);
+                        }}
+                        className={cn(
+                            "model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
+                            isFavorite ? "text-yellow-500" : "text-muted-foreground"
+                        )}
+                        aria-label={isFavorite ? "Unfavorite" : "Favorite"}
+                        title={isFavorite ? "Remove from favorites" : "Add to favorites"}
+                    >
+                        {isFavorite ? (
+                            <RiStarFill className="h-3.5 w-3.5" />
+                        ) : (
+                            <RiStarLine className="h-3.5 w-3.5" />
+                        )}
+                    </button>
+                </div>
+            </div>
+        );
+    };
+
+    // Filter data for desktop dropdown
+    const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
+        const provider = providers.find(p => p.id === providerID);
+        const providerName = provider?.name || providerID;
+        const modelName = getModelDisplayName(model);
+        return filterByQuery(modelName, providerName);
+    });
+
+    const filteredRecents = recentModelsList.filter(({ model, providerID }) => {
+        const provider = providers.find(p => p.id === providerID);
+        const providerName = provider?.name || providerID;
+        const modelName = getModelDisplayName(model);
+        return filterByQuery(modelName, providerName);
+    });
+
+    const filteredProviders = providers
+        .map((provider) => {
+            const providerModels = Array.isArray(provider.models) ? provider.models : [];
+            const filteredModels = providerModels.filter((model: ProviderModel) => {
+                const modelName = getModelDisplayName(model);
+                return filterByQuery(modelName, provider.name || provider.id || '');
+            });
+            return { ...provider, models: filteredModels };
+        })
+        .filter((provider) => provider.models.length > 0);
+
+    const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
+
     const renderMobileModelPanel = () => {
         if (!isActuallyMobile) return null;
 
@@ -98,7 +233,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                             <div className="border-t border-border/20">
                                 {favoriteModelsList.map(({ model, providerID, modelID }) => {
                                     const isSelectedModel = providerID === providerId && modelID === modelId;
-                                    const metadata = getModelMetadata(providerID, modelID);
 
                                     return (
                                         <div
@@ -124,11 +258,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                     />
                                                     <span className="font-medium truncate">{getModelDisplayName(model)}</span>
                                                 </div>
-                                                {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
-                                                    <span className="typography-micro text-muted-foreground truncate">
-                                                        {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
-                                                    </span>
-                                                )}
                                             </button>
                                             
                                             <button
@@ -158,7 +287,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                             <div className="border-t border-border/20">
                                 {recentModelsList.map(({ model, providerID, modelID }) => {
                                     const isSelectedModel = providerID === providerId && modelID === modelId;
-                                    const metadata = getModelMetadata(providerID, modelID);
 
                                     return (
                                         <div
@@ -184,11 +312,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                     />
                                                     <span className="font-medium truncate">{getModelDisplayName(model)}</span>
                                                 </div>
-                                                {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
-                                                    <span className="typography-micro text-muted-foreground truncate">
-                                                        {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
-                                                    </span>
-                                                )}
                                             </button>
                                             
                                             <button
@@ -246,7 +369,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                     <div className="border-t border-border/20">
                                         {providerModels.map((modelItem: ProviderModel) => {
                                             const isSelectedModel = provider.id === providerId && modelItem.id === modelId;
-                                            const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
 
                                             return (
                                                 <div
@@ -266,11 +388,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                                                         }}
                                                     >
                                                         <span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
-                                                        {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
-                                                            <span className="typography-micro text-muted-foreground truncate">
-                                                                {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
-                                                            </span>
-                                                        )}
                                                     </button>
                                                     
                                                     <div className="flex items-center gap-2 flex-shrink-0">
@@ -350,7 +467,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                     <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
                 </button>
             ) : (
-                <DropdownMenu>
+                <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
                     <DropdownMenuTrigger asChild>
                         <div className={cn(
                             'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
@@ -373,220 +490,165 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                             <RiArrowDownSLine className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
                         </div>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent className="max-w-[300px]">
+                    <DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
-                        {/* Favorites Section */}
+                        {(() => {
-                        {favoriteModelsList.length > 0 && (
+                            // Build flat list for keyboard navigation
-                            <DropdownMenuSub>
+                            type FlatModelItem = { model: ProviderModel; providerID: string; modelID: string; section: string };
-                                <DropdownMenuSubTrigger className="typography-meta">
+                            const flatModelList: FlatModelItem[] = [];
-                                    <RiStarFill className="h-3 w-3 flex-shrink-0 mr-2 text-yellow-500" />
+                            
-                                    Favorites
+                            filteredFavorites.forEach(({ model, providerID, modelID }) => {
-                                </DropdownMenuSubTrigger>
+                                flatModelList.push({ model, providerID, modelID, section: 'fav' });
-                                <DropdownMenuSubContent
+                            });
-                                    className="max-h-[320px] min-w-[200px]"
+                            filteredRecents.forEach(({ model, providerID, modelID }) => {
-                                    sideOffset={2}
+                                flatModelList.push({ model, providerID, modelID, section: 'recent' });
-                                    collisionPadding={8}
+                            });
-                                    avoidCollisions={true}
+                            filteredProviders.forEach((provider) => {
-                                >
+                                (provider.models as ProviderModel[]).forEach((model) => {
-                                    <ScrollableOverlay
+                                    flatModelList.push({ model, providerID: provider.id as string, modelID: model.id as string, section: 'provider' });
-                                        outerClassName="max-h-[320px] min-w-[200px]"
+                                });
-                                        className="space-y-1 p-1"
+                            });
-                                    >
-                                        {favoriteModelsList.map(({ model, providerID, modelID }) => {
-                                            const metadata = getModelMetadata(providerID, modelID);
-                                            return (
-                                                <DropdownMenuItem
-                                                    key={`fav-${providerID}-${modelID}`}
-                                                    className="typography-meta"
-                                                    onSelect={(e) => {
-                                                        e.preventDefault();
-                                                        handleProviderAndModelChange(providerID, modelID);
-                                                    }}
-                                                >
-                                                    <div className="flex items-center gap-2 w-full">
-                                                        <div className="flex flex-col flex-1 min-w-0">
-                                                            <span className="font-medium truncate">{getModelDisplayName(model)}</span>
-                                                            {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
-                                                                <span className="typography-micro text-muted-foreground truncate">
-                                                                    {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
-                                                                </span>
-                                                            )}
-                                                        </div>
-                                                        <button
-                                                            onClick={(e) => {
-                                                                e.preventDefault();
-                                                                e.stopPropagation();
-                                                                toggleFavoriteModel(providerID, modelID);
-                                                            }}
-                                                            className="model-favorite-button flex h-4 w-4 items-center justify-center text-yellow-500 hover:text-yellow-600"
-                                                            aria-label="Unfavorite"
-                                                        >
-                                                            <RiStarFill className="h-3.5 w-3.5" />
-                                                        </button>
-                                                    </div>
-                                                </DropdownMenuItem>
-                                            );
-                                        })}
-                                    </ScrollableOverlay>
-                                </DropdownMenuSubContent>
-                            </DropdownMenuSub>
-                        )}
-                        
-                        {/* Recents Section */}
-                        {recentModelsList.length > 0 && (
-                            <DropdownMenuSub>
-                                <DropdownMenuSubTrigger className="typography-meta">
-                                    <RiTimeLine className="h-3 w-3 flex-shrink-0 mr-2 text-muted-foreground" />
-                                    Recent
-                                </DropdownMenuSubTrigger>
-                                <DropdownMenuSubContent
-                                    className="max-h-[320px] min-w-[200px]"
-                                    sideOffset={2}
-                                    collisionPadding={8}
-                                    avoidCollisions={true}
-                                >
-                                    <ScrollableOverlay
-                                        outerClassName="max-h-[320px] min-w-[200px]"
-                                        className="space-y-1 p-1"
-                                    >
-                                        {recentModelsList.map(({ model, providerID, modelID }) => {
-                                            const metadata = getModelMetadata(providerID, modelID);
-                                            return (
-                                                <DropdownMenuItem
-                                                    key={`recent-${providerID}-${modelID}`}
-                                                    className="typography-meta"
-                                                    onSelect={(e) => {
-                                                        e.preventDefault();
-                                                        handleProviderAndModelChange(providerID, modelID);
-                                                    }}
-                                                >
-                                                    <div className="flex items-center gap-2 w-full">
-                                                        <div className="flex flex-col flex-1 min-w-0">
-                                                            <span className="font-medium truncate">{getModelDisplayName(model)}</span>
-                                                            {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
-                                                                <span className="typography-micro text-muted-foreground truncate">
-                                                                    {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
-                                                                </span>
-                                                            )}
-                                                        </div>
-                                                        <button
-                                                            onClick={(e) => {
-                                                                e.preventDefault();
-                                                                e.stopPropagation();
-                                                                toggleFavoriteModel(providerID, modelID);
-                                                            }}
-                                                            className="model-favorite-button flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-yellow-600"
-                                                            aria-label="Favorite"
-                                                        >
-                                                            <RiStarLine className="h-3.5 w-3.5" />
-                                                        </button>
-                                                    </div>
-                                                </DropdownMenuItem>
-                                            );
-                                        })}
-                                    </ScrollableOverlay>
-                                </DropdownMenuSubContent>
-                            </DropdownMenuSub>
-                        )}
-                        
-                        {/* Separator before providers */}
-                        {(favoriteModelsList.length > 0 || recentModelsList.length > 0) && (
-                            <DropdownMenuSeparator />
-                        )}
 
-                        {providers.map((provider) => {
+                            const totalItems = flatModelList.length;
-                            const providerModels = Array.isArray(provider.models) ? provider.models : [];
 
-                            if (providerModels.length === 0) {
+                            // Handle keyboard navigation
-                                return (
+                            const handleKeyDown = (e: React.KeyboardEvent) => {
-                                    <DropdownMenuItem
+                                if (e.key === 'ArrowDown') {
-                                        key={provider.id}
+                                    e.preventDefault();
-                                        disabled
+                                    e.stopPropagation();
-                                        className="typography-meta text-muted-foreground"
+                                    const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
-                                    >
+                                    setSelectedIndex(nextIndex);
-                                        <ProviderLogo
+                                    setTimeout(() => {
-                                            providerId={provider.id}
+                                        itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                                            className="h-3 w-3 flex-shrink-0 mr-2"
+                                    }, 0);
-                                        />
+                                } else if (e.key === 'ArrowUp') {
-                                        {provider.name} (No models)
+                                    e.preventDefault();
-                                    </DropdownMenuItem>
+                                    e.stopPropagation();
-                                );
+                                    const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
-                            }
+                                    setSelectedIndex(prevIndex);
+                                    setTimeout(() => {
+                                        itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                    }, 0);
+                                } else if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    const selectedItem = flatModelList[selectedIndex];
+                                    if (selectedItem) {
+                                        handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
+                                    }
+                                } else if (e.key === 'Escape') {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    setIsDropdownOpen(false);
+                                }
+                            };
+
+                            let currentFlatIndex = 0;
 
                             return (
-                                <DropdownMenuSub key={provider.id}>
+                                <>
-                                    <DropdownMenuSubTrigger className="typography-meta">
+                                    {/* Search Input */}
-                                        <ProviderLogo
+                                    <div className="p-2 border-b border-border/40">
-                                            providerId={provider.id}
+                                        <div className="relative">
-                                            className="h-3 w-3 flex-shrink-0 mr-2"
+                                            <RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-                                        />
+                                            <Input
-                                        {provider.name}
+                                                type="text"
-                                    </DropdownMenuSubTrigger>
+                                                placeholder="Search models"
-                                    <DropdownMenuSubContent
+                                                value={searchQuery}
-                                        className="max-h-[320px] min-w-[200px]"
+                                                onChange={(e) => setSearchQuery(e.target.value)}
-                                        sideOffset={2}
+                                                onKeyDown={handleKeyDown}
-                                        collisionPadding={8}
+                                                className="pl-8 h-8 typography-meta"
-                                        avoidCollisions={true}
+                                                autoFocus
-                                    >
+                                            />
-                                        <ScrollableOverlay
+                                        </div>
-                                            outerClassName="max-h-[320px] min-w-[200px]"
+                                    </div>
-                                            className="space-y-1 p-1"
-                                        >
-                                            {providerModels.map((modelItem: ProviderModel) => {
-                                                    const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
 
-                                            return (
+                                    {/* Scrollable content */}
-                                                <DropdownMenuItem
+                                    <ScrollableOverlay outerClassName="max-h-[400px] flex-1">
-                                                    key={modelItem.id as string}
+                                        <div className="p-1">
-                                                    className="typography-meta"
+                                            {/* Not selected option */}
-                                                    onSelect={(e) => {
+                                            <div
-                                                        e.preventDefault();
+                                                className={cn(
-                                                        handleProviderAndModelChange(provider.id as string, modelItem.id as string);
+                                                    "typography-meta flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
-                                                    }}
+                                                    "hover:bg-accent/50"
-                                                >
+                                                )}
-                                                    <div className="flex items-center gap-2 w-full">
+                                                onClick={() => handleProviderAndModelChange('', '')}
-                                                        <div className="flex flex-col flex-1 min-w-0">
+                                            >
-                                                            <span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
+                                                <RiCloseLine className="h-3.5 w-3.5 text-muted-foreground" />
-                                                            {typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
+                                                <span className="text-muted-foreground">Not selected</span>
-                                                                <span className="typography-micro text-muted-foreground truncate">
+                                                {!providerId && !modelId && (
-                                                                    {(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
+                                                    <RiCheckLine className="h-4 w-4 text-primary ml-auto" />
-                                                                </span>
+                                                )}
-                                                            )}
+                                            </div>
-                                                        </div>
+
-                                                        <button
+                                            <DropdownMenuSeparator />
-                                                            onClick={(e) => {
+
-                                                                e.preventDefault();
+                                            {!hasResults && searchQuery && (
-                                                                e.stopPropagation();
+                                                <div className="px-2 py-4 text-center typography-meta text-muted-foreground">
-                                                                toggleFavoriteModel(provider.id as string, modelItem.id as string);
+                                                    No models found
-                                                            }}
+                                                </div>
-                                                            className={cn(
+                                            )}
-                                                                "flex h-4 w-4 items-center justify-center hover:text-yellow-600",
+
-                                                                isFavoriteModel(provider.id as string, modelItem.id as string)
+                                            {/* Favorites Section */}
-                                                                    ? "text-yellow-500"
+                                            {filteredFavorites.length > 0 && (
-                                                                    : "text-muted-foreground"
+                                                <>
-                                                            )}
+                                                    <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
-                                                            aria-label={isFavoriteModel(provider.id as string, modelItem.id as string) ? "Unfavorite" : "Favorite"}
+                                                        <RiStarFill className="h-4 w-4 text-primary" />
-                                                        >
+                                                        Favorites
-                                                            {isFavoriteModel(provider.id as string, modelItem.id as string) ? (
+                                                    </DropdownMenuLabel>
-                                                                <RiStarFill className="h-3.5 w-3.5" />
+                                                    {filteredFavorites.map(({ model, providerID, modelID }) => {
-                                                            ) : (
+                                                        const idx = currentFlatIndex++;
-                                                                <RiStarLine className="h-3.5 w-3.5" />
+                                                        return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
-                                                            )}
+                                                    })}
-                                                        </button>
+                                                </>
-                                                    </div>
+                                            )}
-                                                </DropdownMenuItem>
+
-                                            );
+                                            {/* Recents Section */}
-                                        })}
+                                            {filteredRecents.length > 0 && (
-                                        </ScrollableOverlay>
+                                                <>
-                                    </DropdownMenuSubContent>
+                                                    {filteredFavorites.length > 0 && <DropdownMenuSeparator />}
-                                </DropdownMenuSub>
+                                                    <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
+                                                        <RiTimeLine className="h-4 w-4" />
+                                                        Recent
+                                                    </DropdownMenuLabel>
+                                                    {filteredRecents.map(({ model, providerID, modelID }) => {
+                                                        const idx = currentFlatIndex++;
+                                                        return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
+                                                    })}
+                                                </>
+                                            )}
+
+                                            {/* Separator before providers */}
+                                            {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
+                                                <DropdownMenuSeparator />
+                                            )}
+
+                                            {/* All Providers - Flat List */}
+                                            {filteredProviders.map((provider, index) => (
+                                                <React.Fragment key={provider.id}>
+                                                    {index > 0 && <DropdownMenuSeparator />}
+                                                    <DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
+                                                        <ProviderLogo
+                                                            providerId={provider.id}
+                                                            className="h-4 w-4 flex-shrink-0"
+                                                        />
+                                                        {provider.name}
+                                                    </DropdownMenuLabel>
+                                                    {(provider.models as ProviderModel[]).map((model: ProviderModel) => {
+                                                        const idx = currentFlatIndex++;
+                                                        return renderModelRow(model, provider.id as string, model.id as string, 'provider', idx, selectedIndex === idx);
+                                                    })}
+                                                </React.Fragment>
+                                            ))}
+                                        </div>
+                                    </ScrollableOverlay>
+
+                                    {/* Keyboard hints footer */}
+                                    <div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
+                                        ↑↓ navigate • Enter select • Esc close
+                                    </div>
+                                </>
                             );
-                        })}
+                        })()}
-                        <DropdownMenuItem
-                            className="typography-meta"
-                            onSelect={() => handleProviderAndModelChange('', '')}
-                        >
-                            <span className="text-muted-foreground">No model (optional)</span>
-                        </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             )}

packages/ui/src/components/ui/HelpDialog.tsx

@@ -7,7 +7,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { useUIStore } from '@/stores/useUIStore';
-import { RiAddLine, RiArrowUpSLine, RiArrowUpWideLine, RiCloseCircleLine, RiCodeLine, RiCommandLine, RiGitBranchLine, RiLayoutLeftLine, RiPaletteLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, RiText } from '@remixicon/react';
+import { RiAddLine, RiArrowUpSLine, RiArrowUpWideLine, RiBrainAi3Line, RiCloseCircleLine, RiCodeLine, RiCommandLine, RiGitBranchLine, RiLayoutLeftLine, RiPaletteLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, RiText } from '@remixicon/react';
 
 const renderKeyToken = (token: string, index: number) => {
   const normalized = token.trim().toLowerCase();
@@ -64,6 +64,7 @@ export const HelpDialog: React.FC = () => {
         { keys: ["Ctrl + X"], description: "Open Command Palette", icon: RiCommandLine },
         { keys: ["Ctrl + H"], description: "Show Keyboard Shortcuts (this dialog)", icon: RiQuestionLine },
         { keys: ["Ctrl + L"], description: "Toggle Session Sidebar", icon: RiLayoutLeftLine },
+        { keys: ["Ctrl + M"], description: "Open Model Selector", icon: RiBrainAi3Line },
       ]
     },
     {

packages/ui/src/hooks/useKeyboardShortcuts.ts

@@ -15,6 +15,7 @@ export const useKeyboardShortcuts = () => {
     setSessionCreateDialogOpen,
     setActiveMainTab,
     setSettingsDialogOpen,
+    setModelSelectorOpen,
   } = useUIStore();
   const { themeMode, setThemeMode } = useThemeSystem();
   const { working } = useAssistantStatus();
@@ -143,6 +144,37 @@ export const useKeyboardShortcuts = () => {
         return;
       }
 
+      // Ctrl+M: Open model selector (same conditions as double-ESC: chat tab, no overlays)
+      if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 'm') {
+        const {
+          isSettingsDialogOpen,
+          isCommandPaletteOpen,
+          isHelpDialogOpen,
+          isSessionSwitcherOpen,
+          isSessionCreateDialogOpen,
+          isAboutDialogOpen,
+          activeMainTab,
+          isModelSelectorOpen,
+        } = useUIStore.getState();
+
+        // Skip if settings open
+        if (isSettingsDialogOpen) {
+          return;
+        }
+
+        // Skip if any overlay open or not on chat tab
+        const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isSessionCreateDialogOpen || isAboutDialogOpen;
+        const isChatActive = activeMainTab === 'chat';
+
+        if (hasOverlay || !isChatActive) {
+          return;
+        }
+
+        e.preventDefault();
+        setModelSelectorOpen(!isModelSelectorOpen);
+        return;
+      }
+
       if (e.key === 'Escape') {
         const {
           isSettingsDialogOpen,
@@ -222,6 +254,7 @@ export const useKeyboardShortcuts = () => {
     setSessionCreateDialogOpen,
     setActiveMainTab,
     setSettingsDialogOpen,
+    setModelSelectorOpen,
     setThemeMode,
     themeMode,
     working,

packages/ui/src/stores/useUIStore.ts

@@ -32,6 +32,7 @@ interface UIStore {
   isAboutDialogOpen: boolean;
   isSessionCreateDialogOpen: boolean;
   isSettingsDialogOpen: boolean;
+  isModelSelectorOpen: boolean;
   sidebarSection: SidebarSection;
   eventStreamStatus: EventStreamStatus;
   eventStreamHint: string | null;
@@ -69,6 +70,7 @@ interface UIStore {
   setAboutDialogOpen: (open: boolean) => void;
   setSessionCreateDialogOpen: (open: boolean) => void;
   setSettingsDialogOpen: (open: boolean) => void;
+  setModelSelectorOpen: (open: boolean) => void;
   applyTheme: () => void;
   setSidebarSection: (section: SidebarSection) => void;
   setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
@@ -116,6 +118,7 @@ export const useUIStore = create<UIStore>()(
         isAboutDialogOpen: false,
         isSessionCreateDialogOpen: false,
         isSettingsDialogOpen: false,
+        isModelSelectorOpen: false,
         sidebarSection: 'sessions',
         eventStreamStatus: 'idle',
         eventStreamHint: null,
@@ -229,6 +232,10 @@ export const useUIStore = create<UIStore>()(
           set({ isSettingsDialogOpen: open });
         },
 
+        setModelSelectorOpen: (open) => {
+          set({ isModelSelectorOpen: open });
+        },
+
         setSidebarSection: (section) => {
           set({ sidebarSection: section });
         },