llms-py 2.0.35__py3-none-any.whl → 3.0.0b1__py3-none-any.whl

llms/ui/ModelSelector.mjs

@@ -1,42 +1,316 @@
-import { ref, onMounted, onUnmounted } from "vue"
+import { ref, computed, watch, onMounted, onUnmounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
 import ProviderStatus from "./ProviderStatus.mjs"
 import ProviderIcon from "./ProviderIcon.mjs"
 
+const SORT_OPTIONS = [
+    { id: 'name', label: 'Name' },
+    { id: 'knowledge', label: 'Knowledge Cutoff' },
+    { id: 'release_date', label: 'Release Date' },
+    { id: 'last_updated', label: 'Last Updated' },
+    { id: 'cost_input', label: 'Cost (Input)' },
+    { id: 'cost_output', label: 'Cost (Output)' },
+    { id: 'context', label: 'Context Limit' },
+]
+
+const MODALITY_ICONS = {
+    text: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4,7 4,4 20,4 20,7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>`,
+    image: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>`,
+    audio: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="m19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>`,
+    video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"></path><rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect></svg>`,
+    pdf: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14,2 14,8 20,8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10,9 9,9 8,9"></polyline></svg>`,
+}
+
+const STORAGE_KEY = 'llms.modelSelector'
+const FAVORITES_KEY = 'llms.favorites'
+
+function loadPrefs() {
+    try {
+        return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {}
+    } catch {
+        return {}
+    }
+}
+
+function savePrefs(prefs) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
+}
+
 export default {
     components: {
         ProviderStatus,
         ProviderIcon,
     },
-    template:`
-        <!-- Model Selector -->
+    template: `
+        <!-- Model Selector Button -->
         <div class="pl-1 flex space-x-2">
-            <Autocomplete ref="refSelector" id="model" :options="models" label=""
-                :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
-                class="w-72 xl:w-84"
-                :match="(x, value) => x.id.toLowerCase().includes(value.toLowerCase())"
-                placeholder="Select Model...">
-                <template #item="{ id, provider, provider_model, pricing }">
-                    <div :key="id + provider + provider_model" 
-                        class="group truncate max-w-68 xl:max-w-72 flex justify-between">
-                        <span :title="id">{{id}}</span>
-                        <div class="hidden md:flex items-center space-x-1">
-                            <span v-if="pricing && (parseFloat(pricing.input) == 0 && parseFloat(pricing.input) == 0)">
-                                <span class="text-xs text-gray-500 dark:text-gray-400" title="Free to use">FREE</span>
-                            </span>
-                            <span v-else-if="pricing" class="text-xs text-gray-500 dark:text-gray-400"
-                                :title="'Estimated Cost per token: ' + pricing.input + ' input | ' + pricing.output + ' output'">
-                              {{tokenPrice(pricing.input)}}
-                              &#183;
-                              {{tokenPrice(pricing.output)}} M
-                            </span>
-                            <span class="min-w-6" :title="provider_model + ' from ' + provider">
-                                <ProviderIcon class="hidden xl:inline" :provider="provider" />
+            <button type="button" @click="openDialog"
+                class="flex items-center space-x-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 transition-colors min-w-48 max-w-96"
+                @mouseenter="showTooltip = true"
+                @mouseleave="showTooltip = false">
+                <ProviderIcon v-if="selectedModelObj?.provider" :provider="selectedModelObj.provider" class="size-5 flex-shrink-0" />
+                <span class="truncate flex-1 text-left">{{ selectedModelObj?.name || 'Select Model...' }}</span>
+                <svg class="size-4 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+                </svg>
+            </button>
+
+            <!-- Info Tooltip (on hover) -->
+            <div v-if="showTooltip && selectedModelObj" 
+                class="absolute z-50 mt-12 ml-0 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-sm w-72">
+                <div class="font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ selectedModelObj.name }}</div>
+                <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">{{ selectedModelObj.provider }}</div>
+                
+                <div v-if="selectedModelObj.cost" class="mb-2">
+                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Cost per 1M tokens:</div>
+                    <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
+                        Input: {{ formatCost(selectedModelObj.cost.input) }} · Output: {{ formatCost(selectedModelObj.cost.output) }}
+                    </div>
+                </div>
+                
+                <div v-if="selectedModelObj.limit" class="mb-2">
+                    <div class="text-xs font-medium text-gray-700 dark:text-gray-300">Limits:</div>
+                    <div class="text-xs text-gray-600 dark:text-gray-400 ml-2">
+                        Context: {{ formatNumber(selectedModelObj.limit.context) }} · Output: {{ formatNumber(selectedModelObj.limit.output) }}
+                    </div>
+                </div>
+                
+                <div v-if="selectedModelObj.knowledge" class="text-xs text-gray-600 dark:text-gray-400">
+                    Knowledge: {{ selectedModelObj.knowledge }}
+                </div>
+                
+                <div class="flex flex-wrap gap-1 mt-2">
+                    <span v-if="selectedModelObj.reasoning" class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">reasoning</span>
+                    <span v-if="selectedModelObj.tool_call" class="px-1.5 py-0.5 text-xs rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">tools</span>
+                    
+                    <!-- Modality Icons -->
+                    <span v-for="mod in getModelModalities(selectedModelObj)" :key="mod" 
+                        class="inline-flex items-center justify-center p-0.5 text-gray-400 dark:text-gray-500"
+                        :title="mod"
+                        v-html="modalityIcons[mod]">
+                    </span>
+                </div>
+            </div>
+
+            <ProviderStatus @updated="$emit('updated', $event)" />
+        </div>
+
+        <!-- Dialog Overlay -->
+        <div v-if="isOpen" class="fixed inset-0 z-50 overflow-hidden" @keydown.escape="closeDialog">
+            <!-- Backdrop -->
+            <div class="fixed inset-0 bg-black/50 transition-opacity" @click="closeDialog"></div>
+            
+            <!-- Dialog -->
+            <div class="fixed inset-4 md:inset-8 lg:inset-12 flex items-center justify-center">
+                <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full h-full max-w-6xl max-h-[90vh] flex flex-col overflow-hidden">
+                    <!-- Header -->
+                    <div class="flex-shrink-0 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Select Model</h2>
+                            <button type="button" @click="closeDialog" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+                                <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/>
+                                </svg>
+                            </button>
+                        </div>
+                        
+                        <!-- Search and Controls -->
+                        <div class="flex flex-col md:flex-row gap-3">
+                            <!-- Search -->
+                            <div class="flex-1 relative">
+                                <svg class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                                </svg>
+                                <input type="text" v-model="searchQuery" ref="searchInput"
+                                    placeholder="Search models..."
+                                    class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm" />
+                            </div>
+
+                            <!-- Modality Filters -->
+                            <div class="flex items-center space-x-1">
+                                <button v-for="(icon, type) in modalityIcons" :key="type" type="button"
+                                    @click="toggleModality(type)"
+                                    :title="type"
+                                    :class="[
+                                        'p-2 rounded-lg transition-colors border',
+                                        selectedModalities.has(type)
+                                            ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800'
+                                            : 'bg-white dark:bg-gray-800 text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-200'
+                                    ]"
+                                    v-html="icon">
+                                </button>
+                            </div>
+                            
+                            <!-- Sort -->
+                            <div class="flex items-center space-x-2">
+                                <label class="text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">Sort by:</label>
+                                <select v-model="sortBy" 
+                                    class="px-3 py-2 pr-8 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[200px]">
+                                    <option v-for="opt in sortOptions" :key="opt.id" :value="opt.id">{{ opt.label }}</option>
+                                </select>
+                                <button type="button" @click="toggleSortDirection" 
+                                    class="p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                                    :title="sortAsc ? 'Ascending' : 'Descending'">
+                                    <svg v-if="sortAsc" class="size-5 text-gray-600 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                        <path fill="currentColor" d="M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z"/>
+                                    </svg>
+                                    <svg v-else class="size-5 text-gray-600 dark:text-gray-400" style="transform: scaleY(-1)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                        <path fill="currentColor" d="M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <!-- Provider Filter -->
+                        <div class="mt-3 flex flex-wrap gap-2">
+                             <button type="button" 
+                                @click="activeTab = 'favorites'"
+                                :class="[
+                                    'flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                                    activeTab === 'favorites'
+                                        ? 'bg-yellow-500 text-white'
+                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                                ]">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+                                    <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Favorites</span>
+                                <span v-if="favorites.length > 0" class="ml-1 opacity-75">({{ favorites.length }})</span>
+                            </button>
+                            <div class="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1 self-center"></div>
+                            <button type="button" 
+                                @click="setActiveTab('browse', null)"
+                                :class="[
+                                    'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                                    activeTab === 'browse' && selectedProviders.size === 0
+                                        ? 'bg-blue-600 text-white'
+                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                                ]">
+                                All
+                            </button>
+                            <button v-for="provider in uniqueProviders" :key="provider"
+                                type="button"
+                                @click="setActiveTab('browse', provider)"
+                                :class="[
+                                    'flex items-center space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                                    activeTab === 'browse' && selectedProviders.has(provider)
+                                        ? 'bg-blue-600 text-white'
+                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                                ]">
+                                <ProviderIcon :provider="provider" class="size-4" />
+                                <span>{{ provider }}</span>
+                                <span class="opacity-60">({{ providerCounts[provider] }})</span>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Model List -->
+                    <div class="flex-1 overflow-y-auto p-4">
+                        <div v-if="filteredModels.length === 0 && !hasUnavailableFavorites" class="text-center py-12 text-gray-500 dark:text-gray-400">
+                            No models found matching your criteria.
+                        </div>
+                        <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+                            <button v-for="model in filteredModels" :key="model.id + '-' + model.provider"
+                                type="button"
+                                @click="selectModel(model)"
+                                :class="[
+                                    'relative text-left p-4 rounded-lg border transition-all group',
+                                    modelValue === model.name
+                                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 ring-2 ring-blue-500/50'
+                                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                                ]">
+                                <!-- Favorite Star -->
+                                <div @click.stop="toggleFavorite(model)" 
+                                    class="absolute top-2 right-2 p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors z-10 cursor-pointer"
+                                    :title="isFavorite(model) ? 'Remove from favorites' : 'Add to favorites'">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" 
+                                        :class="['size-4 transition-colors', isFavorite(model) ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600 group-hover:text-gray-400 dark:group-hover:text-gray-500']">
+                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+
+                                <div class="flex items-start justify-between mb-2 pr-6">
+                                    <div class="flex items-center space-x-2 min-w-0">
+                                        <ProviderIcon :provider="model.provider" class="size-5 flex-shrink-0" />
+                                        <span class="font-medium text-gray-900 dark:text-gray-100 truncate">{{ model.name }}</span>
+                                    </div>
+                                    <div v-if="isFreeModel(model)" class="flex-shrink-0 ml-2">
+                                        <span class="px-1.5 py-0.5 text-xs font-semibold rounded bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300">FREE</span>
+                                    </div>
+                                </div>
+                                
+                                <div class="text-xs text-gray-500 dark:text-gray-400 mb-2 truncate" :title="model.id">{{ model.id }}</div>
+                                
+                                <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
+                                    <span v-if="model.cost && !isFreeModel(model)" :title="'Input: ' + model.cost.input + ' / Output: ' + model.cost.output + ' per 1M tokens'">
+                                        💰 {{ formatCost(model.cost.input) }} / {{ formatCost(model.cost.output) }}
+                                    </span>
+                                    <span v-if="model.limit?.context" :title="'Context window: ' + formatNumber(model.limit.context) + ' tokens'">
+                                        📏 {{ formatShortNumber(model.limit.context) }}
+                                    </span>
+                                    <span v-if="model.knowledge" :title="'Knowledge cutoff: ' + model.knowledge">
+                                        📅 {{ model.knowledge }}
+                                    </span>
+                                </div>
+                                
+                                <div class="flex flex-wrap gap-1 mt-2">
+                                    <span v-if="model.reasoning" class="px-1.5 py-0.5 text-xs rounded bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300">reasoning</span>
+                                    <span v-if="model.tool_call" class="px-1.5 py-0.5 text-xs rounded bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">tools</span>
+                                    
+                                    <!-- Modality Icons -->
+                                    <span v-for="mod in getModelModalities(model)" :key="mod" 
+                                        class="inline-flex items-center justify-center p-0.5 text-gray-400 dark:text-gray-500"
+                                        :title="mod"
+                                        v-html="modalityIcons[mod]">
+                                    </span>
+                                </div>
+                            </button>
+                        </div>
+
+
+                        <!-- Unavailable Favorites -->
+                        <div v-if="activeTab === 'favorites' && unavailableFavorites.length > 0" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+                             <div class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3 ml-1">Unavailable</div>
+                             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3 opacity-60 grayscale">
+                                <div v-for="model in unavailableFavorites" :key="model.id"
+                                    class="relative text-left p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 cursor-not-allowed">
+                                    
+                                    <!-- Remove from favorites button -->
+                                    <div @click.stop="toggleFavorite(model)" 
+                                        class="absolute top-2 right-2 p-1.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors z-10 cursor-pointer"
+                                        title="Remove from favorites">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4 text-yellow-400">
+                                            <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+
+                                    <div class="flex items-start justify-between mb-2 pr-6">
+                                        <div class="flex items-center space-x-2 min-w-0">
+                                            <ProviderIcon v-if="model.provider" :provider="model.provider" class="size-5 flex-shrink-0" />
+                                            <span class="font-medium text-gray-900 dark:text-gray-100 truncate">{{ model.name || model.id }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ model.id }}</div>
+                                    <div class="mt-2 text-xs italic text-gray-400">Provider unavailable</div>
+                                </div>
+                             </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Footer -->
+                    <div class="flex-shrink-0 px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">
+                                {{ filteredModels.length }} of {{ models.length }} models
                             </span>
