feat(15-01): filter provider icons in ModelSearchDialog to available providers

- Gemini and fal.ai always shown (always-available providers)
- Replicate, Kie.ai, WaveSpeed icons only shown when API key is configured
- Reset provider filter to "all" if selected provider becomes unavailable
- Fix WaveSpeed active color from orange to purple (matching its badge color)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/modals/ModelSearchDialog.tsx

@@ -405,6 +405,22 @@ export function ModelSearchDialog({
     }
   };
 
+  // Compute which providers are available based on API keys
+  const availableProviders = useMemo(() => {
+    const providers = new Set<ProviderType>(["gemini", "fal"]); // Always available
+    if (replicateApiKey) providers.add("replicate");
+    if (kieApiKey) providers.add("kie");
+    if (wavespeedApiKey) providers.add("wavespeed");
+    return providers;
+  }, [replicateApiKey, kieApiKey, wavespeedApiKey]);
+
+  // Reset provider filter if current selection becomes unavailable
+  useEffect(() => {
+    if (providerFilter !== "all" && !availableProviders.has(providerFilter as ProviderType)) {
+      setProviderFilter("all");
+    }
+  }, [providerFilter, availableProviders]);
+
   // Filter recent models by capability
   const filteredRecentModels = useMemo(() => {
     return recentModels
@@ -585,7 +601,7 @@ export function ModelSearchDialog({
               />
             </div>
 
-            {/* Provider Filter - Icon Buttons */}
+            {/* Provider Filter - Icon Buttons (only show available providers) */}
             <div className="flex items-center gap-0.5 bg-neutral-700/50 rounded p-0.5">
               <button
                 onClick={() => setProviderFilter("all")}
@@ -598,6 +614,7 @@ export function ModelSearchDialog({
               >
                 All
               </button>
+              {availableProviders.has("gemini") && (
                 <button
                   onClick={() => setProviderFilter("gemini")}
                   title="Gemini"
@@ -609,6 +626,8 @@ export function ModelSearchDialog({
                 >
                   <GeminiIcon />
                 </button>
+              )}
+              {availableProviders.has("replicate") && (
                 <button
                   onClick={() => setProviderFilter("replicate")}
                   title="Replicate"
@@ -620,6 +639,8 @@ export function ModelSearchDialog({
                 >
                   <ReplicateIcon />
                 </button>
+              )}
+              {availableProviders.has("fal") && (
                 <button
                   onClick={() => setProviderFilter("fal")}
                   title="fal.ai"
@@ -631,6 +652,8 @@ export function ModelSearchDialog({
                 >
                   <FalIcon />
                 </button>
+              )}
+              {availableProviders.has("kie") && (
                 <button
                   onClick={() => setProviderFilter("kie")}
                   title="Kie.ai"
@@ -642,17 +665,20 @@ export function ModelSearchDialog({
                 >
                   <KieIcon />
                 </button>
+              )}
+              {availableProviders.has("wavespeed") && (
                 <button
                   onClick={() => setProviderFilter("wavespeed")}
                   title="WaveSpeed"
                   className={`p-2 rounded transition-colors ${
                     providerFilter === "wavespeed"
-                    ? "bg-orange-500/20 text-orange-300"
+                      ? "bg-purple-500/20 text-purple-300"
-                    : "text-neutral-400 hover:text-orange-300 hover:bg-neutral-700"
+                      : "text-neutral-400 hover:text-purple-300 hover:bg-neutral-700"
                   }`}
                 >
                   <WaveSpeedIcon />
                 </button>
+              )}
             </div>
 
             {/* Capability Filter */}