@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/ModelSelectorPopover.tsx

@@ -1,8 +1,16 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useProviderModels } from '@/hooks/useProviderModels'
-import { fetchProviderModels } from '@/tauri'
-import { HF_MODELS } from '../constants/models'
+import { catalogPlatform } from '../platform'
+import { HF_MODELS, getModelMetadata, isFreeModel, OPENROUTER_POPULAR_MODELS } from '../constants/models'
 import type { CustomProviderConfig } from '../types'
+import anthropicLogo from '@lobehub/icons-static-svg/icons/anthropic.svg?url'
+import deepseekLogo from '@lobehub/icons-static-svg/icons/deepseek-color.svg?url'
+import geminiLogo from '@lobehub/icons-static-svg/icons/gemini-color.svg?url'
+import huggingFaceLogo from '@lobehub/icons-static-svg/icons/huggingface-color.svg?url'
+import lmStudioLogo from '@lobehub/icons-static-svg/icons/lmstudio.svg?url'
+import ollamaLogo from '@lobehub/icons-static-svg/icons/ollama.svg?url'
+import openAiLogo from '@lobehub/icons-static-svg/icons/openai.svg?url'
+import openRouterLogo from '@lobehub/icons-static-svg/icons/openrouter-color.svg?url'
 
 interface ModelSelectorPopoverProps {
   activeProvider: string
@@ -12,10 +20,12 @@ interface ModelSelectorPopoverProps {
   dynamicOllamaModels?: string[]
   onSelect: (provider: string, model: string) => void
   disabled?: boolean
+  onUpdateSettings?: (config: any) => void
 }
 
 interface ProviderGroup {
   id: string
+  providerId: string
   name: string
   icon: React.ReactNode
   models: string[]
@@ -27,92 +37,70 @@ interface FlattenedItem {
   model: string
 }
 
-// ─── SVG Icons for Providers (NO EMOJIS) ───────────────────────────────────────
+const Effort_LEVELS = [
+  { id: 'low', label: 'Low' },
+  { id: 'medium', label: 'Medium' },
+  { id: 'high', label: 'High' },
+  { id: 'extra_high', label: 'Extra High' },
+] as const
+
+function formatEffortDisplay(effort?: string): string {
+  if (!effort) return 'Medium'
+  const lower = effort.toLowerCase().replace(/[- ]/g, '_')
+  if (lower === 'low') return 'Low'
+  if (lower === 'high') return 'High'
+  if (lower === 'extra_high' || lower === 'extra') return 'Extra High'
+  return 'Medium'
+}
+
+// Brand marks are bundled locally so the selector never depends on a remote image host.
+const providerLogos: Record<string, { src: string; color?: string }> = {
+  anthropic: { src: anthropicLogo, color: '#d97757' },
+  deepseek: { src: deepseekLogo },
+  gemini: { src: geminiLogo },
+  huggingface: { src: huggingFaceLogo },
+  local_openai: { src: lmStudioLogo, color: '#8b5cf6' },
+  ollama: { src: ollamaLogo, color: '#f3f4f6' },
+  openai: { src: openAiLogo, color: '#10a37f' },
+  openrouter: { src: openRouterLogo },
+}
 
 function ProviderIcon({ provider }: { provider: string }) {
   const p = provider.toLowerCase()
-  if (p === 'gemini') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-      </svg>
-    )
-  }
-  if (p === 'anthropic') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4.5 16.5c-1.5 1.26-2.5 3.19-2.5 5.5h20c0-2.31-1-4.24-2.5-5.5" />
-        <path d="M12 2L2 22h20L12 2z" />
-      </svg>
-    )
-  }
-  if (p === 'openai') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="12" cy="12" r="10" />
-        <line x1="12" y1="2" x2="12" y2="22" />
-        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-      </svg>
-    )
-  }
-  if (p === 'deepseek') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="11" cy="11" r="8" />
-        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      </svg>
-    )
-  }
-  if (p === 'openrouter') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="16 3 21 3 21 8" />
-        <line x1="4" y1="20" x2="21" y2="3" />
-        <polyline points="21 16 21 21 16 21" />
-        <line x1="15" y1="15" x2="21" y2="21" />
-        <line x1="4" y1="4" x2="9" y2="9" />
-      </svg>
-    )
-  }
-  if (p === 'huggingface') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="12" cy="12" r="10" />
-        <path d="M8 14s1.5 2 4 2 4-2 4-2" />
-        <line x1="9" y1="9" x2="9.01" y2="9" />
-        <line x1="15" y1="9" x2="15.01" y2="9" />
-      </svg>
-    )
-  }
-  if (p === 'local_openai') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-        <line x1="8" y1="21" x2="16" y2="21" />
-        <line x1="12" y1="17" x2="12" y2="21" />
-      </svg>
-    )
-  }
-  if (p === 'ollama') {
-    return (
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-      </svg>
-    )
+  const logo = providerLogos[p]
+  if (logo) {
+    if (logo.color) {
+      return (
+        <span
+          className="provider-brand-logo is-monochrome"
+          aria-hidden="true"
+          style={{
+            '--provider-brand-color': logo.color,
+            maskImage: `url("${logo.src}")`,
+            WebkitMaskImage: `url("${logo.src}")`,
+          } as React.CSSProperties}
+        />
+      )
+    }
+    return <img className="provider-brand-logo" src={logo.src} alt="" aria-hidden="true" />
   }
   return (
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
       <circle cx="12" cy="12" r="3" />
       <path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14" />
     </svg>
   )
 }
 
