chore: update version to 0.0.9 and add new dependencies

README.md

@@ -129,7 +129,7 @@ Enter your OpenRouter API key in the Settings tab.
 
 ### Updates
 - The app checks for updates on startup.
-- Click the version button in the header (e.g. `v0.0.8`) to view update status, release notes, or manually re-check.
+- Click the version button in the header (e.g. `v0.0.9`) to view update status, release notes, or manually re-check.
 - Updates are pulled from GitHub Releases and expect a `Benchmaker-Portable.exe` asset on the latest tag.
 
 ## Development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "benchmaker",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,11 +11,11 @@
     "tauri:build": "tauri build"
   },
   "dependencies": {
-    "@tauri-apps/api": "^1.6.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -25,6 +25,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
+    "@tauri-apps/api": "^1.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -34,9 +35,9 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.6.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
+    "@tauri-apps/cli": "^1.6.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "benchmaker"
-version = "0.0.8"
+version = "0.0.9"
 description = "Benchmaker"
 authors = ["you"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Benchmaker",
-    "version": "0.0.8"
+    "version": "0.0.9"
   },
   "tauri": {
     "allowlist": {

src/components/arena/ModelSelector.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import { Search, Loader2, X } from 'lucide-react'
+import { Search, Loader2, X, SlidersHorizontal, Filter } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -8,6 +8,25 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { Checkbox } from '@/components/ui/checkbox'
 import { useModelStore } from '@/stores/modelStore'
 
+type PriceRange = 'all' | 'free' | 'cheap' | 'medium' | 'expensive'
+type ContextRange = 'all' | '8k+' | '32k+' | '128k+' | '200k+'
+
+const PRICE_RANGES: { value: PriceRange; label: string; max?: number; min?: number }[] = [
+  { value: 'all', label: 'All Prices' },
+  { value: 'free', label: 'Free', max: 0 },
+  { value: 'cheap', label: '<$1/M', max: 0.000001 },
+  { value: 'medium', label: '$1-10/M', min: 0.000001, max: 0.00001 },
+  { value: 'expensive', label: '>$10/M', min: 0.00001 },
+]
+
+const CONTEXT_RANGES: { value: ContextRange; label: string; min?: number }[] = [
+  { value: 'all', label: 'Any Context' },
+  { value: '8k+', label: '8K+', min: 8000 },
+  { value: '32k+', label: '32K+', min: 32000 },
+  { value: '128k+', label: '128K+', min: 128000 },
+  { value: '200k+', label: '200K+', min: 200000 },
+]
+
 export function ModelSelector() {
   const {
     availableModels,
@@ -20,6 +39,9 @@ export function ModelSelector() {
 
   const [searchQuery, setSearchQuery] = useState('')
   const [providerFilter, setProviderFilter] = useState<string | null>(null)
+  const [priceFilter, setPriceFilter] = useState<PriceRange>('all')
+  const [contextFilter, setContextFilter] = useState<ContextRange>('all')
+  const [showFilters, setShowFilters] = useState(false)
   const searchTerm = searchQuery.trim().toLowerCase()
 
   // Extract unique providers
@@ -49,9 +71,34 @@ export function ModelSelector() {
       const matchesProvider =
         !providerFilter || model.id.startsWith(`${providerFilter}/`)
 
-      return matchesSearch && matchesProvider
+      // Price filter
+      const promptPrice = parseFloat(model.pricing.prompt) || 0
+      const priceRange = PRICE_RANGES.find((r) => r.value === priceFilter)
+      let matchesPrice = true
+      if (priceRange && priceFilter !== 'all') {
+        if (priceRange.max !== undefined && priceRange.min !== undefined) {
+          matchesPrice = promptPrice >= priceRange.min && promptPrice <= priceRange.max
+        } else if (priceRange.max !== undefined) {
+          matchesPrice = promptPrice <= priceRange.max
+        } else if (priceRange.min !== undefined) {
+          matchesPrice = promptPrice >= priceRange.min
+        }
+      }
+
+      // Context length filter
+      const contextRange = CONTEXT_RANGES.find((r) => r.value === contextFilter)
+      const matchesContext =
+        contextFilter === 'all' || (contextRange?.min !== undefined && model.context_length >= contextRange.min)
+
+      return matchesSearch && matchesProvider && matchesPrice && matchesContext
     })
-  }, [availableModels, searchTerm, providerFilter])
+  }, [availableModels, searchTerm, providerFilter, priceFilter, contextFilter])
+
+  const activeFilterCount = [
+    priceFilter !== 'all',
+    contextFilter !== 'all',
+    providerFilter !== null,
+  ].filter(Boolean).length
 
   const providersForTags = useMemo(() => {
     if (providerFilter && !providers.includes(providerFilter)) {
@@ -96,23 +143,46 @@ export function ModelSelector() {
     )
   }
 
+  const clearAllFilters = () => {
+    setProviderFilter(null)
+    setPriceFilter('all')
+    setContextFilter('all')
+    setSearchQuery('')
+  }
+
   return (
     <Card className="h-full min-h-0 flex flex-col">
       <CardHeader className="pb-3 shrink-0">
         <div className="flex items-center justify-between gap-2 flex-wrap sm:flex-nowrap">
           <div className="min-w-0">
             <CardTitle className="text-base sm:text-lg">Model Selection</CardTitle>
             <CardDescription className="text-xs sm:text-sm">
-              {selectedModelIds.length} model{selectedModelIds.length !== 1 ? 's' : ''}{' '}
-              queued
+              {filteredModels.length} of {availableModels.length} models
+              {selectedModelIds.length > 0 && ` • ${selectedModelIds.length} selected`}
             </CardDescription>
           </div>
-          {selectedModelIds.length > 0 && (
-            <Button variant="ghost" size="sm" onClick={clearSelectedModels} className="shrink-0">
-              <X className="h-4 w-4 mr-1" />
-              Clear
+          <div className="flex items-center gap-1 shrink-0">
+            <Button
+              variant={showFilters ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowFilters(!showFilters)}
+              className="relative"
+            >
+              <SlidersHorizontal className="h-4 w-4 sm:mr-1" />
+              <span className="hidden sm:inline">Filters</span>
+              {activeFilterCount > 0 && (
+                <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-primary text-[10px] text-primary-foreground flex items-center justify-center">
+                  {activeFilterCount}
+                </span>
+              )}
             </Button>
-          )}
+            {selectedModelIds.length > 0 && (
+              <Button variant="ghost" size="sm" onClick={clearSelectedModels}>
+                <X className="h-4 w-4 mr-1" />
+                Clear
+              </Button>
+            )}
+          </div>
         </div>
       </CardHeader>
 
@@ -129,6 +199,54 @@ export function ModelSelector() {
           </div>
         </div>
 
+        {showFilters && (
+          <div className="space-y-3 p-3 bg-muted/50 rounded-xl border border-border/50">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium text-muted-foreground flex items-center gap-1">
+                <Filter className="h-3 w-3" />
+                Filters
+              </span>
+              {activeFilterCount > 0 && (
+                <Button variant="ghost" size="sm" className="h-6 text-xs" onClick={clearAllFilters}>
+                  Clear all
+                </Button>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <span className="text-xs text-muted-foreground">Price (per 1M tokens)</span>
+              <div className="flex flex-wrap gap-1.5">
+                {PRICE_RANGES.map((range) => (
+                  <Badge
+                    key={range.value}
+                    variant={priceFilter === range.value ? 'default' : 'outline'}
+                    className="cursor-pointer text-xs"
+                    onClick={() => setPriceFilter(range.value)}
+                  >
+                    {range.label}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <span className="text-xs text-muted-foreground">Context Length</span>
+              <div className="flex flex-wrap gap-1.5">
+                {CONTEXT_RANGES.map((range) => (
+                  <Badge
+                    key={range.value}
+                    variant={contextFilter === range.value ? 'default' : 'outline'}
+                    className="cursor-pointer text-xs"
+                    onClick={() => setContextFilter(range.value)}
+                  >
+                    {range.label}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
         <div
           className="flex gap-2 overflow-x-auto pb-1 -mx-1 px-1 scrollbar-hidden"
           onWheel={handleProviderWheel}