+                            <button type="button" @click="closeDialog"
+                                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
+                                Close
+                            </button>
                         </div>
                     </div>
-                </template>
-            </Autocomplete>
-            <ProviderStatus @updated="$emit('updated', $event)" />
+                </div>
+            </div>
         </div>
     `,
     emits: ['updated', 'update:modelValue'],
@@ -44,35 +318,376 @@ export default {
         models: Array,
         modelValue: String,
     },
-    setup() {
-
-        const numFmt = new Intl.NumberFormat(undefined,{style:'currency',currency:'USD'})
-        
-        function tokenPrice(price) {
-            if (!price) return ''
-            var ret = numFmt.format(parseFloat(price) * 1_000_000)
-            return ret.endsWith('.00') ? ret.slice(0, -3) : ret
-        }
-
-        const refSelector = ref()
-    
-        function collapse(e) {
-            // call toggle when clicking outside of the Autocomplete component
-            if (refSelector.value && !refSelector.value.$el.contains(e.target)) {
-                refSelector.value.toggle(false)
+    setup(props, { emit }) {
+        const router = useRouter()
+        const route = useRoute()
+
+        const isOpen = ref(false)
+        const showTooltip = ref(false)
+        const searchQuery = ref('')
+        const searchInput = ref(null)
+
+        // Load preferences
+        const prefs = loadPrefs()
+        const sortBy = ref(prefs.sortBy || 'name')
+        const sortAsc = ref(prefs.sortAsc !== false)
+        const selectedProviders = ref(new Set())
+        const selectedModalities = ref(new Set())
+        const modalityIcons = MODALITY_ICONS
+
+        // Favorites State
+        const favorites = ref([])
+        try {
+            favorites.value = JSON.parse(localStorage.getItem(FAVORITES_KEY)) || []
+        } catch {
+            favorites.value = []
+        }
+
+        const activeTab = ref(favorites.value.length > 0 ? 'favorites' : 'browse')
+
+        const sortOptions = SORT_OPTIONS
+
+        // Get selected model object
+        const selectedModelObj = computed(() => {
+            if (!props.modelValue || !props.models) return null
+            return props.models.find(m => m.name === props.modelValue) || props.models.find(m => m.id === props.modelValue)
+        })
+
+        // Get unique providers
+        const uniqueProviders = computed(() => {
+            if (!props.models) return []
+            const providers = [...new Set(props.models.map(m => m.provider))].filter(Boolean)
+            return providers.sort()
+        })
+
+        // Provider counts
+        const providerCounts = computed(() => {
+            if (!props.models) return {}
+            const counts = {}
+            props.models.forEach(m => {
+                if (m.provider) {
+                    counts[m.provider] = (counts[m.provider] || 0) + 1
+                }
+            })
+            return counts
+        })
+
+        // Filter and sort helpers
+        function getModelKey(model) {
+            return `${model.provider}:${model.id}`
+        }
+
+        function isFavorite(model) {
+            const key = getModelKey(model)
+            return favorites.value.includes(key)
+        }
+
+        // Unavailable favorites (provider disabled or model removed)
+        const unavailableFavorites = computed(() => {
+            if (!props.models) return []
+            const availableKeys = new Set(props.models.map(getModelKey))
+            const missingKeys = favorites.value.filter(key => !availableKeys.has(key))
+
+            return missingKeys.map(key => {
+                const [provider, ...idParts] = key.split(':')
+                const id = idParts.join(':')
+                return {
+                    id,
+                    provider,
+                    name: id // Fallback
+                }
+            })
+        })
+
+        const hasUnavailableFavorites = computed(() => unavailableFavorites.value.length > 0)
+
+        // Filter and sort models
+        const filteredModels = computed(() => {
+            if (!props.models) return []
+
+            let result = [...props.models]
+
+            // Filter by Tab
+            if (activeTab.value === 'favorites') {
+                result = result.filter(isFavorite)
+            } else {
+                // Browse Tab - Filter by provider
+                if (selectedProviders.value.size > 0) {
+                    result = result.filter(m => selectedProviders.value.has(m.provider))
+                }
+            }
+
+            // Filter by Modalities (AND logic)
+            if (selectedModalities.value.size > 0) {
+                result = result.filter(m => {
+                    const mods = m.modalities || {}
+                    const inputMods = mods.input || []
+                    const outputMods = mods.output || []
+
+                    for (const requiredMod of selectedModalities.value) {
+                        if (requiredMod === 'audio') {
+                            if (!inputMods.includes('audio') && !outputMods.includes('audio')) return false
+                        } else if (requiredMod === 'pdf') {
+                            if (!inputMods.includes('pdf')) return false
+                        } else {
+                            // text, image, video mostly in input (though video could be output too, but prompt implies input/output caps)
+                            // The user prompt says "input/output modalities", but usually we filter by what the model supports generally.
+                            // Let's check both for robust matching if strict input/output isn't specified for that type, 
+                            // but based on typical llms.json:
+                            // text: input/output
+                            // image: input (vision) / output (generation)
+                            // video: input
+                            // let's check input for everything except where we know otherwise
+
+                            const inIn = inputMods.includes(requiredMod)
+                            const inOut = outputMods.includes(requiredMod)
+                            if (!inIn && !inOut) return false
+                        }
+                    }
+                    return true
+                })
+            }
+
+            // Filter by search query
+            if (searchQuery.value.trim()) {
+                const query = searchQuery.value.toLowerCase()
+                result = result.filter(m =>
+                    m.name?.toLowerCase().includes(query) ||
+                    m.id?.toLowerCase().includes(query) ||
+                    m.provider?.toLowerCase().includes(query)
+                )
+            }
+
+            // Sort
+            result.sort((a, b) => {
+                let cmp = 0
+                switch (sortBy.value) {
+                    case 'name':
+                        cmp = (a.name || '').localeCompare(b.name || '')
+                        break
+                    case 'knowledge':
+                        cmp = (a.knowledge || '').localeCompare(b.knowledge || '')
+                        break
+                    case 'release_date':
+                        cmp = (a.release_date || '').localeCompare(b.release_date || '')
+                        break
+                    case 'last_updated':
+                        cmp = (a.last_updated || '').localeCompare(b.last_updated || '')
+                        break
+                    case 'cost_input':
+                        cmp = (parseFloat(a.cost?.input) || 0) - (parseFloat(b.cost?.input) || 0)
+                        break
+                    case 'cost_output':
+                        cmp = (parseFloat(a.cost?.output) || 0) - (parseFloat(b.cost?.output) || 0)
+                        break
+                    case 'context':
+                        cmp = (a.limit?.context || 0) - (b.limit?.context || 0)
+                        break
+                    default:
+                        cmp = 0
+                }
+                return sortAsc.value ? cmp : -cmp
+            })
+
+            return result
+        })
+
+        // Formatting helpers
+        const numFmt = new Intl.NumberFormat()
+        const currFmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+
+        function formatCost(cost) {
+            if (cost == null) return '-'
+            const val = parseFloat(cost)
+            if (val === 0) return 'Free'
+            return currFmt.format(val)
+        }
+
+        function formatNumber(num) {
+            if (num == null) return '-'
+            return numFmt.format(num)
+        }
+
+        function formatShortNumber(num) {
+            if (num == null) return '-'
+            if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
+            if (num >= 1000) return (num / 1000).toFixed(0) + 'K'
+            return numFmt.format(num)
+        }
+
+        function isFreeModel(model) {
+            return model.cost && parseFloat(model.cost.input) === 0 && parseFloat(model.cost.output) === 0
+        }
+
+        function getModelModalities(model) {
+            const mods = new Set()
+            const input = model.modalities?.input || []
+            const output = model.modalities?.output || []
+
+            // Collect all modalities
+            input.forEach(m => mods.add(m))
+            output.forEach(m => mods.add(m))
+
+            // Filter out text and ensure we only show known icons
+            const allowed = ['image', 'audio', 'video', 'pdf']
+            return Array.from(mods).filter(m => m !== 'text' && allowed.includes(m)).sort()
+        }
+
+        // Actions
+        function openDialog() {
+            isOpen.value = true
+            searchQuery.value = ''
+            setTimeout(() => {
+                searchInput.value?.focus()
+            }, 100)
+        }
+
+        function closeDialog() {
+            isOpen.value = false
+        }
+
+        function selectModel(model) {
+            emit('update:modelValue', model.name)
+            closeDialog()
+        }
+
+        function setActiveTab(tab, provider) {
+            activeTab.value = tab
+            if (tab === 'browse') {
+                toggleProvider(provider)
             }
         }
 
+        function toggleProvider(provider) {
+            if (provider === null) {
+                selectedProviders.value = new Set()
+            } else {
+                // Exclusive filter: if clicking a new provider, clear others.
+                // If clicking the currently selected one, toggle it off.
+                const newSet = new Set()
+                if (!selectedProviders.value.has(provider)) {
+                    newSet.add(provider)
+                }
+                selectedProviders.value = newSet
+            }
+        }
+
+        function toggleModality(modality) {
+            const newSet = new Set(selectedModalities.value)
+            if (newSet.has(modality)) {
+                newSet.delete(modality)
+            } else {
+                newSet.add(modality)
+            }
+            selectedModalities.value = newSet
+        }
+
+        function toggleFavorite(model) {
+            const key = getModelKey(model)
+            const idx = favorites.value.indexOf(key)
+            if (idx === -1) {
+                favorites.value.push(key)
+            } else {
+                favorites.value.splice(idx, 1)
+            }
+            saveFavorites()
+        }
+
+        function saveFavorites() {
+            localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites.value))
+        }
+
+        function toggleSortDirection() {
+            sortAsc.value = !sortAsc.value
+        }
+
+        // Save preferences when sort changes
+        watch([sortBy, sortAsc], () => {
+            savePrefs({
+                sortBy: sortBy.value,
+                sortAsc: sortAsc.value
+            })
+        })
+
+        // Handle escape key
+        function handleKeydown(e) {
+            if (e.key === 'Escape' && isOpen.value) {
+                closeDialog()
+            }
+        }
+
+        // Deep link logic with Vue Router
         onMounted(() => {
-            document.addEventListener('click', collapse)
+            document.addEventListener('keydown', handleKeydown)
+
+            // Initial check
+            if (route.query.show === 'models') {
+                isOpen.value = true
+            }
+        })
+
+        // Watch route to open/close
+        watch(() => route.query.show, (newVal) => {
+            if (newVal === 'models') {
+                isOpen.value = true
+            } else if (isOpen.value) {
+                isOpen.value = false
+            }
         })
+
+        // Sync state to URL
+        watch(isOpen, (newVal) => {
+            if (newVal) {
+                if (route.query.show !== 'models') {
+                    router.push({ query: { ...route.query, show: 'models' } })
+                }
+            } else {
+                if (route.query.show === 'models') {
+                    const newQuery = { ...route.query }
+                    delete newQuery.show
+                    router.push({ query: newQuery })
+                }
+            }
+        })
+
         onUnmounted(() => {
-            document.removeEventListener('click', collapse)
+            document.removeEventListener('keydown', handleKeydown)
         })
 
         return {
-            refSelector,
-            tokenPrice,
+            isOpen,
+            showTooltip,
+            searchQuery,
+            searchInput,
+            sortBy,
+            sortAsc,
+            sortOptions,
+            selectedProviders,
+            selectedModelObj,
+            uniqueProviders,
+            providerCounts,
+            filteredModels,
+            formatCost,
+            formatNumber,
+            formatShortNumber,
+            isFreeModel,
+
+            openDialog,
+            closeDialog,
+            selectModel,
+            toggleProvider,
+            toggleSortDirection,
+            favorites,
+            activeTab,
+            setActiveTab,
+            toggleFavorite,
+            isFavorite,
+            unavailableFavorites,
+            hasUnavailableFavorites,
+            modalityIcons,
+            selectedModalities,
+            toggleModality,
+            getModelModalities,
         }
     }
 }