-// ─── SVG Capability Badges (NO EMOJIS) ─────────────────────────────────────────
-
-function ModelBadge({ type, label }: { type: 'fast' | 'reasoning' | 'top' | 'vision'; label: string }) {
+function ModelBadge({ type, label }: { type: 'fast' | 'reasoning' | 'top' | 'vision' | 'free'; label: string }) {
   return (
     <span className={`model-tag-badge badge-${type}`}>
+      {type === 'free' && (
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+          <line x1="7" y1="7" x2="7.01" y2="7" />
+        </svg>
+      )}
       {type === 'fast' && (
         <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
           <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
@@ -148,10 +136,15 @@ function ModelBadge({ type, label }: { type: 'fast' | 'reasoning' | 'top' | 'vis
   )
 }
 
-function getModelBadges(modelId: string): Array<{ label: string; type: 'fast' | 'reasoning' | 'top' | 'vision' }> {
+function getModelBadges(modelId: string): Array<{ label: string; type: 'fast' | 'reasoning' | 'top' | 'vision' | 'free' }> {
+  const badges: Array<{ label: string; type: 'fast' | 'reasoning' | 'top' | 'vision' | 'free' }> = []
+
+  if (isFreeModel(modelId)) {
+    badges.push({ label: 'FREE', type: 'free' })
+  }
+
   const lower = modelId.toLowerCase()
 
-  // 1. Dedicated Reasoning models
   if (
     lower.includes('reason') ||
     lower.includes('thinking') ||
@@ -160,15 +153,11 @@ function getModelBadges(modelId: string): Array<{ label: string; type: 'fast' |
     lower.includes('o3') ||
     lower.includes('qwq')
   ) {
-    return [{ label: 'Reasoning', type: 'reasoning' }]
+    badges.push({ label: 'Reasoning', type: 'reasoning' })
   }
-
-  // 2. Vision / Multimodal models
   if (lower.includes('vision') || lower.includes('multimodal') || lower.includes('-vl')) {
-    return [{ label: 'Vision', type: 'vision' }]
+    badges.push({ label: 'Vision', type: 'vision' })
   }
-
-  // 3. Fast / Lightweight models
   if (
     lower.includes('flash') ||
     lower.includes('haiku') ||
@@ -176,10 +165,8 @@ function getModelBadges(modelId: string): Array<{ label: string; type: 'fast' |
     lower.includes('turbo') ||
     lower.includes('lite')
   ) {
-    return [{ label: 'Fast', type: 'fast' }]
+    badges.push({ label: 'Fast', type: 'fast' })
   }
-
-  // 4. Flagship / Top-tier models
   if (
     lower === 'claude-sonnet-5' ||
     lower === 'claude-opus-5' ||
@@ -189,10 +176,9 @@ function getModelBadges(modelId: string): Array<{ label: string; type: 'fast' |
     lower === 'deepseek-chat' ||
     lower === 'deepseek-v4-pro'
   ) {
-    return [{ label: 'Top', type: 'top' }]
+    badges.push({ label: 'Top', type: 'top' })
   }
-
-  return []
+  return badges
 }
 
 export default function ModelSelectorPopover({
@@ -203,16 +189,32 @@ export default function ModelSelectorPopover({
   dynamicOllamaModels,
   onSelect,
   disabled = false,
+  onUpdateSettings,
 }: ModelSelectorPopoverProps) {
   const [isOpen, setIsOpen] = useState(false)
+  const [mobilePane, setMobilePane] = useState<'models' | 'options'>('models')
   const [search, setSearch] = useState('')
   const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const [expandOtherModels, setExpandOtherModels] = useState(false)
+
+  // Local state tracking model thinking overrides for responsive updates
+  const [modelThinkingOverrides, setModelThinkingOverrides] = useState<
+    Record<string, { enabled?: boolean; effort?: string }>
+  >({})
+
+  // Keep overrides in sync when settingsConfig arrives
+  useEffect(() => {
+    if (settingsConfig?.modelThinkingConfigs) {
+      setModelThinkingOverrides(settingsConfig.modelThinkingConfigs)
+    }
+  }, [settingsConfig?.modelThinkingConfigs])
+
   const popoverRef = useRef<HTMLDivElement>(null)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
 
-  // ─── Live Dynamic Models from Hook ──────────────────────────────────────────
+  // Dynamic models from hook
   const { models: dynamicGemini } = useProviderModels('gemini', settingsConfig?.apiKey || '')
   const { models: dynamicClaude } = useProviderModels('anthropic', settingsConfig?.anthropicApiKey || '')
   const { models: dynamicOpenAI } = useProviderModels('openai', settingsConfig?.openaiApiKey || '')
@@ -220,7 +222,7 @@ export default function ModelSelectorPopover({
   const { models: dynamicDeepSeek } = useProviderModels('deepseek', settingsConfig?.deepseekApiKey || '')
   const { models: dynamicLocal } = useProviderModels('local_openai', '', settingsConfig?.localApiBaseUrl || '')
 
-  // ─── Live Dynamic Ollama Models (Self-Fetch Fallback) ───────────────────────
+  // Ollama self-fetch fallback
   const [internalOllamaModels, setInternalOllamaModels] = useState<string[]>([])
 
   useEffect(() => {
@@ -247,7 +249,7 @@ export default function ModelSelectorPopover({
       } catch {}
 
       try {
-        const live = await fetchProviderModels('ollama', '')
+        const live = await catalogPlatform.fetchProviderModels('ollama', '')
         if (!cancelled && live && live.length > 0) {
           setInternalOllamaModels(live)
           return
@@ -264,40 +266,59 @@ export default function ModelSelectorPopover({
     }
   }, [dynamicOllamaModels, settingsConfig?.ollamaHost, settingsConfig?.ollamaModel])
 
-  // ─── Assemble Provider Groups ───────────────────────────────────────────────
+  // Assemble Provider Groups
   const providerGroups = useMemo<ProviderGroup[]>(() => {
     const list: ProviderGroup[] = []
 
-    const addGroup = (id: string, name: string, models: string[]) => {
+    const addGroup = (id: string, providerId: string, name: string, models: string[], logoDataUrl?: string) => {
       if (models.length === 0) return
       list.push({
         id,
+        providerId,
         name,
-        icon: <ProviderIcon provider={id} />,
+        icon: logoDataUrl
+          ? <img className="provider-brand-logo" src={logoDataUrl} alt="" aria-hidden="true" />
+          : <ProviderIcon provider={providerId} />,
         models,
       })
     }
 
     if (availableProviders.includes('gemini')) {
-      addGroup('gemini', 'Google Gemini', dynamicGemini)
+      addGroup('gemini', 'gemini', 'Google Gemini', dynamicGemini)
     }
     if (availableProviders.includes('anthropic')) {
-      addGroup('anthropic', 'Anthropic Claude', dynamicClaude)
+      addGroup('anthropic', 'anthropic', 'Anthropic Claude', dynamicClaude)
     }
     if (availableProviders.includes('openai')) {
-      addGroup('openai', 'OpenAI', dynamicOpenAI)
+      addGroup('openai', 'openai', 'OpenAI', dynamicOpenAI)
     }
     if (availableProviders.includes('deepseek')) {
-      addGroup('deepseek', 'DeepSeek', dynamicDeepSeek)
+      addGroup('deepseek', 'deepseek', 'DeepSeek', dynamicDeepSeek)
     }
     if (availableProviders.includes('openrouter')) {
-      addGroup('openrouter', 'OpenRouter', dynamicOpenRouter)
+      const popularSet = new Set<string>(OPENROUTER_POPULAR_MODELS)
+      const popularModels: string[] = []
+      for (const pop of OPENROUTER_POPULAR_MODELS) {
+        if (dynamicOpenRouter.includes(pop)) {
+          popularModels.push(pop)
+        }
+      }
+      const otherModels = dynamicOpenRouter.filter((m) => !popularSet.has(m))
+
+      if (popularModels.length > 0) {
+        addGroup('openrouter-popular', 'openrouter', 'OpenRouter • Popular & Recommended', popularModels)
+        if (otherModels.length > 0) {
+          addGroup('openrouter-other', 'openrouter', `OpenRouter • Other models (${otherModels.length})`, otherModels)
+        }
+      } else {
+        addGroup('openrouter', 'openrouter', 'OpenRouter', dynamicOpenRouter)
+      }
     }
     if (availableProviders.includes('huggingface')) {
-      addGroup('huggingface', 'Hugging Face', [...HF_MODELS])
+      addGroup('huggingface', 'huggingface', 'Hugging Face', [...HF_MODELS])
     }
     if (availableProviders.includes('local_openai')) {
-      addGroup('local_openai', 'LM Studio / Local', dynamicLocal)
+      addGroup('local_openai', 'local_openai', 'LM Studio / Local', dynamicLocal)
     }
     if (availableProviders.includes('ollama')) {
       const ollamaList = (dynamicOllamaModels && dynamicOllamaModels.length > 0)
@@ -305,16 +326,15 @@ export default function ModelSelectorPopover({
         : (internalOllamaModels.length > 0
             ? internalOllamaModels
             : (settingsConfig?.ollamaModel ? [settingsConfig.ollamaModel] : []))
-      addGroup('ollama', 'Ollama', ollamaList)
+      addGroup('ollama', 'ollama', 'Ollama', ollamaList)
     }
 
-    // Custom providers
     const customProviders: CustomProviderConfig[] = settingsConfig?.customProviders || []
     for (const cp of customProviders) {
       const pid = `custom:${cp.id}`
       if (availableProviders.includes(pid)) {
         const cModels = (cp.models || []).map((m: any) => m.modelId).filter(Boolean)
-        addGroup(pid, cp.displayName || cp.id, cModels)
+        addGroup(pid, pid, cp.displayName || cp.id, cModels, cp.logoDataUrl)
       }
     }
 
@@ -333,20 +353,20 @@ export default function ModelSelectorPopover({
     settingsConfig?.ollamaModel,
   ])
 
-  // ─── Filter Groups by Search Query ─────────────────────────────────────────
+  // Filter Groups by Search Query
   const filteredGroups = useMemo(() => {
     const q = search.trim().toLowerCase()
     if (!q) return providerGroups
 
     const results: ProviderGroup[] = []
-
     for (const group of providerGroups) {
-      const providerMatches = group.name.toLowerCase().includes(q) || group.id.toLowerCase().includes(q)
+      const providerMatches =
+        group.name.toLowerCase().includes(q) ||
+        group.id.toLowerCase().includes(q) ||
+        group.providerId.toLowerCase().includes(q)
       if (providerMatches) {
-        // Show all models in this provider
         results.push(group)
       } else {
-        // Filter models
         const matchedModels = group.models.filter((m) => m.toLowerCase().includes(q))
         if (matchedModels.length > 0) {
           results.push({
@@ -356,30 +376,104 @@ export default function ModelSelectorPopover({
         }
       }
     }
-
     return results
   }, [providerGroups, search])
 
-  // ─── Flattened Items for Keyboard Navigation ────────────────────────────────
+  // Automatically expand other models when searching, or manual toggle
+  const isOtherExpanded = Boolean(search.trim()) || expandOtherModels
+
+  // Flattened Items for Keyboard Navigation
   const flattenedItems = useMemo<FlattenedItem[]>(() => {
     const items: FlattenedItem[] = []
     for (const g of filteredGroups) {
+      if (g.id === 'openrouter-other' && !isOtherExpanded) {
+        continue
+      }
       for (const m of g.models) {
         items.push({
-          providerId: g.id,
+          providerId: g.providerId,
           providerName: g.name,
           model: m,
         })
       }
     }
     return items
-  }, [filteredGroups])
+  }, [filteredGroups, isOtherExpanded])
+
+  // Model currently inspected in the right detail pane
+  const [inspectedItem, setInspectedItem] = useState<{ providerId: string; model: string } | null>(null)
 
-  // Keep highlighted index in range
+  // Initialize or reset inspected item and collapsed state on open
+  useEffect(() => {
+    if (isOpen) {
+      if (activeModel) {
+        setInspectedItem({ providerId: activeProvider, model: activeModel })
+      } else if (flattenedItems.length > 0) {
+        setInspectedItem({ providerId: flattenedItems[0].providerId, model: flattenedItems[0].model })
+      }
+    } else {
+      setExpandOtherModels(false)
+    }
+  }, [isOpen, activeProvider, activeModel])
+
+  // Reset highlight on search
   useEffect(() => {
     setHighlightedIndex(0)
+    if (flattenedItems.length > 0) {
+      setInspectedItem({ providerId: flattenedItems[0].providerId, model: flattenedItems[0].model })
+    }
   }, [search])
 
+  // Helper to resolve a model's thinking status
+  const getThinkingConfig = useCallback((model: string, provider: string) => {
+    const meta = getModelMetadata(model, provider)
+    const override = modelThinkingOverrides[model]
+    if (override) {
+      return {
+        supported: meta.supportsThinking,
+        enabled: override.enabled ?? true,
+        effort: (override.effort || 'medium').toLowerCase(),
+      }
+    }
+    return {
+      supported: meta.supportsThinking,
+      enabled: meta.supportsThinking ? (settingsConfig?.thinkingEnabled ?? true) : false,
+      effort: (settingsConfig?.thinkingEffort || 'medium').toLowerCase(),
+    }
+  }, [modelThinkingOverrides, settingsConfig?.thinkingEnabled, settingsConfig?.thinkingEffort])
+
+  // Persist thinking change
+  const persistThinking = async (model: string, enabled: boolean, effort: string) => {
+    const updatedOverrides = {
+      ...modelThinkingOverrides,
+      [model]: { enabled, effort },
+    }
+    setModelThinkingOverrides(updatedOverrides)
+
+    const updatedConfig = {
+      ...(settingsConfig || {}),
+      modelThinkingConfigs: updatedOverrides,
+    }
+
+    if (model === activeModel) {
+      updatedConfig.thinkingEnabled = enabled
+      updatedConfig.thinkingEffort = effort
+    }
+
+    if (onUpdateSettings) {
+      onUpdateSettings(updatedConfig)
+    }
+
+    const api = (window as any).settingsApi
+    if (api?.saveSettings) {
+      try {
+        await api.saveSettings(updatedConfig)
+      } catch (err) {
+        console.error('Failed to save thinking config:', err)
+      }
+    }
+  }
+
   // Click Outside to Close
   useEffect(() => {
     if (!isOpen) return
@@ -404,8 +498,9 @@ export default function ModelSelectorPopover({
   useEffect(() => {
     if (isOpen) {
       setSearch('')
+      setMobilePane('models')
       setTimeout(() => {
-        searchInputRef.current?.focus()
+        if (!window.matchMedia('(max-width: 760px)').matches) searchInputRef.current?.focus()
       }, 50)
     }
   }, [isOpen])
@@ -421,41 +516,75 @@ export default function ModelSelectorPopover({
 
   // Keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isOpen) return
+    if (!isOpen || e.nativeEvent.isComposing) return
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+      triggerRef.current?.focus()
+      return
+    }
+    // Let tabs and thinking controls keep their own keyboard behavior.
+    if (mobilePane !== 'models' || e.target instanceof HTMLButtonElement) return
 
     if (e.key === 'ArrowDown') {
       e.preventDefault()
       if (flattenedItems.length === 0) return
-      setHighlightedIndex((prev) => (prev + 1) % flattenedItems.length)
+      const nextIdx = (highlightedIndex + 1) % flattenedItems.length
+      setHighlightedIndex(nextIdx)
+      setInspectedItem({ providerId: flattenedItems[nextIdx].providerId, model: flattenedItems[nextIdx].model })
     } else if (e.key === 'ArrowUp') {
       e.preventDefault()
       if (flattenedItems.length === 0) return
-      setHighlightedIndex((prev) => (prev - 1 + flattenedItems.length) % flattenedItems.length)
+      const nextIdx = (highlightedIndex - 1 + flattenedItems.length) % flattenedItems.length
+      setHighlightedIndex(nextIdx)
+      setInspectedItem({ providerId: flattenedItems[nextIdx].providerId, model: flattenedItems[nextIdx].model })
     } else if (e.key === 'Enter') {
       e.preventDefault()
       const item = flattenedItems[highlightedIndex]
       if (item) {
         onSelect(item.providerId, item.model)
         setIsOpen(false)
+        triggerRef.current?.focus()
       }
-    } else if (e.key === 'Escape') {
-      e.preventDefault()
-      setIsOpen(false)
-      triggerRef.current?.focus()
     }
   }
 
-  // Active item label for trigger pill
+  // Active item label & effort for trigger pill
   const activeModelDisplay = useMemo(() => {
     if (!activeModel) return 'Select Model'
     return activeModel.split('/').pop() || activeModel
   }, [activeModel])
 
+  const activeThinking = useMemo(() => {
+    return getThinkingConfig(activeModel, activeProvider)
+  }, [activeModel, activeProvider, getThinkingConfig])
+
+  // Inspected model details
+  const currentInspected = inspectedItem || (activeModel ? { providerId: activeProvider, model: activeModel } : null)
+  const inspectedMeta = useMemo(() => {
+    if (!currentInspected) return null
+    return getModelMetadata(currentInspected.model, currentInspected.providerId)
+  }, [currentInspected])
+
+  const inspectedThinking = useMemo(() => {
+    if (!currentInspected) return { supported: false, enabled: false, effort: 'medium' }
+    return getThinkingConfig(currentInspected.model, currentInspected.providerId)
+  }, [currentInspected, getThinkingConfig])
+
+  const inspectedBadges = useMemo(() => {
+    if (!currentInspected) return []
+    return getModelBadges(currentInspected.model)
+  }, [currentInspected])
+
+  const customLogoForProvider = (providerId: string) =>
+    (settingsConfig?.customProviders as CustomProviderConfig[] | undefined)
+      ?.find((provider) => `custom:${provider.id}` === providerId)?.logoDataUrl
+
   let itemCounter = 0
 
   return (
     <div className="model-selector-container">
-      {/* ─── Trigger Button ─── */}
+      {/* ─── Trigger Button in Chat Bar ─── */}
       <button
         ref={triggerRef}
         type="button"
@@ -467,9 +596,16 @@ export default function ModelSelectorPopover({
         aria-expanded={isOpen}
       >
         <span className="model-selector-trigger-icon">
-          <ProviderIcon provider={activeProvider} />
+          {customLogoForProvider(activeProvider)
+            ? <img className="provider-brand-logo" src={customLogoForProvider(activeProvider)} alt="" aria-hidden="true" />
+            : <ProviderIcon provider={activeProvider} />}
         </span>
         <span className="model-selector-trigger-name">{activeModelDisplay}</span>
+        {activeThinking.enabled && (
+          <span className="model-selector-trigger-effort">
+            {formatEffortDisplay(activeThinking.effort)}
+          </span>
+        )}
         <svg
           className={`model-selector-trigger-chevron ${isOpen ? 'open' : ''}`}
           width="11"
@@ -485,101 +621,289 @@ export default function ModelSelectorPopover({
         </svg>
       </button>
 
-      {/* ─── Spotlight Floating Popover ─── */}
+      {/* ─── Spotlight 2-Column Master-Detail Floating Popover ─── */}
       {isOpen && (
-        <div ref={popoverRef} className="model-spotlight-popover" onKeyDown={handleKeyDown}>
-          {/* Search Header */}
-          <div className="model-spotlight-search-bar">
-            <svg
-              className="search-icon"
-              width="13"
-              height="13"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
-            <input
-              ref={searchInputRef}
-              type="text"
-              className="model-spotlight-input"
-              placeholder="Search model or provider..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-            {search && (
-              <button
-                type="button"
-                className="search-clear-btn"
-                onClick={() => setSearch('')}
-                title="Clear search"
+        <div ref={popoverRef} className={`model-spotlight-popover mobile-pane-${mobilePane}`} onKeyDown={handleKeyDown}>
+          <div className="model-spotlight-mobile-tabs" role="tablist" aria-label="Model selector view">
+            <button type="button" role="tab" aria-selected={mobilePane === 'models'} onClick={() => setMobilePane('models')}>Models</button>
+            <button type="button" role="tab" aria-selected={mobilePane === 'options'} onClick={() => setMobilePane('options')}>Options</button>
+          </div>
+          {/* ─── Left Column: Model List ─── */}
+          <div className="model-spotlight-left-pane">
+            {/* Search Header */}
+            <div className="model-spotlight-search-bar">
+              <svg
+                className="search-icon"
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            )}
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                ref={searchInputRef}
+                type="text"
+                className="model-spotlight-input"
+                aria-label="Search models"
+                placeholder="Search models..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+              {search && (
+                <button
+                  type="button"
+                  className="search-clear-btn"
+                  onClick={() => setSearch('')}
+                  title="Clear search"
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              )}
+            </div>
+
+            {/* Grouped Model List */}
+            <div ref={listRef} className="model-spotlight-list" role="listbox">
+              {filteredGroups.length === 0 ? (
+                <div className="model-spotlight-empty">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="11" cy="11" r="8" />
+                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                  </svg>
+                  <span>No models found matching &quot;{search}&quot;</span>
+                </div>
+              ) : (
+                filteredGroups.map((group) => {
+                  const isOtherGroup = group.id === 'openrouter-other'
+                  const isCollapsed = isOtherGroup && !isOtherExpanded
+
+                  return (
+                    <div key={group.id} className="model-spotlight-group">
+                      <div className="model-spotlight-group-header">
+                        <span className="group-header-icon">{group.icon}</span>
+                        <span className="group-header-title">{group.name}</span>
+                      </div>
+
+                      {isCollapsed ? (
+                        <div className="model-spotlight-see-more-wrap">
+                          <button
+                            type="button"
+                            className="model-spotlight-see-more-btn"
+                            onClick={() => setExpandOtherModels(true)}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                              <polyline points="6 9 12 15 18 9" />
+                            </svg>
+                            <span>Show all {group.models.length} other models</span>
+                          </button>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="model-spotlight-group-items">
+                            {group.models.map((m) => {
+                              const currentIndex = itemCounter++
+                              const isSelected = activeProvider === group.providerId && activeModel === m
+                              const isInspected = currentInspected?.model === m && currentInspected?.providerId === group.providerId
+                              const itemThinking = getThinkingConfig(m, group.providerId)
+
+                              return (
+                                <div
+                                  key={m}
+                                  data-item-index={currentIndex}
+                                  className={`model-spotlight-item ${isSelected ? 'is-active' : ''} ${isInspected ? 'is-inspected' : ''}`}
+                                  onClick={() => {
+                                    setInspectedItem({ providerId: group.providerId, model: m })
+                                    onSelect(group.providerId, m)
+                                    setIsOpen(false)
+                                    triggerRef.current?.focus()
+                                  }}
+                                  onMouseEnter={() => {
+                                    setHighlightedIndex(currentIndex)
+                                    setInspectedItem({ providerId: group.providerId, model: m })
+                                  }}
+                                  role="option"
+                                  aria-selected={isSelected}
+                                >
+                                  <div className="model-item-left">
+                                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+                                      <span className="model-item-provider-icon" aria-hidden="true">
+                                        {group.icon}
+                                      </span>
+                                      <span className="model-item-name">{m.split('/').pop() || m}</span>
+                                      {isFreeModel(m) && (
+                                        <span className="model-tag-badge badge-free">Free</span>
+                                      )}
+                                    </div>
+                                    {m.includes('/') && <span className="model-item-repo">{m}</span>}
+                                  </div>
+
+                                  <div className="model-item-right">
+                                    {itemThinking.enabled && (
+                                      <span className="model-item-effort-pill">
+                                        {formatEffortDisplay(itemThinking.effort)}
+                                      </span>
+                                    )}
+
+                                    {isSelected && (
+                                      <svg
+                                        className="model-item-check"
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="var(--accent, #10b981)"
+                                        strokeWidth="2.5"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                      >
+                                        <polyline points="20 6 9 17 4 12" />
+                                      </svg>
+                                    )}
+                                  </div>
+                                </div>
+                              )
+                            })}
+                          </div>
+
+                          {isOtherGroup && !search.trim() && (
+                            <div className="model-spotlight-see-more-wrap" style={{ marginTop: '4px' }}>
+                              <button
+                                type="button"
+                                className="model-spotlight-see-more-btn collapse-btn"
+                                onClick={() => setExpandOtherModels(false)}
+                              >
+                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                                  <polyline points="18 15 12 9 6 15" />
+                                </svg>
+                                <span>Collapse other models</span>
+                              </button>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  )
+                })
+              )}
+            </div>
           </div>
 
-          {/* Grouped Model List */}
-          <div ref={listRef} className="model-spotlight-list" role="listbox">
-            {filteredGroups.length === 0 ? (
-              <div className="model-spotlight-empty">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <circle cx="11" cy="11" r="8" />
-                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
-                </svg>
-                <span>No models found matching &quot;{search}&quot;</span>
-              </div>
-            ) : (
-              filteredGroups.map((group) => (
-                <div key={group.id} className="model-spotlight-group">
-                  <div className="model-spotlight-group-header">
-                    <span className="group-header-icon">{group.icon}</span>
-                    <span className="group-header-title">{group.name}</span>
+          {/* ─── Right Column: Model Detail & Thinking Controls ─── */}
+          <div className="model-spotlight-right-pane">
+            {currentInspected && inspectedMeta ? (
+              <div className="model-detail-container">
+                {/* Header: Icon + Name */}
+                <div className="model-detail-header">
+                  <div className="model-detail-icon">
+                    {customLogoForProvider(currentInspected.providerId)
+                      ? <img className="provider-brand-logo" src={customLogoForProvider(currentInspected.providerId)} alt="" aria-hidden="true" />
+                      : <ProviderIcon provider={currentInspected.providerId} />}
+                  </div>
+                  <div className="model-detail-title-wrap">
+                    <span className="model-detail-title">{currentInspected.model.split('/').pop() || currentInspected.model}</span>
+                    {currentInspected.model.includes('/') && (
+                      <span className="model-detail-subtitle">{currentInspected.model}</span>
+                    )}
                   </div>
+                </div>
 
-                  <div className="model-spotlight-group-items">
-                    {group.models.map((m) => {
-                      const currentIndex = itemCounter++
-                      const isSelected = activeProvider === group.id && activeModel === m
-                      const isHighlighted = highlightedIndex === currentIndex
-                      const badges = getModelBadges(m)
-
-                      return (
-                        <div
-                          key={m}
-                          data-item-index={currentIndex}
-                          className={`model-spotlight-item ${isSelected ? 'is-active' : ''} ${isHighlighted ? 'is-highlighted' : ''}`}
-                          onClick={() => {
-                            onSelect(group.id, m)
-                            setIsOpen(false)
-                          }}
-                          onMouseEnter={() => setHighlightedIndex(currentIndex)}
-                          role="option"
-                          aria-selected={isSelected}
-                        >
-                          <div className="model-item-left">
-                            <span className="model-item-name">{m.split('/').pop() || m}</span>
-                            {m.includes('/') && <span className="model-item-repo">{m}</span>}
-                          </div>
+                {/* Description */}
+                <p className="model-detail-description">
+                  {inspectedMeta.description}
+                </p>
+
+                {/* Badges / Capabilities */}
+                <div className="model-detail-tags">
+                  <span className="model-detail-context-badge">
+                    {inspectedMeta.contextWindow}
+                  </span>
+                  {inspectedBadges.map((b) => (
+                    <ModelBadge key={b.type} type={b.type} label={b.label} />
+                  ))}
+                </div>
 
-                          <div className="model-item-right">
-                            <div className="model-item-badges">
-                              {badges.map((b) => (
-                                <ModelBadge key={b.type} type={b.type} label={b.label} />
-                              ))}
-                            </div>
+                {/* Divider */}
+                <div className="model-detail-divider" />
+
+                {/* Options Section */}
+                <div className="model-detail-section-title">Options</div>
+                <div className="model-detail-option-row">
+                  <div className="option-row-left">
+                    <svg
+                      width="15"
+                      height="15"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="option-icon"
+                    >
+                      <path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z" />
+                      <path d="M9 21h6" />
+                    </svg>
+                    <span className="option-label">Thinking</span>
+                  </div>
+
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={inspectedThinking.enabled}
+                    className={`model-detail-switch ${inspectedThinking.enabled ? 'checked' : ''}`}
+                    onClick={() => {
+                      persistThinking(
+                        currentInspected.model,
+                        !inspectedThinking.enabled,
+                        inspectedThinking.effort
+                      )
+                    }}
+                    title={
+                      inspectedThinking.enabled
+                        ? 'Disable thinking'
+                        : 'Enable thinking'
+                    }
+                  >
+                    <span className="model-detail-switch-thumb" />
+                  </button>
+                </div>
 
-                            {isSelected && (
+                {!inspectedThinking.supported && (
+                  <div className="model-unsupported-note" style={{ color: inspectedThinking.enabled ? 'var(--interactive-fg)' : undefined }}>
+                    {inspectedThinking.enabled
+                      ? 'Thinking enabled (force toggle)'
+                      : 'Not flagged as reasoning model by default (toggle to force enable)'}
+                  </div>
+                )}
+
+                {/* Effort Section (visible when Thinking is ON) */}
+                {inspectedThinking.enabled && (
+                  <div className="model-effort-section">
+                    <div className="model-detail-section-title">Effort</div>
+                    <div className="model-effort-list">
+                      {Effort_LEVELS.map((level) => {
+                        const isCurrent = inspectedThinking.effort === level.id
+                        return (
+                          <button
+                            key={level.id}
+                            type="button"
+                            className={`model-effort-item ${isCurrent ? 'is-selected' : ''}`}
+                            onClick={() => {
+                              persistThinking(currentInspected.model, true, level.id)
+                            }}
+                          >
+                            <span className="effort-item-label">{level.label}</span>
+                            {isCurrent && (
                               <svg
-                                className="model-item-check"
+                                className="effort-item-check"
                                 width="14"
                                 height="14"
                                 viewBox="0 0 24 24"
@@ -592,13 +916,17 @@ export default function ModelSelectorPopover({
                                 <polyline points="20 6 9 17 4 12" />
                               </svg>
                             )}
-                          </div>
-                        </div>
-                      )
-                    })}
+                          </button>
+                        )
+                      })}
+                    </div>
                   </div>
-                </div>
-              ))
+                )}
+              </div>
+            ) : (
+              <div className="model-detail-empty">
+                <span>Select a model to view options</span>
+              </div>
             )}
           </div>
         </div>